color-elements 0.0.1 → 0.0.3

package/README.md

@@ -1,33 +1,70 @@
-# Color.js Web Components
+# Color Elements
 
-These are some highly experimental color-related web components.
+These are some **highly experimental** color-related web components.
 Use at your own risk, the API can change at any point.
 
+## All elements
+
+<section class="showcase">
+{% for name, description in components -%}
+<a href="{{ page | relative }}/src/{{ name }}/">
+<figure>
+	<img src="{{ page | relative }}/src/{{ name }}/{{ name }}.webp" alt="A screenshot showcasing the &lt;{{ name }}&gt; color element" />
+	<figcaption>
+		<h2>&lt;{{ name }}&gt;</h2>
+		<p>{{ description | safe }}</p>
+	</figcaption>
+</figure>
+</a>
+{% endfor %}
+</section>
+
+### Upcoming
+
+<section class="showcase upcoming">
+{% for name in ["color-plane"] -%}
+<figure>
+	<figcaption>
+		<h2>&lt;{{ name }}&gt;</h2>
+	</figcaption>
+</figure>
+{% endfor %}
+</section>
+
 ## Usage
 
+### CDN
+
 To include all components at once:
 
 ```html
-<script src="https://colorjs.io/elements/index.js"></script>
+<script src="https://elements.colorjs.io/index.js" type="module"></script>
 ```
 
 To cherry-pick individual components, follow the instructions within the component’s page, but it generally looks like this:
 
 ```html
-<script src="https://colorjs.io/elements/COMPONENT_NAME/COMPONENT_NAME.js"></script>
+<script src="https://elements.colorjs.io/src/COMPONENT_NAME/COMPONENT_NAME.js" type="module"></script>
 ```
 
-or if using a bundler:
+Each component imports its own dependencies and styles.
+
+### NPM
+
+As usual:
+
+```bash
+npm i color-elements
+```
+
+and then:
 
 ```js
 import "color-elements";
 ```
 
-Then just start using it!
+You can also import individual components:
 
-## Components
-
-- [`<css-color>`](./css-color/)
-- [`<color-swatch>`](./color-swatch/)
-- [`<color-gamut>`](./color-gamut/)
-- [`<color-slider>`](./color-slider/)
+```js
+import "color-elements/COMPONENT_NAME";
+```

package/_build/copy-config.js

@@ -12,8 +12,18 @@ let commands = [
 	`git clone ${ config.source } ${ TEMP_REPO }`,
 	...config.paths.map(path => {
 		let [current_path, new_path] = Array.isArray(path) ? path : [path, path];
+		let new_path_dir = new_path.split("/").slice(0, -1).join("/");
 
-		return `rm -rf ./${new_path} && cp -r ${TEMP_REPO}/${ current_path } ./${ new_path }`;
+		let commands = [
+			`rm -rf ./${new_path}`,
+			`cp -r ${TEMP_REPO}/${ current_path } ./${ new_path }`,
+		];
+
+		if (new_path_dir) {
+			commands.splice(1, 0, `mkdir -p ./${new_path_dir}`);
+		}
+
+		return commands.join(" && ");
 	}),
 ];
 

package/_build/copy-config.json

