refactor: Extract i18n out of nav definitions

jsconfig.json

@@ -9,5 +9,6 @@
 		"noEmit": true,
 		"allowJs": true,
 		"checkJs": true
-	}
+	},
+	"exclude": ["node_modules", "build"]
 }

package.json

@@ -7,8 +7,8 @@
     "node": ">=20"
   },
   "scripts": {
-    "dev": "vite --port 8080",
-    "server": "vite preview --port 8080",
+    "serve:dev": "vite --port 3000",
+    "serve:prod": "vite preview --port 3000",
     "build": "vite build",
     "lint": "eslint src test",
     "format": "prettier --write \"{src,test}/**/*.{css,js,json}\"",

src/components/blog-overview/index.jsx

@@ -1,42 +1,55 @@
-import config from '../../config.json';
-import { useLanguage, useTranslation, getRouteName } from '../../lib/i18n';
+import { blogPosts } from '../../route-config.js';
+import { useTranslate, useBlogTranslate } from '../../lib/i18n';
 import { Time } from '../time';
 import { prefetchContent } from '../../lib/use-content';
 import { BlogPage } from '../routes.jsx';
 import s from './style.module.css';
 
 export default function BlogOverview() {
-	const [lang] = useLanguage();
-	const continueReading = useTranslation('continueReading');
+	const translate = useTranslate();
+	const translateBlog = useBlogTranslate();
 
-	return (
-		<div>
-			<div class={s.postList}>
-				{config.blog.map(post => {
-					const name = getRouteName(post, lang);
-					const excerpt = post.excerpt[lang] || post.excerpt.en;
+	const posts = [];
+	for (const post in blogPosts) {
+		const translatedBlog = translateBlog(
+			/** @type {keyof typeof blogPosts} */ (post)
+		);
+
+		const prefetchAndPreload = () => {
+			BlogPage.preload();
+			prefetchContent(post);
+		};
 
-					const prefetchAndPreload = () => {
-						BlogPage.preload();
-						prefetchContent(post.path);
-					};
+		posts.push(
+			<article class={s.post}>
+				<div class={s.meta}>
+					<Time value={blogPosts[post].date} />
+				</div>
+				<h2 class={s.title}>
+					<a
+						href={post}
+						onMouseOver={prefetchAndPreload}
+						onTouchStart={prefetchAndPreload}
+					>
+						{translatedBlog.label}
+					</a>
+				</h2>
+				<p class={s.excerpt}>{translatedBlog.excerpt}</p>
+				<a
+					href={post}
+					onMouseOver={prefetchAndPreload}
+					onTouchStart={prefetchAndPreload}
+					class="btn-small"
+				>
+					{translate('i18n', 'continueReading')} &rarr;
+				</a>
+			</article>
+		);
+	}
 
-					return (
-						<article class={s.post}>
-							<div class={s.meta}>
-								<Time value={post.date} />
-							</div>
-							<h2 class={s.title}>
-								<a href={post.path} onMouseOver={prefetchAndPreload} onTouchStart={prefetchAndPreload}>{name}</a>
-							</h2>
-							<p class={s.excerpt}>{excerpt}</p>
-							<a href={post.path} onMouseOver={prefetchAndPreload} onTouchStart={prefetchAndPreload} class="btn-small">
-								{continueReading} &rarr;
-							</a>
-						</article>
-					);
-				})}
-			</div>
+	return (
+		<div>
+			<div class={s.postList}>{posts}</div>
 		</div>
 	);
 }

src/components/content-region/index.jsx

@@ -2,7 +2,7 @@ import { useEffect } from 'preact/hooks';
 import Markup from 'preact-markup';
 import widgets from '../widgets';
 import style from './style.module.css';
-import { useTranslation } from '../../lib/i18n';
+import { useTranslate } from '../../lib/i18n';
 import { TocContext } from '../table-of-contents';
 import { prefetchContent } from '../../lib/use-content';
 import { ReplPage, TutorialPage, CodeEditor } from '../routes';
@@ -43,7 +43,7 @@ function SiblingNav({ route, lang, start }) {
 				? route.name[lang || 'en']
 				: route.name || route.title;
 	}
-	const label = useTranslation(start ? 'previous' : 'next');
+	const translate = useTranslate();
 
 	return (
 		<a class={style.nextLink} data-dir-end={!start} href={url}>
@@ -53,7 +53,9 @@ function SiblingNav({ route, lang, start }) {
 				<span class={style.nextTitle}>
 					<span class={style.nextTitleInner}>{title}</span>
 				</span>
-				<span class={style.nextUrl}>{label}</span>
+				<span class={style.nextUrl}>
+					{translate('i18n', start ? 'previousPage' : 'nextPage')}
+				</span>
 			</span>
 		</a>
 	);
@@ -73,7 +75,11 @@ export default function ContentRegion({ content, components, ...props }) {
 	}, [props.current]);
 
 	return (
-		<content-region name={props.current} data-page-nav={hasNav} can-edit={props.canEdit}>
+		<content-region
+			name={props.current}
+			data-page-nav={hasNav}
+			can-edit={props.canEdit}
+		>
 			{content && (
 				<TocContext.Provider value={{ toc: props.toc }}>
 					<Markup

src/components/controllers/blog-page.jsx

@@ -3,12 +3,12 @@ import { useContent } from '../../lib/use-content';
 import { NotFound } from './not-found';
 import { MarkdownRegion } from './markdown-region';
 import Footer from '../footer/index';
-import { blogRoutes } from '../../lib/route-utils';
+import { blogPosts } from '../../route-config.js';
 import style from './style.module.css';
 
 export default function BlogPage() {
 	const { slug } = useRoute().params;
-	const isValidRoute = blogRoutes[`/blog/${slug}`];
+	const isValidRoute = blogPosts[`/blog/${slug}`];
 
 	return (
 		<ErrorBoundary>

src/components/controllers/guide-page.jsx

@@ -1,20 +1,19 @@
 import { useState, useEffect } from 'preact/hooks';
 import { useRoute, ErrorBoundary } from 'preact-iso';
 import { useContent } from '../../lib/use-content';
-import { useLanguage } from '../../lib/i18n.jsx';
-import config from '../../config.json';
+import { useLanguageContext } from '../../lib/i18n.jsx';
 import { NotFound } from './not-found';
 import cx from '../../lib/cx';
 import { MarkdownRegion } from './markdown-region';
 import Sidebar from '../sidebar';
 import Footer from '../footer/index';
-import { docRoutes } from '../../lib/route-utils';
+import { flatDocPages } from '../../route-config.js';
 import { LATEST_MAJOR, PREVIEW_MAJOR } from '../doc-version';
 import style from './style.module.css';
 
 export function GuidePage() {
 	const { version, name } = useRoute().params;
-	const isValidRoute = docRoutes[version]['/' + name];
+	const isValidRoute = flatDocPages[version]['/' + name];
 
 	return (
 		<ErrorBoundary>
@@ -57,9 +56,7 @@ function OldDocsWarning() {
 	}
 
 	const outdatedVersion = version !== PREVIEW_MAJOR;
-	const latestExists = config.docs[LATEST_MAJOR].some(section =>
-		section.routes.some(route => route.path === '/' + name)
-	);
+	const latestExists = flatDocPages[LATEST_MAJOR]['/' + name];
 
 	return (
 		<div class={style.stickyWarning}>
@@ -93,7 +90,7 @@ const MAINTAINED_LANGUAGES = ['en', 'ru', 'zh'];
 function UnmaintainedTranslationWarning({ meta }) {
 	const { path, params } = useRoute();
 	const { name, version } = params;
-	const [lang, setLang] = useLanguage();
+	const { lang, setLang } = useLanguageContext();
 
 	if (
 		version !== LATEST_MAJOR ||

src/components/controllers/page.jsx

@@ -1,15 +1,15 @@
 import { useRoute, ErrorBoundary } from 'preact-iso';
-import { navRoutes } from '../../lib/route-utils';
 import { useContent } from '../../lib/use-content';
 import { NotFound } from './not-found';
 import { MarkdownRegion } from './markdown-region';
 import Footer from '../footer/index';
 import style from './style.module.css';
+import { headerNav } from '../../route-config.js';
 
 // Supports generic pages like `/`, `/about/*`, `/blog`, etc.
 export function Page() {
 	const { path } = useRoute();
-	const isValidRoute = navRoutes[path];
+	const isValidRoute = headerNav[path];
 
 	return (
 		<ErrorBoundary>

src/components/controllers/tutorial-page.jsx

@@ -4,13 +4,13 @@ import { Tutorial } from './tutorial';
 import { SolutionProvider } from './tutorial/contexts';
 import { NotFound } from './not-found';
 import { useContent, prefetchContent } from '../../lib/use-content';
-import { tutorialRoutes } from '../../lib/route-utils';
+import { tutorialPages } from '../../route-config.js';
 
 import style from './tutorial/style.module.css';
 
 export default function TutorialPage() {
 	const { step } = useRoute().params;
-	const isValidRoute = tutorialRoutes[`/tutorial${step ? `/${step}` : ''}`];
+	const isValidRoute = tutorialPages[`/tutorial${step ? `/${step}` : ''}`];
 
 	return (
 		<ErrorBoundary>

src/components/controllers/tutorial/index.jsx

@@ -13,8 +13,7 @@ import { TutorialContext, SolutionContext } from './contexts';
 import { parseStackTrace } from '../repl/errors';
 import cx from '../../../lib/cx';
 import { CodeEditor, Runner, ErrorOverlay, Splitter } from '../../routes';
-import { useLanguage } from '../../../lib/i18n';
-import config from '../../../config.json';
+import { useTranslate } from '../../../lib/i18n.jsx';
 import { MarkdownRegion } from '../markdown-region';
 import style from './style.module.css';
 
@@ -75,7 +74,6 @@ export function Tutorial({ html, meta }) {
 		return () => clearTimeout(delay);
 	}, [editorCode]);
 
-
 	const useResult = fn => {
 		useEffect(() => {
 			resultHandlers.add(fn);
@@ -197,15 +195,15 @@ export function Tutorial({ html, meta }) {
 								components={TUTORIAL_COMPONENTS}
 							/>
 
-							{meta.tutorial?.setup &&
+							{meta.tutorial?.setup && (
 								<TutorialSetupBlock
 									code={meta.tutorial.setup}
 									runner={runner}
 									useResult={useResult}
 									useRealm={useRealm}
 									useError={useError}
 								/>
-							}
+							)}
 
 							<ButtonContainer meta={meta} showCode={showCode} help={help} />
 						</div>
@@ -217,13 +215,13 @@ export function Tutorial({ html, meta }) {
 }
 
 function ButtonContainer({ meta, showCode, help }) {
-	const [lang] = useLanguage();
+	const translate = useTranslate();
 
 	return (
 		<div class={style.buttonContainer}>
 			{meta.prev && (
 				<a class={style.prevButton} href={meta.prev}>
-					{config.i18n.previous[lang] || config.i18n.previous.en}
+					{translate('i18n', 'previousPage')}
 				</a>
 			)}
 			{meta.solvable && (
@@ -233,16 +231,14 @@ function ButtonContainer({ meta, showCode, help }) {
 					disabled={!showCode}
 					title="Show solution to this example"
 				>
-					{config.i18n.tutorial.solve[lang] ||
-						config.i18n.tutorial.solve.en}
+					{translate('i18n', 'solve')}
 				</button>
 			)}
 			{meta.next && (
 				<a class={style.nextButton} href={meta.next}>
 					{meta.code == false
-						? (config.i18n.tutorial.begin[lang] || config.i18n.tutorial.begin.en)
-						: (config.i18n.next[lang] || config.i18n.next.en)
-					}
+						? translate('i18n', 'beginTutorial')
+						: translate('i18n', 'nextPage')}
 				</a>
 			)}
 		</div>

src/components/doc-version/index.jsx

@@ -1,6 +1,6 @@
 import { useCallback } from 'preact/hooks';
 import { useLocation, useRoute } from 'preact-iso';
-import { docRoutes } from '../../lib/route-utils.js';
+import { flatDocPages } from '../../route-config.js';
 import style from './style.module.css';
 
 export const LATEST_MAJOR = 'v10';
@@ -18,7 +18,7 @@ export default function DocVersion() {
 	const onChange = useCallback(
 		e => {
 			const version = e.currentTarget.value;
-			const url = docRoutes[version]?.[`/${name}`]
+			const url = flatDocPages[version]?.[`/${name}`]
 				? path.replace(/(v\d{1,2})/, version)
 				: `/guide/${version}/getting-started`;
 			route(url);

src/components/edit-button/index.jsx

@@ -1,10 +1,10 @@
 import { useRoute } from 'preact-iso';
-import { useLanguage } from '../../lib/i18n';
+import { useLanguageContext } from '../../lib/i18n';
 import style from './style.module.css';
 
 export default function EditThisPage({ isFallback }) {
 	let { path } = useRoute();
-	const [lang] = useLanguage();
+	const { lang } = useLanguageContext();
 
 	path = !isFallback ? path + '.md' : '';
 	const editUrl = `https://github.com/preactjs/preact-www/tree/master/content/${lang}${path}`;

src/components/footer/index.jsx

@@ -1,6 +1,6 @@
 import { useCallback } from 'preact/hooks';
 import config from '../../config.json';
-import { useLanguage } from '../../lib/i18n';
+import { useLanguageContext } from '../../lib/i18n';
 import { useResource } from '../../lib/use-resource';
 import style from './style.module.css';
 
@@ -39,7 +39,7 @@ function useContributors() {
 
 export default function Footer() {
 	const contrib = useContributors();
-	const [lang, setLang] = useLanguage();
+	const { lang, setLang } = useLanguageContext();
 
 	const onSelect = useCallback(e => setLang(e.target.value), [setLang]);