attempt custom qrcode svg rendering

src/routes/+layout.server.ts

@@ -1,11 +1,9 @@
-import type { LayoutServerLoad } from './$types';
-
-export const trailingSlash = 'always';
+import type { LayoutServerLoad } from "./$types";
 
 export const load: LayoutServerLoad = async (event) => {
 	const { user } = event.locals;
 
 	return {
-		user,
+		user
 	};
 };

src/routes/+layout.svelte

@@ -15,14 +15,16 @@
 </script>
 
 <header class="flex w-full flex-wrap justify-between gap-x-6 gap-y-4 xl:max-w-screen-xl">
-	<span class="font-bold sm:inline-block">VPGen</span>
+	<a href="/" class="contents">
+		<span class="font-bold sm:inline-block">VPGen</span>
+	</a>
 	<nav class="max-w-full">
 		<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>

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">-->

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;

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={`/clients/${client.id}`}
 						class="flex size-full items-center group-hover:underline"
 					>
 						{client.name}

src/routes/clients/[id]/+page.svelte

@@ -2,7 +2,7 @@
 	import type { PageData } from './$types';
 	import QRCode from 'qrcode-svg';
 	import { CodeSnippet } from '$lib/components/app/code-snippet';
-	import { WireguardGuide } from '$lib/components/app/wireguard-guide/index.js';
+	import { WireguardGuide } from '$lib/components/app/wireguard-guide';
 
 	const { data }: { data: PageData } = $props();
 
@@ -16,7 +16,39 @@
 		content: data.config,
 		join: true,
 		background: 'hsl(var(--accent-light))',
+		xmlDeclaration: false,
+		// predefined: true,
 	});
+
+	const modules = qrCode.qrcode.modules;
+	const length = modules.length;
+
+	const s = 1;
+
+	// Rectangles representing modules
+	// let pathData = '';
+	//
+	// for (let y = 0; y < length; y++) {
+	// 	for (let x = 0; x < length; x++) {
+	// 		let module = modules[x][y];
+	// 		if (module) {
+	// 			pathData += `M${x*s},${y*s} h${s} v${s} h-${s} Z `
+	// 		}
+	// 	}
+	// }
+
+	// const path = modules.reduce((acc, row, y) => {
+	// 	return acc + row.reduce((rowAcc, module, x) => {
+	// 		return module ? rowAcc + `M${x*s},${y*s} h${s} v${s} h-${s} Z ` : rowAcc;
+	// 	}, '');
+	// }, '');
+	const path = modules.flat().reduce((acc, module, i) => {
+		const x = Math.floor(i / length)
+		const y = i % length;
+		return module ? acc + `M${x*s},${y*s} h${s} v${s} h-${s} Z ` : acc;
+	}, '');
+
+
 </script>
 
 <svelte:head>
@@ -31,6 +63,14 @@
 	<div class="overflow-hidden rounded-lg">
 		{@html qrCode.svg()}
 	</div>
+	<!--{qrCode.svg({ container: 'none' })}-->
+	<!--{qrCode.sv}-->
+	<div class="aspect-square min-h-64 p-3 bg-white rounded-lg">
+		<svg viewBox="0 0 {length*s*0.5} {length*s*0.5}" shape-rendering="crispEdges" image-rendering="optimizeQuality">
+			<path transform="scale(0.5)" d={path} />
+		</svg>
+	</div>
+	<!--{pathdata}-->
 </section>
 <section id="usage" class="flex w-full flex-col gap-2">
 	<h2 class="text-xl font-semibold">Usage</h2>