junk: REVERT ME TOO - checking size

Author: rschristian

jsconfig.json

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

src/components/controllers/guide-page.jsx

@@ -8,13 +8,14 @@ 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 { flatv10DocPages } from '../../config.js';
+//import { docRoutes } from '../../lib/route-utils';
 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 = flatv10DocPages['/' + name];
 
 	return (
 		<ErrorBoundary>

src/components/header/search.jsx

@@ -65,14 +65,13 @@ const transformItems = items =>
 		});
 	});
 
+const getLoadingBar = () =>
+	typeof window !== 'undefined' ? document.querySelector('loading-bar') : null;
+
 export default function Search() {
 	const root = useRef(null);
 	const rendered = useRef(false);
 	const interactedWith = useRef(false);
-	const loadingBar =
-		typeof window !== 'undefined'
-			? document.querySelector('loading-bar')
-			: null;
 
 	const loadDocSearch = () => {
 		if (!rendered.current) {
@@ -91,7 +90,8 @@ export default function Search() {
 
 			waitForDocsearch(root.current).then(docsearchButton => {
 				rendered.current = true;
-				loadingBar.removeAttribute('showing');
+				const loadingBar = getLoadingBar();
+				if (loadingBar) loadingBar.removeAttribute('showing');
 				if (interactedWith.current) {
 					docsearchButton.click();
 				}
@@ -107,6 +107,7 @@ export default function Search() {
 			// The <loading-bar> is sat alongside the router & has it's state controlled by it,
 			// so while we could create a new context to be able to set it here, direct DOM
 			// manipulation is a heck of a lot simpler.
+			const loadingBar = getLoadingBar();
 			loadingBar.setAttribute('showing', 'true');
 		}
 	};

src/components/sidebar/index.jsx

@@ -1,44 +1,62 @@
 import { useRoute } from 'preact-iso';
 import DocVersion from '../doc-version';
 import SidebarNav from './sidebar-nav';
-import config from '../../config.json';
 import { useOverlayToggle } from '../../lib/toggle-overlay';
-import {
-	useLanguage
-	//getSidebarRouteName,
-	//getHeaderRouteName
-} from '../../lib/i18n';
+import { useLanguageContext, translatePath, reeee } from '../../lib/i18n';
+import { docPages } from '../../config.js';
 import style from './style.module.css';
 
 export default function Sidebar() {
 	const {
 		version
 	} = /** @type {{ version: 'v8' | 'v10' | 'v11' }} */ (useRoute().params);
-	const [lang] = useLanguage();
 	const [open, setOpen] = useOverlayToggle();
 
+	const { translations, fallback } = useLanguageContext();
+
 	const navItems = [];
-	for (const item of config.docs[version]) {
-		if ('routes' in item) {
-			navItems.push({
-				text: '',
-				level: 2,
-				href: null,
-				routes: item.routes.map(nested => ({
-					text: '',
+	if (version == 'v8') {
+	} else {
+		for (const page of docPages[version]) {
+			const routes = [];
+			for (const route in page.routes) {
+				routes.push({
+					text: translatePath(route, translations, fallback),
 					level: 3,
-					href: `/guide/${version}${nested.path}`
-				}))
-			});
-		} else {
+					href: `/guide/${version}${route}`
+				});
+			}
+
 			navItems.push({
-				text: '',
+				text: reeee(page.label, translations, fallback),
 				level: 2,
-				href: `/guide/${version}${item.path}`
+				href: null,
+				routes
 			});
 		}
 	}
 
+	//for (const item in docPages[version]) {
+	//	if ('routes' in item) {
+	//		navItems.push({
+	//			text: '',
+	//			level: 2,
+	//			href: null,
+	//			routes: item.routes.map(nested => ({
+	//				text: '',
+	//				level: 3,
+	//				href: `/guide/${version}${nested.path}`
+	//			}))
+	//		});
+	//	} else {
+	//		navItems.push({
+	//			text: '',
+	//			level: 2,
+	//			href: `/guide/${version}${item.path}`
+	//		});
+	//	}
+	//}
+
 	// TODO: Is "Guide" really the best label for the button?
 	const mobileButtonLabel = '';