@morphemecms/cms 0.1.0 → 0.2.0-next-20261104150211

package/scripts/responsive-images.mjs

@@ -1,94 +1,94 @@
-#!/usr/bin/env node
-// Responsive image variants. Runs automatically before `npm run build` and `npm run dev`.
-//
-// For every image in public/images/uploads/ (imported, in their year/month
-// folders, and uploaded in the editor at /editor/) it writes smaller webp copies to public/images/_r/
-// (160, 480, 800 and 1200 px wide, only sizes smaller than the original) and records the
-// original dimensions in src/data/image-manifest.json. Templates (packages/editor/theme/components/Img.astro)
-// and Markdown content (rehype plugin in packages/editor/astro.mjs) use the manifest to add
-// srcset/sizes and width/height, so phones download a size that fits their screen.
-// It also writes a 1200 × 630 JPEG of each to public/images/_s/: the picture shown when a page is shared
-// on Facebook, LinkedIn, in a text message and the like (og:image, `shareImage` in packages/editor/site/images.mjs).
-// JPEG, because not every one of them shows webp, and cut to their wide format around what matters most.
-// Generated files are git-ignored and rebuilt only when missing or older than the source.
-import fs from 'node:fs/promises';
-import path from 'node:path';
-import sharp from 'sharp';
-
-const ROOT = process.cwd();
-const IMAGES = path.join(ROOT, 'public/images');
-const SOURCES = [{ dir: 'uploads', out: 'uploads/' }];
-const OUT_DIR = path.join(ROOT, 'public/images/_r');
-const MANIFEST = path.join(ROOT, 'src/data/image-manifest.json');
-const WIDTHS = [160, 480, 800, 1200];
-const SHARE_DIR = path.join(ROOT, 'public/images/_s');
-const SHARE = { width: 1200, height: 630 };
-
-async function walk(dir) {
-  const entries = await fs.readdir(dir, { withFileTypes: true }).catch((e) => {
-    if (e.code === 'ENOENT') return [];
-    throw e;
-  });
-  const files = await Promise.all(entries.map((e) => (e.isDirectory() ? walk(path.join(dir, e.name)) : [path.join(dir, e.name)])));
-  return files.flat();
-}
-
-async function isFresh(out, srcMtime) {
-  try {
-    return (await fs.stat(out)).mtimeMs >= srcMtime;
-  } catch {
-    return false;
-  }
-}
-
-// The share picture: a square or upright picture keeps its upper part (20 % down, like the portrait on
-// the site, so a face stays in it), a wide one what sharp finds matters most.
-function shareCut(file, width, height) {
-  if (width / height >= 1.5) return sharp(file).resize({ ...SHARE, fit: 'cover', position: 'attention' });
-  const tall = Math.round((height * SHARE.width) / width);
-  const top = Math.round((tall - SHARE.height) * 0.2);
-  return sharp(file)
-    .resize({ width: SHARE.width, height: tall })
-    .extract({ left: 0, top, ...SHARE });
-}
-
-const isImage = (f) => /\.(webp|jpe?g|png)$/i.test(f);
-const files = [];
-for (const { dir, out } of SOURCES) {
-  const src = path.join(IMAGES, dir);
-  for (const file of (await walk(src)).filter(isImage)) {
-    const rel = path.relative(src, file).split(path.sep).join('/');
-    files.push({ file, url: `/images/${dir}/${rel}`, outBase: out + rel });
-  }
-}
-const manifest = {};
-let written = 0;
-
-for (const { file, url, outBase } of files) {
-  const { width, height } = await sharp(file).metadata();
-  if (!width || !height) continue;
-  const srcMtime = (await fs.stat(file)).mtimeMs;
-  const variants = [];
-  for (const w of WIDTHS.filter((w) => w < width)) {
-    const outRel = outBase.replace(/\.[a-z]+$/i, `-${w}.webp`);
-    const out = path.join(OUT_DIR, outRel);
-    if (!(await isFresh(out, srcMtime))) {
-      await fs.mkdir(path.dirname(out), { recursive: true });
-      await sharp(file).resize({ width: w }).webp({ quality: 78 }).toFile(out);
-      written++;
-    }
-    variants.push({ w, src: `/images/_r/${outRel}` });
-  }
-  const shareRel = outBase.replace(/\.[a-z]+$/i, '.jpg');
-  const shareOut = path.join(SHARE_DIR, shareRel);
-  if (!(await isFresh(shareOut, srcMtime))) {
-    await fs.mkdir(path.dirname(shareOut), { recursive: true });
-    await shareCut(file, width, height).flatten({ background: '#ffffff' }).jpeg({ quality: 80, mozjpeg: true }).toFile(shareOut);
-    written++;
-  }
-  manifest[url] = { width, height, variants, share: `/images/_s/${shareRel}` };
-}
-
-await fs.mkdir(path.dirname(MANIFEST), { recursive: true });
-await fs.writeFile(MANIFEST, JSON.stringify(manifest) + '\n');
-console.log(`responsive-images: ${files.length} images, ${written} variants written`);
+#!/usr/bin/env node
+// Responsive image variants. Runs automatically before `npm run build` and `npm run dev`.
+//
+// For every image in public/images/uploads/ (imported, in their year/month
+// folders, and uploaded in the editor at /editor/) it writes smaller webp copies to public/images/_r/
+// (160, 480, 800 and 1200 px wide, only sizes smaller than the original) and records the
+// original dimensions in src/data/image-manifest.json. Templates (packages/editor/theme/components/Img.astro)
+// and Markdown content (rehype plugin in packages/editor/astro.mjs) use the manifest to add
+// srcset/sizes and width/height, so phones download a size that fits their screen.
+// It also writes a 1200 × 630 JPEG of each to public/images/_s/: the picture shown when a page is shared
+// on Facebook, LinkedIn, in a text message and the like (og:image, `shareImage` in packages/editor/site/images.mjs).
+// JPEG, because not every one of them shows webp, and cut to their wide format around what matters most.
+// Generated files are git-ignored and rebuilt only when missing or older than the source.
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import sharp from 'sharp';
+
+const ROOT = process.cwd();
+const IMAGES = path.join(ROOT, 'public/images');
+const SOURCES = [{ dir: 'uploads', out: 'uploads/' }];
+const OUT_DIR = path.join(ROOT, 'public/images/_r');
+const MANIFEST = path.join(ROOT, 'src/data/image-manifest.json');
+const WIDTHS = [160, 480, 800, 1200];
+const SHARE_DIR = path.join(ROOT, 'public/images/_s');
+const SHARE = { width: 1200, height: 630 };
+
+async function walk(dir) {
+  const entries = await fs.readdir(dir, { withFileTypes: true }).catch((e) => {
+    if (e.code === 'ENOENT') return [];
+    throw e;
+  });
+  const files = await Promise.all(entries.map((e) => (e.isDirectory() ? walk(path.join(dir, e.name)) : [path.join(dir, e.name)])));
+  return files.flat();
+}
+
+async function isFresh(out, srcMtime) {
+  try {
+    return (await fs.stat(out)).mtimeMs >= srcMtime;
+  } catch {
+    return false;
+  }
+}
+
+// The share picture: a square or upright picture keeps its upper part (20 % down, like the portrait on
+// the site, so a face stays in it), a wide one what sharp finds matters most.
+function shareCut(file, width, height) {
+  if (width / height >= 1.5) return sharp(file).resize({ ...SHARE, fit: 'cover', position: 'attention' });
+  const tall = Math.round((height * SHARE.width) / width);
+  const top = Math.round((tall - SHARE.height) * 0.2);
+  return sharp(file)
+    .resize({ width: SHARE.width, height: tall })
+    .extract({ left: 0, top, ...SHARE });
+}
+
+const isImage = (f) => /\.(webp|jpe?g|png)$/i.test(f);
+const files = [];
+for (const { dir, out } of SOURCES) {
+  const src = path.join(IMAGES, dir);
+  for (const file of (await walk(src)).filter(isImage)) {
+    const rel = path.relative(src, file).split(path.sep).join('/');
+    files.push({ file, url: `/images/${dir}/${rel}`, outBase: out + rel });
+  }
+}
+const manifest = {};
+let written = 0;
+
+for (const { file, url, outBase } of files) {
+  const { width, height } = await sharp(file).metadata();
+  if (!width || !height) continue;
+  const srcMtime = (await fs.stat(file)).mtimeMs;
+  const variants = [];
+  for (const w of WIDTHS.filter((w) => w < width)) {
+    const outRel = outBase.replace(/\.[a-z]+$/i, `-${w}.webp`);
+    const out = path.join(OUT_DIR, outRel);
+    if (!(await isFresh(out, srcMtime))) {
+      await fs.mkdir(path.dirname(out), { recursive: true });
+      await sharp(file).resize({ width: w }).webp({ quality: 78 }).toFile(out);
+      written++;
+    }
+    variants.push({ w, src: `/images/_r/${outRel}` });
+  }
+  const shareRel = outBase.replace(/\.[a-z]+$/i, '.jpg');
+  const shareOut = path.join(SHARE_DIR, shareRel);
+  if (!(await isFresh(shareOut, srcMtime))) {
+    await fs.mkdir(path.dirname(shareOut), { recursive: true });
+    await shareCut(file, width, height).flatten({ background: '#ffffff' }).jpeg({ quality: 80, mozjpeg: true }).toFile(shareOut);
+    written++;
+  }
+  manifest[url] = { width, height, variants, share: `/images/_s/${shareRel}` };
+}
+
+await fs.mkdir(path.dirname(MANIFEST), { recursive: true });
+await fs.writeFile(MANIFEST, JSON.stringify(manifest) + '\n');
+console.log(`responsive-images: ${files.length} images, ${written} variants written`);

