terminal improvements

2026-01-05 01:22:50 +00:00 · 2023-07-05 15:56:07 +02:00
parent e339e924dc
commit 9c875748f7
6 changed files with 315 additions and 40 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
        "@theaninova/prettier-config": "^1.0.0",
        "@types/w3c-web-serial": "^1.0.3",
        "@vite-pwa/sveltekit": "^0.2.5",
+        "gh-pages": "^5.0.0",
        "prettier": "^2.8.0",
        "prettier-plugin-svelte": "^2.10.1",
        "sass": "^1.63.6",
@@ -2566,6 +2567,15 @@
        "node": ">=8"
      }
    },
+    "node_modules/array-uniq": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz",
+      "integrity": "sha512-MNha4BWQ6JbwhFhj03YK552f7cb3AzoE8SzeljgChvL1dl3IcvggXVz1DilzySZkCja+CXuZbdW7yATchWn8/Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/arrify": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
@@ -2925,6 +2935,12 @@
        "node": ">=4.0.0"
      }
    },
+    "node_modules/commondir": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
+      "integrity": "sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==",
+      "dev": true
+    },
    "node_modules/concat-map": {
      "version": "0.0.1",
      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -3212,6 +3228,12 @@
      "integrity": "sha512-BLG5HxSELlrMx7dJ2s+8SFlsCtJp37Zpk2VAxyC6CZtbc+9AJeZHfYHbrlSgdXp6saQ8StMqOTEDaBKgA7u1sw==",
      "dev": true
    },
+    "node_modules/email-addresses": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/email-addresses/-/email-addresses-5.0.0.tgz",
+      "integrity": "sha512-4OIPYlA6JXqtVn8zpHpGiI7vE6EQOAg16aGnDMIAlZVinnoZ8208tW1hAbjWydgN/4PLTT9q+O1K6AH/vALJGw==",
+      "dev": true
+    },
    "node_modules/emoji-regex": {
      "version": "8.0.0",
      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
@@ -3492,6 +3514,32 @@
        "node": ">=10"
      }
    },
+    "node_modules/filename-reserved-regex": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/filename-reserved-regex/-/filename-reserved-regex-2.0.0.tgz",
+      "integrity": "sha512-lc1bnsSr4L4Bdif8Xb/qrtokGbq5zlsms/CYH8PP+WtCkGNF65DPiQY8vG3SakEdRn8Dlnm+gW/qWKKjS5sZzQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/filenamify": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/filenamify/-/filenamify-4.3.0.tgz",
+      "integrity": "sha512-hcFKyUG57yWGAzu1CMt/dPzYZuv+jAJUT85bL8mrXvNe6hWj6yEHEc4EdcgiA6Z3oi1/9wXJdZPXF2dZNgwgOg==",
+      "dev": true,
+      "dependencies": {
+        "filename-reserved-regex": "^2.0.0",
+        "strip-outer": "^1.0.1",
+        "trim-repeated": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
    "node_modules/fill-range": {
      "version": "7.0.1",
      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -3504,6 +3552,23 @@
        "node": ">=8"
      }
    },
+    "node_modules/find-cache-dir": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.2.tgz",
+      "integrity": "sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==",
+      "dev": true,
+      "dependencies": {
+        "commondir": "^1.0.1",
+        "make-dir": "^3.0.2",
+        "pkg-dir": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/avajs/find-cache-dir?sponsor=1"
+      }
+    },
    "node_modules/find-up": {
      "version": "4.1.0",
      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
@@ -3674,6 +3739,88 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/gh-pages": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/gh-pages/-/gh-pages-5.0.0.tgz",
+      "integrity": "sha512-Nqp1SjkPIB94Xw/3yYNTUL+G2dxlhjvv1zeN/4kMC1jfViTEqhtVz/Ba1zSXHuvXCN9ADNS1dN4r5/J/nZWEQQ==",
+      "dev": true,
+      "dependencies": {
+        "async": "^3.2.4",
+        "commander": "^2.18.0",
+        "email-addresses": "^5.0.0",
+        "filenamify": "^4.3.0",
+        "find-cache-dir": "^3.3.1",
+        "fs-extra": "^8.1.0",
+        "globby": "^6.1.0"
+      },
+      "bin": {
+        "gh-pages": "bin/gh-pages.js",
+        "gh-pages-clean": "bin/gh-pages-clean.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/gh-pages/node_modules/array-union": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
+      "integrity": "sha512-Dxr6QJj/RdU/hCaBjOfxW+q6lyuVE6JFWIrAUpuOOhoJJoQ99cUn3igRaHVB5P9WrgFVN0FfArM3x0cueOU8ng==",
+      "dev": true,
+      "dependencies": {
+        "array-uniq": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/gh-pages/node_modules/fs-extra": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
+      "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
+      "dev": true,
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^4.0.0",
+        "universalify": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=6 <7 || >=8"
+      }
+    },
+    "node_modules/gh-pages/node_modules/globby": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz",
+      "integrity": "sha512-KVbFv2TQtbzCoxAnfD6JcHZTYCzyliEaaeM/gH8qQdkKr5s0OP9scEgvdcngyk7AVdY6YVW/TJHd+lQ/Df3Daw==",
+      "dev": true,
+      "dependencies": {
+        "array-union": "^1.0.1",
+        "glob": "^7.0.3",
+        "object-assign": "^4.0.1",
+        "pify": "^2.0.0",
+        "pinkie-promise": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/gh-pages/node_modules/jsonfile": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
+      "integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==",
+      "dev": true,
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/gh-pages/node_modules/universalify": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
+      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 4.0.0"
+      }
+    },
    "node_modules/glob": {
      "version": "7.2.3",
      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -4667,6 +4814,30 @@
        "node": ">=12"
      }
    },
