From 04447f4034ec649b41db96bec7adb598545fa953 Mon Sep 17 00:00:00 2001
From: vcoppe <vianney.coppe@gmail.com>
Date: Mon, 8 Jul 2024 23:22:37 +0200
Subject: [PATCH] rework links

---
 website/src/lib/components/Footer.svelte      |  6 ++--
 .../src/lib/components/LanguageSelect.svelte  |  5 ++--
 website/src/lib/components/Menu.svelte        |  7 ++---
 website/src/lib/components/Nav.svelte         | 20 +++----------
 website/src/lib/utils.ts                      | 28 +++++++++++++------
 website/src/routes/[...language]/+page.svelte |  6 ++--
 .../routes/[...language]/help/+layout.svelte  |  4 +--
 7 files changed, 37 insertions(+), 39 deletions(-)

diff --git a/website/src/lib/components/Footer.svelte b/website/src/lib/components/Footer.svelte
index 9dbf0c87..86bb80ee 100644
--- a/website/src/lib/components/Footer.svelte
+++ b/website/src/lib/components/Footer.svelte
@@ -28,7 +28,7 @@
 					<Button
 						variant="link"
 						class="h-6 px-0 text-muted-foreground"
-						href={getURLForLanguage('/[...language]', $locale)}
+						href={getURLForLanguage($locale, '/')}
 					>
 						<Home size="16" class="mr-1" />
 						{$_('homepage.home')}
@@ -36,7 +36,7 @@
 					<Button
 						variant="link"
 						class="h-6 px-0 text-muted-foreground"
-						href={getURLForLanguage('/[...language]/app', $locale)}
+						href={getURLForLanguage($locale, '/app')}
 					>
 						<Map size="16" class="mr-1" />
 						{$_('homepage.app')}
@@ -44,7 +44,7 @@
 					<Button
 						variant="link"
 						class="h-6 px-0 text-muted-foreground"
-						href={getURLForLanguage('/[...language]/help', $locale)}
+						href={getURLForLanguage($locale, '/help')}
 					>
 						<BookOpenText size="16" class="mr-1" />
 						{$_('menu.help')}
diff --git a/website/src/lib/components/LanguageSelect.svelte b/website/src/lib/components/LanguageSelect.svelte
index a0d33b44..e4311375 100644
--- a/website/src/lib/components/LanguageSelect.svelte
+++ b/website/src/lib/components/LanguageSelect.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { page } from '$app/stores';
 	import * as Select from '$lib/components/ui/select';
 	import { languages } from '$lib/languages';
 	import { getURLForLanguage } from '$lib/utils';
