fix: build failure and inline og image fonts

quantizor · quantizor · commit ca492c5dbbb3 · 2026-05-12T23:49:07.000-04:00
diff --git a/AGENTS.md b/AGENTS.md
@@ -24,6 +24,7 @@ Commands
 Tokens / fonts
 - `utils/theme.ts` is the single source for `var(--sc-*)`. Dark overrides in `GlobalStyles.tsx`.
 - Display Figtree, body Inter, mono Google Sans Code; injected by next/font as `--font-sans` / `--font-display` / `--font-mono`.
+- `next/og` routes cannot use those helpers; fonts come from committed TTFs under `assets/fonts/og/` (`utils/readOgFont.ts`), matching Next.js opengraph-image docs. `test/utils/opengraphImageFonts.spec.ts` guards against CDN font URLs in any `opengraph-image.tsx`.
 - Three palette tiers: `lightPalette`, `darkPalette` (CVD-optimized; see theme.ts comments for seeds and pipeline) and the ring colors from `utils/logoPalette.ts`. `theme.palette[N]` auto-switches light/dark. Don't hand-pick oklch; derive from palette indices. Accent variants = L/C shift on the same hue, never adjacent indices.
 - OKLCH hue 0° is pink/magenta, not red. See `logoPalette.ts` for the offset that places red at step 0.
 
diff --git a/app/blog/[slug]/opengraph-image.tsx b/app/blog/[slug]/opengraph-image.tsx
@@ -4,6 +4,7 @@ import { ImageResponse } from 'next/og';
 import { notFound } from 'next/navigation';
 import { parser, RuleType, type MarkdownToJSX } from 'markdown-to-jsx';
 import { getPostBySlug, getPosts } from '@/utils/blog.server';
+import { readOgFont } from '@/utils/readOgFont';
 
 export const alt = 'styled-components blog';
 const SCALE = 1.5;
@@ -38,12 +39,6 @@ function buildCube(): string {
   return `data:image/svg+xml;base64,${Buffer.from(svg).toString('base64')}`;
 }
 
