refactor: consolidate product detail pages using shared template

Create ProductDetailTemplate to eliminate code duplication across product pages following DRY principle.

Template Features:
- Unified layout structure for all product types
- Shared Schema.org metadata generation
- Consistent breadcrumb and navigation patterns
- Reusable hero, links, pricing, and commands sections
- Type-safe product type handling

Pages Refactored:
- IDE detail pages: Reduced from ~200 to ~50 lines
- CLI detail pages: Reduced from ~200 to ~50 lines
- Extension detail pages: Reduced from ~200 to ~50 lines
- Model Provider detail pages: Enhanced with template
- Vendor detail pages: Enhanced with template

List Page Improvements:
- Consolidated platform icon rendering logic
- Shared filtering and sorting patterns
- Consistent empty state handling
- Open source rank page optimizations

Benefits:
- ~70% code reduction in detail pages
- Single source of truth for product page structure
- Easier maintenance and feature additions
- Consistent user experience across all product types
- Type-safe transformations with product-utils

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

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

Author: ericyangpan

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

@@ -1,20 +1,11 @@
 import { notFound } from 'next/navigation'
 import { getTranslations } from 'next-intl/server'
-import { BackToNavigation } from '@/components/controls/BackToNavigation'
-import { Breadcrumb } from '@/components/controls/Breadcrumb'
-import Footer from '@/components/Footer'
-import Header from '@/components/Header'
-import { JsonLd } from '@/components/JsonLd'
-import { ProductCommands, ProductHero, ProductLinks, ProductPricing } from '@/components/product'
 import type { Locale } from '@/i18n/config'
-import { Link } from '@/i18n/navigation'
 import { getCLI } from '@/lib/data/fetchers'
 import { clisData as clis } from '@/lib/generated'
-import { getGithubStars } from '@/lib/generated/github-stars'
 import { translateLicenseText } from '@/lib/license'
 import { generateSoftwareDetailMetadata } from '@/lib/metadata'
-import { generateSoftwareDetailSchema } from '@/lib/metadata/schemas'
-import type { ComponentCommunityUrls, ComponentResourceUrls } from '@/types/manifests'
+import { ProductDetailTemplate } from '@/templates'
 
 export const revalidate = 3600
 
