From 3439fc834f5d9f3c125a18305375bfae7a717c37 Mon Sep 17 00:00:00 2001 From: Ryan Chou Date: Sun, 22 Mar 2026 19:54:53 -0700 Subject: [PATCH] add: script to generate thumbnails --- README.md | 39 ++- data/meals.json | 18 + package-lock.json | 608 +++++++++++++++++++++++++++++++++ package.json | 7 +- scripts/build.js | 30 +- scripts/generate-thumbnails.js | 93 +++++ scripts/lib/meals.js | 81 +++++ 7 files changed, 843 insertions(+), 33 deletions(-) create mode 100644 package-lock.json create mode 100644 scripts/generate-thumbnails.js create mode 100644 scripts/lib/meals.js diff --git a/README.md b/README.md index 72b81ce..68e0fdf 100644 --- a/README.md +++ b/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/.jpg` - Thumbnails live at `images/thumbs/.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. diff --git a/data/meals.json b/data/meals.json index d6d077a..eee3fb7 100644 --- a/data/meals.json +++ b/data/meals.json @@ -1,6 +1,12 @@ [ { "id": "01", + "thumbnail": { + "focus": { + "x": 0.35, + "y": 0.5 + } + }, "position": "left center", "title": "sf on $10", "description": "this was so not real i can't believe technically u paid for our first meal back. calmluh 3 years after. first hang !!!! pork buns were yummy 7/10" @@ -12,6 +18,12 @@ }, { "id": "03", + "thumbnail": { + "focus": { + "x": 0.5, + "y": 0.35 + } + }, "position": "top center", "title": "aloha fresh", "description": "we fucking love this place 10/10 i love poke i should have never quit pokehouse" @@ -23,6 +35,12 @@ }, { "id": "05", + "thumbnail": { + "focus": { + "x": 0.5, + "y": 0.35 + } + }, "position": "top center", "title": "sizzling lunch", "description": "better than pepper lunch. server was being a little bitchy but i would be too if i was the only one working the front. 8/10" diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..d850988 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,608 @@ +{ + "name": "gallery", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "gallery", + "dependencies": { + "sharp": "^0.34.5" + } + }, + "node_modules/@emnapi/runtime": { + "version": "1.9.1", + "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.9.1.tgz", + "integrity": "sha512-VYi5+ZVLhpgK4hQ0TAjiQiZ6ol0oe4mBx7mVv7IflsiEp0OWoVsp/+f9Vc1hOhE0TtkORVrI1GvzyreqpgWtkA==", + "license": "MIT", + "optional": true, + "dependencies": { + "tslib": "^2.4.0" + } + }, + "node_modules/@img/colour": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.1.0.tgz", + "integrity": "sha512-Td76q7j57o/tLVdgS746cYARfSyxk8iEfRxewL9h4OMzYhbW4TAcppl0mT4eyqXddh6L/jwoM75mo7ixa/pCeQ==", + "license": "MIT", + "engines": { + "node": ">=18" + } + }, + "node_modules/@img/sharp-darwin-arm64": { + "version": "0.34.5", + "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.34.5.tgz", + "integrity": "sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w==", + "cpu": [ + "arm64" + ], + "license": "Apache-2.0", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^18.17.0 || ^20.3.0 || >=21.0.0" + }, + "funding": { + "url": "https://opencollective.com/libvips" + }, + "optionalDependencies": { + "@img/sharp-libvips-darwin-arm64": "1.2.4" + } + }, + "node_modules/@img/sharp-darwin-x64": { + "version": "0.34.5", + "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.34.5.tgz", + "integrity": "sha512-YNEFAF/4KQ/PeW0N+r+aVVsoIY0/qxxikF2SWdp+NRkmMB7y9LBZAVqQ4yhGCm/H3H270OSykqmQMKLBhBJDEw==", + "cpu": [ + "x64" + ], + "license": "Apache-2.0", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^18.17.0 || ^20.3.0 || >=21.0.0" + }, + "funding": { + "url": "https://opencollective.com/libvips" + }, + "optionalDependencies": { + "@img/sharp-libvips-darwin-x64": "1.2.4" + } + }, + "node_modules/@img/sharp-libvips-darwin-arm64": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.2.4.tgz", + "integrity": "sha512-zqjjo7RatFfFoP0MkQ51jfuFZBnVE2pRiaydKJ1G/rHZvnsrHAOcQALIi9sA5co5xenQdTugCvtb1cuf78Vf4g==", + "cpu": [ + "arm64" + ], + "license": "LGPL-3.0-or-later", + "optional": true, + "os": [ + "darwin" + ], + "funding": { + "url": "https://opencollective.com/libvips" + } + }, + "node_modules/@img/sharp-libvips-darwin-x64": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.2.4.tgz", + "integrity": "sha512-1IOd5xfVhlGwX+zXv2N93k0yMONvUlANylbJw1eTah8K/Jtpi15KC+WSiaX/nBmbm2HxRM1gZ0nSdjSsrZbGKg==", + "cpu": [ + "x64" + ], + "license": "LGPL-3.0-or-later", + "optional": true, + "os": [ + "darwin" + ], + "funding": { + "url": "https://opencollective.com/libvips" + } + }, + "node_modules/@img/sharp-libvips-linux-arm": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.2.4.tgz", + "integrity": "sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A==", + "cpu": [ + "arm" + ], + "libc": [ + "glibc" + ], + "license": "LGPL-3.0-or-later", + "optional": true, + "os": [ + "linux" + ], + "funding": { + "url": "https://opencollective.com/libvips" + } + }, + "node_modules/@img/sharp-libvips-linux-arm64": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.2.4.tgz", + "integrity": "sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw==", + "cpu": [ + "arm64" + ], + "libc": [ + "glibc" + ], + "license": "LGPL-3.0-or-later", + "optional": true, + "os": [ + "linux" + ], + "funding": { + "url": "https://opencollective.com/libvips" + } + }, + "node_modules/@img/sharp-libvips-linux-ppc64": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.2.4.tgz", + "integrity": "sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA==", + "cpu": [ + "ppc64" + ], + "libc": [ + "glibc" + ], + "license": "LGPL-3.0-or-later", + "optional": true, + "os": [ + "linux" + ], + "funding": { + "url": "https://opencollective.com/libvips" + } + }, + "node_modules/@img/sharp-libvips-linux-riscv64": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-riscv64/-/sharp-libvips-linux-riscv64-1.2.4.tgz", + "integrity": "sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA==", + "cpu": [ + "riscv64" + ], + "libc": [ + "glibc" + ], + "license": "LGPL-3.0-or-later", + "optional": true, + "os": [ + "linux" + ], + "funding": { + "url": "https://opencollective.com/libvips" + } + }, + "node_modules/@img/sharp-libvips-linux-s390x": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.2.4.tgz", + "integrity": "sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ==", + "cpu": [ + "s390x" + ], + "libc": [ + "glibc" + ], + "license": "LGPL-3.0-or-later", + "optional": true, + "os": [ + "linux" + ], + "funding": { + "url": "https://opencollective.com/libvips" + } + }, + "node_modules/@img/sharp-libvips-linux-x64": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.2.4.tgz", + "integrity": "sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw==", + "cpu": [ + "x64" + ], + "libc": [ + "glibc" + ], + "license": "LGPL-3.0-or-later", + "optional": true, + "os": [ + "linux" + ], + "funding": { + "url": "https://opencollective.com/libvips" + } + }, + "node_modules/@img/sharp-libvips-linuxmusl-arm64": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.2.4.tgz", + "integrity": "sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw==", + "cpu": [ + "arm64" + ], + "libc": [ + "musl" + ], + "license": "LGPL-3.0-or-later", + "optional": true, + "os": [ + "linux" + ], + "funding": { + "url": "https://opencollective.com/libvips" + } + }, + "node_modules/@img/sharp-libvips-linuxmusl-x64": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.2.4.tgz", + "integrity": "sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg==", + "cpu": [ + "x64" + ], + "libc": [ + "musl" + ], + "license": "LGPL-3.0-or-later", + "optional": true, + "os": [ + "linux" + ], + "funding": { + "url": "https://opencollective.com/libvips" + } + }, + "node_modules/@img/sharp-linux-arm": { + "version": "0.34.5", + "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.34.5.tgz", + "integrity": "sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw==", + "cpu": [ + "arm" + ], + "libc": [ + "glibc" + ], + "license": "Apache-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": "^18.17.0 || ^20.3.0 || >=21.0.0" + }, + "funding": { + "url": "https://opencollective.com/libvips" + }, + "optionalDependencies": { + "@img/sharp-libvips-linux-arm": "1.2.4" + } + }, + "node_modules/@img/sharp-linux-arm64": { + "version": "0.34.5", + "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.34.5.tgz", + "integrity": "sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg==", + "cpu": [ + "arm64" + ], + "libc": [ + "glibc" + ], + "license": "Apache-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": "^18.17.0 || ^20.3.0 || >=21.0.0" + }, + "funding": { + "url": "https://opencollective.com/libvips" + }, + "optionalDependencies": { + "@img/sharp-libvips-linux-arm64": "1.2.4" + } + }, + "node_modules/@img/sharp-linux-ppc64": { + "version": "0.34.5", + "resolved": "https://registry.npmjs.org/@img/sharp-linux-ppc64/-/sharp-linux-ppc64-0.34.5.tgz", + "integrity": "sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA==", + "cpu": [ + "ppc64" + ], + "libc": [ + "glibc" + ], + "license": "Apache-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": "^18.17.0 || ^20.3.0 || >=21.0.0" + }, + "funding": { + "url": "https://opencollective.com/libvips" + }, + "optionalDependencies": { + "@img/sharp-libvips-linux-ppc64": "1.2.4" + } + }, + "node_modules/@img/sharp-linux-riscv64": { + "version": "0.34.5", + "resolved": "https://registry.npmjs.org/@img/sharp-linux-riscv64/-/sharp-linux-riscv64-0.34.5.tgz", + "integrity": "sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw==", + "cpu": [ + "riscv64" + ], + "libc": [ + "glibc" + ], + "license": "Apache-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": "^18.17.0 || ^20.3.0 || >=21.0.0" + }, + "funding": { + "url": "https://opencollective.com/libvips" + }, + "optionalDependencies": { + "@img/sharp-libvips-linux-riscv64": "1.2.4" + } + }, + "node_modules/@img/sharp-linux-s390x": { + "version": "0.34.5", + "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.34.5.tgz", + "integrity": "sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg==", + "cpu": [ + "s390x" + ], + "libc": [ + "glibc" + ], + "license": "Apache-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": "^18.17.0 || ^20.3.0 || >=21.0.0" + }, + "funding": { + "url": "https://opencollective.com/libvips" + }, + "optionalDependencies": { + "@img/sharp-libvips-linux-s390x": "1.2.4" + } + }, + "node_modules/@img/sharp-linux-x64": { + "version": "0.34.5", + "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.34.5.tgz", + "integrity": "sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ==", + "cpu": [ + "x64" + ], + "libc": [ + "glibc" + ], + "license": "Apache-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": "^18.17.0 || ^20.3.0 || >=21.0.0" + }, + "funding": { + "url": "https://opencollective.com/libvips" + }, + "optionalDependencies": { + "@img/sharp-libvips-linux-x64": "1.2.4" + } + }, + "node_modules/@img/sharp-linuxmusl-arm64": { + "version": "0.34.5", + "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.34.5.tgz", + "integrity": "sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg==", + "cpu": [ + "arm64" + ], + "libc": [ + "musl" + ], + "license": "Apache-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": "^18.17.0 || ^20.3.0 || >=21.0.0" + }, + "funding": { + "url": "https://opencollective.com/libvips" + }, + "optionalDependencies": { + "@img/sharp-libvips-linuxmusl-arm64": "1.2.4" + } + }, + "node_modules/@img/sharp-linuxmusl-x64": { + "version": "0.34.5", + "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.34.5.tgz", + "integrity": "sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q==", + "cpu": [ + "x64" + ], + "libc": [ + "musl" + ], + "license": "Apache-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": "^18.17.0 || ^20.3.0 || >=21.0.0" + }, + "funding": { + "url": "https://opencollective.com/libvips" + }, + "optionalDependencies": { + "@img/sharp-libvips-linuxmusl-x64": "1.2.4" + } + }, + "node_modules/@img/sharp-wasm32": { + "version": "0.34.5", + "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.34.5.tgz", + "integrity": "sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw==", + "cpu": [ + "wasm32" + ], + "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT", + "optional": true, + "dependencies": { + "@emnapi/runtime": "^1.7.0" + }, + "engines": { + "node": "^18.17.0 || ^20.3.0 || >=21.0.0" + }, + "funding": { + "url": "https://opencollective.com/libvips" + } + }, + "node_modules/@img/sharp-win32-arm64": { + "version": "0.34.5", + "resolved": "https://registry.npmjs.org/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.34.5.tgz", + "integrity": "sha512-WQ3AgWCWYSb2yt+IG8mnC6Jdk9Whs7O0gxphblsLvdhSpSTtmu69ZG1Gkb6NuvxsNACwiPV6cNSZNzt0KPsw7g==", + "cpu": [ + "arm64" + ], + "license": "Apache-2.0 AND LGPL-3.0-or-later", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": "^18.17.0 || ^20.3.0 || >=21.0.0" + }, + "funding": { + "url": "https://opencollective.com/libvips" + } + }, + "node_modules/@img/sharp-win32-ia32": { + "version": "0.34.5", + "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.34.5.tgz", + "integrity": "sha512-FV9m/7NmeCmSHDD5j4+4pNI8Cp3aW+JvLoXcTUo0IqyjSfAZJ8dIUmijx1qaJsIiU+Hosw6xM5KijAWRJCSgNg==", + "cpu": [ + "ia32" + ], + "license": "Apache-2.0 AND LGPL-3.0-or-later", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": "^18.17.0 || ^20.3.0 || >=21.0.0" + }, + "funding": { + "url": "https://opencollective.com/libvips" + } + }, + "node_modules/@img/sharp-win32-x64": { + "version": "0.34.5", + "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.34.5.tgz", + "integrity": "sha512-+29YMsqY2/9eFEiW93eqWnuLcWcufowXewwSNIT6UwZdUUCrM3oFjMWH/Z6/TMmb4hlFenmfAVbpWeup2jryCw==", + "cpu": [ + "x64" + ], + "license": "Apache-2.0 AND LGPL-3.0-or-later", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": "^18.17.0 || ^20.3.0 || >=21.0.0" + }, + "funding": { + "url": "https://opencollective.com/libvips" + } + }, + "node_modules/detect-libc": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz", + "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==", + "license": "Apache-2.0", + "engines": { + "node": ">=8" + } + }, + "node_modules/semver": { + "version": "7.7.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz", + "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==", + "license": "ISC", + "bin": { + "semver": "bin/semver.js" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/sharp": { + "version": "0.34.5", + "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.5.tgz", + "integrity": "sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==", + "hasInstallScript": true, + "license": "Apache-2.0", + "dependencies": { + "@img/colour": "^1.0.0", + "detect-libc": "^2.1.2", + "semver": "^7.7.3" + }, + "engines": { + "node": "^18.17.0 || ^20.3.0 || >=21.0.0" + }, + "funding": { + "url": "https://opencollective.com/libvips" + }, + "optionalDependencies": { + "@img/sharp-darwin-arm64": "0.34.5", + "@img/sharp-darwin-x64": "0.34.5", + "@img/sharp-libvips-darwin-arm64": "1.2.4", + "@img/sharp-libvips-darwin-x64": "1.2.4", + "@img/sharp-libvips-linux-arm": "1.2.4", + "@img/sharp-libvips-linux-arm64": "1.2.4", + "@img/sharp-libvips-linux-ppc64": "1.2.4", + "@img/sharp-libvips-linux-riscv64": "1.2.4", + "@img/sharp-libvips-linux-s390x": "1.2.4", + "@img/sharp-libvips-linux-x64": "1.2.4", + "@img/sharp-libvips-linuxmusl-arm64": "1.2.4", + "@img/sharp-libvips-linuxmusl-x64": "1.2.4", + "@img/sharp-linux-arm": "0.34.5", + "@img/sharp-linux-arm64": "0.34.5", + "@img/sharp-linux-ppc64": "0.34.5", + "@img/sharp-linux-riscv64": "0.34.5", + "@img/sharp-linux-s390x": "0.34.5", + "@img/sharp-linux-x64": "0.34.5", + "@img/sharp-linuxmusl-arm64": "0.34.5", + "@img/sharp-linuxmusl-x64": "0.34.5", + "@img/sharp-wasm32": "0.34.5", + "@img/sharp-win32-arm64": "0.34.5", + "@img/sharp-win32-ia32": "0.34.5", + "@img/sharp-win32-x64": "0.34.5" + } + }, + "node_modules/tslib": { + "version": "2.8.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz", + "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==", + "license": "0BSD", + "optional": true + } + } +} diff --git a/package.json b/package.json index 54c1158..c32cc86 100644 --- a/package.json +++ b/package.json @@ -2,6 +2,11 @@ "name": "gallery", "private": true, "scripts": { - "build": "node scripts/build.js" + "build": "npm run build:thumbs && npm run build:pages", + "build:pages": "node scripts/build.js", + "build:thumbs": "node scripts/generate-thumbnails.js" + }, + "dependencies": { + "sharp": "^0.34.5" } } diff --git a/scripts/build.js b/scripts/build.js index 2b28d23..b22aabe 100644 --- a/scripts/build.js +++ b/scripts/build.js @@ -1,8 +1,8 @@ const fs = require("fs"); const path = require("path"); -const repoRoot = path.resolve(__dirname, ".."); -const mealsPath = path.join(repoRoot, "data", "meals.json"); +const { loadMeals, repoRoot } = require("./lib/meals"); + const indexTemplatePath = path.join(repoRoot, "templates", "index.html"); const indexOutputPath = path.join(repoRoot, "index.html"); @@ -17,28 +17,6 @@ function escapeHtml(value) { .replace(/"/g, """); } -function validateMeals(meals) { - if (!Array.isArray(meals)) { - throw new Error("data/meals.json must contain an array"); - } - - for (const [index, meal] of meals.entries()) { - if (!meal || typeof meal !== "object") { - throw new Error(`Meal at index ${index} must be an object`); - } - - for (const field of ["id", "title", "description"]) { - if (typeof meal[field] !== "string" || meal[field].length === 0) { - throw new Error(`Meal ${index} is missing required string field "${field}"`); - } - } - - if (meal.position !== undefined && typeof meal.position !== "string") { - throw new Error(`Meal ${index} has a non-string "position" value`); - } - } -} - function renderGalleryItem(meal, eol) { const attrs = [`class="thumbnail"`, `href="images/fulls/${meal.id}.jpg"`]; @@ -72,9 +50,7 @@ function replaceBlock(template, token, replacement) { function buildIndex() { const template = fs.readFileSync(indexTemplatePath, "utf8"); const eol = detectEol(template); - const meals = JSON.parse(fs.readFileSync(mealsPath, "utf8")); - - validateMeals(meals); + const meals = loadMeals(); return replaceBlock(template, "gallery_items", renderGallery(meals, eol)); } diff --git a/scripts/generate-thumbnails.js b/scripts/generate-thumbnails.js new file mode 100644 index 0000000..d1ceff1 --- /dev/null +++ b/scripts/generate-thumbnails.js @@ -0,0 +1,93 @@ +const fs = require("fs"); +const path = require("path"); +const sharp = require("sharp"); + +const { loadMeals, repoRoot } = require("./lib/meals"); + +const fullsDir = path.join(repoRoot, "images", "fulls"); +const thumbsDir = path.join(repoRoot, "images", "thumbs"); + +const THUMB_WIDTH = 240; +const THUMB_HEIGHT = 320; +const JPEG_QUALITY = 82; + +function clamp(value, min, max) { + return Math.min(Math.max(value, min), max); +} + +function getThumbnailPaths(meal) { + return { + fullPath: path.join(fullsDir, `${meal.id}.jpg`), + thumbPath: path.join(thumbsDir, `${meal.id}.jpg`), + }; +} + +function getCropArea(width, height, focus) { + const targetRatio = THUMB_WIDTH / THUMB_HEIGHT; + const sourceRatio = width / height; + + let cropWidth = width; + let cropHeight = height; + + if (sourceRatio > targetRatio) { + cropWidth = Math.round(height * targetRatio); + } else if (sourceRatio < targetRatio) { + cropHeight = Math.round(width / targetRatio); + } + + const centerX = (focus?.x ?? 0.5) * width; + const centerY = (focus?.y ?? 0.5) * height; + const left = Math.round(centerX - cropWidth / 2); + const top = Math.round(centerY - cropHeight / 2); + + return { + left: clamp(left, 0, width - cropWidth), + top: clamp(top, 0, height - cropHeight), + width: cropWidth, + height: cropHeight, + }; +} + +async function generateThumbnail(meal) { + const { fullPath, thumbPath } = getThumbnailPaths(meal); + + if (!fs.existsSync(fullPath)) { + throw new Error(`Missing full-size image for meal ${meal.id}: ${fullPath}`); + } + + const image = sharp(fullPath); + const metadata = await image.metadata(); + + if (!metadata.width || !metadata.height) { + throw new Error(`Could not read image dimensions for ${fullPath}`); + } + + const cropArea = getCropArea( + metadata.width, + metadata.height, + meal.thumbnail?.focus + ); + + await image + .extract(cropArea) + .resize(THUMB_WIDTH, THUMB_HEIGHT) + .jpeg({ quality: JPEG_QUALITY, mozjpeg: true }) + .toFile(thumbPath); +} + +async function main() { + const meals = loadMeals(); + + await fs.promises.mkdir(thumbsDir, { recursive: true }); + + for (const meal of meals) { + await generateThumbnail(meal); + } + + console.log(`Generated ${meals.length} thumbnails in images/thumbs`); +} + +main().catch((error) => { + console.error(error.message); + process.exitCode = 1; +}); diff --git a/scripts/lib/meals.js b/scripts/lib/meals.js new file mode 100644 index 0000000..00151ce --- /dev/null +++ b/scripts/lib/meals.js @@ -0,0 +1,81 @@ +const fs = require("fs"); +const path = require("path"); + +const repoRoot = path.resolve(__dirname, "..", ".."); +const mealsPath = path.join(repoRoot, "data", "meals.json"); + +function validateThumbnail(meal, index) { + if (meal.thumbnail === undefined) { + return; + } + + if ( + !meal.thumbnail || + typeof meal.thumbnail !== "object" || + Array.isArray(meal.thumbnail) + ) { + throw new Error(`Meal ${index} has an invalid "thumbnail" object`); + } + + if (meal.thumbnail.focus === undefined) { + return; + } + + const { focus } = meal.thumbnail; + + if (!focus || typeof focus !== "object" || Array.isArray(focus)) { + throw new Error(`Meal ${index} has an invalid "thumbnail.focus" object`); + } + + for (const axis of ["x", "y"]) { + if (typeof focus[axis] !== "number" || !Number.isFinite(focus[axis])) { + throw new Error( + `Meal ${index} has a non-numeric thumbnail focus value for "${axis}"` + ); + } + + if (focus[axis] < 0 || focus[axis] > 1) { + throw new Error( + `Meal ${index} thumbnail focus "${axis}" must be between 0 and 1` + ); + } + } +} + +function validateMeals(meals) { + if (!Array.isArray(meals)) { + throw new Error("data/meals.json must contain an array"); + } + + for (const [index, meal] of meals.entries()) { + if (!meal || typeof meal !== "object") { + throw new Error(`Meal at index ${index} must be an object`); + } + + for (const field of ["id", "title", "description"]) { + if (typeof meal[field] !== "string" || meal[field].length === 0) { + throw new Error(`Meal ${index} is missing required string field "${field}"`); + } + } + + if (meal.position !== undefined && typeof meal.position !== "string") { + throw new Error(`Meal ${index} has a non-string "position" value`); + } + + validateThumbnail(meal, index); + } +} + +function loadMeals() { + const meals = JSON.parse(fs.readFileSync(mealsPath, "utf8")); + + validateMeals(meals); + + return meals; +} + +module.exports = { + loadMeals, + mealsPath, + repoRoot, +};