Skip to content

Commit 28ca591

Browse files
ericyangpanclaude
ericyangpan
and
claude
committed
refactor(pages): remove redundant translation props and restructure layouts
- Wrap product detail sections in main container - Components now use useTranslations internally instead of translation props - Consolidate PlatformLinks into main layout - Simplify spacing and structure 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
1 parent 16e91a4 commit 28ca591

File tree

8 files changed

+218
-255
lines changed

8 files changed

+218
-255
lines changed

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

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -41,17 +41,15 @@ export default async function Page({ params }: Props) {
4141
return (
4242
<>
4343
<Header />
44-
<div className="max-w-8xl mx-auto px-[var(--spacing-md)] py-[var(--spacing-lg)]">
44+
<main className="max-w-8xl mx-auto px-[var(--spacing-md)] pt-[var(--spacing-lg)]">
4545
<PageHeader title={tNav('aiCodingLandscape')} subtitle={tNav('aiCodingLandscapeDesc')} />
4646

4747
{/* Vendor Matrix */}
48-
<VendorMatrix matrixData={matrixData} locale={locale} />
48+
<VendorMatrix matrixData={matrixData} />
4949

5050
{/* Back to Overview */}
51-
<div className="mt-[var(--spacing-xl)]">
52-
<BackToNavigation href="/ai-coding-stack" title={tOverview('overviewTitle')} />
53-
</div>
54-
</div>
51+
<BackToNavigation href="/ai-coding-stack" title={tOverview('overviewTitle')} />
52+
</main>
5553
<Footer />
5654
</>
5755
)

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

Lines changed: 30 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -33,43 +33,37 @@ export default async function AICodingStackPage({ params }: LocalePageProps) {
3333
<>
3434
<Header />
3535

36-
<div className="max-w-8xl mx-auto px-[var(--spacing-md)] py-[var(--spacing-lg)]">
37-
<main>
38-
<PageHeader title={t('title')} subtitle={t('subtitle')} />
36+
<main className="max-w-8xl mx-auto px-[var(--spacing-md)] py-[var(--spacing-lg)]">
37+
<PageHeader title={t('title')} subtitle={t('subtitle')} />
3938

40-
{/* Stacks Grid Section */}
41-
<section className="mb-[var(--spacing-xl)]">
42-
<div className="grid grid-cols-1 md:grid-cols-3 gap-[var(--spacing-md)]">
43-
{[
44-
{ key: 'ides', path: 'ides' },
45-
{ key: 'clis', path: 'clis' },
46-
{ key: 'extensions', path: 'extensions' },
47-
{ key: 'models', path: 'models' },
48-
{ key: 'modelProviders', path: 'model-providers' },
49-
{ key: 'vendors', path: 'vendors' },
50-
].map(stack => (
51-
<Link
52-
key={stack.key}
53-
href={`/${stack.path}`}
54-
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"
55-
>
56-
<div className="flex justify-between items-start mb-[var(--spacing-md)]">
57-
<h3 className="text-2xl font-semibold tracking-tight">
58-
{t(`${stack.key}.title`)}
59-
</h3>
60-
<span className="text-2xl text-[var(--color-text-muted)] group-hover:text-[var(--color-text)] group-hover:translate-x-1 transition-all">
61-
→
62-
</span>
63-
</div>
64-
<p className="text-sm leading-relaxed text-[var(--color-text-secondary)] font-light">
65-
{t(`${stack.key}.description`)}
66-
</p>
67-
</Link>
68-
))}
69-
</div>
70-
</section>
71-
</main>
72-
</div>
39+
{/* Stacks Grid */}
40+
<div className="grid grid-cols-1 md:grid-cols-3 gap-[var(--spacing-md)]">
41+
{[
42+
{ key: 'ides', path: 'ides' },
43+
{ key: 'clis', path: 'clis' },
44+
{ key: 'extensions', path: 'extensions' },
45+
{ key: 'models', path: 'models' },
46+
{ key: 'modelProviders', path: 'model-providers' },
47+
{ key: 'vendors', path: 'vendors' },
48+
].map(stack => (
49+
<Link
50+
key={stack.key}
51+
href={`/${stack.path}`}
52+
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"
53+
>
54+
<div className="flex justify-between items-start mb-[var(--spacing-md)]">
55+
<h3 className="text-2xl font-semibold tracking-tight">{t(`${stack.key}.title`)}</h3>
56+
<span className="text-2xl text-[var(--color-text-muted)] group-hover:text-[var(--color-text)] group-hover:translate-x-1 transition-all">
57+
→
58+
</span>
59+
</div>
60+
<p className="text-sm leading-relaxed text-[var(--color-text-secondary)] font-light">
61+
{t(`${stack.key}.description`)}
62+
</p>
63+
</Link>
64+
))}
65+
</div>
66+
</main>
7367

7468
<Footer />
7569
</>

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

Lines changed: 37 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -106,42 +106,43 @@ export default async function CLIPage({
106106
return (
107107
<PageLayout schema={schema}>
108108
<Breadcrumb items={breadcrumbItems} />
109-
110-
<ProductHero
111-
name={cli.name}
112-
description={cli.description}
113-
vendor={cli.vendor}
114-
category="CLI"
115-
categoryLabel={t('categoryLabel')}
116-
verified={cli.verified ?? false}
117-
latestVersion={cli.latestVersion}
118-
license={cli.license}
119-
githubStars={getGithubStars('clis', cli.id)}
120-
platforms={cli.platforms?.map(p => p.os)}
121-
websiteUrl={websiteUrl}
122-
docsUrl={docsUrl}
123-
downloadUrl={downloadUrl}
124-
labels={{
125-
vendor: t('vendor'),
126-
version: t('version'),
127-
license: t('license'),
128-
stars: t('stars'),
129-
platforms: t('platforms'),
130-
visitWebsite: t('visitWebsite'),
131-
documentation: t('documentation'),
132-
download: t('download'),
133-
}}
134-
/>
135-
136-
{relatedProducts.length > 0 && <RelatedProducts products={relatedProducts} />}
137-
138-
<ProductPricing pricing={cli.pricing} pricingUrl={pricingUrl} />
139-
140-
<ProductLinks resourceUrls={cli.resourceUrls} communityUrls={cli.communityUrls} />
141-
142-
<ProductCommands install={cli.installCommand} launch={cli.launchCommand} />
143-
144-
<BackToNavigation href="/clis" title={t('allCLIs')} />
109+
<main className="max-w-8xl mx-auto px-[var(--spacing-md)]">
110+
<ProductHero
111+
name={cli.name}
112+
description={cli.description}
113+
vendor={cli.vendor}
114+
category="CLI"
115+
categoryLabel={t('categoryLabel')}
116+
verified={cli.verified ?? false}
117+
latestVersion={cli.latestVersion}
118+
license={cli.license}
119+
githubStars={getGithubStars('clis', cli.id)}
120+
platforms={cli.platforms?.map(p => p.os)}
121+
websiteUrl={websiteUrl}
122+
docsUrl={docsUrl}
123+
downloadUrl={downloadUrl}
124+
labels={{
125+
vendor: t('vendor'),
126+
version: t('version'),
127+
license: t('license'),
128+
stars: t('stars'),
129+
platforms: t('platforms'),
130+
visitWebsite: t('visitWebsite'),
131+
documentation: t('documentation'),
132+
download: t('download'),
133+
}}
134+
/>
135+
136+
<RelatedProducts products={relatedProducts} />
137+
138+
<ProductPricing pricing={cli.pricing} pricingUrl={pricingUrl} />
139+
140+
<ProductLinks resourceUrls={cli.resourceUrls} communityUrls={cli.communityUrls} />
141+
142+
<ProductCommands install={cli.installCommand} launch={cli.launchCommand} />
143+
144+
<BackToNavigation href="/clis" title={t('allCLIs')} />
145+
</main>
145146
</PageLayout>
146147
)
147148
}

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

Lines changed: 39 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -128,40 +128,45 @@ export default async function ExtensionPage({
128128
<PageLayout schema={schema}>
129129
<Breadcrumb items={breadcrumbItems} />
130130

131-
<ProductHero
132-
name={extension.name}
133-
description={extension.description}
134-
vendor={extension.vendor}
135-
category="IDE"
136-
categoryLabel={t('categoryLabel')}
137-
verified={extension.verified ?? false}
138-
latestVersion={extension.latestVersion}
139-
license={extension.license}
140-
githubStars={getGithubStars('extensions', extension.id)}
141-
additionalInfo={additionalInfo}
142-
websiteUrl={websiteUrl}
143-
docsUrl={docsUrl}
144-
downloadUrl={downloadUrl}
145-
labels={{
146-
vendor: t('vendor'),
147-
version: t('version'),
148-
license: t('license'),
149-
stars: t('stars'),
150-
visitWebsite: t('visitWebsite'),
151-
documentation: t('documentation'),
152-
download: t('download'),
153-
}}
154-
/>
155-
156-
{relatedProducts.length > 0 && <RelatedProducts products={relatedProducts} />}
157-
158-
<ProductPricing pricing={extension.pricing} pricingUrl={pricingUrl} />
159-
160-
<ProductLinks resourceUrls={extension.resourceUrls} communityUrls={extension.communityUrls} />
161-
162-
<ProductCommands install={extension.installCommand} launch={extension.launchCommand} />
163-
164-
<BackToNavigation href="/extensions" title={t('allExtensions')} />
131+
<main className="max-w-8xl mx-auto px-[var(--spacing-md)]">
132+
<ProductHero
133+
name={extension.name}
134+
description={extension.description}
135+
vendor={extension.vendor}
136+
category="IDE"
137+
categoryLabel={t('categoryLabel')}
138+
verified={extension.verified ?? false}
139+
latestVersion={extension.latestVersion}
140+
license={extension.license}
141+
githubStars={getGithubStars('extensions', extension.id)}
142+
additionalInfo={additionalInfo}
143+
websiteUrl={websiteUrl}
144+
docsUrl={docsUrl}
145+
downloadUrl={downloadUrl}
146+
labels={{
147+
vendor: t('vendor'),
148+
version: t('version'),
149+
license: t('license'),
150+
stars: t('stars'),
151+
visitWebsite: t('visitWebsite'),
152+
documentation: t('documentation'),
153+
download: t('download'),
154+
}}
155+
/>
156+
157+
<RelatedProducts products={relatedProducts} />
158+
159+
<ProductPricing pricing={extension.pricing} pricingUrl={pricingUrl} />
160+
161+
<ProductLinks
162+
resourceUrls={extension.resourceUrls}
163+
communityUrls={extension.communityUrls}
164+
/>
165+
166+
<ProductCommands install={extension.installCommand} launch={extension.launchCommand} />
167+
168+
<BackToNavigation href="/extensions" title={t('allExtensions')} />
169+
</main>
165170
</PageLayout>
166171
)
167172
}

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

Lines changed: 37 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -107,41 +107,43 @@ export default async function IDEPage({
107107
<PageLayout schema={schema}>
108108
<Breadcrumb items={breadcrumbItems} />
109109

110-
<ProductHero
111-
name={ide.name}
112-
description={ide.description}
113-
vendor={ide.vendor}
114-
category="IDE"
115-
categoryLabel={t('categoryLabel')}
116-
verified={ide.verified ?? false}
117-
latestVersion={ide.latestVersion}
118-
license={ide.license}
119-
githubStars={getGithubStars('ides', ide.id)}
120-
platforms={ide.platforms?.map(p => p.os)}
121-
websiteUrl={websiteUrl}
122-
docsUrl={docsUrl}
123-
downloadUrl={downloadUrl}
124-
labels={{
125-
vendor: t('vendor'),
126-
version: t('version'),
127-
license: t('license'),
128-
stars: t('stars'),
129-
platforms: t('platforms'),
130-
visitWebsite: t('visitWebsite'),
131-
documentation: t('documentation'),
132-
download: t('download'),
133-
}}
134-
/>
135-
136-
{relatedProducts.length > 0 && <RelatedProducts products={relatedProducts} />}
137-
138-
<ProductPricing pricing={ide.pricing} pricingUrl={pricingUrl} />
139-
140-
<ProductLinks resourceUrls={ide.resourceUrls} communityUrls={ide.communityUrls} />
141-
142-
<ProductCommands install={ide.installCommand} launch={ide.launchCommand} />
143-
144-
<BackToNavigation href="/ides" title={t('allIDEs')} />
110+
<main className="max-w-8xl mx-auto px-[var(--spacing-md)]">
111+
<ProductHero
112+
name={ide.name}
113+
description={ide.description}
114+
vendor={ide.vendor}
115+
category="IDE"
116+
categoryLabel={t('categoryLabel')}
117+
verified={ide.verified ?? false}
118+
latestVersion={ide.latestVersion}
119+
license={ide.license}
120+
githubStars={getGithubStars('ides', ide.id)}
121+
platforms={ide.platforms?.map(p => p.os)}
122+
websiteUrl={websiteUrl}
123+
docsUrl={docsUrl}
124+
downloadUrl={downloadUrl}
125+
labels={{
126+
vendor: t('vendor'),
127+
version: t('version'),
128+
license: t('license'),
129+
stars: t('stars'),
130+
platforms: t('platforms'),
131+
visitWebsite: t('visitWebsite'),
132+
documentation: t('documentation'),
133+
download: t('download'),
134+
}}
135+
/>
136+
137+
<RelatedProducts products={relatedProducts} />
138+
139+
<ProductPricing pricing={ide.pricing} pricingUrl={pricingUrl} />
140+
141+
<ProductLinks resourceUrls={ide.resourceUrls} communityUrls={ide.communityUrls} />
142+
143+
<ProductCommands install={ide.installCommand} launch={ide.launchCommand} />
144+
145+
<BackToNavigation href="/ides" title={t('allIDEs')} />
146+
</main>
145147
</PageLayout>
146148
)
147149
}

‎src/app/[locale]/manifesto/page.tsx‎

Lines changed: 24 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -32,36 +32,32 @@ export default async function ManifestoPage({ params }: LocalePageProps) {
3232
<>
3333
<Header />
3434

35-
<div className="max-w-6xl mx-auto px-[var(--spacing-md)] pt-[var(--spacing-lg)]">
36-
<main>
37-
<PageHeader title={t('title')} subtitle={t('slogan')} />
35+
<main className="max-w-6xl mx-auto px-[var(--spacing-md)] pt-[var(--spacing-lg)]">
36+
<PageHeader title={t('title')} subtitle={t('slogan')} />
3837

39-
{/* Manifesto Content */}
40-
<section className="prose prose-neutral dark:prose-invert max-w-none mb-[var(--spacing-xl)]">
41-
<ManifestoContent />
42-
</section>
38+
{/* Manifesto Content */}
39+
<section className="prose prose-neutral dark:prose-invert max-w-none mb-[var(--spacing-xl)]">
40+
<ManifestoContent />
41+
</section>
4342

44-
{/* Explore AI Coding Stack Link */}
45-
<section className="mb-[var(--spacing-xl)]">
46-
<Link
47-
href="/ai-coding-stack"
48-
className="block border border-[var(--color-border)] p-[var(--spacing-md)] hover:border-[var(--color-border-strong)] transition-all hover:-translate-y-1 group"
49-
>
50-
<div className="flex items-center justify-between">
51-
<div>
52-
<h2 className="text-2xl font-semibold tracking-[-0.02em] mb-[var(--spacing-xs)]">
53-
{tStack('title')}
54-
</h2>
55-
<p className="text-sm text-[var(--color-text-secondary)]">{tStack('subtitle')}</p>
56-
</div>
57-
<span className="text-4xl text-[var(--color-text-muted)] group-hover:text-[var(--color-text)] group-hover:translate-x-2 transition-all">
58-
→
59-
</span>
60-
</div>
61-
</Link>
62-
</section>
63-
</main>
64-
</div>
43+
{/* Explore AI Coding Stack Link */}
44+
<Link
45+
href="/ai-coding-stack"
46+
className="block border border-[var(--color-border)] p-[var(--spacing-md)] hover:border-[var(--color-border-strong)] transition-all hover:-translate-y-1 group mb-[var(--spacing-xl)]"
47+
>
48+
<div className="flex items-center justify-between">
49+
<div>
50+
<h2 className="text-2xl font-semibold tracking-[-0.02em] mb-[var(--spacing-xs)]">
51+
{tStack('title')}
52+
</h2>
53+
<p className="text-sm text-[var(--color-text-secondary)]">{tStack('subtitle')}</p>
54+
</div>
55+
<span className="text-4xl text-[var(--color-text-muted)] group-hover:text-[var(--color-text)] group-hover:translate-x-2 transition-all">
56+
→
57+
</span>
58+
</div>
59+
</Link>
60+
</main>
6561

6662
<Footer />
6763
</>

0 commit comments

Comments
 (0)