init(Docs): setup docs site with Fumapress and Waku

2026-08-02 17:31:40 +00:00 · 2026-07-12 12:14:51 -04:00
parent faa95b2e8b
commit 8f950111b5
12 changed files with 1704 additions and 0 deletions
@@ -0,0 +1,84 @@
+Install shadcn/typeset in this Fumapress (Fumadocs + Waku) project.
+
+Typeset is a single stylesheet that styles rendered markdown: wrap the output
+in a `typeset` container and everything inside (headings, lists, tables,
+code, blockquotes, math) is styled. Everything outside is untouched.
+
+If this project was scaffolded with create-fumapress-typeset, steps 1-4 are
+already done — verify each one and move on; every step below is safe to
+re-run.
+
+1. Download https://ui.shadcn.com/typeset.css and save it as
+   `src/typeset.css` (next to the main CSS file, `src/app.css`). If the
+   file already exists, replace it with the downloaded copy.
+
+2. Import it in `src/app.css`, after the Tailwind and Fumadocs imports:
+
+   @import "./typeset.css";
+
+3. Install the fonts:
+
+   bun add @fontsource-variable/dm-sans @fontsource-variable/instrument-sans @fontsource-variable/jetbrains-mono
+
+   Then import them in `src/app.css`:
+
+   @import "@fontsource-variable/dm-sans";
+   @import "@fontsource-variable/instrument-sans";
+   @import "@fontsource-variable/jetbrains-mono";
+
+   :root {
+     --font-dm-sans: "DM Sans Variable", sans-serif;
+     --font-instrument-sans: "Instrument Sans Variable", sans-serif;
+     --font-jetbrains-mono: "JetBrains Mono Variable", monospace;
+   }
+
+4. Add this preset to `src/app.css`, after the typeset import. If a class
+   named `.typeset-docs` already exists, update its values in place. Leave
+   any other `typeset-*` presets untouched: they are separate surfaces:
+
+   .typeset-docs {
+     --typeset-font-body: var(--font-instrument-sans);
+     --typeset-font-heading: var(--font-dm-sans);
+     --typeset-font-mono: var(--font-jetbrains-mono);
+     --typeset-size: 16px;
+     --typeset-leading: 1.9;
+     --typeset-flow: 1em;
+   }
+
+5. Do not apply the class anywhere yet. Search the project for surfaces that
+   render markdown or rich content:
+
+   - The Fumadocs docs page body. Fumapress owns that layout: customize it in
+     `press.config.tsx` with `createDocsLayoutPage` from
+     "fumapress/layouts/docs" (see https://press.fumadocs.dev/docs/layouts)
+     and wrap the page body there.
+   - MDX components, react-markdown/Streamdown renderers,
+     dangerouslySetInnerHTML with parsed markdown, `prose` classes, CMS
+     content renderers.
+
+   Present the candidates you find as a short list and ask the user which
+   surface should use typeset. Then wrap only the surface they pick:
+
+   <div className="typeset typeset-docs max-w-[37em]">
+     {content}
+   </div>
+
+   (`src/app.css` also defines `.typeset-measure` with the same
+   max-width, if a plain class is preferred over a Tailwind utility.)
+
+   If the picked surface already has its own typography (Fumadocs' `prose`
+   class, styled markdown components), list those styles and let the user
+   decide what to remove before wrapping. Note: `src/app.css` already zeroes
+   `margin-block-end` inside `.typeset.prose` so typeset owns the rhythm
+   when both classes share a container.
+
+Notes:
+
+- To exclude an embedded component from typeset styles, add the
+  `not-typeset` class or the `data-not-typeset` attribute to it. Keep
+  interactive Fumadocs components (tabs, callouts, accordions) out of typeset
+  this way.
+- Verify on the surface the user picked: headings, lists, tables, and code
+  inside the container should be styled with no classes on the content
+  itself.
+- Docs: https://ui.shadcn.com/docs/typeset