Compare commits
No commits in common. "532634d43522637beeebe6efb2e2870af06b80e0" and "22f9aedbdfcabcbe751c085d4a174ec07887fcdf" have entirely different histories.
532634d435
...
22f9aedbdf
@ -1,128 +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.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
|
|
148
.github/workflows/ci.yml
vendored
Normal file
148
.github/workflows/ci.yml
vendored
Normal file
@ -0,0 +1,148 @@
|
|||||||
|
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
|
@ -1,4 +1,4 @@
|
|||||||
# PaletteSwitcher
|
# wasm-palette-converter
|
||||||
|
|
||||||
Go+Wasm image palette converter
|
Go+Wasm image palette converter
|
||||||
|
|
||||||
|
9233
client/package-lock.json
generated
9233
client/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -4,23 +4,23 @@
|
|||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@fortawesome/fontawesome-svg-core": "^6.1.1",
|
"@fortawesome/fontawesome-svg-core": "^1.2.36",
|
||||||
"@fortawesome/free-brands-svg-icons": "^6.1.1",
|
"@fortawesome/free-brands-svg-icons": "^5.15.4",
|
||||||
"@fortawesome/free-solid-svg-icons": "^6.1.1",
|
"@fortawesome/free-solid-svg-icons": "^5.15.4",
|
||||||
"@fortawesome/react-fontawesome": "^0.1.18",
|
"@fortawesome/react-fontawesome": "^0.1.16",
|
||||||
"@testing-library/jest-dom": "^5.16.4",
|
"@testing-library/jest-dom": "^5.16.1",
|
||||||
"@testing-library/react": "^13.2.0",
|
"@testing-library/react": "^11.2.7",
|
||||||
"@testing-library/user-event": "^14.1.1",
|
"@testing-library/user-event": "^12.8.3",
|
||||||
"@types/jest": "^27.5.0",
|
"@types/jest": "^26.0.24",
|
||||||
"@types/node": "^17.0.31",
|
"@types/node": "^12.20.37",
|
||||||
"@types/react": "^18.0.9",
|
"@types/react": "^17.0.37",
|
||||||
"classnames": "^2.3.1",
|
"classnames": "^2.3.1",
|
||||||
"file-saver": "^2.0.5",
|
"file-saver": "^2.0.5",
|
||||||
"react": "^18.1.0",
|
"react": "^18.0.0",
|
||||||
"react-dom": "^18.1.0",
|
"react-dom": "^18.0.0",
|
||||||
"react-scripts": "next",
|
"react-scripts": "next",
|
||||||
"typescript": "^4.6.4",
|
"typescript": "^4.5.3",
|
||||||
"web-vitals": "^2.1.4"
|
"web-vitals": "^1.1.2"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "BROWSER=none react-scripts start",
|
"start": "BROWSER=none react-scripts start",
|
||||||
@ -47,11 +47,11 @@
|
|||||||
]
|
]
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@tailwindcss/forms": "^0.5.1",
|
"@tailwindcss/forms": "^0.4.0",
|
||||||
"@types/file-saver": "^2.0.5",
|
"@types/file-saver": "^2.0.4",
|
||||||
"@types/react-dom": "^18.0.3",
|
"@types/react-dom": "^18.0.1",
|
||||||
"autoprefixer": "^10.4.7",
|
"autoprefixer": "^10.4.0",
|
||||||
"postcss": "^8.4.13",
|
"postcss": "^8.4.4",
|
||||||
"tailwindcss": "^3.0.24"
|
"tailwindcss": "^3.0.1"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -12,23 +12,6 @@
|
|||||||
/>
|
/>
|
||||||
<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>
|
||||||
|
File diff suppressed because it is too large
Load Diff
@ -26,21 +26,14 @@ 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 dark:bg-nord-0 text-nord-0 dark:text-nord-6 min-h-screen">
|
<div className="bg-nord-6 text-nord-0 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">
|
||||||
|
@ -1,48 +1,42 @@
|
|||||||
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="bg-nord-1 text-nord-5 py-3 px-2">
|
<header className="flex items-center 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"
|
||||||
|
>
|
||||||
|
<FontAwesomeIcon
|
||||||
|
icon={faGithub}
|
||||||
|
className="fa-2x hover:text-nord-7 mx-2"
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
href="https://blog.bruyant.xyz"
|
||||||
|
>
|
||||||
|
<FontAwesomeIcon
|
||||||
|
icon={faIgloo}
|
||||||
|
className="fa-2x hover:text-nord-7 mx-2"
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
<span className="text-sm">
|
||||||
|
Powered by{" "}
|
||||||
<a
|
<a
|
||||||
|
href="https://ipfs.io"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noreferrer"
|
||||||
href="https://gitea.bruyant.xyz/alexandre/PaletteSwitcher"
|
className="bg-nord-5 text-nord-1 hover:bg-nord-7 px-1 "
|
||||||
>
|
>
|
||||||
<FontAwesomeIcon
|
IPFS
|
||||||
icon={faGithub}
|
|
||||||
className="fa-2x hover:text-nord-7 mx-2"
|
|
||||||
/>
|
|
||||||
</a>
|
</a>
|
||||||
<a
|
. Visit using your own node !
|
||||||
target="_blank"
|
</span>
|
||||||
rel="noopener noreferrer"
|
|
||||||
href="https://blog.bruyant.xyz"
|
|
||||||
>
|
|
||||||
<FontAwesomeIcon
|
|
||||||
icon={faIgloo}
|
|
||||||
className="fa-2x hover:text-nord-7 mx-2"
|
|
||||||
/>
|
|
||||||
</a>
|
|
||||||
<span className="text-sm">
|
|
||||||
Powered by{" "}
|
|
||||||
<a
|
|
||||||
href="https://ipfs.io"
|
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer"
|
|
||||||
className="bg-nord-5 text-nord-1 hover:bg-nord-7 px-1 "
|
|
||||||
>
|
|
||||||
IPFS
|
|
||||||
</a>
|
|
||||||
. Visit using your own node !
|
|
||||||
</span>
|
|
||||||
<span className="ml-auto">
|
|
||||||
<ThemeToggler />
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</header>
|
</header>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -39,26 +39,7 @@ function ImageInput({ onImageSubmit }: Props) {
|
|||||||
type="file"
|
type="file"
|
||||||
accept="image/png, image/jpeg"
|
accept="image/png, image/jpeg"
|
||||||
ref={fileInputRef}
|
ref={fileInputRef}
|
||||||
className={
|
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"
|
||||||
"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>
|
||||||
@ -69,22 +50,7 @@ function ImageInput({ onImageSubmit }: Props) {
|
|||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
value="Go"
|
value="Go"
|
||||||
data-umami-event="image submit"
|
className="block w-32 mx-auto mt-1 py-2 px-4 text-sm text-nord-0 bg-nord-4 hover:bg-nord-5"
|
||||||
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>
|
||||||
|
@ -29,22 +29,7 @@ function ImageOutput({ imageData }: OutputProps) {
|
|||||||
/>
|
/>
|
||||||
<button
|
<button
|
||||||
onClick={handleClick}
|
onClick={handleClick}
|
||||||
className={
|
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"
|
||||||
"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>
|
||||||
@ -52,22 +37,7 @@ function ImageOutput({ imageData }: OutputProps) {
|
|||||||
href={imageUrl}
|
href={imageUrl}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
className={
|
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"
|
||||||
"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>
|
||||||
|
@ -1,5 +1,3 @@
|
|||||||
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 {
|
||||||
@ -16,20 +14,12 @@ function ImagePreview({ imageData }: ImagePreviewProps) {
|
|||||||
}, [imageUrl]);
|
}, [imageUrl]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="max-w-4xl mx-auto">
|
<div className="blur-sm 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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -93,48 +93,6 @@ 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,
|
||||||
@ -144,7 +102,6 @@ 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));
|
||||||
|
@ -26,7 +26,7 @@ function PalettePreview({ palette }: PalettePreviewProps) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className="h-5 my-2 border-solid border-2 border-nord-0 dark:border-nord-5"
|
className="h-5 my-2 border-solid border-2 border-nord-0"
|
||||||
style={{ background: gradientString }}
|
style={{ background: gradientString }}
|
||||||
></div>
|
></div>
|
||||||
);
|
);
|
||||||
|
@ -24,16 +24,7 @@ function PaletteSelect({ value, onChange }: PaletteSelectProps) {
|
|||||||
<select
|
<select
|
||||||
value={valueIndex}
|
value={valueIndex}
|
||||||
onChange={handlePaletteChange}
|
onChange={handlePaletteChange}
|
||||||
className={
|
className="form-select block w-full mt-1"
|
||||||
"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>
|
||||||
|
@ -1,81 +0,0 @@
|
|||||||
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;
|
|
@ -1,6 +1,5 @@
|
|||||||
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: {
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
module github.com/CrispyBaguette/wasm-palette-converter
|
module github.com/CrispyBaguette/wasm-palette-converter
|
||||||
|
|
||||||
go 1.21
|
go 1.17
|
||||||
|
|
||||||
require github.com/makeworld-the-better-one/dither/v2 v2.4.0
|
require github.com/makeworld-the-better-one/dither/v2 v2.2.0
|
||||||
|
@ -2,8 +2,6 @@ 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=
|
||||||
|
Loading…
Reference in New Issue
Block a user