feat: add dynamic og

apps/web-2/package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev --turbopack",
+    "dev": "next dev",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"

apps/web-2/src/app/about/page.tsx

@@ -37,6 +37,14 @@ export const metadata: Metadata = {
   alternates: {
     canonical: 'https://fedeminaya.com/about',
   },
+  openGraph: {
+    images: [
+      {
+        type: 'image/jpeg',
+        url: 'https://fedeminaya.com/og?page=About',
+      },
+    ],
+  },
 };
 
 export default function About() {

apps/web-2/src/app/layout.tsx

@@ -33,7 +33,7 @@ export const metadata: Metadata = {
     images: [
       {
         type: 'image/jpeg',
-        url: 'https://fedeminaya.com/og-home.jpg',
+        url: 'https://fedeminaya.com/og',
       },
     ],
   },

apps/web-2/src/app/og/route.tsx

@@ -0,0 +1,57 @@
+import { ImageResponse } from 'next/og';
+
+export const runtime = 'edge';
+
+export const GET = async (req: Request) => {
+  const url = new URL(req.url);
+
+  const page = url.searchParams.get('page');
+
+  const fontRegular = fetch(
+    new URL('../../assets/fonts/JetBrainsMono-Regular.ttf', import.meta.url)
+  ).then((res) => res.arrayBuffer());
+
+  const fontBold = fetch(
+    new URL('../../assets/fonts/JetBrainsMono-Bold.ttf', import.meta.url)
+  ).then((res) => res.arrayBuffer());
+
+  return new ImageResponse(
+    (
+      <div
+        style={{ width: '100%', height: '100%', display: 'flex' }}
+        tw="justify-center flex-col gap-10 bg-white items-center"
+      >
+        <h1 tw="text-7xl font-bold">Federico Minaya</h1>
+
+        <div
+          // style={{ borderWidth: 4, borderStyle: 'solid' }}
+          tw="flex flex-col"
+        >
+          <h2 tw="text-4xl mb-2 font-normal text-purple-800">
+            {page ?? 'Full Stack Developer'}
+          </h2>
+
+          <div tw="h-1 bg-purple-800"></div>
+        </div>
+      </div>
+    ),
+    {
+      width: 1200,
+      fonts: [
+        {
+          name: 'JetBrains Mono',
+          data: await fontRegular,
+          style: 'normal',
+          weight: 400,
+        },
+        {
+          name: 'JetBrains Mono',
+          data: await fontBold,
+          style: 'normal',
+          weight: 700,
+        },
+      ],
+      height: 630,
+    }
+  );
+};