@karaoke-cms/theme-default 0.9.2 → 0.9.5

package/README.md

@@ -1,65 +1,85 @@
 # @karaoke-cms/theme-default
 
-Two-column knowledge base theme for karaoke-cms. Includes blog, docs, and tags sections with a clean system-UI design.
+Two-column knowledge base theme for karaoke-cms — blog, docs, and tags with a clean system-UI design and automatic dark mode.
 
-## Where it belongs
+## Installation
 
-`packages/theme-default/` in the monorepo. Activated via `karaoke.config.ts`:
+```bash
+npm install @karaoke-cms/theme-default @karaoke-cms/module-blog @karaoke-cms/module-docs
+```
+
+## Usage
 
 ```ts
 // karaoke.config.ts
+import { defineConfig } from '@karaoke-cms/astro';
 import { loadEnv } from '@karaoke-cms/astro/env';
-const { KARAOKE_VAULT } = loadEnv(new URL('.', import.meta.url));
-
-export default {
-  vault: KARAOKE_VAULT,
-  theme: '@karaoke-cms/theme-default',
-};
+import { blog } from '@karaoke-cms/module-blog';
+import { docs } from '@karaoke-cms/module-docs';
+import { themeDefault } from '@karaoke-cms/theme-default';
+
+const env = loadEnv(new URL('.', import.meta.url));
+
+export default defineConfig({
+  vault: env.KARAOKE_VAULT,
+  title: 'My Site',
+  theme: themeDefault({
+    implements: [
+      blog({ mount: '/blog' }),
+      docs({ mount: '/docs' }),
+    ],
+  }),
+});
 ```
 
-`@karaoke-cms/astro` resolves the theme string to this package and loads it as a nested Astro integration at build time.
+## Configuration
+
+Pass modules to `implements` to tell the theme which content sections to wire up. Modules listed here get their routes injected from their own npm packages.
 
-## What it does
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `implements` | `ModuleInstance[]` | `[]` | Content modules this theme integrates |
 
-Injects all site routes and sets the `@theme` Vite alias so that `Base.astro` can resolve `@theme/styles.css`:
+## Routes
 
-| Route | Page |
-|-------|------|
+| Route | Description |
+|-------|-------------|
 | `/` | Home — recent blog posts + recent docs |
-| `/blog` | Blog index — all published posts, sorted by date |
-| `/blog/[slug]` | Blog post — full content with related posts |
-| `/docs` | Docs index — all published docs, sorted alphabetically |
-| `/docs/[slug]` | Doc page — full content |
-| `/tags` | Tags index — all tags with post counts |
-| `/tags/[tag]` | Tag page — posts filtered by tag |
+| `/blog`, `/blog/[slug]`, `/blog/page/[page]` | Blog section (from `module-blog`) |
+| `/docs`, `/docs/list`, `/docs/[slug]` | Docs section (from `module-docs`) |
+| `/tags` | All tags with post counts |
+| `/tags/[tag]` | Posts filtered by tag |
 | `/404` | Not found page |
 
-### Design system
+Routes for modules listed in `implements` are injected by the module package. Other routes are injected by the theme as fallbacks.
 
-`src/styles.css` defines all tokens as CSS variables on `:root`:
+## Design system
+
+All tokens are CSS variables on `:root`:
 
 - **Typography**: `--font-body`, `--font-mono`, `--font-size-base`, `--font-size-sm/lg/xl`
-- **Color**: `--color-bg`, `--color-text`, `--color-muted`, `--color-border`, `--color-link`, `--color-link-hover`, `--color-link-visited`
+- **Color**: `--color-bg`, `--color-text`, `--color-muted`, `--color-border`, `--color-link`
 - **Spacing**: `--spacing-xs/sm/md/lg/xl`
-- **Sizing**: `--width-content` (680px), `--width-site` (800px), `--radius-sm`
+- **Sizing**: `--width-content` (680px), `--width-site` (800px)
 
 Dark mode is automatic via `@media (prefers-color-scheme: dark)` — no JavaScript toggle.
 
