wip

Author: hasparus

next-env.d.ts

@@ -3,4 +3,4 @@
 /// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package.json

@@ -26,6 +26,7 @@
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/nesting": "0.0.0-insiders.565cd3e",
     "@tailwindcss/typography": "^0.5.15",
+    "@vercel/og": "^0.6.8",
     "autoprefixer": "^10.4.20",
     "clsx": "^2.1.1",
     "codemirror": "^5.65.19",
@@ -41,7 +42,7 @@
     "markdown-to-jsx": "^7.7.2",
     "marked": "5.1.2",
     "motion": "^12.11.0",
-    "next": "^14.2.22",
+    "next": "^15.3.3",
     "next-image-export-optimizer": "^1.18.0",
     "next-query-params": "^5.0.1",
     "next-sitemap": "^4.2.3",

pnpm-lock.yaml

@@ -1,10 +1,7 @@
 import clsx from "clsx"
 import Image from "next-image-export-optimizer"
 
-import { eventsColors } from "../utils"
-
 import { Anchor } from "../../_design-system/anchor"
-import { Tag } from "../../_design-system/tag"
 import { SchedSpeaker } from "../../2023/types"
 import { StripesDecoration } from "../../_design-system/stripes-decoration"
 

src/app/conf/2025/components/speaker-card.tsx

@@ -0,0 +1,50 @@
+import { ImageResponse } from "next/og"
+import { readFile } from "node:fs/promises"
+import { resolve } from "node:path"
+
+import { loadFontsForOG } from "@/app/fonts/og/load-fonts-for-og"
+
+import { speakers } from "../../_data"
+
+export const contentType = "image/png"
+export const size = {
+  width: 1200,
+  height: 630,
+}
+
+// This doesn't seem to work?
+export function generateStaticParams() {
+  // return speakers.map(s => ({ id: s.username }))
+  return [{ id: "aditi_rajawat" }]
+}
+
+export default async function SpeakerOGImage({
+  params,
+}: {
+  params: { id: string }
+}) {
+  const decodedId = decodeURIComponent(params.id)
+  const speaker = speakers.find(s => s.username === decodedId)
+
+  if (!speaker) {
+    throw new Error(`Speaker not found: ${decodedId}`)
+  }
+
+  // TODO: The fonts need to be in .woff, not .woff2.
+  const fonts = loadFontsForOG()
+
+  return new ImageResponse(
+    (
+      <div className="size-full">
+        <h1 className="font-mono">{params.id}</h1>
+        <p className="typography-body-lg">
+          {speaker?.name} is speaking at GraphQLConf 2025.
+        </p>
+      </div>
+    ),
+    {
+      ...size,
+      fonts: await fonts,
+    },
+  )
+}

src/app/conf/2025/speakers/[id]/opengraph-image.tsx

@@ -34,9 +34,6 @@ export function generateMetadata({ params }: SpeakerProps): Metadata {
     title: speaker.name,
     description: speaker.about,
     keywords: [...layoutMetadata.keywords, ...keywords],
-    openGraph: {
-      images: `/img/__og-image/2024/${speaker.username}.png`,
-    },
   }
 }
 

src/app/conf/2025/speakers/[id]/page.tsx

@@ -0,0 +1,29 @@
+import type { ImageResponse } from "next/og"
+
+import { readFile } from "node:fs/promises"
+import { resolve } from "node:path"
+
+type FontOptions = NonNullable<
+  NonNullable<ConstructorParameters<typeof ImageResponse>[1]>["fonts"]
+>[number]
+
+/**
+ * Fonts used in Open Graph images must be .ttf or .woff due to a limitation in opentype.js.
+ * @see https://github.com/vercel/satori/discussions/157.
+ * Variable fonts are flaky and inconsistent with `@vercel/og`.
+ * @see https://github.com/vercel/satori/issues/320
+ */
+export async function loadFontsForOG(): Promise<FontOptions[]> {
+  const cwd = process.cwd()
+  const dirname = "src/app/fonts/og"
+  return [
+    {
+      data: await readFile(resolve(cwd, dirname, "HostGrotesk-Regular.ttf")),
+      name: "Host Grotesk",
+    },
+    {
+      data: await readFile(resolve(cwd, dirname, "CommitMono-400-Regular.ttf")),
+      name: "Commit Mono",
+    },
+  ]
+}

src/app/fonts/og/CommitMono-400-Regular.otf

@@ -1 +1 @@
-{}
+{}