Persist category metadata for /[category]/...

src/app/(category-sidebar)/products/[category]/layout.tsx

@@ -0,0 +1,45 @@
+import { Metadata } from "next";
+import { db } from "../../../../db";
+import { notFound } from "next/navigation";
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ category: string }>;
+}): Promise<Metadata> {
+  const { category: categoryParam } = await params;
+  const urlDecoded = decodeURIComponent(categoryParam);
+  const category = await db.query.categories.findFirst({
+    where: (categories, { eq }) => eq(categories.slug, urlDecoded),
+    with: {
+      subcollections: true,
+    },
+    orderBy: (categories, { asc }) => asc(categories.name),
+  });
+
+  if (!category) {
+    return notFound();
+  }
+
+  const examples = category.subcollections
+    .slice(0, 2)
+    .map((s) => s.name)
+    .join(", ")
+    .toLowerCase();
+
+  return {
+    title: `${category.name}`,
+    openGraph: {
+      title: `${category.name}`,
+      description: `Choose from our selection of ${category.name.toLowerCase()}, including ${examples + (category.subcollections.length > 1 ? "," : "")} and more. In stock and ready to ship.`,
+    },
+  };
+}
+
+export default function Layout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return children;
+}

src/app/(category-sidebar)/products/[category]/page.tsx

@@ -6,45 +6,10 @@ import {
   subcollection,
 } from "@/db/schema";
 import { count, eq } from "drizzle-orm";
-import { Metadata } from "next";
 import Image from "next/image";
 import Link from "next/link";
 import { notFound } from "next/navigation";
 
-export async function generateMetadata({
-  params,
-}: {
-  params: Promise<{ category: string }>;
-}): Promise<Metadata> {
-  const { category: categoryParam } = await params;
-  const urlDecoded = decodeURIComponent(categoryParam);
-  const category = await db.query.categories.findFirst({
-    where: (categories, { eq }) => eq(categories.slug, urlDecoded),
-    with: {
-      subcollections: true,
-    },
-    orderBy: (categories, { asc }) => asc(categories.name),
-  });
-
-  if (!category) {
-    return notFound();
-  }
-
-  const examples = category.subcollections
-    .slice(0, 2)
-    .map((s) => s.name)
-    .join(", ")
-    .toLowerCase();
-
-  return {
-    title: `${category.name}`,
-    openGraph: {
-      title: `${category.name}`,
-      description: `Choose from our selection of ${category.name.toLowerCase()}, including ${examples + (category.subcollections.length > 1 ? "," : "")} and more. In stock and ready to ship.`,
-    },
-  };
-}
-
 export default async function Page(props: {
   params: Promise<{
     category: string;