Redesign content blocks, give prose its own gallery page, and add breadcrumbs

[RaviTejaKNTS]

Why

The content components looked flat: callouts, formulas and examples were the same grey box, the FAQ was loose headings, and the code block's label floated outside it. The Components UI gallery also repeated itself. Wrapper components drew the same card twice, and a Markdown section repeated every content block. Content is MDX now, so the gallery should show each look once, with the tag to write.

What changed

Components (every page that uses them):

• Callouts: a neutral box with a monochrome icon per kind: info for a note, a light bulb for a tip, a triangle for a warning. Only a warning colors its title. Adds a Tip export.
• Formula and example: a header row with the title on the left and the kind on the right, then a dashed rule. Code inside a formula reads as plain mono math, without code chips.
• FAQ: always open, with rules between questions and its own heading styles.
• Code block: the file name or language and a visible Copy button sit in a header bar inside the block. An unlabeled block keeps the button beside the code.
• Prose: styles for quotes, rules, bold, small print, nested lists and muted list markers. Term lists use the two-column layout tool articles already had, and stack on phones.

Components UI gallery (development only):

• One example per look. Cards go from 8 to 5, and the Markdown and ContentMarkdown demos are gone.
• Each content component shows the MDX to write.
• New Prose page at /components-ui/prose.

Docs: the callout, formula, FAQ and code block rules in design-system.md, and the gallery and ContentMarkdown notes in shared-ui.md.

All of this stays within the design system: neutral borders, no tinted panels, no colored edges, and semantic color only on words.

Checks

• npm run quality passed (78 tests).
• Checked in a browser at 1440px and 390px, in both themes:
  • the gallery Content, Prose, Cards and Tables pages;
  • /cac-payback-calculator, /lxc-idmap-checker, /dnssec-checker, /caa-checker;
  • course lessons with code blocks and an FAQ.
• Two Sol review rounds. Round 1 found term-list spacing that broke two-column tool articles, and a raw <kbd> in an MDX sample. Both are fixed, and round 2 passed.

Breadcrumbs (added)

Every page except home shows a trail above its title, including pages whose header sits in the dotted hero:

• stack127 / domain tools / Domain age checker
• stack127 / self-host apps
• stack127 / keyboard shortcuts / Claude Code
• stack127 / platform fees / Payments
• stack127 / self-hosting for beginners / Meet Docker

How it works:

• Trail: lib/breadcrumbs.ts builds it from the page registry: stack127, each published parent, then the page. A tool sits under its primary catalog.
• Look: small muted mono steps split by slashes. Sections show lowercase, like the main menu, and the page keeps its own name in semibold. On phones the trail wraps after a slash.
• Wiring: PageHeader takes the trail, and every header passes one, the same way across tools, catalogs, directories, child pages, the course and site pages. The old "Platform fees" back link is replaced.
• Gallery and docs: a gallery example under Navigation, and the rules in the design and shared UI docs.
• Review: a Sol review passed with no findings. I checked headers from every family at 1440px and 390px, in both themes.

🤖 Generated with Claude Code