Files

Timothy DeHerrera 69cd81621f feat(docs): create sukr documentation site with fixes

Self-documenting docs site built with sukr itself (dogfooding):

Core changes:
- Rename package from nrd-sh to sukr
- Move personal site to sites/nrd.sh/
- Update AGENTS.md and README.md

Documentation site (docs/):
- Add site.toml with sukr.io base URL
- Create docs-specific templates with sidebar navigation
- Add dark theme CSS with syntax highlighting colors
- Document all features: templates, sections, syntax highlighting,
  mermaid diagrams, and LaTeX math rendering

Bug fixes:
- Render individual pages for all sections (not just blog type)
- Add #[source] error chaining for Tera template errors
- Print full error chain in main() for better debugging

2026-01-31 16:14:04 -07:00

1.8 KiB

Raw Blame History

title, description, weight

title	description	weight
Mermaid Diagrams	Build-time diagram rendering with Mermaid	4

Mermaid Diagrams

sukr renders Mermaid diagrams at build time, producing inline SVG. No client-side JavaScript required.

Usage

Use fenced code blocks with mermaid language:

```mermaid
graph LR
    A[Input] --> B[Process]
    B --> C[Output]
```

Supported Diagram Types

Type	Status	Description
Flowchart	✅ Full support	Flow diagrams with nodes and edges
Graph	✅ Full support	Directed/undirected graphs
Sequence	⚠️ Partial	Sequence diagrams (some layouts may vary)
State	⚠️ Partial	State machine diagrams
Class	⚠️ Partial	UML class diagrams

Note: Some complex diagram types may have layout differences compared to the JavaScript renderer. Flowcharts and basic graphs work reliably.

How It Works

During Markdown parsing, mermaid code blocks are intercepted
The Mermaid definition is parsed and rendered to SVG
The SVG is inlined directly in the HTML output
No JavaScript or external resources needed

Example

graph TD
    A[Markdown] --> B{sukr}
    B --> C[HTML]
    B --> D[SVG Diagrams]
    B --> E[Highlighted Code]

Styling

Mermaid SVGs inherit your CSS variables. Customize the look by targeting SVG elements:

.mermaid svg {
  max-width: 100%;
  height: auto;
}

.mermaid .node rect {
  fill: var(--bg-sidebar);
  stroke: var(--accent);
}

Fallback

If a diagram fails to render (complex diagrams, syntax errors), the original code block is preserved with an error comment.

1.8 KiB Raw Blame History