-## How to use
+## Layout regions
 
-Install alongside `@karaoke-cms/astro`:
+Configure sidebar content in `karaoke.config.ts`:
 
-```bash
-npm install @karaoke-cms/astro @karaoke-cms/theme-default
+```ts
+layout: {
+  regions: {
+    right: { components: ['recent-posts'] },
+  },
+}
 ```
 
-Set `theme: '@karaoke-cms/theme-default'` (or omit — it's the default) in `karaoke.config.ts`.
-
-Your vault needs `blog/` and/or `docs/` directories with Markdown files. Only files with `publish: true` in frontmatter appear on the site.
+Available: `'header'`, `'main-menu'`, `'search'`, `'recent-posts'`, `'footer'`.
 
-## How it changes the behavior of the system
+## What's new in 0.9.5
 
-- Provides the only routes that make up the site's public pages. Without a theme, nothing is served at `/`.
-- The `@theme` alias means `Base.astro` and all pages resolve styles and components from this package at build time. Switching themes is a one-line change in `karaoke.config.ts`.
-- Does not include `/docs` routes — that differentiates it from `theme-blog`. Suitable for mixed blog + documentation sites.
-- The layout is driven by `Base.astro`'s region system — sidebar content (recent posts, search) is controlled by the `layout.regions` config in `karaoke.config.ts`, not hardcoded in the theme.
+- **`themeDefault()` function API** replaces the old string `theme: '@karaoke-cms/theme-default'`
+- **`implements` option** — pass `blog()` and/or `docs()` module instances to wire up content sections; routes come from the module packages
+- No user-facing visual changes in this release

package/package.json

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

package/src/components/AudienceGrid.astro

@@ -0,0 +1,143 @@
+---
+interface AudienceCard {
+  icon:  string;
+  title: string;
+  body:  string;
+  items: string[];
+}
+
+interface Props {
+  label?:   string;
+  heading?: string;
+  cards?:   AudienceCard[];
+}
+
+const {
+  label   = "Who it's for",
+  heading = 'Built for everyone who publishes',
+  cards   = [
+    {
+      icon:  '⚡',
+      title: 'Developers',
+      body:  'One npm install. All-in on Astro — typed config, virtual modules, zero lock-in. Ship a site in an afternoon. Bring your own theme or build one from scratch.',
+      items: [
+        'TypeScript-first configuration',
+        'Composable theme packages',
+        'Turborepo monorepo, ready to extend',
+      ],
+    },
+    {
+      icon:  '✍️',
+      title: 'Content creators',
+      body:  'Write in Obsidian — your notes app, not a CMS dashboard. No logins, no editors, no friction. Your vault IS your CMS.',
+      items: [
+        'Publish with a single frontmatter flag',
+        'Wikilinks work natively on your live site',
+        'AI fills in descriptions and tags for you',
+      ],
+    },
+    {
+      icon:  '🏢',
+      title: 'Enterprise teams',
+      body:  'Git-native audit trail, private-by-default publishing, AI enrichment pipeline, and a composable module system built to scale.',
+      items: [
+        'Collections scoped per team or department',
+        'CI-enforced privacy gate',
+        'Extends to multi-author editorial workflows',
+      ],
+    },
+  ],
+} = Astro.props;
+---
+
+<section class="audiences">
+  <div class="container">
+    <span class="section-label">{label}</span>
+    <h2>{heading}</h2>
+    <div class="card-grid">
+      {cards.map(card => (
+        <div class="card">
+          <div class="card-icon" aria-hidden="true">{card.icon}</div>
+          <h3>{card.title}</h3>
+          <p>{card.body}</p>
+          <ul>
+            {card.items.map(item => <li>{item}</li>)}
+          </ul>
+        </div>
+      ))}
+    </div>
+  </div>
+</section>
+
+<style>
+  .audiences {
+    background: var(--color-bg-alt, #f8fafc);
+    padding: 88px 0;
+  }
+  .container {
+    max-width: var(--width-landing, 1100px);
+    margin: 0 auto;
+    padding: 0 24px;
+  }
+  h2 {
+    font-size: clamp(1.5rem, 3vw, 2.25rem);
+    font-weight: 700;
+    letter-spacing: -0.01em;
+    color: var(--color-text);
+    margin: 0 0 48px;
+  }
+  .card-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 24px;
+  }
+  .card {
+    background: var(--color-bg);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-lg, 12px);
+    padding: 32px;
+    transition: box-shadow 0.2s, transform 0.2s;
+  }
+  .card:hover {
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
+    transform: translateY(-2px);
+  }
+  .card-icon {
+    font-size: 2rem;
+    line-height: 1;
+    margin-bottom: 16px;
+  }
+  .card h3 {
+    font-size: 1.125rem;
+    font-weight: 700;
+    color: var(--color-text);
+    margin: 0 0 10px;
+  }
+  .card p {
+    font-size: 0.9375rem;
+    color: var(--color-muted);
+    line-height: 1.65;
+    margin: 0 0 16px;
+  }
+  .card ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+  .card ul li {
+    font-size: 0.875rem;
+    color: var(--color-muted);
+    padding: 4px 0 4px 18px;
+    position: relative;
+  }
+  .card ul li::before {
+    content: '·';
+    position: absolute;
+    left: 6px;
+    color: var(--color-accent, #6366f1);
+    font-weight: 700;
+  }
+  @media (max-width: 768px) {
+    .card-grid { grid-template-columns: 1fr; }
+  }
+</style>

package/src/components/CtaSection.astro

@@ -0,0 +1,91 @@
+---
+import InstallBox from './InstallBox.astro';
+
+interface CtaLink {
+  href: string;
+  text: string;
+}
+
+interface Props {
+  heading?: string;
+  sub?:     string;
+  ghUrl?:   string;
+  links?:   CtaLink[];
+}
+
+const {
+  heading = 'Ready to sing?',
+  sub     = 'One command. Your site is running in minutes.',
+  ghUrl,
+  links   = [
+    ...(ghUrl ? [{ href: ghUrl, text: 'GitHub →' }] : []),
+    { href: '/docs', text: 'Documentation →' },
+    { href: '/blog', text: 'Blog →' },
+  ],
+} = Astro.props;
+---
+
+<section class="cta-section">
+  <div class="container">
+    <h2>{heading}</h2>
+    <p>{sub}</p>
+    <InstallBox size="lg" />
+    {links.length > 0 && (
+      <div class="cta-links">
+        {links.map(link => (
+          <a href={link.href} {...(link.href.startsWith('http') ? { target: '_blank', rel: 'noopener' } : {})}>
+            {link.text}
+          </a>
+        ))}
+      </div>
+    )}
+  </div>
+</section>
+
+<style>
+  .cta-section {
+    background: var(--color-bg);
+    border-top: 1px solid var(--color-border);
+    padding: 96px 0;
+    text-align: center;
+  }
+  .container {
+    max-width: var(--width-landing, 1100px);
+    margin: 0 auto;
+    padding: 0 24px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0;
+  }
+  h2 {
+    font-size: clamp(1.6rem, 3vw, 2.25rem);
+    font-weight: 700;
+    letter-spacing: -0.01em;
+    color: var(--color-text);
+    margin: 0 0 12px;
+  }
+  p {
+    font-size: 1.125rem;
+    color: var(--color-muted);
+    margin: 0 0 32px;
+  }
+  .cta-links {
+    display: flex;
+    justify-content: center;
+    gap: 32px;
+    flex-wrap: wrap;
+    margin-top: 32px;
+  }
+  .cta-links a {
+    font-size: 0.9375rem;
+    font-weight: 600;
+    color: var(--color-muted);
+    text-decoration: none;
+    transition: color 0.15s;
+  }
+  .cta-links a:hover {
+    color: var(--color-accent, #6366f1);
+    text-decoration: none;
+  }
+</style>

package/src/components/FeatureGrid.astro

@@ -0,0 +1,138 @@
+---
+interface Feature {
+  icon:  string;
+  title: string;
+  body:  string;
+}
+
+interface Props {
+  label?:    string;
+  heading?:  string;
+  features?: Feature[];
+}
+
+const {
+  label    = "What's included",
+  heading  = 'Everything wired up, out of the box',
+  features = [
+    {
+      icon:  '🔒',
+      title: 'Private by default',
+      body:  'Nothing publishes until you add publish: true. The privacy gate runs at build time and in CI — nothing slips through.',
+    },
+    {
+      icon:  '🤖',
+      title: 'AI-native',
+      body:  'Pre-commit hook enriches every file with OpenAI or Anthropic. Descriptions, reading times, tags, related links — automatic.',
+    },
+    {
+      icon:  '🔗',
+      title: 'Obsidian wikilinks',
+      body:  '[[note]] and [[note|alias]] resolve to real links on your site. Write in Obsidian, publish what you see.',
+    },
+    {
+      icon:  '🎨',
+      title: 'Swap themes in one line',
+      body:  'Default, blog, and minimal themes ship out of the box. Switch with one config change. Build and publish your own as an npm package.',
+    },
+    {
+      icon:  '📡',
+      title: 'RSS · Sitemap · Search',
+      body:  'RSS feed, XML sitemap, and Pagefind full-text search are built in. No plugins to hunt down. No configuration required.',
+    },
+    {
+      icon:  '🚀',
+      title: 'Cloudflare Pages deploy',
+      body:  'GitHub Actions workflow included. Push to main — site builds, privacy check runs, deploys. Done.',
+    },
+  ],
+} = Astro.props;
+---
+
+<section class="features">
+  <div class="container">
+    <span class="section-label">{label}</span>
+    <h2>{heading}</h2>
+    <div class="feature-grid">
+      {features.map(f => (
+        <div class="feature-item">
+          <span class="fi-icon" aria-hidden="true">{f.icon}</span>
+          <div>
+            <h4>{f.title}</h4>
+            <p>{f.body}</p>
+          </div>
+        </div>
+      ))}
+    </div>
+  </div>
+</section>
+
+<style>
+  .features {
+    background: var(--color-bg);
+    border-top: 1px solid var(--color-border);
+    padding: 88px 0;
+  }
+  .container {
+    max-width: var(--width-landing, 1100px);
+    margin: 0 auto;
+    padding: 0 24px;
+  }
+  h2 {
+    font-size: clamp(1.5rem, 3vw, 2.25rem);
+    font-weight: 700;
+    letter-spacing: -0.01em;
+    color: var(--color-text);
+    margin: 0 0 48px;
+  }
+  .feature-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-lg, 12px);
+    overflow: hidden;
+  }
+  .feature-item {
+    padding: 32px;
+    border-right: 1px solid var(--color-border);
+    border-bottom: 1px solid var(--color-border);
+    display: flex;
+    gap: 16px;
+    align-items: flex-start;
+  }
+  /* Remove right border from every 3rd item */
+  .feature-item:nth-child(3n) { border-right: none; }
+  /* Remove bottom border from last row */
+  .feature-item:nth-last-child(-n+3) { border-bottom: none; }
+  .fi-icon {
+    font-size: 1.5rem;
+    flex-shrink: 0;
+    line-height: 1.2;
+  }
+  .feature-item h4 {
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--color-text);
+    margin: 0 0 6px;
+  }
+  .feature-item p {
+    font-size: 0.875rem;
+    line-height: 1.6;
+    color: var(--color-muted);
+    margin: 0;
+  }
+  @media (max-width: 768px) {
+    .feature-grid {
+      grid-template-columns: 1fr;
+      border: none;
+      gap: 1px;
+      background: var(--color-border);
+      border-radius: 0;
+    }
+    .feature-item {
+      border-right: none !important;
+      border-bottom: none !important;
+      background: var(--color-bg);
+    }
+  }
+</style>

package/src/components/Hero.astro

@@ -0,0 +1,141 @@
+---
+import InstallBox from './InstallBox.astro';
+
+interface Props {
+  badge?:  string;
+  ghUrl?:  string;
+  tags?:   string[];
+}
+
+const {
+  badge = 'Open source · Git-native · AI-ready',
+  ghUrl,
+  tags  = ['Astro', 'Obsidian', 'Git', 'AI', 'TypeScript', 'Cloudflare Pages'],
+} = Astro.props;
+---
+
+<section class="hero">
+  <div class="hero-glow" aria-hidden="true"></div>
+  <div class="hero-inner">
+    {badge && <div class="badge">{badge}</div>}
+
+    <h1><slot name="headline">All you have to do<br />is sing.</slot></h1>
+
+    <p class="hero-sub">
+      <slot name="sub">
+        karaoke-cms is a CMS framework built on Obsidian and Git.
+        Write your content. Everything else — publishing, privacy,
+        AI enrichment, navigation — is handled for you.
+      </slot>
+    </p>
+
+    <div class="hero-actions">
+      <InstallBox />
+      {ghUrl && (
+        <a href={ghUrl} target="_blank" rel="noopener" class="btn-ghost">
+          View on GitHub
+        </a>
+      )}
+    </div>
+
+    {tags.length > 0 && (
+      <div class="hero-tags">
+        {tags.map(tag => <span>{tag}</span>)}
+      </div>
+    )}
+  </div>
+</section>
+
+<style>
+  .hero {
+    position: relative;
+    background: var(--color-section-dark, #0f172a);
+    overflow: hidden;
+    padding: 96px 0 80px;
+    text-align: center;
+  }
+  .hero-glow {
+    position: absolute;
+    inset: 0;
+    background:
+      radial-gradient(ellipse 60% 50% at 50% 0%,  rgba(99, 102, 241, 0.25) 0%, transparent 70%),
+      radial-gradient(ellipse 40% 40% at 80% 60%, rgba(139, 92, 246, 0.15) 0%, transparent 60%);
+    pointer-events: none;
+  }
+  .hero-inner {
+    position: relative;
+    max-width: var(--width-landing, 1100px);
+    margin: 0 auto;
+    padding: 0 24px;
+  }
+  .badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 0.75rem;
+    font-weight: 600;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: #a5b4fc;
+    border: 1px solid rgba(165, 180, 252, 0.3);
+    background: rgba(99, 102, 241, 0.1);
+    padding: 5px 14px;
+    border-radius: 999px;
+    margin-bottom: 28px;
+  }
+  h1 {
+    color: #fff;
+    font-size: clamp(2.4rem, 5vw, 4rem);
+    font-weight: 800;
+    letter-spacing: -0.02em;
+    line-height: 1.15;
+    margin: 0 0 20px;
+  }
+  .hero-sub {
+    max-width: 580px;
+    margin: 0 auto 36px;
+    font-size: 1.125rem;
+    color: #94a3b8;
+    line-height: 1.65;
+  }
+  .hero-actions {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 16px;
+    flex-wrap: wrap;
+    margin-bottom: 32px;
+  }
+  .btn-ghost {
+    font-size: 0.9rem;
+    font-weight: 600;
+    color: #94a3b8;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    padding: 10px 20px;
+    border-radius: var(--radius-lg, 12px);
+    text-decoration: none;
+    transition: color 0.15s, border-color 0.15s;
+  }
+  .btn-ghost:hover {
+    color: #fff;
+    border-color: rgba(255, 255, 255, 0.3);
+    text-decoration: none;
+  }
+  .hero-tags {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 8px;
+  }
+  .hero-tags span {
+    font-size: 0.75rem;
+    color: #475569;
+    background: rgba(255, 255, 255, 0.04);
+    border: 1px solid rgba(255, 255, 255, 0.07);
+    padding: 3px 10px;
+    border-radius: 999px;
+  }
+  @media (max-width: 640px) {
+    .hero { padding: 64px 0 56px; }
+  }
+</style>