resolve internal links to support dynamic base path

Author: bklaing2

src/routes/(authed)/+layout.ts

@@ -1,7 +1,8 @@
+import { resolve } from "$app/paths";
 import type { LayoutLoad } from "./$types"
 import { redirect } from "@sveltejs/kit";
 
 export const load: LayoutLoad = async ({ parent }) => {
   const { spotify } = await parent()
-  if (!spotify.user) redirect(303, "/");
+  if (!spotify.user) redirect(303, resolve("/"));
 }

src/routes/(authed)/playlists/+page.svelte

@@ -32,5 +32,5 @@
 		</div>
 	{/each}
 
-	<!-- <a class="playlist wireframe" href="/create-playlist">+</a> -->
+	<!-- <a class="playlist wireframe" href={resolve("/create-playlist")}>+</a> -->
 </main>

src/routes/+layout.svelte

@@ -2,6 +2,7 @@
 	import type { Snippet } from 'svelte';
 	import GithubLogo from 'virtual:icons/logos/github-icon';
 	import './styles.css';
+	import { resolve } from '$app/paths';
 
 	let { data, children } = $props();
 </script>
@@ -18,10 +19,10 @@
 	<header
 		class="relative grid grid-cols-[repeat(2,max-content)_1fr] justify-items-end items-center gap-8 overflow-scroll pb-8 px-8"
 	>
-		<a href="/"
-			><img src="favicon.png" alt="autofy icon" class="h-8 aspect-square rounded-full" /></a
-		>
-		<a class="autofy font-black text-[2rem]" href="/">autofy</a>
+		<a href={resolve('/')}>
+			<img src="favicon.png" alt="autofy icon" class="h-8 aspect-square rounded-full" />
+		</a>
+		<a class="autofy font-black text-[2rem]" href={resolve('/')}>autofy</a>
 
 		{#if data.spotify.user}
 			{#if data.spotify.user.image}

src/routes/+layout.ts

@@ -2,6 +2,7 @@ import type { LayoutLoad } from "./$types";
 import { SignIn as SpotifySignIn, SignOut as SpotifySignOut } from "$lib/spotify";
 import { spotify } from "$lib/state.svelte";
 import { goto } from "$app/navigation";
+import { resolve } from "$app/paths";
 
 export const ssr = false;
 export const prerender = true;
@@ -13,11 +14,11 @@ export const load: LayoutLoad = async ({ url }) => {
 
 async function SignIn() {
   spotify.user = await SpotifySignIn()
-  goto("/playlists")
+  goto(resolve("/playlists"))
 }
 
 async function SignOut() {
   await SpotifySignOut()
   spotify.user = null
-  goto("/")
+  goto(resolve("/"))
 }

src/routes/+page.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { resolve } from '$app/paths';
+
 	let { data } = $props();
 
 	const BUTTON_CLASS =
@@ -23,7 +25,7 @@
 	</p>
 
 	{#if data.spotify.user}
-		<a href="/playlists" class={BUTTON_CLASS}> my&nbsp;playlists </a>
+		<a href={resolve('/playlists')} class={BUTTON_CLASS}> my&nbsp;playlists </a>
 	{:else}
 		<button onclick={data.SignIn} class={BUTTON_CLASS}>
 			connect&nbsp;your&nbsp;Spotify&nbsp;account to&nbsp;get&nbsp;started!