feat(og): uppercase black-weight title with white subtitle (#894)

feat(og): uppercase black-weight title with tighter tracking

Render TANSTACK {LIBRARY} in Inter Black (900) with -3px letter spacing
and uppercase. Switch subtitle/intro/docs copy to white; library name
keeps its accent color. Adds Inter-Black.ttf and bundles it in the
Netlify function.

Author: tannerlinsley

netlify.toml

@@ -16,6 +16,7 @@ directory = "netlify/functions"
 included_files = [
   "public/fonts/Inter-Regular.ttf",
   "public/fonts/Inter-ExtraBold.ttf",
+  "public/fonts/Inter-Black.ttf",
   "public/images/logos/splash-dark.png",
   "node_modules/.pnpm/@takumi-rs+wasm@*/node_modules/@takumi-rs/wasm/pkg/takumi_wasm_bg.wasm",
 ]

public/fonts/Inter-Black.ttf

@@ -11,6 +11,7 @@ function readBinary(relPath: string): Buffer {
 let cached: {
   interRegular: Buffer
   interExtraBold: Buffer
+  interBlack: Buffer
   islandPng: Buffer
 } | null = null
 
@@ -20,6 +21,7 @@ export function loadOgAssets() {
   cached = {
     interRegular: readBinary('public/fonts/Inter-Regular.ttf'),
     interExtraBold: readBinary('public/fonts/Inter-ExtraBold.ttf'),
+    interBlack: readBinary('public/fonts/Inter-Black.ttf'),
     islandPng: readBinary('public/images/logos/splash-dark.png'),
   }
   return cached

src/server/og/assets.server.ts

@@ -128,6 +128,12 @@ export function generateOgImageResponse(
         weight: 800,
         style: 'normal',
       },
+      {
+        name: 'Inter',
+        data: assets.interBlack,
+        weight: 900,
+        style: 'normal',
+      },
     ],
     persistentImages: [{ src: ISLAND_KEY, data: assets.islandPng }],
     ...init,

src/server/og/generate.server.ts

@@ -76,8 +76,9 @@ export function buildOgTree(props: TemplateProps): ReactElement {
             flexDirection: 'column',
             marginBottom: 22,
             lineHeight: 0.95,
-            fontWeight: 800,
-            letterSpacing: '-0.02em',
+            fontWeight: 900,
+            letterSpacing: '-3px',
+            textTransform: 'uppercase',
           }}
         >
           <span style={{ fontSize: 72, color: '#ffffff' }}>{titleLine1}</span>
@@ -93,7 +94,7 @@ export function buildOgTree(props: TemplateProps): ReactElement {
               fontSize: 28,
               fontWeight: 500,
               lineHeight: 1.3,
-              color: props.accentColor,
+              color: '#ffffff',
               marginBottom: 0,
             }}
           >
@@ -108,7 +109,7 @@ export function buildOgTree(props: TemplateProps): ReactElement {
               lineHeight: 1.05,
               letterSpacing: '-0.015em',
               marginBottom: 14,
-              color: props.accentColor,
+              color: '#ffffff',
             }}
           >
             {props.docTitle}
@@ -120,7 +121,7 @@ export function buildOgTree(props: TemplateProps): ReactElement {
               fontSize: 22,
               lineHeight: 1.3,
               fontWeight: 500,
-              color: props.accentColor,
+              color: '#ffffff',
             }}
           >
             {props.description}