added tinro router

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"

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'}

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}

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

src/lib/components/footer/Footer.svelte

@@ -0,0 +1,3 @@
+<script lang="ts">
+  // Empty for now
+</script>

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>

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>

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>

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>

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>

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');
 

src/types.ts

@@ -0,0 +1,3 @@
+export const themes = ['dark', 'light'] as const;
+
+export type Theme = typeof themes[number];

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

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')
     }
   },