From db8b1a72a417e017e20c274460ea0c2e5059c5b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thea=20Sch=C3=B6bl?= <dev@theaninova.de>
Date: Thu, 6 Jul 2023 01:12:24 +0200
Subject: [PATCH] pwa adjustments

---
 src/lib/style/theme.server.js | 10 ++++++++++
 src/routes/+layout.server.js  | 10 ++++++++++
 src/routes/+layout.svelte     | 17 +++++++----------
 src/routes/+page.js           |  2 +-
 src/routes/config/+page.js    |  2 +-
 static/.nojekyll              |  0
 static/icon.svg               |  5 +++++
 svelte.config.js              |  1 +
 vite.config.js                | 15 +++++++++++++++
 9 files changed, 50 insertions(+), 12 deletions(-)
 create mode 100644 src/lib/style/theme.server.js
 create mode 100644 src/routes/+layout.server.js
 delete mode 100644 static/.nojekyll
 create mode 100644 static/icon.svg

diff --git a/src/lib/style/theme.server.js b/src/lib/style/theme.server.js
new file mode 100644
index 00000000..03120a4d
--- /dev/null
+++ b/src/lib/style/theme.server.js
@@ -0,0 +1,10 @@
+import {argbFromHex, hexFromArgb, themeFromSourceColor} from "@material/material-color-utilities"
+
+export const themeBase = "#6D81C7"
+export const themeSuccessBase = "#00ff00"
+
+const theme = themeFromSourceColor(argbFromHex(themeBase), [
+  {name: "success", value: argbFromHex(themeSuccessBase), blend: true},
+])
+
+export const themeColor = hexFromArgb(theme.schemes.dark.background)
diff --git a/src/routes/+layout.server.js b/src/routes/+layout.server.js
new file mode 100644
index 00000000..3cf134e9
--- /dev/null
+++ b/src/routes/+layout.server.js
@@ -0,0 +1,10 @@
+import {themeBase, themeColor, themeSuccessBase} from "$lib/style/theme.server.js"
+
+/** @type {import("./$types").LayoutServerLoad} */
+export async function load() {
+  return {
+    themeSuccessBase,
+    themeBase,
+    themeColor,
+  }
+}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 184d8e71..fb4ef7a8 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -2,22 +2,19 @@
   import "$lib/style/fonts/noto-sans-mono.scss"
   import "$lib/style/fonts/material-symbols-rounded.scss"
   import {onMount} from "svelte"
-  import {
-    applyTheme,
-    argbFromHex,
-    hexFromArgb,
-    themeFromSourceColor,
-  } from "@material/material-color-utilities"
+  import {applyTheme, argbFromHex, themeFromSourceColor} from "@material/material-color-utilities"
   import Navigation from "$lib/components/Navigation.svelte"
   import {hasSerialPermission} from "$lib/serial/device.js"
   import {initSerial} from "$lib/serial/connection.js"
   import {pwaInfo} from "virtual:pwa-info"
 
-  const theme = themeFromSourceColor(argbFromHex("#6D81C7"), [
-    {name: "success", value: argbFromHex("#00ff00"), blend: true},
-  ])
+  /** @type {import('./$types').LayoutServerData} */
+  export let data
 
   onMount(async () => {
+    const theme = themeFromSourceColor(argbFromHex("#6D81C7"), [
+      {name: "success", value: argbFromHex("#00ff00"), blend: true},
+    ])
     const dark = true // window.matchMedia("(prefers-color-scheme: dark)").matches
     applyTheme(theme, {target: document.body, dark})
 
@@ -46,7 +43,7 @@
   {@html webManifestLink}
   <title>dot i/o</title>
   <meta name="description" content="Tool for CharaChorder devices" />
-  <meta name="theme-color" content={hexFromArgb(theme.schemes.dark.background)} />
+  <meta name="theme-color" content={data.themeColor} />
 </svelte:head>
 
 <Navigation />
diff --git a/src/routes/+page.js b/src/routes/+page.js
index f62a6d70..6a3553b6 100644
--- a/src/routes/+page.js
+++ b/src/routes/+page.js
@@ -2,5 +2,5 @@ import {redirect} from "@sveltejs/kit"
 
 /** @type {import("./$types").PageLoad} */
 export function load() {
-  throw redirect(300, "/config")
+  throw redirect(302, "/config")
 }
diff --git a/src/routes/config/+page.js b/src/routes/config/+page.js
index 877ffcce..60964402 100644
--- a/src/routes/config/+page.js
+++ b/src/routes/config/+page.js
@@ -2,5 +2,5 @@ import {redirect} from "@sveltejs/kit"
 
 /** @type {import("./$types").PageLoad} */
 export function load() {
-  throw redirect(300, "/config/chords")
+  throw redirect(302, "/config/chords")
 }
diff --git a/static/.nojekyll b/static/.nojekyll
deleted file mode 100644
index e69de29b..00000000
diff --git a/static/icon.svg b/static/icon.svg
new file mode 100644
index 00000000..809d0060
--- /dev/null
+++ b/static/icon.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<svg version="1.1" width="144" height="144" viewBox="0 0 144 144" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="72" cy="72" r="44" fill="black" />
+    <text x="72" y="82" font-size="36" font-weight="900" font-family="monospace" text-anchor="middle" dominant-baseline="middle" fill="white">i/o</text>
+</svg>
\ No newline at end of file
diff --git a/svelte.config.js b/svelte.config.js
index 475968f6..d8998df7 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -5,6 +5,7 @@ import preprocess from "svelte-preprocess"
 const config = {
   preprocess: [preprocess()],
   kit: {
+    inlineStyleThreshold: 8192,
     paths: {
       relative: false,
     },
diff --git a/vite.config.js b/vite.config.js
index 80a9f83d..08118bd7 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,6 +1,8 @@
 import {sveltekit} from "@sveltejs/kit/vite"
 import {defineConfig} from "vite"
 import {SvelteKitPWA} from "@vite-pwa/sveltekit"
+// noinspection ES6PreferShortImport
+// import {themeColor} from "./src/lib/style/theme.server.js"
 
 export default defineConfig({
   plugins: [
@@ -10,6 +12,19 @@ export default defineConfig({
         adapterFallback: "/200.html",
         trailingSlash: "never",
       },
+      includeAssets: ["favicon.png"],
+      manifest: {
+        name: "dot i/o",
+        id: "dot_io_v2",
+        // theme_color: themeColor,
+        icons: [
+          {
+            src: "icon.svg",
+            sizes: "144x144",
+            type: "image/svg+xml",
+          },
+        ],
+      },
       base: "/",
       workbox: {
         modifyURLPrefix: {