chore: import upstream snapshot with attribution

docs/app/og/[...slug]/route.tsx

@@ -0,0 +1,15 @@
+import { NextResponse } from "next/server";
+import { getPageTitle, renderOgImage } from "../og-image";
+
+type OgRouteContext = { params: Promise<{ slug: string[] }> };
+
+export async function GET(_request: Request, { params }: OgRouteContext) {
+  const { slug } = await params;
+  const title = getPageTitle(slug.join("/"));
+
+  if (!title) {
+    return NextResponse.json({ error: "Not found" }, { status: 404 });
+  }
+
+  return renderOgImage(title);
+}

docs/app/og/og-image.tsx

@@ -0,0 +1,112 @@
+import { ImageResponse } from "next/og";
+import { readFile } from "node:fs/promises";
+import { join } from "node:path";
+
+export { getPageTitle } from "@/lib/page-titles";
+
+type FontCache = {
+  geistRegular: Buffer;
+  geistPixelSquare: Buffer;
+};
+
+let fontCache: FontCache | null = null;
+
+async function loadFonts(): Promise<FontCache> {
+  if (fontCache) return fontCache;
+  const [geistRegular, geistPixelSquare] = await Promise.all([
+    readFile(join(process.cwd(), "public/Geist-Regular.ttf")),
+    readFile(join(process.cwd(), "public/GeistPixel-Square.ttf")),
+  ]);
+  fontCache = { geistRegular, geistPixelSquare };
+  return fontCache;
+}
+
+export async function renderOgImage(title: string): Promise<ImageResponse> {
+  const { geistRegular, geistPixelSquare } = await loadFonts();
+
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          flexDirection: "column",
+          backgroundColor: "black",
+          padding: "60px 80px",
+        }}
+      >
+        <div style={{ display: "flex", alignItems: "center", gap: "16px" }}>
+          <svg width="36" height="32" viewBox="0 0 76 65" fill="white">
+            <path d="M37.5274 0L75.0548 65H0L37.5274 0Z" />
+          </svg>
+          <span
+            style={{
+              fontSize: 36,
+              color: "#666",
+              fontFamily: "Geist",
+              fontWeight: 400,
+            }}
+          >
+            /
+          </span>
+          <span
+            style={{
+              fontSize: 36,
+              fontFamily: "GeistPixelSquare",
+              fontWeight: 400,
+              color: "white",
+            }}
+          >
+            zero
+          </span>
+        </div>
+
+        <div
+          style={{
+            display: "flex",
+            flex: 1,
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
+          {title.split("\n").map((line, i) => (
+            <span
+              key={i}
+              style={{
+                fontSize: 72,
+                fontFamily: "Geist",
+                fontWeight: 400,
+                color: "white",
+                letterSpacing: "-0.02em",
+                textAlign: "center",
+                lineHeight: 1.2,
+              }}
+            >
+              {line}
+            </span>
+          ))}
+        </div>
+      </div>
+    ),
+    {
+      width: 1200,
+      height: 630,
+      fonts: [
+        {
+          name: "Geist",
+          data: geistRegular,
+          style: "normal",
+          weight: 400,
+        },
+        {
+          name: "GeistPixelSquare",
+          data: geistPixelSquare,
+          style: "normal",
+          weight: 400,
+        },
+      ],
+    },
+  );
+}

docs/app/og/route.tsx

@@ -0,0 +1,6 @@
+import { getPageTitle, renderOgImage } from "./og-image";
+
+export async function GET() {
+  const title = getPageTitle("") ?? "Zero";
+  return renderOgImage(title);
+}