color-elements 0.0.3 → 0.0.5

package/.claude/settings.local.json

@@ -0,0 +1,30 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(git fetch:*)",
+      "WebSearch",
+      "WebFetch(domain:www.npmjs.com)",
+      "Bash(npm info:*)",
+      "WebFetch(domain:github.com)",
+      "Bash(cat:*)",
+      "Bash(npm install:*)",
+      "Bash(npx nudeps:*)",
+      "Bash(npm run:*)",
+      "Bash(gh pr:*)",
+      "Bash(gh api:*)",
+      "WebFetch(domain:unpkg.com)",
+      "Bash(ls:*)",
+      "Bash(but:*)",
+      "WebFetch(domain:esm.sh)",
+      "Bash(npm pack:*)",
+      "Bash(mkdir -p /tmp/test-exports)",
+      "Read(//tmp/**)",
+      "Bash(rm -rf *)",
+      "Bash(npm init -y)",
+      "Bash(rm -rf /tmp/test-exports)",
+      "Read(//private/tmp/test-exports/**)",
+      "Bash(node:*)",
+      "Bash(rm:*)"
+    ]
+  }
+}

package/.editorconfig

@@ -0,0 +1,8 @@
+root = true
+
+[*]
+indent_style = tab
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+end_of_line = lf

package/.prettierrc

@@ -0,0 +1,17 @@
+{
+	"plugins": [
+		"prettier-plugin-brace-style",
+		"prettier-plugin-space-before-function-paren",
+		"prettier-plugin-merge"
+	],
+	"braceStyle": "stroustrup",
+	"arrowParens": "avoid",
+	"bracketSpacing": true,
+	"endOfLine": "auto",
+	"semi": true,
+	"singleQuote": false,
+	"tabWidth": 4,
+	"useTabs": true,
+	"trailingComma": "all",
+	"printWidth": 100
+}

package/.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+	"editor.formatOnSave": true,
+	"editor.formatOnSaveMode": "file",
+	"editor.defaultFormatter": "esbenp.prettier-vscode",
+	"prettier.enable": true,
+	"debug.enableStatusBarColor": false
+}

package/README.md

@@ -33,38 +33,47 @@ Use at your own risk, the API can change at any point.
 
 ## Usage
 
-### CDN
+### Via bare specifiers
 
-To include all components at once:
+Install via npm:
 
-```html
-<script src="https://elements.colorjs.io/index.js" type="module"></script>
+```bash
+npm i color-elements
 ```
 
-To cherry-pick individual components, follow the instructions within the component’s page, but it generally looks like this:
+To include all components at once:
 
-```html
-<script src="https://elements.colorjs.io/src/COMPONENT_NAME/COMPONENT_NAME.js" type="module"></script>
+```js
+import "color-elements";
 ```
 
-Each component imports its own dependencies and styles.
+You can also import individual components:
 
-### NPM
+```js
+import "color-elements/COMPONENT_NAME";
+```
 
