docs: use opengraph-image.tsx for OG images in blog

docs/site/app/(no-sidebar)/blog/[slug]/opengraph-image.tsx

@@ -0,0 +1,94 @@
+import React from "react";
+import { ImageResponse } from "next/og";
+import { notFound } from "next/navigation";
+
+export const runtime = "edge";
+
+function _arrayBufferToBase64(buffer: ArrayBuffer): string {
+  let binary = "";
+  const bytes = new Uint8Array(buffer);
+  const len = bytes.byteLength;
+  for (let i = 0; i < len; i++) {
+    binary += String.fromCharCode(bytes[i]);
+  }
+  return btoa(binary);
+}
+
+// eslint-disable-next-line import/no-default-export -- Nope, we want this.
+export default async function Image(props: {
+  params: Promise<{ slug?: string }>;
+}): Promise<Response> {
+  const [geistSemiBold, bg] = await Promise.all([
+    fetch(new URL("./Geist-SemiBold.ttf", import.meta.url)).then((res) =>
+      res.arrayBuffer()
+    ),
+    _arrayBufferToBase64(
+      await fetch(new URL("./bg.jpg", import.meta.url)).then((res) =>
+        res.arrayBuffer()
+      )
+    ),
+  ]);
+
+  const params = await props.params;
+
+  if (!params.slug) {
+    notFound();
+  }
+
+  let version = "";
+  const groups = /^turbo-(?<major>\d+)-(?<minor>\d+)(?:-\d+)*$/.exec(
+    params.slug
+  );
+  if (groups) {
+    const { major, minor } = groups.groups as {
+      major: string;
+      minor: string;
+    };
+    version = encodeURIComponent(`${major}.${minor}`);
+  }
+
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          width: "100%",
+          height: "100%",
+          fontFamily: "Geist Mono",
+          fontWeight: 600,
+          fontSize: 60,
+          backgroundImage: `url(data:image/jpeg;base64,${bg})`,
+          backgroundSize: "1200px 630px",
+          color: "#fff",
+        }}
+      >
+        <div
+          style={{
+            display: "flex",
+            fontFamily: "Geist Semibold",
+            fontSize: version.length > 3 ? 48 : 52,
+            marginTop: "-40",
+            marginLeft: "-76",
+            fontWeight: "600",
+            color: "#fff",
+          }}
+        >
+          {version}
+        </div>
+      </div>
+    ),
+    {
+      fonts: [
+        {
+          name: "Geist Semibold",
+          data: geistSemiBold,
+          weight: 400 as const,
+          style: "normal" as const,
+        },
+      ],
+    }
+  );
+}

docs/site/app/(no-sidebar)/blog/[...slug]/page.tsx → docs/site/app/(no-sidebar)/blog/[slug]/page.tsx

@@ -7,56 +7,52 @@ import { createMetadata } from "#lib/create-metadata.ts";
 import { FaviconHandler } from "#app/_components/favicon-handler.tsx";
 import { mdxComponents } from "#mdx-components.tsx";
 
-export function generateStaticParams(): Array<{ slug: Array<string> }> {
+export function generateStaticParams() {
   return blog.getPages().map((page) => ({
-    slug: page.slugs,
+    slug: page.slugs.join("/"),
   }));
 }
 
 export async function generateMetadata(props: {
-  params: Promise<{ slug?: Array<string> }>;
+  params: Promise<{ slug?: string }>;
 }): Promise<Metadata> {
   const params = await props.params;
-  const page = blog.getPage(params.slug);
 
-  if (!page) notFound();
-
-  const version = params.slug?.[0] || "▲";
+  if (!params.slug) {
+    notFound();
+  }
 
-  const createOgUrl = () => {
-    const groups = /^turbo-(?<major>\d+)-(?<minor>\d+)(?:-\d+)*$/.exec(version);
-    if (groups) {
-      const { major, minor } = groups.groups as {
-        major: string;
-        minor: string;
-      };
-      return `/api/og/blog?version=${encodeURIComponent(`${major}.${minor}`)}`;
-    }
+  const page = blog.getPage([params.slug]);
 
-    return "▲";
-  };
+  if (!page) notFound();
 
   return {
     ...createMetadata({
       title: page.data.title,
       description: page.data.description,
-      canonicalPath: `/blog/${params.slug?.join("/") ?? ""}`,
+      canonicalPath: `/blog/${params.slug}`,
     }),
-    openGraph: {
-      images: [
-        {
-          url: page.data.ogImage ?? createOgUrl(),
-        },
-      ],
-    },
+    openGraph: page.data.ogImage
+      ? {
+          images: [
+            {
+              url: page.data.ogImage,
+            },
+          ],
+        }
+      : undefined,
   };
 }
 
 export default async function Page(props: {
-  params: Promise<{ slug?: Array<string> }>;
+  params: Promise<{ slug?: string }>;
 }): Promise<JSX.Element> {
   const params = await props.params;
-  const page = blog.getPage(params.slug);
+  if (!params.slug) {
+    notFound();
+  }
+
+  const page = blog.getPage([params.slug]);
 
   if (!page) notFound();
 
@@ -75,8 +71,6 @@ export default async function Page(props: {
           Back to blog
         </Link>
       </div>
-
-      {}
       <Mdx components={mdxComponents} />
     </article>
   );