From 0fb96e64ab294a775a379be271abaa5ee0c16965 Mon Sep 17 00:00:00 2001
From: Fractal-Tess <vgfractal@gmail.com>
Date: Thu, 27 Oct 2022 04:54:36 +0300
Subject: [PATCH] added tinro router

---
 package.json                                   |  1 +
 pnpm-lock.yaml                                 |  6 ++++++
 src/App.svelte                                 | 18 +++++-------------
 .../{ => buttons}/ThemeToggleIcon.svelte       |  7 +------
 src/lib/components/footer/Footer.svelte        |  3 +++
 src/lib/components/{ => header}/Header.svelte  |  6 +++++-
 src/lib/components/nav/HeaderNav.svelte        |  8 ++++++++
 src/lib/layout/BaseLayout.svelte               | 16 ++++++++++++++++
 src/lib/router/Router.svelte                   | 14 ++++++++++++++
 .../routes}/CallTauri.svelte                   |  0
 .../routes}/HashString.svelte                  |  0
 src/lib/{ => router/routes}/Index.svelte       | 10 ----------
 .../routes}/Versions.svelte                    |  0
 src/lib/stores/theme.ts                        |  2 +-
 src/types.ts                                   |  3 +++
 tsconfig.json                                  |  6 ++++--
 vite.config.ts                                 |  4 +++-
 17 files changed, 70 insertions(+), 34 deletions(-)
 rename src/lib/components/{ => buttons}/ThemeToggleIcon.svelte (94%)
 create mode 100644 src/lib/components/footer/Footer.svelte
 rename src/lib/components/{ => header}/Header.svelte (86%)
 create mode 100644 src/lib/components/nav/HeaderNav.svelte
 create mode 100644 src/lib/layout/BaseLayout.svelte
 create mode 100644 src/lib/router/Router.svelte
 rename src/lib/{components => router/routes}/CallTauri.svelte (100%)
 rename src/lib/{components => router/routes}/HashString.svelte (100%)
 rename src/lib/{ => router/routes}/Index.svelte (57%)
 rename src/lib/{components => router/routes}/Versions.svelte (100%)
 create mode 100644 src/types.ts

diff --git a/package.json b/package.json
index fdbc064..b2412e8 100644
--- a/package.json
+++ b/package.json
@@ -59,6 +59,7 @@
     "svelte-preprocess": "^4.10.7",
     "tailwindcss": "^3.2.1",
     "tauri-plugin-store-api": "github:tauri-apps/tauri-plugin-store#dev",
+    "tinro": "^0.6.12",
     "tslib": "^2.4.0",
     "typescript": "^4.8.4",
     "vite": "^3.2.0"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6e10943..1ca45ac 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -31,6 +31,7 @@ specifiers:
   svelte-preprocess: ^4.10.7
   tailwindcss: ^3.2.1
   tauri-plugin-store-api: github:tauri-apps/tauri-plugin-store#dev
+  tinro: ^0.6.12
   tslib: ^2.4.0
   typescript: ^4.8.4
   vite: ^3.2.0
@@ -66,6 +67,7 @@ devDependencies:
   svelte-preprocess: 4.10.7_4n3z2octtzg5pdokl7pjruqnki
   tailwindcss: 3.2.1_postcss@8.4.18
   tauri-plugin-store-api: github.com/tauri-apps/tauri-plugin-store/9bd993aa67766596638bbfd91e79a1bf8f632014
+  tinro: 0.6.12
   tslib: 2.4.0
   typescript: 4.8.4
   vite: 3.2.0
@@ -2378,6 +2380,10 @@ packages:
     resolution: {integrity: sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==}
     dev: true
 
+  /tinro/0.6.12:
+    resolution: {integrity: sha512-YYLh0a21GXXpS66ilZbywfXcPTKQQ+bv3tihoqKqSFQP6/F11N7ZmtRbFWcyZXXPFRSzNxmPJBB8ZhP0GkoS0Q==}
+    dev: true
+
   /to-regex-range/5.0.1:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
     engines: {node: '>=8.0'}
diff --git a/src/App.svelte b/src/App.svelte
index f8ff493..260dfac 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,10 +1,7 @@
 <script lang="ts">
-  import { fade } from 'svelte/transition';
-
-  import Header from '$lib/components/Header.svelte';
-  import Index from '$lib/Index.svelte';
-
   import { theme } from '$lib/stores/theme';
