Site infrastructure — Mermaid, /stack rebuild, real SV highlighting

A long detour in the middle of the day to fix three things on the site that were quietly bothering us. By the end the page chrome finally looks like one unified design language instead of an Astro default with project pages bolted on.

What happened

Theme-aware Mermaid. ASCII box diagrams everywhere were ugly and didn’t scale on mobile. New <Diagram> component renders Mermaid source to SVG at build time using beautiful-mermaid (synchronous, ELK-based layout). The library embeds CSS variable references directly into the SVG, so the diagrams re-skin instantly when daisyUI’s theme picker rotates the underlying --color-* properties. No re-render, no flash, no JS at runtime. Replaced the ASCII flow on /stack and the two-flop synchronizer on P04; added new diagrams to P05 (datapath block diagram) and P06 (4-state FSM walk). One MDX gotcha: <Diagram /> on the same line as trailing prose makes the browser auto-close the wrapping <p>, which breaks layout — diagrams need a blank line above. Documented as a war story under a new /notes/diagrams page.

/stack rebuilt as a numbered timeline. The old page was a wall of prose. Rewritten as nine numbered stages walking the harden flow with the actual files P01 produced at each step:

01 author the RTL  -> top.v
02 simulate        -> PASS
03 synthesize      -> top.nl.v
04 floorplan       -> top.def (DIE_AREA + ROWs)
05 place           -> top.def with cell coordinates
06 CTS             -> no-op for clockless P01
07 route           -> top.def with vias
08 signoff         -> drc.magic.rpt + lvs.netgen.rpt
09 GDS             -> binary file metadata

Each stage has a big italic numeral in the gutter, a vertical connecting line, mono-uppercase tool name, in/out file-format pills, and a FileArtifact panel with the verbatim snippet. New components: Stage.astro, FileArtifact.astro. Hero styling pulled into global.css (.ph-eyebrow, .ph-title, .ph-num, .ph-sep, .ph-section, .ph-sub) so every page hero shares one design.

Real SystemVerilog syntax highlighting. Until now, every project page silently fell back to plaintext on .sv blocks. Astro’s <Code> does an exact-key check against Shiki’s bundledLanguages. Shiki ships the grammar under system-verilog (with the hyphen); systemverilog is not a bundled key. One alias map in Source.astro: systemverilog/sv/svh -> system-verilog. Plus extension maps in repo.ts and a Shiki alias registration in astro.config.mjs. No new package — @shikijs/langs already shipped the grammar.

Theme-aware highlighting on top of that. Shiki was baking GitHub-dark colors into every <pre> at build time, so flipping the daisyUI theme picker re-skinned the page chrome and prose but left every code block stuck on the same palette. Switched to Shiki’s multi-theme mode keyed off [data-theme=...]. New shiki-themes.mjs maps each of the 17 daisyUI themes (catppuccin / tokyo-night / nord / gruvbox / kanagawa / hackerman / vantablack / the rest) to a Shiki theme that fits its palette. Each token span gets one CSS variable per theme; one selector per theme in global.css activates the right variable. No FOUC because ThemePicker.astro sets data-theme synchronously in an inline script before first paint.

End of detour: theme picker now repaints code blocks live, diagrams re-skin, /stack looks like a thing.

Receipts

5061464 — <Diagram> via beautiful-mermaid, applied to /stack, P04, P05, P06; new /notes/diagrams writeup.
50fd9b2 — /stack redesigned as a numbered timeline with real P01 artifacts. Hero styles promoted to global.css.
7f38f1e — real SystemVerilog highlighting via system-verilog Shiki alias.
c8aa8e7 — Shiki multi-theme mode wired to daisyUI’s 17 themes via CSS variables.

Files of note: /site/src/components/Diagram.astro, /site/src/components/Stage.astro, /site/src/components/FileArtifact.astro, /site/src/data/shiki-themes.mjs, /site/src/pages/stack.mdx, /site/src/pages/notes/diagrams.mdx, /site/src/styles/global.css.