Add hack title to metadata

src/app/hack/[slug]/page.tsx

@@ -1,4 +1,5 @@
 import { baseRoms } from "@/data/baseRoms";
+import type { Metadata } from "next";
 import { notFound } from "next/navigation";
 import Gallery from "@/components/Hack/Gallery";
 import HackActions from "@/components/Hack/HackActions";
@@ -17,6 +18,21 @@ interface HackDetailProps {
   params: Promise<{ slug: string }>;
 }
 
+export async function generateMetadata({ params }: HackDetailProps): Promise<Metadata> {
+  const { slug } = await params;
+  const supabase = await createClient();
+  const { data: hack } = await supabase
+    .from("hacks")
+    .select("title,summary,approved")
+    .eq("slug", slug)
+    .maybeSingle();
+  if (!hack || !hack.approved) return { title: "Hack not found" };
+  return {
+    title: hack.title,
+    description: hack.summary || undefined,
+  };
+}
+
 export default async function HackDetail({ params }: HackDetailProps) {
   const { slug } = await params;
   const supabase = await createClient();

src/app/layout.tsx

@@ -18,8 +18,11 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "Hackdex",
-  description: "Discover and share Pokémon ROM hack patches.",
+  title: {
+    default: "Hackdex",
+    template: "%s | Hackdex",
+  },
+  description: "Discover and share Pokémon romhack patches.",
 };
 
 export default function RootLayout({