package/scripts/scheduled-list.mjs

@@ -1,15 +1,15 @@
-// After the build: the pages and blog posts that are Planlagt, with their time, in dist/_scheduled.json, for the site's
-// Worker, which publishes each hour those whose time has come (packages/editor/worker/publish.js). Only the Worker reads it: on the
-// site the address gives nothing (packages/editor/worker/index.js).
-import { existsSync, readFileSync, readdirSync, writeFileSync } from 'node:fs';
-import { join } from 'node:path';
-import { KINDS, scheduleOf } from '../lib/scheduled.mjs';
-
-const ROOT = `${process.cwd()}/`;
-const list = [];
-for (const { dir } of KINDS.filter(({ dir }) => existsSync(join(ROOT, dir))))
-  for (const file of readdirSync(join(ROOT, dir), { recursive: true, encoding: 'utf8' }).filter((f) => f.endsWith('.md'))) {
-    const { status, publishAt } = scheduleOf(readFileSync(join(ROOT, dir, file), 'utf8'));
-    if (status === 'scheduled' && publishAt) list.push({ path: `${dir}/${file}`, publishAt });
-  }
-writeFileSync(join(ROOT, process.argv[2] ?? 'dist', '_scheduled.json'), `${JSON.stringify(list)}\n`);
+// After the build: the pages and blog posts that are Planlagt, with their time, in dist/_scheduled.json, for the site's
+// Worker, which publishes each hour those whose time has come (packages/editor/worker/publish.js). Only the Worker reads it: on the
+// site the address gives nothing (packages/editor/worker/index.js).
+import { existsSync, readFileSync, readdirSync, writeFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { KINDS, scheduleOf } from '../lib/scheduled.mjs';
+
+const ROOT = `${process.cwd()}/`;
+const list = [];
+for (const { dir } of KINDS.filter(({ dir }) => existsSync(join(ROOT, dir))))
+  for (const file of readdirSync(join(ROOT, dir), { recursive: true, encoding: 'utf8' }).filter((f) => f.endsWith('.md'))) {
+    const { status, publishAt } = scheduleOf(readFileSync(join(ROOT, dir, file), 'utf8'));
+    if (status === 'scheduled' && publishAt) list.push({ path: `${dir}/${file}`, publishAt });
+  }
+writeFileSync(join(ROOT, process.argv[2] ?? 'dist', '_scheduled.json'), `${JSON.stringify(list)}\n`);

package/scripts/theme-screenshots.mjs

@@ -1,88 +1,88 @@
-// Takes the pictures of the site in each theme installed (src/themes/), shown on the theme's page in the editor
-// ("Udseende" › "Temaer" › the theme, ThemePage in packages/editor/src/Library.tsx): the CMS's demo site (demo/, never the
-// site's own content) built with the theme (demo-site.mjs, in a folder of its own), opened on a phone, and the top of each
-// page in SHOTS taken, into the theme's screenshots/<n>-<key>.jpg (the standard theme's in this package's theme/, another's
-// in src/themes/<theme>/; packages/editor/src/themes.ts reads them; their names in the editor are t.library.themeShots[key]). Without
-// the cookie question and the pop-ups, which would cover the page. Run it again when a theme or the demo has changed much:
-// npx morpheme theme-screenshots (or with the themes to take, by folder: … saturn material).
-import { execFileSync } from 'node:child_process';
-import { createServer } from 'node:http';
-import { existsSync, mkdirSync, readFileSync, rmSync, statSync } from 'node:fs';
-import { extname, join } from 'node:path';
-import { chromium } from 'playwright';
-import { installedThemes, themeFolder } from '@morphemecms/cms/site/theme.mjs';
-import { binOf } from './bin.mjs';
-import { demoSite } from './demo-site.mjs';
-
-const ROOT = `${process.cwd()}/`;
-const themes = process.argv.length > 2 ? process.argv.slice(2) : installedThemes();
-const standardPages = JSON.parse(readFileSync(new URL('../demo/src/data/standard-pages.json', import.meta.url), 'utf8'));
-
-/** The pictures, in their order: the key (its name in the editor), the page and whether it is in dark mode. */
-const SHOTS = [
-  { key: 'front', path: '/' },
-  { key: 'front-dark', path: '/', dark: true },
-  { key: 'blog', path: '/blog/' },
-  { key: 'contact', path: standardPages.contact },
-];
-
-// The built site, as the host serves it: a folder is its index.html.
-const types = {
-  '.html': 'text/html',
-  '.js': 'text/javascript',
-  '.css': 'text/css',
-  '.svg': 'image/svg+xml',
-  '.json': 'application/json',
-  '.webp': 'image/webp',
-  '.jpg': 'image/jpeg',
-  '.png': 'image/png',
-  '.woff2': 'font/woff2',
-};
-function serve(dir) {
-  const server = createServer((req, res) => {
-    let path = join(dir, decodeURIComponent(new URL(req.url, 'http://x').pathname));
-    if (existsSync(path) && statSync(path).isDirectory()) path = join(path, 'index.html');
-    if (!existsSync(path)) return res.writeHead(404).end();
-    res.writeHead(200, { 'content-type': types[extname(path)] ?? 'application/octet-stream' }).end(readFileSync(path));
-  });
-  return new Promise((done) => server.listen(0, () => done(server)));
-}
-
-// CHROMIUM_PATH: another Chromium than Playwright's own (one installed for another version of Playwright).
-const browser = await chromium.launch({ executablePath: process.env.CHROMIUM_PATH || undefined });
-try {
-  for (const theme of themes) {
-    console.log(`\nTemaet ${theme}:`);
-    const demo = demoSite(theme);
-    const out = join(demo, 'dist');
-    try {
-      execFileSync(process.execPath, [binOf('astro'), 'build', '--outDir', out], { cwd: demo, stdio: 'inherit' });
-      const server = await serve(out);
-      const site = `http://localhost:${server.address().port}`;
-      const folder = join(ROOT, `${themeFolder(theme)}/screenshots`);
-      rmSync(folder, { recursive: true, force: true });
-      mkdirSync(folder, { recursive: true });
-      for (const [i, shot] of SHOTS.entries()) {
-        const page = await browser.newPage({
-          viewport: { width: 390, height: 520 },
-          deviceScaleFactor: 2,
-          // The demo's language (its src/site/config.ts).
-          locale: 'en-US',
-          colorScheme: shot.dark ? 'dark' : 'light',
-        });
-        await page.goto(`${site}${shot.path}`, { waitUntil: 'networkidle' });
-        await page.addStyleTag({ content: '#cookie-consent, dialog[data-popup] { display: none !important; }' });
-        await page.evaluate(() => document.fonts.ready);
-        await page.waitForTimeout(800);
-        await page.screenshot({ path: join(folder, `${i + 1}-${shot.key}.jpg`), type: 'jpeg', quality: 80 });
-        await page.close();
-      }
-      server.close();
-      console.log(`${SHOTS.length} billeder i ${themeFolder(theme)}/screenshots/.`);
-    } finally {
-      rmSync(demo, { recursive: true, force: true });
-    }
-  }
-} finally {
-  await browser.close();
-}
+// Takes the pictures of the site in each theme installed (src/themes/), shown on the theme's page in the editor
+// ("Udseende" › "Temaer" › the theme, ThemePage in packages/editor/src/Library.tsx): the CMS's demo site (demo/, never the
+// site's own content) built with the theme (demo-site.mjs, in a folder of its own), opened on a phone, and the top of each
+// page in SHOTS taken, into the theme's screenshots/<n>-<key>.jpg (the standard theme's in this package's theme/, another's
+// in src/themes/<theme>/; packages/editor/src/themes.ts reads them; their names in the editor are t.library.themeShots[key]). Without
+// the cookie question and the pop-ups, which would cover the page. Run it again when a theme or the demo has changed much:
+// npx morpheme theme-screenshots (or with the themes to take, by folder: … saturn material).
+import { execFileSync } from 'node:child_process';
+import { createServer } from 'node:http';
+import { existsSync, mkdirSync, readFileSync, rmSync, statSync } from 'node:fs';
+import { extname, join } from 'node:path';
+import { chromium } from 'playwright';
+import { installedThemes, themeFolder } from '@morphemecms/cms/site/theme.mjs';
+import { binOf } from './bin.mjs';
+import { demoSite } from './demo-site.mjs';
+
+const ROOT = `${process.cwd()}/`;
+const themes = process.argv.length > 2 ? process.argv.slice(2) : installedThemes();
+const standardPages = JSON.parse(readFileSync(new URL('../demo/src/data/standard-pages.json', import.meta.url), 'utf8'));
+
+/** The pictures, in their order: the key (its name in the editor), the page and whether it is in dark mode. */
+const SHOTS = [
+  { key: 'front', path: '/' },
+  { key: 'front-dark', path: '/', dark: true },
+  { key: 'blog', path: '/blog/' },
+  { key: 'contact', path: standardPages.contact },
+];
+
+// The built site, as the host serves it: a folder is its index.html.
+const types = {
+  '.html': 'text/html',
+  '.js': 'text/javascript',
+  '.css': 'text/css',
+  '.svg': 'image/svg+xml',
+  '.json': 'application/json',
+  '.webp': 'image/webp',
+  '.jpg': 'image/jpeg',
+  '.png': 'image/png',
+  '.woff2': 'font/woff2',
+};
+function serve(dir) {
+  const server = createServer((req, res) => {
+    let path = join(dir, decodeURIComponent(new URL(req.url, 'http://x').pathname));
+    if (existsSync(path) && statSync(path).isDirectory()) path = join(path, 'index.html');
+    if (!existsSync(path)) return res.writeHead(404).end();
+    res.writeHead(200, { 'content-type': types[extname(path)] ?? 'application/octet-stream' }).end(readFileSync(path));
+  });
+  return new Promise((done) => server.listen(0, () => done(server)));
+}
+
+// CHROMIUM_PATH: another Chromium than Playwright's own (one installed for another version of Playwright).
+const browser = await chromium.launch({ executablePath: process.env.CHROMIUM_PATH || undefined });
+try {
+  for (const theme of themes) {
+    console.log(`\nTemaet ${theme}:`);
+    const demo = demoSite(theme);
+    const out = join(demo, 'dist');
+    try {
+      execFileSync(process.execPath, [binOf('astro'), 'build', '--outDir', out], { cwd: demo, stdio: 'inherit' });
+      const server = await serve(out);
+      const site = `http://localhost:${server.address().port}`;
+      const folder = join(ROOT, `${themeFolder(theme)}/screenshots`);
+      rmSync(folder, { recursive: true, force: true });
+      mkdirSync(folder, { recursive: true });
+      for (const [i, shot] of SHOTS.entries()) {
+        const page = await browser.newPage({
+          viewport: { width: 390, height: 520 },
+          deviceScaleFactor: 2,
+          // The demo's language (its src/site/config.ts).
+          locale: 'en-US',
+          colorScheme: shot.dark ? 'dark' : 'light',
+        });
+        await page.goto(`${site}${shot.path}`, { waitUntil: 'networkidle' });
+        await page.addStyleTag({ content: '#cookie-consent, dialog[data-popup] { display: none !important; }' });
+        await page.evaluate(() => document.fonts.ready);
+        await page.waitForTimeout(800);
+        await page.screenshot({ path: join(folder, `${i + 1}-${shot.key}.jpg`), type: 'jpeg', quality: 80 });
+        await page.close();
+      }
+      server.close();
+      console.log(`${SHOTS.length} billeder i ${themeFolder(theme)}/screenshots/.`);
+    } finally {
+      rmSync(demo, { recursive: true, force: true });
+    }
+  }
+} finally {
+  await browser.close();
+}

package/scripts/types.mjs

@@ -1,21 +1,17 @@
-// The types of this package's JavaScript modules, for a site that has it from npm (tsconfig.types.json): `write` before
-// it is packed (prepack), `clean` after (postpack), so they are never left beside the code they were made from.
-import { execFileSync } from 'node:child_process';
-import { readdirSync, rmSync } from 'node:fs';
-import { join, relative, sep } from 'node:path';
-import { fileURLToPath } from 'node:url';
-import { binOf } from './bin.mjs';
-
-const PACKAGE = fileURLToPath(new URL('..', import.meta.url));
-
-const declarations = () =>
-  readdirSync(PACKAGE, { recursive: true, withFileTypes: true })
-    .filter((e) => e.isFile() && e.name.endsWith('.d.mts') && !relative(PACKAGE, e.parentPath).split(sep).includes('node_modules'))
-    .map((e) => join(e.parentPath, e.name));
-
-for (const file of declarations()) rmSync(file);
-if (process.argv[2] === 'write')
-  execFileSync(process.execPath, [binOf('typescript', 'tsc', PACKAGE), '-p', join(PACKAGE, 'tsconfig.types.json')], {
-    cwd: PACKAGE,
-    stdio: 'inherit',
-  });
+// The types of this package's JavaScript modules, for a site that has it from npm (tsconfig.types.json): `write` before
+// it is packed (prepack), `clean` after (postpack), so they are never left beside the code they were made from.
+import { execFileSync } from 'node:child_process';
+import { rmSync } from 'node:fs';
+import { join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { binOf } from './bin.mjs';
+import { declarations } from './declarations.mjs';
+
+const PACKAGE = fileURLToPath(new URL('..', import.meta.url));
+
+for (const file of declarations(PACKAGE)) rmSync(file);
+if (process.argv[2] === 'write')
+  execFileSync(process.execPath, [binOf('typescript', 'tsc', PACKAGE), '-p', join(PACKAGE, 'tsconfig.types.json')], {
+    cwd: PACKAGE,
+    stdio: 'inherit',
+  });

package/scripts/video-thumbnails.mjs

@@ -1,89 +1,89 @@
-#!/usr/bin/env node
-// A still from each video from YouTube and Vimeo on the site, shown behind its play button
-// (packages/editor/lib/video.mjs). Runs before `npm run build` and `npm run dev`, after
-// packages/editor/scripts/responsive-images.mjs.
-//
-// The videos are found in the texts (src/content/) and the data files (src/data/): the video blocks
-// and the code from YouTube and Vimeo to embed them (videoOf, packages/editor/lib/video-id.mjs). For a
-// video from YouTube, its largest still is fetched (maxresdefault, else sddefault or hqdefault, which
-// have black bars above and below); for one from Vimeo, the still Vimeo gives for it. Each is cut to
-// 16:9 and written as webp to public/images/_video/<site>-<id>-480.webp and -960.webp, so a visitor
-// gets it from the site and nothing from Google or Vimeo until the video is played.
-// A video whose still cannot be fetched (no network, a removed video) keeps the plain box. Generated
-// files are git-ignored and fetched once (kept while they exist).
-import fs from 'node:fs/promises';
-import path from 'node:path';
-import sharp from 'sharp';
-import { stillName, videoOf, vimeoInfo } from '../lib/video-id.mjs';
-
-const ROOT = process.cwd();
-const OUT = path.join(ROOT, 'public/images/_video');
-const WIDTHS = [480, 960];
-const LINK = /(?:https?:)?(?:\/\/)?(?:[\w-]+\.)*(?:youtube(?:-nocookie)?\.com|youtu\.be|vimeo\.com)\/[^\s"'<>()[\]\\]*/gi;
-
-async function walk(dir) {
-  const entries = await fs.readdir(dir, { withFileTypes: true }).catch(() => []);
-  const files = await Promise.all(entries.map((e) => (e.isDirectory() ? walk(path.join(dir, e.name)) : [path.join(dir, e.name)])));
-  return files.flat();
-}
-
-const texts = [...(await walk(path.join(ROOT, 'src/content'))), ...(await walk(path.join(ROOT, 'src/data')))].filter((f) =>
-  /\.(md|json)$/.test(f),
-);
-const videos = new Map();
-for (const file of texts)
-  for (const [link] of (await fs.readFile(file, 'utf8')).replaceAll('&quot;', '"').replaceAll('&amp;', '&').matchAll(LINK)) {
-    const video = videoOf(link);
-    if (video) videos.set(stillName(video), video);
-  }
-
-const download = async (url) => {
-  try {
-    const res = await fetch(url, { signal: AbortSignal.timeout(10_000) });
-    return res.ok ? res : null;
-  } catch {
-    return null;
-  }
-};
-
-async function still(video) {
-  if (video.site === 'vimeo') {
-    const url = (await (await download(vimeoInfo(video, 1280)))?.json().catch(() => null))?.thumbnail_url;
-    const res = url && (await download(url));
-    return res ? Buffer.from(await res.arrayBuffer()) : null;
-  }
-  for (const size of ['maxresdefault', 'sddefault', 'hqdefault']) {
-    const res = await download(`https://i.ytimg.com/vi/${video.id}/${size}.jpg`);
-    if (res) return Buffer.from(await res.arrayBuffer());
-  }
-  return null;
-}
-
-await fs.mkdir(OUT, { recursive: true });
-let written = 0;
-let missing = 0;
-for (const [name, video] of videos) {
-  const outs = WIDTHS.map((w) => path.join(OUT, `${name}-${w}.webp`));
-  const have = await Promise.all(
-    outs.map((o) =>
-      fs.stat(o).then(
-        () => true,
-        () => false,
-      ),
-    ),
-  );
-  if (have.every(Boolean)) continue;
-  const image = await still(video);
-  if (!image) {
-    missing++;
-    continue;
-  }
-  for (const [i, w] of WIDTHS.entries())
-    // cover: the 4:3 stills lose their black bars, which are exactly the parts outside 16:9.
-    await sharp(image)
-      .resize(w, Math.round((w * 9) / 16), { fit: 'cover' })
-      .webp({ quality: 78 })
-      .toFile(outs[i]);
-  written++;
-}
-console.log(`video-thumbnails: ${videos.size} videos, ${written} stills fetched${missing ? `, ${missing} could not be fetched` : ''}`);
+#!/usr/bin/env node
+// A still from each video from YouTube and Vimeo on the site, shown behind its play button
+// (packages/editor/lib/video.mjs). Runs before `npm run build` and `npm run dev`, after
+// packages/editor/scripts/responsive-images.mjs.
+//
+// The videos are found in the texts (src/content/) and the data files (src/data/): the video blocks
+// and the code from YouTube and Vimeo to embed them (videoOf, packages/editor/lib/video-id.mjs). For a
+// video from YouTube, its largest still is fetched (maxresdefault, else sddefault or hqdefault, which
+// have black bars above and below); for one from Vimeo, the still Vimeo gives for it. Each is cut to
+// 16:9 and written as webp to public/images/_video/<site>-<id>-480.webp and -960.webp, so a visitor
+// gets it from the site and nothing from Google or Vimeo until the video is played.
+// A video whose still cannot be fetched (no network, a removed video) keeps the plain box. Generated
+// files are git-ignored and fetched once (kept while they exist).
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import sharp from 'sharp';
+import { stillName, videoOf, vimeoInfo } from '../lib/video-id.mjs';
+
+const ROOT = process.cwd();
+const OUT = path.join(ROOT, 'public/images/_video');
+const WIDTHS = [480, 960];
+const LINK = /(?:https?:)?(?:\/\/)?(?:[\w-]+\.)*(?:youtube(?:-nocookie)?\.com|youtu\.be|vimeo\.com)\/[^\s"'<>()[\]\\]*/gi;
+
+async function walk(dir) {
+  const entries = await fs.readdir(dir, { withFileTypes: true }).catch(() => []);
+  const files = await Promise.all(entries.map((e) => (e.isDirectory() ? walk(path.join(dir, e.name)) : [path.join(dir, e.name)])));
+  return files.flat();
+}
+
+const texts = [...(await walk(path.join(ROOT, 'src/content'))), ...(await walk(path.join(ROOT, 'src/data')))].filter((f) =>
+  /\.(md|json)$/.test(f),
+);
+const videos = new Map();
+for (const file of texts)
+  for (const [link] of (await fs.readFile(file, 'utf8')).replaceAll('&quot;', '"').replaceAll('&amp;', '&').matchAll(LINK)) {
+    const video = videoOf(link);
+    if (video) videos.set(stillName(video), video);
+  }
+
+const download = async (url) => {
+  try {
+    const res = await fetch(url, { signal: AbortSignal.timeout(10_000) });
+    return res.ok ? res : null;
+  } catch {
+    return null;
+  }
+};
+
+async function still(video) {
+  if (video.site === 'vimeo') {
+    const url = (await (await download(vimeoInfo(video, 1280)))?.json().catch(() => null))?.thumbnail_url;
+    const res = url && (await download(url));
+    return res ? Buffer.from(await res.arrayBuffer()) : null;
+  }
+  for (const size of ['maxresdefault', 'sddefault', 'hqdefault']) {
+    const res = await download(`https://i.ytimg.com/vi/${video.id}/${size}.jpg`);
+    if (res) return Buffer.from(await res.arrayBuffer());
+  }
+  return null;
+}
+
+await fs.mkdir(OUT, { recursive: true });
+let written = 0;
+let missing = 0;
+for (const [name, video] of videos) {
+  const outs = WIDTHS.map((w) => path.join(OUT, `${name}-${w}.webp`));
+  const have = await Promise.all(
+    outs.map((o) =>
+      fs.stat(o).then(
+        () => true,
+        () => false,
+      ),
+    ),
+  );
+  if (have.every(Boolean)) continue;
+  const image = await still(video);
+  if (!image) {
+    missing++;
+    continue;
+  }
+  for (const [i, w] of WIDTHS.entries())
+    // cover: the 4:3 stills lose their black bars, which are exactly the parts outside 16:9.
+    await sharp(image)
+      .resize(w, Math.round((w * 9) / 16), { fit: 'cover' })
+      .webp({ quality: 78 })
+      .toFile(outs[i]);
+  written++;
+}
+console.log(`video-thumbnails: ${videos.size} videos, ${written} stills fetched${missing ? `, ${missing} could not be fetched` : ''}`);