fumadocs
How this docs site is built, and how to add a page.
This handbook runs on fumadocs-ui (^15.8.5) + fumadocs-mdx (^11.10.1) +
fumadocs-core (^15.8.5). It's mounted under /droidspeak/docs/* of the main
dashboard — same Next process, same auth chrome, same Tailwind tokens.
Where it lives in src/
| File / dir | Role |
|---|---|
content/docs/ | MDX content tree — every file here is a page |
content/docs/*/meta.json | Section order and titles |
source.config.ts | fumadocs-mdx config — points at content/docs/ |
src/lib/docs-source.ts | Resolves the lazy files() from fumadocs-mdx 11 into the eager shape fumadocs-core 15 expects |
src/app/droidspeak/docs/layout.tsx | Fumadocs UI shell (sidebar, header, breadcrumbs) |
src/app/droidspeak/docs/[[...slug]]/page.tsx | Catch-all route that renders the matched MDX page |
mdx-components.tsx (project root) | Custom MDX component map (callout, card, etc.) |
The lazy/eager files shim
fumadocs-mdx 11.x returns { files: () => [...] } (lazy); fumadocs-core 15.x
expects { files: [...] } (eager). docs-source.ts resolves the lazy form at module
init so the catch-all route can iterate synchronously. Drop the shim when both
packages agree on a shape.
Adding a page
-
Create
content/docs/<section>/<page-slug>.mdxwith frontmatter:--- title: Page Title description: One-sentence summary used in cards and search. --- -
Add the slug to the section's
meta.jsonpagesarray (order in the array drives sidebar order). -
If you're creating a new section, add the section name to the root
content/docs/meta.jsonpagesarray as well. -
Cross-link with regular markdown links —
[Galaxy Map](/droidspeak/docs/components/galaxy-map). The fumadocs router resolves both.mdxand slug-only forms.
MDX components
The handbook uses fumadocs-ui's built-in components:
import { Callout } from 'fumadocs-ui/components/callout';
import { Card, Cards } from 'fumadocs-ui/components/card';
<Callout type="warn">Don't do X.</Callout>
<Cards>
<Card title="Install" href="/droidspeak/docs/install/k8s">Production path</Card>
</Cards>Callout, Card/Cards, code blocks, tables, and mermaid diagrams (```mermaid)
are pre-wired. Anything else you import needs adding to mdx-components.tsx.
Mermaid
```mermaid
flowchart LR
A --> B
```Rendered client-side. Don't put more than one or two diagrams per page — the renderer is heavy.
Search
Fumadocs ships search out of the box (Cmd-K). The index is built at build time from every MDX page's frontmatter + body.
Conventions for this handbook
- No bd-/RS-N tracker codes in copy. Tracker codes belong in beads / feature docs, not user-facing surfaces. (Internal memory rule — applies to docs too.)
- No storage-vendor names in dashboard chrome. Inside the docs section itself, vendor names (TrailBase, ReductStore, Restreamer) are fine and expected — this is the technical reference. Outside the docs, refer to "snapshot history" / "stream archive" / "data store".
- No "subtitle that explains the rationale". Frontmatter
descriptionis one sentence, neutral. Rationale lives in the body under a Why heading. - Pages are scannable. Tables and lists over walls of prose. The reader is usually looking for one fact.
See also
- Contributor guide
- Tech Stack — the rest of the dashboard's libraries