All options are passed to blogTheme() in vite.config.ts.
BlogThemeOptions
| Option | Type | Default | Description |
|---|---|---|---|
title | string | — | Site title. Used in <title>, sidebar brand, OG tags, RSS feed. |
description | string | — | Site description. Used for meta + OG. |
base | string | — | 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). |
navbar | Array<{ title, to }> | — | Nav links rendered below author info. to values are automatically prefixed with SvelteKit's base. |
themeColor | ThemeColor | Ember palette | Dark-mode palette override. |
themeColorLight | ThemeColor | warm cream | Light-mode palette override. |
defaultMode | 'system' | 'dark' | 'light' | 'system' | Initial colour mode before user toggles. |
postsDir | string | 'src/posts' | Directory scanned for *.md posts. |
pageSize | number | 12 | Posts per page on the home listing. |
highlighter | HighlighterOptions | — | Shiki/Twoslash options. |
rss | { enabled, limit, copyright } | enabled, 20 | RSS feed generation. Writes to static/rss.xml. |
ogImage | { enabled, fontPath, tagline } | enabled | Per-post OG image generation via Satori. Skipped when native addons cannot load. |
giscus | GiscusConfig | — | Set to enable GitHub-discussions-backed comments. |
search | reserved | — | Do not configure yet. The current release always uses the built-in Pagefind search. |
AuthorProfile
interface AuthorProfile {
AuthorProfile.name: stringname: string
AuthorProfile.avatar?: string | undefinedavatar?: string // absolute URL or /-prefixed static/ path
AuthorProfile.bio?: string | undefinedbio?: string
AuthorProfile.socials?: {
github?: string;
twitter?: string;
mastodon?: string;
bluesky?: string;
email?: string;
website?: string;
rss?: string;
} | undefined
socials?: {
github?: string | undefinedgithub?: string // username, not URL
twitter?: string | undefinedtwitter?: string // username, not URL
mastodon?: string | undefinedmastodon?: string // full profile URL
bluesky?: string | undefinedbluesky?: string // handle like 'name.bsky.social'
email?: string | undefinedemail?: string
website?: string | undefinedwebsite?: string // full URL
rss?: string | undefinedrss?: string // full URL or /-prefixed path
}
}ts
ThemeColor
interface ThemeColor {
ThemeColor.primary?: string | undefinedprimary?: string // default '#fb923c'
ThemeColor.secondary?: string | undefinedsecondary?: string // default '#dc2626'
ThemeColor.bg?: string | undefinedbg?: string // default '#1a0a00'
ThemeColor.surface?: string | undefinedsurface?: string // default '#2d1200'
}ts
HighlighterOptions
interface HighlighterOptions {
HighlighterOptions.themeDark?: string | undefinedthemeDark?: string // Shiki theme, default 'night-owl'
HighlighterOptions.themeLight?: string | undefinedthemeLight?: string // Shiki theme, default 'vitesse-light'
HighlighterOptions.languages?: string[] | undefinedlanguages?: string[] // extra languages merged with defaults
HighlighterOptions.twoslash?: boolean | undefinedtwoslash?: boolean // enable Twoslash TypeScript hover info
}ts
GiscusConfig
interface GiscusConfig {
GiscusConfig.repo: `${string}/${string}`repo: `${string}/${string}`
GiscusConfig.repoId: stringrepoId: string
GiscusConfig.category: stringcategory: string
GiscusConfig.categoryId: stringcategoryId: string
GiscusConfig.mapping?: "number" | "pathname" | "url" | "title" | "og:title" | "specific" | undefinedmapping?: 'pathname' | 'url' | 'title' | 'og:title' | 'specific' | 'number'
GiscusConfig.reactionsEnabled?: boolean | undefinedreactionsEnabled?: boolean
GiscusConfig.inputPosition?: "top" | "bottom" | undefinedinputPosition?: 'top' | 'bottom'
GiscusConfig.lang?: string | undefinedlang?: 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:
| Var | Effect |
|---|---|
BASE_PATH | SvelteKit paths.base. Set when deploying under a subpath. |
SITE_URL | Overrides 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.