Merge branch 'master' into more-palettes

Reviewed-on: #30
Fixes #2
Co-authored-by: Alexandre <alexandre@bruyant.xyz>
Co-committed-by: Alexandre <alexandre@bruyant.xyz>

.gitea/workflows/ci.yml

@@ -0,0 +1,128 @@
+name: Build and deploy
+
+on:
+  push:
+    branches: [master]
+
+jobs:
+  build-wasm:
+    runs-on: ubuntu-latest
+    env:
+      working_directory: "./src"
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Set up Go
+        uses: actions/setup-go@v2
+        with:
+          go-version: 1.21
+
+      - name: Build
+        run: go build -v -o main.wasm ./...
+        working-directory: ${{env.working_directory}}
+        env:
+          GOOS: js
+          GOARCH: wasm
+
+      - name: Upload wasm file
+        uses: actions/upload-artifact@v3
+        with:
+          name: wasm
+          path: ${{env.working_directory}}/main.wasm
+
+  build-react:
+    runs-on: ubuntu-latest
+    env:
+      working_directory: "./client"
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v2.5.0
+        with:
+          node-version-file: .nvmrc
+
+      - name: NPM CI
+        working-directory: ${{env.working_directory}}
+        run: npm ci
+
+      - name: React build
+        working-directory: ${{env.working_directory}}
+        run: npm run build
+
+      - name: Upload react client
+        uses: actions/upload-artifact@v3
+        with:
+          name: react-app
+          path: ${{env.working_directory}}/build
+
+  merge:
+    runs-on: ubuntu-latest
+    needs: [build-wasm, build-react]
+    env:
+      working_directory: "./client"
+    steps:
+      - name: Download React app
+        uses: actions/download-artifact@v3
+        with:
+          name: react-app
+          path: app
+
+      - name: Download WASM program
+        uses: actions/download-artifact@v3
+        with:
+          name: wasm
+          path: app
+
+      - name: Upload react app
+        uses: actions/upload-artifact@v3
+        with:
+          name: react-app-wasm
+          path: app
+
+  pin:
+    name: Pin to cluster node
+    needs: merge
+    runs-on: ubuntu-latest
+    container:
+      image: catthehacker/ubuntu:act-latest
+    outputs:
+      cid: ${{ steps.pin.outputs.cid }}
+    steps:
+      - uses: actions/download-artifact@v3
+        with:
+          name: react-app-wasm
+          path: app
+
+      - name: pin
+        id: pin
+        uses: docker://gitea.bruyant.xyz/alexandre/ipfs-node-pin:main
+        with:
+          ipfs_host: "ipfs-api.ipfs.svc"
+          ipfs_port: "5001"
+          path_to_add: app
+      - name: print CID
+        run: echo ${{ steps.pin.outputs.cid }}
+
+  update-dns:
+    name: Update OVH DNS
+    needs: [pin]
+    runs-on: ubuntu-latest
+    steps:
+      - name: OVH alter DNS record
+        uses: CrispyBaguette/ovh-dns-alter-action@v1.1.1
+        with:
+          application-key: ${{ secrets.OVH_APPLICATION_KEY }}
+          application-secret: ${{ secrets.OVH_APPLICATION_SECRET }}
+          consumer-key: ${{ secrets.OVH_CONSUMER_KEY }}
+          dns-zone: bruyant.xyz
+          record-id: 5218627602
+          target: "dnslink=/ipfs/${{ needs.pin.outputs.cid }}"
+
+      - name: OVH refresh DNS zone
+        uses: CrispyBaguette/ovh-dns-refresh-action@v1.0.1
+        with:
+          application-key: ${{ secrets.OVH_APPLICATION_KEY }}
+          application-secret: ${{ secrets.OVH_APPLICATION_SECRET }}
+          consumer-key: ${{ secrets.OVH_CONSUMER_KEY }}
+          dns-zone: bruyant.xyz

.github/workflows/ci.yml

