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
50 lines
1.8 KiB
Markdown
50 lines
1.8 KiB
Markdown
# blueprints
|
|
|
|
Deployed at https://blueprints.apoena.dev
|
|
|
|
Interactive illustrations of UI-pattern **blueprints** — the formal, framework-agnostic
|
|
contracts from [`blueprint-ontology`](https://git.apoena.dev) (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.
|
|
|
|
<!-- docs:start -->
|
|
|
|
## Documentation
|
|
|
|
- [CONTEXT.md](CONTEXT.md) — ubiquitous language (Blueprint, Viewer, Specimen, Readout, …)
|
|
- [DESIGN.md](DESIGN.md) — architecture & build-out decisions
|
|
|
|
<!-- docs:end -->
|
|
|
|
## Develop
|
|
|
|
```bash
|
|
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 `blueprint` dark 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`](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.
|