add demo page

nclslbrn · Dec 10, 2023 · 8a8b24f · 8a8b24f
1 parent fda6017
commit 8a8b24f
Show file tree

Hide file tree

Showing 5 changed files with 151 additions and 1 deletion.
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Iconic palettes</title>
+  <link rel="icon"
+    href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎨</text></svg>">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="author" content="<%= authorName %>">
+  <meta name="robots" content="all,follow">
+  <meta name="viewport" content="width=device-width,user-scalable=no,minimum-scale=1,maximum-scale=1">
+  <meta name="theme-color" content="#ffffff">
+  <link href="./style.css" rel="stylesheet">
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="./src/index.ts"></script>
+</body>
+
+</html>
diff --git a/demo/src/index.ts 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 = `
+  <h3 
+    title="${palette.meta.title}, ${palette.meta.year}, ${palette.meta.techniques}">
+    ${palette.meta.artist}
+  </h3>`;
+
+  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)));
+}
diff --git a/demo/style.css 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
@@ -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
@@ -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",