pwa adjustments

src/routes/+layout.svelte

@@ -2,16 +2,22 @@
   import "$lib/style/fonts/noto-sans-mono.scss"
   import "$lib/style/fonts/material-symbols-rounded.scss"
   import {onMount} from "svelte"
-  import {applyTheme, argbFromHex, themeFromSourceColor} from "@material/material-color-utilities"
+  import {
+    applyTheme,
+    argbFromHex,
+    hexFromArgb,
+    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},
+  ])
+
   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})
 
@@ -38,6 +44,9 @@
 
 <svelte:head>
   {@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)} />
 </svelte:head>
 
 <Navigation />

src/routes/config/+layout.svelte

@@ -1,19 +1,20 @@
 <script>
   import {page} from "$app/stores"
+
+  const paths = [
+    {href: "/config/chords", title: "Chords", icon: "piano"},
+    {href: "/config/layout", title: "Layout", icon: "keyboard"},
+    {href: "/config/settings", title: "Settings", icon: "settings"},
+  ]
 </script>
 
 <nav>
-  <a href="/config/chords" class:active={$page.url.pathname.endsWith("chords/")}>
+  {#each paths as { href, title, icon }}
-    <span class="icon">piano</span>Chords
+    <a {href} class:active={$page.url.pathname === href}>
-  </a>
+      <span class="icon">{icon}</span>
-  <a href="/config/layout" class:active={$page.url.pathname.endsWith("layout/")}>
+      {title}
-    <span class="icon">keyboard</span>
+    </a>
-    Layout
+  {/each}
-  </a>
-  <a href="/config/settings" class:active={$page.url.pathname.endsWith("settings/")}>
-    <span class="icon">settings</span>
-    Settings
-  </a>
 </nav>
 
 <slot />

static/.htaccess

@@ -4,6 +4,10 @@ RewriteEngine On
 RewriteCond %{HTTPS}  !=on
 RewriteRule ^/?(.*) https://%{SERVER_NAME}/$1 [R,L]
 
+# remove trailing slash
+RewriteCond %{REQUEST_FILENAME} !-d
+RewriteRule ^(.*)/$ /$1 [L,R] # R=301
+
 # SPA mode
 RewriteBase /
 RewriteRule ^200\.html$ - [L]
@@ -11,6 +15,6 @@ RewriteCond %{REQUEST_FILENAME} !-f
 RewriteCond %{REQUEST_FILENAME} !-d
 RewriteRule . /200.html [L]
 
-# remove trailing slash
+# redirect not found urls to .html files
-RewriteCond %{REQUEST_FILENAME} !-d
+RewriteCond %{REQUEST_FILENAME} !-f
-RewriteRule ^(.*)/$ /$1 [L,R=301]
+RewriteRule ^([^./]+)/?$ $1.html [QSA]

vite.config.js

@@ -3,5 +3,20 @@ import {defineConfig} from "vite"
 import {SvelteKitPWA} from "@vite-pwa/sveltekit"
 
 export default defineConfig({
-  plugins: [sveltekit(), SvelteKitPWA()],
+  plugins: [
+    sveltekit(),
+    SvelteKitPWA({
+      kit: {
+        adapterFallback: "/200.html",
+        trailingSlash: "never",
+      },
+      base: "/",
+      workbox: {
+        modifyURLPrefix: {
+          "": "/",
+          "./": "/",
+        },
+      },
+    }),
+  ],
 })