feat(registry): French i18n parity + per-component SEO MDX + SEO maximization#478
Open
bntvllnt wants to merge 7 commits into
Open
feat(registry): French i18n parity + per-component SEO MDX + SEO maximization#478bntvllnt wants to merge 7 commits into
bntvllnt wants to merge 7 commits into
Conversation
Rebased onto main and integrated with the new per-family landing pages (#464) and typography primitives (#465). Takes the registry from ~10% localized to full French parity, drift-guarded and E2E-verified. - next-intl wiring across every route + shared component (home/footer/forms/ header/landing, docs, philosophy, report/request, vs/*, releases, changelog, templates, themes + editor, design, build, components, families) — localized Link everywhere (no locale leak) - docs migrated to per-locale folders <slug>/{en,fr}.mdx with French translations - messages/{en,fr}.json: pages.*/shared.*/families.* namespaces, en/fr key-identical - new families landing pages localized; ComponentCard story-count localized; /ai now redirects to /families/ai so pages.ai retired - scripts/check-i18n.ts (`i18n:check`): message parity + MDX coverage + dead-namespace guard - e2e/i18n.spec.ts: every route x both locales, switcher, hreflang, real-French, fallback - llms-full.txt reads pages via the folder-aware loader - AGENTS.md: i18n architecture, gate, add-a-language recipe Data left English by design: component/family descriptions, family FAQ, design-guide body, demo-fixture previews, some SEO metadata/JSON-LD. Gates: i18n:check green, tsc clean, next build 0 errors, eslint clean, E2E 45/45. Closes #475
…ded sweep) A stricter multi-line + single-word-aware scan caught chrome an earlier pass missed (single-word button labels like "Copied!"/"Share"): - quick-add: Copy install command / Copied! / Add to v0.dev -> shared.quickAdd.* - share-embed-bar: Share/Embed/Copy link/Link copied!/embed dialog title+desc/ Copy embed code/share dialog title+desc -> shared.shareEmbed.* (platform names X/LinkedIn/Reddit/... kept as brands) - e2e: add /components/button (exercises these + storybook-embed) + /families routes Remaining hardcoded strings are intentional: demo-fixture previews, registry/ family data, SEO metadata + JSON-LD, brand names, literal paths, and the RSS <link> title (feed is English). i18n:check green, tsc clean, eslint clean, next build 0 errors, E2E 47/47.
Each component page becomes unique, localized, crawlable MDX that embeds the live kit — not a thin auto-generated shell — for maximum SEO. - lib/component-content.ts: loads content/components/<slug>/<locale>.mdx (en fallback) - components/component-mdx: kit bound to page data (<Preview>/<Install>/<Code>/<Stories>) - components/[slug]/page.tsx: renders the MDX via MDXContent (server-evaluated → crawlable prose + hydrated preview); SEO metadata (title/description/keywords) from MDX frontmatter; data-driven body kept as fallback - scripts/generate-component-mdx.ts (components:generate-mdx): scaffolds baseline en.mdx for all 313 from metadata (skips hand-authored) - scripts/verify-component-mdx.ts (components:verify-mdx): every component has en+fr with frontmatter title/description and a required <Preview> block - e2e/component-mdx.spec.ts: proves button renders authored prose + live preview, fr renders French (zero English) — 2/2 pass - content/components/*/en.mdx: 313 English pages; button hand-authored en+fr pilot Next: French fr.mdx for the remaining 312 (verifier enforces coverage). tsc clean, eslint clean, next build 0 errors, pilot E2E 2/2.
- 312 fr.mdx generated from French-translated descriptions (diacritic-stripped house style) + fixed French template; button hand-authored. All 313 components now have en+fr SEO pages. - build gate: `pnpm build` now runs i18n:check + components:verify-mdx before next build, so missing locales / missing <Preview> blocks fail CI. components:verify-mdx green (313 x 2, frontmatter + <Preview>), next build 0 errors, E2E: authored (button) + generated (accordion) render localized prose + live preview.
|
ntk preview
Built from |
…map, linking) Deep SEO review (3 audit dimensions + Lighthouse + web-vitals via agent-browser). Vitals are excellent (LCP 56-320ms, CLS 0, TTFB <14ms). Fixes: JSON-LD (answering "jsonld in component pages?"): - component pages now emit TechArticle + SoftwareSourceCode + BreadcrumbList, enriched with image (per-page OG), inLanguage, keywords (frontmatter), dateModified, mainEntityOfPage - all JSON-LD URLs + breadcrumb names localized (was advertising English URLs on /fr) - home page: SoftwareApplication node (product entity) On-page: - duplicate H1 fixed — stripped `# Title` from all 626 component MDX (page header is the sole h1; MDXContent rendered `#` as a 2nd h1); generator updated - "Related components" section (family siblings) — real in-content internal linking Technical SEO: - favicon (app/icon.svg) + apple-touch-icon (ImageResponse) + manifest icons + theme-color viewport (were all missing → blank SERP favicon) - sitemap: add /themes + /vs, drop the /docs/changelog redirect - playground pages canonicalize to the parent component (kill 626 dup pages) Verified: h1=1, enriched LD + localized /fr URLs + icons all present in built HTML; tsc/eslint/i18n:check/components:verify-mdx green; next build 0 errors.
… anchors Code review found merge-blockers (high blast radius, both locales): - component page h1/subtitle/breadcrumb/share/OG-image used English meta/aiSeo instead of the localized MDX frontmatter → /fr pages showed an English header above French prose. Now use articleTitle/articleDescription. - ToC "On This Page" anchors (installation/code/storybook) were dead — the MDX kit blocks had no ids. Added scroll-mt ids (preview/installation/code/ storybook) + localized ToC titles + a "related" entry, ordered to match render. - /themes generateMetadata was hardcoded English → pages.themes.metaTitle/ metaDescription, wired like every other page. - /docs index cards rendered English DOCS_PAGES titles/descriptions → now read each doc's localized MDX frontmatter. - verify-mdx now requires <Install>/<Code>/<Stories> blocks too, not just <Preview>. Verified in built HTML: /fr subtitle + /fr/docs cards + /fr/themes title are French; all ToC anchor ids present. tsc/eslint/i18n:check/verify-mdx green, next build 0 errors.
bntvllnt
changed the title
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #475
Closes #477
Consolidated PR (was stacked on #476; retargeted to
mainso full CI runs and itmerges in one action — #476 is superseded by this PR and can be closed).
Three cohesive bodies of work, each reviewed and verified:
1. Full French (fr) i18n parity
next-intl wiring across every route + shared component; docs migrated to per-locale
MDX;
messages/{en,fr}.jsonat parity; localizedLink(no locale leak); driftguard
scripts/check-i18n.ts(i18n:check);e2e/i18n.spec.ts.2. Per-component SEO MDX
content/components/<slug>/{en,fr}.mdx(626 files) rendered server-side viaMDXContent(crawlable prose + hydrated<Preview>/<Install>/<Code>/<Stories>kit); SEO frontmatter; generator +
components:verify-mdxbuild gate.3. SEO maximization
Component JSON-LD (TechArticle + SoftwareSourceCode + BreadcrumbList, enriched with
image/inLanguage/keywords/dateModified, localized URLs); home SoftwareApplication;
favicon + apple-icon + manifest icons + theme-color; sitemap fixes; playground
canonical→parent; "Related components" internal linking; single H1 per page.
Review fixes applied
Verification
tsc clean · eslint clean · i18n:check green · components:verify-mdx green (313×2) ·
next build 0 errors (1680 static pages) · E2E 49/49 · Lighthouse A11y 100 / BP 96 /
SEO 92 (localhost-canonical artifact; ~100 on prod) · web vitals LCP 56-320ms, CLS 0.
Note
French copy is diacritic-stripped throughout — matches the repo's pre-existing house
style (documented in AGENTS.md). Flag if you'd prefer accented French (a separate,
sitewide change incl. the pre-existing catalog).
https://claude.ai/code/session_018ktYZpgFmQbM2GrXF8GyBv