Add metadata and opengraph integration for individual project page

cardanoapi · Dec 10, 2024 · a68a454 · a68a454
1 parent a2d4e40
commit a68a454
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 8 deletions.
diff --git a/src/app/api/og/route.tsx b/src/app/api/og/route.tsx
@@ -1,7 +1,8 @@
+/* eslint-disable @next/next/no-img-element */
 /* eslint-disable jsx-a11y/alt-text */
 
 /* eslint-enable jsx-a11y/alt-text */
-import Image from "next/image";
+
 import { ImageResponse } from "next/og";
 
 export const runtime = "edge";
@@ -12,6 +13,11 @@ export async function GET(request: Request) {
   const hasTitle = searchParams.has("title");
   const title = hasTitle ? searchParams.get("title") : "Cardano API";
 
+  const hasDescirption = searchParams.has("description");
+  const description = hasDescirption
+    ? searchParams.get("description")
+    : "A list of Cardano API project";
+
   // Fetch the Roboto font
   const fontData = await fetch(
     "https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Me5Q.ttf"
@@ -39,7 +45,7 @@ export async function GET(request: Request) {
           backgroundColor: "#bcd7e5",
         }}
       >
-        <Image
+        <img
           src={imageBase64}
           alt="Cardano API"
           style={{
@@ -48,16 +54,23 @@ export async function GET(request: Request) {
             marginTop: "20px",
             borderRadius: "50%",
           }}
-        ></Image>
-        <div tw="flex flex-col px-4">
+        />
+        <div tw="flex flex-col px-4 m-w-1/2">
           <h1 style={{ fontSize: "48px", fontWeight: "bold", margin: "0" }}>
             {title}
           </h1>
 
           <p
-            style={{ fontSize: "24px", fontWeight: "bold", marginTop: "20px" }}
+            style={{
+              fontSize: "24px",
+              fontWeight: "bold",
+              marginTop: "20px",
+              width: "100%",
+              overflowWrap: "break-word",
+              wordBreak: "break-word",
+            }}
           >
-            Explore a list of Cardano API Projects
+            {description}
           </p>
         </div>
       </div>

diff --git a/src/app/projects/[id]/page.tsx b/src/app/projects/[id]/page.tsx
@@ -1,5 +1,3 @@
-// app/projects/[id]/page.tsx
-
 import Image from "next/image";
 import data from "../../../data.json";
 import SimilarProjects from "@/app/Component/SimilarProjects";
@@ -10,6 +8,41 @@ type Props = {
   params: Promise<{ id: string }>;
 };
 
+export async function generateMetadata({ params }: Props) {
+  const { id } = await params;
+  if (!id) {
+    return {};
+  }
+
+  const project = data.find((project) => project.id === id);
+
+  if (!project) {
+    return {};
+  }
+
+  const projectName = project.projectName || "Cardano API";
+  const projectDescription =
+    project.description || "A List of Cardano API Projects";
+
+  return {
+    title: projectName,
+    description: projectDescription,
+    openGraph: {
+      title: projectName,
+      description: projectDescription,
+      images: [
+        {
+          url: `/api/og?title=${encodeURIComponent(
+            projectName
+          )}&description=${encodeURIComponent(projectDescription)}`,
+          width: 1200,
+          height: 630,
+        },
+      ],
+    },
+  };
+}
+
 const ProjectPage = async ({ params }: Props) => {
   // Ensure `params` has an id