change base to resolve

website/src/lib/components/Footer.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { resolve } from '$app/paths';
     import { Button } from '$lib/components/ui/button';
     import LanguageSelect from '$lib/components/LanguageSelect.svelte';
     import ModeSwitch from '$lib/components/ModeSwitch.svelte';
@@ -31,7 +32,7 @@
                 <Button
                     variant="link"
                     class="h-6 px-0 has-[>svg]:px-0 text-muted-foreground"
-                    href={getURLForLanguage(i18n.lang, '/')}
+                    href={resolve(getURLForLanguage(i18n.lang, '/'))}
                 >
                     <House size="16" />
                     {i18n._('homepage.home')}
@@ -40,7 +41,7 @@
                     data-sveltekit-reload
                     variant="link"
                     class="h-6 px-0 has-[>svg]:px-0 text-muted-foreground"
-                    href={getURLForLanguage(i18n.lang, '/app')}
+                    href={resolve(getURLForLanguage(i18n.lang, '/app'))}
                 >
                     <Map size="16" />
                     {i18n._('homepage.app')}
@@ -48,7 +49,7 @@
                 <Button
                     variant="link"
                     class="h-6 px-0 has-[>svg]:px-0 text-muted-foreground"
-                    href={getURLForLanguage(i18n.lang, '/help')}
+                    href={resolve(getURLForLanguage(i18n.lang, '/help'))}
                 >
                     <BookOpenText size="16" />
                     {i18n._('menu.help')}

website/src/lib/components/Help.svelte

@@ -2,6 +2,7 @@
     import { CircleQuestionMark } from '@lucide/svelte';
     import { i18n } from '$lib/i18n/i18n.svelte';
     import type { Snippet } from 'svelte';
