populate with smallweb via admin client

.gitignore

@@ -4,3 +4,6 @@
 bin
 work
 dev
+src/admin-client/public
+
+node_modules

build.sh

@@ -3,7 +3,10 @@
 rm -rf bin
 mkdir bin
 mkdir bin/www
+# This is super weird. Commented line works on Mac. Build in Docker needs one below.
+# cp -r src/server/www bin/www
 cp -r src/server/www bin
+
 export GOOS=linux
 export GOARCH=amd64
 export CGO_ENABLED=1

src/admin-client/build.js

@@ -1,49 +1,76 @@
-build();
+import * as esbuild from "esbuild"
+import * as fs from "fs";
+import { livereloadPlugin } from "@jgoz/esbuild-plugin-livereload";
 
-const mainPort = 8090;
+const port = 8085;
+const timestamp = (+new Date).toString(36);
 
-async function build() {
+const args = (argList => {
+  let res = {};
+  let opt, thisOpt, curOpt;
+  for (let i = 0; i < argList.length; i++) {
+    thisOpt = argList[i].trim();
+    opt = thisOpt.replace(/^\-+/, "");
+    if (opt === thisOpt) {
+      // argument value
+      if (curOpt) res[curOpt] = opt;
+      curOpt = null;
+    } else {
+      // argument name
+      curOpt = opt;
+      res[curOpt] = true;
+    }
+  }
+  //console.log(res);
+  return res;
+})(process.argv);
+
+const cacheBusterPlugin = {
+  name: "cacheBusterPlugin",
+  setup(build) {
+    build.onEnd(() => {
+      const dstr = "[" + new Date().toLocaleTimeString() + "] ";
+      console.log(dstr + "Build finished");
+      const index = fs.readFileSync("./public/index.html", {encoding: "utf-8"});
+      const newIndex = index.replaceAll("%%VERSION%%", timestamp);
+      fs.writeFileSync("./public/index.html", newIndex);
+    })
+  },
+};
 
-  const esbuild = require("esbuild");
-  const { lessLoader } = require("esbuild-plugin-less");
-  const livereload = require("livereload");
-  const staticServer = require("static-server");
-  const pubDir = "public";
-  const watch = {
-    onRebuild(error) {
-      let dstr = "[" + new Date().toLocaleTimeString() + "] ";
-      if (error) {
-        console.error(dstr + "Change detected; rebuild failed:", error);
-        return;
-      }
-      console.log(dstr + "Change detected; rebuild OK");
-    },
-  };
 
-  esbuild.build({
-    entryPoints: ["src/app.js", "src/app.less"],
+async function build() {
+  const entryPoints = ["src/index.html", "src/icons.svg", "src/app.css", "src/app.js", "src/fonts/*"];
+  const plugins = [cacheBusterPlugin];
+  if (args.watch) plugins.push(livereloadPlugin());
+  const context = await esbuild.context({
+    entryPoints: entryPoints,
     outdir: "public",
     bundle: true,
     sourcemap: true,
-    minify: false,
-    plugins: [
-      lessLoader(),
-    ],
-    watch: watch,
-  }).catch(err => {
-    console.error("Unexpected error; quitting.");
-    if (err) console.error(err);
-    process.exit(1);
-  }).then(() => {
-    console.log("Build finished.");
-    livereload.createServer().watch("./" + pubDir);
-    console.log("Watching changes, with livereload...");
-    const server = new staticServer({
-      rootPath: "./" + pubDir,
-      port: mainPort,
-    });
-    server.start(function () {
-      console.log("Server listening at " + server.port + "; serving from " + pubDir);
-    });
+    loader: {
+      ".html": "copy",
+      ".css": "copy",
+      ".svg": "copy",
+      ".aiff": "copy",
+      ".woff2": "copy",
+    },
+    write: true,
+    metafile: true,
+    plugins: plugins,
   });
+
+  if (args.watch) {
+    await context.watch();
+    await context.serve({
+      port: port,
+    });
+  }
+  else {
+    await context.rebuild();
+    await context.dispose();
+    process.exit(0);
+  }
 }
+
+void build();

src/admin-client/package.json

@@ -1,19 +1,13 @@
 {
-  "name": "agt-ratty-client",
+  "name": "rss-parrot-admin-client",
+  "type": "module",
   "version": "0.0.1",
-  "description": "A ratty browser client for the memoQ AGT service",
+  "description": "Minimalist browser-based admin client for the RSS Parrot service",
   "license": "MIT",
-  "author": {
-    "name": "Gábor L Ugray",
-    "email": "[email protected]"
-  },
   "dependencies": {
-    "vanillajs-datepicker": "^1.3.4"
   },
   "devDependencies": {
-    "esbuild": "^0.16.17",
-    "esbuild-plugin-less": "^1.2.4",
-    "livereload": "^0.9.3",
-    "static-server": "^2.2.1"
+    "@jgoz/esbuild-plugin-livereload": "^2.0.3",
+    "esbuild": "^0.19.10"
   }
 }

src/admin-client/src/app.css

@@ -0,0 +1,82 @@
+/* Defines */
+:root {
+  --fntSans: "Open Sans", sans-serif;
+  --fntSizeBase: 16px;
+  --clrText: #444;
+  --clrTextFainter: #777;
+  --clrBodyBg: #fff;
+  --clrControl: #9f7e52;
+  --clrControlHover: #d08e4c;
+  --clrError: #c45151;
+}
+
+/* Global overrides */
+* { box-sizing: border-box; }
+a { color: #2e84e5; text-decoration: none; }
+a:hover { text-decoration: underline; }
+
+button {
+  display: inline-block; border-radius: 0; border: 1px solid var(--clrTextFainter);
+  font-size: var(--fntSizeBase); padding: 4px 16px;
+}
+
+& input[type=text] {
+  border-radius: 0; border: 1px solid var(--clrTextFainter);
+  font-family: inherit; color: var(--clrText); background-color: var(--clrBodyBg);
+  font-size: var(--fntSizeBase); padding: 2px 6px;
+}
+
+/* Layout, specifics */
+html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
+html { background-color: rgb(var(--clrBodyBg)); padding: 32px; }
+body {
+  font-family: var(--fntSans); font-size: var(--fntSizeBase); color: var(--clrText);
+  overflow-y: scroll; display: flex; flex-direction: column;
+}
+
+section {
+  border: 1px solid var(--clrTextFainter); position: relative;
+  padding: 16px; margin-bottom: 32px;
+  > h2 {
+    margin: 0; position: absolute; top: -13px; left: 8px; padding: 0 8px;
+    background-color: var(--clrBodyBg);
+    font-size: var(--fntSizeBase); font-weight: 600;
+  }
+  > div { margin-top: 12px; }
+  > div:first-of-type { margin-top: 4px; }
+}
+
+#txtServerUrl { width: 300px; }
+#txtApiKey { width: 300px; }
+#txtImportParallelReqs { width: 50px; text-align: center; }
+.spacer { display: inline-block; width: 24px; }
+#pnlImportErrors { white-space: pre-wrap; color: var(--clrError); }
+
+@font-face {
+  font-display: swap;
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: url('fonts/OpenSans-Regular.woff2') format('woff2');
+}
+@font-face {
+  font-display: swap;
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 600;
+  src: url('fonts/OpenSans-Semibold.woff2') format('woff2');
+}
+@font-face {
+  font-display: swap;
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 400;
+  src: url('fonts/OpenSans-Italic.woff2') format('woff2');
+}
+@font-face {
+  font-display: swap;
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 600;
+  src: url('fonts/OpenSans-SemiboldItalic.woff2') format('woff2');
+}