feat: add og images for patterns

Author: thedaviddias

app/[lang]/[[...mdxPath]]/page.tsx

@@ -2,15 +2,40 @@
 
 import { SuggestPattern } from '@/app/_components/suggest-pattern'
 import { JsonLd, generateArticleSchema } from '@app/_components/json-ld'
+import { Metadata } from 'next'
 import { generateStaticParamsFor, importPage } from 'nextra/pages'
 import { useMDXComponents } from '../../../mdx-components'
 
 export const generateStaticParams = generateStaticParamsFor('mdxPath')
 
-export async function generateMetadata(props: PageProps) {
-  const params = await props.params
-  const { metadata } = await importPage(params.mdxPath, params.lang)
-  return metadata
+export async function generateMetadata(props: PageProps): Promise<Metadata | null> {
+  try {
+    const params = await props.params
+    const { metadata } = await importPage(params.mdxPath || [], params.lang)
+
+    // Check if this is the homepage
+    const isHomepage = !params.mdxPath || params.mdxPath.length === 0
+
+    const ogImage = {
+      url: isHomepage
+        ? '/og/opengraph-image.png'
+        : `/api/og?title=${encodeURIComponent(metadata.title || '')}`,
+      width: 1200,
+      height: 630,
+      type: 'image/png',
+    }
+
+    return {
+      ...metadata,
+      openGraph: {
+        ...metadata.openGraph,
+        images: [ogImage]
+      }
+    }
+  } catch (e) {
+    console.error('Error generating metadata:', e)
+    return null
+  }
 }
 
 type PageProps = Readonly<{
@@ -23,7 +48,6 @@ type PageProps = Readonly<{
 const Wrapper = useMDXComponents().wrapper
 
 export default async function Page(props: PageProps) {
-
   const params = await props.params
   const result = await importPage(params.mdxPath, params.lang)
   const { default: MDXContent, toc, metadata } = result

app/[lang]/opengraph-image/route.tsx

@@ -0,0 +1,75 @@
+import { ImageResponse } from 'next/og'
+import { NextRequest } from 'next/server'
+
+export const runtime = 'edge'
+export const contentType = 'image/png'
+export const size = {
+  width: 1200,
+  height: 630,
+}
+
+export async function GET(req: NextRequest) {
+  try {
+    // Get the language from the URL
+    const lang = req.nextUrl.pathname.split('/')[1] || 'en'
+
+    // Get the base URL from the request
+    const protocol = req.headers.get('x-forwarded-proto') || 'http'
+    const host = req.headers.get('host') || 'localhost:3000'
+
+    // Use the direct path to the image in the public directory
+    const imageUrl = `${protocol}://${host}/og/opengraph-image.png`
+
+    // Fetch the image
+    const imageResponse = await fetch(imageUrl)
+    if (!imageResponse.ok) {
+      throw new Error(`Failed to fetch image: ${imageResponse.status}`)
+    }
+
+    const imageBuffer = await imageResponse.arrayBuffer()
+    const base64Image = Buffer.from(imageBuffer).toString('base64')
+    const dataUrl = `data:${imageResponse.headers.get('content-type') || 'image/png'};base64,${base64Image}`
+
+    return new ImageResponse(
+      (
+        <div
+          style={{
+            height: '100%',
+            width: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'flex-end',
+            position: 'relative',
+            overflow: 'hidden',
+            backgroundColor: '#000',
+          }}
+        >
+          <img
+            src={dataUrl}
+            alt=""
+            style={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              width: '100%',
+              height: '100%',
+              objectFit: 'cover',
+            }}
+          />
+        </div>
+      ),
+      {
+        ...size,
+        headers: {
+          'Cache-Control': 'public, max-age=31536000, immutable'
+        }
+      }
+    )
+  } catch (e) {
+    console.error('Error generating image:', e)
+    return new Response(`Failed to generate image: ${e.message}`, {
+      status: 500,
+    })
+  }
+}

app/api/og/route.tsx

@@ -0,0 +1,96 @@
+import { ImageResponse } from 'next/og'
+import { NextRequest } from 'next/server'
+
+export const runtime = 'edge'
+
+export async function GET(req: NextRequest) {
+  try {
+    const { searchParams } = new URL(req.url)
+    const title = searchParams.get('title')
+
+    // Get the language from the Accept-Language header or default to 'en'
+    const acceptLanguage = req.headers.get('accept-language') || ''
+    const lang = acceptLanguage.includes('fr') ? 'fr' : 'en'
+
+    // Get the base URL from the request
+    const protocol = req.headers.get('x-forwarded-proto') || 'http'
+    const host = req.headers.get('host') || 'localhost:3000'
+
+    // Use language-specific path to the image
+    const imageUrl = `${protocol}://${host}/${lang}/og/opengraph-image.png`
+
+    // Fetch the image
+    const imageResponse = await fetch(imageUrl, {
+      headers: {
+        'Cache-Control': 'public, max-age=31536000, immutable'
+      }
+    })
+
+    if (!imageResponse.ok) {
+      throw new Error(`Failed to fetch image: ${imageResponse.status}`)
+    }
+
+    const imageBuffer = await imageResponse.arrayBuffer()
+    const base64Image = Buffer.from(imageBuffer).toString('base64')
+    const dataUrl = `data:${imageResponse.headers.get('content-type') || 'image/png'};base64,${base64Image}`
+
+    return new ImageResponse(
+      (
+        <div
+          style={{
+            height: '100%',
+            width: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'flex-end',
+            position: 'relative',
+            overflow: 'hidden',
+            backgroundColor: '#000',
+          }}
+        >
+          <img
+            src={dataUrl}
+            alt=""
+            style={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              width: '100%',
+              height: '100%',
+              objectFit: 'cover',
+            }}
+          />
+          {title && (
+            <div
+              style={{
+                position: 'relative',
+                fontSize: 45,
+                fontWeight: 'normal',
+                color: 'white',
+                textAlign: 'center',
+                maxWidth: '80%',
+                marginBottom: 150,
+              }}
+            >
+              {title}
+            </div>
+          )}
+        </div>
+      ),
+      {
+        width: 1200,
+        height: 630,
+        headers: {
+          'Cache-Control': 'public, max-age=31536000, immutable'
+        }
+      }
+    )
+  } catch (e) {
+    console.error('Error generating image:', e)
+    return new Response(`Failed to generate image: ${e.message}`, {
+      status: 500,
+    })
+  }
+}
+

app/metadata.ts

@@ -23,7 +23,15 @@ export const metadataSEO: Metadata = {
   openGraph: {
     siteName: "UX Patterns for Devs",
     type: "website",
-    locale: "en_US"
+    locale: "en_US",
+    title: "UX Patterns for Devs",
+    description: "UX Patterns for Devs is a collection of UX Patterns for Devs to use in their projects.",
+    images: [{
+      url: '/og/opengraph-image.png',
+      width: 1200,
+      height: 630,
+      type: 'image/png',
+    }]
   },
   twitter: {
     card: 'summary_large_image',

app/twitter-image.png

@@ -3,6 +3,6 @@ export { middleware } from 'nextra/locales'
 export const config = {
   // Matcher ignoring `/_next/` and `/api/`
   matcher: [
-    '/((?!api/mdx|api/patterns/random|_next/static|_next/image|favicon.ico|robots.txt|opengraph-image.png|twitter-image.png|sitemap.xml|apple-icon.png|manifest|_pagefind).*)'
+    '/((?!api/mdx|api/patterns/random|api/og|_next/static|_next/image|favicon.ico|robots.txt|og/opengraph-image.png|twitter-image|sitemap.xml|apple-icon.png|manifest|_pagefind).*)'
   ]
 }

middleware.ts

@@ -23,13 +23,29 @@ const nextConfig = withBundleAnalyzer(
       locales: ['en'],
       defaultLocale: 'en'
     },
+    images: {
+      remotePatterns: [
+        {
+          protocol: 'https',
+          hostname: '**',
+        },
+      ],
+    },
     redirects: async () => [
       {
         source: '/patterns',
         destination: '/patterns/getting-started',
         statusCode: 302
       }
-    ]
+    ],
+    async rewrites() {
+      return [
+        {
+          source: '/og/:slug',
+          destination: '/api/og?title=:slug',
+        },
+      ]
+    },
   })
 )