Configuration

All options are passed to blogTheme() in vite.config.ts.

BlogThemeOptions

OptionTypeDefaultDescription
titlestring—Site title. Used in <title>, sidebar brand, OG tags, RSS feed.
descriptionstring—Site description. Used for meta + OG.
basestring—Fully-qualified site URL (e.g. https://example.com). Used to produce absolute RSS links and OG image URLs.
author AuthorProfile —Author identity shown in the sidebar.
about{ html: string }—Raw HTML block rendered below author info in the sidebar (keep it short — About no longer has a standalone page).
navbarArray<{ title, to }>—Nav links rendered below author info. to values are automatically prefixed with SvelteKit's base.
themeColor ThemeColor Ember paletteDark-mode palette override.
themeColorLight ThemeColor warm creamLight-mode palette override.
defaultMode'system' | 'dark' | 'light''system'Initial colour mode before user toggles.
postsDirstring'src/posts'Directory scanned for *.md posts.
pageSizenumber12Posts per page on the home listing.
highlighter HighlighterOptions —Shiki/Twoslash options.
rss{ enabled, limit, copyright }enabled, 20RSS feed generation. Writes to static/rss.xml.
ogImage{ enabled, fontPath, tagline }enabledPer-post OG image generation via Satori.
giscus GiscusConfig —Set to enable GitHub-discussions-backed comments.

AuthorProfile

interface AuthorProfile {
  : string
  ?: string // absolute URL or /-prefixed static/ path
  ?: string
  ?: {
    ?: string // username, not URL
    ?: string // username, not URL
    ?: string // full profile URL
    ?: string // handle like 'name.bsky.social'
    ?: string
    ?: string // full URL
    ?: string // full URL or /-prefixed path
  }
}
ts

ThemeColor

interface ThemeColor {
  ?: string // default '#fb923c'
  ?: string // default '#dc2626'
  ?: string // default '#1a0a00'
  ?: string // default '#2d1200'
}
ts

HighlighterOptions

interface HighlighterOptions {
  ?: string // Shiki theme, default 'night-owl'
  ?: string // Shiki theme, default 'vitesse-light'
  ?: string[] // extra languages merged with defaults
  ?: boolean // enable Twoslash TypeScript hover info
}
ts

GiscusConfig

interface GiscusConfig {
  : `${string}/${string}`
  : string
  : string
  : string
  ?: 'pathname' | 'url' | 'title' | 'og:title' | 'specific' | 'number'
  ?: boolean
  ?: 'top' | 'bottom'
  ?: string
}
ts

Fill in these values from giscus.app . A GiscusComments component is rendered below each post automatically when giscus is set. Theme switching (light/dark) is wired through automatically.

Environment variables

The example site reads two env vars at build time:

VarEffect
BASE_PATHSvelteKit paths.base. Set when deploying under a subpath.
SITE_URLOverrides blogTheme() base. Used for OG/RSS absolute URLs.

The theme itself doesn't read these — they're wired by your svelte.config.js and vite.config.ts.

Suggest changes to this page
Last update at: 2026/04/16 21:43:34