feat: Refactor generateMetadata function and add support for jsDelivr CDN for images

src/app/themes/[theme]/page.tsx

@@ -5,8 +5,40 @@ import ThemePage from "@/components/theme-page";
 import { getAllThemes, getThemeFromId } from "@/lib/themes";
 import { Metadata, ResolvingMetadata } from "next";
 
+export async function generateMetadata(
+  { params, searchParams }: any,
+  parent: ResolvingMetadata
+): Promise<Metadata> {
+  const theme = params.theme
+  const themeData = await getThemeFromId(theme);
+  if (!themeData) {
+    return {
+      title: "Theme not found",
+      description: "Theme not found",
+    };
+  }
+  return {
+    title: themeData.name,
+    description: themeData.description,
+    keywords: [themeData.name, themeData.description],
+    openGraph: {
+      title: themeData.name,
+      description: themeData.description,
+      images: [
+        {
+          url: themeData.image,
+          width: 500,
+          height: 500,
+          alt: themeData.name,
+        },
+      ],
+    },
+  };
+}
+
 export async function generateStaticParams() {
   const themes = await getAllThemes();
+  console.log(themes);
   return themes.map((theme) => ({
     theme: theme.id,
   }));

src/components/theme-page.tsx

@@ -1,4 +1,4 @@
-"use client";
+
 import Image from "next/image";
 import { getThemeAuthorLink, getThemeFromId, getThemeMarkdown, ZenTheme } from "@/lib/themes";
 import { Button } from "./ui/button";
@@ -19,10 +19,10 @@ export default async function ThemePage({ themeID }: { themeID: string }) {
   return (
     <div className="mt-24 lg:mt-56 flex-col lg:flex-row flex mx-auto items-start relative">
       <div className="flex flex-col relative lg:sticky lg:top-0 w-md h-full p-5 lg:p-0 lg:pr-5 mr-5 w-full md:max-w-sm">
-        <div className="flex mt-2 mb-9 items-center cursor-pointer opacity-70" onClick={() => window.history.back()}>
+        <a className="flex mt-2 mb-9 items-center cursor-pointer opacity-70" href="/themes">
           <ChevronLeft className="w-4 h-4 mr-1" />
           <h3 className="text-md">Go back</h3>
-        </div>
+        </a>
         <Image src={theme.image} alt={theme.name} width={500} height={500} className="w-full object-cover rounded-lg border-2 shadow" />
         <h1 className="text-2xl mt-5 font-bold">{theme.name}</h1>
         <p className="text-sm text-muted-foreground mt-2">{theme.description}</p>