change base to resolve

website/src/hooks.server.js

@@ -1,4 +1,4 @@
-import { base } from '$app/paths';
+import { asset, resolve as resolvePath } from '$app/paths';
 import { languages } from '$lib/i18n/languages';
 import { getURLForLanguage } from '$lib/utils';
 
@@ -37,16 +37,16 @@ export async function handle({ event, resolve }) {
     <meta property="og:description" content="${description}" />
     <meta name="twitter:title" content="gpx.studio — ${title}" />
     <meta name="twitter:description" content="${description}" />
-    <meta property="og:image" content="https://gpx.studio${base}/og_logo.png" />
+    <meta property="og:image" content="https://gpx.studio${asset('/og_logo.png')}" />
     <meta property="og:url" content="https://gpx.studio/" />
     <meta property="og:type" content="website" />
     <meta property="og:site_name" content="gpx.studio" />
     <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:image" content="https://gpx.studio${base}/og_logo.png" />
+    <meta name="twitter:image" content="https://gpx.studio${asset('/og_logo.png')}" />
     <meta name="twitter:url" content="https://gpx.studio/" />
     <meta name="twitter:site" content="@gpxstudio" />
     <meta name="twitter:creator" content="@gpxstudio" />
-    <link rel="alternate" hreflang="x-default" href="https://gpx.studio${getURLForLanguage('en', path)}" />`;
+    <link rel="alternate" hreflang="x-default" href="https://gpx.studio${resolvePath(getURLForLanguage('en', path))}" />`;
 
     // the manifests are made for the website, not for the desktop app (`npm run build:desktop`)
     if (process.env.BUILD_TARGET !== 'desktop') {
@@ -56,7 +56,7 @@ export async function handle({ event, resolve }) {
 
     if (page !== '404') {
         for (let lang of Object.keys(languages)) {
-            headTag += `   <link rel="alternate" hreflang="${lang}" href="https://gpx.studio${getURLForLanguage(lang, path)}" />
+            headTag += `   <link rel="alternate" hreflang="${lang}" href="https://gpx.studio${resolvePath(getURLForLanguage(lang, path))}" />
 `;
         }
     }

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}`);
         }
     }
 }

website/src/routes/+layout.svelte

@@ -7,7 +7,7 @@
     import Footer from '$lib/components/Footer.svelte';
     import { onMount, type Snippet } from 'svelte';
     import { convertOldEmbeddingOptions } from '$lib/components/embedding/embedding';
-    import { base } from '$app/paths';
+    import { resolve } from '$app/paths';
     import { languages } from '$lib/i18n/languages';
     import { browser } from '$app/environment';
     import { goto } from '$app/navigation';
@@ -31,7 +31,7 @@
             let folders = page.url.pathname.split('/');
             let locale =
                 folders.indexOf('l') >= 0 ? (folders[folders.indexOf('l') + 1] ?? 'en') : 'en';
-            window.location.href = `${getURLForLanguage(locale, '/embed')}?options=${encodeURIComponent(JSON.stringify(convertOldEmbeddingOptions(page.url.searchParams)))}`;
+            window.location.href = `${resolve(getURLForLanguage(locale, '/embed'))}?options=${encodeURIComponent(JSON.stringify(convertOldEmbeddingOptions(page.url.searchParams)))}`;
         }
     });
 
@@ -43,7 +43,7 @@
                     if (Object.hasOwn(languages, lang)) {
                         i18n.lang = lang;
                     } else if (browser) {
-                        goto(`${base}/404`);
+                        goto(resolve('/404'));
                     }
                 }
             } else if (i18n.lang !== 'en') {

website/src/routes/404/+page.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';
@@ -12,7 +13,7 @@
     <Logo class="h-40 my-3 animate-spin" style="animation-duration: 20000ms" iconOnly={true} />
     <div class="w-full flex flex-row flex-wrap gap-3 justify-center">
         <Button
-            href={getURLForLanguage(i18n.lang, '/')}
+            href={resolve(getURLForLanguage(i18n.lang, '/'))}
             class="text-base w-1/4 min-w-fit rounded-full"
         >
             <House size="18" />
@@ -20,14 +21,14 @@
         </Button>
         <Button
             data-sveltekit-reload
-            href={getURLForLanguage(i18n.lang, '/app')}
+            href={resolve(getURLForLanguage(i18n.lang, '/app'))}
             class="text-base w-1/4 min-w-fit rounded-full"
         >
             <Map size="18" />
             {i18n._('homepage.app')}
         </Button>
         <Button
-            href={getURLForLanguage(i18n.lang, '/help')}
+            href={resolve(getURLForLanguage(i18n.lang, '/help'))}
             class="text-base w-1/4 min-w-fit rounded-full"
         >
             <BookOpenText size="18" />

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { resolve } from '$app/paths';
     import { Button } from '$lib/components/ui/button';
     import ElevationProfile from '$lib/components/elevation-profile/ElevationProfile.svelte';
     import GPXStatistics from '$lib/components/GPXStatistics.svelte';
@@ -58,7 +59,7 @@
                 <div class="w-full flex flex-row xs:justify-center gap-3">
                     <Button
                         data-sveltekit-reload
-                        href={getURLForLanguage(i18n.lang, '/app')}
+                        href={resolve(getURLForLanguage(i18n.lang, '/app'))}
                         class="w-1/3 min-w-fit"
                     >
                         <Map size="18" />
@@ -66,7 +67,7 @@
                     </Button>
                     <Button
                         variant="secondary"
-                        href={getURLForLanguage(i18n.lang, '/help')}
+                        href={resolve(getURLForLanguage(i18n.lang, '/help'))}
                         class="w-1/3 min-w-fit"
                     >
                         <BookOpenText size="18" />
@@ -74,7 +75,10 @@
                     </Button>
                 </div>
             </div>
-            <a href={getURLForLanguage(i18n.lang, '/app')} aria-label="Link to the web app.">
+            <a
+                href={resolve(getURLForLanguage(i18n.lang, '/app'))}
+                aria-label="Link to the web app."
+            >
                 <enhanced:img
                     src="/src/lib/assets/img/docs/getting-started/interface.webp"
                     alt="The gpx.studio interface."

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { resolve } from '$app/paths';
     import GPXLayers from '$lib/components/map/gpx-layer/GPXLayers.svelte';
     import ElevationProfile from '$lib/components/elevation-profile/ElevationProfile.svelte';
     import FileList from '$lib/components/file-list/FileList.svelte';
@@ -79,7 +80,9 @@
             const saved = get(settings.language);
             if (saved !== undefined && saved !== language) {
                 await goto(
-                    `${getURLForLanguage(saved, page.url.pathname)}${page.url.search}${page.url.hash}`,
+                    resolve(
+                        `${getURLForLanguage(saved, page.url.pathname)}${page.url.search}${page.url.hash}`
+                    ),
                     { replaceState: true }
                 );
             }

website/src/routes/[[language]]/help/+layout.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { resolve } from '$app/paths';
     import { Button } from '$lib/components/ui/button';
     import AlgoliaDocSearch from '$lib/components/AlgoliaDocSearch.svelte';
     import { getURLForLanguage } from '$lib/utils';
@@ -27,7 +28,7 @@
             {#each Object.keys(guides) as guide}
                 <Button
                     variant="link"
-                    href={getURLForLanguage(i18n.lang, `/help/${guide}`)}
+                    href={resolve(getURLForLanguage(i18n.lang, `/help/${guide}`))}
                     class="min-h-5 h-fit p-0 w-fit border-none text-muted-foreground hover:text-foreground hover:no-underline font-normal hover:font-semibold items-start whitespace-normal {page
                         .params.guide === guide
                         ? 'font-semibold text-foreground'
@@ -38,7 +39,7 @@
                 {#each guides[guide] as subGuide}
                     <Button
                         variant="link"
-                        href={getURLForLanguage(i18n.lang, `/help/${guide}/${subGuide}`)}
+                        href={resolve(getURLForLanguage(i18n.lang, `/help/${guide}/${subGuide}`))}
                         class="min-h-5 h-fit p-0 w-fit border-none text-muted-foreground hover:text-foreground hover:no-underline font-normal hover:font-semibold items-start whitespace-normal ml-3 {page
                             .params.guide ===
                         guide + '/' + subGuide

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { resolve } from '$app/paths';
     import { Button } from '$lib/components/ui/button';
     import { getURLForLanguage } from '$lib/utils';
     import { i18n } from '$lib/i18n/i18n.svelte';
@@ -17,7 +18,7 @@
     {#each Object.keys(guides) as guide}
         <Button
             variant="outline"
-            href={getURLForLanguage(i18n.lang, `/help/${guide}`)}
+            href={resolve(getURLForLanguage(i18n.lang, `/help/${guide}`))}
             class="min-h-36 h-full pt-6 pb-3 px-0"
         >
             <div class="flex flex-col w-full">
@@ -31,7 +32,9 @@
                     {#each guides[guide] as subGuide}
                         <Button
                             variant="link"
-                            href={getURLForLanguage(i18n.lang, `/help/${guide}/${subGuide}`)}
+                            href={resolve(
+                                getURLForLanguage(i18n.lang, `/help/${guide}/${subGuide}`)
+                            )}
                             class="min-h-8 h-fit min-w-24 px-0 py-1 text-muted-foreground text-base text-center whitespace-normal"
                         >
                             {#if typeof guideIcons[subGuide] === 'string'}

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { resolve } from '$app/paths';
     import { page } from '$app/state';
     import { getNextGuide, getPreviousGuide } from '$lib/components/docs/docs';
     import DocsContainer from '$lib/components/docs/DocsContainer.svelte';
@@ -22,7 +23,7 @@
         <Button
             variant="outline"
             class="mr-auto"
-            href={getURLForLanguage(i18n.lang, `/help/${previousGuide}`)}
+            href={resolve(getURLForLanguage(i18n.lang, `/help/${previousGuide}`))}
         >
             <ChevronLeft size="14" class="mt-0.5" />
             {data.guideTitles[previousGuide]}
@@ -32,7 +33,7 @@
         <Button
             variant="outline"
             class="ml-auto"
-            href={getURLForLanguage(i18n.lang, `/help/${nextGuide}`)}
+            href={resolve(getURLForLanguage(i18n.lang, `/help/${nextGuide}`))}
         >
             {data.guideTitles[nextGuide]}
             <ChevronRight size="14" class="mt-0.5" />

website/src/test/stubs/app-paths.ts

@@ -1,5 +1,6 @@
-export const base = '';
-export const assets = '';
 export function resolve(path: string) {
     return path;
 }
+export function asset(file: string) {
+    return file;
+}