Customizing

Replace placeholders#

After cloning, search-and-replace these:

Logo#

Edit the inline SVG in src/components/Header.astro. The default is a generic checkmark — swap it for your mark, or replace with <img src="/logo.svg" /> and drop the file in public/.

Theme tokens#

Colors live in src/styles/globals.css as CSS variables. The accent is --color-signal:

[data-theme='dark'] {
  --color-signal: oklch(0.78 0.16 175);   /* change me */
  --color-bg: ...;
  --color-fg: ...;
}

[data-theme='light'] {
  --color-signal: ...;
}

Both themes are defined separately so you can tune contrast independently.

Fonts#

The template loads IBM Plex (Sans, Sans Condensed, Mono) from Google Fonts in BaseLayout.astro. To switch:

1. Replace the <link> in BaseLayout.astro.
2. Update font-family in globals.css (--font-display, --font-mono).

shadcn components#

components.json is configured. Add a new component:

bunx shadcn@latest add dialog

Components land in src/components/ui/.

Sidebar sections#

Edit src/lib/nav.ts:

const SECTIONS: { label: string; dir: string | null }[] = [
  { label: "Start here", dir: null },
  { label: "Guides", dir: "guides" },
  { label: "Reference", dir: "reference" },
  // add your own:
  { label: "Tutorials", dir: "tutorials" },
];

Then create src/content/docs/tutorials/ and start adding pages.

Header navigation#

src/components/Header.astro has the top-bar nav links inline. Add or remove <a> tags directly.

Search#

Pagefind indexes the build output. No config needed. The trigger is Ctrl/⌘ K — bind a different key in src/components/Search.tsx.

Disable a feature#