feat: OG image generation on Workers

Four Satori-backed endpoints — /api/og/{default,blog,podcast,person}.png
— recovered from the pre-Next Astro app along with the two Inter TTFs and
the rawFonts Vite plugin that inlines them as Uint8Array (Workers has no
filesystem for Satori to read from).

The load-bearing part of that recovery is its workaround, kept verbatim
with its explanation: workers-og parses HTML with HTMLRewriter, which
corrupts the HTML-to-VDOM conversion on Workers, so these build React
element objects and hand them to ImageResponse directly.

Wired in as a FALLBACK, not a replacement. Where a document has a cover
image the card is still that image, byte-for-byte what the Next app
served. Documents without one previously emitted no og:image at all;
those now get a generated card. The home page and section indexes get one
too.

Verified on real workerd under `wrangler dev`, not `astro dev` — all four
endpoints return valid 1200x630 PNGs, and the rendered images were
inspected rather than just status-checked. That caught the one visual
defect: the recovered logo used a cat emoji, and Satori renders only
glyphs present in the fonts it is given, so it came out as a tofu box on
every card. Replaced with a monogram tile in the brand gradient.

Brand tokens are literal hex rather than the CSS custom properties the
rest of the site uses: Satori resolves neither var() nor oklch().

Font imports are now typed via a `*.ttf` module declaration, since Astro's
own asset typings declare them as URL strings — the opposite of what the
rawFonts plugin actually returns. That removes the `@ts-ignore` pair and
the `as any` in loadFonts.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01HZ4S1uTJwFdbv3A6PHWfw2

Author: codercatdev

apps/site/package.json

@@ -30,7 +30,8 @@
     "groq": "^6.9.2",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
-    "tailwindcss": "^4.2.1"
+    "tailwindcss": "^4.2.1",
+    "workers-og": "^0.0.27"
   },
   "devDependencies": {
     "@astrojs/check": "^0.9.10",

apps/site/src/assets/fonts/Inter-Bold.ttf

@@ -1,5 +1,24 @@
 /// <reference path="../.astro/types.d.ts" />
 
+/**
+ * Font files imported for OG image generation.
+ *
+ * The `rawFonts` Vite plugin in astro.config.mjs intercepts these and returns
+ * the file contents as a Uint8Array — Workers has no filesystem, so Satori
+ * cannot read them at runtime. Astro's own asset typings declare `.ttf`
+ * imports as a URL string, which is the opposite of what actually arrives, so
+ * they are re-declared here.
+ */
+declare module "*.ttf" {
+	const data: Uint8Array;
+	export default data;
+}
+
+declare module "*.otf" {
+	const data: Uint8Array;
+	export default data;
+}
+
 declare namespace App {
 	interface Locals {
 		sanity: import("./lib/sanity/context").SanityRequestContext;

apps/site/src/assets/fonts/Inter-Regular.ttf

@@ -8,6 +8,7 @@ import Header from "@/components/Header.astro";
 import JsonLd from "@/components/JsonLd.astro";
 import SocialMeta from "@/components/SocialMeta.astro";
 import ThemeScript from "@/components/ThemeScript.astro";
+import { fallbackOgImage, type OgFallback } from "@/lib/og";
 import { absoluteUrl } from "@/lib/site";
 import {
 	buildGraph,
@@ -25,6 +26,11 @@ interface Props {
 	authors?: Array<string | null | undefined>;
 	canonical?: string | URL;
 	noindex?: boolean;
+	/**
+	 * Used to generate an OG card when `image` is absent. Documents without a
+	 * cover image previously shipped no og:image at all.
+	 */
+	ogFallback?: OgFallback;
 	/** Extra JSON-LD nodes merged into the site-wide @graph. */
 	schema?: Array<Record<string, unknown> & { "@type": string }>;
 	/** Full-bleed pages opt out of the default container. */
@@ -41,13 +47,17 @@ const {
 	authors,
 	canonical,
 	noindex,
+	ogFallback,
 	schema = [],
 	bare = false,
 } = Astro.props;
 
 const origin = Astro.locals.siteUrl.origin;
 const preview = Astro.locals.sanity.preview.enabled;
 
+const socialImage =
+	image ?? (ogFallback ? fallbackOgImage(origin, ogFallback) : undefined);
+
 const graph = buildGraph([
 	organizationSchema(origin, absoluteUrl("/icon.svg", origin)),
 	websiteSchema(origin),
@@ -67,7 +77,7 @@ const graph = buildGraph([
 		<SocialMeta
 			title={title}
 			description={description}
-			image={image}
+			image={socialImage}
 			type={type}
 			publishedAt={publishedAt}
 			modifiedAt={modifiedAt}