Converts to Opengraph Image file convention. (#1043)

components/opengraph-image.tsx

@@ -0,0 +1,45 @@
+import { ImageResponse } from '@vercel/og';
+
+export type Props = {
+  title?: string;
+};
+
+export default async function OpengraphImage(props?: Props): Promise<ImageResponse> {
+  const { title } = {
+    ...{
+      title: process.env.SITE_NAME
+    },
+    ...props
+  };
+
+  return new ImageResponse(
+    (
+      <div tw="flex h-full w-full flex-col items-center justify-center bg-black">
+        <svg viewBox="0 0 32 32" width="140">
+          <rect width="100%" height="100%" rx="16" fill="white" />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            fill="black"
+            d="M17.6482 10.1305L15.8785 7.02583L7.02979 22.5499H10.5278L17.6482 10.1305ZM19.8798 14.0457L18.11 17.1983L19.394 19.4511H16.8453L15.1056 22.5499H24.7272L19.8798 14.0457Z"
+          />
+        </svg>
+        <p tw="mt-12 text-6xl font-bold text-white">{title}</p>
+      </div>
+    ),
+    {
+      width: 1200,
+      height: 630,
+      fonts: [
+        {
+          name: 'Inter',
+          data: await fetch(new URL('../fonts/Inter-Bold.ttf', import.meta.url)).then((res) =>
+            res.arrayBuffer()
+          ),
+          style: 'normal',
+          weight: 700
+        }
+      ]
+    }
+  );
+}