@karaoke-cms/theme-default 0.9.0 → 0.9.3

package/src/components/InstallBox.astro

@@ -0,0 +1,71 @@
+---
+interface Props {
+  command?: string;
+  size?: 'sm' | 'lg';
+}
+const { command = 'npm create @karaoke-cms@latest', size = 'sm' } = Astro.props;
+---
+
+<div class:list={['install-box', { large: size === 'lg' }]}>
+  <code>{command}</code>
+  <button class="copy-btn" data-copy={command} aria-label="Copy to clipboard">
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <rect x="9" y="9" width="13" height="13" rx="2"/>
+      <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
+    </svg>
+  </button>
+</div>
+
+<script>
+const CHECK_SVG = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>`;
+const COPY_SVG  = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>`;
+
+document.querySelectorAll<HTMLButtonElement>('.copy-btn').forEach(btn => {
+  if (btn.dataset.bound) return;
+  btn.dataset.bound = '1';
+  btn.addEventListener('click', () => {
+    const text = btn.getAttribute('data-copy') ?? '';
+    navigator.clipboard.writeText(text).then(() => {
+      btn.innerHTML = CHECK_SVG;
+      setTimeout(() => { btn.innerHTML = COPY_SVG; }, 1800);
+    });
+  });
+});
+</script>
+
+<style>
+  .install-box {
+    display: inline-flex;
+    align-items: center;
+    background: var(--color-section-dark-2, #1e293b);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: var(--radius-lg, 12px);
+    overflow: hidden;
+  }
+  .install-box code {
+    background: transparent;
+    border: none;
+    padding: 10px 16px;
+    color: #a5b4fc;
+    font-size: 0.9rem;
+    font-family: var(--font-mono);
+    white-space: nowrap;
+  }
+  .install-box.large code {
+    font-size: 1rem;
+    padding: 12px 20px;
+  }
+  .copy-btn {
+    background: none;
+    border: none;
+    border-left: 1px solid rgba(255, 255, 255, 0.1);
+    padding: 10px 14px;
+    color: #64748b;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    transition: color 0.15s;
+  }
+  .copy-btn:hover { color: #a5b4fc; }
+</style>

package/src/components/MetaphorSection.astro

@@ -0,0 +1,69 @@
+---
+interface Props {
+  icon?: string;
+}
+const { icon = '🎤' } = Astro.props;
+---
+
+<section class="metaphor">
+  <div class="container">
+    <div class="metaphor-inner">
+      <div class="metaphor-icon" aria-hidden="true">{icon}</div>
+      <div class="metaphor-text">
+        <h2><slot name="heading">The karaoke idea</slot></h2>
+        <p>
+          <slot>
+            In karaoke, the stage is set, the music is playing, the lyrics scroll on screen.
+            <strong>You just show up and sing.</strong>
+            karaoke-cms works the same way: the infrastructure is in place, the AI is running,
+            the site is deployed. You write. We handle the rest.
+          </slot>
+        </p>
+      </div>
+    </div>
+  </div>
+</section>
+
+<style>
+  .metaphor {
+    background: var(--color-bg);
+    border-bottom: 1px solid var(--color-border);
+    padding: 72px 0;
+  }
+  .container {
+    max-width: var(--width-landing, 1100px);
+    margin: 0 auto;
+    padding: 0 24px;
+  }
+  .metaphor-inner {
+    display: flex;
+    align-items: center;
+    gap: 48px;
+  }
+  .metaphor-icon {
+    font-size: 4rem;
+    flex-shrink: 0;
+    line-height: 1;
+  }
+  .metaphor-text h2 {
+    font-size: clamp(1.5rem, 2.5vw, 2rem);
+    font-weight: 700;
+    letter-spacing: -0.01em;
+    color: var(--color-text);
+    margin: 0 0 12px;
+  }
+  .metaphor-text p {
+    font-size: 1.0625rem;
+    line-height: 1.7;
+    color: var(--color-muted);
+    max-width: 600px;
+    margin: 0;
+  }
+  .metaphor-text strong {
+    color: var(--color-text);
+  }
+  @media (max-width: 640px) {
+    .metaphor-inner { flex-direction: column; gap: 24px; }
+    .metaphor-icon  { font-size: 3rem; }
+  }
+</style>

package/src/components/ScaleSection.astro

@@ -0,0 +1,146 @@
+---
+interface ScaleRow {
+  label: string;
+  pct:   number; // 0–100
+}
+
+interface Props {
+  label?:   string;
+  heading?: string;
+  body?:    string;
+  items?:   string[];
+  scale?:   ScaleRow[];
+}
+
+const {
+  label   = 'Scale',
+  heading = 'Starts simple. Grows with you.',
+  body    = 'Launch a personal blog in an afternoon. Grow into a multi-author editorial platform on the same foundation — same npm packages, same git workflow, same privacy model.',
+  items   = [
+    'Collections scoped per team or department',
+    'Module system for search, comments, custom features',
+    'Composable layout regions — swap any component',
+    'Publish your own npm theme for your brand',
+  ],
+  scale   = [
+    { label: 'Personal blog',      pct: 28  },
+    { label: 'Team wiki',          pct: 52  },
+    { label: 'Docs site',          pct: 70  },
+    { label: 'Enterprise platform', pct: 100 },
+  ],
+} = Astro.props;
+---
+
+<section class="scale-section">
+  <div class="container">
+    <div class="inner">
+      <div class="copy">
+        <span class="section-label on-dark">{label}</span>
+        <h2>{heading}</h2>
+        <p>{body}</p>
+        <ul>
+          {items.map(item => (
+            <li>
+              <span class="dot" aria-hidden="true"></span>
+              <span>{item}</span>
+            </li>
+          ))}
+        </ul>
+      </div>
+      <div class="scale-bars" aria-hidden="true">
+        {scale.map(row => (
+          <div class="scale-row">
+            <span class="scale-label">{row.label}</span>
+            <div class="scale-track">
+              <div class="scale-fill" style={`width: ${row.pct}%`}></div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  </div>
+</section>
+
+<style>
+  .scale-section {
+    background: var(--color-section-dark, #0f172a);
+    padding: 88px 0;
+  }
+  .container {
+    max-width: var(--width-landing, 1100px);
+    margin: 0 auto;
+    padding: 0 24px;
+  }
+  .inner {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 64px;
+    align-items: center;
+  }
+  .copy h2 {
+    font-size: clamp(1.5rem, 3vw, 2.25rem);
+    font-weight: 700;
+    letter-spacing: -0.01em;
+    color: var(--color-on-dark, #e2e8f0);
+    margin: 0 0 16px;
+  }
+  .copy p {
+    color: var(--color-on-dark-2, #94a3b8);
+    font-size: 1.0625rem;
+    line-height: 1.7;
+    margin: 0 0 28px;
+  }
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+  ul li {
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+    color: var(--color-on-dark-2, #94a3b8);
+    font-size: 0.9375rem;
+  }
+  .dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: var(--color-accent, #6366f1);
+    flex-shrink: 0;
+    margin-top: 8px;
+  }
+  .scale-bars {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+  }
+  .scale-row {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+  .scale-label {
+    font-size: 0.8125rem;
+    color: var(--color-on-dark-2, #94a3b8);
+    font-weight: 500;
+  }
+  .scale-track {
+    height: 8px;
+    background: rgba(255, 255, 255, 0.08);
+    border-radius: 999px;
+    overflow: hidden;
+  }
+  .scale-fill {
+    height: 100%;
+    background: linear-gradient(90deg, var(--color-accent, #6366f1), var(--color-accent-2, #8b5cf6));
+    border-radius: 999px;
+  }
+  @media (max-width: 768px) {
+    .inner { grid-template-columns: 1fr; gap: 40px; }
+    .scale-bars { display: none; }
+  }
+</style>

package/src/index.ts

@@ -1,17 +1,31 @@
 import type { AstroIntegration } from 'astro';
-import type { KaraokeConfig } from '@karaoke-cms/astro';
 import { fileURLToPath } from 'url';
+import { existsSync } from 'fs';
 
 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 }) => {
-        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` });
+      'astro:config:setup': ({ injectRoute, updateConfig, config: astroConfig }) => {
+        // 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.
+        // Skip injecting '/' if the user already has src/pages/index.astro.
+        const userIndex = fileURLToPath(new URL('src/pages/index.astro', astroConfig.root));
+        if (!existsSync(userIndex)) {
+          injectRoute({ pattern: '/', entrypoint: `${__dirname}pages/index.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 +43,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/pages/404.astro

@@ -1,9 +1,9 @@
 ---
-import Base from '@karaoke-cms/astro/layouts/Base.astro';
+import DefaultPage from '@karaoke-cms/astro/layouts/DefaultPage.astro';
 import { siteTitle } from 'virtual:karaoke-cms/config';
 ---
 
-<Base title={`Page not found — ${siteTitle}`}>
+<DefaultPage title={`Page not found — ${siteTitle}`}>
   <div class="post-header">
     <h1>Page not found</h1>
     <p class="post-meta">The page you're looking for doesn't exist or hasn't been published.</p>
@@ -11,4 +11,4 @@ import { siteTitle } from 'virtual:karaoke-cms/config';
   <div class="prose">
     <p><a href="/">Go home →</a></p>
   </div>
-</Base>
+</DefaultPage>

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

@@ -1,6 +1,6 @@
 ---
 import { getCollection, render } from 'astro:content';
-import Base from '@karaoke-cms/astro/layouts/Base.astro';
+import DefaultPage from '@karaoke-cms/astro/layouts/DefaultPage.astro';
 import ModuleLoader from '@karaoke-cms/astro/components/ModuleLoader.astro';
 import { siteTitle } from 'virtual:karaoke-cms/config';
 
@@ -27,7 +27,7 @@ const related = relatedIds.length > 0
   : [];
 ---
 
-<Base title={`${entry.data.title} — ${siteTitle}`} description={entry.data.description} type="article">
+<DefaultPage title={`${entry.data.title} — ${siteTitle}`} description={entry.data.description} type="article">
   <article>
     <div class="post-header">
       <h1>{entry.data.title}</h1>
@@ -63,4 +63,4 @@ const related = relatedIds.length > 0
     </div>
   </article>
   <ModuleLoader comments={entry.data.comments} />
-</Base>
+</DefaultPage>

package/src/pages/docs/index.astro

@@ -1,13 +1,13 @@
 ---
 import { getCollection } from 'astro:content';
-import Base from '@karaoke-cms/astro/layouts/Base.astro';
+import DefaultPage from '@karaoke-cms/astro/layouts/DefaultPage.astro';
 import { siteTitle } from 'virtual:karaoke-cms/config';
 
 const docs = (await getCollection('docs', ({ data }) => data.publish === true))
   .sort((a, b) => a.data.title.localeCompare(b.data.title));
 ---
 
-<Base title={`Docs — ${siteTitle}`}>
+<DefaultPage title={`Docs — ${siteTitle}`}>
   <div class="listing-header">
     <h1>Docs</h1>
   </div>
@@ -28,4 +28,4 @@ const docs = (await getCollection('docs', ({ data }) => data.publish === true))
       <p>Create a Markdown file in your vault's <code>docs/</code> folder and set <code>publish: true</code> in the frontmatter to make it appear here.</p>
     </div>
   )}
-</Base>
+</DefaultPage>

package/src/pages/index.astro

@@ -1,65 +1,23 @@
 ---
-import { getCollection } from 'astro:content';
-import Base from '@karaoke-cms/astro/layouts/Base.astro';
+import DefaultPage from '@karaoke-cms/astro/layouts/DefaultPage.astro';
 import { siteTitle, siteDescription } from 'virtual:karaoke-cms/config';
+import Hero from '../components/Hero.astro';
+import MetaphorSection from '../components/MetaphorSection.astro';
+import AudienceGrid from '../components/AudienceGrid.astro';
+import FeatureGrid from '../components/FeatureGrid.astro';
+import HowItWorks from '../components/HowItWorks.astro';
+import ScaleSection from '../components/ScaleSection.astro';
+import CtaSection from '../components/CtaSection.astro';
 
-const posts = (await getCollection('blog', ({ data }) => data.publish === true))
-  .sort((a, b) => (b.data.date?.valueOf() ?? 0) - (a.data.date?.valueOf() ?? 0))
-  .slice(0, 5);
-
-const docs = (await getCollection('docs', ({ data }) => data.publish === true))
-  .sort((a, b) => a.data.title.localeCompare(b.data.title))
-  .slice(0, 5);
+const ghUrl = 'https://github.com/Tautai-Net/karaoke-cms';
 ---
 
-<Base title={siteTitle} description={siteDescription}>
-  <div class="home-grid">
-    <section class="home-section">
-      <h2>Blog</h2>
-      {posts.length > 0 ? (
-        <>
-          <ul class="post-list">
-            {posts.map(post => (
-              <li>
-                <a href={`/blog/${post.id}`}>{post.data.title}</a>
-                {post.data.date && (
-                  <span class="post-date">{post.data.date.toISOString().slice(0, 10)}</span>
-                )}
-              </li>
-            ))}
-          </ul>
-          <a href="/blog" class="view-all">View all →</a>
-        </>
-      ) : (
-        <div class="empty-state">
-          <p>No posts yet.</p>
-          <p>Add a Markdown file to <code>blog/</code> with <code>publish: true</code> in the frontmatter.</p>
-        </div>
-      )}
-    </section>
-
-    <section class="home-section">
-      <h2>Docs</h2>
-      {docs.length > 0 ? (
-        <>
-          <ul class="post-list">
-            {docs.map(doc => (
-              <li>
-                <a href={`/docs/${doc.id}`}>{doc.data.title}</a>
-                {doc.data.date && (
-                  <span class="post-date">{doc.data.date.toISOString().slice(0, 10)}</span>
-                )}
-              </li>
-            ))}
-          </ul>
-          <a href="/docs" class="view-all">View all →</a>
-        </>
-      ) : (
-        <div class="empty-state">
-          <p>No docs yet.</p>
-          <p>Add a Markdown file to <code>docs/</code> with <code>publish: true</code> in the frontmatter.</p>
-        </div>
-      )}
-    </section>
-  </div>
-</Base>
+<DefaultPage title={siteTitle} description={siteDescription} variant="landing">
+  <Hero ghUrl={ghUrl} />
+  <MetaphorSection />
+  <AudienceGrid />
+  <FeatureGrid />
+  <HowItWorks />
+  <ScaleSection />
+  <CtaSection ghUrl={ghUrl} />
+</DefaultPage>

package/src/pages/tags/[tag].astro

@@ -1,6 +1,6 @@
 ---
 import { getCollection } from 'astro:content';
-import Base from '@karaoke-cms/astro/layouts/Base.astro';
+import DefaultPage from '@karaoke-cms/astro/layouts/DefaultPage.astro';
 import { siteTitle } from 'virtual:karaoke-cms/config';
 
 export async function getStaticPaths() {
@@ -34,7 +34,7 @@ function href(entry: { collection: string; id: string }) {
 }
 ---
 
-<Base title={`#${tag} — ${siteTitle}`}>
+<DefaultPage title={`#${tag} — ${siteTitle}`}>
   <div class="listing-header">
     <h1>#{tag}</h1>
     <p><a href="/tags">← All tags</a></p>
@@ -50,4 +50,4 @@ function href(entry: { collection: string; id: string }) {
       </li>
     ))}
   </ul>
-</Base>
+</DefaultPage>

package/src/pages/tags/index.astro

@@ -1,6 +1,6 @@
 ---
 import { getCollection } from 'astro:content';
-import Base from '@karaoke-cms/astro/layouts/Base.astro';
+import DefaultPage from '@karaoke-cms/astro/layouts/DefaultPage.astro';
 import { siteTitle } from 'virtual:karaoke-cms/config';
 
 const [blog, docs] = await Promise.all([
@@ -19,7 +19,7 @@ for (const entry of [...blog, ...docs]) {
 const tags = [...counts.entries()].sort((a, b) => a[0].localeCompare(b[0]));
 ---
 
-<Base title={`Tags — ${siteTitle}`}>
+<DefaultPage title={`Tags — ${siteTitle}`}>
   <div class="listing-header">
     <h1>Tags</h1>
   </div>
@@ -38,4 +38,4 @@ const tags = [...counts.entries()].sort((a, b) => a[0].localeCompare(b[0]));
       <p>Tags are added to posts via the <code>tags</code> frontmatter field or by AI enrichment.</p>
     </div>
   )}
-</Base>
+</DefaultPage>

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.
+ */