Configuration

Three knobs shape the site: the theme, the code-block highlighter, and the content-directory collection.

Theme tokens

Colors, fonts, radii, and shadows live in config/theme.yaml. Token names become both Tailwind utilities and CSS variables, so the markdown layouts pick them up automatically.

app.yaml

colors:
  primary: '#6d28d9'
  primary-light: '#ede9fe'
  text: '#1e1b2e'
fonts:
  sans:
    family: Inter
    size: 16px

Code highlighting

Fenced code is highlighted server-side by Shiki, themed by one token:

app.yaml

theme:
  codeBlock:
    theme: github-dark

Shiki emits class / CSS-variable markup (never inline style), so highlighted code survives the HTML sanitizer. Unknown languages fall back to a plain block.

Collection options

The docs.yaml page configures how the folder is scanned and navigated:

Option	Effect
`slugFrom`	`filename` (flat) or `filepath` (nested URLs)
`filter.draft`	`false` hides files marked `draft: true`
`sort`	Orders routes and the sidebar by a frontmatter field
`nav.groupBy`	Buckets the sidebar by a frontmatter field
`nav.labelFrom`	Chooses which frontmatter field labels each link

Change sort.field to title and the sidebar reorders alphabetically — no code, just config.

Want a light site? Set codeBlock.theme: github-light and swap the palette in theme.yaml. The layouts re-theme themselves from the tokens.

Last updated August 11, 2026

← PreviousQuick Start Next →Deployment