alexandre/PaletteSwitcher
1
0
Fork 0
Code Issues 4 Pull Requests 8 Actions Packages Projects Releases Activity

Prettier

Browse Source
This commit is contained in:
Alexandre Bruyant 2024-01-16 21:52:47 +01:00
parent 54126098bb
commit e719223d3b
12 changed files with 1482 additions and 702 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
palette-switcher-v2/index.html
View File

@ -1,4 +1,4 @@
<!DOCTYPE html> <!doctype html>
<html lang="en" class="h-full bg-gray-100"> <html lang="en" class="h-full bg-gray-100">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
@ -11,6 +11,7 @@
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div> <div id="root"></div>
<script src="/src/wasm-exec.js"></script>
<script src="/src/index.tsx" type="module"></script> <script src="/src/index.tsx" type="module"></script>
</body> </body>
</html> </html>

3
palette-switcher-v2/package.json
View File

@ -16,7 +16,8 @@
"tailwindcss": "^3.4.1", "tailwindcss": "^3.4.1",
"typescript": "^5.1.3", "typescript": "^5.1.3",
"vite": "^4.3.9", "vite": "^4.3.9",
"vite-plugin-solid": "^2.7.0" "vite-plugin-solid": "^2.7.0",
"vite-plugin-wasm": "^3.3.0"
}, },
"dependencies": { "dependencies": {
"@fortawesome/free-brands-svg-icons": "^6.5.1", "@fortawesome/free-brands-svg-icons": "^6.5.1",

2013
palette-switcher-v2/pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff

2
palette-switcher-v2/postcss.config.js
View File

@ -3,4 +3,4 @@ module.exports = {
tailwindcss: {}, tailwindcss: {},
autoprefixer: {}, autoprefixer: {},
}, },
} };

23
palette-switcher-v2/src/App.tsx
View File

@ -1,15 +1,14 @@
import type { ParentComponent } from 'solid-js'; import type { ParentComponent } from "solid-js";
import Header from './Header'; import Header from "./Header";
import 'flowbite'; import "flowbite";
import Footer from './Footer'; import Footer from "./Footer";
const App: ParentComponent = (props) => <div class='flex flex-col h-screen'> const App: ParentComponent = (props) => (
<Header /> <div class="flex flex-col h-screen">
<main class='mb-auto'> <Header />
{props.children} <main class="mb-auto">{props.children}</main>
</main> <Footer />
<Footer /> </div>
</div> );
export default App; export default App;

2
palette-switcher-v2/src/index.css
View File

@ -1,3 +1,3 @@
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;

29
palette-switcher-v2/src/index.tsx
View File

@ -1,21 +1,26 @@
/* @refresh reload */ /* @refresh reload */
import { render } from 'solid-js/web'; import { render } from "solid-js/web";
import './index.css'; import "./index.css";
import App from './App'; import App from "./App";
import { Router, Route } from '@solidjs/router'; import { Router, Route } from "@solidjs/router";
import About from './pages/About'; import About from "./pages/About";
import Switcher from './pages/Switcher'; import Switcher from "./pages/Switcher";
const root = document.getElementById('root'); const root = document.getElementById("root");
if (import.meta.env.DEV && !(root instanceof HTMLElement)) { if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
throw new Error( throw new Error(
'Root element not found. Did you forget to add it to your index.html? Or maybe the id attribute got misspelled?', "Root element not found. Did you forget to add it to your index.html? Or maybe the id attribute got misspelled?",
); );
} }
render(() => <Router root={App}> render(
<Route path="/about" component={About} /> () => (
<Route path="/" component={Switcher} /> <Router root={App}>
</Router>, root!); <Route path="/about" component={About} />
<Route path="/" component={Switcher} />
</Router>
),
root!,
);

2
palette-switcher-v2/src/lib/ditherer.ts
View File

@ -9,10 +9,8 @@ const [start, stop] = createSignaledWorker({
input: job, input: job,
output: setImage, output: setImage,
func: function process(job: Job) { func: function process(job: Job) {
console.log(job);
return "OK ?"; return "OK ?";
}, },
concurrency: 10,
}); });
export { setJob, image }; export { setJob, image };

63
palette-switcher-v2/src/pages/About.tsx
View File

