From 9f9de132c38e8a0026d9b1590dc3edda557d44d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Leonardo=20Mur=C3=A7a?= <leo@leomurca.xyz>
Date: Fri, 11 Apr 2025 10:37:51 -0300
Subject: [PATCH] Implement vanilla routing

---
 src/lib/components/Router.svelte | 24 ++++++++++++++++++++++++
 src/lib/pages/About.svelte       |  2 ++
 src/lib/pages/Donate.svelte      |  2 ++
 src/lib/pages/Home.svelte        |  2 ++
 src/lib/pages/NotFound.svelte    |  2 ++
 src/lib/sections/Header.svelte   | 24 ++++++++++++++----------
 src/lib/sections/Main.svelte     |  4 +++-
 src/utils/routes.js              | 21 +++++++++++++++++++++
 src/utils/stores.js              |  3 +++
 9 files changed, 73 insertions(+), 11 deletions(-)
 create mode 100644 src/lib/components/Router.svelte
 create mode 100644 src/lib/pages/About.svelte
 create mode 100644 src/lib/pages/Donate.svelte
 create mode 100644 src/lib/pages/Home.svelte
 create mode 100644 src/lib/pages/NotFound.svelte
 create mode 100644 src/utils/routes.js
 create mode 100644 src/utils/stores.js

diff --git a/src/lib/components/Router.svelte b/src/lib/components/Router.svelte
new file mode 100644
index 0000000..b0741e0
--- /dev/null
+++ b/src/lib/components/Router.svelte
@@ -0,0 +1,24 @@
+<script>
+    import { onMount } from 'svelte';
+    import { routes, fallback } from '../../utils/routes.js';
+    import { path } from '../../utils/stores.js';
+
+    const navigate = (to) => {
+      history.pushState({}, '', to);
+      path.set(to);
+    }
+
+    window.addEventListener('popstate', () => {
+      path.set(window.location.pathname);
+    });
+
+    let component;
+    const unsubscribe = path.subscribe(current => {
+      component = routes[current].component || fallback;
+    });
+
+    onMount(() => () => unsubscribe());
+
+  </script>
+
+  <svelte:component this={component} />
diff --git a/src/lib/pages/About.svelte b/src/lib/pages/About.svelte
new file mode 100644
index 0000000..b514c8c
--- /dev/null
+++ b/src/lib/pages/About.svelte
@@ -0,0 +1,2 @@
+<h1>About</h1>
+<p>This is the about page.</p>
\ No newline at end of file
diff --git a/src/lib/pages/Donate.svelte b/src/lib/pages/Donate.svelte
new file mode 100644
index 0000000..85cd47e
--- /dev/null
+++ b/src/lib/pages/Donate.svelte
@@ -0,0 +1,2 @@
+<h1>Donate</h1>
+<p>Welcome to the donate page.</p>
diff --git a/src/lib/pages/Home.svelte b/src/lib/pages/Home.svelte
new file mode 100644
index 0000000..26f551e
--- /dev/null
+++ b/src/lib/pages/Home.svelte
@@ -0,0 +1,2 @@
+<h1>Home</h1>
+<p>Welcome to the home page.</p>
diff --git a/src/lib/pages/NotFound.svelte b/src/lib/pages/NotFound.svelte
new file mode 100644
index 0000000..a4c98be
--- /dev/null
+++ b/src/lib/pages/NotFound.svelte
@@ -0,0 +1,2 @@
+<h1>404 - Not Found</h1>
+<p>Oops! That route does not exist.</p>
\ No newline at end of file
diff --git a/src/lib/sections/Header.svelte b/src/lib/sections/Header.svelte
index 8a5bab8..0c8df4e 100644
--- a/src/lib/sections/Header.svelte
+++ b/src/lib/sections/Header.svelte
@@ -2,6 +2,8 @@
   import MediaQuery from "../MediaQuery.svelte";
   import logo from "../../assets/logo.webp";
   import { t, locale, locales } from "../../i18n"
+  import { path } from '../../utils/stores.js';
+  import { routes } from '../../utils/routes.js';
 
   const configsFor = (matches) => {
     return matches
@@ -9,17 +11,20 @@
       : { src: logo, width: 150, height: 100 }; // desktop
   };
 
-  const navLinks = [
-    { name: () => $t("nav.home"), href: '/' },
-    { name: () => $t("nav.donate"), href: '/donate' },
-    { name: () => $t("nav.about"), href: '/about' },
-  ];
-
   const onSwitchToOppositeLang = () => {
     const oppositeLang = locales.find(item => item[0] !== $locale);
     locale.set(oppositeLang[0]);
   }
 
+  const onNavigateTo = (e, route) => {
+    e.preventDefault()
+    history.pushState({}, '', route);
+    path.set(route);
+    if (isMenuOpen) {
+      isMenuOpen = false
+    }
+  }
+
   let isMenuOpen = false;
 </script>
 
@@ -27,13 +32,12 @@
   <div class="logo">
     <MediaQuery query="(max-width: 768px)" let:matches>
       {@const configs = configsFor(matches)}
-          <a href="/">
+          <a href="#" on:click={(e) => onNavigateTo(e, "/")}>
            <img src={configs.src} alt="Embroidery viewer logo" width={configs.width} height={configs.height}/>
           </a>
     </MediaQuery>
   </div>
 
-
 <div class="nav-container">
   <MediaQuery query="(max-width: 768px)" let:matches >
     <slot let-matches>
@@ -46,8 +50,8 @@
   </MediaQuery>
   <nav class:is-open={isMenuOpen}>
     <ul>
-      {#each navLinks as link}
-        <li><a href={link.href}>{link.name()}</a></li>
+      {#each Object.entries(routes) as [route, config]}
+      <li><a href="#" on:click={(e) => onNavigateTo(e, route)} >{$t(config.nameKey)}</a></li>
       {/each}
     </ul>
   </nav>
diff --git a/src/lib/sections/Main.svelte b/src/lib/sections/Main.svelte
index cdb3faa..7611604 100644
--- a/src/lib/sections/Main.svelte
+++ b/src/lib/sections/Main.svelte
@@ -1,8 +1,10 @@
 <script>
     import FileViewer from "../components/FileViewer.svelte";
+    import Router from "../components/Router.svelte";
 </script>
 <main>
-    <FileViewer />
+    <!--<FileViewer />-->
+    <Router />
 </main>
 
 <style>
diff --git a/src/utils/routes.js b/src/utils/routes.js
new file mode 100644
index 0000000..7c8438b
--- /dev/null
+++ b/src/utils/routes.js
@@ -0,0 +1,21 @@
+import Home from '../lib/pages/Home.svelte';
+import About from '../lib/pages/About.svelte';
+import Donate from '../lib/pages/Donate.svelte';
+import NotFound from '../lib/pages/NotFound.svelte';
+
+export const routes = {
+  '/': {
+    component: Home,
+    nameKey: "nav.home"
+  },
+  '/about': {
+    component: About,
+    nameKey: "nav.about"
+  },
+  '/donate': {
+    component: Donate,
+    nameKey: "nav.donate"
+  }
+};
+
+export const fallback = NotFound;
diff --git a/src/utils/stores.js b/src/utils/stores.js
new file mode 100644
index 0000000..2aeebed
--- /dev/null
+++ b/src/utils/stores.js
@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+
+export const path = writable(window.location.pathname);