@@ -1,148 +0,0 @@
-name: Build and deploy
-
-on:
-  push:
-    branches: [ master ]
-
-jobs:
-  build-wasm:
-    runs-on: ubuntu-latest
-    env:
-      working_directory: "./src"
-    steps:
-    - uses: actions/checkout@v2
-
-    - name: Set up Go
-      uses: actions/setup-go@v2
-      with:
-        go-version: 1.17
-
-    - name: Build
-      run: go build -v -o main.wasm ./...
-      working-directory: ${{env.working_directory}}
-      env:
-        GOOS: js
-        GOARCH: wasm
-        
-    - name: Upload wasm file
-      uses: actions/upload-artifact@v2
-      with:
-        name: wasm
-        path: ${{env.working_directory}}/main.wasm
-  
-  build-react:
-    runs-on: ubuntu-latest
-    env:
-      working_directory: "./client"
-    steps:
-    - uses: actions/checkout@v2
-
-    - name: Setup Node.js environment
-      uses: actions/setup-node@v2.5.0
-      with:
-        node-version-file: .nvmrc
-    
-    - name: NPM CI
-      working-directory: ${{env.working_directory}}
-      run: npm ci
-    
-    - name: React build
-      working-directory: ${{env.working_directory}}
-      run: npm run build
-      
-    - name: Upload react client
-      uses: actions/upload-artifact@v2
-      with:
-        name: react-app
-        path: ${{env.working_directory}}/build
-        
-  merge:
-    runs-on: ubuntu-latest
-    needs: [build-wasm, build-react]
-    env:
-      working_directory: "./client"
-    steps:
-      - name: Download React app
-        uses: actions/download-artifact@v2
-        with:
-          name: react-app
-          path: app
-          
-      - name: Download WASM program
-        uses: actions/download-artifact@v2
-        with:
-          name: wasm
-          path: app
-      
-      - name: Upload react app
-        uses: actions/upload-artifact@v2
-        with:
-          name: react-app-wasm
-          path: app
-          
-  web3-storage:
-    name: Push to web3.storage
-    needs: merge
-    runs-on: ubuntu-latest
-    outputs:
-      cid: ${{ steps.web3.outputs.cid }}
-    steps:
-      - uses: actions/download-artifact@v2
-        with:
-          name: react-app-wasm
-          path: react-app-wasm
-          
-      - name: Push to web3.storage
-        uses: web3-storage/add-to-web3@v1
-        id: web3
-        with:
-          web3_token: ${{ secrets.WEB3_STORAGE_TOKEN }}
-          path_to_add: react-app-wasm
-          
-      - run: echo ${{ steps.web3.outputs.cid }}
-
-  pinata:
-    name: Pin on Pinata
-    needs: merge
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      
-      - uses: actions/download-artifact@v2
-        with:
-          name: react-app-wasm
-          path: react-app-wasm
-          
-      - name: pin
-        id: pinata
-        uses: anantaramdas/ipfs-pinata-deploy-action@v1.6.4
-        with:
-          pin-name: "paletteswitcher"
-          path: "./react-app-wasm"
-          pinata-api-key: ${{ secrets.PINATA_API_KEY }}
-          pinata-secret-api-key: ${{ secrets.PINATA_API_SECRET }}
-          verbose: true
-          remove-old: true
-
-  update-dns:
-    name: Update OVH DNS
-    needs: [web3-storage, pinata]
-    runs-on: ubuntu-latest
-    steps:
-      - name: OVH alter DNS record
-        uses: CrispyBaguette/ovh-dns-alter-action@v1.1.1
-        with:
-          application-key: ${{ secrets.OVH_APPLICATION_KEY }}
-          application-secret: ${{ secrets.OVH_APPLICATION_SECRET }}
-          consumer-key: ${{ secrets.OVH_CONSUMER_KEY }}
-          dns-zone: bruyant.xyz
-          record-id: 5218627602
-          target: "dnslink=/ipfs/${{ needs.web3-storage.outputs.cid }}"
-          
-      - name: OVH refresh DNS zone
-        uses: CrispyBaguette/ovh-dns-refresh-action@v1.0.1
-        with:
-          application-key: ${{ secrets.OVH_APPLICATION_KEY }}
-          application-secret: ${{ secrets.OVH_APPLICATION_SECRET }}
-          consumer-key: ${{ secrets.OVH_CONSUMER_KEY }}
-          dns-zone: bruyant.xyz

README.md

@@ -1,4 +1,4 @@
-# wasm-palette-converter
+# PaletteSwitcher
 
 Go+Wasm image palette converter
 

client/package.json

@@ -4,23 +4,23 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.36",
+    "@fortawesome/fontawesome-svg-core": "^6.1.1",
-    "@fortawesome/free-brands-svg-icons": "^5.15.4",
+    "@fortawesome/free-brands-svg-icons": "^6.1.1",
-    "@fortawesome/free-solid-svg-icons": "^5.15.4",
+    "@fortawesome/free-solid-svg-icons": "^6.1.1",
-    "@fortawesome/react-fontawesome": "^0.1.16",
+    "@fortawesome/react-fontawesome": "^0.1.18",
-    "@testing-library/jest-dom": "^5.16.1",
+    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^11.2.7",
+    "@testing-library/react": "^13.2.0",
-    "@testing-library/user-event": "^12.8.3",
+    "@testing-library/user-event": "^14.1.1",
-    "@types/jest": "^26.0.24",
+    "@types/jest": "^27.5.0",
-    "@types/node": "^12.20.37",
+    "@types/node": "^17.0.31",
-    "@types/react": "^17.0.37",
+    "@types/react": "^18.0.9",
     "classnames": "^2.3.1",
     "file-saver": "^2.0.5",
-    "react": "^18.0.0",
+    "react": "^18.1.0",
-    "react-dom": "^18.0.0",
+    "react-dom": "^18.1.0",
     "react-scripts": "next",
-    "typescript": "^4.5.3",
+    "typescript": "^4.6.4",
-    "web-vitals": "^1.1.2"
+    "web-vitals": "^2.1.4"
   },
   "scripts": {
     "start": "BROWSER=none react-scripts start",
@@ -47,11 +47,11 @@
     ]
   },
   "devDependencies": {
-    "@tailwindcss/forms": "^0.4.0",
+    "@tailwindcss/forms": "^0.5.1",
-    "@types/file-saver": "^2.0.4",
+    "@types/file-saver": "^2.0.5",
-    "@types/react-dom": "^18.0.1",
+    "@types/react-dom": "^18.0.3",
-    "autoprefixer": "^10.4.0",
+    "autoprefixer": "^10.4.7",
-    "postcss": "^8.4.4",
+    "postcss": "^8.4.13",
-    "tailwindcss": "^3.0.1"
+    "tailwindcss": "^3.0.24"
   }
 }

