update docs: use 11ty, prismjs, add code examples & more content (#2)

* added prism js to docs * eslint ignore docs/prism.* * added code examples to docs * restructured docs dir for usage with 11ty * added dev dep @11ty/eleventy * renamed _docs to docs-src * added docs scripts * added eleventy config file * update assets paths in baselayout.html * updated docs npm scripts * load umd build in docs * updated docs * eslint/prettier ignore docs dir & some docs-src files * code format * watch for changes to index.css * updated docs * link to github repo * updated docs: add page anchor links * load d3js from node_modules * updated docs: added tmp install instructions & bugs/suggestions * updated header copy * added dep eleventy-plugin-syntaxhighlight * updated docs to use eleventy-plugin-syntaxhighlight * use single column layout for docs css * use paired shortcode for header content as markdown * added dep prismjs * use prismjs css from node_modules * updated header content * format code * fixed bug with interpolator not updating * use bundled color-legend file * updated docs * use d3.interpolateTurbo for continuous interpolator example * finished reviewing docs * added built docs dir * addressed code reveiw comments * rebuilt docs dir
clhenrick · Jan 1, 2022 · 2fa2210 · 2fa2210
1 parent d2b7c35
commit 2fa2210
Show file tree

Hide file tree

Showing 12 changed files with 5,420 additions and 232 deletions.
diff --git a/.eleventy.cjs b/.eleventy.cjs
@@ -0,0 +1,37 @@
+const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
+const markdownIt = require("markdown-it");
+
+module.exports = function (eleventyConfig) {
+  const md = new markdownIt({
+    html: true,
+  });
+
+  eleventyConfig.addPairedShortcode("markdown", (content) => {
+    return md.render(content);
+  });
+
+  eleventyConfig.addPlugin(syntaxHighlight, {
+    trim: true,
+  });
+
+  eleventyConfig.addPassthroughCopy("docs-src/assets");
+  eleventyConfig.addPassthroughCopy(
+    "node_modules/@webcomponents/webcomponentsjs"
+  );
+  eleventyConfig.addPassthroughCopy("node_modules/lit/polyfill-support.js");
+  eleventyConfig.addPassthroughCopy("node_modules/d3/dist/d3.min.js");
+  eleventyConfig.addPassthroughCopy(
+    "node_modules/prismjs/themes/prism-okaidia.css"
+  );
+  eleventyConfig.addPassthroughCopy("build/color-legend-element.bundled.js");
+
+  eleventyConfig.addWatchTarget("./docs-src/assets");
+  eleventyConfig.addWatchTarget("./build/color-legend-element.bundled.js");
+
+  return {
+    dir: {
+      input: "./docs-src",
+      output: "./docs",
+    },
+  };
+};
diff --git a/.eslintignore b/.eslintignore
@@ -1,3 +1,4 @@
 node_modules/*
 build/*
 rollup-config.js
+docs/
diff --git a/docs-src/_includes/_header.md b/docs-src/_includes/_header.md
@@ -0,0 +1,7 @@
+A [Custom Element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) suitable for use as a legend in data visualizations.
+
+Built with [Lit/Lit-Element](https://lit.dev/) and [D3JS](https://d3js.org/). Inspired by the [Color Legend](https://observablehq.com/@d3/color-legend) on [Observable](https://observablehq.com) by [Mike Bostock](https://observablehq.com/@mbostock) 🙏.
+
+Copyright 2021, [Chris Henrick](https://clhenrick.io/), under the [MIT License](https://github.com/clhenrick/color-legend-element/blob/main/LICENSE).
+
+[View on Github](https://github.com/clhenrick/color-legend-element).
diff --git a/docs-src/_includes/baselayout.njk b/docs-src/_includes/baselayout.njk
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>{{ title }}</title>
+    <script defer src="./node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
+    <script defer src="./node_modules/lit/polyfill-support.js"></script>
+    <script defer src="./node_modules/d3/dist/d3.min.js"></script>
+    <script type="module" defer src="./build/color-legend-element.bundled.js"></script>
+    <link href="./node_modules/prismjs/themes/prism-okaidia.css" rel="stylesheet">
+    <link rel="stylesheet" href="./assets/index.css" />
+  </head>
+  <body>
+    <header>
+      <h1>{{ title }}</h1>
+
+      <color-legend
+        titleText="Snowfall (cm)"
+        scaleType="continuous"
+        tickFormat=".0f"
+        domain="[0, 100]"
+        range='["#eff3ff","#bdd7e7","#6baed6","#3182bd","#08519c"]'
+        style="margin-bottom: 0"
+      ></color-legend>
+
+      {% markdown %}
+        {%- include "./_header.md" -%}
+      {% endmarkdown %}
+    </header>
+
+    <main>{{ content | safe }}</main>
+  </body>
+</html>
diff --git a/docs/index.css → docs-src/assets/index.css b/docs/index.css → docs-src/assets/index.css
@@ -3,25 +3,54 @@
     Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   --bg-color: hsl(220, 5%, 95%);
   --color: hsl(220, 5%, 5%);
+  --border: 1px solid lightgray;
 }
 
 body {
   font-family: var(--font-family);
+  line-height: 1.5;
   color: var(--color);
   background: var(--bg-color);
 }
 
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-top: 2rem;
+  margin-bottom: 1rem;
+}
+
 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 p,
-li {
+li,
+a {
   max-width: 65ch;
 }
 
+a:link {
+  color: hsl(220, 60%, 45%);
+}
+a:visited {
+  color: hsl(220, 60%, 35%);
+}
+a:hover {
+  color: hsl(220, 60%, 55%);
+}
+a:active {
+  color: hsl(220, 60%, 55%);
+}
+a.anchor {
+  text-decoration: none;
+}
+
 header,
 main {
   max-width: 66rem;
@@ -31,21 +60,40 @@ main {
 
 fieldset {
   border: none;
-  margin-bottom: 1rem;
+  margin: 0;
+  padding: 0;
 }
 
 label {
   font-size: 0.875rem;
 }
 
+code[class*="language-"],
+pre[class*="language-"] {
+  font-size: 0.75rem;
+}
+
+pre[class*="language-"] {
+  max-width: min(100%, 25rem);
+  margin: 0;
+}
+
 color-legend:not(:defined) {
   display: none;
 }
 
 color-legend:defined {
-  --cle-border: 1px solid lightgray;
+  --cle-border: var(--border);
   --cle-font-family: var(--font-family);
   --cle-padding: 0.375rem 0.375rem 0.75rem 0.375rem;
   display: inline-block;
-  margin-bottom: 3rem;
 }
+
+.example {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  margin-bottom: 2rem;
+}
+
+/* @media screen and (max-width: 50rem) {} */