@karaoke-cms/theme-blog 0.9.2 → 0.9.5

package/README.md

@@ -1,79 +1,87 @@
 # @karaoke-cms/theme-blog
 
-Editorial blog theme for karaoke-cms. Features a featured hero post, card grid, and cover image support. Blog-only — no docs or knowledge-base routes.
+Editorial blog theme for karaoke-cms — featured hero post, card grid, and cover image support. Blog-only: no docs or knowledge-base routes.
 
-## Where it belongs
+## Installation
 
-`packages/theme-blog/` in the monorepo. Activated via `karaoke.config.ts`:
+```bash
+npm install @karaoke-cms/theme-blog
+```
+
+## 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-blog',
-};
-```
 
-## What it does
+const env = loadEnv(new URL('.', import.meta.url));
 
-Injects blog-focused routes and sets the `@theme` Vite alias:
+export default defineConfig({
+  vault: env.KARAOKE_VAULT,
+  title: 'My Blog',
+  // theme-blog uses the legacy integration API — import the default export
+  // and register it directly in astro.config.mjs
+});
+```
 
-| Route | Page |
-|-------|------|
-| `/` | Home — featured hero post + recent posts card grid |
-| `/blog` | Blog index — all published posts |
-| `/blog/[slug]` | Blog post — full content with cover image |
+> **Note:** `theme-blog` currently uses the legacy theme API and does not yet expose a `themeBlog()` factory. Register it in `astro.config.mjs`:
+>
+> ```js
+> // astro.config.mjs
+> import { defineConfig } from 'astro/config';
+> import karaoke from '@karaoke-cms/astro';
+> import themeBlog from '@karaoke-cms/theme-blog';
+> import karaokeConfig from './karaoke.config.ts';
+>
+> export default defineConfig({
+>   site: 'https://your-site.pages.dev',
+>   integrations: [karaoke({ ...karaokeConfig, theme: themeBlog })],
+> });
+> ```
+
+## Routes
+
+| Route | Description |
+|-------|-------------|
+| `/` | Home — featured hero post + recent posts grid |
+| `/blog` | All published posts |
+| `/blog/[slug]` | Post page with cover image |
 | `/tags` | Tags index |
-| `/tags/[tag]` | Tag page |
+| `/tags/[tag]` | Posts by tag |
 | `/404` | Not found page |
 
-Note: no `/docs` or `/docs/[slug]` routes. This theme is for publication-style blogs, not knowledge bases.
+No `/docs` routes — use `theme-default` for mixed blog + docs sites.
 
-### Extended frontmatter
+## Extended frontmatter
 
-The theme supports optional blog-specific frontmatter fields via `blogThemeExtension`. Pass it to `makeCollections()` to unlock them:
+Pass `blogThemeExtension` to `makeCollections()` to unlock cover image and featured-post fields:
 
 ```ts
 // src/content.config.ts
 import { makeCollections, blogThemeExtension } from '@karaoke-cms/astro/collections';
+import { loadEnv } from '@karaoke-cms/astro/env';
 
-export const collections = makeCollections(import.meta.url, KARAOKE_VAULT, {
-  blog: blogThemeExtension,
-});
+const env = loadEnv(new URL('..', import.meta.url));
+export const collections = makeCollections(
+  new URL('..', import.meta.url),
+  env.KARAOKE_VAULT,
+  { blogSchema: blogThemeExtension },
+);
 ```
 
 Extra fields (all optional):
 
-| Field | Type | Purpose |
-|-------|------|---------|
+| Field | Type | Description |
+|-------|------|-------------|
 | `cover_image` | `string` | Path or URL to the post's cover image |
-| `featured` | `boolean` | Pins this post as the hero on the home page |
+| `featured` | `boolean` | Pin this post as the hero on the home page |
 | `abstract` | `string` | Override the description shown in cards and the hero |
 
-Without `blogThemeExtension`, these fields are silently ignored — the theme falls back to `description`.
-
-### Components
-
-- **`FeaturedHero`** — large hero block for the featured post with cover image overlay, title, date, and abstract
-- **`PostCard`** — card with cover image, title, date, reading time, and abstract for the grid
-
-### Design system
-
-`src/styles.css` defines tokens on `:root`:
-
-- **Typography**: `--font-body`, `--font-mono`, `--font-size-base/sm/lg/xl`
-- **Color**: `--color-bg`, `--color-text`, `--color-muted`, `--color-border`, `--color-link`, `--color-link-hover`, `--color-link-visited`, `--color-card-bg`, `--color-hero-overlay`
-- **Spacing**: `--spacing-xs/sm/md/lg/xl`
-- **Sizing**: `--width-content` (700px), `--width-site` (1100px), `--radius-card` (8px), `--radius-sm` (4px)
+## Design system
 
