feat(cli): wrap links with resolve()

Author: jycouet

.changeset/free-bats-march.md

@@ -0,0 +1,5 @@
+---
+'sv': patch
+---
+
+feat(cli): wrap links with `resolve()` function to follow [best practices](https://svelte.dev/docs/kit/$app-paths#resolve)

packages/create/templates/demo/src/routes/Header.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { resolve } from '$app/paths';
 	import { page } from '$app/state';
 	import logo from '$lib/images/svelte-logo.svg';
 	import github from '$lib/images/github.svg';
@@ -17,13 +18,13 @@
 		</svg>
 		<ul>
 			<li aria-current={page.url.pathname === '/' ? 'page' : undefined}>
-				<a href="/">Home</a>
+				<a href={resolve('/')}>Home</a>
 			</li>
 			<li aria-current={page.url.pathname === '/about' ? 'page' : undefined}>
-				<a href="/about">About</a>
+				<a href={resolve('/about')}>About</a>
 			</li>
 			<li aria-current={page.url.pathname.startsWith('/sverdle') ? 'page' : undefined}>
-				<a href="/sverdle">Sverdle</a>
+				<a href={resolve('/sverdle')}>Sverdle</a>
 			</li>
 		</ul>
 		<svg viewBox="0 0 2 3" aria-hidden="true">

packages/create/templates/demo/src/routes/about/+page.svelte

@@ -1,3 +1,7 @@
+<script lang="ts">
+	import { resolve } from '$app/paths';
+</script>
+
 <svelte:head>
 	<title>About</title>
 	<meta name="description" content="About this app" />
@@ -20,7 +24,7 @@
 	</p>
 
 	<p>
-		The <a href="/sverdle">Sverdle</a> page illustrates SvelteKit's data loading and form handling. Try
-		using it with JavaScript disabled!
+		The <a href={resolve('/sverdle')}>Sverdle</a> page illustrates SvelteKit's data loading and form
+		handling. Try using it with JavaScript disabled!
 	</p>
 </div>

packages/create/templates/demo/src/routes/sverdle/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { enhance } from '$app/forms';
+	import { resolve } from '$app/paths';
 	import { confetti } from '@neoconfetti/svelte';
 	import type { ActionData, PageData } from './$types';
 	import { MediaQuery } from 'svelte/reactivity';
@@ -117,7 +118,7 @@
 		};
 	}}
 >
-	<a class="how-to-play" href="/sverdle/how-to-play">How to play</a>
+	<a class="how-to-play" href={resolve('/sverdle/how-to-play')}>How to play</a>
 
 	<div class="grid" class:playing={!won} class:bad-guess={form?.badGuess}>
 		{#each Array.from(Array(6).keys()) as row (row)}