From 8a8b24f2e48a8ca5a0cbedd33dd208131306333e Mon Sep 17 00:00:00 2001 From: Nicolas Lebrun Date: Sun, 10 Dec 2023 20:36:09 +0100 Subject: [PATCH] add demo page --- demo/index.html | 22 +++++++++++++++ demo/src/index.ts | 40 ++++++++++++++++++++++++++ demo/style.css | 68 +++++++++++++++++++++++++++++++++++++++++++++ demo/vite.config.ts | 18 ++++++++++++ package.json | 4 ++- 5 files changed, 151 insertions(+), 1 deletion(-) create mode 100644 demo/index.html create mode 100644 demo/src/index.ts create mode 100644 demo/style.css create mode 100644 demo/vite.config.ts diff --git a/demo/index.html b/demo/index.html new file mode 100644 index 0000000..9db4208 --- /dev/null +++ b/demo/index.html @@ -0,0 +1,22 @@ + + + + + + Iconic palettes + + + + + + + + + + +
+ + + + \ No newline at end of file diff --git a/demo/src/index.ts b/demo/src/index.ts new file mode 100644 index 0000000..bf08c3e --- /dev/null +++ b/demo/src/index.ts @@ -0,0 +1,40 @@ +import { Scheme } from './../../src/index'; +import { palettes, getPalette } from "../../src/index" + +const div = (className: string): HTMLElement => { + const elem = document.createElement('div'); + elem.className = className; + return elem; +}; + +const colorBlock = (palette: Scheme): HTMLElement => { + const block = div(`palette-block ${palette.theme}`); + block.style.backgroundColor = palette.background; + block.style.color = palette.stroke; + + const colors = div(`colors col-${palette.colors.length}`); + palette.colors.forEach((color) => { + const colDiv = div('color'); + colDiv.style.backgroundColor = color; + colDiv.style.border = `${Math.round(Math.random()*6)}px solid ${palette.stroke}`; + colors.appendChild(colDiv); + }); + const meta = div('palette-meta') + meta.innerHTML = ` +

+ ${palette.meta.artist} +

`; + + block.appendChild(colors); + block.appendChild(meta) + block.addEventListener('click', function () { + navigator.clipboard.writeText(JSON.stringify(palette)); + }); + return block; +}; + +const app = document.getElementById('app'); +if (app !== null) { + palettes.forEach((palette) => app.appendChild(colorBlock(palette))); +} \ No newline at end of file diff --git a/demo/style.css b/demo/style.css new file mode 100644 index 0000000..850748c --- /dev/null +++ b/demo/style.css @@ -0,0 +1,68 @@ +body { + box-sizing: border-box; + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', + 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', + 'Helvetica Neue', Arial, sans-serif; +} + +body, +#app { + margin: 0; + padding: 0; +} + +body { + padding: 2em; +} + +#app { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); +} + +.palette-block { + display: flex; + text-align: center; + flex-flow: column nowrap; + justify-content: space-between; + padding: 0.5em; + margin: 1em; + text-align: center; + border-radius: 4px; + overflow: hidden; + box-shadow: 0 4px 8px rgb(0 0 0 / 30%); +} + +.palette-block.bright .palette-meta { + background-color: #fefefe; +} + +.palette-block.dark .palette-meta { + background-color: #111111; +} + +.palette-meta h3 { + position: relative; + font-size: 1.4em; + z-index: 2; +} +.oalette-meta p { + position: relative; + font-size: 1em; + margin: 0; +} + +.palette-block .colors { + display: flex; + padding: 1em 0; + width: 100%; + justify-content: space-evenly; + align-items: center; + flex-flow: row nowrap; +} + +.palette-block .colors .color { + height: 3em; + flex-basis: 3em; + margin: 0.33em; +} diff --git a/demo/vite.config.ts b/demo/vite.config.ts new file mode 100644 index 0000000..da0e1e8 --- /dev/null +++ b/demo/vite.config.ts @@ -0,0 +1,18 @@ +// vite.config.ts +import { resolve } from 'path'; +import { defineConfig } from 'vite'; +import dts from 'vite-plugin-dts'; +// https://vitejs.dev/guide/build.html#library-mode + +export default defineConfig({ + build: { + rollupOptions: { + output: { + format: 'iife', + } + }, + outDir: './dist/', + emptyOutDir: true + }, + plugins: [dts()], +}) diff --git a/package.json b/package.json index fdb6659..1bab53e 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,9 @@ "test": "jest", "preview": "vite preview", "build": "tsc --project tsconfig.build.json && vite build", - "deploy": "npm publish" + "deploy": "npm publish", + "demo:dev": "vite demo/", + "demo:build": "tsc && vite build demo/" }, "devDependencies": { "@types/jest": "^29.5.11",