@@ -1,10 +1,10 @@
 {
 	"source": "https://github.com/color-js/color.js",
 	"paths": [
-		"_includes/partials",
+		"_includes/partials/_nav.njk",
 		"_includes/page.njk",
 		"_includes/plain.njk",
-		"_data/eleventyComputed.js",
+		"data/eleventyComputed.js",
 		["_build/eleventy.js", "_build/eleventy-original.js"],
 		"_build/filters.js"
 	],

package/_build/eleventy.js

@@ -1,10 +1,26 @@
+import markdownIt from "markdown-it";
+import markdownItAttrs from "markdown-it-attrs";
+import markdownItAnchor from "markdown-it-anchor";
 import configOriginal from "./eleventy-original.js";
+import * as filters from "./filters-extra.js";
 
 let data = {
 	"permalink": "{{ page.filePathStem | replace('README', '') | replace('index', '') }}/index.html",
-	"body_classes": "cn-ignore"
+	"body_classes": "cn-ignore",
 };
 
+let md = markdownIt({
+	html: true,
+	linkify: true,
+	typographer: true,
+})
+.disable("code")
+.use(markdownItAttrs)
+.use(markdownItAnchor, {
+	permalink: markdownItAnchor.permalink.headerLink(),
+	level: 2,
+});
+
 export default config => {
 	let ret = configOriginal(config);
 
@@ -12,5 +28,15 @@ export default config => {
 		config.addGlobalData(prop, data[prop]);
 	}
 
+	for (let f in filters) {
+		config.addFilter(f, filters[f]);
+	}
+
+	config.setLibrary("md", md);
+
+	config.addPairedShortcode("md", children => {
+		return md.render(children);
+	});
+
 	return ret;
 };

package/_build/filters-extra.js

@@ -0,0 +1,3 @@
+export function tag_to_class (tag) {
+	return tag?.replace(/(?:^|-)([a-z])/g, ($0, $1) => $1.toUpperCase());
+}

package/_includes/component.njk

@@ -0,0 +1,69 @@
+---js
+{
+	layout: "page.njk",
+	body_classes: "cn-ignore component-page",
+	eleventyComputed: {
+		name: function (data) {
+			let url = data.page.url;
+			if (url.includes("/src/")) {
+				return url.match(/\/src\/([^/]+)/)[1];
+			}
+		},
+		tag: function (data) {
+			let name = data.name;
+			if (name) {
+				return `<${name}>`;
+			}
+		},
+		title: function (data) {
+			return data.title || data.tag;
+		},
+	}
+}
+---
+
+<script src="{{ page | relative }}/index.js" type="module"></script>
+<script src="{{ name }}.js" type="module"></script>
+
+<aside id="toc">
+	<ul>
+	{% for name, description in components -%}
+	<li><a href="{{ page | relative }}/src/{{ name }}/"><code>&lt;{{ name }}&gt;</code></a></li>
+	{% endfor %}
+	</ul>
+</aside>
+
+{{ content | safe }}
+
+<section id="installation">
+{% md %}
+## Installation
+
+To install all color elements, check out the [instructions on the homepage](../).
+The rest of this section is about using _only_ `{{ tag | safe }}`.
+
+The quick and dirty way is straight from the CDN (kindly provided by [Netlify](https://www.netlify.com/)):
+
+```html
+<script src="https://elements.colorjs.io/src/{{ name }}/{{ name }}.js" type="module"></script>
+```
+
+or in JS:
+
+```js
+import "https://elements.colorjs.io/src/{{ name }}/{{ name }}.js";
+```
+
+If you are using npm to manage your dependencies, you can import it via:
+
+```js
+import "color-elements/{{ name }}";
+```
+
+or:
+
+```js
+import { {{ name | tag_to_class }} } from "color-elements";
+```
+{% endmd %}
+</section>

package/_includes/partials/_nav-links.njk

@@ -0,0 +1,19 @@
+<a href="https://colorjs.io">Color.js</a>
+<div class="menu">
+	<a href="{{ page | relative }}">Elements</a>
+	<ul>
+		{% for name, description in components %}
+			<li><a href="{{ page | relative }}/src/{{ name }}/"><code>&lt;{{ name }}&gt;</code></a></li>
+		{% endfor %}
+	</ul>
+</div>
+
+<a href="https://github.com/color-js/elements{{ ('/tree/main/src/' + name) if name }}" target="_blank">GitHub</a>
+<div class="menu">
+	<a href="https://github.com/color-js/elements/issues{{ ('?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc+%5B' + name + '%5D+in%3Atitle') if name }}" target="_blank">Issues</a>
+	<ul>
+		<li><a href="https://github.com/color-js/elements/issues/new{{ ('?title=[' + name + '] ') if name }}">New</a></li>
+	</ul>
+</div>
+
+

package/_redirects

@@ -1,2 +1,9 @@
-node_modules/* lib/:splat 200
-assets/* https://colorjs.io/assets/:splat 200
+# Specific versions
+node_modules/nude-element/* https://cdn.jsdelivr.net/npm/nude-element@0.0.12/:splat 200
+
+# Catch all NPM fallback
+node_modules/:modulename/* https://cdn.jsdelivr.net/npm/:modulename@latest/:splat 200
+
+assets/* https://colorjs.io/assets/:splat 200
+
+/:tag/* /src/:tag/:splat 200

package/assets/css/style.css

@@ -1 +1,78 @@
-@import url("https://colorjs.io/assets/css/style.css");
+@import url("https://colorjs.io/assets/css/style.css");
+@import url("https://colorjs.io/assets/css/docs.css");
+
+.showcase {
+	--_border-color: hsl(var(--gray) 85%);
+
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
+	gap: 2rem;
+
+	figure {
+		display: grid;
+		grid-template-rows: 1fr auto;
+
+		inline-size: 100%;
+		margin: 0;
+		overflow: hidden;
+
+		border: 1px solid var(--_border-color);
+		border-radius: .5em;
+
+		box-shadow: 0 .02em .5em -.7em hsl(var(--gray) 30%);
+
+		&:is(:hover, :focus-within) {
+			img {
+				scale: 1.1;
+			}
+		}
+
+		img {
+			inline-size: 100%;
+			aspect-ratio: 4 / 3;
+			transition: scale .2s;
+		}
+
+		figcaption {
+			margin: 0;
+			padding: 0 .7em .5em;
+			border-block-start: 1px solid var(--_border-color);
+			background-color: hsl(var(--gray) 98%);
+			z-index: 1;
+
+			h2 {
+				font-size: 200%;
+
+				&:not(:only-child) {
+					margin-block-end: 0;
+				}
+			}
+
+			p {
+				text-wrap: balance;
+			}
+		}
+	}
+
+	&.upcoming {
+		figure {
+			&::before {
+				content: "";
+				inline-size: 100%;
+				aspect-ratio: 4 / 3;
+
+				background: var(--rainbow);
+				animation: var(--rainbow-scroll);
+
+				mask-image: url('data:image/svg+xml,\
+					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 1080">\
+						<path fill="none" stroke="black" stroke-width="25" stroke-linecap="round" stroke-linejoin="round" d="M233 579a70 70 0 0 0 70 70h834a70 70 0 0 0 0-140H303a70 70 0 0 0-70 70Z"/>\
+						<path fill-rule="evenodd" d="M270 579a42 42 0 0 0 42 42h538v-84H312a42 42 0 0 0-42 42Z"/>\
+						<text xml:space="preserve" x="425.54" y="462" font-family="Impact" font-size="90" font-weight="800" letter-spacing="2.7">COMING SOON...</text>\
+					</svg>');
+				mask-repeat: no-repeat;
+				mask-size: 100% 100%;
+			}
+		}
+	}
+}

package/assets/js/index.js

@@ -1,15 +1,16 @@
-import "https://colorjs.io/assets/js/index.js";
-
 import "https://colorjs.io/assets/js//prism.js";
-// import "https://blissfuljs.com/bliss.shy.js";
-// import "https://live.prismjs.com/src/prism-live.mjs?load=javascript";
-// import "https://colorjs.io/notebook/color-notebook.js";
 import "https://colorjs.io/assets/js/colors.js";
-import { styleCallouts } from "https://colorjs.io/assets/js/enhance.js";
+import "https://blissfuljs.com/bliss.shy.js";
 
+import { styleCallouts } from "https://colorjs.io/assets/js/enhance.js";
 styleCallouts();
 
-let root = document.documentElement;
-document.addEventListener("scroll", evt => {
-	root.style.setProperty("--scrolltop", root.scrollTop);
-}, {passive: true});
+import HTMLDemoElement from "https://nudeui.com/elements/html-demo/html-demo.js";
+
+if (document.body.classList.contains("component-page")) {
+	HTMLDemoElement.wrapAll();
+}
+
+if (window.toc) {
+	import("https://colorjs.io/assets/js/docs.js");
+}

package/data/components.json

@@ -0,0 +1,12 @@
+{
+	"color-picker": "Select and adjust colors in any color space using sliders and input fields.",
+	"color-scale": "Display a list of colors. Primarily intended for color palettes.",
+	"color-chart": "Display lists of colors as a scatterplot or line chart.",
+	"color-swatch": "Display a visual representation of a color alongside the info about it.",
+	"color-inline": "Display a color swatch alone or alongside its textual representation.",
+	"channel-slider": "Display a <code>&lt;color-slider&gt;</code> for a specific channel.",
+	"color-slider": "Display a slider with a gradient background. Primarily intended for color picking.",
+	"gamut-badge": "Gamut indicator. Used internally by <code>&lt;color-swatch&gt;</code>.",
+	"channel-picker": "Select individual color channels within a specified color space.",
+	"space-picker": "Select a color space from a list of predefined or custom color spaces."
+}