-Dark mode via `@media (prefers-color-scheme: dark)`.
+Tokens on `:root`: `--font-body`, `--font-mono`, `--color-bg`, `--color-text`, `--color-muted`, `--color-card-bg`, `--color-hero-overlay`, `--width-content` (700px), `--width-site` (1100px), `--radius-card` (8px). Dark mode via `@media (prefers-color-scheme: dark)`.
 
-## How it changes the behavior of the system
+## What's new in 0.9.5
 
-- Replaces all routes from `theme-default`. The two themes cannot coexist — only one is active at a time.
-- Home page behavior changes significantly: instead of a two-column blog + docs grid, it renders a featured hero and card grid.
-- Does not support docs — vault content in `docs/` is collected but has no public routes. Use `theme-default` if you need docs.
-- `featured: true` on a post controls the home page hero. If no post is marked featured, the most recent post is promoted automatically.
+No user-facing changes in this release — version bumped for lockstep with the monorepo.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@karaoke-cms/theme-blog",
   "type": "module",
-  "version": "0.9.2",
+  "version": "0.9.5",
   "description": "Blog theme for karaoke-cms — editorial layout with featured hero, card grid, and cover images",
   "main": "./src/index.ts",
   "exports": {
@@ -18,13 +18,13 @@
   ],
   "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/pages/404.astro

@@ -1,12 +1,12 @@
 ---
-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={`404 — ${siteTitle}`}>
+<DefaultPage title={`404 — ${siteTitle}`}>
   <div style="padding: 4rem 0; text-align: center;">
     <h1 style="font-size: 5rem; margin-bottom: 0.5rem; letter-spacing: -0.04em;">404</h1>
     <p style="color: var(--color-muted); margin-bottom: 2rem;">Page not found.</p>
     <a href="/">← Home</a>
   </div>
-</Base>
+</DefaultPage>

package/src/pages/blog/[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';
 
@@ -29,7 +29,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>
     {coverImage && <img src={coverImage} alt="" class="post-cover" />}
     <div class="post-header">
@@ -66,4 +66,4 @@ const related = relatedIds.length > 0
     </div>
   </article>
   <ModuleLoader comments={entry.data.comments} />
-</Base>
+</DefaultPage>

package/src/pages/blog/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 PostCard from '../../components/PostCard.astro';
 import { siteTitle } from 'virtual:karaoke-cms/config';
 
@@ -10,7 +10,7 @@ const posts = (await getCollection('blog', ({ data }) => data.publish === true))
 type Extended = { cover_image?: string; abstract?: string };
 ---
 
-<Base title={`Blog — ${siteTitle}`}>
+<DefaultPage title={`Blog — ${siteTitle}`}>
   <div class="listing-header">
     <h1>Blog</h1>
   </div>
@@ -33,4 +33,4 @@ type Extended = { cover_image?: string; abstract?: string };
       <p>Create a Markdown file in your vault's <code>blog/</code> folder and set <code>publish: true</code>.</p>
     </div>
   )}
-</Base>
+</DefaultPage>

package/src/pages/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 FeaturedHero from '../components/FeaturedHero.astro';
 import PostCard from '../components/PostCard.astro';
 import { siteTitle, siteDescription } from 'virtual:karaoke-cms/config';
@@ -18,7 +18,7 @@ const gridPosts = featuredPost
   : allPosts.slice(0, 6);
 ---
 
-<Base title={siteTitle} description={siteDescription}>
+<DefaultPage title={siteTitle} description={siteDescription}>
   {featuredPost && (
     <FeaturedHero
       title={featuredPost.data.title}
@@ -52,5 +52,5 @@ const gridPosts = featuredPost
       <p>Add a Markdown file to your vault's <code>blog/</code> folder with <code>publish: true</code>.</p>
     </div>
   )}
-</Base>
+</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() {
@@ -25,7 +25,7 @@ export async function getStaticPaths() {
 const { tag, entries } = Astro.props;
 ---
 
-<Base title={`#${tag} — ${siteTitle}`}>
+<DefaultPage title={`#${tag} — ${siteTitle}`}>
   <div class="listing-header">
     <h1>#{tag}</h1>
     <p><a href="/tags">← All tags</a></p>
@@ -40,4 +40,4 @@ const { tag, entries } = Astro.props;
       </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 posts = await getCollection('blog', ({ data }) => data.publish === true);
@@ -15,7 +15,7 @@ for (const entry of posts) {
 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>
@@ -34,4 +34,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.</p>
     </div>
   )}
-</Base>
+</DefaultPage>