feat(catalog): link product pages to manifests

Author: ericyangpan

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

@@ -90,6 +90,7 @@ export default async function DesktopPage({
       <main className="max-w-8xl mx-auto px-[var(--spacing-md)]">
         <ProductHero
           name={desktop.name}
+          manifestId={desktop.id}
           description={desktop.description}
           vendor={desktop.vendor}
           category="DESKTOP"

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

@@ -130,6 +130,7 @@ export default async function ExtensionPage({
       <main className="max-w-8xl mx-auto px-[var(--spacing-md)]">
         <ProductHero
           name={extension.name}
+          manifestId={extension.id}
           description={extension.description}
           vendor={extension.vendor}
           category="EXTENSION"

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

@@ -110,6 +110,7 @@ export default async function IDEPage({
       <main className="max-w-8xl mx-auto px-[var(--spacing-md)]">
         <ProductHero
           name={ide.name}
+          manifestId={ide.id}
           description={ide.description}
           vendor={ide.vendor}
           category="IDE"

src/app/[locale]/model-providers/[slug]/page.tsx

@@ -83,6 +83,7 @@ export default async function ProviderPage({
       <main className="max-w-8xl mx-auto px-[var(--spacing-md)]">
         <ProductHero
           name={provider.name}
+          manifestId={provider.id}
           description={provider.description}
           category="PROVIDER"
           categoryLabel={tShared('categories.singular.modelProvider')}

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

@@ -119,6 +119,7 @@ export default async function ModelPage({
       <main className="max-w-8xl mx-auto px-[var(--spacing-md)]">
         <ProductHero
           name={model.name}
+          manifestId={model.id}
           description={
             <>
               {tShared('terms.by')}{' '}

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

@@ -144,6 +144,7 @@ export default async function VendorPage({
       <main className="max-w-8xl mx-auto px-[var(--spacing-md)]">
         <ProductHero
           name={vendor.name}
+          manifestId={vendor.id}
           description={vendor.description}
           category="VENDOR"
           categoryLabel={tShared('categories.singular.vendor')}

src/components/product/CLILandingPage.tsx

@@ -12,6 +12,7 @@ import type { ReactNode } from 'react'
 import { DeprecatedBadge } from '@/components/controls/DeprecatedBadge'
 import { VerifiedBadge } from '@/components/controls/VerifiedBadge'
 import { CLICommandPanel } from '@/components/product/CLICommandPanel'
+import { ManifestEditLink } from '@/components/product/ManifestEditLink'
 import { ProductPricing } from '@/components/product/ProductPricing'
 import { RelatedProducts, type RelatedProductsProps } from '@/components/product/RelatedProducts'
 import { Link } from '@/i18n/navigation'
@@ -120,9 +121,12 @@ export function CLILandingPage({
                 {cli.deprecated && <DeprecatedBadge size="sm" />}
               </div>
 
-              <h1 className="text-5xl md:text-6xl font-semibold tracking-[-0.05em] detail-page-h1 mb-[var(--spacing-md)]">
-                {cli.name}
-              </h1>
+              <div className="flex items-center gap-[var(--spacing-xs)] mb-[var(--spacing-md)]">
+                <h1 className="text-5xl md:text-6xl font-semibold tracking-[-0.05em] detail-page-h1">
+                  {cli.name}
+                </h1>
+                <ManifestEditLink category="CLI" manifestId={cli.id} />
+              </div>
               <p className="text-xl leading-relaxed font-medium max-w-2xl mb-[var(--spacing-sm)]">
                 {content.answer}
               </p>

src/components/product/ManifestEditLink.tsx

@@ -0,0 +1,26 @@
+import { Github } from 'lucide-react'
+import { useTranslations } from 'next-intl'
+import { getManifestEditUrl, type ManifestCategory } from '@/lib/manifest-source'
+
+export interface ManifestEditLinkProps {
+  category: ManifestCategory
+  manifestId: string
+}
+
+export function ManifestEditLink({ category, manifestId }: ManifestEditLinkProps) {
+  const tComponent = useTranslations('components.product')
+  const label = tComponent('productHero.editManifest')
+
+  return (
+    <a
+      href={getManifestEditUrl(category, manifestId)}
+      target="_blank"
+      rel="noopener noreferrer"
+      aria-label={label}
+      title={label}
+      className="inline-flex size-8 shrink-0 items-center justify-center text-[var(--color-text-muted)] hover:text-[var(--color-text)] transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-text)]"
+    >
+      <Github size={19} strokeWidth={1.6} aria-hidden="true" />
+    </a>
+  )
+}

src/components/product/ProductHero.tsx

@@ -2,16 +2,19 @@ import { useTranslations } from 'next-intl'
 import React from 'react'
 import { DeprecatedBadge } from '@/components/controls/DeprecatedBadge'
 import { VerifiedBadge } from '@/components/controls/VerifiedBadge'
+import { ManifestEditLink } from '@/components/product/ManifestEditLink'
 import { Link } from '@/i18n/navigation'
 import { renderLicense } from '@/lib/license'
+import type { ManifestCategory } from '@/lib/manifest-source'
 
 export interface ProductHeroProps {
   // Product identity
   name: string
   description: React.ReactNode
   vendor?: string
   vendorHref?: string
-  category: 'CLI' | 'IDE' | 'DESKTOP' | 'EXTENSION' | 'PROVIDER' | 'MODEL' | 'VENDOR'
+  category: ManifestCategory
+  manifestId: string
   categoryLabel?: string // Optional custom label for the badge
   verified?: boolean // Whether the product is verified
   deprecated?: boolean // Whether the entity has been superseded or is no longer recommended
@@ -63,6 +66,7 @@ export function ProductHero({
   vendor,
   vendorHref,
   category,
+  manifestId,
   categoryLabel,
   verified = false,
   deprecated = false,
@@ -103,6 +107,7 @@ export function ProductHero({
             <h1 className="text-5xl font-semibold tracking-[-0.04em] detail-page-h1">{name}</h1>
             {verified && <VerifiedBadge size="lg" />}
             {deprecated && <DeprecatedBadge size="lg" />}
+            <ManifestEditLink category={category} manifestId={manifestId} />
           </div>
           <div className="absolute bottom-0 right-0 translate-x-[calc(100%+1rem)]">
             <div className="px-[var(--spacing-xs)] py-[2px] text-xs text-[var(--color-text-muted)] border-[1.5px] border-double border-[var(--color-border-strong)] whitespace-nowrap">

src/lib/manifest-source.ts

@@ -0,0 +1,23 @@
+export type ManifestCategory =
+  | 'CLI'
+  | 'DESKTOP'
+  | 'EXTENSION'
+  | 'IDE'
+  | 'MODEL'
+  | 'PROVIDER'
+  | 'VENDOR'
+
+const manifestDirectories: Record<ManifestCategory, string> = {
+  CLI: 'clis',
+  DESKTOP: 'desktops',
+  EXTENSION: 'extensions',
+  IDE: 'ides',
+  MODEL: 'models',
+  PROVIDER: 'providers',
+  VENDOR: 'vendors',
+}
+
+export function getManifestEditUrl(category: ManifestCategory, manifestId: string): string {
+  const directory = manifestDirectories[category]
+  return `https://github.com/aicodingstack/aicodingstack.io/edit/main/manifests/${directory}/${encodeURIComponent(manifestId)}.json`
+}