-async function fetchFont(url: string): Promise<ArrayBuffer> {
-  const res = await fetch(url);
-  if (!res.ok) throw new Error(`font fetch failed (${res.status}): ${url}`);
-  return res.arrayBuffer();
-}
-
 const MONTHS = [
   'January',
   'February',
@@ -119,9 +114,9 @@ export default async function Image({ params }: { params: Promise<{ slug: string
   if (!post) notFound();
 
   const [figtreeBold, inter400, inter600, readMinutes] = await Promise.all([
-    fetchFont('https://fonts.gstatic.com/s/figtree/v9/_Xmz-HUzqDCFdgfMsYiV_F7wfS-Bs_eYR15e.ttf'),
-    fetchFont('https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/latin-400-normal.ttf'),
-    fetchFont('https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/latin-600-normal.ttf'),
+    readOgFont('figtreeBold'),
+    readOgFont('interLatin400'),
+    readOgFont('interLatin600'),
     estimateReadTimeMinutes(post),
   ]);
   const twitter = post.authorTwitter;
diff --git a/app/docs/compatibility/opengraph-image.tsx b/app/docs/compatibility/opengraph-image.tsx
@@ -1,4 +1,5 @@
 import { ImageResponse } from 'next/og';
+import { readOgFont } from '@/utils/readOgFont';
 
 export const alt = 'React Native CanIUse: CSS feature compatibility for styled-components';
 const SCALE = 1.5;
@@ -89,18 +90,12 @@ function StatusPill({ status }: { status: Status }) {
   );
 }
 
-async function fetchFont(url: string): Promise<ArrayBuffer> {
-  const res = await fetch(url);
-  if (!res.ok) throw new Error(`font fetch failed (${res.status}): ${url}`);
-  return res.arrayBuffer();
-}
-
 export default async function Image() {
   const [figtreeBold, inter400, inter600, mono] = await Promise.all([
-    fetchFont('https://fonts.gstatic.com/s/figtree/v9/_Xmz-HUzqDCFdgfMsYiV_F7wfS-Bs_eYR15e.ttf'),
-    fetchFont('https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/latin-400-normal.ttf'),
-    fetchFont('https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/latin-600-normal.ttf'),
-    fetchFont('https://cdn.jsdelivr.net/fontsource/fonts/jetbrains-mono@latest/latin-500-normal.ttf'),
+    readOgFont('figtreeBold'),
+    readOgFont('interLatin400'),
+    readOgFont('interLatin600'),
+    readOgFont('jetbrainsMonoLatin500'),
   ]);
 
   return new ImageResponse(
diff --git a/app/opengraph-image.tsx b/app/opengraph-image.tsx
@@ -1,4 +1,5 @@
 import { ImageResponse } from 'next/og';
+import { readOgFont } from '@/utils/readOgFont';
 
 export const alt = 'styled-components';
 export const size = { width: 1200, height: 630 };
@@ -24,9 +25,7 @@ function buildSvg(): string {
 }
 
 export default async function Image() {
-  const figtreeFont = await fetch(
-    'https://fonts.gstatic.com/s/figtree/v9/_Xmz-HUzqDCFdgfMsYiV_F7wfS-Bs_eYR15e.ttf'
-  ).then(res => res.arrayBuffer());
+  const figtreeFont = await readOgFont('figtreeBold');
 
   return new ImageResponse(
     <div style={{ display: 'flex', width: '100%', height: '100%', background: '#f8f8f8' }}>
diff --git a/assets/fonts/og/NOTICE.txt b/assets/fonts/og/NOTICE.txt
@@ -0,0 +1,5 @@
+Bundled TTFs used only by next/og ImageResponse (see Next.js opengraph-image docs).
+
+Figtree — SIL Open Font License 1.1 — https://github.com/googlefonts/figtree
+Inter — SIL Open Font License 1.1 — https://github.com/rsms/inter
+JetBrains Mono — SIL Open Font License 1.1 — https://github.com/JetBrains/JetBrainsMono
diff --git a/assets/fonts/og/figtree-700.ttf b/assets/fonts/og/figtree-700.ttf
diff --git a/assets/fonts/og/inter-latin-400-normal.ttf b/assets/fonts/og/inter-latin-400-normal.ttf
diff --git a/assets/fonts/og/inter-latin-600-normal.ttf b/assets/fonts/og/inter-latin-600-normal.ttf
diff --git a/assets/fonts/og/jetbrains-mono-latin-500-normal.ttf b/assets/fonts/og/jetbrains-mono-latin-500-normal.ttf
diff --git a/components/HomepageHeroEditor.tsx b/components/HomepageHeroEditor.tsx
@@ -210,8 +210,8 @@ const MobileLatestPost = styled.div`
 
 const DesktopLatestPost = styled.div`
   display: flex;
-  justify-content: flex-end;
   width: 100%;
+  align-self: stretch;
 
   ${mobile(css`
     display: none;
diff --git a/components/LatestBlogPost.tsx b/components/LatestBlogPost.tsx
@@ -8,13 +8,23 @@ import { mobile } from '../utils/media';
 import { formatDate } from '../utils/formatDate';
 import type { Post } from '../utils/blog';
 
+/** Homepage hero: above grid breakpoint the card spans the editor column; below it stays content-sized and centered. */
+const DESKTOP_MIN = `${1000 / 16}em`;
+
 const Card = styled(Link)`
   display: inline-flex;
   flex-direction: column;
   gap: ${theme.space[2]};
   align-items: flex-start;
   max-width: max-content;
+  box-sizing: border-box;
   margin: ${theme.space[6]} 0 ${theme.space[8]};
+
+  @media (min-width: ${DESKTOP_MIN}) {
+    width: 100%;
+    max-width: none;
+    display: flex;
+  }
   padding: ${theme.space[4]} ${theme.space[5]};
   border-radius: ${theme.radius.lg};
   border: 1px solid ${theme.color.border};
diff --git a/test/utils/opengraphImageFonts.spec.ts b/test/utils/opengraphImageFonts.spec.ts
@@ -0,0 +1,19 @@
+import { globSync, readFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+/** Every codegen OG route must load fonts via utils/readOgFont (committed TTFs under assets/fonts/og). */
+const OG_IMAGE_FILES = globSync('**/opengraph-image.tsx', { cwd: process.cwd() });
+
+describe('opengraph-image font sourcing', () => {
+  it('discovers opengraph-image.tsx files', () => {
+    expect(OG_IMAGE_FILES.length).toBeGreaterThan(0);
+    expect(new Set(OG_IMAGE_FILES).size).toBe(OG_IMAGE_FILES.length);
+  });
+
+  it.each(OG_IMAGE_FILES)('%s uses readOgFont (no CDN font URLs)', relativePath => {
+    const src = readFileSync(join(process.cwd(), relativePath), 'utf8');
+    expect(src).toMatch(/from ['"]@\/utils\/readOgFont['"]/);
+    expect(src).not.toContain('fonts.gstatic.com');
+    expect(src).not.toContain('cdn.jsdelivr.net/fontsource');
+  });
+});
diff --git a/test/utils/readOgFont.spec.ts b/test/utils/readOgFont.spec.ts
@@ -0,0 +1,13 @@
+import { readOgFont } from '../../utils/readOgFont';
+
+describe('readOgFont', () => {
+  it('loads bundled Figtree bold from disk', async () => {
+    const buf = await readOgFont('figtreeBold');
+    expect(buf.byteLength).toBeGreaterThan(10_000);
+  });
+
+  it('dedupes concurrent reads for the same font file', async () => {
+    const [a, b] = await Promise.all([readOgFont('interLatin400'), readOgFont('interLatin400')]);
+    expect(a).toBe(b);
+  });
+});
diff --git a/tsconfig.json b/tsconfig.json
@@ -7,11 +7,7 @@
     "incremental": true,
     "isolatedModules": true,
     "jsx": "react-jsx",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "module": "esnext",
     "moduleResolution": "bundler",
     "noEmit": true,
@@ -20,29 +16,14 @@
     "strict": true,
     "target": "ESNext",
     "paths": {
-      "@/*": [
-        "./*"
-      ]
+      "@/*": ["./*"]
     },
     "plugins": [
       {
         "name": "next"
       }
     ]
   },
-  "exclude": [
-    "node_modules",
-    "**/*.spec.ts",
-    "**/*.spec.tsx",
-    "**/*.test.ts",
-    "**/*.test.tsx",
-    "test/**/*"
-  ],
-  "include": [
-    "**/*.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts",
-    ".next/dev/types/**/*.ts"
-  ]
+  "exclude": ["node_modules", "**/*.spec.ts", "**/*.spec.tsx", "**/*.test.ts", "**/*.test.tsx", "test/**/*"],
+  "include": ["**/*.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", ".next/dev/types/**/*.ts"]
 }
diff --git a/utils/readOgFont.ts b/utils/readOgFont.ts
@@ -0,0 +1,31 @@
+import { readFile } from 'node:fs/promises';
+import { join } from 'node:path';
+
+const OG_FONT_DIR = join(process.cwd(), 'assets', 'fonts', 'og');
+
+/** Filenames under assets/fonts/og (committed TTFs for next/og; see Next.js opengraph-image docs). */
+export const OG_FONT_FILES = {
+  figtreeBold: 'figtree-700.ttf',
+  interLatin400: 'inter-latin-400-normal.ttf',
+  interLatin600: 'inter-latin-600-normal.ttf',
+  jetbrainsMonoLatin500: 'jetbrains-mono-latin-500-normal.ttf',
+} as const;
+
+export type OgFontKey = keyof typeof OG_FONT_FILES;
+
+const inflight = new Map<string, Promise<ArrayBuffer>>();
+
+function bufferToArrayBuffer(buf: Buffer): ArrayBuffer {
+  return buf.buffer.slice(buf.byteOffset, buf.byteOffset + buf.byteLength);
+}
+
+/** Loads a bundled font once per filename (deduped across concurrent OG generation workers). */
+export async function readOgFont(key: OgFontKey): Promise<ArrayBuffer> {
+  const filename = OG_FONT_FILES[key];
+  let pending = inflight.get(filename);
+  if (!pending) {
+    pending = readFile(join(OG_FONT_DIR, filename)).then(bufferToArrayBuffer);
+    inflight.set(filename, pending);
+  }
+  return pending;
+}
