refactor(pages): adopt centralized metadata generators and LocalePageProps

Migrate all page components to use:
- LocalePageProps type for consistent locale param handling
- generateStaticPageMetadata() for home, manifesto, search, landscape, stack, and collections pages
- Centralized metadata generators with proper robots configuration
- Consistent basePath handling (empty string for root instead of '/')

Affects 16 page files across the application.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

Author: ericyangpan

src/app/[locale]/ai-coding-landscape/page.tsx

@@ -4,41 +4,26 @@ import Header from '@/components/Header'
 import { BackToNavigation } from '@/components/navigation/BackToNavigation'
 import PageHeader from '@/components/PageHeader'
 import VendorMatrix from '@/components/product/VendorMatrix'
+import type { Locale } from '@/i18n/config'
 import { buildVendorMatrix } from '@/lib/landscape-data'
-import { buildCanonicalUrl, buildOpenGraph, buildTitle, buildTwitterCard } from '@/lib/metadata'
+import { buildTitle, generateStaticPageMetadata } from '@/lib/metadata'
 
 export async function generateMetadata({ params }: { params: Promise<{ locale: string }> }) {
   const { locale } = await params
   const tNav = await getTranslations({ locale, namespace: 'components.header' })
 
-  const canonicalPath = locale === 'en' ? '/ai-coding-landscape' : `/${locale}/ai-coding-landscape`
   const title = buildTitle({ title: tNav('aiCodingLandscape') })
   const description = tNav('aiCodingLandscapeDesc')
 
-  return {
+  return generateStaticPageMetadata({
+    locale: locale as Locale,
+    basePath: 'ai-coding-landscape',
     title,
     description,
     keywords:
       'AI coding ecosystem, AI development landscape, AI tools, coding tools visualization, vendor comparison, product matrix',
-    alternates: {
-      canonical: canonicalPath,
-      languages: {
-        en: '/ai-coding-landscape',
-        'zh-Hans': '/zh-Hans/ai-coding-landscape',
-      },
-    },
-    openGraph: buildOpenGraph({
-      title: tNav('aiCodingLandscape'),
-      description,
-      url: buildCanonicalUrl({ path: canonicalPath, locale }),
-      locale,
-      type: 'website',
-    }),
-    twitter: buildTwitterCard({
-      title: tNav('aiCodingLandscape'),
-      description,
-    }),
-  }
+    ogType: 'website',
+  })
 }
 
 type Props = {

src/app/[locale]/ai-coding-stack/page.tsx

@@ -2,48 +2,30 @@ import { getTranslations } from 'next-intl/server'
 import Footer from '@/components/Footer'
 import Header from '@/components/Header'
 import PageHeader from '@/components/PageHeader'
+import type { Locale } from '@/i18n/config'
 import { Link } from '@/i18n/navigation'
-import { buildCanonicalUrl, buildOpenGraph, buildTitle, buildTwitterCard } from '@/lib/metadata'
+import { buildTitle, generateStaticPageMetadata } from '@/lib/metadata'
+import type { LocalePageProps } from '@/types/locale'
 
-export async function generateMetadata({ params }: { params: Promise<{ locale: string }> }) {
+export async function generateMetadata({ params }: LocalePageProps) {
   const { locale } = await params
   const t = await getTranslations({ locale, namespace: 'pages.overview' })
 
-  const canonicalPath = locale === 'en' ? '/ai-coding-stack' : `/${locale}/ai-coding-stack`
   const title = buildTitle({ title: t('title') })
   const description = t('subtitle')
 
-  return {
+  return generateStaticPageMetadata({
+    locale: locale as Locale,
+    basePath: 'ai-coding-stack',
     title,
     description,
     keywords:
       'AI Coding Stack, AI development tools, AI IDE, AI CLI, LLM models, AI coding ecosystem',
-    alternates: {
-      canonical: canonicalPath,
-      languages: {
-        en: '/ai-coding-stack',
-        'zh-Hans': '/zh-Hans/ai-coding-stack',
-      },
-    },
-    openGraph: buildOpenGraph({
-      title: t('title'),
-      description,
-      url: buildCanonicalUrl({ path: canonicalPath, locale }),
-      locale,
-      type: 'website',
-    }),
-    twitter: buildTwitterCard({
-      title: t('title'),
-      description,
-    }),
-  }
+    ogType: 'website',
+  })
 }
 
-type Props = {
-  params: Promise<{ locale: string }>
-}
-
-export default async function AICodingStackPage({ params }: Props) {
+export default async function AICodingStackPage({ params }: LocalePageProps) {
   const { locale } = await params
   const t = await getTranslations({ locale, namespace: 'pages.overview' })
 

src/app/[locale]/articles/page.tsx

@@ -2,41 +2,26 @@ import { getTranslations } from 'next-intl/server'
 import Footer from '@/components/Footer'
 import Header from '@/components/Header'
 import PageHeader from '@/components/PageHeader'
+import type { Locale } from '@/i18n/config'
 import { Link } from '@/i18n/navigation'
 import { getArticles } from '@/lib/generated/articles'
-import { buildCanonicalUrl, buildOpenGraph, buildTitle, buildTwitterCard } from '@/lib/metadata'
+import { buildTitle, generateStaticPageMetadata } from '@/lib/metadata'
 
 export async function generateMetadata({ params }: { params: Promise<{ locale: string }> }) {
   const { locale } = await params
   const t = await getTranslations({ locale, namespace: 'pages.articles' })
 
-  const canonicalPath = locale === 'en' ? '/articles' : `/${locale}/articles`
   const title = buildTitle({ title: `${t('title')} - AI Coding Insights & Tutorials` })
   const description = t('subtitle')
 
-  return {
+  return generateStaticPageMetadata({
+    locale: locale as Locale,
+    basePath: 'articles',
     title,
     description,
     keywords: t('keywords'),
-    alternates: {
-      canonical: canonicalPath,
-      languages: {
-        en: '/articles',
-        'zh-Hans': '/zh-Hans/articles',
-      },
-    },
-    openGraph: buildOpenGraph({
-      title: `${t('title')} - AI Coding Insights & Tutorials`,
-      description,
-      url: buildCanonicalUrl({ path: canonicalPath, locale }),
-      locale,
-      type: 'website',
-    }),
-    twitter: buildTwitterCard({
-      title: `${t('title')} - AI Coding Insights & Tutorials`,
-      description,
-    }),
-  }
+    ogType: 'website',
+  })
 }
 
 type Props = {

src/app/[locale]/clis/[slug]/page.tsx

@@ -15,7 +15,6 @@ import { getGithubStars } from '@/lib/generated/github-stars'
 import { translateLicenseText } from '@/lib/license'
 import { generateSoftwareDetailMetadata } from '@/lib/metadata'
 import { generateSoftwareDetailSchema } from '@/lib/metadata/schemas'
-import { transformCommunityUrls, transformResourceUrls } from '@/lib/product-utils'
 
 export const revalidate = 3600
 
@@ -71,13 +70,11 @@ export default async function CLIPage({
   const t = await getTranslations({ locale, namespace: 'pages.cliDetail' })
   const tGlobal = await getTranslations({ locale })
 
-  // Transform URLs
+  // Transform URLs for component props
   const websiteUrl = cli.websiteUrl || cli.resourceUrls?.download || undefined
   const docsUrl = cli.docsUrl || undefined
   const downloadUrl = cli.resourceUrls?.download || undefined
-
-  const resourceUrls = transformResourceUrls(cli.resourceUrls)
-  const communityUrls = transformCommunityUrls(cli.communityUrls)
+  const pricingUrl = cli.resourceUrls?.pricing ?? undefined
 
   // Generate JSON-LD schema
   const schema = await generateSoftwareDetailSchema({
@@ -138,9 +135,9 @@ export default async function CLIPage({
 
       {relatedProducts.length > 0 && <RelatedProducts products={relatedProducts} />}
 
-      <ProductPricing pricing={cli.pricing} pricingUrl={resourceUrls.pricing} />
+      <ProductPricing pricing={cli.pricing} pricingUrl={pricingUrl} />
 
-      <ProductLinks resourceUrls={resourceUrls} communityUrls={communityUrls} />
+      <ProductLinks resourceUrls={cli.resourceUrls} communityUrls={cli.communityUrls} />
 
       <ProductCommands install={cli.installCommand} launch={cli.launchCommand} />
 

src/app/[locale]/curated-collections/page.tsx

@@ -4,48 +4,30 @@ import Header from '@/components/Header'
 import PageHeader from '@/components/PageHeader'
 import CollectionSection from '@/components/product/CollectionSection'
 import CollectionScrollbar from '@/components/sidebar/CollectionScrollbar'
+import type { Locale } from '@/i18n/config'
 import { getCollectionSectionIds, getCollections } from '@/lib/collections'
-import { buildCanonicalUrl, buildOpenGraph, buildTitle, buildTwitterCard } from '@/lib/metadata'
+import { buildTitle, generateStaticPageMetadata } from '@/lib/metadata'
+import type { LocalePageProps } from '@/types/locale'
 
-export async function generateMetadata({ params }: { params: Promise<{ locale: string }> }) {
+export async function generateMetadata({ params }: LocalePageProps) {
   const { locale } = await params
   const t = await getTranslations({ locale, namespace: 'pages.curatedCollections' })
 
-  const canonicalPath = locale === 'en' ? '/curated-collections' : `/${locale}/curated-collections`
   const title = buildTitle({ title: `${t('title')} - AI Coding Specs, Protocols & Tools` })
   const description = t('subtitle')
 
-  return {
+  return generateStaticPageMetadata({
+    locale: locale as Locale,
+    basePath: 'curated-collections',
     title,
     description,
     keywords:
       'AI coding resources, MCP protocol, Agent2Agent, development standards, AI coding articles, semantic versioning, conventional commits',
-    alternates: {
-      canonical: canonicalPath,
-      languages: {
-        en: '/curated-collections',
-        'zh-Hans': '/zh-Hans/curated-collections',
-      },
-    },
-    openGraph: buildOpenGraph({
-      title: `${t('title')} - AI Coding Specs, Protocols & Tools`,
-      description,
-      url: buildCanonicalUrl({ path: canonicalPath, locale }),
-      locale,
-      type: 'website',
-    }),
-    twitter: buildTwitterCard({
-      title: `${t('title')} - AI Coding Specs, Protocols & Tools`,
-      description,
-    }),
-  }
+    ogType: 'website',
+  })
 }
 
-type Props = {
-  params: Promise<{ locale: string }>
-}
-
-export default async function CuratedCollectionsPage({ params }: Props) {
+export default async function CuratedCollectionsPage({ params }: LocalePageProps) {
   const { locale } = await params
   const t = await getTranslations({ locale, namespace: 'pages.curatedCollections' })
   const collections = getCollections(locale)

src/app/[locale]/docs/page.tsx

@@ -2,8 +2,9 @@ import { getTranslations } from 'next-intl/server'
 import Footer from '@/components/Footer'
 import Header from '@/components/Header'
 import DocsSidebar from '@/components/sidebar/DocsSidebar'
+import type { Locale } from '@/i18n/config'
 import { getDocComponent, getDocSections } from '@/lib/generated/docs'
-import { buildCanonicalUrl, buildOpenGraph, buildTitle, buildTwitterCard } from '@/lib/metadata'
+import { buildTitle, generateStaticPageMetadata } from '@/lib/metadata'
 
 type Props = {
   params: Promise<{ locale: string }>
@@ -13,33 +14,17 @@ export async function generateMetadata({ params }: { params: Promise<{ locale: s
   const { locale } = await params
   const t = await getTranslations({ locale, namespace: 'pages.docs' })
 
-  const canonicalPath = locale === 'en' ? '/docs' : `/${locale}/docs`
   const title = buildTitle({ title: t('title') })
   const description = t('subtitle')
 
-  return {
+  return generateStaticPageMetadata({
+    locale: locale as Locale,
+    basePath: 'docs',
     title,
     description,
     keywords: t('keywords'),
-    alternates: {
-      canonical: canonicalPath,
-      languages: {
-        en: '/docs',
-        'zh-Hans': '/zh-Hans/docs',
-      },
-    },
-    openGraph: buildOpenGraph({
-      title: t('title'),
-      description,
-      url: buildCanonicalUrl({ path: canonicalPath, locale }),
-      locale,
-      type: 'website',
-    }),
-    twitter: buildTwitterCard({
-      title: t('title'),
-      description,
-    }),
-  }
+    ogType: 'website',
+  })
 }
 
 export default async function DocsPage({ params }: Props) {

src/app/[locale]/extensions/[slug]/page.tsx

@@ -15,7 +15,6 @@ import { getGithubStars } from '@/lib/generated/github-stars'
 import { translateLicenseText } from '@/lib/license'
 import { generateSoftwareDetailMetadata } from '@/lib/metadata'
 import { generateSoftwareDetailSchema } from '@/lib/metadata/schemas'
-import { transformCommunityUrls, transformResourceUrls } from '@/lib/product-utils'
 
 export const revalidate = 3600
 
@@ -76,13 +75,11 @@ export default async function ExtensionPage({
   const t = await getTranslations({ locale, namespace: 'pages.extensionDetail' })
   const tGlobal = await getTranslations({ locale })
 
-  // Transform URLs
+  // Transform URLs for component props
   const websiteUrl = extension.websiteUrl || extension.resourceUrls?.download || undefined
   const docsUrl = extension.docsUrl || undefined
   const downloadUrl = extension.resourceUrls?.download || undefined
-
-  const resourceUrls = transformResourceUrls(extension.resourceUrls)
-  const communityUrls = transformCommunityUrls(extension.communityUrls)
+  const pricingUrl = extension.resourceUrls?.pricing ?? undefined
 
   // Generate JSON-LD schema
   const schema = await generateSoftwareDetailSchema({
@@ -158,9 +155,9 @@ export default async function ExtensionPage({
 
       {relatedProducts.length > 0 && <RelatedProducts products={relatedProducts} />}
 
-      <ProductPricing pricing={extension.pricing} pricingUrl={resourceUrls.pricing} />
+      <ProductPricing pricing={extension.pricing} pricingUrl={pricingUrl} />
 
-      <ProductLinks resourceUrls={resourceUrls} communityUrls={communityUrls} />
+      <ProductLinks resourceUrls={extension.resourceUrls} communityUrls={extension.communityUrls} />
 
       <ProductCommands install={extension.installCommand} launch={extension.launchCommand} />
 

src/app/[locale]/ides/[slug]/page.tsx

@@ -15,7 +15,6 @@ import { getGithubStars } from '@/lib/generated/github-stars'
 import { translateLicenseText } from '@/lib/license'
 import { generateSoftwareDetailMetadata } from '@/lib/metadata'
 import { generateSoftwareDetailSchema } from '@/lib/metadata/schemas'
-import { transformCommunityUrls, transformResourceUrls } from '@/lib/product-utils'
 
 export const revalidate = 3600
 
@@ -71,13 +70,11 @@ export default async function IDEPage({
   const t = await getTranslations({ locale, namespace: 'pages.ideDetail' })
   const tGlobal = await getTranslations({ locale })
 
-  // Transform URLs
+  // Transform URLs for component props
   const websiteUrl = ide.websiteUrl || ide.resourceUrls?.download || undefined
   const docsUrl = ide.docsUrl || undefined
   const downloadUrl = ide.resourceUrls?.download || undefined
-
-  const resourceUrls = transformResourceUrls(ide.resourceUrls)
-  const communityUrls = transformCommunityUrls(ide.communityUrls)
+  const pricingUrl = ide.resourceUrls?.pricing ?? undefined
 
   // Generate JSON-LD schema
   const schema = await generateSoftwareDetailSchema({
@@ -138,9 +135,9 @@ export default async function IDEPage({
 
       {relatedProducts.length > 0 && <RelatedProducts products={relatedProducts} />}
 
-      <ProductPricing pricing={ide.pricing} pricingUrl={resourceUrls.pricing} />
+      <ProductPricing pricing={ide.pricing} pricingUrl={pricingUrl} />
 
-      <ProductLinks resourceUrls={resourceUrls} communityUrls={communityUrls} />
+      <ProductLinks resourceUrls={ide.resourceUrls} communityUrls={ide.communityUrls} />
 
       <ProductCommands install={ide.installCommand} launch={ide.launchCommand} />
 

src/app/[locale]/ides/page.tsx

@@ -1,10 +1,11 @@
 import type { Locale } from '@/i18n/config'
 import { generateListPageMetadata } from '@/lib/metadata'
+import type { LocalePageProps } from '@/types/locale'
 import IDEsPageClient from './page.client'
 
 export const revalidate = 3600
 
-export async function generateMetadata({ params }: { params: Promise<{ locale: string }> }) {
+export async function generateMetadata({ params }: LocalePageProps) {
   const { locale } = await params
 
   return await generateListPageMetadata({
@@ -14,11 +15,7 @@ export async function generateMetadata({ params }: { params: Promise<{ locale: s
   })
 }
 
-type Props = {
-  params: Promise<{ locale: string }>
-}
-
-export default async function IDEsPage({ params }: Props) {
+export default async function IDEsPage({ params }: LocalePageProps) {
   const { locale } = await params
   return <IDEsPageClient locale={locale} />
 }