update deployment

.github/workflows/build.yml

@@ -1,13 +1,9 @@
 name: Build
 
-on:
-  push:
-    tags:
-      - "v*"
-  workflow_dispatch:
+on: [push]
 
 jobs:
-  CI:
+  build:
     name: 🔨🚀 Build and deploy
     runs-on: ubuntu-latest
     steps:
@@ -38,17 +34,23 @@ jobs:
       - name: 🔨 Build site
         run: pnpm build
 
-      - name: 📦 Upload build artifacts
-        uses: actions/[email protected]
-        with:
-          name: build
-          path: build
-      - name: Disable jekyll
-        run: touch build/.nojekyll
-      - name: Custom domain
-        run: echo 'manager.charachorder.com' > build/CNAME
-      - run: git config user.name github-actions
-      - run: git config user.email [email protected]
-      - run: git --work-tree build add --all
-      - run: git commit -m "Automatic Deploy action run by github-actions"
-      - run: git push origin HEAD:gh-pages --force
+      - name: Setup SSH
+        run: |
+          install -m 600 -D /dev/null ~/.ssh/id_rsa
+          echo "${{ secrets.DEPLOY_SSH_KEY }}" > ~/.ssh/id_rsa
+          echo "${{ secrets.DEPLOY_KNOWN_HOSTS }}" > ~/.ssh/known_hosts
+
+      - name: Publish Stable
+        if: ${{ gitub.ref == 'ref/head/v*' }}
+        run: rsync -rav --mkpath --delete build/ [email protected]:/home/deploy/www/
+
+      - name: Publish Dev
+        if: ${{ github.ref == 'ref/head/main' }}
+        run: rsync -rav --mkpath --delete build/ [email protected]:/home/deploy/dev/
+
+      - name: Publish Tag
+        if: ${{ gitub.ref == 'ref/head/v*' }}
+        run: rsync -rav --mkpath --delete build/ [email protected]:/home/deploy/ref/${GITHUB_REF##*/v}
+
+      - name: Publish Commit
+        run: rsync -rav --mkpath --delete build/ [email protected]:/home/deploy/ref/${{ github.sha }}

icons.config.js

@@ -18,6 +18,8 @@ const config = {
     "update",
     "offline_pin",
     "warning",
+    "dangerous",
+    "check",
     "cable",
     "person",
     "sync",

src/env.d.ts

@@ -15,6 +15,7 @@ interface ImportMetaEnv {
   readonly VITE_LATEST_FIRMWARE: string;
   readonly VITE_STORE_URL: string;
   readonly VITE_MATRIX_URL: string;
+  readonly VITE_FIRMWARE_URL: string;
 }
 
 interface ImportMeta {

src/routes/(app)/ota-update/+layout.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  let { children } = $props();
+</script>
+
+<h1><a href="/ota-update/">Firmware Update</a></h1>
+
+{@render children()}
+
+<style lang="scss">
+  h1 {
+    margin-block: 1em;
+    padding: 0;
+    font-size: 3em;
+    font-weight: 400;
+  }
+</style>

src/routes/(app)/ota-update/+page.svelte

@@ -1,15 +1,91 @@
 <script lang="ts">
   import { serialPort } from "$lib/serial/connection";
+  import { slide } from "svelte/transition";
+
+  let { data } = $props();
 
   let files: FileList | null = $state(null);
 
   $effect(() => {
     const file = files?.[0];
     if (file && $serialPort) {
-
       $serialPort.updateFirmware(file);
     }
   });
+
+  let currentDevice = $derived(
+    $serialPort
+      ? `${$serialPort.device.toLowerCase()}_${$serialPort.chipset.toLowerCase()}`
+      : undefined,
+  );
 </script>
 
+<ul>
+  {#each data.devices as device}
+    <li>
+      <a href="./{device.name}/" class:highlight={device.name === currentDevice}
+        >{device.name}</a
+      >
+    </li>
+  {/each}
+</ul>
+
+{#if !currentDevice}
+  <aside transition:slide>Connect your device to see which one you need</aside>
+{/if}
+
 <input type="file" accept=".bin" bind:files />
+
+<style lang="scss">
+  ul {
+    display: flex;
+    list-style: none;
+    gap: 8px;
+  }
+
+  li {
+    margin: 0;
+    padding: 0;
+  }
+
+  a {
+    outline: 1px solid var(--md-sys-color-outline);
+    border-radius: 8px;
+    transition:
+      background-color 200ms ease,
+      color 200ms ease,
+      outline-offset 200ms ease,
+      outline-color 200ms ease;
+  }
+
+  @keyframes highlight {
+    0% {
+      outline-offset: 0;
+    }
+    100% {
+      outline-offset: 4px;
+    }
+  }
+
+  @keyframes wiggle {
+    0% {
+      transform: rotate(0deg);
+      scale: 1;
+    }
+    50% {
+      transform: rotate(-5deg);
+    }
+    100% {
+      transform: rotate(-5deg);
+      scale: 1.1;
+    }
+  }
+
+  .highlight {
+    outline-width: 2px;
+    outline-color: var(--md-sys-color-primary);
+    animation: wiggle 500ms ease 2 alternate;
+    background-color: var(--md-sys-color-primary-container);
+    color: var(--md-sys-color-on-primary-container);
+  }
+</style>

src/routes/(app)/ota-update/+page.ts

@@ -0,0 +1,9 @@
+import type { PageLoad } from "./$types";
+import type { DirectoryListing } from "./listing";
+
+export const load = (async ({ fetch }) => {
+  const result = await fetch(import.meta.env.VITE_FIRMWARE_URL);
+  const data = await result.json();
+
+  return { devices: data as DirectoryListing[] };
+}) satisfies PageLoad;

src/routes/(app)/ota-update/[device]/+page.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+  let { data } = $props();
+
+  let showPrerelease = $state(false);
+</script>
+
+<div class="title">
+  <h2>Versions available for <em>{data.device}</em></h2>
+  <label
+    >Include Pre-releases<input
+      type="checkbox"
+      bind:checked={showPrerelease}
+    /></label
+  >
+</div>
+
+{#if data.versions}
+  <ul>
+    {#each data.versions as version}
+      {@const isPrerelease = version.name.includes("-")}
+      <li class:pre-release={isPrerelease}>
+        <a href="./{version.name}/"
+          >{version.name}
+          <time datetime={version.mtime}
+            >{new Date(version.mtime).toLocaleDateString()}</time
+          ></a
+        >
+      </li>
+    {/each}
+  </ul>
+{:else}
+  <h2>The device {data.device} does not exist.</h2>
+{/if}
+
+<style lang="scss">
+  .pre-release {
+    margin-inline-start: 2em;
+  }
+
+  ul {
+    list-style: none;
+    padding: 0;
+  }
+
+  li {
+    height: 2em;
+    overflow: hidden;
+    transition:
+      height 200ms ease,
+      opacity 200ms ease;
+  }
+
+  label {
+    padding: 0;
+    opacity: 0.6;
+  }
+
+  .title {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+
+    h2 {
+      margin-block-end: 0;
+
+      em {
+        font-style: normal;
+        color: var(--md-sys-color-primary);
+      }
+    }
+  }
+
+  time {
+    opacity: 0.5;
+    &:before {
+      content: "•";
+      padding-inline: 0.4ch;
+    }
+  }
+
+  div.title:has(input:not(:checked)) ~ ul .pre-release {
+    height: 0;
+    opacity: 0;
+  }
+</style>

src/routes/(app)/ota-update/[device]/+page.ts

@@ -0,0 +1,16 @@
+import type { PageLoad } from "./$types";
+import type { DirectoryListing } from "../listing";
+
+export const load = (async ({ fetch, params }) => {
+  const result = await fetch(
+    `${import.meta.env.VITE_FIRMWARE_URL}/${params.device}/`,
+  );
+  const data = await result.json();
+
+  return {
+    versions: (data as DirectoryListing[]).sort((a, b) =>
+      b.name.localeCompare(a.name),
+    ),
+    device: params.device,
+  };
+}) satisfies PageLoad;