Rendering a sheet outside the page
The page composes its sheet as SVG in the browser and nothing commits a raster, so a picture of a sheet is made on demand.
node tools/cheatsheet.mjs --generate <slug> --format webpIt composes and renders through the same layer the page does, which then takes one of two routes - a real engine, which draws the face the design language measured, or the drawing surface's own dependency free rasterizer, which draws a built in single stroke alphabet. It reports which one answered, because a file that does not say that cannot be reviewed against the design language.
The flags
| Flag | What it does |
|---|---|
--theme, --layout |
Each takes the one name the record supports or a path to a JSON model of
its own. A --theme file may be partial. |
--data-only |
Emits the document and what the composition chose without rendering anything. |
--list |
Names what there is. |
--document <path> |
Reads a JSON document from anywhere in place of a slug. |
--help |
The rest. |
A sheet does not have to be in the catalog
--document <path> reads a JSON document from anywhere in
place of a slug, so the command is an entry point for a document rather than
for this repository's own index. It reports the same fields either way, with
source saying which flag named the sheet.
Only markup carries the footer's links
A sheet's footer links out - see Drawing a sheet for what links where - and whether a render can carry those links depends on its format.
| Format | The links |
|---|---|
svg |
Written into the markup as a final <g data-name="links">,
which a browser opening the file follows. Take that group off and what is
left is the composition's own markup, byte for byte. |
html |
Lifted out of the picture into a <nav> laid over it,
because everything inside role="img" is presentational and a
link there would have no name a screen reader can give. |
png, jpeg, webp |
None. A raster is drawn from the composition, not from the markup, so its bytes are the same whatever the links say. A page that shows one puts the links beside it. |
Part of the cheatsheets documentation. The repository is on GitHub, and the example page it documents is here.