Files
Vijay Janapa Reddi 8928562e65 refactor(tinytorch/website): replace mermaid with lab-guide-style SVGs
Convert the six remaining mermaid code fences across the tier overviews
(foundation, architecture, optimization) and tito developer pages
(modules, data, testing) into hand-authored SVGs that match the
minimalist convention used by the PDF lab-guide module diagrams:

  - neutral #f7f7f7 fill + #555 stroke for all boxes
  - one #fdebd0 / #c87b2a orange accent per figure marking the focal
    element (essential command, pivot step, destructive action, or
    deployable artifact)
  - #a31f34 MIT red pills reserved for year and achievement badges
  - panel header top-left at 12pt; fig-cap carries the long-form title
  - stroke-width 1.2 throughout; typography 12 / 10 / 9 pt

Figures introduced:
  - tito-module-workflow.svg      (5-step build/export/test cycle)
  - tito-progress-tracking.svg    (6-step progress flow)
  - tito-test-hierarchy.svg       (7-level test stack)
  - tiers-foundation-milestones.svg   (1958 / 1969 / 1986)
  - tiers-architecture-milestones.svg (1998 / 2017)
  - tiers-optimization-milestones.svg (baseline -> MLPerf)

Why: the deployed site rendered mermaid timelines and flowcharts as
"syntax error in text" bombs on several pages (foundation, big-picture,
etc.). Switching to hand-authored SVGs embedded via the standard Quarto
figure-div pattern (::: {#fig-... fig-env=figure ...}) centers the
figures correctly, supplies proper fig-cap / fig-alt, and routes
through the existing svg-to-pdf.lua filter for HTML + PDF parity.

The minimalist two-tone palette (neutral + single accent) mirrors the
22 module diagrams in assets/images/diagrams/, giving the site and the
lab guide a single visual family.
2026-04-23 14:13:17 -04:00
..