Skip to content

Commit

Permalink
update docs
Browse files Browse the repository at this point in the history
  • Loading branch information
gka committed Aug 17, 2024
1 parent b3e8e4c commit e67d7da
Show file tree
Hide file tree
Showing 5 changed files with 269 additions and 35 deletions.
50 changes: 38 additions & 12 deletions docs/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -10,16 +10,6 @@
<h1 id="chroma-js">chroma.js</h1>
<p><strong>chroma.js</strong> is a <a href="https://bundlephobia.com/result?p=chroma-js">small-ish</a> zero-dependency JavaScript library (<a href="https://bundlephobia.com/result?p=chroma-js">13.5kB</a>) for all kinds of color conversions and color scales.</p>
<p><a href="https://travis-ci.com/gka/chroma.js"><img src="https://api.travis-ci.com/gka/chroma.js.svg?branch=master" alt="Build Status"></a></p>
<h2 id="installation">Installation</h2>
<p>For Node.js: Install the <code>chroma-js</code> npm module, <code>npm install chroma-js</code>. Then import the module into your JavaScript: <code>import chroma from &quot;chroma-js&quot;</code>.</p>
<p>And for browsers, download <a href="https://raw.github.com/gka/chroma.js/main/chroma.min.js"><code>chroma.min.js</code></a> or use the <a href="https://unpkg.com/chroma-js/dist/chroma.min.cjs">hosted version on unpkg.com</a>. Then, initiate and manipulate colors:</p>
<pre><code class="lang-js">chroma(&#39;#D4F880&#39;).darken().hex(); // #9BC04B
</code></pre>
<p>You can also just import chroma.js as ES module, as demonstrated in this <a href="https://stackblitz.com/edit/stackblitz-starters-axiqsz?description=HTML/CSS/JS%20Starter&amp;file=script.js,styles.css&amp;terminalHeight=10&amp;title=Static%20Starter">StackBlitz</a>. </p>
<p>To use chroma.js in <a href="https://observablehq.com/">Observable notebooks</a>, you can import it like this:</p>
<pre><code class="lang-js">import { chroma } from &quot;@gka/chroma-js&quot;
</code></pre>
<p>The <a href="http://gka.github.io/chroma.js/">interactive documentation</a> continues below (and there&#39;s a <a href="https://github.com/gka/chroma.js/blob/master/docs/src/index.md">static version</a>, too) for usage examples. Or use it from SASS using <a href="https://github.com/bugsnag/chromatic-sass">chromatic-sass</a>!</p>
<h2 id="quick-start">Quick-start</h2>
<p>Here are a couple of things chroma.js can do for you:</p>
<ul>
Expand All @@ -36,6 +26,24 @@ <h2 id="quick-start">Quick-start</h2>
.mode(&#39;lch&#39;).colors(6)
</code></pre>
<p>chroma.js has a lot more to offer, but that&#39;s the gist of it.</p>
<h2 id="installation">Installation</h2>
<p>For Node.js: Install the <code>chroma-js</code> npm module using your favorite package manager:</p>
<pre><code class="lang-shell">npm install chroma-js
# pnpm add chroma-js
# yarn add chroma-js
</code></pre>
<p>Then import the module into your JavaScript:</p>
<pre><code class="lang-js">import chroma from &#39;chroma-js&#39;;
</code></pre>
<p>If you just want to use parts of chroma.js and not bundle the entire package, you can import directly from <code>chroma-js/src/*</code> to benefit from treeshaking. For instance, the following import would only result in a <a href="https://bundlejs.com/?q=chroma-js%2Fsrc%2Futils%2Fdelta-e.js&amp;treeshake=%5B*+as+default%5D&amp;config=%7B%22analysis%22%3A%22treemap%22%7D">1.24kB bundle increase</a>:</p>
<pre><code class="lang-js">import deltaE from &#39;chroma-js/src/utils/deltaE.js
</code></pre>
<p>And for browsers, download <a href="https://unpkg.com/chroma-js/dist/chroma.min.cjs"><code>chroma.min.js</code></a> or use the <a href="https://unpkg.com/chroma-js/dist/chroma.min.cjs">hosted version on unpkg.com</a>.</p>
<p>You can also just import chroma.js as ES module, as demonstrated in this <a href="https://stackblitz.com/edit/stackblitz-starters-axiqsz?description=HTML/CSS/JS%20Starter&amp;file=script.js,styles.css&amp;terminalHeight=10&amp;title=Static%20Starter">StackBlitz</a>. </p>
<p>To use chroma.js in <a href="https://observablehq.com/">Observable notebooks</a>, you can import it like this:</p>
<pre><code class="lang-js">import { chroma } from &quot;@gka/chroma-js&quot;
</code></pre>
<p>The <a href="http://gka.github.io/chroma.js/">interactive documentation</a> continues below (and there&#39;s a <a href="https://github.com/gka/chroma.js/blob/master/docs/src/index.md">static version</a>, too) for usage examples. Or use it from SASS using <a href="https://github.com/bugsnag/chromatic-sass">chromatic-sass</a>!</p>
<h2 id="api">API</h2>
<h3 id="chroma">chroma</h3>
<h4 id="-color-">(<em>color</em>)</h4>
Expand Down Expand Up @@ -795,6 +803,7 @@ <h3 id="1-0-0">1.0.0</h3>
<script type="text/javascript" src="libs/chroma.min.cjs"></script>
<script type="text/javascript" src="libs/codemirror/lib/codemirror.js"></script>
<script type="text/javascript" src="libs/codemirror/mode/javascript/javascript.js"></script>
<script type="text/javascript" src="libs/codemirror/mode/shell/shell.js"></script>

<script type="text/javascript">
function toggleMenu() {
Expand All @@ -808,6 +817,23 @@ <h3 id="1-0-0">1.0.0</h3>
}

(function ($) {
$('code.lang-shell').each(function () {
var code = this;

var cm = CodeMirror(
function (elt) {
code.parentNode.replaceChild(elt, code);
},
{
value: code.innerHTML.trim(),
indentUnit: 4,
mode: 'shell',
readOnly: true,
lineWrapping: true,
scrollbarStyle: 'null',
}
);
});
$('code.lang-js').each(function () {
var code = this;

Expand All @@ -820,7 +846,7 @@ <h3 id="1-0-0">1.0.0</h3>
indentUnit: 4,
mode: 'javascript',
lineWrapping: true,
scrollbarStyle: 'null',
scrollbarStyle: 'null'
}
);

Expand All @@ -832,7 +858,7 @@ <h3 id="1-0-0">1.0.0</h3>
cm.display.wrapper.parentNode
);

showColors(cm);
if (!cm.getDoc().getValue().includes('import')) showColors(cm);

function showColors(cm) {
$('.cm-string', cm.display.wrapper).each(styleSpan);
Expand Down
169 changes: 169 additions & 0 deletions docs/libs/codemirror/mode/shell/shell.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,169 @@
// CodeMirror, copyright (c) by Marijn Haverbeke and others
// Distributed under an MIT license: https://codemirror.net/5/LICENSE

(function(mod) {
if (typeof exports == "object" && typeof module == "object") // CommonJS
mod(require("../../lib/codemirror"));
else if (typeof define == "function" && define.amd) // AMD
define(["../../lib/codemirror"], mod);
else // Plain browser env
mod(CodeMirror);
})(function(CodeMirror) {
"use strict";

CodeMirror.defineMode('shell', function() {

var words = {};
function define(style, dict) {
for(var i = 0; i < dict.length; i++) {
words[dict[i]] = style;
}
};

var commonAtoms = ["true", "false"];
var commonKeywords = ["if", "then", "do", "else", "elif", "while", "until", "for", "in", "esac", "fi",
"fin", "fil", "done", "exit", "set", "unset", "export", "function"];
var commonCommands = ["ab", "awk", "bash", "beep", "cat", "cc", "cd", "chown", "chmod", "chroot", "clear",
"cp", "curl", "cut", "diff", "echo", "find", "gawk", "gcc", "get", "git", "grep", "hg", "kill", "killall",
"ln", "ls", "make", "mkdir", "openssl", "mv", "nc", "nl", "node", "npm", "ping", "ps", "restart", "rm",
"rmdir", "sed", "service", "sh", "shopt", "shred", "source", "sort", "sleep", "ssh", "start", "stop",
"su", "sudo", "svn", "tee", "telnet", "top", "touch", "vi", "vim", "wall", "wc", "wget", "who", "write",
"yes", "zsh"];

CodeMirror.registerHelper("hintWords", "shell", commonAtoms.concat(commonKeywords, commonCommands));

define('atom', commonAtoms);
define('keyword', commonKeywords);
define('builtin', commonCommands);

function tokenBase(stream, state) {
if (stream.eatSpace()) return null;

var sol = stream.sol();
var ch = stream.next();

if (ch === '\\') {
stream.next();
return null;
}
if (ch === '\'' || ch === '"' || ch === '`') {
state.tokens.unshift(tokenString(ch, ch === "`" ? "quote" : "string"));
return tokenize(stream, state);
}
if (ch === '#') {
if (sol && stream.eat('!')) {
stream.skipToEnd();
return 'meta'; // 'comment'?
}
stream.skipToEnd();
return 'comment';
}
if (ch === '$') {
state.tokens.unshift(tokenDollar);
return tokenize(stream, state);
}
if (ch === '+' || ch === '=') {
return 'operator';
}
if (ch === '-') {
stream.eat('-');
stream.eatWhile(/\w/);
return 'attribute';
}
if (ch == "<") {
if (stream.match("<<")) return "operator"
var heredoc = stream.match(/^<-?\s*['"]?([^'"]*)['"]?/)
if (heredoc) {
state.tokens.unshift(tokenHeredoc(heredoc[1]))
return 'string-2'
}
}
if (/\d/.test(ch)) {
stream.eatWhile(/\d/);
if(stream.eol() || !/\w/.test(stream.peek())) {
return 'number';
}
}
stream.eatWhile(/[\w-]/);
var cur = stream.current();
if (stream.peek() === '=' && /\w+/.test(cur)) return 'def';
return words.hasOwnProperty(cur) ? words[cur] : null;
}

function tokenString(quote, style) {
var close = quote == "(" ? ")" : quote == "{" ? "}" : quote
return function(stream, state) {
var next, escaped = false;
while ((next = stream.next()) != null) {
if (next === close && !escaped) {
state.tokens.shift();
break;
} else if (next === '$' && !escaped && quote !== "'" && stream.peek() != close) {
escaped = true;
stream.backUp(1);
state.tokens.unshift(tokenDollar);
break;
} else if (!escaped && quote !== close && next === quote) {
state.tokens.unshift(tokenString(quote, style))
return tokenize(stream, state)
} else if (!escaped && /['"]/.test(next) && !/['"]/.test(quote)) {
state.tokens.unshift(tokenStringStart(next, "string"));
stream.backUp(1);
break;
}
escaped = !escaped && next === '\\';
}
return style;
};
};

function tokenStringStart(quote, style) {
return function(stream, state) {
state.tokens[0] = tokenString(quote, style)
stream.next()
return tokenize(stream, state)
}
}

var tokenDollar = function(stream, state) {
if (state.tokens.length > 1) stream.eat('$');
var ch = stream.next()
if (/['"({]/.test(ch)) {
state.tokens[0] = tokenString(ch, ch == "(" ? "quote" : ch == "{" ? "def" : "string");
return tokenize(stream, state);
}
if (!/\d/.test(ch)) stream.eatWhile(/\w/);
state.tokens.shift();
return 'def';
};

function tokenHeredoc(delim) {
return function(stream, state) {
if (stream.sol() && stream.string == delim) state.tokens.shift()
stream.skipToEnd()
return "string-2"
}
}

function tokenize(stream, state) {
return (state.tokens[0] || tokenBase) (stream, state);
};

return {
startState: function() {return {tokens:[]};},
token: function(stream, state) {
return tokenize(stream, state);
},
closeBrackets: "()[]{}''\"\"``",
lineComment: '#',
fold: "brace"
};
});

CodeMirror.defineMIME('text/x-sh', 'shell');
// Apache uses a slightly different Media Type for Shell scripts
// http://svn.apache.org/repos/asf/httpd/httpd/trunk/docs/conf/mime.types
CodeMirror.defineMIME('application/x-sh', 'shell');

});

22 changes: 20 additions & 2 deletions docs/src/footer.inc.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
<script type="text/javascript" src="libs/chroma.min.cjs"></script>
<script type="text/javascript" src="libs/codemirror/lib/codemirror.js"></script>
<script type="text/javascript" src="libs/codemirror/mode/javascript/javascript.js"></script>
<script type="text/javascript" src="libs/codemirror/mode/shell/shell.js"></script>

<script type="text/javascript">
function toggleMenu() {
Expand All @@ -16,6 +17,23 @@
}

(function ($) {
$('code.lang-shell').each(function () {
var code = this;

var cm = CodeMirror(
function (elt) {
code.parentNode.replaceChild(elt, code);
},
{
value: code.innerHTML.trim(),
indentUnit: 4,
mode: 'shell',
readOnly: true,
lineWrapping: true,
scrollbarStyle: 'null',
}
);
});
$('code.lang-js').each(function () {
var code = this;

Expand All @@ -28,7 +46,7 @@
indentUnit: 4,
mode: 'javascript',
lineWrapping: true,
scrollbarStyle: 'null',
scrollbarStyle: 'null'
}
);

Expand All @@ -40,7 +58,7 @@
cm.display.wrapper.parentNode
);

showColors(cm);
if (!cm.getDoc().getValue().includes('import')) showColors(cm);

function showColors(cm) {
$('.cm-string', cm.display.wrapper).each(styleSpan);
Expand Down
4 changes: 4 additions & 0 deletions docs/src/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,10 @@ body {
margin-left: 30px;
}

.wrap>p {
line-height: 1.5;
}

.wrap>p,
.wrap>table {
margin-right: 200px;
Expand Down
59 changes: 38 additions & 21 deletions docs/src/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,27 +5,6 @@

[![Build Status](https://api.travis-ci.com/gka/chroma.js.svg?branch=master)](https://travis-ci.com/gka/chroma.js)

## Installation

For Node.js: Install the `chroma-js` npm module, `npm install chroma-js`. Then import the module into your JavaScript: `import chroma from "chroma-js"`.

And for browsers, download [`chroma.min.js`](https://raw.github.com/gka/chroma.js/main/chroma.min.js) or use the [hosted version on unpkg.com](https://unpkg.com/chroma-js/dist/chroma.min.cjs). Then, initiate and manipulate colors:

```js
chroma('#D4F880').darken().hex(); // #9BC04B
```

You can also just import chroma.js as ES module, as demonstrated in this [StackBlitz](https://stackblitz.com/edit/stackblitz-starters-axiqsz?description=HTML/CSS/JS%20Starter&file=script.js,styles.css&terminalHeight=10&title=Static%20Starter).

To use chroma.js in [Observable notebooks](https://observablehq.com/), you can import it like this:

```js
import { chroma } from "@gka/chroma-js"
```


The [interactive documentation](http://gka.github.io/chroma.js/) continues below (and there's a [static version](https://github.com/gka/chroma.js/blob/master/docs/src/index.md), too) for usage examples. Or use it from SASS using [chromatic-sass](https://github.com/bugsnag/chromatic-sass)!


## Quick-start

Expand All @@ -51,6 +30,44 @@ chroma.scale(['#fafa6e', '#2A4858'])

chroma.js has a lot more to offer, but that's the gist of it.

## Installation

For Node.js: Install the `chroma-js` npm module using your favorite package manager:

```shell
npm install chroma-js
# pnpm add chroma-js
# yarn add chroma-js
```

Then import the module into your JavaScript:

```js
import chroma from 'chroma-js';
```

If you just want to use parts of chroma.js and not bundle the entire package, you can import directly from `chroma-js/src/*` to benefit from treeshaking. For instance, the following import would only result in a [1.24kB bundle increase](https://bundlejs.com/?q=chroma-js%2Fsrc%2Futils%2Fdelta-e.js&treeshake=%5B*+as+default%5D&config=%7B%22analysis%22%3A%22treemap%22%7D):

```js
import deltaE from 'chroma-js/src/utils/deltaE.js
```
And for browsers, download [`chroma.min.js`](https://unpkg.com/chroma-js/dist/chroma.min.cjs) or use the [hosted version on unpkg.com](https://unpkg.com/chroma-js/dist/chroma.min.cjs).
You can also just import chroma.js as ES module, as demonstrated in this [StackBlitz](https://stackblitz.com/edit/stackblitz-starters-axiqsz?description=HTML/CSS/JS%20Starter&file=script.js,styles.css&terminalHeight=10&title=Static%20Starter).
To use chroma.js in [Observable notebooks](https://observablehq.com/), you can import it like this:
```js
import { chroma } from "@gka/chroma-js"
```
The [interactive documentation](http://gka.github.io/chroma.js/) continues below (and there's a [static version](https://github.com/gka/chroma.js/blob/master/docs/src/index.md), too) for usage examples. Or use it from SASS using [chromatic-sass](https://github.com/bugsnag/chromatic-sass)!



## API

### chroma
Expand Down

0 comments on commit e67d7da

Please sign in to comment.