Skip to content

Commit

Permalink
Move color space docs to use 11ty rather than Mavo
Browse files Browse the repository at this point in the history
  • Loading branch information
@LeaVerou
LeaVerou committed Oct 2, 2024
1 parent f4427de commit 5b2949a
Show file tree
Hide file tree
Showing 6 changed files with 158 additions and 182 deletions.
3 changes: 3 additions & 0 deletions _build/eleventy.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { createRequire } from "module";
import { EleventyRenderPlugin } from "@11ty/eleventy";
const require = createRequire(import.meta.url);
import * as filters from "./filters.js";

Expand All @@ -24,6 +25,8 @@ export default config => {
config.addFilter(f, filters[f]);
}

config.addPlugin(EleventyRenderPlugin);

return {
markdownTemplateEngine: "njk",
templateFormats: ["md", "njk"],
Expand Down
10 changes: 9 additions & 1 deletion _build/filters.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,5 +12,13 @@ export function unslugify (slug) {
}

export function number (value, options) {
return value.toLocaleString("en", options);
return value?.toLocaleString("en", options);
}

export function randomNumber (max, min, step) {
step ??= (max - min) / 100;
// Round to nearest power of 10
step = Math.pow(10, Math.floor(Math.log10(step)));

return Math.floor(Math.random() * (max - min + step) / step) * step + min;
}
100 changes: 48 additions & 52 deletions assets/css/docs.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,70 +50,66 @@ main {
}
}

