Add section-specific OG and Twitter preview images

README.md

@@ -34,6 +34,8 @@ pnpm preview
 
 Build, generate, and dev automatically create responsive image derivatives in `public/images/generated/` (ignored by Git). GitHub Pages deploys `.output/public`; it does not run a Nitro server. Legacy `/articles/…` and `/atom/` URLs therefore have generated HTML redirects as well as Nitro HTTP redirects. The feed is `/atom.xml` so static hosting serves it as XML. Robots and sitemap are generated from shared site metadata.
 
+Section social images are also generated under `public/images/generated/og/`. They reuse the home image's frame and texture with labels such as `colton.foo | talks`. `SOCIAL_IMAGE_SECTIONS` in `shared/site.ts` controls the variants; nested pages inherit their section's image unless they supply an explicit cover. The home image stays unchanged. The generator uses the bundled DejaVu Sans Mono Bold font (license in `assets/fonts/LICENSE_DEJAVU`) rendered as SVG paths, so local and CI builds do not depend on installed system fonts.
+
 ## Validation
 
 ```bash

assets/fonts/LICENSE_DEJAVU

@@ -0,0 +1,99 @@
+Fonts are (c) Bitstream (see below). DejaVu changes are in public domain.
+Glyphs imported from Arev fonts are (c) Tavmjong Bah (see below)
+
+Bitstream Vera Fonts Copyright
+------------------------------
+
+Copyright (c) 2003 by Bitstream, Inc. All Rights Reserved. Bitstream Vera is
+a trademark of Bitstream, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of the fonts accompanying this license ("Fonts") and associated
+documentation files (the "Font Software"), to reproduce and distribute the
+Font Software, including without limitation the rights to use, copy, merge,
+publish, distribute, and/or sell copies of the Font Software, and to permit
+persons to whom the Font Software is furnished to do so, subject to the
+following conditions:
+
+The above copyright and trademark notices and this permission notice shall
+be included in all copies of one or more of the Font Software typefaces.
+
+The Font Software may be modified, altered, or added to, and in particular
+the designs of glyphs or characters in the Fonts may be modified and
+additional glyphs or characters may be added to the Fonts, only if the fonts
+are renamed to names not containing either the words "Bitstream" or the word
+"Vera".
+
+This License becomes null and void to the extent applicable to Fonts or Font
+Software that has been modified and is distributed under the "Bitstream
+Vera" names.
+
+The Font Software may be sold as part of a larger software package but no
+copy of one or more of the Font Software typefaces may be sold by itself.
+
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT OF COPYRIGHT, PATENT,
+TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL BITSTREAM OR THE GNOME
+FOUNDATION BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, INCLUDING
+ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL DAMAGES,
+WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF
+THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM OTHER DEALINGS IN THE
+FONT SOFTWARE.
+
+Except as contained in this notice, the names of Gnome, the Gnome
+Foundation, and Bitstream Inc., shall not be used in advertising or
+otherwise to promote the sale, use or other dealings in this Font Software
+without prior written authorization from the Gnome Foundation or Bitstream
+Inc., respectively. For further information, contact: fonts at gnome dot
+org.
+
+Arev Fonts Copyright
+------------------------------
+
+Copyright (c) 2006 by Tavmjong Bah. All Rights Reserved.
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the fonts accompanying this license ("Fonts") and
+associated documentation files (the "Font Software"), to reproduce
+and distribute the modifications to the Bitstream Vera Font Software,
+including without limitation the rights to use, copy, merge, publish,
+distribute, and/or sell copies of the Font Software, and to permit
+persons to whom the Font Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright and trademark notices and this permission notice
+shall be included in all copies of one or more of the Font Software
+typefaces.
+
+The Font Software may be modified, altered, or added to, and in
+particular the designs of glyphs or characters in the Fonts may be
+modified and additional glyphs or characters may be added to the
+Fonts, only if the fonts are renamed to names not containing either
+the words "Tavmjong Bah" or the word "Arev".
+
+This License becomes null and void to the extent applicable to Fonts
+or Font Software that has been modified and is distributed under the
+"Tavmjong Bah Arev" names.
+
+The Font Software may be sold as part of a larger software package but
+no copy of one or more of the Font Software typefaces may be sold by
+itself.
+
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL
+TAVMJONG BAH BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
+
+Except as contained in this notice, the name of Tavmjong Bah shall not
+be used in advertising or otherwise to promote the sale, use or other
+dealings in this Font Software without prior written authorization
+from Tavmjong Bah. For further information, contact: tavmjong @ free
+. fr.
+
+$Id: LICENSE 2133 2007-11-28 02:46:28Z lechimp $

composables/usePageSeo.ts

@@ -13,7 +13,7 @@ export function usePageSeo({
   image,
 }: PageSeoOptions) {
   const fullTitle = pageTitle(title);
-  const socialImage = imageUrl(image);
+  const socialImage = imageUrl(image, path);
   const canonical = absoluteUrl(path);
 
   useSeoMeta({

package.json

@@ -4,7 +4,7 @@
   "scripts": {
     "preinstall": "npx only-allow pnpm",
     "build": "pnpm images:generate && nuxt build",
-    "images:generate": "node scripts/generate-responsive-images.mjs",
+    "images:generate": "node scripts/generate-responsive-images.mjs && node --import tsx scripts/generate-social-images.ts",
     "test": "node --import tsx --test tests/unit/*.test.ts",
     "test:output": "node --import tsx --test tests/output/*.test.ts",
     "test:e2e": "playwright test",
@@ -21,9 +21,11 @@
     "@playwright/test": "^1.64.1",
     "@tailwindcss/typography": "^0.5.20",
     "@tailwindcss/vite": "^4.3.3",
+    "@types/opentype.js": "^1.3.10",
     "feed": "^6.0.0",
     "gray-matter": "^4.0.3",
     "nuxt": "^4.5.2",
+    "opentype.js": "^2.0.0",
     "prettier": "^3.9.9",
     "prettier-plugin-tailwindcss": "^0.8.1",
     "sharp": "^0.35.5",

pages/blog/[...slug].vue

@@ -36,7 +36,7 @@ const canonical = computed(() => {
   );
 });
 const socialImage = computed(() =>
-  imageUrl(page.value?.cover_image || page.value?.img),
+  imageUrl(page.value?.cover_image || page.value?.img, route.path),
 );
 const publishedDate = computed(() =>
   page.value?.date ? new Date(page.value.date).toISOString() : undefined,

pages/experiments/index.vue

@@ -7,7 +7,6 @@ usePageSeo({
   title,
   description,
   path: "/experiments",
-  image: "/images/previews/conway.webp",
 });
 </script>
 

pages/talks.vue

@@ -3,21 +3,10 @@ const pageSeoTitle = "Talks";
 const pageSeoDescription =
   "Talks, slide decks, videos, and demos from Colton Padden on data engineering, AI applications, Dagster, and developer education.";
 
-useSeoMeta({
-  title: pageTitle(pageSeoTitle),
+usePageSeo({
+  title: pageSeoTitle,
   description: pageSeoDescription,
-  ogTitle: pageTitle(pageSeoTitle),
-  ogDescription: pageSeoDescription,
-  ogImage: imageUrl(),
-  ogUrl: absoluteUrl("/talks"),
-  twitterCard: "summary_large_image",
-  twitterTitle: pageTitle(pageSeoTitle),
-  twitterDescription: pageSeoDescription,
-  twitterImage: imageUrl(),
-});
-
-useHead({
-  link: [{ rel: "canonical", href: absoluteUrl("/talks") }],
+  path: "/talks",
 });
 
 const talks = [

scripts/generate-social-images.ts

@@ -0,0 +1,62 @@
+import { mkdir, readFile, rename, rm } from "node:fs/promises";
+import { randomUUID } from "node:crypto";
+import { resolve } from "node:path";
+import sharp from "sharp";
+import opentype from "opentype.js";
+import { SOCIAL_IMAGE_SECTIONS, socialImagePath } from "../shared/site";
+
+const source = resolve("public/images/og-index.webp");
+const font = opentype.parse(
+  new Uint8Array(await readFile("assets/fonts/DejaVuSansMono-Bold.ttf")).buffer,
+);
+
+// Preserve the existing image's frame and texture exactly. Cover its wordmark
+// with a clean strip of the same texture sampled from above the lettering.
+const cleanTexture = await sharp(source)
+  .extract({ left: 12, top: 80, width: 1176, height: 150 })
+  .toBuffer();
+const background = await sharp(source)
+  .composite([{ input: cleanTexture, left: 12, top: 240 }])
+  .png()
+  .toBuffer();
+
+for (const section of SOCIAL_IMAGE_SECTIONS) {
+  const label = `colton.foo | ${section}`;
+  // Match the original bold monospace wordmark; shrink longer labels to keep
+  // generous side margins without wrapping onto a second line.
+  const original = font.getPath(label, 0, 0, 96).getBoundingBox();
+  const fontSize = 96 * Math.min(1, 1056 / (original.x2 - original.x1));
+  const lettering = font.getPath(label, 0, 0, fontSize);
+  lettering.fill = "#ff6900";
+  const bounds = lettering.getBoundingBox();
+  const x = (1200 - (bounds.x2 - bounds.x1)) / 2 - bounds.x1;
+  const y = (630 - (bounds.y2 - bounds.y1)) / 2 - bounds.y1;
+  // SVG paths make rendering independent of fonts installed on the build host.
+  const text = Buffer.from(
+    `<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="630"><g transform="translate(${x} ${y})">${lettering.toSVG(2)}</g></svg>`,
+  );
+
+  const destination = resolve(
+    "public",
+    socialImagePath(`/${section}/`).slice(1),
+  );
+  const directory = resolve(destination, "..");
+  await mkdir(directory, { recursive: true });
+  const temporary = resolve(directory, `.${randomUUID()}.webp`);
+  try {
+    await sharp(background)
+      .composite([
+        {
+          input: text,
+          left: 0,
+          top: 0,
+        },
+      ])
+      .webp({ quality: 90 })
+      .toFile(temporary);
+    await rename(temporary, destination);
+  } finally {
+    await rm(temporary, { force: true });
+  }
+}
+console.log(`Generated ${SOCIAL_IMAGE_SECTIONS.length} section social images`);

shared/site.ts

@@ -1,6 +1,20 @@
 // Public route metadata shared by rendering, feeds, sitemap, and build tooling.
 export const SITE_ORIGIN = "https://colton.foo";
 export const SITE_NAME = "Colton Padden";
+export const DEFAULT_SOCIAL_IMAGE = "/images/og-index.webp";
+export const SOCIAL_IMAGE_SECTIONS = [
+  "about",
+  "blog",
+  "experiments",
+  "talks",
+] as const;
+
+export const socialImagePath = (path = "/") => {
+  const section = path.split(/[?#]/)[0]?.split("/").filter(Boolean)[0];
+  return SOCIAL_IMAGE_SECTIONS.some((name) => name === section)
+    ? `/images/generated/og/${section}.webp`
+    : DEFAULT_SOCIAL_IMAGE;
+};
 export const PAGE_ROUTES = [
   "/",
   "/about/",

tests/output/generated.test.ts

@@ -3,7 +3,13 @@ import { test } from "node:test";
 import { existsSync, readFileSync, readdirSync, statSync } from "node:fs";
 import { join } from "node:path";
 import { loadArticleSources } from "../../modules/content/manifest";
-import { PAGE_ROUTES, absoluteUrl } from "../../shared/site";
+import {
+  PAGE_ROUTES,
+  SOCIAL_IMAGE_SECTIONS,
+  absoluteUrl,
+  socialImagePath,
+} from "../../shared/site";
+import sharp from "sharp";
 
 const output = ".output/public";
 const read = (path: string) => readFileSync(join(output, path), "utf8");
@@ -25,6 +31,37 @@ test("all public routes and published articles have HTML and current canonicals"
   }
 });
 
+test("static social images match page sections and preserve article covers", async () => {
+  const assertImages = (html: string, image: string, path: string) => {
+    assert.ok(html.includes(`property="og:image" content="${image}"`), path);
+    assert.ok(html.includes(`name="twitter:image" content="${image}"`), path);
+  };
+  for (const path of PAGE_ROUTES) {
+    assertImages(
+      read(`${path}/index.html`),
+      absoluteUrl(socialImagePath(path)),
+      path,
+    );
+  }
+  for (const article of loadArticleSources(process.cwd())) {
+    const { cover_image, img } = article.frontmatter;
+    const image = cover_image || img || socialImagePath(article.path);
+    assertImages(
+      read(`${article.path}/index.html`),
+      absoluteUrl(image),
+      article.path,
+    );
+  }
+  for (const section of SOCIAL_IMAGE_SECTIONS) {
+    const path = join(output, socialImagePath(`/${section}/`));
+    const metadata = await sharp(path).metadata();
+    assert.equal(metadata.format, "webp");
+    assert.equal(metadata.width, 1200);
+    assert.equal(metadata.height, 630);
+    assert.ok(statSync(path).size < 400_000, section);
+  }
+});
+
 test("drafts leave no HTML, payload, legacy redirect, or serialized body in the output", () => {
   const drafts = loadArticleSources(process.cwd(), true).filter(
     (a) => a.frontmatter.draft,