Adapt links with current language; make dev server support URL params

This ensures that after navigating to another page the current language
is still active

Author: akudev

README_AUTHORS.md

@@ -30,15 +30,7 @@ in the root folder of this project once for the setup, then to actually run the
 npm start
 ```
 
-Then, open http://localhost:1337/README.md in your browser.
-
-Alternatively, and even easier, run 
-
-```sh
-npm run watch
-```
-
-And the browser will automatically open (on port 3000) and automatically reload on every saved change.
+Then, open http://localhost:1337/README.md in your browser and the browser will automatically open (on port 3000 or the next free port) and automatically reload on every saved change.
 
 
 ## Writing *one* document which covers both JavaScript and TypeScript without duplication

assets/js/custom.js

@@ -208,6 +208,27 @@ function replaceFileExtensions(lang) {
 	}
 }
 
+function updatePrevNextLinks(lang) {
+    const links = document.querySelectorAll('a[href$="README.md"], a[href$="/"], a[href$="README.md?lang=js"], a[href$="/?lang=js"]');
+    links.forEach(link => {
+		// Only handle relative links (not starting with http://, https://, or //)
+        if (/^(https?:)?\/\//.test(link.getAttribute("href"))) {
+            return;
+        }
+
+        let url = new URL(link.href, window.location.origin);
+
+        // Remove any existing lang param
+        url.searchParams.delete("lang");
+
+        if (lang === "js") {
+            url.searchParams.set("lang", "js");
+        }
+
+        link.href = url.pathname + url.search + url.hash;
+    });
+}
+
 // dynamic overall language switching
 
 function addLanguageSwitchButtons() {
@@ -236,6 +257,7 @@ function switchLanguage(newLang) {
 	replaceFileExtensions(lang);
 	resetCodeCoupleButtons();
 	updateAllCodeCouples(lang);
+	updatePrevNextLinks(lang);
 }
 
 function updateAllCodeCouples(globalLang) {
@@ -255,5 +277,6 @@ document.addEventListener("DOMContentLoaded", (event) => {
 		replaceFileExtensions(lang);
 		addLanguageSwitchButtons();
 		updateAllCodeCouples(lang);
+		updatePrevNextLinks(lang);
 	});
 });

tools/dev-server/server.js

@@ -44,9 +44,10 @@ app.use("/node_modules", express.static(join(cwd, "node_modules")));
 
 app.use(async (req, res, next) => {
 	let file, url;
-	if (req.url.endsWith("/")) {
+	const reqUrlWithoutParams = req.url.split("?")[0];
+	if (reqUrlWithoutParams.endsWith("/")) {
 		for (const index of ["index.md", "README.md"]) {
-			url = `${req.url}${index}`;
+			url = `${reqUrlWithoutParams}${index}`;
 			file = join(cwd, url);
 			if (existsSync(file) && statSync(file).isFile()) {
 				break;
@@ -55,7 +56,7 @@ app.use(async (req, res, next) => {
 			}
 		}
 	} else {
-		file = join(cwd, req.url);
+		file = join(cwd, reqUrlWithoutParams);
 		if (!(existsSync(file) && statSync(file).isFile())) {
 			file = undefined;
 		}
@@ -65,7 +66,7 @@ app.use(async (req, res, next) => {
 		const bodyContent = await convertMarkdown(md);
 		const templateFn = await getTemplate();
 		// get title as first line in the md file which starts with hashes, which indicates it is a title of some kind
-		const title = md.match(/^##* (.+)$/m)?.[1] || req.url;
+		const title = md.match(/^##* (.+)$/m)?.[1] || reqUrlWithoutParams;
 		const html = templateFn({ title, bodyContent });
 		res.send(html);
 	} else if (file) {