first commit

src/App.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { fade } from 'svelte/transition';
+
+  import Header from '$lib/example/header/Header.svelte';
+  import Index from '$lib/Index.svelte';
+  import Footer from '$lib/example/footer/Footer.svelte';
+
+  import { theme } from '$lib/stores/theme';
+
+  $: {
+    document.documentElement.setAttribute('data-theme', $theme);
+    document.documentElement.classList.value = $theme;
+  }
+</script>
+
+{#await theme.load() then}
+  <div
+    class="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>
+    <Footer />
+  </div>
+{/await}

src/assets/svelte.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="26.6" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 308"><path fill="#FF3E00" d="M239.682 40.707C211.113-.182 154.69-12.301 113.895 13.69L42.247 59.356a82.198 82.198 0 0 0-37.135 55.056a86.566 86.566 0 0 0 8.536 55.576a82.425 82.425 0 0 0-12.296 30.719a87.596 87.596 0 0 0 14.964 66.244c28.574 40.893 84.997 53.007 125.787 27.016l71.648-45.664a82.182 82.182 0 0 0 37.135-55.057a86.601 86.601 0 0 0-8.53-55.577a82.409 82.409 0 0 0 12.29-30.718a87.573 87.573 0 0 0-14.963-66.244"></path><path fill="#FFF" d="M106.889 270.841c-23.102 6.007-47.497-3.036-61.103-22.648a52.685 52.685 0 0 1-9.003-39.85a49.978 49.978 0 0 1 1.713-6.693l1.35-4.115l3.671 2.697a92.447 92.447 0 0 0 28.036 14.007l2.663.808l-.245 2.659a16.067 16.067 0 0 0 2.89 10.656a17.143 17.143 0 0 0 18.397 6.828a15.786 15.786 0 0 0 4.403-1.935l71.67-45.672a14.922 14.922 0 0 0 6.734-9.977a15.923 15.923 0 0 0-2.713-12.011a17.156 17.156 0 0 0-18.404-6.832a15.78 15.78 0 0 0-4.396 1.933l-27.35 17.434a52.298 52.298 0 0 1-14.553 6.391c-23.101 6.007-47.497-3.036-61.101-22.649a52.681 52.681 0 0 1-9.004-39.849a49.428 49.428 0 0 1 22.34-33.114l71.664-45.677a52.218 52.218 0 0 1 14.563-6.398c23.101-6.007 47.497 3.036 61.101 22.648a52.685 52.685 0 0 1 9.004 39.85a50.559 50.559 0 0 1-1.713 6.692l-1.35 4.116l-3.67-2.693a92.373 92.373 0 0 0-28.037-14.013l-2.664-.809l.246-2.658a16.099 16.099 0 0 0-2.89-10.656a17.143 17.143 0 0 0-18.398-6.828a15.786 15.786 0 0 0-4.402 1.935l-71.67 45.674a14.898 14.898 0 0 0-6.73 9.975a15.9 15.9 0 0 0 2.709 12.012a17.156 17.156 0 0 0 18.404 6.832a15.841 15.841 0 0 0 4.402-1.935l27.345-17.427a52.147 52.147 0 0 1 14.552-6.397c23.101-6.006 47.497 3.037 61.102 22.65a52.681 52.681 0 0 1 9.003 39.848a49.453 49.453 0 0 1-22.34 33.12l-71.664 45.673a52.218 52.218 0 0 1-14.563 6.398"></path></svg>

src/lib/Index.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import CallTauri from '$lib/example/call-tauri/CallTauri.svelte';
+  import HashInput from '$lib/example/hash/HashInput.svelte';
+</script>
+
+<div class="flex flex-col gap-8 items-center font-bold drop-shadow-ft">
+  <h1 class="text-4xl mt-16">Welcome</h1>
+  <h2 class="text-xl">
+    This is a <span class="bg-secondary text-secondary-content rounded-md p-1"
+      >Svelte Tauri</span
+    > Template
+  </h2>
+
+  <CallTauri />
+  <HashInput />
+</div>

src/lib/example/call-tauri/CallTauri.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { fade } from 'svelte/transition';
+	import { invoke } from '@tauri-apps/api';
+
+	let message = '';
+
+	async function callTauri() {
+		message = await invoke('called_from_js');
+	}
+</script>
+
+<button on:click={callTauri} class=" font-extrabold btn btn-outline btn-secondary btn-md"
+	>Call Tauri</button
+>
+<div class="relative">
+	{#key message}
+		<p
+			class="absolute outline-secondary border-b-2 border-secondary text-2xl
+     whitespace-nowrap
+      -translate-x-1/2 -translate-y-1/2"
+			in:fade={{ duration: 300 }}
+		>
+			{message}
+		</p>
+	{/key}
+</div>

src/lib/example/footer/Footer.svelte

@@ -0,0 +1,13 @@
+<!-- Make she the bottom rounded value of fixed elements is the same as  html/body in the app.scss file  -->
+<div
+	class="fixed bottom-0 w-full rounded-b-3xl h-12 items-center flex justify-around bg-base-100 shadow-[0_-10px_15px_-3px_rgba(0,0,0,0.1)]"
+>
+	<a target="_blank" href="https://github.com/Fractal-Tess">
+		Made by <span class="text-secondary-content bg-secondary p-[4px] rounded-md">Fractal-Tess</span>
+	</a>
+
+	<a
+		href="https://github.com/Fractal-Tess/Sveltekit-Tauri-Template"
+		class="border-b-2 border-secondary">GitHub</a
+	>
+</div>

src/lib/example/hash/HashInput.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { invoke } from '@tauri-apps/api';
+
+  let hashInput = 'Hello world';
+  let hashOutput: string = '';
+  $: (async () => {
+    hashOutput = await invoke('hash256sum', { hashInput });
+  })();
+</script>
+
+<span class="text-center -mb-4 text-md">{hashOutput}</span>
+<div class="form-control">
+  <label class="input-group">
+    <span>Hash string</span>
+    <input
+      bind:value={hashInput}
+      type="text"
+      class="input input-bordered input-secondary focus:ring-secondary focus:border-secondary focus:outline-none"
+    />
+  </label>
+</div>

src/lib/example/header/Header.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import ThemeToggleIcon from '$lib/example/header/ThemeToggleIcon.svelte';
+	import { theme } from '$lib/stores/theme';
+	import { appWindow } from '@tauri-apps/api/window';
+</script>
+
+<div data-tauri-drag-region class="h-12 bg-base-100 shadow-lg items-center justify-between flex">
+	<button on:click={theme.toggleTheme} class="hover:text-secondary ml-2" aria-live="polite">
+		<ThemeToggleIcon cssClass={'w-8'} />
+	</button>
+
+	<div>
+		<button
+			on:click={appWindow.minimize}
+			aria-live="polite"
+			class="p-2 text-xl hover:text-secondary h-full"
+		>
+			<i class="fa-solid fa-window-minimize w-6" />
+		</button>
+		<button
+			on:click={appWindow.close}
+			aria-live="polite"
+			class="p-2 text-2xl hover:text-secondary h-full"
+		>
+			<i class="fa-solid fa-xmark w-6" />
+		</button>
+	</div>
+</div>

src/lib/example/header/ThemeToggleIcon.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+	export let cssClass = 'w-8';
+</script>
+
+<svg class={cssClass} 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" />
+	</mask>
+	<circle
+		class="sun"
+		cx="12"
+		cy="12"
+		r="6"
+		mask="url(#moon-mask)"
+		fill="currentColor"
+	/>
+	<g class="sun-beams" stroke="currentColor" stroke-width="2px">
+		<line x1="12" y1="1" x2="12" y2="3" />
+		<line x1="12" y1="21" x2="12" y2="23" />
+		<line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+		<line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+		<line x1="1" y1="12" x2="3" y2="12" />
+		<line x1="21" y1="12" x2="23" y2="12" />
+		<line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+		<line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+	</g>
+</svg>
+
+<style>
+	svg .moon,
+	svg .sun,
+	svg .sun-beams {
+		transform-origin: center center;
+	}
+
+	:global(.light) svg .sun {
+		transform: scale(1.75);
+	}
+
+	:global(.light) svg .sun-beams {
+		opacity: 0;
+	}
+
+	:global(.light) svg .moon > circle {
+		transform: translateX(-7px);
+	}
+
+	@supports (cx: 1) {
+		:global(.light) svg .moon > circle {
+			transform: translateX(0);
+			cx: 17;
+		}
+	}
+
+	@media (prefers-reduced-motion: no-preference) {
+		svg .sun {
+			transition: transform var(--transition-duration-long)
+				var(--ease-elastic-3);
+		}
+
+		svg .sun-beams {
+			transition: transform var(--transition-duration-long)
+					var(--ease-elastic-4),
+				opacity var(--transition-duration-long) var(--ease-3);
+		}
+
+		svg .moon > circle {
+			transition: transform calc(var(--transition-duration-long) / 2)
+				var(--ease-out-5);
+		}
+
+		@supports (cx: 1) {
+			svg .moon > circle {
+				transition: cx calc(var(--transition-duration-long) / 2)
+					var(--ease-out-5);
+			}
+		}
+
+		:global(.light) svg .sun {
+			transform: scale(1.75);
+			transition-timing-function: var(--ease-3);
+			transition-duration: calc(var(--transition-duration-long) / 2);
+		}
+
+		:global(.light) svg .sun-beams {
+			transform: rotateZ(-25deg);
+			transition-duration: calc(var(--transition-duration-long) / 3);
+		}
+
+		:global(.light) svg .moon > circle {
+			transition-delay: calc(var(--transition-duration-long) / 2);
+			transition-duration: var(--transition-duration-long);
+		}
+	}
+</style>

src/lib/stores/theme.ts

@@ -0,0 +1,29 @@
+import { Store } from 'tauri-plugin-store-api';
+import type { Theme } from '../../types';
+import { writable } from 'svelte/store';
+
+const store = new Store('.settings.dat');
+
+const createThemeStore = () => {
+	const { subscribe, update, set } = writable('');
+
+	return {
+		subscribe,
+		toggleTheme: () => {
+			update(currentTheme => {
+				const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+				store.set('theme', newTheme);
+				return newTheme;
+			});
+		},
+		load: async () => {
+			let storedTheme = (await store.get('theme')) as Theme | null;
+			if (!storedTheme) {
+				storedTheme = 'dark';
+				store.set('theme', storedTheme);
+			}
+			set(storedTheme);
+		}
+	};
+};
+export const theme = createThemeStore();

src/main.ts

@@ -0,0 +1,9 @@
+import '$styles';
+import '@fortawesome/fontawesome-free/js/all.js';
+import App from './App.svelte';
+
+const app = new App({
+  target: document.getElementById('app'),
+});
+
+export default app;

src/styles/app.scss

@@ -0,0 +1,46 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html {
+  -webkit-font-smoothing: antialiased;
+}
+body,
+html {
+  // Fix tailwindcss/daisyUI applying color to the body tag
+  background-color: transparent !important;
+  @apply rounded-3xl overflow-hidden;
+}
+
+/* css vars */
+* {
+  @apply transition-all;
+
+  --transition-duration-short: 0.15s;
+  --transition-duration-long: 0.4s;
+
+  --ease-1: cubic-bezier(0.25, 0, 0.5, 1);
+  --ease-2: cubic-bezier(0.25, 0, 0.4, 1);
+  --ease-3: cubic-bezier(0.25, 0, 0.3, 1);
+  --ease-4: cubic-bezier(0.25, 0, 0.2, 1);
+  --ease-5: cubic-bezier(0.25, 0, 0.1, 1);
+
+  --ease-out-1: cubic-bezier(0, 0, 0.75, 1);
+  --ease-out-2: cubic-bezier(0, 0, 0.5, 1);
+  --ease-out-3: cubic-bezier(0, 0, 0.3, 1);
+  --ease-out-4: cubic-bezier(0, 0, 0.1, 1);
+  --ease-out-5: cubic-bezier(0, 0, 0, 1);
+
+  --ease-elastic-1: cubic-bezier(0.5, 0.75, 0.75, 1.25);
+  --ease-elastic-2: cubic-bezier(0.5, 1, 0.75, 1.25);
+  --ease-elastic-3: cubic-bezier(0.5, 1.25, 0.75, 1.25);
+  --ease-elastic-4: cubic-bezier(0.5, 1.5, 0.75, 1.25);
+  --ease-elastic-5: cubic-bezier(0.5, 1.75, 0.75, 1.25);
+}
+
+.dev {
+  outline: 2px solid red;
+}
+.dev-border {
+  border: 3px solid red;
+}

src/styles/variables.scss

@@ -0,0 +1 @@
+// Use this file for variable used in scss, this file will be imported into every single component

src/vite-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />