@karaoke-cms/theme-default 0.9.0 → 0.9.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@karaoke-cms/theme-default",
   "type": "module",
-  "version": "0.9.0",
+  "version": "0.9.2",
   "description": "Default theme for karaoke-cms — two-column knowledge base with blog and docs",
   "main": "./src/index.ts",
   "exports": {
@@ -16,13 +16,16 @@
     "theme",
     "karaoke-cms"
   ],
+  "dependencies": {
+    "@karaoke-cms/module-blog": "0.9.2"
+  },
   "peerDependencies": {
     "astro": ">=6.0.0",
-    "@karaoke-cms/astro": "^0.9.0"
+    "@karaoke-cms/astro": "^0.9.2"
   },
   "devDependencies": {
     "astro": "^6.0.8",
-    "@karaoke-cms/astro": "0.9.0"
+    "@karaoke-cms/astro": "0.9.2"
   },
   "scripts": {
     "test": "echo \"Stub — no tests\""

package/src/index.ts

@@ -1,17 +1,26 @@
 import type { AstroIntegration } from 'astro';
-import type { KaraokeConfig } from '@karaoke-cms/astro';
 import { fileURLToPath } from 'url';
 
 const __dirname = fileURLToPath(new URL('.', import.meta.url));
 
-export default function themeDefault(_config: KaraokeConfig): AstroIntegration {
+// Constructs the Astro integration for theme-default.
+// Exported separately so it can be called by both the new factory (themeDefault)
+// and the legacy default export without triggering a @karaoke-cms/astro import.
+function buildIntegration(): AstroIntegration {
   return {
     name: '@karaoke-cms/theme-default',
     hooks: {
       'astro:config:setup': ({ injectRoute, updateConfig }) => {
+        // Blog routes are owned by @karaoke-cms/module-blog.
+        // theme-default injects them here so that the old string-based theme
+        // config (theme: '@karaoke-cms/theme-default') continues to work.
+        // When the new modules[] array config is fully adopted, theme-default
+        // will stop injecting these and let the core integration do it.
+        injectRoute({ pattern: '/blog',         entrypoint: '@karaoke-cms/module-blog/pages/list' });
+        injectRoute({ pattern: '/blog/[slug]',  entrypoint: '@karaoke-cms/module-blog/pages/post' });
+
+        // Docs, tags, and homepage remain owned by theme-default
         injectRoute({ pattern: '/',             entrypoint: `${__dirname}pages/index.astro` });
-        injectRoute({ pattern: '/blog',         entrypoint: `${__dirname}pages/blog/index.astro` });
-        injectRoute({ pattern: '/blog/[slug]',  entrypoint: `${__dirname}pages/blog/[slug].astro` });
         injectRoute({ pattern: '/docs',         entrypoint: `${__dirname}pages/docs/index.astro` });
         injectRoute({ pattern: '/docs/[slug]',  entrypoint: `${__dirname}pages/docs/[slug].astro` });
         injectRoute({ pattern: '/tags',         entrypoint: `${__dirname}pages/tags/index.astro` });
@@ -29,3 +38,36 @@ export default function themeDefault(_config: KaraokeConfig): AstroIntegration {
     },
   };
 }
+
+/**
+ * New API: returns a ThemeInstance for use with defineConfig().
+ *
+ * Note: ThemeInstance is constructed manually here (without importing defineTheme
+ * from @karaoke-cms/astro) so that this file remains loadable via Node's native
+ * ESM when used through the legacy string-based theme config path.
+ *
+ * @example
+ * // karaoke.config.ts
+ * import { themeDefault } from '@karaoke-cms/theme-default';
+ * export default defineConfig({
+ *   theme: themeDefault({ implements: [blog({ mount: '/blog' })] }),
+ * });
+ */
+export function themeDefault(config: { implements?: Array<{ id: string }> } = {}) {
+  return {
+    _type: 'theme-instance' as const,
+    id: 'theme-default',
+    implementedModuleIds: (config.implements ?? []).map(m => m.id),
+    toAstroIntegration: () => buildIntegration(),
+  };
+}
+
+/**
+ * Legacy default export — supports the old string-based theme config:
+ *   theme: '@karaoke-cms/theme-default'
+ * The core integration calls themeModule.default(config) when loading
+ * themes by package name string.
+ */
+export default function themeDefaultLegacy(_config: unknown): AstroIntegration {
+  return buildIntegration();
+}

package/src/styles/blog.css

@@ -0,0 +1,9 @@
+/* theme-default implementation of the blog module CSS contract.
+ *
+ * These rules target the class names defined in @karaoke-cms/module-blog cssContract.
+ * Currently the blog-specific rules live in ../styles.css (shared with docs).
+ * A future pass will extract them fully here and remove the duplication.
+ *
+ * TODO: move .post-list, .post-header, .post-meta, .post-footer, .post-tags,
+ *       .tag, .tag-list, .related-posts here and out of styles.css.
+ */

package/src/styles.css

@@ -201,17 +201,47 @@ footer {
 .footer-inner {
   max-width: var(--width-site);
   margin: 0 auto;
-  padding: var(--spacing-lg) var(--spacing-md);
+  padding: 0 var(--spacing-md);
+}
+
+.footer-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: var(--spacing-lg);
+  padding: var(--spacing-xl) 0 var(--spacing-lg);
+}
+
+.footer-col {
+  min-width: 0;
+}
+
+.footer-brand {
+  font-weight: 700;
+  font-size: var(--font-size-sm);
+  color: var(--color-text);
+  margin: 0 0 var(--spacing-sm);
+}
+
+.footer-tagline {
+  font-size: var(--font-size-sm);
+  color: var(--color-muted);
+  margin: 0;
+  line-height: var(--line-height-body);
+}
+
+.footer-below {
+  border-top: 1px solid var(--color-border);
+  padding: var(--spacing-md) 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--spacing-md);
-  color: var(--color-muted);
   font-size: var(--font-size-sm);
+  color: var(--color-muted);
 }
 
 .footer-attr {
-  margin-left: auto;
+  flex-shrink: 0;
 }
 
 footer a {
@@ -223,6 +253,26 @@ footer a:hover {
   color: var(--color-link);
 }
 
+/* Footer vertical menu — top-level entry as column heading */
+.footer-col nav.karaoke-menu > ul > li > a {
+  font-size: var(--font-size-sm);
+  font-weight: 600;
+  color: var(--color-text);
+  display: block;
+  padding-bottom: var(--spacing-xs);
+}
+
+.footer-col nav.karaoke-menu > ul > li > ul a {
+  font-size: var(--font-size-sm);
+  color: var(--color-muted);
+  display: block;
+  padding: 2px 0;
+}
+
+.footer-col nav.karaoke-menu > ul > li > ul a:hover {
+  color: var(--color-link);
+}
+
 /* --- Typography --- */
 
 h1, h2, h3, h4 {
@@ -378,14 +428,16 @@ pre code {
     width: 100%;
   }
 
-  .footer-inner {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: var(--spacing-sm);
+  .footer-grid {
+    grid-template-columns: 1fr 1fr;
+    gap: var(--spacing-md);
+    padding: var(--spacing-lg) 0 var(--spacing-md);
   }
 
-  .footer-attr {
-    margin-left: 0;
+  .footer-below {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--spacing-xs);
   }
 }
 

package/src/pages/blog/[slug].astro

@@ -1,66 +0,0 @@
----
-import { getCollection, render } from 'astro:content';
-import Base from '@karaoke-cms/astro/layouts/Base.astro';
-import ModuleLoader from '@karaoke-cms/astro/components/ModuleLoader.astro';
-import { siteTitle } from 'virtual:karaoke-cms/config';
-
-export async function getStaticPaths() {
-  const posts = await getCollection('blog', ({ data }) => data.publish === true);
-  return posts.map(entry => ({
-    params: { slug: entry.id },
-    props: { entry },
-  }));
-}
-
-const { entry } = Astro.props;
-const { Content } = await render(entry);
-
-// Resolve related entries by ID across both collections
-const relatedIds = entry.data.related ?? [];
-const related = relatedIds.length > 0
-  ? (await Promise.all([
-      getCollection('blog', ({ data }) => data.publish === true),
-      getCollection('docs', ({ data }) => data.publish === true),
-    ]))
-    .flat()
-    .filter(e => relatedIds.includes(e.id))
-  : [];
----
-
-<Base title={`${entry.data.title} — ${siteTitle}`} description={entry.data.description} type="article">
-  <article>
-    <div class="post-header">
-      <h1>{entry.data.title}</h1>
-      <div class="post-meta">
-        {entry.data.date && <span>{entry.data.date.toISOString().slice(0, 10)}</span>}
-        {entry.data.author && entry.data.date && <span> · </span>}
-        {entry.data.author && (
-          <span>{Array.isArray(entry.data.author) ? entry.data.author.join(' · ') : entry.data.author}</span>
-        )}
-        {entry.data.reading_time && <span> · {entry.data.reading_time} min read</span>}
-      </div>
-    </div>
-    <div class="prose">
-      <Content />
-    </div>
-    <div class="post-footer">
-      {entry.data.tags && entry.data.tags.length > 0 && (
-        <div class="post-tags">
-          {entry.data.tags.map(tag => <a href={`/tags/${tag}`} class="tag">#{tag}</a>)}
-        </div>
-      )}
-      {related.length > 0 && (
-        <div class="related-posts">
-          <p class="related-label">Related</p>
-          <ul>
-            {related.map(r => (
-              <li><a href={`/${r.collection}/${r.id}`}>{r.data.title}</a></li>
-            ))}
-          </ul>
-        </div>
-      )}
-      <a href="/blog">← Blog</a>
-    </div>
-  </article>
-  <ModuleLoader comments={entry.data.comments} />
-</Base>

package/src/pages/blog/index.astro

@@ -1,31 +0,0 @@
----
-import { getCollection } from 'astro:content';
-import Base from '@karaoke-cms/astro/layouts/Base.astro';
-import { siteTitle } from 'virtual:karaoke-cms/config';
-
-const posts = (await getCollection('blog', ({ data }) => data.publish === true))
-  .sort((a, b) => (b.data.date?.valueOf() ?? 0) - (a.data.date?.valueOf() ?? 0));
----
-
-<Base title={`Blog — ${siteTitle}`}>
-  <div class="listing-header">
-    <h1>Blog</h1>
-  </div>
-  {posts.length > 0 ? (
-    <ul class="post-list">
-      {posts.map(post => (
-        <li>
-          {post.data.date && (
-            <span class="post-date">{post.data.date.toISOString().slice(0, 10)}</span>
-          )}
-          <a href={`/blog/${post.id}`}>{post.data.title}</a>
-        </li>
-      ))}
-    </ul>
-  ) : (
-    <div class="empty-state">
-      <p>No posts published yet.</p>
-      <p>Create a Markdown file in your vault's <code>blog/</code> folder and set <code>publish: true</code> in the frontmatter to make it appear here.</p>
-    </div>
-  )}
-</Base>