feat: add info page (#8)

src/components/Home/InfoDialog.svelte

@@ -0,0 +1,36 @@
+<script>
+    import Dialog from "../Dialog.svelte";
+</script>
+
+<Dialog id="infoDialog">
+    <h1 class="text-center">Vertretungsapp<span class="text-accent">.</span></h1>
+    <h4 class="text-center">Deine Vertretungsapp für Indiware!</h4>
+
+    <div class="text-grayedOut text-center my-4">
+        <p>Lizenziert unter <a class="underline" href="https://github.com/SachsenspieltCoding/vertretungsapp/blob/master/LICENSE" target="_blank">GNU GPLv3</a></p>
+        <p>Version: {VERSION}</p>
+    </div>
+
+    <div class="flex gap-2 justify-center my-4">
+        <a href="https://github.com/SachsenspieltCoding/vertretungsapp" target="_blank">GitHub</a>
+        <p class="text-accent">・</p>
+        <a href="https://vertretungsapp.de/discord" target="_blank">Discord</a>
+        <p class="text-accent">・</p>
+        <a href="https://vertretungsapp.de" target="_blank">Website</a>
+
+    </div>
+
+    <div class="flex gap-2 justify-center text-grayedOut my-4">
+        <a href="https://vertretungsapp.de/imprint" target="_blank">Impressum</a>
+        <p>・</p>
+        <a href="https://vertretungsapp.de/privacy" target="_blank">Datenschutz</a>
+    </div>
+
+    <input class="w-full cursor-pointer" type="button" value="Schließen" on:click={() => document.querySelector('#infoDialog').close()} />
+</Dialog>
+
+<style>
+    a,p {
+        font-size: 0.9rem;
+    }
+</style>

src/components/LoginAndSettings/LoginAndSettings.svelte

@@ -1,13 +1,14 @@
 <script>
 	import LoginAndSettingsIcon from './LoginAndSettingsIcon.svelte';
-	import { faKey } from '@fortawesome/free-solid-svg-icons';
-	import { faGear } from '@fortawesome/free-solid-svg-icons';
+	import {faGear, faInfoCircle, faKey} from '@fortawesome/free-solid-svg-icons';
 	import LoginDialog from '../Login/LoginDialog.svelte';
 	import SettingsDialog from '../Settings/SettingsDialog.svelte';
+	import InfoDialog from "../Home/InfoDialog.svelte";
 </script>
 
 <LoginDialog />
 <SettingsDialog />
+<InfoDialog />
 
 <div class="flex items-center justify-end gap-2">
 	<LoginAndSettingsIcon
@@ -18,4 +19,8 @@
 		icon={faGear}
 		onClick={() => document.querySelector('#settingsDialog').showModal()}
 	/>
+	<LoginAndSettingsIcon
+			icon={faInfoCircle}
+			onClick={() => document.querySelector('#infoDialog').showModal()}
+	/>
 </div>

src/components/LoginAndSettings/LoginAndSettingsIcon.svelte

@@ -10,10 +10,9 @@
 	}
 </script>
 
-<div
-	class="staticBorder aspect-square cursor-pointer rounded-[7px] p-1"
-	on:keypress={() => {}}
+<button
+	class="staticBorder aspect-square cursor-pointer rounded-[7px] p-1 flex items-center justify-center"
 	on:click={handleClick}
 >
 	<Icon data={icon} scale="1.5" />
-</div>
+</button>

vite.config.ts

@@ -1,8 +1,17 @@
 import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
 import mkCert from 'vite-plugin-mkcert';
+import { readFileSync } from 'fs';
+import { fileURLToPath } from 'url';
+
+const file = fileURLToPath(new URL('package.json', import.meta.url));
+const json = readFileSync(file, 'utf8');
+const pkg = JSON.parse(json);
 
 export default defineConfig({
 	server: { https: true },
-	plugins: [sveltekit(), mkCert()]
+	plugins: [sveltekit(), mkCert()],
+	define: {
+		'VERSION': JSON.stringify(pkg.version),
+	}
 });