+    "node_modules/make-dir": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
+      "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
+      "dev": true,
+      "dependencies": {
+        "semver": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/make-dir/node_modules/semver": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
    "node_modules/map-obj": {
      "version": "4.3.0",
      "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-4.3.0.tgz",
@@ -4889,6 +5060,15 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/object-inspect": {
      "version": "1.12.3",
      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz",
@@ -5062,6 +5242,48 @@
        "url": "https://github.com/sponsors/jonschlinkert"
      }
    },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pinkie": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz",
+      "integrity": "sha512-MnUuEycAemtSaeFSjXKW/aroV7akBbY+Sv+RkyqFjgAe73F+MR0TBWKBRDkmfWq/HiFmdavfZ1G7h4SPZXaCSg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pinkie-promise": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz",
+      "integrity": "sha512-0Gni6D4UcLTbv9c57DfxDGdr41XfgUjqWZu492f0cIGr16zDU06BWP/RAEvOuo7CQ0CNjHaLlM59YJJFm3NWlw==",
+      "dev": true,
+      "dependencies": {
+        "pinkie": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pkg-dir": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
+      "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
+      "dev": true,
+      "dependencies": {
+        "find-up": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/postcss": {
      "version": "8.4.24",
      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.24.tgz",
@@ -5986,6 +6208,18 @@
        "node": ">=8"
      }
    },
+    "node_modules/strip-outer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/strip-outer/-/strip-outer-1.0.1.tgz",
+      "integrity": "sha512-k55yxKHwaXnpYGsOzg4Vl8+tDrWylxDEpknGjhTiZB8dFRU5rTo9CAzeycivxV3s+zlTKwrs6WxMxR95n26kwg==",
+      "dev": true,
+      "dependencies": {
+        "escape-string-regexp": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/style-search": {
      "version": "0.1.0",
      "resolved": "https://registry.npmjs.org/style-search/-/style-search-0.1.0.tgz",
@@ -6515,6 +6749,18 @@
        "node": ">=8"
      }
    },
