A static Astro page. The sheet playground imports the print engine (printlayout.ts, paper.ts) verbatim from the Klarbild repository and runs it in the browser, so the layout on screen is the application's own arithmetic rather than a mock-up. The PDF it offers is drawn from the same placements with pdf-lib. No backend, nothing uploaded, no third-party requests. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Nh4A79bbqT9dcd2inzYUdg
1.2 KiB
klarbild-demo
The product and demo page for Klarbild, live at klarbild-demo.heidrich-digital.de.
A single static Astro page. 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).
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}.ts src/engine/
# 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.