From 564309ecadb567aa48354e23fe6685285af55804 Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Fri, 6 Jun 2025 08:02:43 -0700
Subject: [PATCH] Metadata for search results page

---
 .../app/[[...folderName]]/page.tsx            | 48 +++++++++++++++++--
 1 file changed, 43 insertions(+), 5 deletions(-)

diff --git a/packages/skin-database/app/[[...folderName]]/page.tsx b/packages/skin-database/app/[[...folderName]]/page.tsx
index cd13598a..66376a90 100644
--- a/packages/skin-database/app/[[...folderName]]/page.tsx
+++ b/packages/skin-database/app/[[...folderName]]/page.tsx
@@ -2,9 +2,46 @@ import App from "../../../skin-museum-client/src/App";
 import type { Metadata } from "next";
 
 const DESCRIPTION =
-  "Infinite scroll through 80k Winamp skins with interactive preview";
+  "Infinite scroll through 100k Winamp skins with interactive preview";
+
+export const dynamic = "force-dynamic"; // Force this page to always be server-rendered
+
+export async function generateMetadata({ searchParams }): Promise<Metadata> {
+  const { query } = await searchParams;
+  if (query) {
+    const images = [
+      {
+        alt: `Screenshot of Winamp skins matching "${query}"`,
+        url: `https://skin-museum-og-captbaritone-webamp.vercel.app/api/og?query=${encodeURIComponent(
+          query
+        )}`,
+        width: "1844",
+        height: "1297",
+      },
+    ];
+    const title = `Winamp Skin Museum - Search Results for "${query}"`;
+    const description = `Search results for "${query}" in the Winamp Skin Museum. Explore skins, view details, and interact with previews.`;
+    return {
+      title,
+      description,
+      openGraph: {
+        title,
+        description,
+        images,
+        type: "website",
+        siteName: "Winamp Skin Museum",
+      },
+      twitter: {
+        card: "summary_large_image",
+        site: "@winampskins",
+        title: "Skin Museum",
+        description,
+        creator: "@captbaritone",
+        images,
+      },
+    };
+  }
 
-export function generateMetadata(): Metadata {
   const images = [
     {
       alt: "Screenshot of many Winamp skins in a grid.",
@@ -13,11 +50,12 @@ export function generateMetadata(): Metadata {
       height: "1297",
     },
   ];
+  const title = "Winamp Skin Museum";
   return {
-    title: "Winamp Skin Museum",
+    title,
     description: DESCRIPTION,
     openGraph: {
-      title: "Skin Museum",
+      title,
       description: DESCRIPTION,
       images,
       type: "website",
@@ -26,7 +64,7 @@ export function generateMetadata(): Metadata {
     twitter: {
       card: "summary_large_image",
       site: "@winampskins",
-      title: "Skin Museum",
+      title,
       description: DESCRIPTION,
       creator: "@captbaritone",
       images,