@karaoke-cms/theme-blog

Editorial blog theme for karaoke-cms — featured hero post, card grid, and cover image support. Blog-only: no docs or knowledge-base routes.

Installation

npm install @karaoke-cms/theme-blog

Usage

// karaoke.config.ts
import { defineConfig } from '@karaoke-cms/astro';
import { loadEnv } from '@karaoke-cms/astro/env';

const env = loadEnv(new URL('.', import.meta.url));

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
});

Note: theme-blog currently uses the legacy theme API and does not yet expose a themeBlog() factory. Register it in astro.config.mjs:

// 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] | Posts by tag | | /404 | Not found page |

No /docs routes — use theme-default for mixed blog + docs sites.

Extended frontmatter

Pass blogThemeExtension to makeCollections() to unlock cover image and featured-post fields:

// src/content.config.ts
import { makeCollections, blogThemeExtension } from '@karaoke-cms/astro/collections';
import { loadEnv } from '@karaoke-cms/astro/env';

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 | Description | |-------|------|-------------| | cover_image | string | Path or URL to the post's cover image | | featured | boolean | Pin this post as the hero on the home page | | abstract | string | Override the description shown in cards and the hero |

Design system

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).

What's new in 0.17.0

No user-facing changes in this release.

What's new in 0.9.5

No user-facing changes in this release — version bumped for lockstep with the monorepo.