tillandClaude Opus 5
71ffedfaa4
/ and /de/ are now two pages from one shared component and one copy file, with hreflang between them and a language button in the header. Separate URLs rather than a runtime switch: each language is linkable and indexable, and the page still works without JavaScript. The sheet playground takes its labels from the page, so its readout says "29,7 cm" in German and "29.7 cm" in English. New section for the `ai` module, because the page so far read as if Klarbild were print-only. It says plainly what the module costs and that the endpoint is configurable, and it carries a preset builder: pick tasks and a target size, see the exact pixels and the recipe that gets saved. It composes; it does not generate. A generator here would need a key on a public page and would show a picture from a model rather than anything about Klarbild — the part worth showing is the recipe. The target pixels come from engine/format.ts, copied verbatim from the application like the layout files. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Nh4A79bbqT9dcd2inzYUdg
45 lines
1.9 KiB
Markdown
45 lines
1.9 KiB
Markdown
# klarbild-demo
|
|
|
|
The product and demo page for [Klarbild](https://github.com/tillheidrich/klarbild),
|
|
live at **klarbild-demo.heidrich-digital.de**.
|
|
|
|
Two static Astro pages — `/` in English and `/de/` in German, from one shared
|
|
component and one copy file (`src/lib/copy.ts`). The languages are separate URLs
|
|
rather than a runtime switch, so each one is linkable, indexable and works without
|
|
JavaScript; the button in the header is an ordinary link. The interesting part is `src/lib/playground.ts`: it
|
|
imports `src/engine/printlayout.ts` and `src/engine/paper.ts` **verbatim from the
|
|
Klarbild repository** and runs them in the visitor's browser. So the sheet you see
|
|
being laid out is not a mock-up — it is the application's own arithmetic, and the
|
|
PDF the page hands you is drawn from the same placements (with pdf-lib in the
|
|
browser rather than sharp on a server, which is why it carries outlines instead of
|
|
photographs).
|
|
|
|
The preset builder in the image-generation section does the same with
|
|
`src/engine/format.ts`: it composes a real Klarbild recipe and shows the exact
|
|
target pixels, but it never calls a model. Generating on a public page would mean
|
|
a key on that page and a bill for every curious visitor — and the picture would
|
|
say something about the model rather than about Klarbild.
|
|
|
|
Nothing is uploaded and there is no backend.
|
|
|
|
```bash
|
|
npm install
|
|
npm run dev
|
|
```
|
|
|
|
## Keeping the engine in sync
|
|
|
|
`src/engine/*` are copies. When the print engine changes upstream, copy them again:
|
|
|
|
```bash
|
|
cp ../klarbild/src/lib/{printlayout,paper,printoversize,format}.ts src/engine/
|
|
cp ../klarbild/src/styles/tokens.css src/styles/tokens.css
|
|
# printoversize.ts imports './printlayout.ts'; drop the extension for the bundler
|
|
sed -i "s#from './printlayout.ts'#from './printlayout'#" src/engine/printoversize.ts
|
|
```
|
|
|
|
## Deployment
|
|
|
|
Dockerfile: Node builds the site, nginx serves it on port 80. Coolify deploys on
|
|
push to `main`.
|