Compare commits

..

27 Commits

Author SHA1 Message Date
532634d435 Merge branch 'master' into more-palettes 2024-01-15 17:27:22 +01:00
9835aac749 Use correct dep name
All checks were successful
Build and deploy / build-wasm (push) Successful in 19s
Build and deploy / build-react (push) Successful in 47s
Build and deploy / merge (push) Successful in 13s
Build and deploy / Pin to cluster node (push) Successful in 9s
Build and deploy / Update OVH DNS (push) Successful in 6s
2024-01-12 19:57:15 +01:00
7d663a4981 Rename folder
Some checks failed
Build and deploy / build-wasm (push) Successful in 30s
Build and deploy / build-react (push) Successful in 1m5s
Build and deploy / Pin to cluster node (push) Failing after 4s
Build and deploy / Update OVH DNS (push) Has been skipped
Build and deploy / merge (push) Successful in 7s
2024-01-12 19:53:24 +01:00
c800299948 Switch to custom action 2024-01-12 19:53:00 +01:00
63fd7322f2 Update client/src/Header.tsx
All checks were successful
Build and deploy / build-wasm (push) Successful in 23s
Build and deploy / build-react (push) Successful in 52s
Build and deploy / merge (push) Successful in 6s
Build and deploy / Push to web3.storage (push) Successful in 15s
Build and deploy / Update OVH DNS (push) Successful in 4s
2024-01-05 22:44:27 +00:00
80e29329b9 Update README.md
All checks were successful
Build and deploy / build-wasm (push) Successful in 30s
Build and deploy / build-react (push) Successful in 1m2s
Build and deploy / merge (push) Successful in 6s
Build and deploy / Push to web3.storage (push) Successful in 22s
Build and deploy / Update OVH DNS (push) Successful in 5s
2024-01-05 12:02:51 +00:00
1319c587dd Update .github/workflows/ci.yml
All checks were successful
Build and deploy / build-wasm (push) Successful in 19s
Build and deploy / build-react (push) Successful in 46s
Build and deploy / merge (push) Successful in 7s
Build and deploy / Push to web3.storage (push) Successful in 15s
Build and deploy / Update OVH DNS (push) Successful in 4s
2024-01-03 12:11:18 +00:00
40c336c816 Update .github/workflows/ci.yml
Some checks failed
Build and deploy / build-react (push) Waiting to run
Build and deploy / merge (push) Waiting to run
Build and deploy / Push to web3.storage (push) Waiting to run
Build and deploy / Update OVH DNS (push) Waiting to run
Build and deploy / build-wasm (push) Has been cancelled
2024-01-03 12:03:33 +00:00
e9aecbdcb1 Update dither dep (#30)
Some checks failed
Build and deploy / merge (push) Blocked by required conditions
Build and deploy / Push to web3.storage (push) Blocked by required conditions
Build and deploy / Update OVH DNS (push) Blocked by required conditions
Build and deploy / build-wasm (push) Failing after 1m58s
Build and deploy / build-react (push) Has been cancelled
Reviewed-on: #30
Fixes #2
Co-authored-by: Alexandre <alexandre@bruyant.xyz>
Co-committed-by: Alexandre <alexandre@bruyant.xyz>
2024-01-03 12:00:54 +00:00
CrispyBaguette
607e7f44e9 handle missing umami 2023-10-08 11:25:41 +02:00
CrispyBaguette
7e1dc8c443
Merge pull request #29 from CrispyBaguette/event-tracking
umami event tracking
2023-06-07 12:21:18 +02:00
CrispyBaguette
3c56bbdc0e umami event tracking 2023-06-07 12:20:55 +02:00
CrispyBaguette
fc0c840d16
Merge pull request #28 from CrispyBaguette/umami-dnt
Respect DNT setting
2023-05-29 13:53:33 +02:00
CrispyBaguette
42b7f3bede Respect DNT setting 2023-05-29 13:53:04 +02:00
CrispyBaguette
dc117a1617
Merge pull request #27 from CrispyBaguette/umami
Add umami tracking
2023-05-29 13:30:52 +02:00
CrispyBaguette
999c710335 Add umami tracking 2023-05-29 13:29:38 +02:00
CrispyBaguette
475ab0e732 remove pinata 2023-03-06 23:22:41 +01:00
CrispyBaguette
8c02234024
Merge pull request #26 from CrispyBaguette/gruvbox
Added gruvbox color palette
2022-11-28 08:08:19 +01:00
CrispyBaguette
26f40ad39b Added gruvbox color palette 2022-11-28 08:07:23 +01:00
CrispyBaguette
e1a797fbec
Merge pull request #25 from CrispyBaguette/dark-mode
Dark mode
2022-05-08 15:29:18 +02:00
CrispyBaguette
023752045e Tighten header 2022-05-08 15:28:37 +02:00
CrispyBaguette
232d5f269a Light theme default rotation 2022-05-08 15:19:48 +02:00
CrispyBaguette
cf9895b5bb Theme toggling 2022-05-08 15:16:39 +02:00
CrispyBaguette
c4384187e1 Bunch of updates 2022-05-08 15:16:32 +02:00
CrispyBaguette
49b3de25aa Auto dark mode 2022-05-08 12:42:43 +02:00
CrispyBaguette
f27457ba70
Merge pull request #24 from CrispyBaguette/spinner
Added spinner over preview image
2022-05-05 17:02:15 +02:00
CrispyBaguette
a1f7d60e19 Added spinner over preview image 2022-05-05 16:54:44 +02:00
19 changed files with 5571 additions and 5483 deletions

128
.gitea/workflows/ci.yml Normal file
View File

@ -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

View File

@ -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

View File

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

9225
client/package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -4,23 +4,23 @@
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"dependencies": { "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", "classnames": "^2.3.1",
"file-saver": "^2.0.5", "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", "react-scripts": "next",
"typescript": "^4.5.3", "typescript": "^4.6.4",
"web-vitals": "^1.1.2" "web-vitals": "^2.1.4"
}, },
"scripts": { "scripts": {
"start": "BROWSER=none react-scripts start", "start": "BROWSER=none react-scripts start",
@ -47,11 +47,11 @@
] ]
}, },
"devDependencies": { "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"
} }
} }

