seeboard v0.0.1

Author: mindrones

.babelrc

@@ -0,0 +1,9 @@
+{
+    "presets": [
+        ["env", {
+            "targets": {
+                "node": "current"
+            }
+        }]
+    ]
+}

.gitignore

@@ -0,0 +1,5 @@
+node_modules
+build
+data/words.json
+.DS_Store
+.gh-pages

README.md

@@ -0,0 +1,43 @@
+# seeboard
+
+A visual tool to practise touch typing.
+
+![Seeboard 0.0.1](doc/seeboard_001.gif)
+
+Given a random text for you to type, highlights the current target key and the keys you type, so that if you miss the target you can see how far you are and adjust without looking at the keyboard.
+
+It doesn't show symbols on keys intentionally, to help you remember their position.
+
+Colors suggest the finger to use:
+
+- green -> index
+- cyan -> middle
+- gold -> ring
+- pink -> pinky (obviously :)
+- brown -> thumb
+
+## Usage
+
+- Press `Enter` when you have completed the text,
+- Press `PageUp` or `PageDown` to update the text and restart,
+
+It currently shows the [Keyboard.io](https://shop.keyboard.io/) with QWERTY layout.
+
+
+## Personalization
+
+To configure your own layout:
+
+- run `npm run dev`
+- open [localhost:3000](http://localhost:3000)
+- modify `src/app/components/Keyboardio/keyToChar.json`
+- the page will refresh automatically after a new build.
+
+
+## Contribute!
+
+At the moment only meta keys and letters are working, no punctuation or other symbols.
+You can help by opening issues or PRs to help completing this layout, sending new layouts (PRs, gists, pastebins, whatever it works is OK) or even just pointing me to new keyboards drawings, I can take care of turning them into Svelte components if you don't know how to do so.
+We'll add some keyboard and/or layout selector in that case :)
+
+Thanks!

assets/drawings/keyboardio-blank.svg

@@ -0,0 +1,7 @@
+- https://community.keyboard.io/t/blank-svg-template/226
+    - keyboardio-blank.svg
+
+- https://community.keyboard.io/t/runic-keycap-layout/14/9
+    - http://arleym.com/keyboardio/
+        - keyboardio-vector-old.svg
+        - keyboardio-vector-new.svg

assets/drawings/keyboardio-vector-new.svg

@@ -0,0 +1,9 @@
+import gulp from "gulp";
+
+gulp.task("build", gulp.parallel(
+    "copy.html",
+    gulp.series(
+        "data.words",
+        "rollup"
+    )
+));

assets/drawings/keyboardio-vector-old.svg

@@ -0,0 +1,13 @@
+import fs from "fs";
+
+import gulp from "gulp";
+
+import {DATA_PATH} from "./index";
+
+gulp.task("data.words", done => {
+    const wordsTxt = fs.readFileSync("node_modules/word-list/words.txt", "utf-8");
+    const wordsJson = wordsTxt.split("\n");
+    fs.writeFileSync(`${DATA_PATH}/words.json`, JSON.stringify(wordsJson, null, 2));
+
+    done();
+});

assets/drawings/sources.md

@@ -0,0 +1,10 @@
+import gulp from "gulp";
+
+gulp.task("default", gulp.series(
+    "build",
+    "serve",
+    gulp.parallel(
+        "watch.html",
+        "watch.src"
+    )
+));

doc/seeboard_001.gif

@@ -0,0 +1,22 @@
+import gulp from "gulp";
+import ghPages from "gh-pages";
+
+import options from "./options";
+
+gulp.task("publish", done => {
+    let opts = {
+        clone: ".gh-pages",
+        push: options.push
+    };
+
+    if (options.m) {
+        opts.message = options.m
+    };
+
+    ghPages.publish("build", opts, done);
+});
+
+gulp.task("deploy", gulp.series(
+    "build",
+    "publish"
+));

doc/seeboard_001.png

@@ -0,0 +1,18 @@
+import gulp from "gulp";
+
+import {BUILD_PATH} from "./index";
+
+const INDEX_HTML_PATH = "src/app/index.html";
+
+gulp.task("copy.html", done => {
+    gulp.src(INDEX_HTML_PATH)
+    .pipe(gulp.dest(BUILD_PATH));
+
+    done();
+});
+
+gulp.task("watch.html", done => {
+    gulp.watch(INDEX_HTML_PATH, gulp.task("copy.html"));
+
+    done();
+});

gulp/build.js

@@ -0,0 +1,11 @@
+import "./data";
+import "./html";
+import "./rollup";
+import "./build";
+import "./serve";
+import "./default";
+import "./deploy";
+
+export const SRC_PATH = "src";
+export const BUILD_PATH = "build";
+export const DATA_PATH = "data";

gulp/data.js

@@ -0,0 +1,24 @@
+import parseArgs from "minimist";
+
+/*
+npm run dev -- --option1 --option2
+npm run deploy -- -m "deploy message"
+*/
+
+const options = parseArgs(process.argv.slice(2), {
+    string: [
+        "m", // npm run deploy -- -m "deploy message"
+    ],
+    boolean: [
+        "production", // build
+        "push", // deploy
+    ],
+    default: {
+        production: false,
+        push: false
+    }
+});
+
+console.log("options", options);
+
+export default options;

gulp/default.js

@@ -0,0 +1,68 @@
+import path from "path";
+
+import gulp from "gulp";
+import {rollup} from 'rollup';
+import alias from "rollup-plugin-alias";
+import json from "rollup-plugin-json";
+import svelte from "rollup-plugin-svelte";
+import resolve from "rollup-plugin-node-resolve";
+import commonjs from "rollup-plugin-commonjs";
+import buble from "rollup-plugin-buble";
+import {terser} from "rollup-plugin-terser";
+
+import pkg from "../package.json";
+
+import {makeResolveAliases} from "../src/utils/buildUtils";
+
+import {SRC_PATH, BUILD_PATH} from "./index";
+import options from "./options";
+
+const isProductionBuild = options.production;
+const resolveAliases = makeResolveAliases(path.resolve(__dirname, "../"));
+
+const bundleOpts = {
+    input: "src/app/main.js",
+    plugins: [
+        alias(resolveAliases({
+            "@utils": "src/utils",
+            "@data": "data"
+        })),
+        resolve(),
+        commonjs(),
+        json(),
+        svelte({
+            skipIntroByDefault: true,
+            nestedTransitions: true,
+            dev: !isProductionBuild,
+
+            // bundle all components CSS into a single file
+            css: css => {
+                css.write(`${BUILD_PATH}/bundle.css`, !isProductionBuild);
+            }
+        }),
+
+        isProductionBuild && buble(),
+        isProductionBuild && terser()
+    ],
+    cache: true
+};
+
+const outputOpts = {
+    file: "build/bundle.js",
+    format: "iife",
+    name: pkg.name,
+    sourcemap: !isProductionBuild,
+};
+
+gulp.task("rollup", async function (done) {
+    const bundle = await rollup(bundleOpts);
+    await bundle.write(outputOpts);
+
+    done();
+});
+
+gulp.task("watch.src", done => {
+    gulp.watch(SRC_PATH, gulp.task("rollup"));
+
+    done();
+});

gulp/deploy.js

@@ -0,0 +1,35 @@
+import gulp from "gulp";
+import BrowserSync from "browser-sync";
+
+import pkg from "../package.json";
+
+const browserSync = BrowserSync.create();
+
+gulp.task("serve", done => {
+    browserSync.init({
+        server: {
+            baseDir: "./build",
+        },
+        port: 3000,
+        open: false,
+        reloadOnRestart: true,
+        notify: false,
+        ghostMode: false,
+
+        // watch & inject
+        watch: true,
+        files: [
+            "build/bundle.css",
+            "build/bundle.js",
+            "build/index.html",
+        ],
+        ignore: [
+            "build/bundle.css.map",
+            "build/bundle.js.map",
+        ],
+
+        logPrefix: `${pkg.name}`
+    });
+
+    done();
+});

gulp/html.js

@@ -0,0 +1,3 @@
+require("babel-core/register", { ignore: false });
+require("babel-polyfill");
+require("./gulp");