cleanup

src/lib/components/Navigation.svelte

@@ -106,7 +106,6 @@
       clip-path: polygon(25% 50%, 0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
       border-radius: 0;
 
-      &.active,
       &:active {
         color: var(--md-sys-color-on-tertiary);
         background: var(--md-sys-color-tertiary);

src/lib/components/RingInput.svelte

@@ -20,7 +20,10 @@
   }
 
   function getKeyDescriptions(keys: KeyInfo[]): string {
-    return keys.map(({title, id, code}, i) => `${title || id || code} (${layerNames[i]})`).join("\n")
+    return keys
+      .filter(it => !!it)
+      .map(({title, id, code}, i) => `${title || id || code} (${layerNames[i]})`)
+      .join("\n")
   }
 
   function getActions(id: number, layout: CharaLayout): KeyInfo[] {
@@ -35,11 +38,12 @@
   {#each [keys.n, keys.e, keys.s, keys.w] as id, quadrant}
     {@const actions = getActions(id, $layout)}
     <button title={getKeyDescriptions(actions)}>
-      {#each actions as { symbol, id }, layer}
-        {#if symbol || id}
+      {#each actions as keyInfo, layer}
+        {@const displayTitle = keyInfo?.symbol || keyInfo?.id}
+        {#if displayTitle}
           <span
             class:active={virtualLayerMap[activeLayer] === virtualLayerMap[layer]}
-            style="offset-distance: {offsetDistance(quadrant, layer, activeLayer)}%">{symbol || id}</span
+            style="offset-distance: {offsetDistance(quadrant, layer, activeLayer)}%">{displayTitle}</span
           >
         {/if}
       {/each}

src/lib/components/Terminal.svelte

@@ -11,12 +11,10 @@
 
   let value: string
   let io: HTMLDivElement
-
-  export let resizable = false
 </script>
 
 <form on:submit={submit}>
-  <div bind:this={io} class="io" class:resizable>
+  <div bind:this={io} class="io">
     {#each $serialLog as { type, value }}
       <p class={type} transition:slide>{value}</p>
     {/each}
@@ -44,10 +42,6 @@
     color: var(--md-sys-color-on-secondary);
 
     border-radius: 16px;
-
-    &.resizable {
-      resize: both;
-    }
   }
 
   ::-webkit-scrollbar {
@@ -125,21 +119,6 @@
     }
   }
 
-  .terminal.resizable fieldset::after {
-    content: "";
-
-    position: absolute;
-    right: 6px;
-    bottom: 8px;
-    rotate: -45deg;
-
-    width: 10px;
-    height: 5px;
-
-    background: var(--md-sys-color-on-secondary);
-    clip-path: polygon(0 0, 100% 0, 50% 100%);
-  }
-
   .anchor {
     overflow-anchor: auto;
     height: 1px;

src/routes/config/chords/+page.svelte

@@ -15,8 +15,12 @@
         <th>{phrase}</th>
         <td>
           {#each actions as action}
-            {@const {id, title, symbol} = KEYMAP_CODES[action]}
-            <abbr {title}>{symbol || id}</abbr>
+            {@const keyInfo = KEYMAP_CODES[action]}
+            {#if keyInfo}
+              <abbr title={keyInfo.title}>{keyInfo.symbol || keyInfo.id}</abbr>
+            {:else}
+              <pre>{action}</pre>
+            {/if}
           {/each}
         </td>
       </tr>

src/routes/device-manager/+page.svelte

@@ -1,5 +1,5 @@
 <script>
-  import {initSerial, serialPort} from "$lib/serial/connection.js"
+  import {initSerial, serialPort} from "$lib/serial/connection"
   import Terminal from "$lib/components/Terminal.svelte"
   import {browser} from "$app/environment"
 </script>

src/tools/minify-icon-font.ts

@@ -0,0 +1,110 @@
+/*
+ * Copyright (C) 2022 StApps
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the Free
+ * Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along with
+ * this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+// @ts-expect-error missing types
+import {openSync} from "fontkit"
+import {exec} from "child_process"
+import config from "../../icons.config"
+import {statSync, existsSync} from "fs"
+
+async function run(command: string[] | string): Promise<string> {
+  const fullCommand = Array.isArray(command) ? command.join(" ") : command
+  console.log(`>> ${fullCommand}`)
+
+  return new Promise((resolve, reject) => {
+    exec(fullCommand, (error, stdout, stderr) => {
+      if (error) {
+        reject(error)
+      } else if (stderr) {
+        reject(stderr)
+      } else {
+        resolve(stdout.trim())
+      }
+    })
+  })
+}
+
+const icons = new Set(config.icons)
+
+console.log("Icons used:", [...icons.values()].sort())
+const font = openSync(config.inputPath)
+
+const glyphs = ["5f-7a", "30-39"]
+for (const icon of icons) {
+  const iconGlyphs: Array<{id: string}> = font.layout(icon).glyphs
+  if (iconGlyphs.length === 0) {
+    console.error(`${icon} not found in font. Typo?`)
+    process.exit(-1)
+  }
+
+  const codePoints = iconGlyphs
+    .flatMap(it => font.stringsForGlyph(it.id))
+    .flatMap(it => [...it])
+    .map(it => it.codePointAt(0).toString(16))
+
+  if (codePoints.length === 0) {
+    const codePoint = config.codePoints[icon]
+    if (config.codePoints?.[icon]) {
+      glyphs.push(config.codePoints[icon])
+    } else {
+      console.log()
+      console.error(`${icon} code point could not be determined. Add it to config.codePoints.`)
+      process.exit(-1)
+    }
+  }
+
+  glyphs.push(...codePoints)
+}
+glyphs.sort()
+
+const pythonPath = "./venv/bin/python"
+if (!existsSync(pythonPath)) {
+  throw new Error(`Expected a python virtual environment at ${pythonPath}`)
+}
+console.log(await run(`${pythonPath} --version`))
+console.log(
+  await run([
+    pythonPath,
+    "-m fontTools.subset",
+    `"${config.inputPath}"`,
+    `--unicodes=${glyphs.join(",")}`,
+    "--no-layout-closure",
+    `--output-file="${config.outputPath}"`,
+    "--flavor=woff2",
+  ]),
+)
+
+console.log(`${glyphs.length} Used Icons Total`)
+console.log(`Minified font saved to ${config.outputPath}`)
+const result = statSync(config.outputPath).size
+const before = statSync(config.inputPath).size
+
+console.log(
+  `${toByteUnit(before)} > ${toByteUnit(result)} (${(((before - result) / before) * 100).toFixed(
+    2,
+  )}% Reduction)`,
+)
+
+/**
+ * Bytes to respective units
+ */
+function toByteUnit(value: number) {
+  if (value < 1024) {
+    return `${value}B`
+  } else if (value < 1024 * 1024) {
+    return `${(value / 1024).toFixed(2)}KB`
+  } else {
+    return `${(value / 1024 / 1024).toFixed(2)}MB`
+  }
+}