feat: OG image generation — workers-og + 4 templates + rawFonts Vite plugin (Track D) (#681)

Dynamic OG image generation on Cloudflare Workers using workers-og + Satori.

Infrastructure:
- rawFonts Vite plugin: inlines .ttf as Uint8Array at build time (CF Workers have no filesystem)
- Inter Bold + Regular v4.1 TTF fonts from official release
- Shared og-utils.ts: brand tokens, TYPE_COLORS, font loading, HTML generation (DRY)

Endpoints (all SSR, prerender=false):
- /api/og/blog.png — title, author, type badge, content-type color coding
- /api/og/podcast.png — amber accent, optional episodeNumber
- /api/og/author.png — author-focused layout
- /api/og/default.png — simpler fallback layout

Features:
- 1200x630 PNG, dark gradient background, violet accent
- Adaptive title font sizing (42/48/56px based on length)
- Author initials avatar with gradient
- Cache: 1 day browser, 7 day edge (public, max-age=86400, s-maxage=604800)

SocialMeta.astro component wires og:image URLs into page meta tags.

Co-authored-by: seniordeveloper <seniordeveloper@miriad.systems>

Author: codercatdev

apps/web/astro.config.mjs

@@ -3,12 +3,39 @@ import cloudflare from "@astrojs/cloudflare";
 import react from "@astrojs/react";
 import sanity from "@sanity/astro";
 import tailwindcss from "@tailwindcss/vite";
+import fs from "node:fs";
+import path from "node:path";
 
 // Sanity config — dataset comes from env var (set by wrangler vars or .env)
 // In astro.config.mjs, .env files are NOT loaded — use process.env
 const sanityProjectId = process.env.SANITY_PROJECT_ID || "hfh83o0w";
 const sanityDataset = process.env.SANITY_DATASET || "production";
 
+/**
+ * Vite plugin to inline font files as Uint8Array at build time.
+ * Required for OG image generation on CF Workers (no filesystem access).
+ */
+function rawFonts(extensions) {
+  return {
+    name: "vite-plugin-raw-fonts",
+    enforce: "pre",
+    resolveId(id, importer) {
+      if (extensions.some((ext) => id.includes(ext))) {
+        if (id.startsWith(".")) {
+          return path.resolve(path.dirname(importer), id);
+        }
+        return id;
+      }
+    },
+    load(id) {
+      if (extensions.some((ext) => id.includes(ext))) {
+        const buffer = fs.readFileSync(id);
+        return `export default new Uint8Array([${Array.from(buffer).join(",")}]);`;
+      }
+    },
+  };
+}
+
 export default defineConfig({
   output: "server",
   adapter: cloudflare({
@@ -31,6 +58,11 @@ export default defineConfig({
     react(),
   ],
   vite: {
-    plugins: [tailwindcss()],
+    plugins: [tailwindcss(), rawFonts([".ttf", ".otf"])],
+    assetsInclude: ["**/*.wasm"],
+    assetsExclude: ["**/*.ttf", "**/*.otf"],
+    ssr: {
+      external: ["buffer", "path", "fs"].map((i) => `node:${i}`),
+    },
   },
 });