feat: add OG image generator per page

middleware.ts

@@ -0,0 +1,68 @@
+export const config = {
+  matcher: ['/roadmap', '/stellar', '/usecases'],
+};
+
+const BOT_USER_AGENTS = [
+  'twitterbot',
+  'facebookexternalhit',
+  'linkedinbot',
+  'slackbot',
+  'discordbot',
+  'telegrambot',
+  'whatsapp',
+  'pinterest',
+];
+
+export default async function middleware(request: Request) {
+  const url = new URL(request.url);
+  const userAgent = request.headers.get('user-agent')?.toLowerCase() || '';
+
+  const isBot = BOT_USER_AGENTS.some((bot) => userAgent.includes(bot));
+
+  if (!isBot) {
+    return;
+  }
+
+  const routeMap: Record<string, { title: string; subtitle?: string }> = {
+    '/roadmap': { title: 'Roadmap', subtitle: 'The future of Wraith' },
+    '/stellar': { title: 'Stellar Ecosystem', subtitle: 'Seamless Integration' },
+    '/usecases': { title: 'Use Cases' },
+  };
+
+  const routeData = routeMap[url.pathname];
+
+  if (!routeData) {
+    return;
+  }
+
+  try {
+    const response = await fetch(url.origin);
+    let html = await response.text();
+
+    const ogImageUrl = `${url.origin}/api/og?title=${encodeURIComponent(routeData.title)}${
+      routeData.subtitle ? `&subtitle=${encodeURIComponent(routeData.subtitle)}` : ''
+    }`;
+
+    const customMetaTags = `
+      <meta property="og:title" content="${routeData.title} | Wraith" />
+      <meta property="og:image" content="${ogImageUrl}" />
+      <meta property="og:image:width" content="1200" />
+      <meta property="og:image:height" content="630" />
+      <meta name="twitter:card" content="summary_large_image" />
+      <meta name="twitter:title" content="${routeData.title} | Wraith" />
+      <meta name="twitter:image" content="${ogImageUrl}" />
+    </head>`;
+
+    html = html.replace('</head>', customMetaTags);
+
+    return new Response(html, {
+      headers: {
+        'content-type': 'text/html;charset=UTF-8',
+        'cache-control': 'public, max-age=0, s-maxage=0',
+      },
+    });
+  } catch (error) {
+    console.error('Middleware HTML rewrite failed:', error);
+    return;
+  }
+}

package.json

@@ -18,6 +18,7 @@
   },
   "dependencies": {
     "@stellar/stellar-sdk": "^13.3.0",
+    "@vercel/og": "^0.11.1",
     "@wraith-protocol/sdk": "^1.4.5",
     "i18next": "^26.2.0",
     "react": "^19.2.5",