+  import Router from '$lib/router/Router.svelte';
+  import BaseLayout from '$lib/layout/BaseLayout.svelte';
 
   $: {
     document.documentElement.setAttribute('data-theme', $theme);
@@ -13,12 +10,7 @@
 </script>
 
 {#await theme.load() then}
-  <div
-    class="font-sans bg-base-100 text-base-content h-screen flex flex-col overflow-y-auto overflow-x-hidden"
-  >
-    <Header />
-    <main class="flex-1" in:fade={{ delay: 300, duration: 1000 }}>
-      <Index />
-    </main>
-  </div>
+  <BaseLayout>
+    <Router />
+  </BaseLayout>
 {/await}
diff --git a/src/lib/components/ThemeToggleIcon.svelte b/src/lib/components/buttons/ThemeToggleIcon.svelte
similarity index 94%
rename from src/lib/components/ThemeToggleIcon.svelte
rename to src/lib/components/buttons/ThemeToggleIcon.svelte
index 77644fa..9a140d6 100644
--- a/src/lib/components/ThemeToggleIcon.svelte
+++ b/src/lib/components/buttons/ThemeToggleIcon.svelte
@@ -1,9 +1,4 @@
-<script lang="ts">
-  let _class = 'w-8';
-  export { _class as class };
-</script>
-
-<svg class={_class} aria-hidden="true" viewBox="0 0 24 24">
+<svg class="w-8" aria-hidden="true" viewBox="0 0 24 24">
   <mask class="moon" id="moon-mask">
     <rect x="0" y="0" width="100%" height="100%" fill="white" />
     <circle cx="24" cy="10" r="6" fill="black" />
diff --git a/src/lib/components/footer/Footer.svelte b/src/lib/components/footer/Footer.svelte
new file mode 100644
index 0000000..385cdfb
--- /dev/null
+++ b/src/lib/components/footer/Footer.svelte
@@ -0,0 +1,3 @@
+<script lang="ts">
+  // Empty for now
+</script>
diff --git a/src/lib/components/Header.svelte b/src/lib/components/header/Header.svelte
similarity index 86%
rename from src/lib/components/Header.svelte
rename to src/lib/components/header/Header.svelte
index 92068e4..a00e1d8 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/header/Header.svelte
@@ -1,10 +1,11 @@
 <script lang="ts">
-  import ThemeToggleIcon from '$lib/components/ThemeToggleIcon.svelte';
+  import ThemeToggleIcon from '$lib/components/buttons/ThemeToggleIcon.svelte';
   import { theme } from '$lib/stores/theme';
   import { appWindow } from '@tauri-apps/api/window';
   import { faXmark, faWindowMinimize } from '@fortawesome/free-solid-svg-icons';
   import { faGithub } from '@fortawesome/free-brands-svg-icons';
   import Fa from 'svelte-fa';
+  import HeaderNav from '$lib/components/nav/HeaderNav.svelte';
 </script>
 
 <div
@@ -19,12 +20,15 @@
     <ThemeToggleIcon class="w-8" />
   </button>
 
+  <HeaderNav />
+
   <!-- TODO: Investigate why hovering over the icons is laggy -->
   <div class="flex [&>*]:px-2 h-full">
     <a
       target="_blank"
       href="https://github.com/Fractal-Tess/Svelte-Tauri"
       class="hover:text-secondary flex items-center"
+      rel="noreferrer"
     >
       <Fa icon={faGithub} size="lg" />
     </a>
diff --git a/src/lib/components/nav/HeaderNav.svelte b/src/lib/components/nav/HeaderNav.svelte
new file mode 100644
index 0000000..9e13f11
--- /dev/null
+++ b/src/lib/components/nav/HeaderNav.svelte
@@ -0,0 +1,8 @@
+<nav class="h-full">
+  <ul class="flex space-x-4 h-full items-center [&>li>a]:p-2">
+    <li><a href="/">Home</a></li>
+    <li><a href="/call-tauri">CallTauri</a></li>
+    <li><a href="/hash-string">HashString</a></li>
+    <li><a href="/versions">Versions</a></li>
+  </ul>
+</nav>
diff --git a/src/lib/layout/BaseLayout.svelte b/src/lib/layout/BaseLayout.svelte
new file mode 100644
index 0000000..bfb09a3
--- /dev/null
+++ b/src/lib/layout/BaseLayout.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { fade } from 'svelte/transition';
+
+  import Header from '$lib/components/header/Header.svelte';
+  import Footer from '$lib/components/footer/Footer.svelte';
+</script>
+
+<div
+  class="font-sans bg-base-100 text-base-content h-screen flex flex-col overflow-y-auto overflow-x-hidden"
+>
+  <Header />
+  <main class="flex-1" in:fade={{ delay: 300, duration: 1000 }}>
+    <slot />
+  </main>
+  <Footer />
+</div>
diff --git a/src/lib/router/Router.svelte b/src/lib/router/Router.svelte
new file mode 100644
index 0000000..b5276e9
--- /dev/null
+++ b/src/lib/router/Router.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { Route } from 'tinro';
+
+  import Index from '$lib/router/routes/Index.svelte';
+  import CallTauri from '$router/routes/CallTauri.svelte';
+  import HashString from '$router/routes/HashString.svelte';
+  import Versions from '$router/routes/Versions.svelte';
+</script>
+
+<!-- This gives a linting error: Fix -> https://github.com/AlexxNB/tinro/pull/121/commits/d2251ffed630aac6e76e71856204ead5dd2f6661 -->
+<Route path="/"><Index /></Route>
+<Route path="/call-tauri"><CallTauri /></Route>
+<Route path="/hash-string"><HashString /></Route>
+<Route path="/versions"><Versions /></Route>
diff --git a/src/lib/components/CallTauri.svelte b/src/lib/router/routes/CallTauri.svelte
similarity index 100%
rename from src/lib/components/CallTauri.svelte
rename to src/lib/router/routes/CallTauri.svelte
diff --git a/src/lib/components/HashString.svelte b/src/lib/router/routes/HashString.svelte
similarity index 100%
rename from src/lib/components/HashString.svelte
rename to src/lib/router/routes/HashString.svelte
diff --git a/src/lib/Index.svelte b/src/lib/router/routes/Index.svelte
similarity index 57%
rename from src/lib/Index.svelte
rename to src/lib/router/routes/Index.svelte
index 9bdbed7..d16397a 100644
--- a/src/lib/Index.svelte
+++ b/src/lib/router/routes/Index.svelte
@@ -1,9 +1,3 @@
-<script lang="ts">
-  import CallTauri from '$lib/components/CallTauri.svelte';
-  import HashString from '$lib/components/HashString.svelte';
-  import Versions from '$lib/components/Versions.svelte';
-</script>
-
 <div class="flex flex-col space-y-6 items-center font-bold drop-shadow-ft">
   <h1 class="text-4xl mt-16">Welcome</h1>
   <h2 class="text-xl">
@@ -13,8 +7,4 @@
     -
     <span class="bg-primary text-primary-content rounded-md p-1"> Tauri</span> Template
   </h2>
-
-  <CallTauri />
-  <HashString />
-  <Versions />
 </div>
diff --git a/src/lib/components/Versions.svelte b/src/lib/router/routes/Versions.svelte
similarity index 100%
rename from src/lib/components/Versions.svelte
rename to src/lib/router/routes/Versions.svelte
diff --git a/src/lib/stores/theme.ts b/src/lib/stores/theme.ts
index 13c0a6c..479d582 100644
--- a/src/lib/stores/theme.ts
+++ b/src/lib/stores/theme.ts
@@ -1,6 +1,6 @@
 import { Store } from 'tauri-plugin-store-api';
-import type { Theme } from '../../types';
 import { writable } from 'svelte/store';
+import type { Theme } from '$types';
 
 const store = new Store('.settings.dat');
 
diff --git a/src/types.ts b/src/types.ts
new file mode 100644
index 0000000..77aa4c1
--- /dev/null
+++ b/src/types.ts
@@ -0,0 +1,3 @@
+export const themes = ['dark', 'light'] as const;
+
+export type Theme = typeof themes[number];
diff --git a/tsconfig.json b/tsconfig.json
index e075d16..4b8f98f 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -8,13 +8,15 @@
     "baseUrl": ".",
     "allowJs": true,
     "checkJs": true,
-    "isolatedModules": true,
     "paths": {
       "$lib": ["src/lib"],
       "$lib/*": ["src/lib/*"],
       "$styles": ["src/styles/app.postcss"],
       "$assets": ["src/assets"],
-      "$assets/*": ["src/assets/*"]
+      "$assets/*": ["src/assets/*"],
+      "$router/*": ["src/lib/router/*"],
+      "$layout/*": ["src/lib/layout/*"],
+      "$types": ["src/types.ts"]
     }
   },
   "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"],
diff --git a/vite.config.ts b/vite.config.ts
index fdd03e6..18d71a5 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -8,7 +8,9 @@ export default defineConfig({
   resolve: {
     alias: {
       $lib: join(__dirname, 'src/lib'),
-      $assets: join(__dirname, 'src/assets/'),
+      $assets: join(__dirname, 'src/assets'),
+      $router: join(__dirname, 'src/lib/router'),
+      $layout: join(__dirname, 'src/lib/layout'),
       $styles: join(__dirname, 'src/styles/app.postcss')
     }
   },