Niels Lohmann
44f1bec789
Apply the brand to the Material for MkDocs site: Inter and JetBrains Mono served by the site (upright and real italic), brand colours, blue header band with the syntax pattern, wordmark in the header, new home page (hero, cards, animated feature tour), 404 page, polish for tabs, search, footer, focus rings, tables and code blocks, and theme features (code copy, previous/next footer, TOC follow, search suggestions). Draw the number railroad diagram, the parser callback events and the iterator illustrations as inline SVGs that follow the light and dark scheme. The generator scripts are in docs/mkdocs/scripts/figures; the feature slideshow (json-light.svg, json-dark.svg, replacing json.gif on the home page) is built by docs/mkdocs/scripts/slideshow. Decision nodes in five flowcharts become hexagons, which need far less room. Signed-off-by: Niels Lohmann <mail@nlohmann.me>
1.8 KiB
Feature slideshow of the home page
make builds docs/images/json-light.svg and json-dark.svg, the animated feature tour on the home page. They replace
json.gif there. All text is outlined, so the SVGs need no fonts. Material's theme toggle cannot be seen from an
<img>, so the home page includes both files (#only-light, #only-dark) and Material shows the one that matches.
The slides are in slides.md: one # Title per slide ({badge: TEXT} at the end adds a red chip), -
bullets, and one fenced code block. build.py adds the title and closing slides around them, so the slide count follows
the file. Every snippet should compile against the current develop. Use a non-breaking space to keep words together
("16 bytes").
make # download missing fonts, build both SVGs
make SECONDS=12
make clean # remove the SVGs; make distclean also removes the fonts
Run it from this directory. It needs uv, plus curl, unzip and shasum for the fonts:
build.py declares its dependencies inline (PEP 723, pinned, so the output stays byte-identical) and uv run --script
provides them. fonts/ is git-ignored: Inter (variable, Google Fonts repository) and JetBrains Mono 2.304 (variable)
are downloaded from pinned URLs and checked against their SHA-256; a changed upstream file stops the build.
./build.py OUT.svg [seconds] [auto|light|dark] works directly too. A mistake in slides.md stops the build with
slides.md:LINE and leaves the old SVGs in place.
Layout: title 48 px, bullets 24 px, code 19 px; the build warns when a slide's code would drop below 18 px. Syntax colours
are the code-* tokens of the brand (also used by css/brand.css). A CSS animation dissolves each slide over the
previous one and fills the progress bar; with reduced motion only the first slide shows.