client/public/index.html

@@ -12,6 +12,23 @@
     />
     <link rel="manifest" href="%PUBLIC_URL%/site.webmanifest" />
     <title>Palette Switcher</title>
+    <script>
+      if (
+        localStorage.theme === "dark" ||
+        (!("theme" in localStorage) &&
+          window.matchMedia("(prefers-color-scheme: dark)").matches)
+      ) {
+        document.documentElement.classList.add("dark");
+      } else {
+        document.documentElement.classList.remove("dark");
+      }
+    </script>
+    <script
+      async
+      src="https://analytics.umami.is/script.js"
+      data-website-id="e17a6636-061a-43f6-bef4-e5787721c5d1"
+      data-do-not-track="true"
+    ></script>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

client/public/wasm_exec.js

@@ -1,66 +1,26 @@
-/* eslint-disable no-undef */
-/* eslint-disable no-restricted-globals */
 // Copyright 2018 The Go Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
 
+"use strict";
+
 (() => {
-  // Map multiple JavaScript environments to a single common API,
-  // preferring web standards over Node.js API.
-  //
-  // Environments considered:
-  // - Browsers
-  // - Node.js
-  // - Electron
-  // - Parcel
-  // - Webpack
-
-  if (typeof global !== "undefined") {
-    // global already exists
-  } else if (typeof window !== "undefined") {
-    window.global = window;
-  } else if (typeof self !== "undefined") {
-    self.global = self;
-  } else {
-    throw new Error(
-      "cannot export Go (neither global, window nor self is defined)"
-    );
-  }
-
-  if (!global.require && typeof require !== "undefined") {
-    global.require = require;
-  }
-
-  if (!global.fs && global.require) {
-    const fs = require("fs");
-    if (typeof fs === "object" && fs !== null && Object.keys(fs).length !== 0) {
-      global.fs = fs;
-    }
-  }
-
 	const enosys = () => {
 		const err = new Error("not implemented");
 		err.code = "ENOSYS";
 		return err;
 	};
 
-  if (!global.fs) {
+	if (!globalThis.fs) {
 		let outputBuf = "";
-    global.fs = {
+		globalThis.fs = {
-      constants: {
+			constants: { O_WRONLY: -1, O_RDWR: -1, O_CREAT: -1, O_TRUNC: -1, O_APPEND: -1, O_EXCL: -1 }, // unused
-        O_WRONLY: -1,
-        O_RDWR: -1,
-        O_CREAT: -1,
-        O_TRUNC: -1,
-        O_APPEND: -1,
-        O_EXCL: -1,
-      }, // unused
 			writeSync(fd, buf) {
 				outputBuf += decoder.decode(buf);
 				const nl = outputBuf.lastIndexOf("\n");
 				if (nl != -1) {
-          console.log(outputBuf.substr(0, nl));
+					console.log(outputBuf.substring(0, nl));
-          outputBuf = outputBuf.substr(nl + 1);
+					outputBuf = outputBuf.substring(nl + 1);
 				}
 				return buf.length;
 			},
@@ -72,152 +32,67 @@
 				const n = this.writeSync(fd, buf);
 				callback(null, n);
 			},
-      chmod(path, mode, callback) {
+			chmod(path, mode, callback) { callback(enosys()); },
-        callback(enosys());
+			chown(path, uid, gid, callback) { callback(enosys()); },
-      },
+			close(fd, callback) { callback(enosys()); },
-      chown(path, uid, gid, callback) {
+			fchmod(fd, mode, callback) { callback(enosys()); },
-        callback(enosys());
+			fchown(fd, uid, gid, callback) { callback(enosys()); },
-      },
+			fstat(fd, callback) { callback(enosys()); },
-      close(fd, callback) {
+			fsync(fd, callback) { callback(null); },
-        callback(enosys());
+			ftruncate(fd, length, callback) { callback(enosys()); },
-      },
+			lchown(path, uid, gid, callback) { callback(enosys()); },
-      fchmod(fd, mode, callback) {
+			link(path, link, callback) { callback(enosys()); },
-        callback(enosys());
+			lstat(path, callback) { callback(enosys()); },
-      },
+			mkdir(path, perm, callback) { callback(enosys()); },
-      fchown(fd, uid, gid, callback) {
+			open(path, flags, mode, callback) { callback(enosys()); },
-        callback(enosys());
+			read(fd, buffer, offset, length, position, callback) { callback(enosys()); },
-      },
+			readdir(path, callback) { callback(enosys()); },
-      fstat(fd, callback) {
+			readlink(path, callback) { callback(enosys()); },
-        callback(enosys());
+			rename(from, to, callback) { callback(enosys()); },
-      },
+			rmdir(path, callback) { callback(enosys()); },
-      fsync(fd, callback) {
+			stat(path, callback) { callback(enosys()); },
-        callback(null);
+			symlink(path, link, callback) { callback(enosys()); },
-      },
+			truncate(path, length, callback) { callback(enosys()); },
-      ftruncate(fd, length, callback) {
+			unlink(path, callback) { callback(enosys()); },
-        callback(enosys());
+			utimes(path, atime, mtime, callback) { callback(enosys()); },
-      },
-      lchown(path, uid, gid, callback) {
-        callback(enosys());
-      },
-      link(path, link, callback) {
-        callback(enosys());
-      },
-      lstat(path, callback) {
-        callback(enosys());
-      },
-      mkdir(path, perm, callback) {
-        callback(enosys());
-      },
-      open(path, flags, mode, callback) {
-        callback(enosys());
-      },
-      read(fd, buffer, offset, length, position, callback) {
-        callback(enosys());
-      },
-      readdir(path, callback) {
-        callback(enosys());
-      },
-      readlink(path, callback) {
-        callback(enosys());
-      },
-      rename(from, to, callback) {
-        callback(enosys());
-      },
-      rmdir(path, callback) {
-        callback(enosys());
-      },
-      stat(path, callback) {
-        callback(enosys());
-      },
-      symlink(path, link, callback) {
-        callback(enosys());
-      },
-      truncate(path, length, callback) {
-        callback(enosys());
-      },
-      unlink(path, callback) {
-        callback(enosys());
-      },
-      utimes(path, atime, mtime, callback) {
-        callback(enosys());
-      },
 		};
 	}
 
-  if (!global.process) {
+	if (!globalThis.process) {
-    global.process = {
+		globalThis.process = {
-      getuid() {
+			getuid() { return -1; },
-        return -1;
+			getgid() { return -1; },
-      },
+			geteuid() { return -1; },
-      getgid() {
+			getegid() { return -1; },
-        return -1;
+			getgroups() { throw enosys(); },
-      },
-      geteuid() {
-        return -1;
-      },
-      getegid() {
-        return -1;
-      },
-      getgroups() {
-        throw enosys();
-      },
 			pid: -1,
 			ppid: -1,
-      umask() {
+			umask() { throw enosys(); },
-        throw enosys();
+			cwd() { throw enosys(); },
-      },
+			chdir() { throw enosys(); },
-      cwd() {
+		}
-        throw enosys();
-      },
-      chdir() {
-        throw enosys();
-      },
-    };
 	}
 
-  if (!global.crypto && global.require) {
+	if (!globalThis.crypto) {
-    const nodeCrypto = require("crypto");
+		throw new Error("globalThis.crypto is not available, polyfill required (crypto.getRandomValues only)");
-    global.crypto = {
-      getRandomValues(b) {
-        nodeCrypto.randomFillSync(b);
-      },
-    };
-  }
-  if (!global.crypto) {
-    throw new Error(
-      "global.crypto is not available, polyfill required (getRandomValues only)"
-    );
 	}
 
-  if (!global.performance) {
+	if (!globalThis.performance) {
-    global.performance = {
+		throw new Error("globalThis.performance is not available, polyfill required (performance.now only)");
-      now() {
-        const [sec, nsec] = process.hrtime();
-        return sec * 1000 + nsec / 1000000;
-      },
-    };
 	}
 
-  if (!global.TextEncoder && global.require) {
+	if (!globalThis.TextEncoder) {
-    global.TextEncoder = require("util").TextEncoder;
+		throw new Error("globalThis.TextEncoder is not available, polyfill required");
-  }
-  if (!global.TextEncoder) {
-    throw new Error("global.TextEncoder is not available, polyfill required");
 	}
 
-  if (!global.TextDecoder && global.require) {
+	if (!globalThis.TextDecoder) {
-    global.TextDecoder = require("util").TextDecoder;
+		throw new Error("globalThis.TextDecoder is not available, polyfill required");
 	}
-  if (!global.TextDecoder) {
-    throw new Error("global.TextDecoder is not available, polyfill required");
-  }
-
-  // End of polyfills for common API.
 
 	const encoder = new TextEncoder("utf-8");
 	const decoder = new TextDecoder("utf-8");
 
-  global.Go = class {
+	globalThis.Go = class {
 		constructor() {
 			this.argv = ["js"];
 			this.env = {};
@@ -236,13 +111,17 @@
 			const setInt64 = (addr, v) => {
 				this.mem.setUint32(addr + 0, v, true);
 				this.mem.setUint32(addr + 4, Math.floor(v / 4294967296), true);
-      };
+			}
+
+			const setInt32 = (addr, v) => {
+				this.mem.setUint32(addr + 0, v, true);
+			}
 
 			const getInt64 = (addr) => {
 				const low = this.mem.getUint32(addr + 0, true);
 				const high = this.mem.getInt32(addr + 4, true);
 				return low + high * 4294967296;
-      };
+			}
 
 			const loadValue = (addr) => {
 				const f = this.mem.getFloat64(addr, true);
@@ -255,10 +134,10 @@
 
 				const id = this.mem.getUint32(addr, true);
 				return this._values[id];
-      };
+			}
 
 			const storeValue = (addr, v) => {
-        const nanHead = 0x7ff80000;
+				const nanHead = 0x7FF80000;
 
 				if (typeof v === "number" && v !== 0) {
 					if (isNaN(v)) {
@@ -305,13 +184,13 @@
 				}
 				this.mem.setUint32(addr + 4, nanHead | typeFlag, true);
 				this.mem.setUint32(addr, id, true);
-      };
+			}
 
 			const loadSlice = (addr) => {
 				const array = getInt64(addr + 0);
 				const len = getInt64(addr + 8);
 				return new Uint8Array(this._inst.exports.mem.buffer, array, len);
-      };
+			}
 
 			const loadSliceOfValues = (addr) => {
 				const array = getInt64(addr + 0);
@@ -321,19 +200,20 @@
 					a[i] = loadValue(array + i * 8);
 				}
 				return a;
-      };
+			}
 
 			const loadString = (addr) => {
 				const saddr = getInt64(addr + 0);
 				const len = getInt64(addr + 8);
-        return decoder.decode(
+				return decoder.decode(new DataView(this._inst.exports.mem.buffer, saddr, len));
-          new DataView(this._inst.exports.mem.buffer, saddr, len)
+			}
-        );
-      };
 
 			const timeOrigin = Date.now() - performance.now();
 			this.importObject = {
-        go: {
+				_gotest: {
+					add: (a, b) => a + b,
+				},
+				gojs: {
 					// Go's SP does not change as long as no Go code is running. Some operations (e.g. calls, getters and setters)
 					// may synchronously trigger a Go event handler. This makes Go code get executed in the middle of the imported
 					// function. A goroutine can switch to a new stack if the current stack is too small (see morestack function).
@@ -358,10 +238,7 @@
 						const fd = getInt64(sp + 8);
 						const p = getInt64(sp + 16);
 						const n = this.mem.getInt32(sp + 24, true);
-            fs.writeSync(
+						fs.writeSync(fd, new Uint8Array(this._inst.exports.mem.buffer, p, n));
-              fd,
-              new Uint8Array(this._inst.exports.mem.buffer, p, n)
-            );
 					},
 
 					// func resetMemoryDataView()
@@ -379,7 +256,7 @@
 					// func walltime() (sec int64, nsec int32)
 					"runtime.walltime": (sp) => {
 						sp >>>= 0;
-            const msec = new Date().getTime();
+						const msec = (new Date).getTime();
 						setInt64(sp + 8, msec / 1000);
 						this.mem.setInt32(sp + 16, (msec % 1000) * 1000000, true);
 					},
@@ -389,9 +266,7 @@
 						sp >>>= 0;
 						const id = this._nextCallbackTimeoutID;
 						this._nextCallbackTimeoutID++;
-            this._scheduledTimeouts.set(
+						this._scheduledTimeouts.set(id, setTimeout(
-              id,
-              setTimeout(
 							() => {
 								this._resume();
 								while (this._scheduledTimeouts.has(id)) {
@@ -401,9 +276,8 @@
 									this._resume();
 								}
 							},
-                getInt64(sp + 8) + 1 // setTimeout has been seen to fire up to 1 millisecond early
+							getInt64(sp + 8),
-              )
+						));
-            );
 						this.mem.setInt32(sp + 16, id, true);
 					},
 
@@ -451,11 +325,7 @@
 					// func valueSet(v ref, p string, x ref)
 					"syscall/js.valueSet": (sp) => {
 						sp >>>= 0;
-            Reflect.set(
+						Reflect.set(loadValue(sp + 8), loadString(sp + 16), loadValue(sp + 32));
-              loadValue(sp + 8),
-              loadString(sp + 16),
-              loadValue(sp + 32)
-            );
 					},
 
 					// func valueDelete(v ref, p string)
@@ -467,20 +337,13 @@
 					// func valueIndex(v ref, i int) ref
 					"syscall/js.valueIndex": (sp) => {
 						sp >>>= 0;
-            storeValue(
+						storeValue(sp + 24, Reflect.get(loadValue(sp + 8), getInt64(sp + 16)));
-              sp + 24,
-              Reflect.get(loadValue(sp + 8), getInt64(sp + 16))
-            );
 					},
 
 					// valueSetIndex(v ref, i int, x ref)
 					"syscall/js.valueSetIndex": (sp) => {
 						sp >>>= 0;
-            Reflect.set(
+						Reflect.set(loadValue(sp + 8), getInt64(sp + 16), loadValue(sp + 24));
-              loadValue(sp + 8),
-              getInt64(sp + 16),
-              loadValue(sp + 24)
-            );
 					},
 
 					// func valueCall(v ref, m string, args []ref) (ref, bool)
@@ -559,10 +422,7 @@
 					// func valueInstanceOf(v ref, t ref) bool
 					"syscall/js.valueInstanceOf": (sp) => {
 						sp >>>= 0;
-            this.mem.setUint8(
+						this.mem.setUint8(sp + 24, (loadValue(sp + 8) instanceof loadValue(sp + 16)) ? 1 : 0);
-              sp + 24,
-              loadValue(sp + 8) instanceof loadValue(sp + 16) ? 1 : 0
-            );
 					},
 
 					// func copyBytesToGo(dst []byte, src ref) (int, bool)
@@ -570,9 +430,7 @@
 						sp >>>= 0;
 						const dst = loadSlice(sp + 8);
 						const src = loadValue(sp + 32);
-            if (
+						if (!(src instanceof Uint8Array || src instanceof Uint8ClampedArray)) {
-              !(src instanceof Uint8Array || src instanceof Uint8ClampedArray)
-            ) {
 							this.mem.setUint8(sp + 48, 0);
 							return;
 						}
@@ -587,9 +445,7 @@
 						sp >>>= 0;
 						const dst = loadValue(sp + 8);
 						const src = loadSlice(sp + 16);
-            if (
+						if (!(dst instanceof Uint8Array || dst instanceof Uint8ClampedArray)) {
-              !(dst instanceof Uint8Array || dst instanceof Uint8ClampedArray)
-            ) {
 							this.mem.setUint8(sp + 48, 0);
 							return;
 						}
@@ -599,10 +455,10 @@
 						this.mem.setUint8(sp + 48, 1);
 					},
 
-          debug: (value) => {
+					"debug": (value) => {
 						console.log(value);
 					},
-        },
+				}
 			};
 		}
 
@@ -612,24 +468,22 @@
 			}
 			this._inst = instance;
 			this.mem = new DataView(this._inst.exports.mem.buffer);
-      this._values = [
+			this._values = [ // JS values that Go currently has references to, indexed by reference id
-        // JS values that Go currently has references to, indexed by reference id
 				NaN,
 				0,
 				null,
 				true,
 				false,
-        global,
+				globalThis,
 				this,
 			];
 			this._goRefCounts = new Array(this._values.length).fill(Infinity); // number of references that Go has to a JS value, indexed by reference id
-      this._ids = new Map([
+			this._ids = new Map([ // mapping from JS values to reference ids
-        // mapping from JS values to reference ids
 				[0, 1],
 				[null, 2],
 				[true, 3],
 				[false, 4],
-        [global, 5],
+				[globalThis, 5],
 				[this, 6],
 			]);
 			this._idPool = [];   // unused ids that have been garbage collected
@@ -674,9 +528,7 @@
 			// Keep in sync with cmd/link/internal/ld/data.go:wasmMinDataAddr.
 			const wasmMinDataAddr = 4096 + 8192;
 			if (offset >= wasmMinDataAddr) {
-        throw new Error(
+				throw new Error("total length of command line and environment variables exceeds limit");
-          "total length of command line and environment variables exceeds limit"
-        );
 			}
 
 			this._inst.exports.run(argc, argv);
@@ -705,40 +557,5 @@
 				return event.result;
 			};
 		}
-  };
-
-  if (
-    typeof module !== "undefined" &&
-    global.require &&
-    global.require.main === module &&
-    global.process &&
-    global.process.versions &&
-    !global.process.versions.electron
-  ) {
-    if (process.argv.length < 3) {
-      console.error("usage: go_js_wasm_exec [wasm binary] [arguments]");
-      process.exit(1);
-    }
-
-    const go = new Go();
-    go.argv = process.argv.slice(2);
-    go.env = Object.assign({ TMPDIR: require("os").tmpdir() }, process.env);
-    go.exit = process.exit;
-    WebAssembly.instantiate(fs.readFileSync(process.argv[2]), go.importObject)
-      .then((result) => {
-        process.on("exit", (code) => {
-          // Node.js exits if no event handler is pending
-          if (code === 0 && !go.exited) {
-            // deadlock, make Go print error and stack traces
-            go._pendingEvent = { id: 0 };
-            go._resume();
-          }
-        });
-        return go.run(result.instance);
-      })
-      .catch((err) => {
-        console.error(err);
-        process.exit(1);
-      });
 	}
 })();

