From 9101dc94ce396f8377033b47c0b282d5809eb46a Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Mon, 9 Jun 2025 10:33:09 -0700
Subject: [PATCH] Restructure skin permalink route

---
 .../app/skin/[hash]/[fileName]/page.tsx       | 12 +++++++++
 .../skin-database/app/skin/[hash]/page.tsx    | 12 +++++++++
 .../page.tsx => [hash]/skinMetadata.ts}       | 26 +++++++------------
 packages/skin-museum-client/src/constants.js  |  3 +++
 4 files changed, 37 insertions(+), 16 deletions(-)
 create mode 100644 packages/skin-database/app/skin/[hash]/[fileName]/page.tsx
 create mode 100644 packages/skin-database/app/skin/[hash]/page.tsx
 rename packages/skin-database/app/skin/{[...segments]/page.tsx => [hash]/skinMetadata.ts} (61%)

diff --git a/packages/skin-database/app/skin/[hash]/[fileName]/page.tsx b/packages/skin-database/app/skin/[hash]/[fileName]/page.tsx
new file mode 100644
index 00000000..e3356526
--- /dev/null
+++ b/packages/skin-database/app/skin/[hash]/[fileName]/page.tsx
@@ -0,0 +1,12 @@
+import App from "../../../App";
+import type { Metadata } from "next";
+import { generateSkinPageMetadata } from "../skinMetadata.js";
+
+export async function generateMetadata({ params }): Promise<Metadata> {
+  const { hash, fileName: _fileName } = await params;
+  return generateSkinPageMetadata(hash);
+}
+
+export default function Page() {
+  return <App />;
+}
diff --git a/packages/skin-database/app/skin/[hash]/page.tsx b/packages/skin-database/app/skin/[hash]/page.tsx
new file mode 100644
index 00000000..e0155328
--- /dev/null
+++ b/packages/skin-database/app/skin/[hash]/page.tsx
@@ -0,0 +1,12 @@
+import App from "../../App";
+import type { Metadata } from "next";
+import { generateSkinPageMetadata } from "./skinMetadata.js";
+
+export async function generateMetadata({ params }): Promise<Metadata> {
+  const { hash } = await params;
+  return generateSkinPageMetadata(hash);
+}
+
+export default function Page() {
+  return <App />;
+}
diff --git a/packages/skin-database/app/skin/[...segments]/page.tsx b/packages/skin-database/app/skin/[hash]/skinMetadata.ts
similarity index 61%
rename from packages/skin-database/app/skin/[...segments]/page.tsx
rename to packages/skin-database/app/skin/[hash]/skinMetadata.ts
index 64f3392c..a409664f 100644
--- a/packages/skin-database/app/skin/[...segments]/page.tsx
+++ b/packages/skin-database/app/skin/[hash]/skinMetadata.ts
@@ -1,15 +1,10 @@
-import App from "../../App";
-import type { Metadata } from "next";
-import SkinModel from "../../../data/SkinModel";
-import UserContext from "../../../data/UserContext";
-
-const DESCRIPTION =
-  "Infinite scroll through 80k Winamp skins with interactive preview";
-
-export async function generateMetadata({ params }): Promise<Metadata> {
-  const { segments } = await params;
-  const [hash, _fileName] = segments;
+import { Metadata } from "next";
+import SkinModel from "../../../data/SkinModel.js";
+import UserContext from "../../../data/UserContext.js";
 
+export async function generateSkinPageMetadata(
+  hash: string
+): Promise<Metadata> {
   const skin = await SkinModel.fromMd5Assert(new UserContext(), hash);
   const fileName = await skin.getFileName();
   const readme = await skin.getReadme();
@@ -26,7 +21,10 @@ export async function generateMetadata({ params }): Promise<Metadata> {
   ];
 
   const title = `${fileName} - Winamp Skin Museum`;
-  const description = readme == null ? DESCRIPTION : readme.slice(0, 300);
+  const description =
+    readme == null
+      ? `The Winamp Skin "${fileName}" in the Winamp Skin Museum. Explore skins, view details, and interact with previews.`
+      : readme.slice(0, 300);
   return {
     title,
     description,
@@ -50,7 +48,3 @@ export async function generateMetadata({ params }): Promise<Metadata> {
     },
   };
 }
-
-export default function Page() {
-  return <App />;
-}
diff --git a/packages/skin-museum-client/src/constants.js b/packages/skin-museum-client/src/constants.js
index ece4a723..d350d24d 100644
--- a/packages/skin-museum-client/src/constants.js
+++ b/packages/skin-museum-client/src/constants.js
@@ -31,6 +31,9 @@ export const SKIN_CDN = R2_CDN;
 // Uncomment these if something goes wrong
 // export const SCREENSHOT_CDN = "https://cdn.webampskins.org";
 // export const SKIN_CDN = "https://cdn.webampskins.org";
+
+// Note: This is a Cloudflare proxy for api.webamp.org which
+// provides some additional caching.
 export const API_URL = "https://api.webampskins.org";
 // export const API_URL = "https://dev.webamp.org";
 export const HEADING_HEIGHT = 46;