# docs

A [Fumapress](https://press.fumadocs.dev) (Fumadocs + Waku) docs site with
typography by [shadcn/typeset](https://ui.shadcn.com/docs/typeset) — one CSS
file you own.

## Getting started

Requires **Node.js 22+**.

```bash
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](https://ui.shadcn.com/typeset). 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:

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

Opt components out with `not-typeset`:

```tsx
<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](https://press.fumadocs.dev/docs/layouts).

## 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`:

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