refactor: Extract i18n out of nav definitions (#1347)

* refactor: Extract i18n out of nav definitions

* chore: Sort keys

* chore: Appease TS

* refactor: Flatten "/about" routes

* junk: REVERT ME

* refactor: Fix temporary translation hook standin

* junk: REVERT ME TOO - checking size

* refactor: Mostly works

* refactor: Simplify implementation

* refactor: Go back to Object.keys?

* refactor: Remove '/about' path as it does not actually exist

* refactor: Explicitly list all routes to prerender

Author: rschristian

jsconfig.json

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

plugins/generate-llms-txt.js

@@ -3,7 +3,8 @@ import fsSync from 'fs';
 import path from 'path';
 import { fileURLToPath } from 'url';
 import { parseFrontmatter, cleanReplComments } from '../src/lib/frontmatter.js';
-import { v10StructuredDocRoutes } from '../src/lib/route-utils.js';
+import { docPages } from '../src/route-config.js';
+import englishTranslations from '../src/locales/en.json';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -43,10 +44,10 @@ Preact is a fast, lightweight alternative to React that provides the same modern
 
 	let content = header;
 
-	for (const section of v10StructuredDocRoutes) {
-		content += `## ${section.name}\n\n`;
+	for (const section in docPages.v10) {
+		content += `## ${englishTranslations.sidebarSections[section]}\n\n`;
 
-		for (const route of section.routes) {
+		for (const route in docPages.v10[section]) {
 			const { filename, content: fileContent } = files.find(
 				file => file.filename === `${route.replace('/', '')}.md`
 			);

plugins/rss-feed.js

@@ -1,5 +1,6 @@
 import { Feed } from 'feed';
-import config from '../src/config.json';
+import { blogPosts } from '../src/route-config.js';
+import englishTranslations from '../src/locales/en.json';
 
 /**
  * @returns {import('vite').Plugin}
@@ -24,12 +25,14 @@ export function rssFeedPlugin() {
 				}
 			});
 
-			config.blog.forEach(post => {
+			Object.entries(blogPosts).map(([postPath, post]) => {
+				const postTranslation = englishTranslations.blogPosts[post.label];
+
 				feed.addItem({
-					title: post.name.en,
-					id: `https://preactjs.com${post.path}`,
-					link: `https://preactjs.com${post.path}`,
-					description: post.excerpt.en,
+					title: postTranslation.label,
+					id: `https://preactjs.com${postPath}`,
+					link: `https://preactjs.com${postPath}`,
+					description: postTranslation.excerpt,
 					date: new Date(post.date)
 				});
 			});

src/components/blog-overview/index.jsx

@@ -1,30 +1,28 @@
-import config from '../../config.json';
-import { useLanguage, useTranslation, getRouteName } from '../../lib/i18n';
+import { blogPosts } from '../../route-config.js';
+import { useTranslate } from '../../lib/i18n';
 import { Time } from '../time';
 import s from './style.module.css';
 
 export default function BlogOverview() {
-	const [lang] = useLanguage();
-	const continueReading = useTranslation('continueReading');
+	const translate = useTranslate();
 
 	return (
 		<div>
 			<div class={s.postList}>
-				{config.blog.map(post => {
-					const name = getRouteName(post, lang);
-					const excerpt = post.excerpt[lang] || post.excerpt.en;
+				{Object.entries(blogPosts).map(([postPath, post]) => {
+					const translatedBlog = translate('blogPosts', post.label);
 
 					return (
 						<article class={s.post}>
 							<div class={s.meta}>
 								<Time value={post.date} />
 							</div>
 							<h2 class={s.title}>
-								<a href={post.path}>{name}</a>
+								<a href={postPath}>{translatedBlog.label}</a>
 							</h2>
-							<p class={s.excerpt}>{excerpt}</p>
-							<a href={post.path} class="btn-small">
-								{continueReading} &rarr;
+							<p class={s.excerpt}>{translatedBlog.excerpt}</p>
+							<a href={postPath} class="btn-small">
+								{translate('i18n', 'continueReading')} &rarr;
 							</a>
 						</article>
 					);

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);