+    import { resolve } from '$app/paths';
 
     let {
         link,
@@ -19,7 +20,7 @@
     <div>
         {@render children()}
         {#if link}
-            <a href={link} target="_blank" class="text-[13px] text-link hover:underline">
+            <a href={resolve(link)} target="_blank" class="text-[13px] text-link hover:underline">
                 {i18n._('menu.more')}
             </a>
         {/if}

website/src/lib/components/LanguageSelect.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { resolve } from '$app/paths';
     import { page } from '$app/state';
     import * as Select from '$lib/components/ui/select';
     import { languages } from '$lib/i18n/languages';
@@ -17,11 +18,11 @@
     <Select.Content>
         {#each Object.entries(languages) as [lang, label]}
             {#if page.url.pathname.includes('404')}
-                <a href={getURLForLanguage(lang, '/')}>
+                <a href={resolve(getURLForLanguage(lang, '/'))}>
                     <Select.Item value={lang}>{label}</Select.Item>
                 </a>
             {:else}
-                <a href={getURLForLanguage(lang, page.url.pathname)}>
+                <a href={resolve(getURLForLanguage(lang, page.url.pathname))}>
                     <Select.Item value={lang}>{label}</Select.Item>
                 </a>
             {/if}

website/src/lib/components/Logo.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { mode } from 'mode-watcher';
-    import { base } from '$app/paths';
+    import { asset } from '$app/paths';
 
     let {
         iconOnly = false,
@@ -15,7 +15,7 @@
 
 {#if company === 'gpx.studio'}
     <img
-        src="{base}/{iconOnly ? 'icon' : 'logo'}{mode.current === 'dark' ? '-dark' : ''}.svg"
+        src={asset(`/${iconOnly ? 'icon' : 'logo'}${mode.current === 'dark' ? '-dark' : ''}.svg`)}
         alt="Logo of gpx.studio."
         {...others}
     />

website/src/lib/components/Menu.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { resolve } from '$app/paths';
     import * as Menubar from '$lib/components/ui/menubar/index.js';
     import { Button } from '$lib/components/ui/button';
     import Logo from '$lib/components/Logo.svelte';
@@ -148,7 +149,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(i18n.lang, '/')} target="_blank" class="shrink-0">
+        <a href={resolve(getURLForLanguage(i18n.lang, '/'))} target="_blank" class="shrink-0">
             <Logo class="h-5 mt-0.5 mx-2 md:hidden" iconOnly={true} width="16" />
             <Logo class="h-5 mt-0.5 mx-2 hidden md:block" width="96" />
         </a>
@@ -527,7 +528,7 @@
                         <Menubar.SubContent>
                             <Menubar.RadioGroup value={i18n.lang}>
                                 {#each Object.entries(languages) as [lang, label]}
-                                    <a href={getURLForLanguage(lang, '/app')}>
+                                    <a href={resolve(getURLForLanguage(lang, '/app'))}>
                                         <Menubar.RadioItem value={lang}>{label}</Menubar.RadioItem>
                                     </a>
                                 {/each}

website/src/lib/components/Nav.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { resolve } from '$app/paths';
     import Logo from '$lib/components/Logo.svelte';
     import { Button } from '$lib/components/ui/button';
     import { BookOpenText, House, Map } from '@lucide/svelte';
@@ -9,7 +10,7 @@
 <nav class="sticky top-0 w-full px-12 py-2 bg-background z-50 flex flex-col items-center border-b">
     <div class="w-full max-w-5xl flex flex-row items-center gap-4 sm:gap-8">
         <a
-            href={getURLForLanguage(i18n.lang, '/')}
+            href={resolve(getURLForLanguage(i18n.lang, '/'))}
             class="shrink-0 translate-y-0.25 justify-self-start"
         >
             <Logo class="h-8 xs:hidden" iconOnly={true} width="26" />
@@ -18,7 +19,7 @@
         <Button
             variant="link"
             class="text-base px-0 has-[>svg]:px-0 ml-auto"
-            href={getURLForLanguage(i18n.lang, '/')}
+            href={resolve(getURLForLanguage(i18n.lang, '/'))}
         >
             <House size="18" />
             {i18n._('homepage.home')}
@@ -27,7 +28,7 @@
             data-sveltekit-reload
             variant="link"
             class="text-base px-0 has-[>svg]:px-0"
-            href={getURLForLanguage(i18n.lang, '/app')}
+            href={resolve(getURLForLanguage(i18n.lang, '/app'))}
         >
             <Map size="18" />
             {i18n._('homepage.app')}
@@ -35,7 +36,7 @@
         <Button
             variant="link"
             class="text-base px-0 has-[>svg]:px-0"
-            href={getURLForLanguage(i18n.lang, '/help')}
+            href={resolve(getURLForLanguage(i18n.lang, '/help'))}
         >
             <BookOpenText size="18" />
             {i18n._('menu.help')}

website/src/lib/components/embedding/EmbeddingPlayground.svelte

@@ -25,9 +25,10 @@
     import { PUBLIC_MAPTILER_KEY } from '$env/static/public';
     import Embedding from './Embedding.svelte';
     import { onDestroy } from 'svelte';
-    import { base } from '$app/paths';
+    import { resolve } from '$app/paths';
     import { map } from '$lib/components/map/map';
     import { mode } from 'mode-watcher';
+    import { getURLForLanguage } from '$lib/utils';
 
     let options = $state(
         getMergedEmbeddingOptions(
@@ -321,7 +322,7 @@
             <pre
                 class="bg-primary text-primary-foreground p-3 rounded-md whitespace-normal break-all">
                 <code class="language-html">
-                    {`<iframe src="https://gpx.studio${base}/embed?options=${encodeURIComponent(JSON.stringify(getCleanedEmbeddingOptions(iframeOptions)))}${hash}" width="100%" height="600px" frameborder="0" style="outline: none;"/>`}
+                    {`<iframe src="https://gpx.studio${resolve(getURLForLanguage(i18n.lang, '/embed'))}?options=${encodeURIComponent(JSON.stringify(getCleanedEmbeddingOptions(iframeOptions)))}${hash}" width="100%" height="600px" frameborder="0" style="outline: none;"/>`}
                 </code>
             </pre>
         </fieldset>

website/src/lib/components/embedding/OpenIn.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { resolve } from '$app/paths';
     import { Button } from '$lib/components/ui/button';
     import Logo from '$lib/components/Logo.svelte';
     import { getURLForLanguage } from '$lib/utils';
@@ -16,7 +17,7 @@
 <Button
     variant="ghost"
     class="absolute top-0 flex-wrap h-fit bg-background font-semibold rounded-md py-1 px-2 gap-1.5 xs:text-base mt-2.5 ml-2.5 mr-12"
-    href="{getURLForLanguage(i18n.lang, '/app')}?{files.length > 0
+    href="{resolve(getURLForLanguage(i18n.lang, '/app'))}?{files.length > 0
         ? `files=${encodeURIComponent(JSON.stringify(files))}`
         : ''}{files.length > 0 && ids.length > 0 ? '&' : ''}{ids.length > 0
         ? `ids=${encodeURIComponent(JSON.stringify(ids))}`

website/src/lib/components/map/gpx-layer/WaypointPopup.svelte

@@ -48,7 +48,7 @@
         <Card.Title class="text-md">
             {@const link = waypoint.item.links?.[0]}
             {#if link?.href}
-                <a href={link.href} target="_blank">
+                <a href={link.href} target="_blank" rel="external">
                     {waypoint.item.name ?? link.href}
                     <ExternalLink size="12" class="inline-block mb-1.5" />
                 </a>

website/src/lib/components/map/layer-control/OverpassPopup.svelte

@@ -83,7 +83,12 @@
                     {#if key !== 'name' && !key.includes('image')}
                         <span class="font-mono">{key}</span>
                         {#if key === 'website' || key.startsWith('website:') || key.endsWith(':website') || key === 'contact:facebook' || key === 'contact:instagram' || key === 'contact:twitter'}
-                            <a href={value} target="_blank" class="text-link underline">{value}</a>
+                            <a
+                                href={value}
+                                target="_blank"
+                                rel="external"
+                                class="text-link underline">{value}</a
+                            >
                         {:else if key === 'wikipedia' || key.startsWith('wikipedia:') || key.endsWith(':wikipedia')}
                             <a
                                 href="https://wikipedia.org/wiki/{value}"

website/src/lib/components/ui/button/button.svelte

@@ -56,6 +56,8 @@
 </script>
 
 {#if href}
+	<!-- the href comes resolved (or external) from the users of the button -->
+	<!-- eslint-disable svelte/no-navigation-without-resolve -->
 	<a
 		bind:this={ref}
 		data-slot="button"
@@ -68,6 +70,7 @@
 	>
 		{@render children?.()}
 	</a>
+	<!-- eslint-enable svelte/no-navigation-without-resolve -->
 {:else}
 	<button
 		bind:this={ref}

website/src/lib/utils.ts

@@ -1,6 +1,6 @@
 import { clsx, type ClassValue } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import { base } from '$app/paths';
+import { resolve } from '$app/paths';
 import { languages } from '$lib/i18n/languages';
 import type { Coordinates } from '$lib/geo/coordinates';
 import { LngLatBounds, type Map as MapLibreMap } from 'maplibre-gl';
@@ -130,8 +130,16 @@ export function isSafari() {
     return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
 }
 
+/**
+ * The path of a page in another language, without the base path (pass it to `resolve`). `path` is
+ * the path of the page, with or without the base path.
+ */
 export function getURLForLanguage(lang: string, path: string): string {
-    let newPath = path.replace(base, '');
+    const base = resolve('/').slice(0, -1);
+    let newPath =
+        base && (path === base || path.startsWith(`${base}/`))
+            ? path.slice(base.length) || '/'
+            : path;
 
     let languageInPath = newPath.split('/')[1];
     if (!Object.hasOwn(languages, languageInPath)) {
@@ -144,17 +152,16 @@ export function getURLForLanguage(lang: string, path: string): string {
 
     if (languageInPath === 'en') {
         if (lang === 'en') {
-            return `${base}${newPath}`;
+            return newPath;
         } else {
-            return `${base}/${lang}${newPath}`;
+            return `/${lang}${newPath}`;
         }
     } else {
         if (lang === 'en') {
             newPath = newPath.replace(`/${languageInPath}`, '');
-            return newPath === '' ? `${base}/` : `${base}${newPath}`;
+            return newPath === '' ? '/' : newPath;
         } else {
-            newPath = newPath.replace(`/${languageInPath}`, `/${lang}`);
-            return `${base}${newPath}`;
+            return newPath.replace(`/${languageInPath}`, `/${lang}`);
         }
     }
 }