View File

@ -12,6 +12,23 @@
/> />
<link rel="manifest" href="%PUBLIC_URL%/site.webmanifest" /> <link rel="manifest" href="%PUBLIC_URL%/site.webmanifest" />
<title>Palette Switcher</title> <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> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>

View File

@ -1,66 +1,26 @@
/* eslint-disable no-undef */
/* eslint-disable no-restricted-globals */
// Copyright 2018 The Go Authors. All rights reserved. // Copyright 2018 The Go Authors. All rights reserved.
// Use of this source code is governed by a BSD-style // Use of this source code is governed by a BSD-style
// license that can be found in the LICENSE file. // 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 enosys = () => {
const err = new Error("not implemented"); const err = new Error("not implemented");
err.code = "ENOSYS"; err.code = "ENOSYS";
return err; return err;
}; };
if (!global.fs) { if (!globalThis.fs) {
let outputBuf = ""; 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) { writeSync(fd, buf) {
outputBuf += decoder.decode(buf); outputBuf += decoder.decode(buf);
const nl = outputBuf.lastIndexOf("\n"); const nl = outputBuf.lastIndexOf("\n");
if (nl != -1) { 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; return buf.length;
}, },
@ -72,152 +32,67 @@
const n = this.writeSync(fd, buf); const n = this.writeSync(fd, buf);
callback(null, n); 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, pid: -1,
ppid: -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 encoder = new TextEncoder("utf-8");
const decoder = new TextDecoder("utf-8"); const decoder = new TextDecoder("utf-8");
global.Go = class { globalThis.Go = class {
constructor() { constructor() {
this.argv = ["js"]; this.argv = ["js"];
this.env = {}; this.env = {};
@ -236,13 +111,17 @@
const setInt64 = (addr, v) => { const setInt64 = (addr, v) => {
this.mem.setUint32(addr + 0, v, true); this.mem.setUint32(addr + 0, v, true);
this.mem.setUint32(addr + 4, Math.floor(v / 4294967296), 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 getInt64 = (addr) => {
const low = this.mem.getUint32(addr + 0, true); const low = this.mem.getUint32(addr + 0, true);
const high = this.mem.getInt32(addr + 4, true); const high = this.mem.getInt32(addr + 4, true);
return low + high * 4294967296; return low + high * 4294967296;
}; }
const loadValue = (addr) => { const loadValue = (addr) => {
const f = this.mem.getFloat64(addr, true); const f = this.mem.getFloat64(addr, true);
@ -255,10 +134,10 @@
const id = this.mem.getUint32(addr, true); const id = this.mem.getUint32(addr, true);
return this._values[id]; return this._values[id];
}; }
const storeValue = (addr, v) => { const storeValue = (addr, v) => {
const nanHead = 0x7ff80000; const nanHead = 0x7FF80000;
if (typeof v === "number" && v !== 0) { if (typeof v === "number" && v !== 0) {
if (isNaN(v)) { if (isNaN(v)) {
@ -305,13 +184,13 @@
} }
this.mem.setUint32(addr + 4, nanHead | typeFlag, true); this.mem.setUint32(addr + 4, nanHead | typeFlag, true);
this.mem.setUint32(addr, id, true); this.mem.setUint32(addr, id, true);
}; }
const loadSlice = (addr) => { const loadSlice = (addr) => {
const array = getInt64(addr + 0); const array = getInt64(addr + 0);
const len = getInt64(addr + 8); const len = getInt64(addr + 8);
return new Uint8Array(this._inst.exports.mem.buffer, array, len); return new Uint8Array(this._inst.exports.mem.buffer, array, len);
}; }
const loadSliceOfValues = (addr) => { const loadSliceOfValues = (addr) => {
const array = getInt64(addr + 0); const array = getInt64(addr + 0);
@ -321,19 +200,20 @@
a[i] = loadValue(array + i * 8); a[i] = loadValue(array + i * 8);
} }
return a; return a;
}; }
const loadString = (addr) => { const loadString = (addr) => {
const saddr = getInt64(addr + 0); const saddr = getInt64(addr + 0);
const len = getInt64(addr + 8); 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(); const timeOrigin = Date.now() - performance.now();
this.importObject = { 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) // 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 // 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). // 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 fd = getInt64(sp + 8);
const p = getInt64(sp + 16); const p = getInt64(sp + 16);
const n = this.mem.getInt32(sp + 24, true); 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() // func resetMemoryDataView()
@ -379,7 +256,7 @@
// func walltime() (sec int64, nsec int32) // func walltime() (sec int64, nsec int32)
"runtime.walltime": (sp) => { "runtime.walltime": (sp) => {
sp >>>= 0; sp >>>= 0;
const msec = new Date().getTime(); const msec = (new Date).getTime();
setInt64(sp + 8, msec / 1000); setInt64(sp + 8, msec / 1000);
this.mem.setInt32(sp + 16, (msec % 1000) * 1000000, true); this.mem.setInt32(sp + 16, (msec % 1000) * 1000000, true);
}, },
@ -389,9 +266,7 @@
sp >>>= 0; sp >>>= 0;
const id = this._nextCallbackTimeoutID; const id = this._nextCallbackTimeoutID;
this._nextCallbackTimeoutID++; this._nextCallbackTimeoutID++;
this._scheduledTimeouts.set( this._scheduledTimeouts.set(id, setTimeout(
id,
setTimeout(
() => { () => {
this._resume(); this._resume();
while (this._scheduledTimeouts.has(id)) { while (this._scheduledTimeouts.has(id)) {
@ -401,9 +276,8 @@
this._resume(); 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); this.mem.setInt32(sp + 16, id, true);
}, },
@ -451,11 +325,7 @@
// func valueSet(v ref, p string, x ref) // func valueSet(v ref, p string, x ref)
"syscall/js.valueSet": (sp) => { "syscall/js.valueSet": (sp) => {
sp >>>= 0; 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) // func valueDelete(v ref, p string)
@ -467,20 +337,13 @@
// func valueIndex(v ref, i int) ref // func valueIndex(v ref, i int) ref
"syscall/js.valueIndex": (sp) => { "syscall/js.valueIndex": (sp) => {
sp >>>= 0; 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) // valueSetIndex(v ref, i int, x ref)
"syscall/js.valueSetIndex": (sp) => { "syscall/js.valueSetIndex": (sp) => {
sp >>>= 0; 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) // func valueCall(v ref, m string, args []ref) (ref, bool)
@ -559,10 +422,7 @@
// func valueInstanceOf(v ref, t ref) bool // func valueInstanceOf(v ref, t ref) bool
"syscall/js.valueInstanceOf": (sp) => { "syscall/js.valueInstanceOf": (sp) => {
sp >>>= 0; 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) // func copyBytesToGo(dst []byte, src ref) (int, bool)
@ -570,9 +430,7 @@
sp >>>= 0; sp >>>= 0;
const dst = loadSlice(sp + 8); const dst = loadSlice(sp + 8);
const src = loadValue(sp + 32); 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); this.mem.setUint8(sp + 48, 0);
return; return;
} }
@ -587,9 +445,7 @@
sp >>>= 0; sp >>>= 0;
const dst = loadValue(sp + 8); const dst = loadValue(sp + 8);
const src = loadSlice(sp + 16); 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); this.mem.setUint8(sp + 48, 0);
return; return;
} }
@ -599,10 +455,10 @@
this.mem.setUint8(sp + 48, 1); this.mem.setUint8(sp + 48, 1);
}, },
debug: (value) => { "debug": (value) => {
console.log(value); console.log(value);
}, },
}, }
}; };
} }
@ -612,24 +468,22 @@
} }
this._inst = instance; this._inst = instance;
this.mem = new DataView(this._inst.exports.mem.buffer); 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, NaN,
0, 0,
null, null,
true, true,
false, false,
global, globalThis,
this, 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._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], [0, 1],
[null, 2], [null, 2],
[true, 3], [true, 3],
[false, 4], [false, 4],
[global, 5], [globalThis, 5],
[this, 6], [this, 6],
]); ]);
this._idPool = []; // unused ids that have been garbage collected this._idPool = []; // unused ids that have been garbage collected
@ -674,9 +528,7 @@
// Keep in sync with cmd/link/internal/ld/data.go:wasmMinDataAddr. // Keep in sync with cmd/link/internal/ld/data.go:wasmMinDataAddr.
const wasmMinDataAddr = 4096 + 8192; const wasmMinDataAddr = 4096 + 8192;
if (offset >= wasmMinDataAddr) { 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); this._inst.exports.run(argc, argv);
@ -705,40 +557,5 @@
return event.result; 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);
});
} }
})(); })();

