Various updates to the docs website.

Author: danburzo

build.js

@@ -42,6 +42,16 @@ build({
 	outfile: 'bundled/culori.min.mjs'
 });
 
+// Bundled ESM, minified, for the website
+build({
+	entryPoints: ['./src/index.js'],
+	logLevel: 'info',
+	bundle: true,
+	minify: true,
+	format: 'esm',
+	outfile: 'docs/static/culori.min.mjs'
+});
+
 // Bundled IIFE
 build({
 	entryPoints: ['./src/index.js'],

docs/_includes/layouts/default.html

@@ -21,20 +21,23 @@ <h1>{{ title }}</h1>
 		</div>
 		{% include 'partials/footer.html' %}
 
-		<script
-			type="text/javascript"
-			src="https://unpkg.com/culori@{{ pkg.version }}"
-		></script>
-		<script type="text/javascript">
-			const r = () => culori.random('lch', { l: [30, 80], c: [60, 90] });
+		<script type="module">
+			import * as culori from '/culori.min.mjs';
+
+			/* Expose as global variable */
+			window.culori = culori;
+
+			const { p3, random, formatCss, formatHex } = culori;
+
+			const r = () => random('lch', { l: [30, 80], c: [60, 90] });
 			let r1 = r();
 			let r2 = r();
-			if (CSS.supports('color: color(display-p3)')) {
-				r1 = culori.formatCss(culori.p3(r1));
-				r2 = culori.formatCss(culori.p3(r2));
+			if (CSS.supports('color: color(display-p3 0 0 0)')) {
+				r1 = formatCss(p3(r1));
+				r2 = formatCss(p3(r2));
 			} else {
-				r1 = culori.formatHex(r1);
-				r2 = culori.formatHex(r2);
+				r1 = formatHex(r1);
+				r2 = formatHex(r2);
 			}
 			document.body.style.setProperty('--random-1', r1);
 			document.body.style.setProperty('--random-2', r2);

docs/_includes/partials/footer.html

@@ -1,8 +1,8 @@
 <footer>
 	<div class="container">
 		<p>
-			A <a href="https://labs.moqups.com">Moqups Labs</a> thing. Can this
-			page be improved?
+			Culori is a <a href="https://moqups.com">Moqups</a> production. Can
+			this page be improved?
 			<a
 				href="https://github.com/Evercoder/culori/blob/main/{{ page.inputPath }}"
 				>Edit it on GitHub</a

docs/colophon.md

@@ -4,10 +4,10 @@ title: Colophon
 menu-order: 6
 ---
 
-Developed by [Dan Burzo](http://danburzo.ro) with the help of many collaborators, and released under the MIT license. The library is indebted to Mike Bostock's [D3.js](https://github.com/d3) and Gregor Aisch's [chroma.js](https://github.com/gka/chroma.js). D3, in particular, has been a treasure-trove of ideas and academic references.
+Culori is developed by [Dan Burzo](http://danburzo.ro) with the help of many collaborators, and released under the MIT license. 
 
-Culori is the Romanian word for ‘colors’. The logo is typeset in [Hatch](https://pstypelab.com/hatchfont) by Mark Caneso.
+The library has been inspired by Mike Bostock's [D3.js](https://github.com/d3) and Gregor Aisch's [chroma.js](https://github.com/gka/chroma.js): they have popularized color science in the browser and provided a blueprint for a color manipulation API. I have learned a tremendous amount by reading through the documentation the source code while developing Culori. D3, in particular, has been a treasure trove of ideas and pointers to academic references.
+ 
+I pronounce the name of the library as [[kuːlori]](http://ipa-reader.xyz/?text=ku%CB%90lori). Culori is the Romanian word for ‘colors’. The logo is typeset in [Hatch](https://pstypelab.com/hatchfont) by Mark Caneso.
 
-The code is formatted with [Prettier](https://prettier.io), upkeeped with [ESLint](https://eslint.org/), tested with [tape](https://github.com/substack/tape), and bundled with [esbuild](https://esbuild.github.io/).
-
-This website is statically generated using [Eleventy](https://11ty.dev) and published to GitHub Pages.
+The code is formatted with [Prettier](https://prettier.io), upkept with [ESLint](https://eslint.org/), tested with [tape](https://github.com/ljharb/tape), and bundled with [esbuild](https://esbuild.github.io/). This website is statically generated using [Eleventy](https://11ty.dev) and published to GitHub Pages.

docs/css/main.css

@@ -1,8 +1,4 @@
-body {
-	font-family: var(--ff-main);
-	line-height: 1.5;
-	margin: 0;
-
+html {
 	--red: #d84f4c;
 	--indigo: #57467d;
 	--offwhite: #f8f5f4;
@@ -14,12 +10,25 @@ body {
 		sans-serif, Apple Color Emoji, Segoe UI Emoji;
 	--ff-code: 'Consolas', monospace;
 
+	font-size: 115%;
+}
+
+@media (max-width: 30em) {
+	html {
+		font-size: 90%;
+	}
+}
+
+body {
+	font-family: var(--ff-main);
+	line-height: 1.5;
+	margin: 0;
 	text-size-adjust: none;
 	-webkit-text-size-adjust: none;
 }
 
 .container {
-	max-width: 60rem;
+	max-width: 50rem;
 	margin: 0 auto;
 	padding: 0 1rem;
 }
@@ -121,6 +130,15 @@ nav a {
 	border-bottom: 0.2em solid transparent;
 }
 
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	line-height: 1.1;
+}
+
 h1 {
 	font-size: 2.4em;
 	margin: 0 0 0.5em;

docs/getting-started.md

@@ -6,13 +6,13 @@ menu-order: 1
 
 ## Install Culori from npm
 
-Add Culori as a dependency to your project:
+Culori is distributed [on npm](https://npmjs.com/package/culori) in a variety of formats. Install it with:
 
 ```bash
 npm install culori
 ```
 
-Then start using it:
+Then start importing functions from [the API](/api/):
 
 ```js
 import { rgb } from 'culori';
@@ -21,6 +21,8 @@ rgb('tomato');
 // ⇒ Object { mode: "rgb", r: 1, g: 0.38823529411764707, b: 0.2784313725490196 }
 ```
 
+For code that runs in browsers, you may want to streamline the bundle to only include the parts of Culori you're using. See [Optimize bundle size with tree-shaking](/guides/tree-shaking/) for guidance on switching your imports to use `'culori/fn'` instead of `'culori'` once you're done prototyping.
+
 ## Fetch Culori from a CDN
 
 You can use Culori from your favorite Content Delivery Network to create quick prototypes in HTML. Here are a few popular choices: 
@@ -53,11 +55,7 @@ Use it as an ES module:
 
 ### In your browser's console
 
-The library is added to every page of this website, so you can try the API in your browser's console as you read through the examples. 
-
-### Runkit
-
-You can also use Culori in the Runkit npm playground ([npm.runkit.com/culori](https://npm.runkit.com/culori)) to test the API without installing anything.
+The library is available on this website as the global variable `culori`, so can try the API in your browser's console as you read through the examples. 
 
 ### Observable
 

docs/guides/index.md

@@ -3,11 +3,15 @@ title: 'Guides'
 menu-order: 4
 ---
 
-## [Migration guide](./migration)
+## Working with Culori 
 
-This guide documents the breaking changes in each new major release of the library and how to address them in your code.
+### [Optimize bundle size with tree-shaking](./tree-shaking/)
+
+Once you're done prototyping and you're ready to ship an optimized bundle, switch your imports over to the fully tree-shakeable version.
 
-## [Optimize bundle size with tree-shaking](./tree-shaking)
+### [Migration guide](./migration/)
+
+This guide documents the breaking changes in each new major release of the library and how to address them in your code.
 
 ## Elsewhere
 

docs/guides/migration.md

@@ -2,7 +2,7 @@
 title: 'Migration guide'
 ---
 
-## Migrating from version 2.x to 3.0
+## From v2 to v3
 
 ### Custom identifiers removed from the `color()` syntax
 
@@ -35,7 +35,7 @@ The parsing of the [modern syntax](https://w3c.github.io/csswg-drafts/css-color-
 * `parseRgbLegacy()` has been added to the API to parse the legacy `rgb()` / `rgba()` syntax
 * `parseHslLegacy()` has been added to the API to parse the legacy `hsl()` / `hsla()` syntax
 
-## Migrating from version 1.x to 2.0
+## From v1 to v2
 
 * all color components in all CSS color syntaxes now accept the `none` keyword. ([w3c/csswg-drafts#6107](https://github.com/w3c/csswg-drafts/issues/6107))
 
@@ -124,7 +124,7 @@ lch(75 50 15deg)
 In version 2.0, we drop this quirk and bring Culori in line with the specification.
 
 
-## Migrating from version 0.x to 1.0
+## From v0.x to v1
 
 ### Using the library
 

docs/guides/tree-shaking.md

@@ -2,9 +2,9 @@
 title: 'Optimize bundle size with tree-shaking'
 ---
 
-The default `culori` import comes with the full set of color spaces and functions to let you prototype quickly and with fewer errors. 
+The default `culori` import comes with the full set of color spaces and functions to let you prototype quickly and with fewer errors. However, the way color spaces are initialized prevents the library from being tree-shaken, so when you use a bundler (such as [esbuild](https://esbuild.github.io/), [Vite](https://vitejs.dev/), or [Parcel](https://parceljs.org/)), the entire Culori library is bundled regardless of what you're actually using.
 
-However, the way color spaces are initialized prevents the library from being tree-shaken, so when you use a bundler such as Webpack or Parcel, the entire Culori library is bundled regardless of what you're actually using.
+This guides walks you through switching your imports to the tree-shakeable version once you're done prototyping and you're ready to ship an optimized bundle.
 
 ## Using `culori/fn`
 
@@ -46,6 +46,8 @@ import {
 	modeHwb,
 	modeLab,
 	modeLch,
+	modeOklab,
+	modeOklch,
 	modeP3,
 	modeProphoto,
 	modeRec2020,
@@ -59,6 +61,8 @@ const hsl = useMode(modeHsl);
 const hwb = useMode(modeHwb);
 const lab = useMode(modeLab);
 const lch = useMode(modeLch);
+const oklab = useMode(modeOklab);
+const oklch = useMode(modeOklch);
 const p3 = useMode(modeP3);
 const prophoto = useMode(modeProphoto);
 const rec2020 = useMode(modeRec2020);
@@ -67,6 +71,8 @@ const xyz50 = useMode(modeXyz50);
 const xyz65 = useMode(modeXyz65);
 ```
 
+You don't need to do all of this manually. You can import the [CSS bundle](#culori-css) instead.
+
 ### Using Culori without registering color spaces
 
 You can import and use the [low-level parsing and conversion functions](/api#low-level-api) without registering any color space beforehand:
@@ -102,11 +108,11 @@ esbuild --bundle --minify hex-to-hsl-string.js
 
 For convenience, a couple of bootstrap packages are available.
 
-### `culori/css` 
+<h3 id='culori-css'><code>culori/css</code></h3>
 
 Bootstrap all the color spaces available in CSS, plus a handful of  related ones we get for free, since they are used under the hood. 
 
-It provides the following named exports: `a98`, `hsl`, `hsv`, `hwb`, `lab`, `lab65`, `lch`, `lch65`, `lrgb`, `p3`, `prophoto`, `rec2020`, `rgb`, `xyz50`, and `xyz65`.
+It provides the following named exports: `a98`, `hsl`, `hsv`, `hwb`, `lab`, `lab65`, `lch`, `lch65`, `lrgb`, `oklab`, `oklch`, `p3`, `prophoto`, `rec2020`, `rgb`, `xyz50`, and `xyz65`.
 
 ```js
 import 'culori/css';
@@ -125,5 +131,5 @@ It provides the following named exports: `a98`, `cubehelix`, `dlab`, `dlch`, `hs
 import 'culori/all';
 import { interpolate } from 'culori/fn';
 
-interpolate(['red', 'green'], 'oklab');
+interpolate(['red', 'green'], 'xyb');
 ```

docs/index.md

@@ -1,5 +1,6 @@
 ---
-title: Home
+title: Color functions for JavaScript
+homepage: true
 layout: layouts/default
 menu-order: 0
 ---
@@ -13,9 +14,7 @@ menu-order: 0
 [hwb-colors]: https://drafts.csswg.org/css-color/#the-hwb-notation
 [lab-colors]: https://drafts.csswg.org/css-color/#lab-colors
 
-Culori is a color library for JavaScript that supports most color spaces and formats defined in the [CSS Colors Level 4][css4-colors] specification ([named colors][css4-named-colors], [hex colors][hex-colors] with 3 to 8 digits, [RGB][rgb-colors], [HSL][hsl-colors], [HWB][hwb-colors], [Lab and LCh][lab-colors]), plus [additional color spaces](./color-spaces).
-
-It handles [color differences](https://en.wikipedia.org/wiki/Color_difference), interpolation, gradients, blend modes [and more](./api).
+Culori is a JavaScript color library that supports the conversion and manipulation of all formats defined in the [CSS Colors Level 4][css4-colors] specification, plus [additional color spaces](./color-spaces). It handles [color differences](https://en.wikipedia.org/wiki/Color_difference), interpolation, gradients, blend modes [and much more](/api/).
 
 ```bash
 npm install culori