@@ -70,73 +61,20 @@ export default async function CLIPage({
   const t = await getTranslations({ locale, namespace: 'pages.cliDetail' })
   const tGlobal = await getTranslations({ locale })
 
-  const websiteUrl = cli.resourceUrls?.download || cli.websiteUrl
-  const docsUrl = cli.docsUrl || undefined
-
-  // Transform resourceUrls to component format (convert null to undefined)
-  const resourceUrls: ComponentResourceUrls = {
-    download: cli.resourceUrls?.download || undefined,
-    changelog: cli.resourceUrls?.changelog || undefined,
-    pricing: cli.resourceUrls?.pricing || undefined,
-    mcp: cli.resourceUrls?.mcp || undefined,
-    issue: cli.resourceUrls?.issue || undefined,
-  }
-
-  // Transform communityUrls to component format (convert null to undefined)
-  const communityUrls: ComponentCommunityUrls = {
-    linkedin: cli.communityUrls?.linkedin || undefined,
-    twitter: cli.communityUrls?.twitter || undefined,
-    github: cli.communityUrls?.github || undefined,
-    youtube: cli.communityUrls?.youtube || undefined,
-    discord: cli.communityUrls?.discord || undefined,
-    reddit: cli.communityUrls?.reddit || undefined,
-  }
-
-  // Generate JSON-LD schema using the new unified system
-  const softwareApplicationSchema = await generateSoftwareDetailSchema({
-    product: {
-      name: cli.name,
-      description: cli.description,
-      vendor: cli.vendor,
-      websiteUrl,
-      downloadUrl: cli.resourceUrls?.download || undefined,
-      version: cli.latestVersion,
-      platforms: cli.platforms,
-      pricing: cli.pricing,
-      license: cli.license ? translateLicenseText(cli.license, tGlobal) : undefined,
-    },
-    category: 'clis',
-    locale: locale as Locale,
-  })
-
   return (
-    <>
-      <JsonLd data={softwareApplicationSchema} />
-      <Header />
-
-      <Breadcrumb
-        items={[
-          { name: tGlobal('shared.common.aiCodingStack'), href: '/ai-coding-stack' },
-          { name: tGlobal('shared.stacks.clis'), href: 'clis' },
-          { name: cli.name, href: `clis/${cli.id}` },
-        ]}
-      />
-
-      {/* Hero Section */}
-      <ProductHero
-        name={cli.name}
-        description={cli.description}
-        vendor={cli.vendor}
-        category="CLI"
-        categoryLabel={t('categoryLabel')}
-        latestVersion={cli.latestVersion}
-        license={cli.license}
-        githubStars={getGithubStars('clis', cli.id)}
-        platforms={cli.platforms?.map(p => p.os)}
-        websiteUrl={websiteUrl}
-        docsUrl={docsUrl}
-        downloadUrl={cli.resourceUrls?.download || undefined}
-        labels={{
+    <ProductDetailTemplate
+      product={cli}
+      productType="cli"
+      locale={locale as Locale}
+      category="clis"
+      translations={{
+        categoryLabel: t('categoryLabel'),
+        allProductsLabel: t('allCLIs'),
+        breadcrumbs: {
+          home: tGlobal('shared.common.aiCodingStack'),
+          category: tGlobal('shared.stacks.clis'),
+        },
+        productHero: {
           vendor: t('vendor'),
           version: t('version'),
           license: t('license'),
@@ -145,61 +83,8 @@ export default async function CLIPage({
           visitWebsite: t('visitWebsite'),
           documentation: t('documentation'),
           download: t('download'),
-        }}
-      />
-
-      {/* Related IDE */}
-      {cli.ide && (
-        <section className="py-[var(--spacing-lg)] border-b border-[var(--color-border)]">
-          <div className="max-w-8xl mx-auto px-[var(--spacing-md)]">
-            <Link
-              href={`ides/${cli.ide}`}
-              className="block border border-[var(--color-border)] p-[var(--spacing-md)] hover:border-[var(--color-border-strong)] transition-all hover:-translate-y-0.5 group"
-            >
-              <div className="flex items-center justify-between mb-[var(--spacing-sm)]">
-                <div className="flex items-center gap-[var(--spacing-sm)]">
-                  <pre className="text-xs leading-tight text-[var(--color-text-muted)]">
-                    {`┌─────┐
-│ IDE │
-└─────┘`}
-                  </pre>
-                  <div>
-                    <p className="text-xs text-[var(--color-text-muted)] uppercase tracking-wider font-medium mb-1">
-                      Related IDE
-                    </p>
-                    <h3 className="text-lg font-semibold tracking-tight">
-                      {cli.ide
-                        .split('-')
-                        .map(word => word.charAt(0).toUpperCase() + word.slice(1))
-                        .join(' ')}
-                    </h3>
-                  </div>
-                </div>
-                <span className="text-lg text-[var(--color-text-muted)] group-hover:text-[var(--color-text)] group-hover:translate-x-1 transition-all">
-                  →
-                </span>
-              </div>
-              <p className="text-sm text-[var(--color-text-secondary)] font-light">
-                IDE companion for {cli.name}
-              </p>
-            </Link>
-          </div>
-        </section>
-      )}
-
-      {/* Pricing */}
-      <ProductPricing pricing={cli.pricing} pricingUrl={resourceUrls.pricing} />
-
-      {/* Additional Links */}
-      <ProductLinks resourceUrls={resourceUrls} communityUrls={communityUrls} />
-
-      {/* Commands */}
-      <ProductCommands install={cli.install} launch={cli.launch} />
-
-      {/* Navigation */}
-      <BackToNavigation href="clis" title={t('allCLIs')} />
-
-      <Footer />
-    </>
+        },
+      }}
+    />
   )
 }

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

@@ -7,6 +7,7 @@ import Footer from '@/components/Footer'
 import Header from '@/components/Header'
 import StackTabs from '@/components/navigation/StackTabs'
 import PageHeader from '@/components/PageHeader'
+import { VerifiedBadge } from '@/components/VerifiedBadge'
 import type { Locale } from '@/i18n/config'
 import { Link } from '@/i18n/navigation'
 import { clisData } from '@/lib/generated'
@@ -138,7 +139,10 @@ export default function CLIsPageClient({ locale }: Props) {
                   className="block border border-[var(--color-border)] p-[var(--spacing-md)] hover:border-[var(--color-border-strong)] transition-all hover:-translate-y-0.5 group flex flex-col"
                 >
                   <div className="flex justify-between items-start mb-[var(--spacing-sm)]">
-                    <h3 className="text-lg font-semibold tracking-tight">{cli.name}</h3>
+                    <div className="flex items-center gap-[var(--spacing-xs)]">
+                      <h3 className="text-lg font-semibold tracking-tight">{cli.name}</h3>
+                      {cli.verified && <VerifiedBadge size="sm" />}
+                    </div>
                     <span className="text-lg text-[var(--color-text-muted)] group-hover:text-[var(--color-text)] group-hover:translate-x-1 transition-all">
                       →
                     </span>

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

@@ -1,18 +1,11 @@
 import { notFound } from 'next/navigation'
 import { getTranslations } from 'next-intl/server'
-import { BackToNavigation } from '@/components/controls/BackToNavigation'
-import { Breadcrumb } from '@/components/controls/Breadcrumb'
-import Footer from '@/components/Footer'
-import Header from '@/components/Header'
-import { JsonLd } from '@/components/JsonLd'
-import { ProductCommands, ProductHero, ProductLinks, ProductPricing } from '@/components/product'
 import type { Locale } from '@/i18n/config'
 import { getExtension } from '@/lib/data/fetchers'
 import { extensionsData as extensions } from '@/lib/generated'
-import { getGithubStars } from '@/lib/generated/github-stars'
 import { translateLicenseText } from '@/lib/license'
 import { generateSoftwareDetailMetadata } from '@/lib/metadata'
-import { getSchemaCurrency, getSchemaPrice } from '@/lib/pricing'
+import { ProductDetailTemplate } from '@/templates'
 
 export const revalidate = 3600
 
@@ -34,9 +27,13 @@ export async function generateMetadata({
     return { title: 'Extension Not Found | AI Coding Stack' }
   }
 
-  const t = await getTranslations({ locale })
-  const licenseStr = extension.license ? translateLicenseText(extension.license, t) : ''
-  const platforms = extension.supportedIdes?.map(ideSupport => ({ os: ideSupport.ideId }))
+  const tGlobal = await getTranslations({ locale })
+  const licenseStr = extension.license ? translateLicenseText(extension.license, tGlobal) : ''
+
+  // Convert supportedIdes to platforms format for metadata generation
+  const platforms = extension.supportedIdes?.map(ideSupport => ({
+    os: ideSupport.ideId,
+  }))
 
   return await generateSoftwareDetailMetadata({
     locale: locale as Locale,
@@ -50,7 +47,7 @@ export async function generateMetadata({
       pricing: extension.pricing,
       license: licenseStr,
     },
-    typeDescription: 'AI Coding Extension',
+    typeDescription: 'AI Coding Assistant Extension',
   })
 }
 
@@ -69,120 +66,30 @@ export default async function ExtensionPage({
   const t = await getTranslations({ locale, namespace: 'pages.extensionDetail' })
   const tGlobal = await getTranslations({ locale })
 
-  const websiteUrl = extension.resourceUrls?.download || extension.websiteUrl
-  const docsUrl = extension.docsUrl || undefined
-
-  // Schema.org structured data
-  const softwareApplicationSchema = {
-    '@context': 'https://schema.org',
-    '@type': 'SoftwareApplication',
-    name: extension.name,
-    applicationCategory: 'DeveloperApplication',
-    applicationSubCategory: 'AI Assistant',
-    operatingSystem: 'Cross-platform',
-    compatibleWith:
-      extension.supportedIdes?.map(ideSupport => ideSupport.ideId).join(', ') ||
-      'VS Code, JetBrains IDEs',
-    softwareVersion: extension.latestVersion,
-    description: extension.description,
-    url: websiteUrl,
-    downloadUrl:
-      extension.resourceUrls?.download || extension.supportedIdes?.[0]?.marketplaceUrl || undefined,
-    installUrl:
-      extension.resourceUrls?.download || extension.supportedIdes?.[0]?.marketplaceUrl || undefined,
-    author: {
-      '@type': 'Organization',
-      name: extension.vendor,
-    },
-    offers:
-      extension.pricing && extension.pricing.length > 0
-        ? extension.pricing.map(tier => {
-            return {
-              '@type': 'Offer',
-              name: tier.name,
-              price: getSchemaPrice(tier),
-              priceCurrency: getSchemaCurrency(tier),
-              category: tier.category,
-            }
-          })
-        : {
-            '@type': 'Offer',
-            price: '0',
-            priceCurrency: 'USD',
-          },
-    license: extension.license ? translateLicenseText(extension.license, tGlobal) : undefined,
-  }
-
   return (
-    <>
-      <JsonLd data={softwareApplicationSchema} />
-      <Header />
-
-      <Breadcrumb
-        items={[
-          { name: tGlobal('shared.common.aiCodingStack'), href: '/ai-coding-stack' },
-          { name: tGlobal('shared.stacks.extensions'), href: 'extensions' },
-          { name: extension.name, href: `extensions/${extension.id}` },
-        ]}
-      />
-
-      {/* Hero Section */}
-      <ProductHero
-        name={extension.name}
-        description={extension.description}
-        vendor={extension.vendor}
-        category="IDE"
-        categoryLabel={t('categoryLabel')}
-        latestVersion={extension.latestVersion}
-        license={extension.license}
-        githubStars={getGithubStars('extensions', extension.id)}
-        additionalInfo={
-          extension.supportedIdes && extension.supportedIdes.length > 0
-            ? [
-                {
-                  label: t('supportedIdes'),
-                  value: extension.supportedIdes.map(ideSupport => ideSupport.ideId).join(', '),
-                },
-              ]
-            : undefined
-        }
-        websiteUrl={websiteUrl}
-        docsUrl={docsUrl}
-        downloadUrl={
-          extension.resourceUrls?.download ||
-          extension.supportedIdes?.[0]?.marketplaceUrl ||
-          undefined
-        }
-        labels={{
+    <ProductDetailTemplate
+      product={extension}
+      productType="extension"
+      locale={locale as Locale}
+      category="extensions"
+      translations={{
+        categoryLabel: t('categoryLabel'),
+        allProductsLabel: t('allExtensions'),
+        breadcrumbs: {
+          home: tGlobal('shared.common.aiCodingStack'),
+          category: tGlobal('shared.stacks.extensions'),
+        },
+        productHero: {
           vendor: t('vendor'),
           version: t('version'),
           license: t('license'),
           stars: t('stars'),
+          supportedIdes: t('supportedIdes'),
           visitWebsite: t('visitWebsite'),
           documentation: t('documentation'),
           download: t('download'),
-        }}
-      />
-
-      {/* Pricing */}
-      <ProductPricing
-        pricing={extension.pricing}
-        pricingUrl={extension.resourceUrls?.pricing || undefined}
-      />
-
-      {/* Additional Links */}
-      <ProductLinks resourceUrls={{}} communityUrls={{}} />
-
-      {/* Commands */}
-      <ProductCommands
-        install={extension.supportedIdes?.[0]?.installCommand || extension.install || undefined}
-        launch={extension.launch || undefined}
-      />
-
-      {/* Navigation */}
-      <BackToNavigation href="extensions" title={t('allExtensions')} />
-
-      <Footer />
-    </>
+        },
+      }}
+    />
   )
 }

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

@@ -7,6 +7,7 @@ import Footer from '@/components/Footer'
 import Header from '@/components/Header'
 import StackTabs from '@/components/navigation/StackTabs'
 import PageHeader from '@/components/PageHeader'
+import { VerifiedBadge } from '@/components/VerifiedBadge'
 import type { Locale } from '@/i18n/config'
 import { Link } from '@/i18n/navigation'
 import { extensionsData } from '@/lib/generated'
@@ -141,7 +142,10 @@ export default function ExtensionsPageClient({ locale }: Props) {
                   className="block border border-[var(--color-border)] p-[var(--spacing-md)] hover:border-[var(--color-border-strong)] transition-all hover:-translate-y-0.5 group flex flex-col"
                 >
                   <div className="flex justify-between items-start mb-[var(--spacing-sm)]">
-                    <h3 className="text-lg font-semibold tracking-tight">{extension.name}</h3>
+                    <div className="flex items-center gap-[var(--spacing-xs)]">
+                      <h3 className="text-lg font-semibold tracking-tight">{extension.name}</h3>
+                      {extension.verified && <VerifiedBadge size="sm" />}
+                    </div>
                     <span className="text-lg text-[var(--color-text-muted)] group-hover:text-[var(--color-text)] group-hover:translate-x-1 transition-all">
                       →
                     </span>