refactor

tfweb/package.json

@@ -29,6 +29,7 @@
 	},
 	"type": "module",
 	"dependencies": {
+		"@sveltejs/adapter-static": "^2.0.1",
 		"a17t": "^0.10.1"
 	}
 }

tfweb/src/components/Header.svelte

@@ -1,10 +1,8 @@
 <script lang="ts">
-    import {t} from "../scripts/i18n";
-    import {theme} from "../stores/ThemeStore.js";
-    import {get} from "svelte/store";
-    import {onMount} from "svelte";
-    import {getCurrentLocale, locales} from "../scripts/i18n.js";
-    import {locale} from "../stores/LocaleStore";
+    import {t} from "$lib/i18n";
+    import {theme} from "$lib/stores/ThemeStore.js";
+    import {getCurrentLocale, locales} from "$lib/i18n.js";
+    import {locale} from "$lib/stores/LocaleStore";
 
     function toggleTheme() {
         if ($theme === "dark") {
@@ -47,19 +45,19 @@
                 </div>
 
                 <div class:hidden={!dropdownOpen}
-                     class="transition absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-slate-100 dark:bg-slate-700 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+                     class="transition absolute right-0 z-10 w-min mt-2 origin-top-right rounded-md bg-slate-100 dark:bg-slate-700 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
                      role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1" on:mouseleave={closeIfOpen}>
                     <div class="p-2" role="none">
 
-                        <div class="rounded p-2 bg-slate-200 dark:bg-slate-600" role="menuitem" tabindex="-1">
+                        <div class="whitespace-nowrap rounded p-2 bg-slate-200 dark:bg-slate-600" role="menuitem" tabindex="-1">
                             <div>
                                 <span class="mr-3 fi fi-{t('common.flag')}"></span>
-                                <span class="mt-0.2">{t("common.localeName")} - {t("common.selected")}</span>
+                                <span class="mt-0.2 mr-0.5">{t("common.localeName")} <span class="text-slate-400">- {t("common.selected")}</span></span>
                             </div>
                         </div>
 
                         {#each Object.keys(locales) as locale, i}
-                            {#if getCurrentLocale() != locale}
+                            {#if getCurrentLocale() !== locale}
                                 <div class="rounded p-2 mt-2 hover:bg-slate-300 hover:dark:bg-slate-800 transition"
                                      role="menuitem" tabindex="-1" on:click={() => {setLocale(locale)}}>
                                     <div>

tfweb/src/components/Theme.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import {onMount} from "svelte";
-    import {Logger, logSetup} from "../scripts/logger";
-    import {theme} from "../stores/ThemeStore";
+    import {Logger, logSetup} from "$lib/logger";
+    import {theme} from "$lib/stores/ThemeStore";
     import {get} from "svelte/store";
 
     onMount(() => {

tfweb/src/lib/i18n.ts

@@ -1,10 +1,10 @@
-import {locale} from "../stores/LocaleStore";
+import {locale} from "$lib/stores/LocaleStore";
 import {get} from "svelte/store";
 
-import en from "../i18n/en.json";
-import jp from "../i18n/jp.json";
-import nl from "../i18n/nl.json";
-import {Logger, logSetup} from "./logger";
+import en from "$lib/i18n/en.json";
+import jp from "$lib/i18n/jp.json";
+import nl from "$lib/i18n/nl.json";
+import {Logger, logSetup} from "$lib/logger";
 
 logSetup();
 const logger = new Logger("i18n");

tfweb/src/lib/logger.ts

@@ -90,7 +90,7 @@ export function consoleLogDump() {
 }
 
 export class Logger {
-    private name: string;
+    private readonly name: string;
 
     constructor(name: string) {
         this.name = name;

tfweb/src/lib/stores/LocaleStore.ts

@@ -0,0 +1,3 @@
+import { persist } from "$lib/PersistentStore";
+
+export const locale = persist("lang", "en");

tfweb/src/lib/stores/ThemeStore.ts

@@ -0,0 +1,3 @@
+import { persist } from "$lib/PersistentStore";
+
+export const theme = persist("theme", "light");

tfweb/src/routes/+layout.ts

@@ -0,0 +1 @@
+export const prerender = true;

tfweb/src/routes/auth/login/+page.svelte

@@ -1,3 +1,17 @@
-<script>
-    import Header from "../../../components/Header.svelte";
+<script lang="ts">
+    import {t} from "$lib/i18n";
+
+    let email = "";
+    function generateMagicLink() {
+
+    }
 </script>
+
+<h1>{t('login.title')}</h1>
+<h2>{t('login.subtitle')}</h2>
+
+<form on:submit|preventDefault={generateMagicLink}>
+    <label for="email">{t('login.prompt')}</label>
+    <input type="text" id="email" bind:value={email} />
+    <button>{t('login.actionButtonText')}</button>
+</form>

tfweb/src/stores/LocaleStore.ts

@@ -1,3 +0,0 @@
-import { persist } from "../scripts/PersistentStore";
-
-export const locale = persist("lang", "en");

tfweb/src/stores/ThemeStore.ts

@@ -1,3 +0,0 @@
-import { persist } from "../scripts/PersistentStore";
-
-export const theme = persist("theme", "light");

tfweb/svelte.config.js

@@ -1,4 +1,4 @@
-import adapter from '@sveltejs/adapter-auto';
+import adapter from '@sveltejs/adapter-static';
 import { vitePreprocess } from '@sveltejs/kit/vite';
 
 /** @type {import('@sveltejs/kit').Config} */
@@ -8,7 +8,13 @@ const config = {
 	preprocess: vitePreprocess(),
 
 	kit: {
-		adapter: adapter()
+		adapter: adapter({
+			pages: 'build',
+			assets: 'build',
+			fallback: null,
+			precompress: false,
+			strict: true
+		})
 	}
 };
 

tfweb/yarn.lock

@@ -197,6 +197,11 @@
   dependencies:
     import-meta-resolve "^2.2.0"
 
+"@sveltejs/adapter-static@^2.0.1":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@sveltejs/adapter-static/-/adapter-static-2.0.1.tgz#b76f7742ae635e1c063efcab8c6de064255f6292"
+  integrity sha512-o5/q3YwD/ErxYCFlK1v3ydvldyNKk1lh3oeyxn4mhz+Pkbx/uuxhzmbOpytTlp5aVqNHDVsb04xadUzOFCDDzw==
+
 "@sveltejs/kit@^1.5.0":
   version "1.7.2"
   resolved "https://registry.yarnpkg.com/@sveltejs/kit/-/kit-1.7.2.tgz#ec90d5f7d18a8c40e5a6d8dfae43acaa00f6b199"