feat: pre-generate og image

astro.config.ts

@@ -210,13 +210,11 @@ export default defineConfig({
 
   vite: {
     plugins: [rawFonts([".woff2", ".woff", ".ttf", ".otf"])],
-    assetsInclude: ["**/*.wasm"], // Treat WASM files as assets (but not font files used by OG)
     resolve: {
       noExternal: ["@sumup-oss/circuit-ui", "@sumup-oss/illustrations"],
     },
     ssr: {
       external: ["buffer", "path", "fs"].map((i) => `node:${i}`),
-      noExternal: ["workers-og"],
     },
   },
 

package.json

@@ -36,6 +36,8 @@
     "start": "astro preview",
     "prebuild": "astro sync --force",
     "build": "astro build",
+    "postbuild": "npm run check:og-images",
+    "check:og-images": "node scripts/check-og-images.mjs",
     "precheck": "astro sync",
     "check": "astro check",
     "prelint": "astro sync",
@@ -51,7 +53,7 @@
     "lint:src:fix": "npx eslint --fix",
     "lint:markdown": "rumdl check .",
     "lint:markdown:fix": "rumdl fmt .",
-    "linkcheck": "CHECK_LINKS=true astro build && npm run linkcheck:rendered",
+    "linkcheck": "CHECK_LINKS=true astro build && npm run check:og-images && npm run linkcheck:rendered",
     "linkcheck:rendered": "node scripts/check-rendered-links.mjs",
     "test": "vitest run"
   },
@@ -70,7 +72,7 @@
     "@eslint/js": "9.39.5",
     "@expressive-code/plugin-collapsible-sections": "^0.44.2",
     "@expressive-code/plugin-line-numbers": "0.44.2",
-    "@resvg/resvg-wasm": "2.6.2",
+    "@resvg/resvg-js": "2.6.2",
     "@sindresorhus/slugify": "^3.0.1",
     "@sumup-oss/circuit-ui": "12.1.0",
     "@sumup-oss/design-tokens": "11.0.0",

public/_headers

@@ -10,6 +10,9 @@
 /img/*
   Cache-Control: public, max-age=604800
 
+/og/*
+  Cache-Control: public, max-age=3600, must-revalidate
+
 /*.md
   X-Robots-Tag: noindex
 

scripts/check-og-images.mjs

@@ -0,0 +1,65 @@
+import assert from "node:assert/strict";
+import { readdir, readFile } from "node:fs/promises";
+import { join, relative, resolve } from "node:path";
+import { JSDOM } from "jsdom";
+
+const outputRoot = resolve(process.argv[2] ?? "dist/client");
+const siteOrigin = "https://developer.sumup.com";
+
+async function listFiles(directory) {
+  const entries = await readdir(directory, { withFileTypes: true });
+  return (
+    await Promise.all(
+      entries.map((entry) => {
+        const path = join(directory, entry.name);
+        return entry.isDirectory() ? listFiles(path) : [path];
+      }),
+    )
+  ).flat();
+}
+
+const files = await listFiles(outputRoot);
+const images = files.filter(
+  (file) =>
+    file.startsWith(`${join(outputRoot, "og")}/`) && file.endsWith(".png"),
+);
+assert(images.length > 0, "No generated OG images found");
+
+for (const image of images) {
+  const png = await readFile(image);
+  const name = relative(outputRoot, image);
+  assert(
+    png.subarray(0, 8).equals(Buffer.from([137, 80, 78, 71, 13, 10, 26, 10])),
+    `${name}: invalid PNG signature`,
+  );
+  assert.equal(
+    png.toString("ascii", 12, 16),
+    "IHDR",
+    `${name}: missing PNG header`,
+  );
+  assert.equal(png.readUInt32BE(16), 1200, `${name}: incorrect width`);
+  assert.equal(png.readUInt32BE(20), 600, `${name}: incorrect height`);
+}
+
+const generatedImages = new Set(images);
+let checkedPages = 0;
+for (const file of files.filter((file) => file.endsWith(".html"))) {
+  const dom = new JSDOM(await readFile(file, "utf8"));
+  const imageUrl = dom.window.document
+    .querySelector('meta[property="og:image"]')
+    ?.getAttribute("content");
+  dom.window.close();
+  if (!imageUrl) continue;
+
+  const url = new URL(imageUrl, siteOrigin);
+  assert.equal(url.origin, siteOrigin, `${file}: unexpected OG image origin`);
+  assert(
+    generatedImages.has(join(outputRoot, decodeURIComponent(url.pathname))),
+    `${relative(outputRoot, file)}: missing generated image ${url.pathname}`,
+  );
+  checkedPages++;
+}
+assert(checkedPages > 0, "No pages referencing OG images found");
+console.log(
+  `Verified ${images.length} OG PNGs and references from ${checkedPages} pages.`,
+);

src/env.d.ts

@@ -12,8 +12,3 @@ interface ImportMetaEnv {
 interface ImportMeta {
   readonly env: ImportMetaEnv;
 }
-
-declare module "*.wasm" {
-  const module: WebAssembly.Module;
-  export default module;
-}