Add React editor project

app/collections/[handle]/page.tsx

@@ -1,5 +1,36 @@
-import PageRender from "@/components/page-render";
-import page from "./page.json";
+import type { Metadata } from 'next';
+import PageRender from '@/components/page-render';
+import { pageMetadata } from '@/lib/page-metadata';
+import { getCollectionProductsPage } from '@/services/shopify/catalog';
+import { truncate } from '@/lib/utils';
+import page from './page.json';
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ handle: string }>;
+}): Promise<Metadata> {
+  const { handle } = await params;
+
+  // No collection-only query exists, so ask for the smallest page of products
+  // and use just the collection node off it.
+  const { collection } = await getCollectionProductsPage(handle, {
+    first: 1,
+  }).catch(() => ({ collection: null }));
+
+  // The blocks fetch client-side and render their own empty state, so a failed
+  // lookup falls back to the page.json tags rather than a 500.
+  if (!collection) return pageMetadata(page);
+
+  return pageMetadata(page, {
+    title: collection.title,
+    description: collection.description
+      ? truncate(collection.description, 160)
+      : `Shop the ${collection.title} collection.`,
+    image: collection.image?.url,
+    path: `/collections/${collection.handle}`,
+  });
+}
 
 export default function Page() {
   return <PageRender page={page} />;