Beautiful.

Author: anthonyshew

docs/site/app/api/og/route.tsx

@@ -1,46 +1,40 @@
 import React from "react";
 import { ImageResponse } from "next/og";
 import type { NextApiRequest } from "next/index";
-import { TurboLogo } from "../../_components/logos/og/turbo-logo";
+import { RepoLogo } from "../../_components/logos/og/repo-logo";
 import { VercelLogo } from "../../_components/logos/og/vercel-logo";
 import fs from "fs";
 import path from "path";
 
 export type Products = "repo";
 
-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);
-}
-
 export async function GET(req: NextApiRequest): Promise<Response> {
+  const fontPath = path.join(
+    process.cwd(),
+    "node_modules",
+    "geist",
+    "dist",
+    "fonts",
+    "geist-sans",
+    "Geist-Regular.ttf"
+  );
+  const geistSans = fs.readFileSync(fontPath);
+
+  const fontMonoPath = path.join(
+    process.cwd(),
+    "node_modules",
+    "geist",
+    "dist",
+    "fonts",
+    "geist-mono",
+    "GeistMono-Regular.ttf"
+  );
+  const geistMono = fs.readFileSync(fontMonoPath);
+
   const bgImagePath = path.join(process.cwd(), "app", "api", "og", "bg.jpeg");
   const bgImageBuffer = fs.readFileSync(bgImagePath);
   const bg = `data:image/jpeg;base64,${bgImageBuffer.toString("base64")}`;
-  // const url = new URL("bg.jpeg", import.meta.url);
-  // console.log(url);
-  // console.log(await fetch(url));
   try {
-    // const [bg] = await Promise.all([
-    // fetch(new URL("./Geist-Regular.ttf", import.meta.url)).then((res) =>
-    //   res.arrayBuffer()
-    // ),
-    // fetch(new URL("./GeistMono-Regular.ttf", import.meta.url)).then((res) =>
-    //   res.arrayBuffer()
-    // ),
-    // _arrayBufferToBase64(
-    //   // await fetch(new URL("./bg.jpeg", import.meta.url)).then((res) =>
-    //   await fetch(new URL("./bg.jpeg", import.meta.url)).then((res) =>
-    //     res.arrayBuffer()
-    //   )
-    // ),
-    // ]);
-
     if (!req.url) {
       throw new Error("No URL was provided");
     }
@@ -64,7 +58,7 @@ export async function GET(req: NextApiRequest): Promise<Response> {
             justifyContent: "center",
             width: "100%",
             height: "100%",
-            fontFamily: "Geist Mono",
+            fontFamily: "Geist Sans",
             fontWeight: 700,
             fontSize: 60,
             backgroundImage: `url(${bg})`,
@@ -76,12 +70,12 @@ export async function GET(req: NextApiRequest): Promise<Response> {
           <div
             style={{ display: "flex", height: 97 * 1.1, alignItems: "center" }}
           >
-            <TurboLogo height={97 * 1.1} width={459 * 1.1} />
+            <RepoLogo />
           </div>
           {title ? (
             <div
               style={{
-                fontFamily: "Geist Mono",
+                fontFamily: "Geist Sans",
                 fontSize: 36,
                 letterSpacing: -1.5,
                 padding: "40px 20px 30px",
@@ -110,20 +104,20 @@ export async function GET(req: NextApiRequest): Promise<Response> {
         </div>
       ),
       {
-        // fonts: [
-        //   {
-        //     name: "Geist Mono",
-        //     data: geistMono,
-        //     weight: 700 as const,
-        //     style: "normal" as const,
-        //   },
-        //   {
-        //     name: "Geist Sans",
-        //     data: geist,
-        //     weight: 400 as const,
-        //     style: "normal" as const,
-        //   },
-        // ],
+        fonts: [
+          {
+            name: "Geist Mono",
+            data: geistMono,
+            weight: 700 as const,
+            style: "normal" as const,
+          },
+          {
+            name: "Geist Sans",
+            data: geistSans,
+            weight: 400 as const,
+            style: "normal" as const,
+          },
+        ],
       }
     );
   } catch (err: unknown) {