Merge pull request 'feat(home): use the supplied hero artwork instead of a drawn one' (#93) from feat/hero-artwork into main

Reviewed-on: #93

nextjs-app/components/Illustration.tsx

@@ -60,18 +60,6 @@ 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"

nextjs-app/package-lock.json

@@ -31,8 +31,7 @@
         "@types/jest": "^30.0.0",
         "@types/leaflet": "^1.9.21",
         "jest": "^30.2.0",
-        "jest-environment-jsdom": "^30.2.0",
-        "sharp": "^0.34.5"
+        "jest-environment-jsdom": "^30.2.0"
       }
     },
     "node_modules/@adobe/css-tools": {
@@ -938,8 +937,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"
       }
@@ -4161,8 +4160,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"
       }
@@ -8585,9 +8584,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",
@@ -8630,8 +8629,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"
       },

nextjs-app/package.json

@@ -36,7 +36,6 @@
     "@types/jest": "^30.0.0",
     "@types/leaflet": "^1.9.21",
     "jest": "^30.2.0",
-    "jest-environment-jsdom": "^30.2.0",
-    "sharp": "^0.34.5"
+    "jest-environment-jsdom": "^30.2.0"
   }
 }

nextjs-app/scripts/build-hero-images.js

@@ -25,16 +25,8 @@
  *         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. 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.
+ * 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.
  */
 
 const path = require('path');