@@ -26,7 +25,7 @@
 	</Select.Trigger>
 	<Select.Content>
 		{#each Object.entries(languages) as [lang, label]}
-			<a href={getURLForLanguage($page.route.id, lang)}>
+			<a href={getURLForLanguage(lang)}>
 				<Select.Item value={lang}>{label}</Select.Item>
 			</a>
 		{/each}
@@ -36,7 +35,7 @@
 <!-- hidden links for svelte crawling -->
 <div class="hidden">
 	{#each Object.entries(languages) as [lang, label]}
-		<a href={getURLForLanguage($page.route.id, lang)}>
+		<a href={getURLForLanguage(lang)}>
 			{label}
 		</a>
 	{/each}
diff --git a/website/src/lib/components/Menu.svelte b/website/src/lib/components/Menu.svelte
index fb64a2b4..9cc79ebe 100644
--- a/website/src/lib/components/Menu.svelte
+++ b/website/src/lib/components/Menu.svelte
@@ -73,7 +73,6 @@
 	import { mode, setMode, systemPrefersMode } from 'mode-watcher';
 	import { _, locale } from 'svelte-i18n';
 	import { languages } from '$lib/languages';
-	import { page } from '$app/stores';
 	import { getURLForLanguage } from '$lib/utils';
 
 	const {
@@ -125,7 +124,7 @@
 	<div
 		class="w-fit flex flex-row items-center justify-center p-1 bg-background rounded-b-md md:rounded-md pointer-events-auto shadow-md"
 	>
-		<a href={getURLForLanguage('/[...language]', $locale)} target="_blank">
+		<a href={getURLForLanguage($locale, '/')} target="_blank">
 			<Logo class="h-5 mt-0.5 mx-2 md:hidden" iconOnly={true} />
 			<Logo class="h-5 mt-0.5 mx-2 hidden md:block" />
 		</a>
@@ -366,7 +365,7 @@
 						<Menubar.SubContent>
 							<Menubar.RadioGroup bind:value={$locale}>
 								{#each Object.entries(languages) as [lang, label]}
-									<a href={getURLForLanguage($page.route.id, lang)}>
+									<a href={getURLForLanguage(lang)}>
 										<Menubar.RadioItem value={lang}>{label}</Menubar.RadioItem>
 									</a>
 								{/each}
@@ -417,7 +416,7 @@
 		<div class="h-fit flex flex-row items-center ml-1 gap-1">
 			<Button
 				variant="ghost"
-				href={getURLForLanguage('/[...language]/help', $locale)}
+				href={getURLForLanguage($locale, '/help')}
 				target="_blank"
 				class="cursor-default h-fit rounded-sm px-3 py-0.5"
 			>
diff --git a/website/src/lib/components/Nav.svelte b/website/src/lib/components/Nav.svelte
index da1d7c0c..58e9ab4b 100644
--- a/website/src/lib/components/Nav.svelte
+++ b/website/src/lib/components/Nav.svelte
@@ -9,31 +9,19 @@
 
 <nav class="w-full sticky top-0 bg-background z-10">
 	<div class="mx-6 py-2 flex flex-row items-center border-b gap-4 md:gap-8">
-		<a href={getURLForLanguage('/[...language]', $locale)} class="shrink-0 translate-y-0.5">
+		<a href={getURLForLanguage($locale, '/')} class="shrink-0 translate-y-0.5">
 			<Logo class="h-8 sm:hidden" iconOnly={true} />
 			<Logo class="h-8 hidden sm:block" />
 		</a>
-		<Button
-			variant="link"
-			class="text-base px-0"
-			href={getURLForLanguage('/[...language]', $locale)}
-		>
+		<Button variant="link" class="text-base px-0" href={getURLForLanguage($locale, '/')}>
 			<Home size="18" class="mr-1.5" />
 			{$_('homepage.home')}
 		</Button>
-		<Button
-			variant="link"
-			class="text-base px-0"
-			href={getURLForLanguage('/[...language]/app', $locale)}
-		>
+		<Button variant="link" class="text-base px-0" href={getURLForLanguage($locale, '/app')}>
 			<Map size="18" class="mr-1.5" />
 			{$_('homepage.app')}
 		</Button>
-		<Button
-			variant="link"
-			class="text-base px-0"
-			href={getURLForLanguage('/[...language]/help', $locale)}
-		>
+		<Button variant="link" class="text-base px-0" href={getURLForLanguage($locale, '/help')}>
 			<BookOpenText size="18" class="mr-1.5" />
 			{$_('menu.help')}
 		</Button>
diff --git a/website/src/lib/utils.ts b/website/src/lib/utils.ts
index ca663954..1153718b 100644
--- a/website/src/lib/utils.ts
+++ b/website/src/lib/utils.ts
@@ -5,6 +5,8 @@ import type { TransitionConfig } from "svelte/transition";
 import { get } from "svelte/store";
 import { map } from "./stores";
 import { base } from "$app/paths";
+import { browser } from "$app/environment";
+import { languages } from "$lib/languages";
 
 export function cn(...inputs: ClassValue[]) {
     return twMerge(clsx(inputs));
@@ -92,16 +94,26 @@ export function setCrosshairCursor() {
     setCursor('crosshair');
 }
 
-export function getURLForLanguage(route: string | null, lang: string | null | undefined): string {
-    if (route === null) {
-        return base + '/';
+export function getURLForLanguage(lang: string | null | undefined, path?: string): string {
+    let newPath = path ?? (browser ? window.location.pathname : '');
+    let languageInPath = newPath.split('/')[1];
+    if (!languages.hasOwnProperty(languageInPath)) {
+        languageInPath = 'en';
     }
 
-    let url = route.replace('[...language]', (lang === null || lang === undefined) ? 'en' : lang).replace('/en', '');
-
-    if (url === '') {
-        return base + '/';
+    if (languageInPath === 'en') {
+        if (lang === 'en') {
+            return `${base}${newPath}`;
+        } else {
+            return `${base}/${lang}${newPath}`;
+        }
     } else {
-        return base + url;
+        if (lang === 'en') {
+            newPath = newPath.replace(`/${languageInPath}`, '');
+            return newPath === '' ? `${base}/` : `${base}${newPath}`;
+        } else {
+            newPath = newPath.replace(`/${languageInPath}`, `/${lang}`);
+            return `${base}${newPath}`;
+        }
     }
 }
\ No newline at end of file
diff --git a/website/src/routes/[...language]/+page.svelte b/website/src/routes/[...language]/+page.svelte
index a840ae5d..1afbe2d3 100644
--- a/website/src/routes/[...language]/+page.svelte
+++ b/website/src/routes/[...language]/+page.svelte
@@ -46,17 +46,17 @@
 				{$_('metadata.description')}
 			</div>
 			<div class="w-full flex flex-row justify-center gap-3">
-				<Button href={getURLForLanguage('/[...language]/app', $locale)} class="w-1/3 min-w-fit">
+				<Button href={getURLForLanguage($locale, '/app')} class="w-1/3 min-w-fit">
 					<Map size="18" class="mr-1.5" />
 					{$_('homepage.app')}
 				</Button>
 				<Button
 					variant="secondary"
-					href={getURLForLanguage('/[...language]/help', $locale)}
+					href={getURLForLanguage($locale, '/help')}
 					class="w-1/3 min-w-fit"
 				>
 					<BookOpenText size="18" class="mr-1.5" />
-					<span>{$_('homepage.help')}</span>
+					<span>{$_('menu.help')}</span>
 				</Button>
 			</div>
 		</div>
diff --git a/website/src/routes/[...language]/help/+layout.svelte b/website/src/routes/[...language]/help/+layout.svelte
index 116863e4..f640589a 100644
--- a/website/src/routes/[...language]/help/+layout.svelte
+++ b/website/src/routes/[...language]/help/+layout.svelte
@@ -17,7 +17,7 @@
 		{#each Object.keys(guides) as guide}
 			<Button
 				variant="link"
-				href={getURLForLanguage(`/[...language]/help/${guide}`, $locale)}
+				href={getURLForLanguage($locale, `/help/${guide}`)}
 				class="h-6 p-0 w-fit text-muted-foreground hover:text-foreground hover:no-underline font-normal hover:font-semibold items-start"
 			>
 				<DocsLoader path={`${guide}.svx`} titleOnly={true} />
@@ -25,7 +25,7 @@
 			{#each guides[guide] as subGuide}
 				<Button
 					variant="link"
-					href={getURLForLanguage(`/[...language]/help/${guide}/${subGuide}`, $locale)}
+					href={getURLForLanguage($locale, `/help/${guide}/${subGuide}`)}
 					class="h-6 p-0 w-fit text-muted-foreground hover:text-foreground hover:no-underline font-normal hover:font-semibold items-start ml-3"
 				>
 					<DocsLoader path={`${guide}/${subGuide}.svx`} titleOnly={true} />