client/src/App.tsx

@@ -26,14 +26,21 @@ function App() {
       const ditheredImage = await new Ditherer().dither(imageArray, palette);
       setDitheredImage(new Blob([ditheredImage], { type: "image/png" }));
       setAppState(AppState.IMAGE_PROCESSED);
+
+      if ("umami" in window) {
+        (window as any).umami.track("image processed");
+      }
     } catch (e) {
       console.error(e);
       window.alert("Something went wrong. Please try again.");
+      if ("umami" in window) {
+        (window as any).umami.track("processing error");
+      }
     }
   };
 
   return (
-    <div className="bg-nord-6 text-nord-0 min-h-screen">
+    <div className="bg-nord-6 dark:bg-nord-0 text-nord-0 dark:text-nord-6 min-h-screen">
       <Header />
       <main className="container mx-auto pb-5">
         <article className="text-xl leading-relaxed max-w-prose space-y-2 mx-auto pb-5 px-2">

client/src/Header.tsx

@@ -1,14 +1,16 @@
 import { faGithub } from "@fortawesome/free-brands-svg-icons";
 import { faIgloo } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import ThemeToggler from "./ThemeToggler";
 
 function Header() {
   return (
-    <header className="flex items-center bg-nord-1 text-nord-5 py-3 px-2">
+    <header className="bg-nord-1 text-nord-5 py-3 px-2">
+      <div className="flex container items-center mx-auto">
         <a
           target="_blank"
           rel="noopener noreferrer"
-        href="https://github.com/CrispyBaguette/wasm-palette-converter"
+          href="https://gitea.bruyant.xyz/alexandre/PaletteSwitcher"
         >
           <FontAwesomeIcon
             icon={faGithub}
@@ -37,6 +39,10 @@ function Header() {
           </a>
           . Visit using your own node !
         </span>
+        <span className="ml-auto">
+          <ThemeToggler />
+        </span>
+      </div>
     </header>
   );
 }

client/src/ImageInput.tsx

@@ -39,7 +39,26 @@ function ImageInput({ onImageSubmit }: Props) {
           type="file"
           accept="image/png, image/jpeg"
           ref={fileInputRef}
-          className="block w-full mt-1 text-sm text-nord-0 file:mr-4 file:py-2 file:px-4 file:border-0 file:text-sm file:font-semibold file:bg-nord-4 file:text-nord-0 hover:file:bg-nord-5"
+          className={
+            "block " +
+            "w-full " +
+            "mt-1 " +
+            "text-sm " +
+            "text-nord-0 " +
+            "dark:text-nord-5 " +
+            "file:mr-4 " +
+            "file:py-2 " +
+            "file:px-4 " +
+            "file:border-0 " +
+            "file:text-sm " +
+            "file:font-semibold " +
+            "file:bg-nord-4 " +
+            "dark:file:bg-nord-1 " +
+            "file:text-nord-0 " +
+            "dark:file:text-nord-5 " +
+            "hover:file:bg-nord-5 " +
+            "dark:hover:file:bg-nord-2"
+          }
         />
       </label>
       <label>
@@ -50,7 +69,22 @@ function ImageInput({ onImageSubmit }: Props) {
       <button
         type="submit"
         value="Go"
-        className="block w-32 mx-auto mt-1 py-2 px-4 text-sm text-nord-0 bg-nord-4 hover:bg-nord-5"
+        data-umami-event="image submit"
+        className={
+          "block " +
+          "w-32 " +
+          "mx-auto " +
+          "mt-1 " +
+          "py-2 " +
+          "px-4 " +
+          "text-sm " +
+          "text-nord-0 " +
+          "dark:text-nord-5 " +
+          "bg-nord-4 " +
+          "dark:bg-nord-1 " +
+          "hover:bg-nord-5 " +
+          "dark:hover:bg-nord-2"
+        }
       >
         Go
       </button>

client/src/ImageOutput.tsx

@@ -29,7 +29,22 @@ function ImageOutput({ imageData }: OutputProps) {
       />
       <button
         onClick={handleClick}
-        className="block w-48 mx-auto mt-1 py-2 px-4 text-sm text-center text-nord-0 bg-nord-4 hover:bg-nord-5"
+        className={
+          "block " +
+          "w-48 " +
+          "mx-auto " +
+          "mt-1 " +
+          "py-2 " +
+          "px-4 " +
+          "text-sm " +
+          "text-center " +
+          "text-nord-0 " +
+          "dark:text-nord-5 " +
+          "bg-nord-4 " +
+          "dark:bg-nord-1 " +
+          "hover:bg-nord-5 " +
+          "dark:hover:bg-nord-2"
+        }
       >
         Download
       </button>
@@ -37,7 +52,22 @@ function ImageOutput({ imageData }: OutputProps) {
         href={imageUrl}
         target="_blank"
         rel="noopener noreferrer"
-        className="block w-48 mx-auto mt-1 py-2 px-4 text-sm text-center text-nord-0 bg-nord-4 hover:bg-nord-5"
+        className={
+          "block " +
+          "w-48 " +
+          "mx-auto " +
+          "mt-1 " +
+          "py-2 " +
+          "px-4 " +
+          "text-sm " +
+          "text-center " +
+          "text-nord-0 " +
+          "dark:text-nord-5 " +
+          "bg-nord-4 " +
+          "dark:bg-nord-1 " +
+          "hover:bg-nord-5 " +
+          "dark:hover:bg-nord-2"
+        }
       >
         Open in new tab
       </a>

client/src/ImagePreview.tsx

@@ -1,3 +1,5 @@
+import { faSpinner } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useEffect } from "react";
 
 interface ImagePreviewProps {
@@ -14,12 +16,20 @@ function ImagePreview({ imageData }: ImagePreviewProps) {
   }, [imageUrl]);
 
   return (
-    <div className="blur-sm max-w-4xl mx-auto">
+    <div className="max-w-4xl mx-auto">
+      <div className="relative">
         <img
           alt="preview"
           src={imageUrl}
-        className="object-cover min-w-[70%] my-4 px-2 mx-auto"
+          className="blur-sm object-cover min-w-[70%] my-4 px-2 mx-auto"
         />
+        <div className="absolute inset-1/2 -translate-y-12 -translate-x-12 w-24 h-24">
+          <FontAwesomeIcon
+            icon={faSpinner}
+            className="absolute animate-spin text-8xl"
+          />
+        </div>
+      </div>
     </div>
   );
 }

client/src/Palette.ts

@@ -93,6 +93,48 @@ const kirokaze = new Palette("Kirokaze GameBoy", [
   "e2f3e4",
 ]);
 
+const gruvbox = new Palette("Gruvbox", [
+  "1d2021",
+  "282828",
+  "32302f",
+  "3c3836",
+  "504945",
+  "665c54",
+  "7c6f64",
+  "7c6f64",
+  "928374",
+  "928374",
+  "f9f5d7",
+  "fbf1c7",
+  "f2e5bc",
+  "ebdbb2",
+  "d5c4a1",
+  "bdae93",
+  "a89984",
+  "a89984",
+  "fb4934",
+  "b8bb26",
+  "fabd2f",
+  "83a598",
+  "d3869b",
+  "8ec07c",
+  "fe8019",
+  "cc241d",
+  "98971a",
+  "d79921",
+  "458588",
+  "b16286",
+  "689d6a",
+  "d65d0e",
+  "9d0006",
+  "79740e",
+  "b57614",
+  "076678",
+  "8f3f71",
+  "427b58",
+  "af3a03",
+]);
+
 const palettes = [
   nord,
   monokai,
@@ -102,6 +144,7 @@ const palettes = [
   dracula,
   iceCream,
   kirokaze,
+  gruvbox,
 ];
 
 palettes.sort((a, b) => a.label.localeCompare(b.label));

client/src/PalettePreview.tsx

@@ -26,7 +26,7 @@ function PalettePreview({ palette }: PalettePreviewProps) {
 
   return (
     <div
-      className="h-5 my-2 border-solid border-2 border-nord-0"
+      className="h-5 my-2 border-solid border-2 border-nord-0 dark:border-nord-5"
       style={{ background: gradientString }}
     ></div>
   );

client/src/PaletteSelect.tsx

@@ -24,7 +24,16 @@ function PaletteSelect({ value, onChange }: PaletteSelectProps) {
     <select
       value={valueIndex}
       onChange={handlePaletteChange}
-      className="form-select block w-full mt-1"
+      className={
+        "form-select " +
+        "dark:text-nord-5 " +
+        "dark:bg-nord-1 " +
+        "focus:ring-nord-7 " +
+        "focus:border-nord-7 " +
+        "block " +
+        "w-full " +
+        "mt-1"
+      }
     >
       {paletteOptions}
     </select>

client/src/ThemeToggler.tsx

@@ -0,0 +1,81 @@
+import {
+  faMoon,
+  faSun,
+  IconDefinition,
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useEffect, useState } from "react";
+
+type Theme = "light" | "dark";
+
+function ThemeToggler() {
+  const userPrefersDarkMode = (): boolean => {
+    return (
+      localStorage.theme === "dark" ||
+      (!("theme" in localStorage) &&
+        window.matchMedia("(prefers-color-scheme: dark)").matches)
+    );
+  };
+
+  const getCurrentTheme = (): Theme => {
+    // We have a theme set
+    if ("theme" in localStorage) {
+      const theme = localStorage.getItem("theme");
+      // Is it valid ?
+      if (theme === "dark" || theme === "light") {
+        return theme;
+      } else {
+        // Invalid theme, remove it and return default
+        localStorage.removeItem("theme");
+        return userPrefersDarkMode() ? "dark" : "light";
+      }
+    } else {
+      return userPrefersDarkMode() ? "dark" : "light";
+    }
+  };
+
+  const [theme, setTheme] = useState<Theme>(getCurrentTheme());
+
+  const rotateTheme = () => {
+    switch (theme) {
+      case "light":
+        setTheme("dark");
+        break;
+      case "dark":
+        setTheme("light");
+        break;
+      default:
+        setTheme("light");
+        break;
+    }
+  };
+
+  const getIcon = (): IconDefinition => {
+    switch (theme) {
+      case "light":
+        return faMoon;
+      case "dark":
+        return faSun;
+    }
+  };
+
+  useEffect(() => {
+    localStorage.theme = theme;
+
+    if (theme === "dark") {
+      document.documentElement.classList.add("dark");
+    } else if (theme === "light") {
+      document.documentElement.classList.remove("dark");
+    }
+  }, [theme]);
+
+  return (
+    <FontAwesomeIcon
+      icon={getIcon()}
+      onClick={rotateTheme}
+      className="fa-2x hover:text-nord-7 mx-2"
+    />
+  );
+}
+
+export default ThemeToggler;

client/tailwind.config.js

@@ -1,5 +1,6 @@
 module.exports = {
   content: ["./src/**/*.{ts,tsx}", "./public/index.html}"],
+  darkMode: "class",
   theme: {
     extend: {
       colors: {

src/go.mod

@@ -1,5 +1,5 @@
 module github.com/CrispyBaguette/wasm-palette-converter
 
-go 1.17
+go 1.21
 
-require github.com/makeworld-the-better-one/dither/v2 v2.2.0
+require github.com/makeworld-the-better-one/dither/v2 v2.4.0

src/go.sum

@@ -2,6 +2,8 @@ github.com/davecgh/go-spew v1.1.0 h1:ZDRjVQ15GmhC3fiQ8ni8+OwkZQO4DARzQgrnXU1Liz8
 github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
 github.com/makeworld-the-better-one/dither/v2 v2.2.0 h1:VTMAiyyO1YIO07fZwuLNZZasJgKUmvsIA48ze3ALHPQ=
 github.com/makeworld-the-better-one/dither/v2 v2.2.0/go.mod h1:VBtN8DXO7SNtyGmLiGA7IsFeKrBkQPze1/iAeM95arc=
+github.com/makeworld-the-better-one/dither/v2 v2.4.0 h1:Az/dYXiTcwcRSe59Hzw4RI1rSnAZns+1msaCXetrMFE=
+github.com/makeworld-the-better-one/dither/v2 v2.4.0/go.mod h1:VBtN8DXO7SNtyGmLiGA7IsFeKrBkQPze1/iAeM95arc=
 github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
 github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
 github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=