color-elements 0.0.2 → 0.0.3

package/README.md

@@ -3,6 +3,34 @@
 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
@@ -10,13 +38,13 @@ Use at your own risk, the API can change at any point.
 To include all components at once:
 
 ```html
-<script src="https://elements.colorjs.io/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://elements.colorjs.io/src/COMPONENT_NAME/COMPONENT_NAME.js"></script>
+<script src="https://elements.colorjs.io/src/COMPONENT_NAME/COMPONENT_NAME.js" type="module"></script>
 ```
 
 Each component imports its own dependencies and styles.
@@ -40,16 +68,3 @@ You can also import individual components:
 ```js
 import "color-elements/COMPONENT_NAME";
 ```
-
-## All elements
-
-- [`<color-picker>`](src/color-picker/)
-- [`<color-slider>`](src/color-slider/)
-- [`<channel-slider>`](src/channel-slider/)
-- [`<color-swatch>`](src/color-swatch/)
-- [`<color-inline>`](src/color-inline/)
-- [`<color-gamut>`](src/color-gamut/)
-
-### Upcoming:
-
-- `<color-plane>`

package/_build/copy-config.json

@@ -4,7 +4,7 @@
 		"_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,11 +1,12 @@
 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({
@@ -14,7 +15,11 @@ let md = markdownIt({
 	typographer: true,
 })
 .disable("code")
-.use(markdownItAttrs);
+.use(markdownItAttrs)
+.use(markdownItAnchor, {
+	permalink: markdownItAnchor.permalink.headerLink(),
+	level: 2,
+});
 
 export default config => {
 	let ret = configOriginal(config);

package/_build/filters-extra.js

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

package/_includes/component.njk

@@ -16,7 +16,7 @@
 			}
 		},
 		title: function (data) {
-			return data.title ?? data.tag;
+			return data.title || data.tag;
 		},
 	}
 }
@@ -25,6 +25,14 @@
 <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">

package/_includes/partials/_nav-links.njk

@@ -2,11 +2,18 @@
 <div class="menu">
 	<a href="{{ page | relative }}">Elements</a>
 	<ul>
-		{% for name in components %}
-			<li><a href="{{ page | relative }}/src/{{ name }}/"><code>&lt;{{ name }}&gt;</code></a></span>
+		{% 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">GitHub</a>
-<a href="https://github.com/color-js/elements/issues/new" class="footer">File bug</a>
+<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 @@
+# 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
+
+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,16 +1,16 @@
 import "https://colorjs.io/assets/js//prism.js";
 import "https://colorjs.io/assets/js/colors.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."
+}