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">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -3,4 +3,4 @@ module.exports = {
|
|||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@tailwind utilities;
|
||||
|
|
|
|||
|
|
@ -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!,
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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 };
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
export default About;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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")],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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()],
|
||||
},
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user