Template
Rami BitarandClaude Opus 5
0263a59c6a
The root layout exported no metadata, so routes without their own export rendered no title at all, and no route had a description. Add a root metadata block with a title template, Open Graph and Twitter defaults, and fill in the routes that were missing tags. - config/site.ts: description and env-driven absolute url for metadataBase - home, /collections and /shop/collections: titles and descriptions - products/[handle] and collections/[handle]: generateMetadata off the existing catalog fetchers, with canonical and OG image - existing titles: drop the hand-written " — Shop" suffix now that the root template appends it Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011x5jT4fJJCnqPx3umEvXRk
54 lines
1.5 KiB
TypeScript
54 lines
1.5 KiB
TypeScript
import type { Metadata } from 'next';
|
|
import CollectionDetail from '@/components/shopify/collection-detail';
|
|
import { getCollectionProductsPage } from '@/services/shopify/catalog';
|
|
import { truncate } from '@/lib/utils';
|
|
|
|
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 }));
|
|
|
|
if (!collection) return { title: 'Collection' };
|
|
|
|
const description = collection.description
|
|
? truncate(collection.description, 160)
|
|
: `Shop the ${collection.title} collection.`;
|
|
|
|
return {
|
|
title: collection.title,
|
|
description,
|
|
alternates: { canonical: `/collections/${collection.handle}` },
|
|
openGraph: {
|
|
title: collection.title,
|
|
description,
|
|
url: `/collections/${collection.handle}`,
|
|
images: collection.image
|
|
? [
|
|
{
|
|
url: collection.image.url,
|
|
alt: collection.image.altText ?? collection.title,
|
|
},
|
|
]
|
|
: undefined,
|
|
},
|
|
twitter: {
|
|
card: 'summary_large_image',
|
|
title: collection.title,
|
|
description,
|
|
images: collection.image ? [collection.image.url] : undefined,
|
|
},
|
|
};
|
|
}
|
|
|
|
export default function Page() {
|
|
return <CollectionDetail />;
|
|
}
|