View File

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

View File

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

View File

@ -39,7 +39,26 @@ function ImageInput({ onImageSubmit }: Props) {
type="file" type="file"
accept="image/png, image/jpeg" accept="image/png, image/jpeg"
ref={fileInputRef} 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>
<label> <label>
@ -50,7 +69,22 @@ function ImageInput({ onImageSubmit }: Props) {
<button <button
type="submit" type="submit"
value="Go" 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 Go
</button> </button>

View File

@ -29,7 +29,22 @@ function ImageOutput({ imageData }: OutputProps) {
/> />
<button <button
onClick={handleClick} 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 Download
</button> </button>
@ -37,7 +52,22 @@ function ImageOutput({ imageData }: OutputProps) {
href={imageUrl} href={imageUrl}
target="_blank" target="_blank"
rel="noopener noreferrer" 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 Open in new tab
</a> </a>

View File

@ -1,3 +1,5 @@
import { faSpinner } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useEffect } from "react"; import { useEffect } from "react";
interface ImagePreviewProps { interface ImagePreviewProps {
@ -14,12 +16,20 @@ function ImagePreview({ imageData }: ImagePreviewProps) {
}, [imageUrl]); }, [imageUrl]);
return ( return (
<div className="blur-sm max-w-4xl mx-auto"> <div className="max-w-4xl mx-auto">
<div className="relative">
<img <img
alt="preview" alt="preview"
src={imageUrl} 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> </div>
); );
} }

View File

@ -93,6 +93,48 @@ const kirokaze = new Palette("Kirokaze GameBoy", [
"e2f3e4", "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 = [ const palettes = [
nord, nord,
monokai, monokai,
@ -102,6 +144,7 @@ const palettes = [
dracula, dracula,
iceCream, iceCream,
kirokaze, kirokaze,
gruvbox,
]; ];
palettes.sort((a, b) => a.label.localeCompare(b.label)); palettes.sort((a, b) => a.label.localeCompare(b.label));

View File

@ -26,7 +26,7 @@ function PalettePreview({ palette }: PalettePreviewProps) {
return ( return (
<div <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 }} style={{ background: gradientString }}
></div> ></div>
); );

View File

@ -24,7 +24,16 @@ function PaletteSelect({ value, onChange }: PaletteSelectProps) {
<select <select
value={valueIndex} value={valueIndex}
onChange={handlePaletteChange} 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} {paletteOptions}
</select> </select>

View File

@ -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;

View File

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

View File

@ -1,5 +1,5 @@
module github.com/CrispyBaguette/wasm-palette-converter 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

View File

@ -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/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 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.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 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4= 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= github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=