[tag]0.1-vcci

src/app/(main)/[...slug]/page.tsx

@@ -3,7 +3,6 @@ import links from "@links/index";
 import {
   fetchDynamicPostById,
   fetchDynamicPostByExternalLink,
-  getDynamicPostSeoImage,
   getDynamicPostExcerpt,
   stripHtml,
 } from "./templates/data";
@@ -46,7 +45,6 @@ export async function generateMetadata({
     stripHtml(post.summary) ||
     getDynamicPostExcerpt(post).slice(0, 160) ||
     "Tin tức từ VCCI HCM";
-  const imageUrl = getDynamicPostSeoImage(post);
   const articleUrl = `${links.siteURL.replace(/\/+$/, "")}${path}${
     postId || categoryIdParam
       ? `?${new URLSearchParams({
@@ -56,6 +54,11 @@ export async function generateMetadata({
       : ""
   }`;
 
+  const ogImageParams = new URLSearchParams();
+  if (postId) ogImageParams.set("id", postId);
+  if (!postId && slug?.length) ogImageParams.set("slug", slug.join("/"));
+  const ogImageUrl = `/api/og-post?${ogImageParams.toString()}`;
+
   return {
     title,
     description,
@@ -67,7 +70,7 @@ export async function generateMetadata({
       siteName: "VCCI HCM",
       images: [
         {
-          url: imageUrl,
+          url: ogImageUrl,
           width: 1200,
           height: 630,
           alt: title,
@@ -80,7 +83,7 @@ export async function generateMetadata({
       card: "summary_large_image",
       title,
       description,
-      images: [imageUrl],
+      images: [ogImageUrl],
     },
   };
 }

src/app/api/og-post/route.tsx

+import { ImageResponse } from "next/og";
+import {
+  fetchDynamicPostById,
+  fetchDynamicPostByExternalLink,
+  getDynamicPostSeoImage,
+  getDynamicPostExcerpt,
+  stripHtml,
+} from "@/app/(main)/[...slug]/templates/data";
+
+export const runtime = "nodejs";
+export const revalidate = 3600;
+
+export async function GET(request: Request) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const id = searchParams.get("id") ?? "";
+    const slug = searchParams.get("slug") ?? "";
+
+    let post = null;
+    try {
+      post = id
+        ? await fetchDynamicPostById(id)
+        : slug
+          ? await fetchDynamicPostByExternalLink(`/${slug}`)
+          : null;
+    } catch {
+      post = null;
+    }
+
+    const title = post?.title ?? "VCCI HCM";
+    const description =
+      stripHtml(post?.summary) ||
+      (post ? getDynamicPostExcerpt(post).slice(0, 120) : "");
+    const imageUrl = post ? getDynamicPostSeoImage(post) : "";
+    const hasImage = imageUrl && imageUrl !== "/thumbnail.png";
+
+    return new ImageResponse(
+      (
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            width: 1200,
+            height: 630,
+            backgroundColor: "#0a4d8c",
+            position: "relative",
+            fontFamily: "sans-serif",
+          }}
+        >
+          {hasImage && (
+            <img
+              src={imageUrl}
+              style={{
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: 1200,
+                height: 630,
+                objectFit: "cover",
+              }}
+            />
+          )}
+        </div>
+      ),
+      {
+        width: 1200,
+        height: 630,
+      },
+    );
+  } catch {
+    return new ImageResponse(
+      (
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: 1200,
+            height: 630,
+            backgroundColor: "#0a4d8c",
+            color: "#ffffff",
+            fontSize: 48,
+            fontWeight: 700,
+            fontFamily: "sans-serif",
+          }}
+        >
+          VCCI-HCM
+        </div>
+      ),
+      { width: 1200, height: 630 },
+    );
+  }
+}