add: script to generate thumbnails

README.md

@@ -13,6 +13,7 @@ The site is based on the HTML5 UP Lens template and currently ships as a plain s
 - `images/thumbs/`: gallery thumbnails
 - `data/meals.json`: source of truth for gallery entries
 - `scripts/build.js`: renders static pages from templates and data
+- `scripts/generate-thumbnails.js`: regenerates thumbnails from the full-size images
 - `package.json`: minimal Node build entrypoint
 
 ## Content Workflow
@@ -27,16 +28,44 @@ npm run build
 
 The build currently renders the main page without changing the existing Lens gallery structure, so the current client-side viewer code continues to work.
 
+If you only need to regenerate thumbnails, run:
+
+```sh
+npm run build:thumbs
+```
+
 ## Image Conventions
 
 - Full-size images and thumbnails share the same numeric ID
 - Full-size images live at `images/fulls/<id>.jpg`
 - Thumbnails live at `images/thumbs/<id>.jpg`
-- Optional thumbnail focal positioning is stored per entry as `position`
+- `position` controls the full-screen viewer image alignment
+- `thumbnail.focus` optionally overrides the default center crop for generated thumbnails
+
+## Thumbnail Focus
+
+Thumbnails are generated from `images/fulls` with `sharp` at `240x320`.
+
+For images that should crop away from the center, add optional thumbnail focus metadata to the meal entry:
+
+```json
+{
+  "id": "34",
+  "title": "example",
+  "description": "example",
+  "thumbnail": {
+    "focus": {
+      "x": 0.35,
+      "y": 0.45
+    }
+  }
+}
+```
+
+The `x` and `y` values are normalized from `0` to `1`, where `0.5, 0.5` is the center of the image.
 
 ## Planned Features
 
-1. Better thumbnail implementation, either a small script to automatically convert full-size images into thumbnails and a build system, or another simpler approach.
-2. Automatic image ingestion, potentially with a stronger data model if the static workflow becomes too limiting.
-3. An Elo-style ranking page that shows two food images at a time and updates rankings automatically based on the selected winner.
-4. General cleanup and history cleanup once the bigger structural changes are in place.
+1. Automatic image ingestion, potentially with a stronger data model if the static workflow becomes too limiting.
+2. An Elo-style ranking page that shows two food images at a time and updates rankings automatically based on the selected winner.
+3. General cleanup and history cleanup once the bigger structural changes are in place.