From 785371bb3eccca455e5ce5fccbe9b6e3752a03f6 Mon Sep 17 00:00:00 2001
From: Bertrand Yuan <bert.yuan@outlook.com>
Date: Tue, 16 Dec 2025 00:15:04 +0800
Subject: fix(front-end): bug in viewing posts

---
 src/app/(main)/og/[...slug]/route.tsx | 48 ++++++++++++++++++++++-------------
 1 file changed, 31 insertions(+), 17 deletions(-)

(limited to 'src/app/(main)/og')

diff --git a/src/app/(main)/og/[...slug]/route.tsx b/src/app/(main)/og/[...slug]/route.tsx
index d713923..77ae7f8 100644
--- a/src/app/(main)/og/[...slug]/route.tsx
+++ b/src/app/(main)/og/[...slug]/route.tsx
@@ -1,6 +1,7 @@
 import { generateOGImage } from '@/app/(main)/og/[...slug]/og';
-import { metadataImage } from '@/lib/metadata-image';
+import { getPostBySlug, getAllPostSlugs } from '@/lib/payload-posts';
 import type { ImageResponse } from 'next/og';
+import { notFound } from 'next/navigation';
 
 async function loadAssets(): Promise<
   { name: string; data: Buffer; weight: 400 | 600; style: 'normal' }[]
@@ -39,20 +40,33 @@ async function loadAssets(): Promise<
   ];
 }
 
-export const GET = metadataImage.createAPI(
-  async (page): Promise<ImageResponse> => {
-    const [fonts] = await Promise.all([loadAssets()]);
-
-    return generateOGImage({
-      title: page.data.title,
-      description: page.data.description,
-      fonts,
-    });
-  },
-);
-
-export function generateStaticParams(): {
-  slug: string[];
-}[] {
-  return metadataImage.generateParams();
+export async function GET(
+  request: Request,
+  { params }: { params: Promise<{ slug: string[] }> }
+): Promise<ImageResponse> {
+  const { slug } = await params;
+  const postSlug = slug[0];
+
+  if (!postSlug) {
+    notFound();
+  }
+
+  const post = await getPostBySlug(postSlug);
+
+  if (!post) {
+    notFound();
+  }
+
+  const fonts = await loadAssets();
+
+  return generateOGImage({
+    title: post.title,
+    description: post.description,
+    fonts,
+  });
+}
+
+export async function generateStaticParams(): Promise<{ slug: string[] }[]> {
+  const slugs = await getAllPostSlugs();
+  return slugs.map((slug) => ({ slug: [slug, 'image.png'] }));
 }
-- 
cgit v1.2.3