dynamic open graph for all routes

Author: davemooreuws

docs/index.mdx

@@ -1,6 +1,6 @@
 ---
-title: Pages and Layouts
-description: Create your first page and shared layout with the Pages Router.
+title: Nitric Docs
+description: Build cloud backends that run anywhere, fast.
 ---
 
 <HomeHeader

public/images/open_graph.png

@@ -5,6 +5,7 @@ import { BASE_URL } from '@/lib/constants'
 import { allDocs } from '@/content'
 import { getNavInfo } from '@/lib/getNavInfo'
 import { title } from 'radash'
+import { OpenGraph } from 'next/dist/lib/metadata/types/opengraph-types'
 
 export async function generateMetadata({
   params,
@@ -18,22 +19,6 @@ export async function generateMetadata({
     return
   }
 
-  let ogImages = [
-    {
-      url: `${BASE_URL}/images/open_graph.png`,
-      alt: 'Nitric Docs',
-    },
-  ]
-
-  if (doc.image && doc.image_alt) {
-    ogImages = [
-      {
-        url: doc.image,
-        alt: doc.image_alt,
-      },
-    ]
-  }
-
   const { navItem } = getNavInfo(doc)
 
   let seoTitle = doc.slug
@@ -44,15 +29,31 @@ export async function generateMetadata({
     seoTitle = `${navItem.breadcrumbParentItem.title}: ${navItem.title}`
   }
 
+  const openGraph: OpenGraph = {
+    siteName: 'Nitric Docs',
+    locale: 'en_US',
+    url: `${BASE_URL}/docs/${doc.slug}`,
+    images: [
+      {
+        url: `${BASE_URL}/docs/og?title=${encodeURIComponent(doc.title || 'Nitric Docs')}&description=${encodeURIComponent(doc.description || '')}`,
+        alt: 'Nitric Docs',
+      },
+    ],
+  }
+
+  if (doc.image && doc.image_alt) {
+    openGraph.images = [
+      {
+        url: doc.image,
+        alt: doc.image_alt,
+      },
+    ]
+  }
+
   return {
     title: seoTitle,
     description: doc.description,
-    openGraph: {
-      siteName: 'Nitric Docs',
-      locale: 'en_US',
-      url: `${BASE_URL}/docs/${doc.slug}`,
-      images: ogImages,
-    },
+    openGraph,
     twitter: {
       card: 'summary_large_image',
     },

src/app/[[...slug]]/page.tsx

@@ -0,0 +1,113 @@
+import { BASE_URL } from '@/lib/constants'
+import { ImageResponse } from 'next/og'
+import { NextRequest } from 'next/server'
+
+export const runtime = 'edge'
+
+const size = {
+  width: 1200,
+  height: 630,
+}
+
+// Image generation
+export async function GET(req: NextRequest) {
+  const { searchParams } = req.nextUrl
+  // ?title=<title>
+  const hasTitle = searchParams.has('title')
+  const title = hasTitle
+    ? searchParams.get('title')?.slice(0, 100)
+    : 'Nitric Docs'
+
+  const hasDescription = searchParams.has('description')
+
+  const description = hasDescription
+    ? searchParams.get('description')?.slice(0, 100)
+    : 'Docs for the Nitric cloud application framework.'
+
+  const imageBaseUrl = req.headers.get('host')?.startsWith('localhost')
+    ? `http://${req.headers.get('host')}`
+    : `https://${req.headers.get('host')}`
+
+  // Font
+  const soraBold = fetch(
+    new URL('../../assets/Sora-Bold.ttf', import.meta.url),
+  ).then((res) => res.arrayBuffer())
+
+  return new ImageResponse(
+    (
+      // ImageResponse JSX element
+      <div
+        style={{
+          backgroundColor: '#121118',
+          backgroundSize: '150px 150px',
+          height: '100%',
+          width: '100%',
+          display: 'flex',
+          textAlign: 'center',
+          alignItems: 'center',
+          justifyContent: 'center',
+          flexDirection: 'column',
+          flexWrap: 'nowrap',
+          position: 'relative',
+        }}
+      >
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            alignContent: 'center',
+            justifyContent: 'center',
+            justifyItems: 'center',
+          }}
+        >
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img alt="Nitric" src={`${BASE_URL}/docs/images/open_graph.png`} />
+        </div>
+        <div
+          style={{
+            width: '500px',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 10,
+            left: '79px',
+            top: '230px',
+            bottom: '156px',
+            position: 'absolute',
+            color: 'white',
+            fontSize: '50px',
+            fontFamily: 'Sora',
+            lineHeight: '120%',
+            fontWeight: 700,
+            textAlign: 'left',
+          }}
+        >
+          {title}
+          <div
+            style={{
+              color: '#A1A1AA',
+              fontSize: '28px',
+              fontWeight: 500,
+            }}
+          >
+            {description}
+          </div>
+        </div>
+        <br />
+      </div>
+    ),
+    // ImageResponse options
+    {
+      // For convenience, we can re-use the exported opengraph-image
+      // size config to also set the ImageResponse's width and height.
+      ...size,
+      fonts: [
+        {
+          name: 'Sora',
+          data: await soraBold,
+          style: 'normal',
+          weight: 600,
+        },
+      ],
+    },
+  )
+}