Skip to content

web: sharpen EN copy, real nav icon buttons, native locale rewrites - #5289

Open
Hmbown wants to merge 1 commit into
mainfrom
web/copy-buttons-hanspacing
Open

web: sharpen EN copy, real nav icon buttons, native locale rewrites#5289
Hmbown wants to merge 1 commit into
mainfrom
web/copy-buttons-hanspacing

Conversation

@Hmbown

@Hmbown Hmbown commented Aug 8, 2026

Copy link
Copy Markdown
Owner

What

  • Nav alignment (排版没对齐): Han secondary labels now baseline-align with the Latin primaries (inline-flex items-baseline + matching leading-none) in nav-links.tsx.
  • Real brand buttons: GitHub mark SVG prepended to the star count; Discord text replaced with the Discord logo (icon-only, aria-label kept). New .site-discord-link bordered-button rule matching .site-github-link, plus shared .brand-mark sizing.
  • EN copy: hero/meta/footer sharpened around "Codewhale dives into the deep so you don't have to"; every "local-first" dropped for "any model, on your machine" (incl. the Fleet docs page and runtime page inline zh strings).
  • Native localizations, not MT: home.ts + chrome.ts rewritten natively in all nine non-English packs — zh, ja, ko, vi, ru, uk, es, id, pt-BR — mirroring the en structure and direction. The zh hero uses 「一入码门深似海,Codewhale 替你潜。」 per WeChat community feedback about MT-stiff copy.

Contract held

Same i18n keys everywhere; {brand}/{tag}/{count}/{date}/{mode}/{label}/{handle} tokens preserved; ru/uk script purity; seals and product names untouched.

Verification

npm ci && npm run prebuild && npm run check:facts && npm run check:docs && npm run check:locales && npm test (250/250) && npx eslint . && npx tsc --noEmit && npm run build — all green in the worktree.

Deploy stays manual via the web.yml workflow after merge.

No-Issue: website copy and nav polish from direct maintainer/community feedback (WeChat review of MT-stiff locale copy); no tracking issue.

Three fixes on the newspaper-ocean site:

- Nav: baseline-align the Han secondary labels with the Latin primary
  (inline-flex items-baseline + matching line-height), and give the
  masthead real brand buttons — GitHub mark before the star count,
  Discord logo icon-only — with a .site-discord-link rule matching
  .site-github-link and a shared .brand-mark size.
- EN copy: hero/meta/footer sharpened around "Codewhale dives into the
  deep so you don't have to"; every "local-first" claim dropped in
  favor of "any model, on your machine". heroIntro keeps the {brand}
  token the lede split and dictionary tests require.
- Locales: home/chrome rewritten natively in all nine non-English
  packs (zh, ja, ko, vi, ru, uk, es, id, pt-BR) instead of machine
  translation. zh hero uses the 一入码门深似海 allusion per community
  feedback. Key parity, template tokens, and ru/uk script purity all
  hold; check:locales and dictionaries.test.ts pass.

Verified: npm ci && prebuild && check:facts && check:docs &&
check:locales && vitest (250/250) && eslint && tsc --noEmit && build.

Agent-assisted (Kimi Code); copy reviewed against the en reference.
@cursor

cursor Bot commented Aug 8, 2026

Copy link
Copy Markdown

Bugbot is not enabled for your account, so this pull request was not reviewed.

Enable Bugbot in the Cursor dashboard to get automatic reviews on future PRs.

@claude

claude Bot commented Aug 8, 2026

Copy link
Copy Markdown
Contributor

Claude finished @Hmbown's task in 3m 40s —— View job


Review of PR #5289

  • Gather context (diff, CLAUDE.md/AGENTS.md rules)
  • Review nav/CSS changes (nav-links.tsx, nav.tsx, globals.css)
  • Review EN copy changes (home.ts, chrome.ts, docs/runtime pages)
  • Review native locale rewrites (9 locales × home.ts/chrome.ts) for token/structure integrity
  • Check types.ts change
  • Post final review

