TudorandClaude Opus 5
914b429a28
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>
104 lines
4.2 KiB
JavaScript
104 lines
4.2 KiB
JavaScript
#!/usr/bin/env node
|
||
/**
|
||
* Derivatives for the landing hero artwork.
|
||
*
|
||
* node scripts/build-hero-images.js
|
||
*
|
||
* Source of truth is assets/hero-source.png (1672×941). It is committed so
|
||
* these can be regenerated: never hand-edit anything in public/brand/hero-*,
|
||
* change the source or the numbers here and re-run.
|
||
*
|
||
* TWO CROPS, ON PURPOSE
|
||
* ---------------------
|
||
* The hero slot is not one shape. On desktop the artwork sits behind the whole
|
||
* panel at roughly 2.1:1 → 2.7:1; below the one-column breakpoint it collapses
|
||
* to a band between 2.6:1 and 4.9:1. A single file under `object-fit: cover`
|
||
* centre-crops, which at the extremes slices a strip through the middle of the
|
||
* scene and loses the schoolhouse — the same failure the previous SVG hero had.
|
||
*
|
||
* So:
|
||
* wide the full frame, including the empty cream area the artwork reserves
|
||
* on the left for the headline. Used behind the desktop panel.
|
||
* band a crop around the schoolhouse and the path, already near 2.6:1, so
|
||
* the narrow band barely crops it at all. The school sits at ~65%
|
||
* across, which is why the CSS pairs this with object-position: 65%:
|
||
* 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.
|
||
*/
|
||
|
||
const path = require('path');
|
||
const fs = require('fs');
|
||
const sharp = require('sharp');
|
||
|
||
const SRC = path.join(__dirname, '..', 'assets', 'hero-source.png');
|
||
const OUT = path.join(__dirname, '..', 'public', 'brand');
|
||
|
||
/*
|
||
* Band crop, in source pixels. The schoolhouse occupies roughly x 1180–1540,
|
||
* y 300–520, so this keeps it whole with headroom above the flag and enough
|
||
* hillside below to read as landscape rather than as a cutout.
|
||
*/
|
||
const BAND = { left: 700, top: 260, width: 972, height: 380 };
|
||
|
||
const WIDE_WIDTHS = [1672, 1200, 900];
|
||
const BAND_WIDTHS = [972, 700, 500];
|
||
|
||
async function emit(pipeline, name, width) {
|
||
const base = pipeline.clone().resize({ width, withoutEnlargement: true });
|
||
await base.clone().avif({ quality: 62, effort: 6 }).toFile(path.join(OUT, `${name}-${width}.avif`));
|
||
await base.clone().webp({ quality: 80, effort: 6 }).toFile(path.join(OUT, `${name}-${width}.webp`));
|
||
return width;
|
||
}
|
||
|
||
async function main() {
|
||
if (!fs.existsSync(SRC)) throw new Error(`missing source: ${SRC}`);
|
||
fs.mkdirSync(OUT, { recursive: true });
|
||
|
||
const meta = await sharp(SRC).metadata();
|
||
console.log(`source ${meta.width}×${meta.height}`);
|
||
|
||
const wide = sharp(SRC);
|
||
for (const w of WIDE_WIDTHS) await emit(wide, 'hero-wide', w);
|
||
// Fallback for the <img> itself. Flattened onto the artwork's own cream so a
|
||
// JPEG (no alpha) can never composite against black.
|
||
await sharp(SRC)
|
||
.resize({ width: 1200 })
|
||
.flatten({ background: '#FDF9F3' })
|
||
.jpeg({ quality: 82, mozjpeg: true })
|
||
.toFile(path.join(OUT, 'hero-wide-1200.jpg'));
|
||
|
||
const band = sharp(SRC).extract(BAND);
|
||
for (const w of BAND_WIDTHS) await emit(band, 'hero-band', w);
|
||
await sharp(SRC)
|
||
.extract(BAND)
|
||
.resize({ width: 700 })
|
||
.flatten({ background: '#FDF9F3' })
|
||
.jpeg({ quality: 82, mozjpeg: true })
|
||
.toFile(path.join(OUT, 'hero-band-700.jpg'));
|
||
|
||
const files = fs.readdirSync(OUT).filter(f => f.startsWith('hero-')).sort();
|
||
let total = 0;
|
||
for (const f of files) {
|
||
const { size } = fs.statSync(path.join(OUT, f));
|
||
total += size;
|
||
console.log(` ${f.padEnd(24)} ${(size / 1024).toFixed(1)} kB`);
|
||
}
|
||
console.log(`total ${(total / 1024).toFixed(1)} kB across ${files.length} files`);
|
||
}
|
||
|
||
main().catch(err => {
|
||
console.error(err);
|
||
process.exit(1);
|
||
});
|