-As usual:
+Each component also exports a standalone CSS file (for [CSS-only usage](src/color-slider/#css-only-usage)):
 
-```bash
-npm i color-elements
+```css
+@import url("color-elements/COMPONENT_NAME.css");
 ```
 
-and then:
+You can use these imports with [Nudeps](https://nudeps.dev) — no bundler needed
+(this website does) — or with any bundler you already have.
 
-```js
-import "color-elements";
+### Via CDN
+
+If you’d rather not set up any tooling, you can use a CDN such as [esm.sh](https://esm.sh):
+
+```html
+<script src="https://esm.sh/color-elements" type="module"></script>
 ```
 
-You can also import individual components:
+To cherry-pick individual components:
 
-```js
-import "color-elements/COMPONENT_NAME";
+```html
+<script src="https://esm.sh/color-elements/COMPONENT_NAME" type="module"></script>
 ```
+
+Each component imports its own dependencies and styles.

package/_build/copy-config.js

@@ -1,23 +1,20 @@
-import { exec } from 'child_process';
+import { exec } from "child_process";
 import { writeFileSync, readFileSync } from "fs";
 import config from "./copy-config.json" with { type: "json" };
 
 const TEMP_REPO = "_build/.colorjs.io";
 
 // Cleanup past attempts
-exec(`rm -rf ${ TEMP_REPO }`);
+exec(`rm -rf ${TEMP_REPO}`);
 
 // Copy files from source repo
 let commands = [
-	`git clone ${ config.source } ${ TEMP_REPO }`,
+	`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("/");
 
-		let commands = [
-			`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}`);
@@ -30,7 +27,7 @@ let commands = [
 await new Promise(resolve => {
 	exec(commands.join(" && "), (err, stdout, stderr) => {
 		// Cleanup
-		exec(`rm -rf ${ TEMP_REPO }`);
+		exec(`rm -rf ${TEMP_REPO}`);
 
 		if (err) {
 			console.error(err);
@@ -54,7 +51,8 @@ for (let path of config.paths) {
 	if (i > -1) {
 		index = i;
 	}
-	else { // not found
+	else {
+		// not found
 		gitignore.push(new_path);
 		paths_added_to_gitignore.push(new_path);
 	}
@@ -65,14 +63,17 @@ if (paths_added_to_gitignore.length > 0) {
 	console.log("Added paths to .gitignore: " + paths_added_to_gitignore.join(", "));
 }
 
-let source_package_json = JSON.parse(readFileSync(`${ TEMP_REPO }/package.json`, "utf8"));
+let source_package_json = JSON.parse(readFileSync(`${TEMP_REPO}/package.json`, "utf8"));
 let package_json = JSON.parse(readFileSync(`package.json`, "utf8"));
 
 // Copy npm scripts
 let scripts_copied = [];
 
 for (let script of config.scripts) {
-	if (source_package_json.scripts[script] && package_json.scripts[script] !== source_package_json.scripts[script]) {
+	if (
+		source_package_json.scripts[script] &&
+		package_json.scripts[script] !== source_package_json.scripts[script]
+	) {
 		package_json.scripts[script] = source_package_json.scripts[script];
 		scripts_copied.push(script);
 	}
@@ -94,7 +95,7 @@ if (source_package_json.devDependencies) {
 	}
 
 	if (missing_packages.length) {
-		console.warn(`Installing packages: ${ missing_packages.join(", ") }`);
-		exec(`npm install -D ${ missing_packages.join(" ") }`);
+		console.warn(`Installing packages: ${missing_packages.join(", ")}`);
+		exec(`npm install -D ${missing_packages.join(" ")}`);
 	}
-}
+}

package/_build/copy-config.json

@@ -3,16 +3,11 @@
 	"paths": [
 		"_includes/partials/_nav.njk",
 		"_includes/page.njk",
-		"_includes/plain.njk",
+		["_includes/plain.njk", "_includes/plain-base.njk"],
 		"data/eleventyComputed.js",
 		["_build/eleventy.js", "_build/eleventy-original.js"],
 		"_build/filters.js"
 	],
-	"scripts": [
-		"build:html",
-		"watch:html"
-	],
-	"packages": [
-		"@11ty/eleventy"
-	]
-}
+	"scripts": ["build:html", "watch:html"],
+	"packages": ["@11ty/eleventy"]
+}

package/_build/eleventy.js

@@ -5,8 +5,8 @@ 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",
+	permalink: "{{ page.filePathStem | replace('README', '') | replace('index', '') }}/index.html",
+	body_classes: "cn-ignore",
 };
 
 let md = markdownIt({
@@ -14,12 +14,12 @@ let md = markdownIt({
 	linkify: true,
 	typographer: true,
 })
-.disable("code")
-.use(markdownItAttrs)
-.use(markdownItAnchor, {
-	permalink: markdownItAnchor.permalink.headerLink(),
-	level: 2,
-});
+	.disable("code")
+	.use(markdownItAttrs)
+	.use(markdownItAnchor, {
+		permalink: markdownItAnchor.permalink.headerLink(),
+		level: 2,
+	});
 
 export default config => {
 	let ret = configOriginal(config);

package/_includes/component.njk

@@ -42,19 +42,7 @@
 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:
+If you’re using a bundler, or an import map manager like [Nudeps](https://nudeps.dev/) or [JSPM](https://jspm.org/), you can import it via a bare specifier:
 
 ```js
 import "color-elements/{{ name }}";
@@ -65,5 +53,12 @@ or:
 ```js
 import { {{ name | tag_to_class }} } from "color-elements";
 ```
+
+
+Otherwise, you can use a CDN such as [esm.sh](https://esm.sh):
+
+```html
+<script src="https://esm.sh/color-elements/{{ name }}" type="module"></script>
+```
 {% endmd %}
-</section>
+</section>

package/_includes/partials/_nav-links.njk

@@ -15,5 +15,6 @@
 		<li><a href="https://github.com/color-js/elements/issues/new{{ ('?title=[' + name + '] ') if name }}">New</a></li>
 	</ul>
 </div>
+<a href="https://opencollective.com/color">♡&nbsp;Sponsor</a>
 
 

package/_includes/plain.njk

@@ -0,0 +1,5 @@
+{% extends "plain-base.njk" %}
+
+{% block head %}
+<script src="/importmap.js"></script>
+{% endblock %}

package/_redirects

@@ -1,5 +1,5 @@
 # Specific versions
-node_modules/nude-element/* https://cdn.jsdelivr.net/npm/nude-element@0.0.12/:splat 200
+node_modules/nude-element/* https://cdn.jsdelivr.net/npm/nude-element@0.1.1/:splat 200
 
 # Catch all NPM fallback
 node_modules/:modulename/* https://cdn.jsdelivr.net/npm/:modulename@latest/:splat 200

package/assets/css/style.css

@@ -17,9 +17,9 @@
 		overflow: hidden;
 
 		border: 1px solid var(--_border-color);
-		border-radius: .5em;
+		border-radius: 0.5em;
 
-		box-shadow: 0 .02em .5em -.7em hsl(var(--gray) 30%);
+		box-shadow: 0 0.02em 0.5em -0.7em hsl(var(--gray) 30%);
 
 		&:is(:hover, :focus-within) {
 			img {
@@ -30,12 +30,12 @@
 		img {
 			inline-size: 100%;
 			aspect-ratio: 4 / 3;
-			transition: scale .2s;
+			transition: scale 0.2s;
 		}
 
 		figcaption {
 			margin: 0;
-			padding: 0 .7em .5em;
+			padding: 0 0.7em 0.5em;
 			border-block-start: 1px solid var(--_border-color);
 			background-color: hsl(var(--gray) 98%);
 			z-index: 1;