fix: update navigation links to use base path for routing 🌐

Author: vaibhavhrt

example/example-website/src/routes/+layout.svelte

@@ -1,15 +1,16 @@
 <script lang="ts">
 	import '../app.css';
 	import { page } from '$app/state';
+	import { base } from '$app/paths';
 	import { onMount } from 'svelte';
 
 	let { children } = $props();
 	let mobileMenuOpen = $state(false);
 
 	const navigation = [
-		{ name: 'Home', href: '/' },
-		{ name: 'Features', href: '/features' },
-		{ name: 'Demo', href: '/demo' },
+		{ name: 'Home', href: base || '/' },
+		{ name: 'Features', href: `${base}/features` },
+		{ name: 'Demo', href: `${base}/demo` },
 		{
 			name: 'Documentation',
 			href: 'https://pub.dev/documentation/dart_imagehash/latest/',
@@ -389,7 +390,7 @@
 		<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
 			<div class="flex h-16 items-center justify-between">
 				<div class="flex items-center">
-					<a href="/" class="gradient-text text-2xl font-bold"> dart_imagehash </a>
+					<a href={base || '/'} class="gradient-text text-2xl font-bold"> dart_imagehash </a>
 				</div>
 
 				<!-- Desktop Navigation -->

example/example-website/src/routes/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
+	import { base } from '$app/paths';
 
 	let isVisible = $state(false);
 
@@ -82,7 +83,7 @@
 						Get Started
 					</a>
 					<a
-						href="/demo"
+						href="{base}/demo"
 						class="rounded-lg border border-white/20 bg-white/10 px-8 py-3 font-semibold text-white backdrop-blur-sm transition-all duration-300 hover:bg-white/20"
 					>
 						Try Demo

example/example-website/src/routes/demo/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
+	import { base } from '$app/paths';
 </script>
 
 <svelte:head>
@@ -40,7 +40,7 @@
 					Perfect for understanding how each algorithm works.
 				</p>
 				<a
-					href="/demo/basic"
+					href="{base}/demo/basic"
 					class="inline-block rounded-lg bg-gradient-to-r from-purple-600 to-blue-600 px-6 py-3 font-semibold text-white shadow-lg transition-all duration-300 hover:from-purple-700 hover:to-blue-700"
 				>
 					Try Basic Demo
@@ -63,7 +63,7 @@
 					Python implementations. Great for understanding real-world applications.
 				</p>
 				<a
-					href="/demo/github-icons"
+					href="{base}/demo/github-icons"
 					class="inline-block rounded-lg bg-gradient-to-r from-green-600 to-teal-600 px-6 py-3 font-semibold text-white shadow-lg transition-all duration-300 hover:from-green-700 hover:to-teal-700"
 				>
 					View GitHub Icons Demo

example/example-website/src/routes/demo/basic/+page.svelte

@@ -2,6 +2,7 @@
 	import dartData from '$lib/data/basic-demo-dart.json';
 	import pythonData from '$lib/data/basic-demo-python.json';
 	import type { Algorithms } from '$lib/types';
+	import { base } from '$app/paths';
 
 	let selectedAlgorithm = $state<Algorithms>('ahash');
 	let selectedImage1 = $state('');
@@ -134,7 +135,7 @@
 			<div class="relative mb-6">
 				<div class="absolute -top-12 right-0 sm:-top-8 md:-top-6">
 					<a
-						href="/demo"
+						href="{base}/demo"
 						class="rounded-lg border border-white/20 bg-white/10 px-3 py-1.5 text-xs text-white transition-all hover:bg-white/20 sm:px-4 sm:py-2 sm:text-sm"
 					>
 						← Back to Demo Selection

example/example-website/src/routes/demo/github-icons/+page.svelte

@@ -2,6 +2,7 @@
 	import dartHashes from '$lib/data/github-icons-dart.json';
 	import pythonHashes from '$lib/data/github-icons-python.json';
 	import type { AlgorithmsWithZ } from '$lib/types';
+	import { base } from '$app/paths';
 
 	let selectedAlgorithm: AlgorithmsWithZ = $state('ahash');
 	let isLoading = $state(false);
@@ -108,7 +109,7 @@
 			<div class="relative mb-6">
 				<div class="absolute -top-12 right-0 sm:-top-8 md:-top-6">
 					<a
-						href="/demo"
+						href="{base}/demo"
 						class="rounded-lg border border-white/20 bg-white/10 px-3 py-1.5 text-xs text-white transition-all hover:bg-white/20 sm:px-4 sm:py-2 sm:text-sm"
 					>
 						← Back to Demo Selection