Add quick start guide to README.md, generate index.html from README

Item 4 from #158

.eleventyignore

@@ -1,4 +1,3 @@
-**/README.md
 **/LICENSE.md
 **/CONTRIBUTING.md
 

README.md

@@ -1,4 +1,232 @@
-# Color.js
+---
+layout: home
+---
 
-- [Docs](https://colorjs.io)
-- [Contributing](CONTRIBUTING.md)
+<header class="readme-only">
+
+# Color.js: Let’s get serious about color
+
+- [Offical website](https://colorjs.io)
+- [Contribution guide](CONTRIBUTING.md)
+
+Features:
+
+- **Color space agnostic**: Each color object is basically a list of coords and a color space reference. Operations are color space agnostic.
+Modules for <a href="https://colorjs.io/docs/spaces.html">a wide variety of color spaces</a>,
+including Lab/LCh, OKLab/OKLCh,
+sRGB and friends (HSL/HSV/HWB), Display P3,
+J<sub>z</sub>a<sub>z</sub>b<sub>z</sub>, REC.2100 and many <a href="https://colorjs.io/docs/spaces.html">more</a>.
+- **Doesn't gloss over color science**: Actual <a href="docs/gamut-mapping.html">gamut mapping</a> instead of naïve clipping,
+multiple <a href="https://colorjs.io/docs/color-difference.html">DeltaE</a> methods (76, CMC, 2000, J<sub>z</sub>),
+multiple <a href="https://colorjs.io/docs/adaptation.html">chromatic adaptation</a> methods (von Kries, Bradford, CAT02, CAT16),
+all with sensible defaults
+- **Up to date with CSS Color 4**: Every <a href="https://drafts.csswg.org/css-color-4/">CSS Color 4</a> format & color space supported for both <a href="docs/the-color-object.html">input</a> and <a href="https://colorjs.io/docs/output.html">output</a>, whether your browser supports it or not.
+- **Readable, object-oriented API**: Color objects for multiple operations on the same color, and static `Color.something()` functions for one-off calculations
+- **Modular & Extensible**: Use only what you need, or a bundle. Client-side or Node. Deep extensibility with <a href="https://colorjs.io/api/#Hooks-hooks.js">hooks</a>. </p>
+
+</header>
+
+<section class="cn-ignore">
+
+## Installation
+
+Install via npm:
+
+```
+npm install colorjs.io
+```
+
+For quick experiments, you can just import Color.js directly from the CDN with all modules included:
+
+```js
+import Color from "https://colorjs.io/dist/color.js";
+```
+
+You can also import specific modules:
+
+```js
+import Color from "https://colorjs.io/src/color.js";
+import "https://colorjs.io/src/spaces/p3.js";
+import "https://colorjs.io/src/spaces/rec2020.js";
+import "https://colorjs.io/src/deltaE/deltaE2000.js";
+```
+
+Warning: To use `import` statements in a browser, your `<script>` needs `type="module"`
+
+Or, if you'd rather just have `Color` as a global variable, the classic way, just include the following script in your HTML:
+
+```html
+<script src="https://colorjs.io/dist/color.global.js"></script>
+```
+
+<p class="read-more"><a href="https://colorjs.io/get">Read more about installation</a></p>
+
+</section>
+
+<section>
+
+## Reading colors
+
+Any color from CSS Color Level 4 should work:
+
+```js
+let color = new Color("slategray");
+let color2 = new Color("hwb(60 30% 40%)");
+let color3 = new Color("color(display-p3 0 1 0)");
+let color4 = new Color("lch(50% 80 30)");
+
+// CSS variables work too!
+let colorjsBlue = new Color("--color-blue");
+```
+
+<p class="read-more"><a href="https://colorjs.io/docs/the-color-object.html">Read more about color objects</a>
+
+</section>
+
+<section>
+<h2>Manipulating colors</h2>
+
+You can use properties to modify coordinates
+of any color space and convert back
+
+```js
+let color = new Color("slategray");
+color.lch.l = 80; // Set coord directly in any color space
+color.lch.c *= 1.2; // saturate by increasing LCH chroma by 20%
+color.hwb.w += 10; // any other color space also available
+```
+
+To modify coordinates in any color space you use `color.set()` and `color.setAll()`:
+
+```js
+let color = new Color("slategray");
+
+// Multiple coordinates
+color.set({
+	"lch.l": 80, // set lightness to 80
+	"lch.c": c => c * 1.2 // Relative manipulation
+});
+
+// Set single coordinate
+color.set("hwb.w", w => w + 10);
+```
+
+Coordinates of the color's color space are available without a prefix:
+
+```js
+let color = new Color("slategray").to("lch");
+
+// Multiple coordinates
+color.set({
+	l: 80, // set lightness to 80
+	c: c => c * 1.2 // Relative manipulation
+});
+
+// Set single coordinate
+color.set("hwb.w", w => w + 10);
+```
+
+Chaining-style modifications are also supported:
+```js
+let color = new Color("lch(50% 50 10)");
+color = color.set({
+	h: h => h + 180,
+	c: 60
+}).lighten();
+```
+
+You can also use properties:
+
+```js
+let color = new Color("slategray");
+color.lch.l = 80; // Set coord directly in any color space
+color.lch.c *= 1.2; // saturate by increasing LCH chroma by 20%
+color.hwb.w += 10; // any other color space also available
+```
+
+Coordinates of the color's color space are available without a prefix:
+
+```js
+let color = new Color("slategray").to("lch");
+color.l = 80; // Set LCH lightness
+color.c *= 1.2; // saturate by increasing LCH chroma
+```
+
+<p class="read-more"><a href="https://colorjs.io/docs/manipulation.html">Read more about color manipulation</a></p>
+
+</section>
+
+<section>
+
+## Converting between color spaces & stringifying
+
+Convert to any color space:
+
+```js
+let color = new Color("slategray");
+color.to("lch") // Convert to LCH
+```
+
+Output in any color space
+
+```js
+let color = new Color("slategray");
+color + ""; // default stringification
+color.to("p3").toString({precision: 3});
+```
+
+Clip to gamut or don't
+```js
+let color = new Color("p3", [0, 1, 0]);
+color.to("srgb") + ""; // Default toString()
+color.to("srgb").toString({inGamut: false});
+```
+
+<p class="read-more"><a href="https://colorjs.io/docs/output.html">Read more about output</a></p>
+
+</section>
+
+<section>
+
+## Interpolation
+
+Get a function that accepts a percentage:
+
+```js
+let color = new Color("p3", [0, 1, 0]);
+let redgreen = color.range("red", {
+	space: "lch", // interpolation space
+	outputSpace: "srgb"
+});
+redgreen(.5); // midpoint
+```
+
+Interpolation by discrete steps:
+
+```js
+let color = new Color("p3", [0, 1, 0]);
+color.steps("red", {
+	space: "lch",
+	outputSpace: "srgb",
+	maxDeltaE: 3, // max deltaE between consecutive steps
+	steps: 10 // min number of steps
+});
+```
+
+Shortcut for specific points in the range:
+
+```js
+let color = new Color("p3", [0, 1, 0]);
+let redgreen = color.mix("red", .5, {space: "lch", outputSpace: "srgb"});
+let reddishGreen = color.mix("red", .25, {space: "lch", outputSpace: "srgb"});
+```
+
+Static syntax  (every color method has a static one too):
+
+```js
+Color.mix("color(display-p3 0 1 0)", "red", .5);
+```
+
+<p class="read-more"><a href="https://colorjs.io/docs/interpolation.html">Read more about interpolation</a></p>
+
+</section>

_includes/home.njk

@@ -0,0 +1,57 @@
+---
+layout: "plain.njk"
+permalink: index.html
+includes: '<link rel="stylesheet" href="./assets/css/home.css">'
+---
+<header>
+	<nav>
+		{% include "../templates/_nav.njk" %}
+	</nav>
+
+	<hgroup class="logo">
+		<img src="logo.svg" alt="">
+		<h1>Color.js</h1>
+		<h2>Let's get serious about color</h2>
+	</hgroup>
+
+	<div id="features">
+		<article>
+			<h4>Fully color space aware</h3>
+			<p>Each color belongs to a color space; operations are color space agnostic.
+				Modules for <a href="docs/spaces.html">a wide variety of color spaces</a>,
+				including Lab/LCh, OKLab/OKLCh,
+				sRGB and friends (HSL/HSV/HWB), Display P3,
+				J<sub>z</sub>a<sub>z</sub>b<sub>z</sub>, REC.2100 and many <a href="docs/spaces.html">more</a>.</p>
+		</article>
+		<article>
+			<h4>Doesn't gloss over color science</h3>
+			<p>Actual <a href="docs/gamut-mapping.html">gamut mapping</a> instead of naïve clipping,
+				multiple <a href="docs/color-difference.html">DeltaE</a> methods (76, CMC, 2000, J<sub>z</sub>),
+				multiple <a href="docs/adaptation.html">chromatic adaptation</a> methods (von Kries, Bradford, CAT02, CAT16),
+				all with sensible defaults
+			</p>
+		</article>
+		<article>
+			<h4>Up to date with CSS Color 4</h3>
+			<p>Every <a href="https://drafts.csswg.org/css-color-4/">CSS Color 4</a> format & color space supported for both <a href="docs/the-color-object.html">input</a> and <a href="docs/output.html">output</a>, whether your browser supports it or not.</p>
+		</article>
+		<article>
+			<h4>Readable, object-oriented API</h3>
+			<p>Color objects for multiple operations on the same color, and static Color.something() functions for one-off calculations</p>
+		</article>
+		<article>
+			<h4>Modular & Extensible</h3>
+			<p>Use only what you need, or a bundle. Client-side or Node. Deep extensibility with <a href="api/#Hooks-hooks.js">hooks</a>. </p>
+		</article>
+	</div>
+</header>
+
+<main>
+	<p class="warning">
+		Color.js is currently an unreleased work in progress. Here be dragons.
+		If you found this website somehow, feel free to try it out and <a href="https://github.com/LeaVerou/color.js/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc">give us feedback</a>, but sshhhh! 🤫
+		There are more bugs in the live code snippets ("Color Notebook") in the docs than the actual Color.js library, so before reporting a bug, please try to reproduce it outside Color Notebook.
+	</p>
+
+	{{ content | safe }}
+</main>

assets/css/home.css

@@ -74,3 +74,7 @@ body > header {
 		margin: 0;
 		font-size: 75%;
 	}
+
+.readme-only {
+	display: none;
+}

assets/css/home.postcss

@@ -74,3 +74,7 @@ body > header {
 		margin: 0;
 		font-size: 75%;
 	}
+
+.readme-only {
+	display: none;
+}

assets/js/docs.js

@@ -149,29 +149,4 @@ if (location.pathname.indexOf("/spaces") > -1) {
 	// 	Mavo.all.colorSpaces.render(Mavo.all.colorSpaces.getData());
 
 	// }
-
-
-}
-
-// Style callouts
-for (let p of $$("p")) {
-	let callout = p.textContent.trimLeft().slice(0, 10).match(/(Tip|Warning|Note):/)?.[1];
-
-	if (callout) {
-		p.classList.add(callout.toLowerCase());
-		p.firstChild.textContent = p.firstChild.textContent.replace(callout + ":", "");
-	}
-}
-
-// Linkify API calls
-for (let code of $$(":not(pre) > code")) {
-	let text = code.textContent;
-	let match = text.match(/([Cc]olor).(\w+)\(\)/);
-
-	if (match) {
-		$.create("a", {
-			href: `/api/#Color${match[1] === "Color"? "." : "#"}${match[2]}`,
-			around: code
-		});
-	}
 }

assets/js/index.js

@@ -57,3 +57,26 @@ window.vars = vars;
 document.addEventListener("scroll", evt => {
 	root.style.setProperty("--scrolltop", root.scrollTop);
 }, {passive: true});
+
+// Style callouts
+for (let p of $$("p")) {
+	let callout = p.textContent.trimLeft().slice(0, 10).match(/(Tip|Warning|Note):/)?.[1];
+
+	if (callout) {
+		p.classList.add(callout.toLowerCase());
+		p.firstChild.textContent = p.firstChild.textContent.replace(callout + ":", "");
+	}
+}
+
+// Linkify API calls
+for (let code of $$(":not(pre) > code")) {
+	let text = code.textContent;
+	let match = text.match(/([Cc]olor).(\w+)\(\)/);
+
+	if (match) {
+		$.create("a", {
+			href: `/api/#Color${match[1] === "Color"? "." : "#"}${match[2]}`,
+			around: code
+		});
+	}
+}