Draw mermaid diagrams at build time, with Pele #15

1/3 Draw mermaid diagrams at build time, with Pele

cat, Oct 19, 3527968. CI ✓ passed in 77s, signed by cat

A ```mermaid fence in markdown was a <pre> that ui.ts filled in the
browser, loading mermaid and picking a light or dark theme
once. Now the build draws it as inline SVG with Pele 1.6.0 (pinned), and
pages ship no diagram script: mermaid, its asset, the data-mermaid
attribute and CI's check for it are gone.

style.css maps Pele's --pele-* variables to the page's tokens (nodes on
--raised outlined in --border-strong, square corners, the sans and mono, bold
at --fw-strong, the chart and syntax colours for series), so a diagram
follows light and dark mode without being drawn again.

Pele sizes nodes by measuring their labels: with a canvas in a browser,
and at build time with a table of Helvetica's widths. The labels are set
in the page's sans, so diagrams.ts gives it a measurer with that font's
widths instead (regular, and bold at 650), made by lib/text-widths.sh;
the mono is 0.6em, as Pele assumes. Over 174 labels of the diagram types
in a browser, its widths are within 0.2% of Open Sans as drawn; Pele's
own table is off by up to 14%.

Markdown is anyone's who can push a repo. Pele escapes a diagram's text,
drops HTML in labels, ignores init directives' CSS and fonts, and keeps
links to safe schemes. Its SVG then goes through a sanitizer of its own,
which keeps only the tags, attributes and style properties Pele draws
with, no images and no url(), and Pele's own classes; raw SVG in the
markdown is still dropped. The markdown's sanitizer sees a placeholder
named by a random token where each diagram goes.

A diagram that doesn't parse shows its source and Pele's reason, and the
page builds. The demo wiki has a diagram, and CI checks it is drawn;
link previews leave diagrams' labels out of their text.