+    "node_modules/trim-repeated": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/trim-repeated/-/trim-repeated-1.0.0.tgz",
+      "integrity": "sha512-pkonvlKk8/ZuR0D5tLW8ljt5I8kmxp2XKymhepUeOdCEfKpZaktSArkLHZt76OB1ZvO9bssUsDty4SWhLvZpLg==",
+      "dev": true,
+      "dependencies": {
+        "escape-string-regexp": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/type-fest": {
      "version": "0.18.1",
      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.18.1.tgz",
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
  "scripts": {
    "dev": "vite dev",
    "build": "vite build",
+    "deploy": "npm run build && gh-pages -d build",
    "preview": "vite preview",
    "check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
@@ -28,6 +29,7 @@
    "prettier-plugin-svelte": "^2.10.1",
    "svelte": "^4.0.0",
    "svelte-check": "^3.4.3",
+    "gh-pages": "^5.0.0",
    "typescript": "^5.0.0",
    "vite": "^4.3.6",
    "vite-plugin-pwa": "^0.16.4",
--- a/src/lib/components/Navigation.svelte
+++ b/src/lib/components/Navigation.svelte
@@ -7,12 +7,12 @@
  <h1>dot i/o</h1>

  <div class="steps">
-    <a href="/train/cpm" title="CPM - characters per minute" class="icon train cpm">music_note</a>
-    <a href="/train/chm" title="ChM - chords mastered" class="icon train chords">piano</a>
-    <a href="/train/avg-wpm" title="aWPM - average words per minute" class="icon test avg">avg_pace</a>
-    <a href="/train/stm" title="StM - sentences mastered" class="icon train sentences">lyrics</a>
-    <a href="/train/top-wpm" title="tWPM - top words per minute" class="icon test top">speed</a>
-    <a href="/train/cm" title="CM - concepts mastered" class="icon train concepts">cognition</a>
+    <a href="/" title="CPM - characters per minute" class="icon train cpm">music_note</a>
+    <a href="/" title="ChM - chords mastered" class="icon train chords">piano</a>
+    <a href="/" title="aWPM - average words per minute" class="icon test avg">avg_pace</a>
+    <a href="/" title="StM - sentences mastered" class="icon train sentences">lyrics</a>
+    <a href="/" title="tWPM - top words per minute" class="icon test top">speed</a>
+    <a href="/" title="CM - concepts mastered" class="icon train concepts">cognition</a>
  </div>

  <div class="actions">
--- a/src/lib/components/Terminal.svelte
+++ b/src/lib/components/Terminal.svelte
@@ -3,40 +3,36 @@
  import {slide} from "svelte/transition"

  /**
-   * @param event {KeyboardEvent}
+   * @param event {InputEvent}
   */
-  function keypress(event) {
-    if (event.code === "Enter") {
-      event.preventDefault()
-      const command = prompt.textContent.trim()
-      prompt.textContent = ""
-      $serialPort.send(command)
-      io.scrollTo({top: io.scrollHeight})
-    }
+  function submit(event) {
+    event.preventDefault()
+    $serialPort.send(value.trim())
+    value = ""
+    io.scrollTo({top: io.scrollHeight})
  }

-  /** @type {HTMLSpanElement} */
-  let prompt
+  /** @type {string} */
+  let value

  /** @type {HTMLDivElement} */
  let io
 </script>

-<div class="terminal" tabindex="0" on:focus={() => prompt.focus()}>
+<form on:submit={submit}>
  <div bind:this={io} class="io">
    {#each $serialLog as { type, value }}
      <p class={type} transition:slide>{value}</p>
    {/each}
    <div class="anchor" />
  </div>
-  <div class="prompt">
-    <b>$</b><span on:keypress={keypress} bind:this={prompt} contenteditable class="prompt" />
-    <div class="resize-me" />
-  </div>
-</div>
+  <fieldset>
+    <input on:submit={submit} bind:value />
+  </fieldset>
+</form>

 <style lang="scss">
-  .terminal {
+  form {
    resize: both;

    position: relative;
@@ -52,7 +48,6 @@
    font-size: 0.75rem;
    color: var(--md-sys-color-on-secondary);

-    background: var(--md-sys-color-secondary);
    border-radius: 16px;
  }

@@ -71,7 +66,35 @@
    display: none;
  }

+  fieldset::before {
+    content: "$";
+
+    position: absolute;
+    bottom: 8px;
+    left: 8px;
+
+    font-weight: 900;
+  }
+
+  input {
+    width: 100%;
+    margin-block-start: -16px;
+    padding: 8px;
+    padding-block-start: 24px;
+    padding-inline-start: calc(8px + 1.5ch);
+
+    font-family: "Noto Sans Mono", monospace;
+    font-weight: 600;
+    color: var(--md-sys-color-on-secondary);
+
+    appearance: none;
+    background: var(--md-sys-color-secondary);
+    border: none;
+  }
+
  .io {
+    z-index: 1;
+
    overflow-y: auto;
    flex: 1;

@@ -87,15 +110,28 @@
    outline: none;
  }

-  .prompt {
+  fieldset {
+    all: unset;
+
    position: relative;
-    margin: 0.5rem;
+
+    display: block;
+
+    opacity: 0.8;
+
+    transition: opacity 250ms ease;
+
+    &:focus-within {
+      opacity: 1;
+    }
  }

-  .resize-me {
+  fieldset::after {
+    content: "";
+
    position: absolute;
-    right: -2px;
-    bottom: 0;
+    right: 6px;
+    bottom: 8px;
    rotate: -45deg;

    width: 10px;
--- a/src/routes/+layout.js
+++ b/src/routes/+layout.js
@@ -0,0 +1 @@
+export const prerender = true
--- a/src/routes/device-manager/+page.svelte
+++ b/src/routes/device-manager/+page.svelte
@@ -119,21 +119,11 @@
      border-radius: 50%;
    }

-    &.primary {
-      color: var(--md-sys-color-on-primary);
-      background: var(--md-sys-color-primary);
-    }
-
    &.secondary {
      color: var(--md-sys-color-on-secondary);
      background: var(--md-sys-color-secondary);
    }

-    &.tertiary {
-      color: var(--md-sys-color-on-tertiary);
-      background: var(--md-sys-color-tertiary);
-    }
-
    &:hover:not(:disabled) {
      color: var(--md-sys-color-on-surface-variant);
      background: var(--md-sys-color-surface-variant);