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
1.9 KiB
klarbild-demo
The product and demo page for 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.
npm install
npm run dev
Keeping the engine in sync
src/engine/* are copies. When the print engine changes upstream, copy them again:
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.