From 41066eefe47b86f820315e05969ea8f25d3078bd Mon Sep 17 00:00:00 2001
From: Yuri Tatishchev <itatishch@gmail.com>
Date: Tue, 31 Dec 2024 19:40:38 -0800
Subject: [PATCH] enable trailing slash on layout (excluding api paths)

---
 src/routes/+layout.server.ts       | 6 ++++--
 src/routes/+layout.svelte          | 6 +++---
 src/routes/+page.svelte            | 2 +-
 src/routes/clients/+page.server.ts | 2 +-
 src/routes/clients/+page.svelte    | 2 +-
 5 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/routes/+layout.server.ts b/src/routes/+layout.server.ts
index 0471612..5b51529 100644
--- a/src/routes/+layout.server.ts
+++ b/src/routes/+layout.server.ts
@@ -1,9 +1,11 @@
-import type { LayoutServerLoad } from "./$types";
+import type { LayoutServerLoad } from './$types';
+
+export const trailingSlash = 'always';
 
 export const load: LayoutServerLoad = async (event) => {
 	const { user } = event.locals;
 
 	return {
-		user
+		user,
 	};
 };
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 4836cb2..d2f25ef 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -20,9 +20,9 @@
 		<ul class="flex items-center gap-6 overflow-x-auto text-sm">
 			<li><a href="/" class={getNavClass(/^\/$/)}>Home</a></li>
 			{#if user}
-				<li><a href="/user" class={getNavClass(/^\/user$/)}>Profile</a></li>
-				<li><a href="/connections" class={getNavClass(/^\/connections$/)}>Connections</a></li>
-				<li><a href="/clients" class={getNavClass(/^\/clients(\/\d+)?$/)}>Clients</a></li>
+				<li><a href="/user/" class={getNavClass(/^\/user\/$/)}>Profile</a></li>
+				<li><a href="/connections/" class={getNavClass(/^\/connections\/$/)}>Connections</a></li>
+				<li><a href="/clients/" class={getNavClass(/^\/clients(\/\d+)?\/$/)}>Clients</a></li>
 			{/if}
 		</ul>
 	</nav>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index fc592d7..ac97720 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -21,7 +21,7 @@
 	<section id="get-started" class="border-l-2 pl-6">
 		<p>
 			To get started,
-			<Button class="ml-2" href="/clients?add=New+Client">Create a New Client</Button>
+			<Button class="ml-2" href="/clients/?add=New+Client">Create a New Client</Button>
 		</p>
 	</section>
 	<!--	<section id="using-wireguard">-->
diff --git a/src/routes/clients/+page.server.ts b/src/routes/clients/+page.server.ts
index 86fbfc5..9a52888 100644
--- a/src/routes/clients/+page.server.ts
+++ b/src/routes/clients/+page.server.ts
@@ -15,7 +15,7 @@ export const actions = {
 
 		switch (res._tag) {
 			case 'ok': {
-				return redirect(303, `/clients/${res.value}`);
+				return redirect(303, `/clients/${res.value}/`);
 			}
 			case 'err': {
 				const [status, message] = res.error;
diff --git a/src/routes/clients/+page.svelte b/src/routes/clients/+page.svelte
index 23c8c1f..0941f00 100644
--- a/src/routes/clients/+page.svelte
+++ b/src/routes/clients/+page.svelte
@@ -41,7 +41,7 @@
 			<Table.Row class="group hover:bg-background hover:bg-opacity-40">
 				<Table.Head scope="row">
 					<a
-						href={`./${client.id}`}
+						href={`./${client.id}/`}
 						class="flex size-full items-center group-hover:underline"
 					>
 						{client.name}