This page is a static (Jekyll) component gallery intended to evaluate visual consistency and accessibility for new content forms embedded in Markdown.

Mermaid

Mermaid diagrams can live directly in Markdown as a fenced block with the mermaid class:

flowchart LR A[Author writes Markdown] --> B[Jekyll builds static HTML] B --> C[Browser renders components] C --> D{Libraries loaded?} D -->|Yes| E[Enhanced: Mermaid/D3/Three] D -->|No| F[Fallback: readable text + code blocks]

D3

This demo renders a simple bar chart from inline JSON:

Inline Code

Inline code in Markdown: bundle exec jekyll serve and ./scripts/serve.py.

Breakout Boxes (Callouts)

This is an info callout. Use it for definitions, constraints, or key context.

This is a warning callout. Use it for risky actions or sharp edges.

This is a tip callout. Use it for shortcuts and good defaults.

Quotes

“Make it easy to do the right thing, and hard to do the wrong thing.”

— design principle

Illustrations (Figure + Caption)

Markdown Components Pages
Use figures for lightweight explanatory visuals with captions.

Sub-section Headings

Guideline Headings should scan well

Use these for long pages to keep sections visually distinct.

Drei (React Three Fiber)

This demo uses @react-three/fiber + @react-three/drei at runtime (loaded via ESM CDN) to render a basic scene with orbit controls:

Authoring Notes

  • Mermaid: use <pre class="mermaid">…</pre> (or a Markdown fenced code block rendered with class mermaid).
  • D3: use <div data-d3-bar='[...]'> for now; we can add richer “shortcode” includes as patterns stabilize.
  • Drei: use <div data-r3f-scene="..."> for interactive 3D demos.