Drawing a sheet
A cheatsheet is composed rather than screenshotted.
api/napkin-sketch/ is the drawing surface, and
api/cheatsheet/ is the layer that knows what a sheet is, drawn to
DESIGN_LANGUAGE.md.
Nothing has to be installed: the browser imports both by relative path with no
build step, and php -S localhost:8000 is still the whole local
workflow. Worked examples are in
examples/.
The code panel is coloured token by token
A sheet names the language its example is written in, the drawing surface
reads it, and each token takes one of the six syntax roles the design language
names. Reading the code is the heaviest thing the page loads, so it is fetched
on demand beside the catalog rather than before the first paint - a sheet drawn
before it arrives falls back to the one role per line every
sheet.json still declares, and says which of the two it used.
A category gets a design language of its own
It is recorded at the root as DESIGN_LANGUAGE-<category>.md
- the first is
DESIGN_LANGUAGE-html-css.md.
It is derived from the global record rather than being a second opinion about
it: a category with no artwork has nothing to measure, so
tools/compose-language-asset.mjs composes the record into a
temporary SVG and the helper under ai-helper/graphic-designer/
measures that. javascript is the exception and needs no file,
because DESIGN_LANGUAGE.md was measured off its own images.
The footer links out
A sheet's footer is drawn one of two ways, and each links what it draws.
| Footer | When | What links, and where |
|---|---|---|
| The strip | assets/footer.png was given to the composition, and the
document names no follow line of its own |
The mark, to practicing.xyz, and the three icons after "Follow Me", to Mastodon, Instagram and X |
| Drawn | No strip, or a document with a follow line of its own | The navy mark square, to practicing.xyz, and the follow line to the same place while it is the default one. A follow line the document wrote is its own words and links nowhere |
The composition cannot hold a link, because the drawing surface has no
anchor element, so composeSheet reports the areas as
variation.links and the render writes them in afterwards. Where the
strip's icons are is a fact about the strip's pixels, so the areas are recorded
in api/cheatsheet/brand.mjs in the strip's own 799 x 81, and a
strip of any other size is placed with no links and a note saying so.
Part of the cheatsheets documentation. The repository is on GitHub, and the example page it documents is here.