fix: boring sign/verify approach

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

@@ -1,6 +1,8 @@
 import { ImageResponse } from 'next/og';
 import { NextResponse } from 'next/server';
 
+import { verify } from '@documenso/lib/server-only/crypto/verify';
+
 export const runtime = 'edge';
 
 const IMAGE_SIZE = {
@@ -8,16 +10,18 @@ const IMAGE_SIZE = {
   height: 630,
 };
 
-type BlogPostOpenGraphImageProps = {
+export async function GET(_request: Request) {
-  params: { post: string };
+  const url = new URL(_request.url);
-};
 
-export async function GET(_request: Request, { params }: BlogPostOpenGraphImageProps) {
+  const signature = url.searchParams.get('sig');
-  const { allBlogPosts } = await import('contentlayer/generated');
+  const title = url.searchParams.get('title');
+  const author = url.searchParams.get('author');
 
-  const blogPost = allBlogPosts.find((post) => post._raw.flattenedPath === `blog/${params.post}`);
+  if (!title || !author || !signature) {
+    return NextResponse.json({ error: 'Not found' }, { status: 404 });
+  }
 
-  if (!blogPost) {
+  if (!verify({ title, author }, signature)) {
     return NextResponse.json({ error: 'Not found' }, { status: 404 });
   }
 
@@ -48,10 +52,10 @@ export async function GET(_request: Request, { params }: BlogPostOpenGraphImageP
         <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

@@ -7,6 +7,8 @@ import { ChevronLeft } from 'lucide-react';
 import type { MDXComponents } from 'mdx/types';
 import { useMDXComponent } from 'next-contentlayer/hooks';
 
+import { sign } from '@documenso/lib/server-only/crypto/sign';
+
 import { CallToAction } from '~/components/(marketing)/call-to-action';
 
 export const dynamic = 'force-dynamic';
@@ -20,16 +22,28 @@ export const generateMetadata = ({ params }: { params: { post: string } }) => {
     };
   }
 
+  const signature = sign({
+    title: blogPost.title,
+    author: blogPost.authorName,
+  });
+
+  // Use the url constructor to ensure that things are escaped as they should be
+  const openGraphImageUrl = new URL(`${blogPost.href}/opengraph`);
+
+  openGraphImageUrl.searchParams.set('title', blogPost.title);
+  openGraphImageUrl.searchParams.set('author', blogPost.authorName);
+  openGraphImageUrl.searchParams.set('sig', signature);
+
   return {
     title: {
       absolute: `${blogPost.title} - Documenso Blog`,
     },
     description: blogPost.description,
     openGraph: {
-      images: [`${blogPost.href}/opengraph`],
+      images: [openGraphImageUrl.toString()],
     },
     twitter: {
-      images: [`${blogPost.href}/opengraph`],
+      images: [openGraphImageUrl.toString()],
     },
   };
 };