refactor: Extract content paths util (#1265)

Author: rschristian

src/components/content-region/index.jsx

@@ -15,7 +15,7 @@ const COMPONENTS = {
 			const url = new URL(props.href, location.origin);
 
 			const prefetchAndPreload = () => {
-				if (props.href.startsWith('/repl?code')) {
+				if (props.href.startsWith('/repl')) {
 					ReplPage.preload();
 					preloadRepl();
 				} else if (props.href.startsWith('/tutorial')) {

src/components/controllers/page.jsx

@@ -20,7 +20,7 @@ export function Page() {
 
 export function PageLayout() {
 	const { path } = useRoute();
-	const { html, meta } = useContent(path === '/' ? 'index' : path);
+	const { html, meta } = useContent(path);
 
 	return (
 		<div class={style.page}>

src/components/controllers/tutorial-page.jsx

@@ -20,8 +20,8 @@ export default function TutorialPage() {
 }
 
 function TutorialLayout() {
-	const { path, params } = useRoute();
-	const { html, meta } = useContent(!params.step ? '/tutorial/index' : path);
+	const { path } = useRoute();
+	const { html, meta } = useContent(path);
 
 	// Preload the next chapter
 	useEffect(() => {

src/components/header/index.jsx

@@ -213,25 +213,20 @@ const NavLink = ({ to, isOpen, route, ...props }) => {
 	}
 
 	const href = to.href || to.path;
-	const prefetchHref = href == '/tutorial'
-		? '/tutorial/index'
-		: href == '/'
-			? '/index'
-			: href;
 	const homeProps = to.href == '/' || to.path == '/'
 		? { onContextMenu: BrandingRedirect, 'aria-label': 'Home' }
 		: {};
 
 	const prefetchAndPreload = () => {
-		if (prefetchHref.startsWith('/repl')) {
+		if (href.startsWith('/repl')) {
 			ReplPage.preload();
 			preloadRepl();
-		} else if (prefetchHref.startsWith('/tutorial')) {
+		} else if (href.startsWith('/tutorial')) {
 			TutorialPage.preload();
 			preloadRepl();
 		}
 
-		prefetchContent(prefetchHref);
+		prefetchContent(href);
 	};
 
 	return (

src/lib/use-content.js

@@ -10,16 +10,29 @@ import {
 	CACHE
 } from './use-resource.js';
 
+/**
+ * Correct the few site paths that differ from the markdown file name/structure
+ *
+ * @param {string} path
+ * @returns {string}
+ */
+function getContentPath(path) {
+	if (path == '/') return '/index';
+	if (path == '/tutorial') return '/tutorial/index';
+	return path;
+}
+
 /**
  * @param {string} path
  * @returns {import('./../types.d.ts').ContentData}
  */
 export function useContent(path) {
 	const [lang] = useLanguage();
+	const contentPath = getContentPath(path);
 	/** @type {import('./../types.d.ts').ContentData} */
-	const { html, meta } = useResource(() => getContent([lang, path]), [
+	const { html, meta } = useResource(() => getContent([lang, contentPath]), [
 		lang,
-		path
+		contentPath
 	]);
 	useTitle(meta.title);
 	useDescription(meta.description || '');
@@ -32,9 +45,10 @@ export function useContent(path) {
  */
 export function prefetchContent(path) {
 	const lang = document.documentElement.lang;
-	const fetch = () => getContent([lang, path]);
+	const contentPath = getContentPath(path);
+	const fetch = () => getContent([lang, contentPath]);
 
-	const cacheKey = createCacheKey(fetch, [lang, path]);
+	const cacheKey = createCacheKey(fetch, [lang, contentPath]);
 	if (CACHE.has(cacheKey)) return;
 
 	setupCacheEntry(fetch, cacheKey);