mirror of
https://github.com/harvard-edge/cs249r_book.git
synced 2026-05-07 02:03:55 -05:00
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.