use base in URLs

website/src/lib/components/Footer.svelte

@@ -4,7 +4,7 @@
 	import Logo from '$lib/components/Logo.svelte';
 	import { AtSign, BookOpenText, Heart, Home, Map } from 'lucide-svelte';
 	import { _, locale } from 'svelte-i18n';
-	import { getURLForLanguage } from '$lib/languages';
+	import { getURLForLanguage } from '$lib/utils';
 </script>
 
 <footer class="w-full">

website/src/lib/components/LanguageSelect.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import { page } from '$app/stores';
 	import * as Select from '$lib/components/ui/select';
-	import { getURLForLanguage, languages } from '$lib/languages';
+	import { languages } from '$lib/languages';
+	import { getURLForLanguage } from '$lib/utils';
 	import { Languages } from 'lucide-svelte';
 	import { _, locale } from 'svelte-i18n';
 

website/src/lib/components/Menu.svelte

@@ -72,8 +72,9 @@
 	import Export from '$lib/components/Export.svelte';
 	import { mode, setMode, systemPrefersMode } from 'mode-watcher';
 	import { _, locale } from 'svelte-i18n';
-	import { getURLForLanguage, languages } from '$lib/languages';
+	import { languages } from '$lib/languages';
 	import { page } from '$app/stores';
+	import { getURLForLanguage } from '$lib/utils';
 
 	const {
 		distanceUnits,

website/src/lib/components/Nav.svelte

@@ -3,8 +3,8 @@
 	import { Button } from '$lib/components/ui/button';
 	import ModeSwitch from '$lib/components/ModeSwitch.svelte';
 	import { BookOpenText, Home, Map } from 'lucide-svelte';
-	import { getURLForLanguage } from '$lib/languages';
 	import { _, locale } from 'svelte-i18n';
+	import { getURLForLanguage } from '$lib/utils';
 </script>
 
 <nav class="w-full sticky top-0 bg-background z-10">

website/src/lib/languages.ts

@@ -1,17 +1,3 @@
 export const languages: Record<string, string> = {
     'en': 'English',
-};
+};
-
-export function getURLForLanguage(route: string | null, lang: string | null | undefined): string {
-    if (route === null) {
-        return '/';
-    }
-
-    let url = route.replace('[...language]', (lang === null || lang === undefined) ? 'en' : lang).replace('/en', '');
-
-    if (url === '') {
-        return '/';
-    } else {
-        return url;
-    }
-}

website/src/lib/utils.ts

@@ -4,6 +4,7 @@ import { cubicOut } from "svelte/easing";
 import type { TransitionConfig } from "svelte/transition";
 import { get } from "svelte/store";
 import { map } from "./stores";
+import { base } from "$app/paths";
 
 export function cn(...inputs: ClassValue[]) {
     return twMerge(clsx(inputs));
@@ -89,4 +90,18 @@ export function setGrabbingCursor() {
 
 export function setCrosshairCursor() {
     setCursor('crosshair');
+}
+
+export function getURLForLanguage(route: string | null, lang: string | null | undefined): string {
+    if (route === null) {
+        return base + '/';
+    }
+
+    let url = route.replace('[...language]', (lang === null || lang === undefined) ? 'en' : lang).replace('/en', '');
+
+    if (url === '') {
+        return base + '/';
+    } else {
+        return base + url;
+    }
 }

website/src/routes/[...language]/+page.svelte

@@ -13,6 +13,7 @@
 	import Toolbar from '$lib/components/toolbar/Toolbar.svelte';
 	import { currentTool, Tool } from '$lib/stores';
 	import { onDestroy, onMount } from 'svelte';
+	import { getURLForLanguage } from '$lib/utils';
 	import routingScreenshot from '$lib/assets/img/routing.png?enhanced';
 	import mapboxOutdoorsMap from '$lib/assets/img/mapbox-outdoors.png?enhanced';
 	import mapboxSatelliteMap from '$lib/assets/img/mapbox-satellite.png?enhanced';
@@ -20,7 +21,6 @@
 	import cyclosmMap from '$lib/assets/img/cyclosm.png?enhanced';
 	import waymarkedMap from '$lib/assets/img/waymarked.png?enhanced';
 	import mapScreenshot from '$lib/assets/img/map.png?enhanced';
-	import { getURLForLanguage } from '$lib/languages';
 
 	let gpxStatistics = writable(exampleGPXFile.getStatistics());
 	let slicedGPXStatistics = writable(undefined);