feat(metadata): generate og images for sharing links

Author: smutyala1at

apps/docs/app/(docs)/[...slug]/page.tsx

@@ -46,15 +46,25 @@ export async function generateStaticParams() {
   return source.generateParams();
 }
 
-export async function generateMetadata(props: {
+export async function generateMetadata({
+  params,
+}: {
   params: Promise<{ slug?: string[] }>;
 }) {
-  const params = await props.params;
-  const page = source.getPage(params.slug);
+  const { slug = [] } = await params;
+  const page = source.getPage(slug);
   if (!page) notFound();
 
+  const image = ['/docs-og', ...slug, 'image.png'].join('/');
   return {
     title: page.data.title,
     description: page.data.description,
+    openGraph: {
+      images: image,
+    },
+    twitter: {
+      card: 'summary_large_image',
+      images: image,
+    },
   };
-}
+}

apps/docs/app/docs-og/[...slug]/route.tsx

@@ -0,0 +1,25 @@
+import { generateOGImage } from 'fumadocs-ui/og';
+import { source } from '@/lib/source';
+import { notFound } from 'next/navigation';
+
+export async function GET(
+  _req: Request,
+  { params }: RouteContext<'/docs-og/[...slug]'>,
+) {
+  const { slug } = await params;
+  const page = source.getPage(slug.slice(0, -1));
+  if (!page) notFound();
+
+  return generateOGImage({
+    title: page.data.title,
+    description: page.data.description,
+    site: "Mesh JS - Web3 TypeScript SDK & Off-Chain Framework",
+  });
+}
+
+export function generateStaticParams() {
+  return source.generateParams().map((page) => ({
+    ...page,
+    slug: [...page.slug, 'image.png'],
+  }));
+}