docs

A Fumapress (Fumadocs + Waku) docs site with typography by shadcn/typeset — one CSS file you own.

Getting started

Requires Node.js 22+.

bun install
bun dev        # http://localhost:3000

Your typeset

Control	Choice
Heading	DM Sans
Body	Instrument Sans
Mono	JetBrains Mono
Size	16px
Leading	Loose (1.9)
Flow	Compact (1em)
Measure	80ch

src/typeset.css is the stylesheet from the typeset builder. It lives in your project — edit it directly, or regenerate it from the builder any time.
src/app.css holds your presets. .typeset-docs carries the choices above; .typeset-compact is a tighter preset for chat-like UI. Rhythm is three variables: --typeset-size, --typeset-leading, --typeset-flow.
typeset-prompt.md is an agent-ready prompt with the choices above baked in (like the builder's Prompt tab). Paste it into your coding agent to wire typeset into the surfaces that render markdown.

Wrap any rendered markdown/HTML:

<article className="typeset typeset-docs typeset-measure">{page}</article>
<div className="typeset typeset-compact">{message}</div>

Opt components out with not-typeset:

<div className="typeset typeset-docs">
  <p>Styled prose.</p>
  <Card className="not-typeset">Untouched component.</Card>
</div>

Fumadocs prose seam

Fumadocs UI ships its own prose styles for docs page bodies. If you apply typeset to the same container, both systems will add spacing. This template zeroes out margin-block-end inside .typeset.prose (see src/app.css) so flow comes only from typeset's margin-block-start.

To apply the typeset classes to docs pages, customize the page layout in press.config.tsx — see the Fumapress layouts docs.

Structure

├── waku.config.ts        # Waku/Vite plugins: press(), mdx(), tailwindcss()
├── source.config.ts      # Fumadocs MDX content source (content/docs)
├── press.config.tsx      # Site config, adapters, plugins
├── typeset-prompt.md     # Agent prompt with your typeset picks baked in
├── content/docs/         # Your MDX pages
└── src/
    ├── app.css           # Tailwind + presets + your typeset presets
    └── typeset.css       # shadcn/typeset — yours to edit

Deploying static

Fumapress builds static + dynamic routes by default. For a pure CDN deploy, force static mode in press.config.tsx:

export default defineConfig({ mode: "static", /* ... */ });

2.7 KiB Raw Blame History