src/lib/components/BlogCard.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-	import dayjs from 'dayjs';
+	import { resolve } from '$app/paths';
 	import { Link } from '@lucide/svelte';
+	import dayjs from 'dayjs';
 	import Image from './Image.svelte';
 
 	interface Props {
@@ -15,8 +16,6 @@
 	}
 
 	let { id, img, title, published, topics }: Props = $props();
-
-	let blogLink = $derived(`/blog/${id}`);
 </script>
 
 <div class="card">
@@ -29,7 +28,7 @@
 		<div class="absolute z-20 opacity-0 transition-opacity group-hover:opacity-75">
 			<Link size={32} />
 		</div>
-		<a href={blogLink} class="h-full w-full">
+		<a href={resolve(`/blog/[slug]`, { slug: id })} class="h-full w-full">
 			<Image
 				class="z-10 aspect-4/2 w-full object-cover transition-transform group-hover:scale-110 group-hover:blur-xs"
 				src={img.url}
@@ -45,7 +44,7 @@
 				</p>
 				<h2 class="card-title text-xl">{title}</h2>
 			</div>
-			<a href={blogLink} class="btn btn-primary">Read Now</a>
+			<a href={resolve(`/blog/[slug]`, { slug: id })} class="btn btn-primary">Read Now</a>
 		</div>
 	</div>
 </div>

src/lib/components/Hero.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { resolve } from '$app/paths';
+
 	interface Props {
 		photo: string;
 		titles: string[];
@@ -33,8 +35,8 @@
 					{description}
 				</p>
 				<div class="flex flex-col gap-2 sm:flex-row lg:gap-4">
-					<a href="/resume" class="btn btn-outline btn-primary btn-wide">Resume</a>
+					<a href={resolve('/resume')} class="btn btn-outline btn-primary btn-wide">Resume</a>
-					<a href="/contact" class="btn btn-primary btn-wide">Contact</a>
+					<a href={resolve('/contact')} class="btn btn-primary btn-wide">Contact</a>
 				</div>
 			</div>
 		</div>

src/lib/components/Navbar.svelte

@@ -1,19 +1,22 @@
 <script lang="ts">
+	import { resolve } from '$app/paths';
+	import type { ResolvedPathname } from '$app/types';
 	import { Menu } from '@lucide/svelte';
 
 	interface Props {
 		drawerId: string;
 		title: string;
-		pages: { slug: string; name: string }[];
+		pages: { slug: ResolvedPathname; name: string }[];
 		route: { id: string | null };
 	}
 
 	let { drawerId, title, pages, route }: Props = $props();
 </script>
 
+/** eslint-disable svelte/no-navigation-without-resolve */
 <nav class="navbar">
 	<div class="flex flex-1 items-center gap-4">
-		<a href="/">
+		<a href={resolve('/')}>
 			<div class="avatar avatar-placeholder animate-pulse">
 				<div
 					class="ring-primary ring-offset-base-100 bg-base-200 text-base-content mx-auto w-8 rounded-full ring-2 ring-offset-2 transition-all ease-in hover:text-2xl lg:w-12"
@@ -34,6 +37,7 @@
 		{#each pages as page (page.slug)}
 			<a
 				href={page.slug}
+				rel="external"
 				class="link hover:link-secondary transition-colors"
 				class:link-secondary={route.id === page.slug}
 			>

src/lib/components/markdown/Link.svelte

@@ -3,9 +3,9 @@
 
 	type Props = Omit<SvelteHTMLElements['a'], 'class'>;
 
-	const { href, children }: Props = $props();
+	const { children, ...rest }: Props = $props();
 </script>
 
-<a {href} target="_blank" class="link link-primary">
+<a {...rest} target="_blank" class="link link-primary">
 	{@render children?.()}
 </a>

src/routes/+layout.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
+	import { resolve } from '$app/paths';
 	import { navigating, page } from '$app/state';
 	import Navbar from '$lib/components/Navbar.svelte';
 	import '../app.css';
@@ -14,11 +15,11 @@
 	}
 
 	const pages = [
-		{ slug: '/', name: 'About Me' },
+		{ slug: resolve('/'), name: 'About Me' },
-		{ slug: '/resume', name: 'Resume' },
+		{ slug: resolve('/resume'), name: 'Resume' },
-		{ slug: '/blog', name: 'Blog' },
+		{ slug: resolve('/blog'), name: 'Blog' },
-		{ slug: '/projects', name: 'Projects' },
+		{ slug: resolve('/projects'), name: 'Projects' },
-		{ slug: '/contact', name: 'Contact' }
+		{ slug: resolve('/contact'), name: 'Contact' }
 	];
 
 	const socialLinks = [
@@ -55,6 +56,7 @@
 						{#each socialLinks as link (link.href)}
 							<a
 								href={link.href}
+								rel="external"
 								target="_blank"
 								class="hover:text-base-content text-slate-600 transition-colors">{link.name}</a
 							>
@@ -75,6 +77,7 @@
 						<button
 							class="btn btn-primary btn-outline btn-lg"
 							onclick={() => {
+								// eslint-disable-next-line svelte/no-navigation-without-resolve
 								goto(page.slug);
 								drawerOpen = false;
 							}}>{page.name}</button

src/routes/blog/[slug]/+page.ts

@@ -9,7 +9,7 @@ export const load: PageLoad = async ({ params }) => {
 			content: post.default,
 			meta: post.metadata
 		};
-	} catch (e) {
+	} catch {
 		error(404, `Could not find ${params.slug}`);
 	}
 };