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">
<head>
<meta charset="utf-8" />
@ -11,6 +11,7 @@
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="/src/wasm-exec.js"></script>
<script src="/src/index.tsx" type="module"></script>
</body>
</html>

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

@ -16,7 +16,8 @@
"tailwindcss": "^3.4.1",
"typescript": "^5.1.3",
"vite": "^4.3.9",
"vite-plugin-solid": "^2.7.0"
"vite-plugin-solid": "^2.7.0",
"vite-plugin-wasm": "^3.3.0"
},
"dependencies": {
"@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: {},
autoprefixer: {},
},
}
};

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

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

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

@ -1,21 +1,26 @@
/* @refresh reload */
import { render } from 'solid-js/web';
import { render } from "solid-js/web";
import './index.css';
import App from './App';
import { Router, Route } from '@solidjs/router';
import About from './pages/About';
import Switcher from './pages/Switcher';
import "./index.css";
import App from "./App";
import { Router, Route } from "@solidjs/router";
import About from "./pages/About";
import Switcher from "./pages/Switcher";
const root = document.getElementById('root');
const root = document.getElementById("root");
if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
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}>
<Route path="/about" component={About} />
<Route path="/" component={Switcher} />
</Router>, root!);
render(
() => (
<Router root={App}>
<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,
output: setImage,
func: function process(job: Job) {
console.log(job);
return "OK ?";
},
concurrency: 10,
});
export { setJob, image };

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

@ -1,37 +1,48 @@
import { Component, ParentComponent } from "solid-js";
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">
<Fa class="flex-shrink-0 mr-2 w-5 h-5 text-gray-500 dark:text-gray-400" icon={faQuestionCircle} />
const AboutItemHeader: ParentComponent = (props) => (
<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}
</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">
{props.children}
</div>
const AboutItem: ParentComponent = (props) => (
<div class="mb-10">{props.children}</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">
<h2 class="mb-8 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white">About Palette Switcher</h2>
<div class="grid pt-8 text-left border-t border-gray-200 md:gap-16 dark:border-gray-700 md:grid-cols-2">
<div>
<AboutItem>
<AboutItemHeader>How ?</AboutItemHeader>
<AboutItemParagraph>Because.</AboutItemParagraph>
<AboutItemParagraph>Because, also.</AboutItemParagraph>
</AboutItem>
</div>
<div>
<AboutItem>
<AboutItemHeader>Why ?</AboutItemHeader>
<AboutItemParagraph>Because, in another card.</AboutItemParagraph>
</AboutItem>
</div>
<h2 class="mb-8 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white">
About Palette Switcher
</h2>
<div class="grid pt-8 text-left border-t border-gray-200 md:gap-16 dark:border-gray-700 md:grid-cols-2">
<div>
<AboutItem>
<AboutItemHeader>How ?</AboutItemHeader>
<AboutItemParagraph>Because.</AboutItemParagraph>
<AboutItemParagraph>Because, also.</AboutItemParagraph>
</AboutItem>
</div>
<div>
<AboutItem>
<AboutItemHeader>Why ?</AboutItemHeader>
<AboutItemParagraph>Because, in another card.</AboutItemParagraph>
</AboutItem>
</div>
</div>
</div>
</section>
</section>
);
export default About;

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

@ -13,9 +13,22 @@ const Switcher: Component = () => {
setJob(job);
};
return (
<div class="mx-auto max-w-7xl py-6 sm:px-6 lg:px-8">
{image()}
<button onClick={() => handler()}>Click Me</button>
<div class="mx-auto max-w-7xl py-6 sm:px-6 lg:px-8" onClick={handler}>
<main class="p-4 h-auto">
<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>
);
};

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

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

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

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