[mv-app="colorSpaces"] {
& [mv-list-item][property="space"] {
display: grid;
grid-template-columns: 1fr auto;
grid-gap: 0 1em;
margin: 1em 0;

& .alias-of {
font-style: italic;
}
.color-space {
display: grid;
grid-template-columns: 1fr auto;
grid-gap: 0 1em;
margin: 1em 0;

.alias-of {
font-style: italic;
}

& > * {
grid-column: 1;
}
> * {
grid-column: 1;
}

& > header {
grid-column: 1 / span 2;
display: flex;
align-items: center;
> header {
grid-column: 1 / span 2;
display: flex;
align-items: center;

& h2 {
margin: 0 auto 0 0;
h2 {
margin: 0 auto 0 0;

& code {
font-family: var(--font-monospace);
font-weight: bold;
font-size: 70%;
code {
font-family: var(--font-monospace);
font-weight: bold;
font-size: 70%;

&::before {
content: "#";
}
&::before {
content: "#";
}
}

& .file {
font-style: italic;
opacity: .6;
filter: saturate(.1);
}
}

& [property="description"] {
margin: .5em 0;
& .file {
font-style: italic;
opacity: .6;
filter: saturate(.1);
}
}

& dl {
min-width: 10em;
margin: 0;
grid-row: 2 / span 3;
grid-column: 2;
background: hsl(var(--gray) 95%);
border-radius: .2em;
padding: 1em;

& dt {
margin-top: .5em;
font-size: 80%;
}

& dd {
grid-column: 1;
}
}
.description {
margin: .5em 0;
}

dl {
min-width: 10em;
margin: 0;
grid-row: 2 / span 3;
grid-column: 2;
background: hsl(var(--gray) 95%);
border-radius: .2em;
padding: 1em;

dt {
margin-top: .5em;
font-size: 80%;
}

dd {
grid-column: 1;
}
}
}
68 changes: 0 additions & 68 deletions assets/js/docs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,71 +82,3 @@ function makePageToc (pageToc) {
});
});
}

if (location.pathname.indexOf("/spaces") > -1) {
await Mavo.all.colorSpaceData.dataLoaded;

let docsSpaces = Object.fromEntries(Mavo.all.colorSpaceData.root.data.space.map(space => [space.id, space]));

let spaces = Object.entries(Color.Space.registry).map(([id, space]) => {
let docsSpace = docsSpaces[id];

return Object.assign(docsSpace || {
description: "",
url: "",
}, {
id,
isAlias: space.id != id,
aliasOf: space.id,
aliasOfName: Color.Space.registry[space.id].name,
base: space.base?.id,
baseName: space.base?.name,
name: space.name,
coord: Object.entries(space.coords).map(([id, meta]) => {
let range = meta.range || meta.refRange;
return {
id,
name: meta.name,
min: range?.[0],
max: range?.[1],
};
}),
whitePoint: Object.entries(Color.WHITES).find(([name, white]) => white === space.white)?.[0],
cssId: space.cssId || space.id,
});
});

Mavo.all.colorSpaces.load({
data: {space: spaces},
});

Mavo.hooks.add("getdata-end", function (env) {
if (this.id !== "colorSpaces") {
return;
}

// Do not try to store things we are getting on runtime from ColorSpace.registry
for (let space of env.data.space) {
delete space.coord;
delete space.whitePoint;
}
});

Mavo.all.colorSpaces.dataLoaded.then(() => {
return Mavo.defer(500);
}).then(() => {
$$("pre:not([class])").forEach(pre => {
// Add class now to avoid race conditions where Prism highlights before expressions resolve
pre.classList.add("language-javascript");
Prism.highlightElement(pre);

Notebook.create(pre);
});
});

// if (Mavo.all.colorSpaces && Mavo.all.colorSpaces.root.children.space.children.length > 1) {
// // Data has already rendered, re-render
// Mavo.all.colorSpaces.render(Mavo.all.colorSpaces.getData());

// }
}
39 changes: 39 additions & 0 deletions data/spaces.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import ColorSpace from "../src/spaces/index.js";
import {WHITES} from "../src/adapt.js";

let whitePoints = Object.entries(WHITES);

// 11ty chokes on this
// import modules from "./modules.json" with { type: "json" };
import { readFileSync } from "fs";
const modules = JSON.parse(readFileSync("data/modules.json"));

let spaces = {};

for (let meta of modules.space) {
let id = meta.id;
let space = ColorSpace.registry[id];

spaces[id] = meta;
Object.assign(meta, {
white: whitePoints.find(([name, white]) => white === space.white)?.[0] ?? "D65",
base: space.base,
coords: space.coords,
});

if (space.id != id) {
meta.aliasOf = ColorSpace.registry[space.id].name;
}

for (let id in meta.coords) {
let coord = meta.coords[id];
let range = coord.range || coord.refRange;

if (range) {
coord.min = range[0];
coord.max = range[1];
}
}
}

export default spaces;
120 changes: 59 additions & 61 deletions docs/spaces.njk
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
---
title: Supported Color Spaces
has_mavo: true
body_classes: cn-ignore
---
{% raw %}

<section class="cn-ignore">
<figure>
<img src="images/all-spaces.png" alt="">
Expand All @@ -29,67 +27,67 @@ body_classes: cn-ignore
<p> If you are using the <a href="procedural.html">prodcedural API</a>, you need to register color spaces yourself, by calling <code>ColorSpace.register(colorSpaceReference)</code>.
</section>

<section mv-app="colorSpaces" mv-bar="none" class="cn-ignore">
<div mv-list property="space">
<article mv-list-item class="[if(id != originalId, 'alias')">
<header>
<h2 id="[id]">
<span property="name"></span>
<code property="id" class="toc-ignore"></code>
</h2>
<a href="https://github.com/LeaVerou/color.js/tree/master/[filePath]" class="file" target="_blank"><code property="filePath">src/spaces/[aliasOf or id].js</code></a>
</header>
<div mv-if="isAlias">
<p class="alias-of">Alias of <a href="#[aliasOf]">[aliasOfName]</a></p>
</div>
<div property class="description" mv-markdown-options></div>
<dl class="meta">
<div mv-if="base">
<dt>Base</dt>
<dd><a href="#[base]"><strong property="baseName"></strong></a></dd>
<section>
{% for id, space in spaces %}
{% set spaceAccessor = id | replace("-", "_") %}
<article class="color-space">
<header>
<h2 id="{{ id }}">{{ space.name }}</h2>
{% set filePath = 'src/spaces/' + (space.aliasOf or id) + '.js' %}
<a href="https://github.com/LeaVerou/color.js/tree/master/{{ filePath }}" class="file" target="_blank"><code>{{ filePath }}</code></a>
</header>
{% if space.aliasOf %}
<p class="alias-of">Alias of <a href="#{{ space.aliasOf }}">{{ spaces[space.aliasOf].name }}</a></p>
{% endif %}
<div class="description">
{% renderTemplate "njk,md", space %}
{{ description }}
{% endrenderTemplate %}
</div>
<dt>White point:</dt>
<dd><strong property="whitePoint"></strong></dd>
<dt>Coordinates:</dt>
<dd>
<table class="fancy">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Ref. range</th>
</tr>
</thead>
<tbody>
<tr mv-multiple property="coord">
<th property="id"></th>
<th property="name"></th>
<td>
<span property="min"></span>
&ndash;
<span property="max"></span>
<meta property="codeExample" content="color.[replace(space.id, '-', '_')].[id] = [random(min, max)];">
<meta property="randomCoord" content="[random(min, max) & '']">
</td>
<dl class="meta">
{% if space.base %}
<dt>Base</dt>
<dd><a href="#{{ space.base.id }}"><strong>{{ space.base.name }}</strong></a></dd>
{% endif %}
<dt>White point:</dt>
<dd><strong>{{ space.white or "D65" }}</strong></dd>

</tr>
</tbody>
</table>
</dd>
</dl>
<dt>Coordinates:</dt>
<dd>
<table class="fancy">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Ref. range</th>
</tr>
</thead>
<tbody>
{% for coordId, coord in space.coords %}
<tr>
<th>{{ coordId }}</th>
<th>{{ coord.name }}</th>
<td>{{ coord.min | number }} &ndash; {{ coord.max | number }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</dd>
</dl>

<pre><code mv-expressions="{{ }}">let color = new Color("{{ space.id }}", [{{randomCoord}}]);
{{ join(codeExample, "\n") }}
<pre><code>let color = new Color("{{ id }}", [
{%- for coordId, coord in space.coords -%}
{{ coord.max | randomNumber(coord.min) }}{% if not loop.last %}, {% endif %}
{%- endfor -%}
]);
{% for coordId, coord in space.coords -%}
color.{{ spaceAccessor }}.{{ coordId }} = {{ +((coord.min + coord.max) / 2).toPrecision(3) }};
{% endfor -%}
color.toString();</code></pre>
{% if space.url -%}
<a href="{{ space.url }}" target="_blank" class="read-more">Learn more about {{ space.name }}</a>
{% endif %}
</article>

<a property="url" class="read-more">Learn more about [name]</a>
</article>
</div>
{% endfor %}
</section>
<pre class="cn-ignore" id="spaceData" mv-app="colorSpaceData" mv-storage="../data/modules.json"></pre>
{% endraw %}

0 comments on commit 5b2949a

Please sign in to comment.