# 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`.