03804b10dc
Refactor the List-specific screen into a data-driven, reusable viewer: - generic Blueprint type + shared LoadState machine + registry - vue-router: / (gallery) and /b/:slug (illustration) - BlueprintViewer renders any blueprint; specimens stay bespoke - add Grid blueprint (6 functions incl. Position) + GridSpecimen
1.8 KiB
blueprints
Deployed at https://blueprints.apoena.dev
Interactive illustrations of UI-pattern blueprints — the formal, framework-agnostic
contracts from blueprint-ontology (signature, state machine,
behaviors, invariants, critical performance, failure modes), rendered in a cyanotype
"blueprint" style: monospace, blueprint-blue paper, faint grid, amber annotations.
The first screen illustrates the List blueprint and its seven functions —
Display · Scroll · Load · Filter · Sort · Select · Act — as a specimen-under-glass with a
full contract readout, an anatomy/composition map, and the LoadState machine.
Documentation
- CONTEXT.md — ubiquitous language (Blueprint, Viewer, Specimen, Readout, …)
- DESIGN.md — architecture & build-out decisions
Develop
pnpm dev # frontend on :5173
pnpm build # type-check (vue-tsc) + production build → dist/
pnpm lint # oxlint (pnpm lint:fix to autofix)
pnpm fmt # oxfmt (pnpm fmt:check to verify only)
Stack
- Vite + Vue 3 + TypeScript SPA (no backend)
- Tailwind v4 + DaisyUI with a custom
blueprintdark theme (src/style.css) - oxlint + oxfmt for lint/format (no semicolons, double quotes)
- Served in production by nginx (see
Dockerfile+nginx.conf)
Blueprint content lives as typed data in src/data/; the viewer components render it.
Source of truth: the list blueprint in blueprint-ontology
(blueprints/list/README.md, list.als, list.test.als).
The original single-file static illustration is archived at
archive/list-illustration.html.
Deploy
Pushes to main are picked up by Coolify at https://platform.apoena.dev and deployed to
https://blueprints.apoena.dev.