3dtours
cc88471256
The theme menu now carries a fourth choice beside light/dark and the accent: the font pairing. All three pairings are free for commercial use (SIL OFL), have a Vietnamese subset, and are self-hosted — the landing still makes no CDN request. - styles/fonts.css: 22 @font-face blocks for Plus Jakarta Sans, Inter, JetBrains Mono, Fraunces, Be Vietnam Pro, Courier Prime and Space Mono, vietnamese/latin-ext/latin subsets only, under public/assets/fonts. - styles/tokens.css: [data-fonts="studio|editorial|native"] sets --font, --font-heading and --mono. Studio (Plus Jakarta Sans + Inter + JetBrains Mono) is the default. - theme/: FontSetId + FONT_SETS, persisted as rc.fonts, applied as <html data-fonts> next to data-theme and data-accent. - TopBar and the landing nav both get the picker; on the landing the theme tool now opens a small popover (light/dark + font group) instead of toggling on click. - landing.css: --lp-display/--lp-mono now resolve to the chosen group, so the picker retypes the whole page. Syne.woff2 goes with its @font-face.
92 lines
3.6 KiB
Markdown
92 lines
3.6 KiB
Markdown
# RecipesCam web — self-contained stack
|
|
|
|
A Docker-hosted web build of RecipesCam. Everything it needs is in this folder:
|
|
move it to another machine, run two commands, and the app is up. It does **not**
|
|
need the React Native project around it.
|
|
|
|
```bash
|
|
cp .env.example .env
|
|
docker compose up -d --build
|
|
# → http://localhost:8090
|
|
```
|
|
|
|
## What runs where
|
|
|
|
| Service | Image | Role |
|
|
| --- | --- | --- |
|
|
| `frontend` | `nginx:1.27-alpine` (built by `frontend/Dockerfile`) | Static SPA + `/api/` reverse proxy |
|
|
| `api` | `node:22-slim` (built by `backend/Dockerfile`) | Accounts + saved recipes, SQLite on `./data` |
|
|
|
|
`frontend` resolves `api` through Docker's embedded DNS and proxies `/api/*` to
|
|
it — that is why the API container is named `api` and why it is not published on
|
|
the host. Only `${WEB_PORT:-8090}` is exposed.
|
|
|
|
Photos never leave the browser. The CanvasKit render pipeline (grade, frame,
|
|
watermarks, JPEG encode) runs in the visitor's tab; the API only stores recipes
|
|
as JSON.
|
|
|
|
## Layout
|
|
|
|
```
|
|
docker-compose.yml the stack
|
|
.env.example WEB_PORT
|
|
data/ SQLite (created on first run, gitignored)
|
|
backend/ Fastify + better-sqlite3 API, own Dockerfile
|
|
frontend/ Vite + React + CanvasKit SPA, own Dockerfile + nginx.conf
|
|
shared/ vendored copies of the app's types + utils (see below)
|
|
src/engine/ skiaShim.ts (CanvasKit) + exportEngine.ts (render pipeline)
|
|
+ session.ts (localStorage/IndexedDB studio persistence)
|
|
```
|
|
|
|
### Vendored files
|
|
|
|
`frontend/shared/{types/index.ts,utils/*.ts}` are byte-identical copies of
|
|
`src/types/index.ts` and ten `src/utils/*.ts` files from the React Native
|
|
project (`@shopify/react-native-skia` is aliased to `src/engine/skiaShim.ts` in
|
|
`vite.config.ts` + `tsconfig.json`, so those files compile unchanged):
|
|
|
|
`cinemaShader` `colorUtils` `defaultRecipes` `exifWrite` `frameUtils` `jpegDpi`
|
|
`paramDefs` `recipeShare` `skiaImage` `toneShader`.
|
|
|
|
The landing page needs no CDN: `frontend/public/assets/fonts/*.woff2` are the
|
|
seven self-hosted faces behind the three font groups the Themes menu offers
|
|
(Plus Jakarta Sans / Inter / JetBrains Mono, Fraunces / Be Vietnam Pro /
|
|
Courier Prime, Be Vietnam Pro / Space Mono — all SIL OFL, pulled from Google
|
|
Fonts, vietnamese + latin + latin-ext subsets), and
|
|
`frontend/public/assets/samples/s*.jpg` are the six placeholder negatives the
|
|
film strip, preset tester and QR card show (swap them for real graded stills
|
|
whenever we have them). Its one foreign request is the QR image from
|
|
`api.qrserver.com`, which degrades to an empty slot offline.
|
|
|
|
When the app changes one of them, copy it back in — the renderer is only
|
|
"parity" for as long as these stay in sync:
|
|
|
|
```bash
|
|
cd <repo>/docker/frontend/shared/utils
|
|
cp <repo>/src/utils/<name>.ts .
|
|
```
|
|
|
|
## Operations
|
|
|
|
```bash
|
|
docker compose logs -f api # API log
|
|
docker compose restart api # after backend/src changes (rebuild: --build)
|
|
docker compose down # stop; ./data survives
|
|
```
|
|
|
|
Backup is the `./data` folder — that is the whole database.
|
|
|
|
## Checks
|
|
|
|
```bash
|
|
curl -s http://localhost:8090/api/health # {"ok":true}
|
|
curl -sI http://localhost:8090/ # 200, index.html
|
|
```
|
|
|
|
Then open the UI, drop a photo in, and confirm the preview shows the picture and
|
|
EXPORT downloads a JPEG that opens. The preview going solid black while the
|
|
export still reports a plausible size is the one failure mode worth knowing: it
|
|
means the CanvasKit GPU surfaces lost their shared `GrDirectContext` (see
|
|
`frontend/src/engine/skiaShim.ts`), and with no GPU the raster fallback renders
|
|
the same pipeline correctly, just slower.
|