Added dynamic OG Generation via vercel

Author: D4mianWayne

package-lock.json

@@ -13,7 +13,8 @@
     "@astrojs/mdx": "^4.3.1",
     "@astrojs/rss": "^4.0.12",
     "@astrojs/sitemap": "^3.4.1",
+    "@vercel/og": "^0.8.5",
     "astro": "^5.12.0",
     "sharp": "^0.34.2"
   }
-}
+}

package.json

@@ -16,10 +16,10 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site);
 
 const { title, description, image } = Astro.props;
 
-// Use custom OG image from public folder, or provided image, or fallback
+// Generate dynamic OG image URL with title as parameter, or use provided image
 const ogImageUrl = image 
   ? new URL(image.src, Astro.url) 
-  : new URL('/og-image.png', Astro.url);
+  : new URL(`/og/image.png?title=${encodeURIComponent(title)}`, Astro.url);
 ---
 
 <!-- Global Metadata -->

src/components/BaseHead.astro

@@ -0,0 +1,59 @@
+import { ImageResponse } from '@vercel/og';
+import type { APIRoute } from 'astro';
+
+export const GET: APIRoute = async ({ url }) => {
+    const title = url.searchParams.get('title') || 'PwnFuzz Labs';
+
+    return new ImageResponse(
+        {
+            type: 'div',
+            props: {
+                style: {
+                    height: '100%',
+                    width: '100%',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    backgroundColor: '#1a1b26',
+                    padding: '80px',
+                    fontFamily: 'sans-serif',
+                },
+                children: [
+                    {
+                        type: 'div',
+                        props: {
+                            style: {
+                                fontSize: '64px',
+                                fontWeight: 'bold',
+                                color: '#c0caf5',
+                                textAlign: 'center',
+                                lineHeight: '1.2',
+                                maxWidth: '1000px',
+                            },
+                            children: title,
+                        },
+                    },
+                    {
+                        type: 'div',
+                        props: {
+                            style: {
+                                position: 'absolute',
+                                bottom: '40px',
+                                right: '60px',
+                                fontSize: '28px',
+                                fontWeight: '600',
+                                color: '#ff9e64',
+                            },
+                            children: 'PwnFuzz Labs',
+                        },
+                    },
+                ],
+            },
+        },
+        {
+            width: 1200,
+            height: 630,
+        }
+    );
+};