fix: avoid opengraph image limit (#1027)

apps/marketing/src/app/(marketing)/blog/[post]/opengraph/route.tsx

@@ -1,25 +1,21 @@
 import { ImageResponse } from 'next/og';
-
+import { NextResponse } from 'next/server';
-import { allBlogPosts } from 'contentlayer/generated';
 
 export const runtime = 'edge';
 
-export const contentType = 'image/png';
+const IMAGE_SIZE = {
-
-export const IMAGE_SIZE = {
   width: 1200,
   height: 630,
 };
 
-type BlogPostOpenGraphImageProps = {
+export async function GET(_request: Request) {
-  params: { post: string };
+  const url = new URL(_request.url);
-};
 
-export default async function BlogPostOpenGraphImage({ params }: BlogPostOpenGraphImageProps) {
+  const title = url.searchParams.get('title');
-  const blogPost = allBlogPosts.find((post) => post._raw.flattenedPath === `blog/${params.post}`);
+  const author = url.searchParams.get('author');
 
-  if (!blogPost) {
+  if (!title || !author) {
-    return null;
+    return NextResponse.json({ error: 'Not found' }, { status: 404 });
   }
 
   // The long urls are needed for a compiler optimisation on the Next.js side, lifting this up
@@ -49,10 +45,10 @@ export default async function BlogPostOpenGraphImage({ params }: BlogPostOpenGra
         <img src={logoImage} alt="logo" tw="h-8" />
 
         <h1 tw="mt-8 text-6xl text-center flex items-center justify-center w-full max-w-[800px] font-bold text-center mx-auto">
-          {blogPost.title}
+          {title}
         </h1>
 
-        <p tw="font-normal">Written by {blogPost.authorName}</p>
+        <p tw="font-normal">Written by {author}</p>
       </div>
     ),
     {

apps/marketing/src/app/(marketing)/blog/[post]/page.tsx

@@ -20,11 +20,23 @@ export const generateMetadata = ({ params }: { params: { post: string } }) => {
     };
   }
 
+  // Use the url constructor to ensure that things are escaped as they should be
+  const searchParams = new URLSearchParams({
+    title: blogPost.title,
+    author: blogPost.authorName,
+  });
+
   return {
     title: {
       absolute: `${blogPost.title} - Documenso Blog`,
     },
     description: blogPost.description,
+    openGraph: {
+      images: [`${blogPost.href}/opengraph?${searchParams.toString()}`],
+    },
+    twitter: {
+      images: [`${blogPost.href}/opengraph?${searchParams.toString()}`],
+    },
   };
 };
 
@@ -94,7 +106,7 @@ export default function BlogPostPage({ params }: { params: { post: string } }) {
         </Link>
       </article>
 
-      {post.cta && <CallToAction className="mt-8" utmSource={`blog__${params.post}`} />}
+      {post.cta && <CallToAction className="mt-8" utmSource={`blog_${params.post}`} />}
     </div>
   );
 }