Add opengraph image to home page

app/opengraph-image.tsx

@@ -0,0 +1,62 @@
+/* eslint-disable @next/next/no-img-element */
+import { ImageResponse } from "next/og";
+
+// Route segment config
+export const runtime = "edge";
+
+// Image metadata
+export const alt = "About Acme";
+export const size = {
+  width: 1200,
+  height: 630,
+};
+
+export const contentType = "image/png";
+
+// Image generation
+export default async function Image() {
+  // Font
+  const manropeSemiBold = fetch(
+    new URL("./project/[pid]/_opengraph/Manrope-SemiBold.ttf", import.meta.url),
+  ).then((res) => res.arrayBuffer());
+
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          fontSize: 102,
+          background: "#000",
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          color: "white",
+          gap: "2rem",
+        }}
+      >
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            gap: "0.5rem",
+            maxWidth: 800,
+          }}
+        >
+          <span style={{ fontWeight: "bold" }}>📒NEARCatalog</span>
+        </div>
+      </div>
+    ),
+    {
+      ...size,
+      fonts: [
+        {
+          name: "Manrope",
+          data: await manropeSemiBold,
+          style: "normal",
+          weight: 400,
+        },
+      ],
+    },
+  );
+}