This PR is entirely in web/ (Next.js i18n site), not the Rust workspace, so I reviewed it as a web/content change: correctness first, then reuse/consistency and content precision.

Bug: duplicated "Codewhale" in the OG/social card

IDENTITY_PHRASE in web/lib/page-meta.ts:10-11 changed from "Dive into the deep so you don't have to — …" to "Codewhale dives into the deep so you don't have to — …" — it now includes the brand name itself.

But two call sites still prepend SITE_NAME in front of it:

  • web/lib/page-meta.ts:18alt: \${SITE_NAME} — ${IDENTITY_PHRASE}`(used as the default OG imagealtfor every locale/page viabuildPageMetadata`)
  • web/app/opengraph-image.tsx:4export const — ${IDENTITY_PHRASE}\;`

This renders as "Codewhale — Codewhale dives into the deep so you don't have to — any model, on your machine." — and the actual generated PNG (opengraph-image.tsx:47-58) visually stacks it too: a big "Codewhale" heading directly above body text that now starts with "Codewhale" again. This is the image/alt text shared across every locale and route (via OG_IMAGE/buildPageMetadata), so it's a live regression on every social share card, not just English.

page-meta.test.ts:48 won't catch this — it asserts against the same ${SITE_NAME} — ${IDENTITY_PHRASE} template expression, so it stays green regardless of what IDENTITY_PHRASE contains.

Fix: either drop "Codewhale" back out of IDENTITY_PHRASE (so it composes cleanly with SITE_NAME —), or stop prepending SITE_NAME at the two call sites since the phrase now carries the brand itself.

Fix this →

Minor / non-blocking

  • web/lib/i18n/dictionaries/es/chrome.ts:33dateLocale changed from "es" to "es-ES", but the file's own doc comment says this pack is "neutral (pan-Hispanic) Spanish." es-ES biases Intl date formatting toward Spain conventions; if neutrality matters here, es-419 (or leaving it locale-generic) would match the stated intent better than es-ES.
  • aria-label="Discord" on the new icon-only Discord button (web/components/nav.tsx:100) is hardcoded rather than sourced from the chrome dict like the other nav aria-labels (chrome.starsAria, etc.) — pre-existing pattern (the visible "Discord" text was already hardcoded English before this PR), so not a regression, just an inconsistency now that it's icon-only across all locales.
  • .paper-discord-badge (still applied in nav.tsx:99) has no matching CSS rule in globals.css — pre-existing dead class reference, not introduced by this PR.

Verified good

  • All nine locale rewrites (es, id, ja, ko, pt-BR, ru, uk, vi, zh) preserve every {brand}/{tag}/{count}/{date}/{mode}/{label}/{handle} interpolation token — diffed every changed line's token set against its predecessor and found no mismatches.
  • Nav baseline alignment (nav-links.tsx) and the new .site-discord-link/.brand-mark CSS are consistent with the existing .site-github-link/.paper-star-badge pattern; SVGs are aria-hidden with the label carried on the parent Link, which is correct.
  • Key parity and "local-first" removal look complete — grepped for lingering local-first/localized equivalents; the only remaining hits are in doc comments explicitly noting the old framing is gone, not live copy.

I wasn't able to install dependencies in this environment (no node_modules, and installing was out of scope for a review), so I didn't re-run npm test/tsc/eslint myself — I verified the above by reading the diff and tracing call sites directly instead.

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: b9f8c4df98

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread web/lib/page-meta.ts
/** The one-line product identity, used as the default OG image alt text. */
export const IDENTITY_PHRASE =
"Dive into the deep so you don't have to — any model, local-first.";
"Codewhale dives into the deep so you don't have to — any model, on your machine.";

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Remove the duplicated brand from OG image alt text

Because both OG_IMAGE.alt here and app/opengraph-image.tsx prepend SITE_NAME, adding “Codewhale” to IDENTITY_PHRASE makes every social-card alternative read Codewhale — Codewhale dives into the deep…. Screen-reader users encounter this duplicated label on every localized page; either keep the identity phrase brand-free or stop prepending the site name.

Useful? React with 👍 / 👎.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant