chore: resolve eslint svelte/no-navigation-without-resolve error

Author: sfriedel

docs-site/src/lib/ReferenceLink.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
-	import { base } from '$app/paths';
+	import { resolve } from '$app/paths';
+	import type { RouteId } from '$app/types';
 	let { name, legacy }: { name: string; legacy?: boolean } = $props();
 </script>
 
-<a href={base + '/docs/' + (legacy ? 'legacy' : 'reference') + '/' + name + '/'}>
+<a href={resolve(`/docs/${legacy ? 'legacy' : 'reference'}/${name}/` as RouteId)}>
 	{name}
 </a>

docs-site/src/routes/Header.svelte

@@ -1,18 +1,18 @@
 <script lang="ts">
-	import { base } from '$app/paths';
+	import { resolve } from '$app/paths';
 	import Logo from '$lib/logo.svelte';
 	import IconGitHub from '~icons/mdi/github';
 </script>
 
 <header>
 	<nav aria-label="Primary" class="cluster" style:--justify="space-between">
 		<div class="cluster">
-			<a class="logo" href="{base}/">
+			<a class="logo" href={resolve('/')}>
 				<Logo /> svelte-fluent
 			</a>
 		</div>
 		<div class="cluster">
-			<a href="{base}/docs">Docs</a>
+			<a href={resolve('/docs')}>Docs</a>
 			<a
 				href="https://github.com/nubolab-ffwd/svelte-fluent"
 				target="_blank"

docs-site/src/routes/Hero.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import Logo from '$lib/logo.svelte';
-	import { base } from '$app/paths';
+	import { resolve } from '$app/paths';
 </script>
 
 <div class="hero with-sidebar right wrap-reverse" style:--content-min="50%">
@@ -11,7 +11,7 @@
 			<p class="tagline">Describe translations with Mozilla's natural-sounding Fluent syntax</p>
 		</div>
 		<div class="buttons">
-			<a class="button primary" href="{base}/docs/getting-started">Get started</a>
+			<a class="button primary" href={resolve('/docs/getting-started')}>Get started</a>
 			<a
 				class="button"
 				href="https://github.com/nubolab-ffwd/svelte-fluent"

docs-site/src/routes/docs/Menu.svelte

@@ -26,6 +26,7 @@
 			<li>
 				<div class="item" class:has-submenu={!!item.submenu} class:active={idx == activeIdx}>
 					{#if item.href}
+						<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
 						<a href={item.href}>{item.text}</a>
 					{:else}
 						{item.text}

docs-site/src/routes/docs/PrevNext.svelte

@@ -66,6 +66,7 @@
 
 <div class="prev-next">
 	{#if prev}
+		<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
 		<a class="prev" href={prev?.href}>
 			<span class="desc">Previous page</span>
 			<span class="text">{prev?.text}</span>
@@ -74,6 +75,7 @@
 		<div></div>
 	{/if}
 	{#if next}
+		<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
 		<a class="next" href={next?.href}>
 			<span class="desc">Next page</span>
 			<span class="text">{next?.text}</span>

docs-site/src/routes/docs/legacy/+page.svelte

@@ -7,6 +7,7 @@
 <ul>
 	{#each submenu as item (item)}
 		<li>
+			<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
 			<a href={item.href}>{item.text}</a>
 		</li>
 	{/each}

docs-site/src/routes/docs/legacy/menu.ts

@@ -1,4 +1,5 @@
-import { base } from '$app/paths';
+import { resolve } from '$app/paths';
+import type { RouteId } from '$app/types';
 
 const stripPrefix = (str: string, prefix: string) =>
 	str.startsWith(prefix) ? str.slice(prefix.length) : str;
@@ -17,5 +18,5 @@ export const pages = Object.fromEntries(
 export const submenu = Object.entries(pages).map(([path, metadata]) => ({
 	text: metadata?.menuTitle ?? metadata?.title,
 	title: metadata?.title,
-	href: base + '/docs/legacy/' + path + '/'
+	href: resolve(`/docs/legacy/${path}/` as RouteId)
 }));

docs-site/src/routes/docs/reference/+page.svelte

@@ -7,6 +7,7 @@
 <ul>
 	{#each submenu as item (item)}
 		<li>
+			<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
 			<a href={item.href}>{item.text}</a>
 		</li>
 	{/each}

docs-site/src/routes/docs/reference/menu.ts

@@ -1,4 +1,5 @@
-import { base } from '$app/paths';
+import { resolve } from '$app/paths';
+import type { RouteId } from '$app/types';
 
 const stripPrefix = (str: string, prefix: string) =>
 	str.startsWith(prefix) ? str.slice(prefix.length) : str;
@@ -17,5 +18,5 @@ export const pages = Object.fromEntries(
 export const submenu = Object.entries(pages).map(([path, metadata]) => ({
 	text: metadata?.menuTitle ?? metadata?.title,
 	title: metadata?.title,
-	href: base + '/docs/reference/' + path + '/'
+	href: resolve(`/docs/reference/${path}/` as RouteId)
 }));