Prettier
This commit is contained in:
parent
54126098bb
commit
e719223d3b
@ -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>
|
||||||
|
@ -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",
|
||||||
|
File diff suppressed because it is too large
Load Diff
@ -3,4 +3,4 @@ module.exports = {
|
|||||||
tailwindcss: {},
|
tailwindcss: {},
|
||||||
autoprefixer: {},
|
autoprefixer: {},
|
||||||
},
|
},
|
||||||
}
|
};
|
||||||
|
@ -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) => (
|
||||||
|
<div class="flex flex-col h-screen">
|
||||||
<Header />
|
<Header />
|
||||||
<main class='mb-auto'>
|
<main class="mb-auto">{props.children}</main>
|
||||||
{props.children}
|
|
||||||
</main>
|
|
||||||
<Footer />
|
<Footer />
|
||||||
</div>
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
export default App;
|
export default App;
|
||||||
|
|
||||||
|
@ -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(
|
||||||
|
() => (
|
||||||
|
<Router root={App}>
|
||||||
<Route path="/about" component={About} />
|
<Route path="/about" component={About} />
|
||||||
<Route path="/" component={Switcher} />
|
<Route path="/" component={Switcher} />
|
||||||
</Router>, root!);
|
</Router>
|
||||||
|
),
|
||||||
|
root!,
|
||||||
|
);
|
||||||
|
@ -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 };
|
||||||
|
@ -1,21 +1,31 @@
|
|||||||
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">
|
||||||
|
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 class="grid pt-8 text-left border-t border-gray-200 md:gap-16 dark:border-gray-700 md:grid-cols-2">
|
||||||
<div>
|
<div>
|
||||||
<AboutItem>
|
<AboutItem>
|
||||||
@ -33,5 +43,6 @@ const About: Component = () => <section class="bg-white dark:bg-gray-900">
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
);
|
||||||
|
|
||||||
export default About;
|
export default About;
|
@ -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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -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')
|
};
|
||||||
],
|
|
||||||
}
|
|
||||||
|
|
||||||
|
@ -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()],
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
Loading…
Reference in New Issue
Block a user