Derive image URL from params

.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

src/app/memes/[id]/page.tsx

@@ -1,56 +1,59 @@
-import type { Metadata, ResolvingMetadata } from 'next'
+import type { Metadata, ResolvingMetadata } from 'next';
 
-type Props = {
+interface Props {
-  params: { id: string }
+  params: { id: string };
-  searchParams: { [key: string]: string | string[] | undefined }
+}
+
+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 baseUrl = process.env.SITE_URL!;
-
+  const meme = getMeme(baseUrl, params.id);
-  const product = {
-    title: 'Generated meme',
-    imageUrl: 'https://jade-wonderful-barnacle-735.mypinata.cloud/ipfs/bafybeiaojxp5jkr3vc5t4ruopet4fsxgn7kjsmwi3bu6w7g7r2vpt2jj2q',
-    description: 'A funny meme',
-  }
 
   return {
-    title: product.title,
+    title: meme.title,
-    metadataBase: new URL('https://memes.markto.market'),
+    description: meme.description,
+    metadataBase: new URL(baseUrl),
     openGraph: {
-       type: "website",
+      type: 'website',
-       url: `https://memes.markto.market/memes/${id}`,
+      url: `${baseUrl}/memes/${params.id}`,
-       siteName: "Mark's meme market",
+      siteName: "Mark's meme market",
-       images: [{
+      images: [{ url: meme.imageUrl }],
-         url: product.imageUrl,
+    },
-       }, ],
+  };
-     }
-
-  }
 }
 
-export default async function MemePage({ params }: Props) {
+export default function MemePage({ params }: Props) {
-  const product = {
+  const baseUrl = process.env.SITE_URL!;
-    title: 'Generated meme',
+  const meme = getMeme(baseUrl, params.id);
-    imageUrl: 'https://jade-wonderful-barnacle-735.mypinata.cloud/ipfs/bafybeiaojxp5jkr3vc5t4ruopet4fsxgn7kjsmwi3bu6w7g7r2vpt2jj2q',
-    description: 'A funny meme',
-  }
 
   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}
+            src={meme.imageUrl}
-            alt={product.title}
+            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>
   );