@ -1,37 +1,48 @@
import { Component, ParentComponent } from "solid-js"; import { Component, ParentComponent } from "solid-js";
import { faQuestionCircle } from "@fortawesome/free-solid-svg-icons"; import { faQuestionCircle } from "@fortawesome/free-solid-svg-icons";
import Fa from "solid-fa" import Fa from "solid-fa";
const AboutItemHeader: ParentComponent = (props) => <h3 class="flex items-center mb-4 text-lg font-medium text-gray-900 dark:text-white"> const AboutItemHeader: ParentComponent = (props) => (
<Fa class="flex-shrink-0 mr-2 w-5 h-5 text-gray-500 dark:text-gray-400" icon={faQuestionCircle} /> <h3 class="flex items-center mb-4 text-lg font-medium text-gray-900 dark:text-white">
<Fa
class="flex-shrink-0 mr-2 w-5 h-5 text-gray-500 dark:text-gray-400"
icon={faQuestionCircle}
/>
{props.children} {props.children}
</h3> </h3>
);
const AboutItemParagraph: ParentComponent = (props) => <p class="text-gray-500 dark:text-gray-400">{props.children}</p> const AboutItemParagraph: ParentComponent = (props) => (
<p class="text-gray-500 dark:text-gray-400">{props.children}</p>
);
const AboutItem: ParentComponent = (props) => <div class="mb-10"> const AboutItem: ParentComponent = (props) => (
{props.children} <div class="mb-10">{props.children}</div>
</div> );
const About: Component = () => <section class="bg-white dark:bg-gray-900"> const About: Component = () => (
<section class="bg-white dark:bg-gray-900">
<div class="py-8 px-4 mx-auto max-w-screen-xl sm:py-16 lg:px-6"> <div class="py-8 px-4 mx-auto max-w-screen-xl sm:py-16 lg:px-6">
<h2 class="mb-8 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white">About Palette Switcher</h2> <h2 class="mb-8 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white">
<div class="grid pt-8 text-left border-t border-gray-200 md:gap-16 dark:border-gray-700 md:grid-cols-2"> About Palette Switcher
<div> </h2>
<AboutItem> <div class="grid pt-8 text-left border-t border-gray-200 md:gap-16 dark:border-gray-700 md:grid-cols-2">
<AboutItemHeader>How ?</AboutItemHeader> <div>
<AboutItemParagraph>Because.</AboutItemParagraph> <AboutItem>
<AboutItemParagraph>Because, also.</AboutItemParagraph> <AboutItemHeader>How ?</AboutItemHeader>
</AboutItem> <AboutItemParagraph>Because.</AboutItemParagraph>
</div> <AboutItemParagraph>Because, also.</AboutItemParagraph>
<div> </AboutItem>
<AboutItem>
<AboutItemHeader>Why ?</AboutItemHeader>
<AboutItemParagraph>Because, in another card.</AboutItemParagraph>
</AboutItem>
</div>
</div> </div>
<div>
<AboutItem>
<AboutItemHeader>Why ?</AboutItemHeader>
<AboutItemParagraph>Because, in another card.</AboutItemParagraph>
</AboutItem>
</div>
</div>
</div> </div>
</section> </section>
);
export default About; export default About;

19
palette-switcher-v2/src/pages/Switcher.tsx
View File

@ -13,9 +13,22 @@ const Switcher: Component = () => {
setJob(job); setJob(job);
}; };
return ( return (
<div class="mx-auto max-w-7xl py-6 sm:px-6 lg:px-8"> <div class="mx-auto max-w-7xl py-6 sm:px-6 lg:px-8" onClick={handler}>
{image()} <main class="p-4 h-auto">
<button onClick={() => handler()}>Click Me</button> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
<div class="border-2 border-dashed border-gray-300 rounded-lg dark:border-gray-600 h-32 md:h-64"></div>
<div class="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-32 md:h-64"></div>
<div class="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-32 md:h-64"></div>
<div class="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-32 md:h-64"></div>
</div>
</main>
<button
onClick={handler}
type="button"
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
>
Trigger
</button>
</div> </div>
); );
}; };

12
palette-switcher-v2/tailwind.config.js
View File

@ -1,14 +1,8 @@
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
module.exports = { module.exports = {
content: [ content: ["./src/**/*.{js,jsx,ts,tsx}", "./node_modules/flowbite/**/*.js"],
"./src/**/*.{js,jsx,ts,tsx}",
"./node_modules/flowbite/**/*.js"
],
theme: { theme: {
extend: {}, extend: {},
}, },
plugins: [ plugins: [require("flowbite/plugin")],
require('flowbite/plugin') };
],
}

13
palette-switcher-v2/vite.config.ts
View File

@ -1,5 +1,6 @@
import { defineConfig } from 'vite'; import { defineConfig } from "vite";
import solidPlugin from 'vite-plugin-solid'; import solidPlugin from "vite-plugin-solid";
import wasm from "vite-plugin-wasm";
// import devtools from 'solid-devtools/vite'; // import devtools from 'solid-devtools/vite';
export default defineConfig({ export default defineConfig({
@ -10,11 +11,17 @@ export default defineConfig({
*/ */
// devtools(), // devtools(),
solidPlugin(), solidPlugin(),
wasm(),
], ],
server: { server: {
port: 3000, port: 3000,
}, },
build: { build: {
target: 'esnext', target: "esnext",
},
worker: {
// Not needed with vite-plugin-top-level-await >= 1.3.0
// format: "es",
plugins: [wasm()],
}, },
}); });