From c7e291c19e10fb23a83bc60444f934037cc25271 Mon Sep 17 00:00:00 2001
From: Adw8 <adwaitgharpure@gmail.com>
Date: Wed, 5 Feb 2025 13:34:57 +0530
Subject: [PATCH] Derive image URL from params

---
 .env.example                |  2 ++
 src/app/memes/[id]/page.tsx | 69 +++++++++++++++++++------------------
 2 files changed, 38 insertions(+), 33 deletions(-)

diff --git a/.env.example b/.env.example
index 3263b51..bd04e2e 100644
--- a/.env.example
+++ b/.env.example
@@ -10,3 +10,5 @@ NEXT_PUBLIC_USDC_MINT=EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v
 # Get keys from https://app.pinata.cloud/developers/api-keys
 PINATA_JWT=
 PINATA_GATEWAY=
+
+SITE_URL=https://memes.markto.market
diff --git a/src/app/memes/[id]/page.tsx b/src/app/memes/[id]/page.tsx
index 433a357..22cfcef 100644
--- a/src/app/memes/[id]/page.tsx
+++ b/src/app/memes/[id]/page.tsx
@@ -1,56 +1,59 @@
-import type { Metadata, ResolvingMetadata } from 'next'
+import type { Metadata, ResolvingMetadata } from 'next';
 
-type Props = {
-  params: { id: string }
-  searchParams: { [key: string]: string | string[] | undefined }
+interface Props {
+  params: { id: string };
+}
+
+interface Meme {
+  title: string;
+  imageUrl: string;
+  description: string;
+}
+
+function getMeme(baseUrl: string, id: string): Meme {
+  return {
+    title: 'Generated meme',
+    imageUrl: `${baseUrl}/api/images/${id}`,
+    description: 'A funny meme',
+  };
 }
 
 export async function generateMetadata(
-  { params, searchParams }: Props,
+  { params }: Props,
   parent: ResolvingMetadata
 ): Promise<Metadata> {
-  const id = (await params).id
-
-  const product = {
-    title: 'Generated meme',
-    imageUrl: 'https://jade-wonderful-barnacle-735.mypinata.cloud/ipfs/bafybeiaojxp5jkr3vc5t4ruopet4fsxgn7kjsmwi3bu6w7g7r2vpt2jj2q',
-    description: 'A funny meme',
-  }
+  const baseUrl = process.env.SITE_URL!;
+  const meme = getMeme(baseUrl, params.id);
 
   return {
-    title: product.title,
-    metadataBase: new URL('https://memes.markto.market'),
+    title: meme.title,
+    description: meme.description,
+    metadataBase: new URL(baseUrl),
     openGraph: {
-       type: "website",
-       url: `https://memes.markto.market/memes/${id}`,
-       siteName: "Mark's meme market",
-       images: [{
-         url: product.imageUrl,
-       }, ],
-     }
-
-  }
+      type: 'website',
+      url: `${baseUrl}/memes/${params.id}`,
+      siteName: "Mark's meme market",
+      images: [{ url: meme.imageUrl }],
+    },
+  };
 }
 
-export default async function MemePage({ params }: Props) {
-  const product = {
-    title: 'Generated meme',
-    imageUrl: 'https://jade-wonderful-barnacle-735.mypinata.cloud/ipfs/bafybeiaojxp5jkr3vc5t4ruopet4fsxgn7kjsmwi3bu6w7g7r2vpt2jj2q',
-    description: 'A funny meme',
-  }
+export default function MemePage({ params }: Props) {
+  const baseUrl = process.env.SITE_URL!;
+  const meme = getMeme(baseUrl, params.id);
 
   return (
     <main className="flex min-h-screen flex-col items-center justify-between p-24">
       <div className="relative flex flex-col items-center">
-        <h1 className="text-4xl font-bold mb-8">{product.title}</h1>
+        <h1 className="text-4xl font-bold mb-8">{meme.title}</h1>
         <div className="relative w-full max-w-2xl aspect-square">
           <img
-            src={product.imageUrl}
-            alt={product.title}
+            src={meme.imageUrl}
+            alt={meme.title}
             className="object-contain rounded-lg w-full h-full"
           />
         </div>
-        <p className="mt-4 text-lg text-gray-600">{product.description}</p>
+        <p className="mt-4 text-lg text-gray-600">{meme.description}</p>
       </div>
     </main>
   );