Hmbown
dcf98dbbb9
FINISH-0.9.4 §0A Phase 1. The homepage, nav, footer, and layout were an
EN/ZH special case with a thin foreign fallback: English and Chinese copy
lived inline in the TSX behind isZh ternaries, and the eight routed partial
locales fell through to English for anything the dictionaries did not cover.
- HomeDict/ChromeDict extended to cover every visible homepage and shared
chrome string (chrome 51->52 keys, home 60->62).
- New web/lib/i18n/dictionaries/zh/{chrome,home}.ts, extracted faithfully
from the existing inline Chinese rather than retranslated.
- Real translations to exact key parity for ja, vi, ko, ru, uk, es, pt-BR
and id. {token} placeholders preserved; no sentence is concatenated
around a variable.
- Homepage, nav, footer and layout consume getHome(locale)/getChrome(locale)
for all ten locales. Every isZh/foreign user-copy branch on those surfaces
is deleted rather than left running alongside the new path.
- Footer link sets generate from the dictionaries via the new
web/lib/i18n/links.ts instead of hardcoded per-locale arrays.
Closes a real gap found on the way: app/[locale]/layout.tsx still carried an
isZh branch governing the skip-to-content link, which renders on every page
of every locale, and the home route's metadata title and description. Eight
locales were serving an English skip link and an English <title> behind
fully translated chrome.
Honesty: zh stays `shipped` because its first-class pages (install, FAQ,
community, contribute, models, runtime, roadmap, constitution) really are
translated — chrome alone never earns it, and config.ts now records that as
the reason. The other eight stay `partial` with a localized badge;
install/faq/community/contribute still fork on isZh, which is Phase 2 scope
and is exactly what keeps those locales partial.
Contract tests strengthened, not relaxed: public-copy and
public-surface-contract now assert the rendered contract and the EN
dictionary value instead of matching raw TSX strings, and the footer's
account-copy ban is asserted across all ten locales rather than the TSX alone.
Receipts, all exit 0: npm run prebuild, check:facts, check:locales,
check:docs, test, lint, build. Ten locales fetched from a dev server and the
markup inspected: no rendered dictionary keys; masthead, 深 seal,
ocean-framed codewhale-tui.png and the partial badge intact in every locale.
91 lines
2.8 KiB
TypeScript
91 lines
2.8 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* <ThemeToggle> — a compact Auto / Light / Dark control for the date strip.
|
|
*
|
|
* Dark mode is scoped to the /docs routes (see globals.css `.docs-theme`),
|
|
* so the toggle only renders while on a docs route — showing it site-wide
|
|
* would be a control that appears to do nothing on the marketing pages.
|
|
*
|
|
* "auto" removes the attribute and follows prefers-color-scheme; "light" and
|
|
* "dark" force the choice via `data-theme` on <html>. The choice persists to
|
|
* localStorage and is re-applied before paint by the inline script in the
|
|
* locale layout, so there is no theme flash on reload.
|
|
*/
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { usePathname } from "next/navigation";
|
|
import { fill } from "@/lib/i18n/dictionaries";
|
|
|
|
type Mode = "auto" | "light" | "dark";
|
|
const ORDER: Mode[] = ["auto", "light", "dark"];
|
|
const KEY = "cw-theme";
|
|
|
|
function apply(mode: Mode) {
|
|
const el = document.documentElement;
|
|
if (mode === "auto") el.removeAttribute("data-theme");
|
|
else el.setAttribute("data-theme", mode);
|
|
}
|
|
|
|
export function ThemeToggle({
|
|
autoLabel,
|
|
lightLabel,
|
|
darkLabel,
|
|
ariaTemplate,
|
|
titleLabel,
|
|
}: {
|
|
autoLabel: string;
|
|
lightLabel: string;
|
|
darkLabel: string;
|
|
/** "Docs theme: {mode} (click to cycle)" — interpolated with fill(). */
|
|
ariaTemplate: string;
|
|
titleLabel: string;
|
|
}) {
|
|
const pathname = usePathname();
|
|
const [mode, setMode] = useState<Mode>("auto");
|
|
const [mounted, setMounted] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setMounted(true);
|
|
const stored = (typeof localStorage !== "undefined" && localStorage.getItem(KEY)) as Mode | null;
|
|
if (stored && ORDER.includes(stored)) setMode(stored);
|
|
}, []);
|
|
|
|
const onDocs = /^\/[a-z]{2}\/docs(\/|$)/.test(pathname) || pathname.includes("/docs");
|
|
if (!onDocs) return null;
|
|
|
|
const cycle = () => {
|
|
const next = ORDER[(ORDER.indexOf(mode) + 1) % ORDER.length];
|
|
setMode(next);
|
|
try {
|
|
localStorage.setItem(KEY, next);
|
|
} catch {
|
|
/* private mode / storage disabled — the choice just won't persist */
|
|
}
|
|
apply(next);
|
|
};
|
|
|
|
const labels: Record<Mode, string> = {
|
|
auto: autoLabel,
|
|
light: lightLabel,
|
|
dark: darkLabel,
|
|
};
|
|
const glyph: Record<Mode, string> = { auto: "◐", light: "☀", dark: "☾" };
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={cycle}
|
|
className="inline-flex items-center gap-1.5 px-1.5 py-0.5 hairline-l hairline-r hairline-t hairline-b hover:text-indigo transition-colors"
|
|
aria-label={fill(ariaTemplate, { mode: labels[mode] })}
|
|
title={titleLabel}
|
|
suppressHydrationWarning
|
|
>
|
|
<span aria-hidden>{mounted ? glyph[mode] : glyph.auto}</span>
|
|
<span className="hidden sm:inline" suppressHydrationWarning>
|
|
{mounted ? labels[mode] : labels.auto}
|
|
</span>
|
|
</button>
|
|
);
|
|
}
|