junk: REVERT ME

Author: rschristian

src/components/controllers/page.jsx

@@ -9,7 +9,7 @@ import style from './style.module.css';
 // Supports generic pages like `/`, `/about/*`, `/blog`, etc.
 export function Page() {
 	const { path } = useRoute();
-	const isValidRoute = navRoutes[path];
+	const isValidRoute = true;
 
 	return (
 		<ErrorBoundary>

src/components/controllers/tutorial/index.jsx

@@ -13,10 +13,9 @@ 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 { MarkdownRegion } from '../markdown-region';
 import style from './style.module.css';
+import englishTranslations from '../../../locales/en.json';
 
 const resultHandlers = new Set();
 const realmHandlers = new Set();
@@ -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,11 @@ export function Tutorial({ html, meta }) {
 }
 
 function ButtonContainer({ meta, showCode, help }) {
-	const [lang] = useLanguage();
-
 	return (
 		<div class={style.buttonContainer}>
 			{meta.prev && (
 				<a class={style.prevButton} href={meta.prev}>
-					{config.i18n.previous[lang] || config.i18n.previous.en}
+					{englishTranslations.previous}
 				</a>
 			)}
 			{meta.solvable && (
@@ -233,16 +229,14 @@ function ButtonContainer({ meta, showCode, help }) {
 					disabled={!showCode}
 					title="Show solution to this example"
 				>
-					{config.i18n.tutorial.solve[lang] ||
-						config.i18n.tutorial.solve.en}
+					{englishTranslations.tutorial.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)
-					}
+						? englishTranslations.tutorial.begin
+						: englishTranslations.next}
 				</a>
 			)}
 		</div>

src/components/header/index.jsx

@@ -8,7 +8,11 @@ import ReleaseLink from './gh-version';
 import Corner from './corner';
 import { useOverlayToggle } from '../../lib/toggle-overlay';
 import { useLocation } from 'preact-iso';
-import { useLanguage, useTranslation, useNavTranslation } from '../../lib/i18n';
+import {
+	useLanguage,
+	useTranslation,
+	usePathTranslation
+} from '../../lib/i18n';
 import { prefetchContent } from '../../lib/use-content';
 import { ReplPage, TutorialPage, CodeEditor } from '../routes';
 
@@ -44,7 +48,7 @@ export default function Header() {
 
 function MainNav() {
 	const { path, route } = useLocation();
-	const about = useNavTranslation('/about');
+	const about = usePathTranslation('/about');
 
 	const brandingRedirect = e => {
 		e.preventDefault();
@@ -255,9 +259,13 @@ const prefetchAndPreload = href => {
 	prefetchContent(href);
 };
 
+/**
+ * @typedef {import('../../locales/en.json')} Translations
+ */
+
 /**
  * @typedef {Object} NavLinkProps
- * @property {string} props.href
+ * @property {keyof Translations['headerNav']} props.href
  * @property {string} [props.clsx]
  * @property {import('preact').ComponentChildren} [props.flair]
  * @property {boolean} [props.isOpen]
@@ -268,7 +276,7 @@ const prefetchAndPreload = href => {
  */
 function NavLink({ href, flair, clsx, isOpen, ...rest }) {
 	const { path } = useLocation();
-	const label = useNavTranslation(href);
+	const label = usePathTranslation(href);
 
 	return (
 		<a

src/components/sidebar/index.jsx

@@ -4,9 +4,9 @@ import SidebarNav from './sidebar-nav';
 import config from '../../config.json';
 import { useOverlayToggle } from '../../lib/toggle-overlay';
 import {
-	useLanguage,
-	getSidebarRouteName,
-	getHeaderRouteName
+	useLanguage
+	//getSidebarRouteName,
+	//getHeaderRouteName
 } from '../../lib/i18n';
 import style from './style.module.css';
 
@@ -21,26 +21,26 @@ export default function Sidebar() {
 	for (const item of config.docs[version]) {
 		if ('routes' in item) {
 			navItems.push({
-				text: getSidebarRouteName(item.name, lang),
+				text: '',
 				level: 2,
 				href: null,
 				routes: item.routes.map(nested => ({
-					text: getSidebarRouteName(nested.name, lang),
+					text: '',
 					level: 3,
 					href: `/guide/${version}${nested.path}`
 				}))
 			});
 		} else {
 			navItems.push({
-				text: getSidebarRouteName(item.name, lang),
+				text: '',
 				level: 2,
 				href: `/guide/${version}${item.path}`
 			});
 		}
 	}
 
 	// TODO: Is "Guide" really the best label for the button?
-	const mobileButtonLabel = getHeaderRouteName('guide', lang);
+	const mobileButtonLabel = '';
 
 	return (
 		<div class={style.wrapper} data-open={open}>

src/config.js

@@ -0,0 +1,81 @@
+/**
+ * @typedef {import('./locales/en.json')} Translations
+ */
+
+/**
+ * @type {Record<string, { label: keyof Translations['headerNav'] }>}
+ */
+export const headerNav = {
+	'/': {
+		label: 'home'
+	},
+	'/tutorial': {
+		label: 'tutorial'
+	},
+	'/guide/v10/getting-started': {
+		label: 'guide'
+	},
+	'/about': {
+		label: 'about'
+	},
+	'/about/we-are-using': {
+		label: 'weAreUsing'
+	},
+	'/about/libraries-addons': {
+		label: 'librariesAddons'
+	},
+	'/about/demos-examples': {
+		label: 'demosExamples'
+	},
+	'/about/project-goals': {
+		label: 'projectGoals'
+	},
+	'/about/browser-support': {
+		label: 'browserSupport'
+	},
+	'/blog': {
+		label: 'blog'
+	},
+	'/repl': {
+		label: 'repl'
+	}
+};
+
+/**
+ * @type {Record<string, { label: keyof Translations['tutorialPages'] }>}
+ */
+export const tutorialPages = {
+	'/tutorial': {
+		label: 'learnPreact'
+	},
+	'/tutorial/01-vdom': {
+		label: 'virtualDom'
+	},
+	'/tutorial/02-events': {
+		label: 'events'
+	},
+	'/tutorial/03-components': {
+		label: 'components'
+	},
+	'/tutorial/04-state': {
+		label: 'state'
+	},
+	'/tutorial/05-refs': {
+		label: 'refs'
+	},
+	'/tutorial/06-context': {
+		label: 'context'
+	},
+	'/tutorial/07-side-effects': {
+		label: 'sideEffects'
+	},
+	'/tutorial/08-keys': {
+		label: 'keys'
+	},
+	'/tutorial/09-error-handling': {
+		label: 'errorHandling'
+	},
+	'/tutorial/10-links': {
+		label: 'congratulations'
+	}
+};