fix(home): art-direct the hero's fallback path, and declare sharp

Two findings from review on #93, both verified before fixing. <img src> cannot vary by viewport, so it was always the wide desktop crop. A browser taking neither AVIF nor WebP therefore fell through to the desktop frame on a phone and lost the schoolhouse — the exact failure the two-crop <picture> exists to prevent, surviving in the one path nobody looks at. The band JPEG the build script already emitted was never referenced, which was the tell. It now backs a <source media> placed after the modern formats, so they still win wherever they are supported. Verified by stripping the AVIF and WebP <source>s at runtime and letting <picture> re-resolve, which is what an old browser actually sees: phone hero-band-500.avif → hero-band-700.jpg (band crop, school kept) desktop hero-wide-1672.avif → hero-wide-1200.jpg sharp was not declared: it arrives transitively from next@16.1.6, so the documented regeneration command works today and breaks on a Next upgrade or a clean install that resolves differently. Declared in devDependencies for the same reason next.config.js already declares its traced font files rather than trusting the tracer to keep finding them. The third finding — that the hero's licence is marked unconfirmed in CREDITS.md while the artwork ships — is accurate and deliberate. It is the owner's to answer; recording it as unknown is the point of the file. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
feat(home): use the supplied hero artwork instead of a drawn one
2026-08-14 21:46:04 +01:00 · 2026-08-14 21:36:40 +01:00 · 2026-08-14 18:18:53 +00:00
4 changed files with 30 additions and 8 deletions
@@ -60,6 +60,18 @@ export function HeroIllustration() {
        srcSet="/brand/hero-band-500.webp 500w, /brand/hero-band-700.webp 700w, /brand/hero-band-972.webp 972w"
        sizes={SIZES}
      />
+      {/*
+        The band's JPEG, and the reason it exists.
+
+        <img src> cannot vary by viewport, so it is always the wide crop. A
+        browser that takes neither AVIF nor WebP would therefore fall through
+        to the desktop frame on a phone and lose the schoolhouse — the exact
+        failure this whole component is arranged to prevent, surviving in the
+        one path nobody looks at. No `type` here, so it matches anywhere the
+        media query does, and it sits after the modern formats so they still
+        win where supported.
+      */}
+      <source media="(max-width: 860px)" srcSet="/brand/hero-band-700.jpg" />
      <source
        type="image/avif"
        srcSet="/brand/hero-wide-900.avif 900w, /brand/hero-wide-1200.avif 1200w, /brand/hero-wide-1672.avif 1672w"
@@ -31,7 +31,8 @@
        "@types/jest": "^30.0.0",
        "@types/leaflet": "^1.9.21",
        "jest": "^30.2.0",
-        "jest-environment-jsdom": "^30.2.0"
+        "jest-environment-jsdom": "^30.2.0",
+        "sharp": "^0.34.5"
      }
    },
    "node_modules/@adobe/css-tools": {
@@ -937,8 +938,8 @@
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.0.0.tgz",
      "integrity": "sha512-A5P/LfWGFSl6nsckYtjw9da+19jB8hkJ6ACTGcDfEJ0aE+l2n2El7dsVM7UVHZQ9s2lmYMWlrS21YLy2IR1LUw==",
+      "devOptional": true,
      "license": "MIT",
-      "optional": true,
      "engines": {
        "node": ">=18"
      }
@@ -4160,8 +4161,8 @@
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "devOptional": true,
      "license": "Apache-2.0",
-      "optional": true,
      "engines": {
        "node": ">=8"
      }
@@ -8584,9 +8585,9 @@
      "version": "0.34.5",
      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.5.tgz",
      "integrity": "sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==",
+      "devOptional": true,
      "hasInstallScript": true,
      "license": "Apache-2.0",
-      "optional": true,
      "dependencies": {
        "@img/colour": "^1.0.0",
        "detect-libc": "^2.1.2",
@@ -8629,8 +8630,8 @@
      "version": "7.7.3",
      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
+      "devOptional": true,
      "license": "ISC",
-      "optional": true,
      "bin": {
        "semver": "bin/semver.js"
      },
@@ -36,6 +36,7 @@
    "@types/jest": "^30.0.0",
    "@types/leaflet": "^1.9.21",
    "jest": "^30.2.0",
-    "jest-environment-jsdom": "^30.2.0"
+    "jest-environment-jsdom": "^30.2.0",
+    "sharp": "^0.34.5"
  }
 }
@@ -25,8 +25,16 @@
 *         squeezing further toward 4.9:1 crops the empty sides, not the subject.
 *
 * AVIF and WebP are both emitted. This is flat-shaded vector-style artwork, so
- * AVIF lands roughly an order of magnitude under the source PNG; the JPEG is
- * only the <img> fallback and is never served to a current browser.
+ * AVIF lands roughly an order of magnitude under the source PNG. Both crops
+ * also get a JPEG: the wide one backs the <img src>, and the band one backs a
+ * <source media> — without it a browser taking neither modern format would
+ * fall through to the desktop frame on a phone, since <img src> cannot vary by
+ * viewport.
+ *
+ * sharp is declared in devDependencies rather than leaned on as a transitive
+ * dependency of next. It does currently arrive that way, but relying on that
+ * means a Next upgrade can silently break this script — the same reasoning as
+ * the outputFileTracingIncludes note in next.config.js.
 */

 const path = require('path');