chore: fully integreate mdjs into 11ty

2026-03-10 08:31:19 +00:00 · 2020-05-02 12:52:43 +02:00
parent 8cccfc837b
commit f832b51e24
26 changed files with 864 additions and 462 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -23,6 +23,7 @@ lerna-debug.log

 ## build hp
 /_site/
+/_site-dev/

 ## we prefer yarn.lock
 package-lock.json
--- a/docs/.eleventy.js
+++ b/docs/.eleventy.js
@@ -1,17 +1,13 @@
-const htmlMinTransform = require('./transforms/html-min-transform.js');
-const eleventyUnified = require('./unified');
+const pluginMdjs = require('./_plugin-mdjs/index.js');

 module.exports = function (eleventyConfig) {
-  eleventyConfig.addPlugin(eleventyUnified);
+  eleventyConfig.addPlugin(pluginMdjs);

  eleventyConfig.addPassthroughCopy('styles.css');
  eleventyConfig.addPassthroughCopy('demoing/demo/custom-elements.json');
  eleventyConfig.addPassthroughCopy('manifest.json');
  eleventyConfig.addPassthroughCopy('**/*.{png,gif}');

-  // Transforms
-  eleventyConfig.addTransform('htmlmin', htmlMinTransform);
-
  eleventyConfig.addCollection('section', function (collection) {
    // This works _because_ of our current content. Something like https://github.com/Polymer/lit-html/blob/master/docs/.eleventy.js#L37
    // would be more robust, but there are likely other answers here.
@@ -19,7 +15,7 @@ module.exports = function (eleventyConfig) {
  });

  return {
-    dir: { input: './', output: '../_site' },
+    dir: { input: './', output: '../_site-dev' },
    passthroughFileCopy: true,
  };
 };
--- a/docs/_building-rollup/createMpaConfig.js
+++ b/docs/_building-rollup/createMpaConfig.js
@@ -0,0 +1,152 @@
+/* eslint-disable import/no-extraneous-dependencies */
+/* eslint-disable no-param-reassign */
+/** @typedef {import('polyfills-loader').PolyfillsLoaderConfig} PolyfillsLoaderConfig */
+
+const merge = require('deepmerge');
+const html = require('@open-wc/rollup-plugin-html');
+const polyfillsLoader = require('@open-wc/rollup-plugin-polyfills-loader');
+const path = require('path');
+const { generateSW } = require('rollup-plugin-workbox');
+const { createBasicConfig } = require('@open-wc/building-rollup');
+const { defaultPolyfills } = require('@open-wc/building-rollup');
+const {
+  pluginWithOptions,
+  applyServiceWorkerRegistration,
+  isFalsy,
+  listFiles,
+} = require('./utils');
+
+/**
+ * @param {SpaOptions} options
+ */
+async function createMpaConfig(options) {
+  const basicConfig = createBasicConfig(options);
+  const userOptions = merge(
+    {
+      html: true,
+      polyfillsLoader: true,
+      workbox: true,
+      injectServiceWorker: false,
+    },
+    options,
+  );
+  let outputDir = basicConfig.output.dir;
+
+  const htmlPlugins = [];
+  const polyfillPlugins = [];
+
+  if (!userOptions.inputGlob) {
+    throw new Error('Cannot generate multi build outputs when html plugin is disabled');
+  }
+
+  const htmlFiles = await listFiles(userOptions.inputGlob);
+  const htmlPluginName = [];
+
+  for (const inputPath of htmlFiles) {
+    const name = inputPath.substring(userOptions.rootPath.length + 1);
+    const htmlPlugin = pluginWithOptions(html, userOptions.html, {
+      minify: !userOptions.developmentMode,
+      transform: [userOptions.injectServiceWorker && applyServiceWorkerRegistration].filter(
+        isFalsy,
+      ),
+      inject: false,
+      inputPath,
+      name,
+    });
+    htmlPlugins.push(htmlPlugin);
+    htmlPluginName.push(name);
+  }
+
+  let polyfillsLoaderConfig = {
+    polyfills: {},
+    minify: !userOptions.developmentMode,
+  };
+
+  if (userOptions.legacyBuild) {
+    if (htmlPlugins.length < 1) {
+      throw new Error('Cannot generate multi build outputs when html plugin is disabled');
+    }
+    outputDir = basicConfig.output[0].dir;
+
+    for (const htmlPlugin of htmlPlugins) {
+      basicConfig.output[0].plugins.push(htmlPlugin.addOutput('module'));
+      basicConfig.output[1].plugins.push(htmlPlugin.addOutput('nomodule'));
+    }
+
+    polyfillsLoaderConfig = {
+      modernOutput: {
+        name: 'module',
+        type: 'module',
+      },
+      legacyOutput: {
+        name: 'nomodule',
+        type: 'systemjs',
+        test:
+          // test if browser supports dynamic imports (and thus modules). import.meta.url cannot be tested
+          "(function(){try{Function('!function(){import(_)}').call();return false;}catch(_){return true}})()",
+      },
+      minify: !userOptions.developmentMode,
+      polyfills: defaultPolyfills,
+    };
+  }
+
+  for (let i = 0; i < htmlPlugins.length; i += 1) {
+    const localConfig = {
+      ...polyfillsLoaderConfig,
+    };
+    const name = htmlPluginName[i];
+    localConfig.htmlFileName = name;
+    const polyfillPlugin = pluginWithOptions(
+      polyfillsLoader,
+      userOptions.polyfillsLoader,
+      localConfig,
+    );
+    polyfillPlugins.push(polyfillPlugin);
+  }
+
+  const workboxPlugin = pluginWithOptions(
+    generateSW,
+    userOptions.workbox,
+    {
+      // Keep 'legacy-*.js' just for retro compatibility
+      globIgnores: ['polyfills/*.js', 'legacy-*.js', 'nomodule-*.js'],
+      navigateFallback: '/index.html',
+      // where to output the generated sw
+      swDest: path.join(process.cwd(), outputDir, 'sw.js'),
+      // directory to match patterns against to be precached
+      globDirectory: path.join(process.cwd(), outputDir),
+      // cache any html js and css by default
+      globPatterns: ['**/*.{html,js,css,webmanifest}'],
+      skipWaiting: true,
+      clientsClaim: true,
+      runtimeCaching: [
+        {
+          urlPattern: 'polyfills/*.js',
+          handler: 'CacheFirst',
+        },
+      ],
+    },
+    () => {},
+  );
+
+  if (userOptions.workbox) {
+    if (basicConfig.output.length > 1) {
+      const lastOutput = basicConfig.output.length - 1;
+      basicConfig.output[lastOutput].plugins.push(workboxPlugin);
+    } else {
+      basicConfig.output.plugins.push(workboxPlugin);
+    }
+  }
+
+  return merge(basicConfig, {
+    plugins: [
+      // create HTML files output
+      ...htmlPlugins,
+
+      // inject polyfills loaders into HTML
+      ...polyfillPlugins,
+    ],
+  });
+}
+
+module.exports = { createMpaConfig };
--- a/docs/_building-rollup/utils.js
+++ b/docs/_building-rollup/utils.js
@@ -0,0 +1,100 @@
+/* eslint-disable import/no-extraneous-dependencies */
+const glob = require('glob');
+const fs = require('fs');
+const path = require('path');
+
+const merge = require('deepmerge');
+const { createScript } = require('@open-wc/building-utils');
+const { parse, serialize } = require('parse5');
+const { append, predicates, query } = require('@open-wc/building-utils/dom5-fork');
+const Terser = require('terser');
+
+const isFalsy = _ => !!_;
+
+function dedupedBabelPlugin(babel, userConfig, defaultConfig) {
+  if (!userConfig) {
+    return undefined;
+  }
+
+  const config = merge(defaultConfig, typeof userConfig === 'object' ? userConfig : {});
+
+  const newPlugins = [];
+  const addedPlugins = new Set();
+  for (const plugin of [...config.plugins].reverse()) {
+    const name = Array.isArray(plugin) ? plugin[0] : plugin;
+    const resolvedName = require.resolve(name);
+    if (!addedPlugins.has(resolvedName)) {
+      addedPlugins.add(resolvedName);
+      newPlugins.unshift(plugin);
+    }
+  }
+
+  config.plugins = newPlugins;
+  return babel(config);
+}
+
+function pluginWithOptions(plugin, userConfig, defaultConfig, ...otherParams) {
+  if (!userConfig) {
+    return undefined;
+  }
+
+  const config = merge(defaultConfig, typeof userConfig === 'object' ? userConfig : {});
+  return plugin(config, ...otherParams);
+}
+
+/**
+ * @param {string} htmlString
+ * @returns {string}
+ */
+function applyServiceWorkerRegistration(htmlString) {
+  const documentAst = parse(htmlString);
+  const body = query(documentAst, predicates.hasTagName('body'));
+  const swRegistration = createScript(
+    {},
+    Terser.minify(`
+    if ('serviceWorker' in navigator) {
+      window.addEventListener('load', function() {
+        navigator.serviceWorker
+          .register('./sw.js')
+          .then(function() {
+            console.log('ServiceWorker registered.');
+          })
+          .catch(function(err) {
+            console.log('ServiceWorker registration failed: ', err);
+          });
+      });
+    }
+  `).code,
+  );
+
+  append(body, swRegistration);
+  return serialize(documentAst);
+}
+
+/**
+ * Lists all files using the specified glob, starting from the given root directory.
+ *
+ * Will return all matching file paths fully resolved.
+ */
+function listFiles(fromGlob, rootDir = process.cwd()) {
+  return new Promise(resolve => {
+    glob(fromGlob, { cwd: rootDir }, (er, files) => {
+      // remember, each filepath returned is relative to rootDir
+      resolve(
+        files
+          // fully resolve the filename relative to rootDir
+          .map(filePath => path.resolve(rootDir, filePath))
+          // filter out directories
+          .filter(filePath => !fs.lstatSync(filePath).isDirectory()),
+      );
+    });
+  });
+}
+
+module.exports = {
+  isFalsy,
+  pluginWithOptions,
+  dedupedBabelPlugin,
+  applyServiceWorkerRegistration,
+  listFiles,
+};
--- a/docs/_includes/home.njk
+++ b/docs/_includes/home.njk
@@ -1,83 +1,86 @@
 <!doctype html>
 <html lang="en">

-<head>
-  {% include 'partials/meta.njk' %}
-  <link rel="stylesheet" href="/styles.css">
-</head>
+  <head>
+    {% include 'partials/meta.njk' %}
+    <link rel="stylesheet" href="/styles.css">
+  </head>

-<body data-gr-c-s-loaded="true">
-  <div id="app">
-    <div class="theme-container no-sidebar">
-      {% include 'partials/header.njk' %}
-      <div class="sidebar-mask"></div>
-      <aside class="sidebar">
-        <nav class="nav-links">
-          <div class="nav-item"><a href="/" class="nav-link router-link-exact-active router-link-active">
-              Home
-            </a></div>
-          <div class="nav-item"><a href="/guide/" class="nav-link">
-              Guide
-            </a></div>
-          <div class="nav-item"><a href="/faq/" class="nav-link">
-              FAQ
-            </a></div>
-          <div class="nav-item"><a href="/about/" class="nav-link">
-              About
-            </a></div> <a href="https://github.com/open-wc/open-wc" target="_blank" rel="noopener noreferrer"
-            class="repo-link">
-            GitHub
-            <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15"
-              height="15" class="icon outbound">
-              <path fill="currentColor"
-                d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z">
-              </path>
-              <polygon fill="currentColor"
-                points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9">
-              </polygon>
-            </svg></a>
-        </nav>
-        <!---->
-      </aside>
-      <main aria-labelledby="main-title" class="home">
-        <header class="hero"><img src="/hero.png" alt="hero" with="280" height="280">
-          <h1 id="main-title">open-wc</h1>
-          <p class="description">
-            Open Web Component Recommendations
-          </p>
-          <clipboard-copy for="homepage-npm-init-command" tabindex="0" role="button"><code
-              id="homepage-npm-init-command" class="language-bash">npm init @open-wc</code>
-          </clipboard-copy>
-          <p class="action"><a href="/guide/" class="nav-link action-button">
-              Get Started →
-            </a></p>
-        </header>
-        <div class="features">
-          <div class="feature">
-            <h2>Smart Defaults</h2>
-            <p>Enjoy the peace of mind that comes from having a well-known default solution for
-              almost everything. From linting to testing to demos to publishing - have the full experience.</p>
-          </div>
-          <div class="feature">
-            <h2>Awesome Generators</h2>
-            <p>Get up and running quickly with opinionated generators, or add recommended tools to
-              existing projects. Our comprehensive fleet of generators have got you covered.</p>
-          </div>
-          <div class="feature">
-            <h2>Open Source Love</h2>
-            <p>Open Web Components is a community-effort, independent of any framework or company. We
-              use mostly open-source tools and services.</p>
+  <body data-gr-c-s-loaded="true">
+    <div id="app">
+      <div class="theme-container no-sidebar">
+        {% include 'partials/header.njk' %}
+        <div class="sidebar-mask"></div>
+        <aside class="sidebar">
+          <nav class="nav-links">
+            <div class="nav-item">
+              <a href="/" class="nav-link router-link-exact-active router-link-active">
+                Home
+              </a>
+            </div>
+            <div class="nav-item">
+              <a href="/guide/" class="nav-link">
+                Guide
+              </a>
+            </div>
+            <div class="nav-item">
+              <a href="/faq/" class="nav-link">
+                FAQ
+              </a>
+            </div>
+            <div class="nav-item">
+              <a href="/about/" class="nav-link">
+                About
+              </a>
+            </div>
+            <a href="https://github.com/open-wc/open-wc" target="_blank" rel="noopener noreferrer" class="repo-link">
+              GitHub
+              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound">
+                <path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path>
+                <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon>
+              </svg>
+            </a>
+          </nav>
+          <!---->
+        </aside>
+        <main aria-labelledby="main-title" class="home">
+          <header class="hero"><img src="/hero.png" alt="hero" with="280" height="280">
+            <h1 id="main-title">open-wc</h1>
+            <p class="description">
+              Open Web Component Recommendations
+            </p>
+            <clipboard-copy for="homepage-npm-init-command" tabindex="0" role="button">
+              <code id="homepage-npm-init-command" class="language-bash">npm init @open-wc</code>
+            </clipboard-copy>
+            <p class="action">
+              <a href="/guide/" class="nav-link action-button">
+                Get Started →
+              </a>
+            </p>
+          </header>
+          <div class="features">
+            <div class="feature">
+              <h2>Smart Defaults</h2>
+              <p>Enjoy the peace of mind that comes from having a well-known default solution for almost everything. From linting to testing to demos to publishing - have the full experience.</p>
+            </div>
+            <div class="feature">
+              <h2>Awesome Generators</h2>
+              <p>Get up and running quickly with opinionated generators, or add recommended tools to existing projects. Our comprehensive fleet of generators have got you covered.</p>
+            </div>
+            <div class="feature">
+              <h2>Open Source Love</h2>
+              <p>Open Web Components is a community-effort, independent of any framework or company. We use mostly open-source tools and services.</p>
+            </div>
          </div>
+          <div class="theme-default-content custom content__default">
+            {{ content.html | safe }}
+            <div class="footer">
+              MIT Licensed | Copyright © 2018-2019 open-wc
+            </div>
+          </main>
        </div>
-        <div class="theme-default-content custom content__default">
-          {{ content | safe }}
-          <div class="footer">
-            MIT Licensed | Copyright © 2018-2019 open-wc
-          </div>
-      </main>
-    </div>
-    <div class="global-ui"></div>
-  </div>
-</body>
+        <div class="global-ui"></div>
+      </div>
+    </body>

-</html>
+  </html>
--- a/docs/_includes/layout.njk
+++ b/docs/_includes/layout.njk
@@ -1,27 +1,49 @@
 <!doctype html>
 <html lang="en">

-<head>
-  {% include 'partials/meta.njk' %}
-  <link rel="stylesheet" href="/styles.css">
-</head>
+  <head>
+    {% include 'partials/meta.njk' %}
+    <link rel="stylesheet" href="/styles.css">
+  </head>

-<body data-gr-c-s-loaded="true">
-  <div id="app">
-    <div class="theme-container">
-      {% include 'partials/header.njk' %}
-      {% include 'partials/sidebar.njk' %}
-      <main class="page">
-        <div class="theme-default-content content__default">
-          {{ content | safe }}
-          {% if content.data.jsCode %}
-            <script>{{ content.data.jsCode | safe }}</script>
-          {% endif %}
-        </div>
-      </main>
+  <body data-gr-c-s-loaded="true">
+    <div id="app">
+      <div class="theme-container">
+        {% include 'partials/header.njk' %}
+        {% include 'partials/sidebar.njk' %}
+        <main class="page">
+          <div class="theme-default-content content__default">
+            {{ content.html | safe }}
+          </div>
+        </main>
+      </div>
+      <div class="global-ui"></div>
    </div>
-    <div class="global-ui"></div>
-  </div>
-</body>

-</html>
+    <script>
+      document
+        .querySelector('.sidebar-button')
+        .addEventListener('click', () => {
+          document
+            .querySelector('.theme-container')
+            .classList
+            .toggle('sidebar-open');
+        });
+      document
+        .querySelector('.sidebar-mask')
+        .addEventListener('click', () => {
+          document
+            .querySelector('.theme-container')
+            .classList
+            .toggle('sidebar-open');
+        });
+    </script>
+
+    {% if content.jsCode %}
+      <script type="module">
+        {{ content.jsCode | safe }}
+      </script>
+    {% endif %}
+  </body>
+
+</html>
--- a/docs/_includes/partials/header.njk
+++ b/docs/_includes/partials/header.njk
@@ -1,47 +1,32 @@
 <header class="navbar">
-  <div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img"
-      viewBox="0 0 448 512" class="icon">
-      <path fill="currentColor"
-        d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z">
-      </path>
-    </svg></div> <a href="/index.html" class="home-link router-link-active"><img src="/logo.png" alt="open-wc"
-      class="logo"> <span class="site-name can-hide">open-wc</span></a>
+  <div class="sidebar-button">
+    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewbox="0 0 448 512" class="icon">
+      <path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path>
+    </svg>
+  </div>
+  <a href="/index.html" class="home-link router-link-active"><img src="/logo.png" alt="open-wc" class="logo">
+    <span class="site-name can-hide">open-wc</span></a>
  <div class="links" style="max-width: 1532px;">
    <nav class="nav-links can-hide">
-      <div class="nav-item"><a href="/index.html"
-          class="nav-link{% if permalink == 'index.html' %} router-link-active{% endif %}">
+      <div class="nav-item">
+        <a href="/index.html" class="nav-link{% if permalink == 'index.html' %} router-link-active{% endif %}">
          Home
-        </a></div>
+        </a>
+      </div>
      {% for navItem in collections.section %}
        <div class="nav-item">
-            <a
-                href="/{{ navItem.data.permalink }}"
-                class="nav-link{% if section == navItem.data.section %} router-link-active{% endif %}"
-            >
-                {{ navItem.data.title }}
-            </a>
+          <a href="/{{ navItem.data.permalink }}" class="nav-link{% if section == navItem.data.section %} router-link-active{% endif %}">
+            {{ navItem.data.title }}
+          </a>
        </div>
      {% endfor %}
-    <a href="https://github.com/open-wc/open-wc" target="_blank" rel="noopener noreferrer"
-        class="repo-link">
+      <a href="https://github.com/open-wc/open-wc" target="_blank" rel="noopener noreferrer" class="repo-link">
        GitHub
-        <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15"
-          height="15" class="icon outbound">
-          <path fill="currentColor"
-            d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z">
-          </path>
-          <polygon fill="currentColor"
-            points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9">
-          </polygon>
-        </svg></a>
+        <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound">
+          <path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path>
+          <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon>
+        </svg>
+      </a>
    </nav>
  </div>
-  <script type="module">
-    document.querySelector('.sidebar-button').addEventListener('click', () => {
-        document.querySelector('.theme-container').classList.toggle('sidebar-open');
-    });
-    document.querySelector('.sidebar-mask').addEventListener('click', () => {
-        document.querySelector('.theme-container').classList.toggle('sidebar-open');
-    });
-  </script>
-</header>
+</header>
--- a/docs/_includes/partials/meta.njk
+++ b/docs/_includes/partials/meta.njk
@@ -1,6 +1,6 @@
 {% set pageTitle = title %}
 {% if title != site.name %}
-    {% set pageTitle = title + ': ' + site.name %}
+  {% set pageTitle = title + ': ' + site.name %}
 {% endif %}
 {% set currentUrl = site.url + page.url %}

@@ -11,27 +11,24 @@
 <title>{{ pageTitle }}</title>
 <meta name="generator" content="11ty 0.10.0">
 <link rel="manifest" href="/manifest.json">
-<link rel="icon" type="image/png" href="/favicon.png" />
-<link
-    rel="apple-touch-icon"
-    href="/icons/icon-128x128.png"
-/>
-<meta name="theme-color" content="#127afb" />
+<link rel="icon" type="image/png" href="/favicon.png"/>
+<link rel="apple-touch-icon" href="/icons/icon-128x128.png"/>
+<meta name="theme-color" content="#127afb"/>
 {% if site.url !== '/' %}
-<link rel="canonical" href="{{ currentUrl }}" />
+  <link rel="canonical" href="{{ currentUrl }}"/>
 {% endif %}

-<meta property="og:site_name" content="{{ site.name }}" />
-<meta property="og:title" content="{{ pageTitle }}" />
-<meta property="og:type" content="website" />
-<meta property="og:image" content="{{site.url}}/logo.png">
-<meta property="og:url" content="{{ currentUrl }}" />
+<meta property="og:site_name" content="{{ site.name }}"/>
+<meta property="og:title" content="{{ pageTitle }}"/>
+<meta property="og:type" content="website"/>
+<meta property="og:image" content="/logo.png">
+<meta property="og:url" content="{{ currentUrl }}"/>

-<meta name="twitter:creator" content="@OpenWc" />
+<meta name="twitter:creator" content="@OpenWc"/>
 <meta name="twitter:card" content="summary">

 {% if metaDesc %}
-  <meta name="description" content="{{ metaDesc }}" />
-  <meta name="twitter:description" content="{{ metaDesc }}" />
-  <meta property="og:description" content="{{ metaDesc }}" />
-{% endif %}
+  <meta name="description" content="{{ metaDesc }}"/>
+  <meta name="twitter:description" content="{{ metaDesc }}"/>
+  <meta property="og:description" content="{{ metaDesc }}"/>
+{% endif %}
--- a/docs/_includes/partials/sidebar-about.njk
+++ b/docs/_includes/partials/sidebar-about.njk
@@ -1,7 +1,14 @@
-
 <ul class="sidebar-links">
-  <li><a href="/about/" class="{% if permalink == 'about/index.html' %}active {% endif %}sidebar-link">About</a></li>
-  <li><a href="/about/contact.html" class="{% if permalink == 'about/contact.html' %}active {% endif %}sidebar-link">Contact</a></li>
-  <li><a href="/about/rationales.html" class="{% if permalink == 'about/rationales.html' %}active {% endif %}sidebar-link">Rationales</a></li>
-  <li><a href="/about/blog.html" class="{% if permalink == 'about/blog.html' %}active {% endif %} sidebar-link">Blog</a></li>
-</ul>
+  <li>
+    <a href="/about/" class="{% if permalink == 'about/index.html' %}active {% endif %}sidebar-link">About</a>
+  </li>
+  <li>
+    <a href="/about/contact.html" class="{% if permalink == 'about/contact.html' %}active {% endif %}sidebar-link">Contact</a>
+  </li>
+  <li>
+    <a href="/about/rationales.html" class="{% if permalink == 'about/rationales.html' %}active {% endif %}sidebar-link">Rationales</a>
+  </li>
+  <li>
+    <a href="/about/blog.html" class="{% if permalink == 'about/blog.html' %}active {% endif %} sidebar-link">Blog</a>
+  </li>
+</ul>
--- a/docs/_includes/partials/sidebar-faq.njk
+++ b/docs/_includes/partials/sidebar-faq.njk
@@ -1,20 +1,30 @@
-
 <ul class="sidebar-links">
-    <li><a href="/faq/index.html" class="{% if permalink == 'faq/index.html' %}active {% endif %}sidebar-link">Faq</a></li>
-    <li>
+  <li>
+    <a href="/faq/index.html" class="{% if permalink == 'faq/index.html' %}active {% endif %}sidebar-link">Faq</a>
+  </li>
+  <li>
    <section class="sidebar-group depth-0">
-        <p class="sidebar-heading open"><span>Deep dives</span>
+      <p class="sidebar-heading open">
+        <span>Deep dives</span>
        <!---->
-        </p>
-        <ul class="sidebar-links sidebar-group-items">
-        <li><a href="/faq/events.html" class="{% if permalink == 'faq/events.html' %}active {% endif %}sidebar-link">Managing events in your custom elements</a>
+      </p>
+      <ul class="sidebar-links sidebar-group-items">
+        <li>
+          <a href="/faq/events.html" class="{% if permalink == 'faq/events.html' %}active {% endif %}sidebar-link">Managing events in your custom elements</a>
        </li>
-        <li><a href="/faq/rerender.html" class="{% if permalink == 'faq/rerender.html' %}active {% endif %}sidebar-link">Rerender not triggered</a></li>
-        <li><a href="/faq/unit-testing-custom-events.html" class="{% if permalink == 'faq/unit-testing-custom-events.html' %}active {% endif %}sidebar-link">Unit Testing Events</a></li>
-        <li><a href="/faq/unit-testing-init-error.html" class="{% if permalink == 'faq/unit-testing-init-error.html' %}active {% endif %}sidebar-link">Testing for errors thrown in
-            initialization</a></li>
-        <li><a href="/faq/lit-element-lifecycle.html" class="{% if permalink == 'faq/lit-element-lifecycle.html' %}active {% endif %}sidebar-link">LitElement lifecycle</a></li>
-        </ul>
+        <li>
+          <a href="/faq/rerender.html" class="{% if permalink == 'faq/rerender.html' %}active {% endif %}sidebar-link">Rerender not triggered</a>
+        </li>
+        <li>
+          <a href="/faq/unit-testing-custom-events.html" class="{% if permalink == 'faq/unit-testing-custom-events.html' %}active {% endif %}sidebar-link">Unit Testing Events</a>
+        </li>
+        <li>
+          <a href="/faq/unit-testing-init-error.html" class="{% if permalink == 'faq/unit-testing-init-error.html' %}active {% endif %}sidebar-link">Testing for errors thrown in initialization</a>
+        </li>
+        <li>
+          <a href="/faq/lit-element-lifecycle.html" class="{% if permalink == 'faq/lit-element-lifecycle.html' %}active {% endif %}sidebar-link">LitElement lifecycle</a>
+        </li>
+      </ul>
    </section>
-    </li>
-</ul>
+  </li>
+</ul>
--- a/docs/_includes/partials/sidebar-guide.njk
+++ b/docs/_includes/partials/sidebar-guide.njk
@@ -1,87 +1,139 @@
 <ul class="sidebar-links">
-  <li><a href="/guide/" class="active sidebar-link">Introduction</a></li>
+  <li>
+    <a href="/guide/" class="active sidebar-link">Introduction</a>
+  </li>
  <li>
    <section class="sidebar-group collapsable depth-0">
-      <p class="sidebar-heading"><span>Guides &amp; Docs</span> <span class="arrow right"></span></p>
+      <p class="sidebar-heading">
+        <span>Guides &amp; Docs</span>
+        <span class="arrow right"></span></p>
      <ul class="sidebar-links sidebar-group-items" style="">
-        <li><a href="/developing/best-practices.html" class="{% if permalink == 'developing/best-practices.html' %}active {% endif %}sidebar-link">Best Practices</a></li>
-        <li><a href="/codelabs/" class="{% if permalink == 'codelabs/index.html' %}active {% endif %}sidebar-link">Codelabs</a></li>
-        <li><a href="/developing/code-examples.html" class="{% if permalink == 'developing/code-examples.html' %}active {% endif %}sidebar-link">Code examples</a></li>
-        <li><a href="/developing/lit-html.html" class="{% if permalink == 'developing/lit-html.html' %}active {% endif %}sidebar-link">lit-html</a></li>
-        <li><a href="/developing/types.html" class="{% if permalink == 'developing/types.html' %}active {% endif %}sidebar-link">Types</a></li>
-        <li><a href="/developing/ide.html" class="{% if permalink == 'developing/ide.html' %}active {% endif %}sidebar-link">IDE</a></li>
-        <li><a href="/guide/component-libraries.html" class="{% if permalink == 'guide/component-libraries.html' %}active {% endif %}sidebar-link">Web Component Libraries</a></li>
+        <li>
+          <a href="/developing/best-practices.html" class="{% if permalink == 'developing/best-practices.html' %}active {% endif %}sidebar-link">Best Practices</a>
+        </li>
+        <li>
+          <a href="/codelabs/" class="{% if permalink == 'codelabs/index.html' %}active {% endif %}sidebar-link">Codelabs</a>
+        </li>
+        <li>
+          <a href="/developing/code-examples.html" class="{% if permalink == 'developing/code-examples.html' %}active {% endif %}sidebar-link">Code examples</a>
+        </li>
+        <li>
+          <a href="/developing/lit-html.html" class="{% if permalink == 'developing/lit-html.html' %}active {% endif %}sidebar-link">lit-html</a>
+        </li>
+        <li>
+          <a href="/developing/types.html" class="{% if permalink == 'developing/types.html' %}active {% endif %}sidebar-link">Types</a>
+        </li>
+        <li>
+          <a href="/developing/ide.html" class="{% if permalink == 'developing/ide.html' %}active {% endif %}sidebar-link">IDE</a>
+        </li>
+        <li>
+          <a href="/guide/component-libraries.html" class="{% if permalink == 'guide/component-libraries.html' %}active {% endif %}sidebar-link">Web Component Libraries</a>
+        </li>
      </ul>
    </section>
  </li>
  <li>
    <section class="sidebar-group collapsable depth-0">
-      <p class="sidebar-heading"><span>Configs &amp; Recommendations</span> <span class="arrow right"></span></p>
+      <p class="sidebar-heading">
+        <span>Configs &amp; Recommendations</span>
+        <span class="arrow right"></span></p>
      <ul class="sidebar-links sidebar-group-items" style="">
        <li>
          <section class="sidebar-group is-sub-group depth-1">
-            <p class="sidebar-heading open"><span>Linting</span>
+            <p class="sidebar-heading open">
+              <span>Linting</span>
              <!---->
            </p>
            <ul class="sidebar-links sidebar-group-items">
-              <li><a href="/linting/" class="{% if permalink == 'linting/index.html' %}active {% endif %}sidebar-link">Getting started</a></li>
-              <li><a href="/linting/linting-eslint.html" class="{% if permalink == 'linting/linting-eslint.html' %}active {% endif %}sidebar-link">Linting ESLint</a></li>
-              <li><a href="/linting/linting-types.html" class="{% if permalink == 'linting/linting-types.html' %}active {% endif %}sidebar-link">Linting Types</a></li>
+              <li>
+                <a href="/linting/" class="{% if permalink == 'linting/index.html' %}active {% endif %}sidebar-link">Getting started</a>
+              </li>
+              <li>
+                <a href="/linting/linting-eslint.html" class="{% if permalink == 'linting/linting-eslint.html' %}active {% endif %}sidebar-link">Linting ESLint</a>
+              </li>
+              <li>
+                <a href="/linting/linting-types.html" class="{% if permalink == 'linting/linting-types.html' %}active {% endif %}sidebar-link">Linting Types</a>
+              </li>
            </ul>
          </section>
        </li>
        <li>
          <section class="sidebar-group is-sub-group depth-1">
-            <p class="sidebar-heading"><span>Developing</span>
+            <p class="sidebar-heading">
+              <span>Developing</span>
              <!---->
            </p>
            <ul class="sidebar-links sidebar-group-items">
-              <li><a href="/developing/" class="{% if permalink == 'developing/index.html' %}active {% endif %}sidebar-link">Developing</a></li>
+              <li>
+                <a href="/developing/" class="{% if permalink == 'developing/index.html' %}active {% endif %}sidebar-link">Developing</a>
+              </li>
            </ul>
          </section>
        </li>
        <li>
          <section class="sidebar-group is-sub-group depth-1">
-            <p class="sidebar-heading"><span>Testing</span>
+            <p class="sidebar-heading">
+              <span>Testing</span>
              <!---->
            </p>
            <ul class="sidebar-links sidebar-group-items">
-              <li><a href="/testing/" class="{% if permalink == 'testing/index.html' %}active {% endif %}sidebar-link">Getting started</a></li>
-              <li><a href="/testing/testing.html" class="{% if permalink == 'testing/testing.html' %}active {% endif %}sidebar-link">Testing</a></li>
-              <li><a href="/testing/testing-karma.html" class="{% if permalink == 'testing/testing-karma.html' %}active {% endif %}sidebar-link">Testing with Karma</a></li>
-              <li><a href="/testing/testing-karma-bs.html" class="{% if permalink == 'testing/testing-karma-bs.html' %}active {% endif %}sidebar-link">Testing via Browserstack</a></li>
-              <li><a href="/testing/testing-wallaby.html" class="{% if permalink == 'testing/testing-wallaby.html' %}active {% endif %}sidebar-link">Testing in IDE via Wallaby</a></li>
+              <li>
+                <a href="/testing/" class="{% if permalink == 'testing/index.html' %}active {% endif %}sidebar-link">Getting started</a>
+              </li>
+              <li>
+                <a href="/testing/testing.html" class="{% if permalink == 'testing/testing.html' %}active {% endif %}sidebar-link">Testing</a>
+              </li>
+              <li>
+                <a href="/testing/testing-karma.html" class="{% if permalink == 'testing/testing-karma.html' %}active {% endif %}sidebar-link">Testing with Karma</a>
+              </li>
+              <li>
+                <a href="/testing/testing-karma-bs.html" class="{% if permalink == 'testing/testing-karma-bs.html' %}active {% endif %}sidebar-link">Testing via Browserstack</a>
+              </li>
+              <li>
+                <a href="/testing/testing-wallaby.html" class="{% if permalink == 'testing/testing-wallaby.html' %}active {% endif %}sidebar-link">Testing in IDE via Wallaby</a>
+              </li>
            </ul>
          </section>
        </li>
        <li>
          <section class="sidebar-group is-sub-group depth-1">
-            <p class="sidebar-heading"><span>Building apps for production</span>
+            <p class="sidebar-heading">
+              <span>Building apps for production</span>
              <!---->
            </p>
            <ul class="sidebar-links sidebar-group-items">
-              <li><a href="/building/" class="{% if permalink == 'building/index.html' %}active {% endif %}sidebar-link">Getting started</a></li>
-              <li><a href="/building/building-rollup.html" class="{% if permalink == 'building/building-rollup.html' %}active {% endif %}sidebar-link">Rollup</a></li>
+              <li>
+                <a href="/building/" class="{% if permalink == 'building/index.html' %}active {% endif %}sidebar-link">Getting started</a>
+              </li>
+              <li>
+                <a href="/building/building-rollup.html" class="{% if permalink == 'building/building-rollup.html' %}active {% endif %}sidebar-link">Rollup</a>
+              </li>
            </ul>
          </section>
        </li>
        <li>
          <section class="sidebar-group is-sub-group depth-1">
-            <p class="sidebar-heading"><span>Deploying apps</span>
+            <p class="sidebar-heading">
+              <span>Deploying apps</span>
              <!---->
            </p>
            <ul class="sidebar-links sidebar-group-items">
-              <li><a href="/deploying/" class="{% if permalink == 'deploying/index.html' %}active {% endif %}sidebar-link">Getting started</a></li>
+              <li>
+                <a href="/deploying/" class="{% if permalink == 'deploying/index.html' %}active {% endif %}sidebar-link">Getting started</a>
+              </li>
            </ul>
          </section>
        </li>
        <li>
          <section class="sidebar-group is-sub-group depth-1">
-            <p class="sidebar-heading"><span>Demoing</span>
+            <p class="sidebar-heading">
+              <span>Demoing</span>
              <!---->
            </p>
            <ul class="sidebar-links sidebar-group-items">
-              <li><a href="/demoing/" class="{% if permalink == 'demoing/index.html' %}active {% endif %}sidebar-link">Getting started</a></li>
+              <li>
+                <a href="/demoing/" class="{% if permalink == 'demoing/index.html' %}active {% endif %}sidebar-link">Getting started</a>
+              </li>
            </ul>
          </section>
        </li>
@@ -90,57 +142,89 @@
  </li>
  <li>
    <section class="sidebar-group collapsable depth-0">
-      <p class="sidebar-heading"><span>Tools &amp; Libraries</span> <span class="arrow right"></span></p>
+      <p class="sidebar-heading">
+        <span>Tools &amp; Libraries</span>
+        <span class="arrow right"></span></p>
      <ul class="sidebar-links sidebar-group-items" style="">
        <li>
          <section class="sidebar-group is-sub-group depth-1">
-            <p class="sidebar-heading open"><span>Developing</span>
+            <p class="sidebar-heading open">
+              <span>Developing</span>
              <!---->
            </p>
            <ul class="sidebar-links sidebar-group-items">
-              <li><a href="/developing/es-dev-server.html" class="{% if permalink == 'developing/es-dev-server.html' %}active {% endif %}sidebar-link">ES dev server</a></li>
-              <li><a href="/init/" class="{% if permalink == 'init/index.html' %}active {% endif %}sidebar-link">Generators</a></li>
-              <li><a href="/developing/lit-helpers.html" class="{% if permalink == 'developing/lit-helpers.html' %}active {% endif %}sidebar-link">Lit Helpers</a></li>
-              <li><a href="/guide/dedupe-mixin.html" class="{% if permalink == 'guide/dedupe-mixin.html' %}active {% endif %}sidebar-link">Dedupe Mixin</a></li>
-              <li><a href="/scoped-elements/" class="{% if permalink == 'scoped-elements/index.html' %}active {% endif %}sidebar-link">Scoped Elements</a></li>
+              <li>
+                <a href="/developing/es-dev-server.html" class="{% if permalink == 'developing/es-dev-server.html' %}active {% endif %}sidebar-link">ES dev server</a>
+              </li>
+              <li>
+                <a href="/init/" class="{% if permalink == 'init/index.html' %}active {% endif %}sidebar-link">Generators</a>
+              </li>
+              <li>
+                <a href="/developing/lit-helpers.html" class="{% if permalink == 'developing/lit-helpers.html' %}active {% endif %}sidebar-link">Lit Helpers</a>
+              </li>
+              <li>
+                <a href="/guide/dedupe-mixin.html" class="{% if permalink == 'guide/dedupe-mixin.html' %}active {% endif %}sidebar-link">Dedupe Mixin</a>
+              </li>
+              <li>
+                <a href="/scoped-elements/" class="{% if permalink == 'scoped-elements/index.html' %}active {% endif %}sidebar-link">Scoped Elements</a>
+              </li>
            </ul>
          </section>
        </li>
        <li>
          <section class="sidebar-group is-sub-group depth-1">
-            <p class="sidebar-heading"><span>Testing</span>
+            <p class="sidebar-heading">
+              <span>Testing</span>
              <!---->
            </p>
            <ul class="sidebar-links sidebar-group-items">
-              <li><a href="/testing/testing-helpers.html" class="{% if permalink == 'testing/testing-helpers.html' %}active {% endif %}sidebar-link">Testing Helpers</a></li>
-              <li><a href="/testing/testing-chai-a11y-axe.html" class="{% if permalink == 'testing/testing-chai-a11y-axe.html' %}active {% endif %}sidebar-link">Chai A11y aXe</a></li>
-              <li><a href="/testing/testing-sinon.html" class="{% if permalink == 'testing/testing-sinon.html' %}active {% endif %}sidebar-link">Testing with sinon</a></li>
-              <li><a href="/testing/semantic-dom-diff.html" class="{% if permalink == 'testing/semantic-dom-diff.html' %}active {% endif %}sidebar-link">Semantic Dom Diff</a></li>
-              <li><a href="/testing/karma-esm.html" class="{% if permalink == 'testing/karma-esm.html' %}active {% endif %}sidebar-link">karma-esm</a></li>
+              <li>
+                <a href="/testing/testing-helpers.html" class="{% if permalink == 'testing/testing-helpers.html' %}active {% endif %}sidebar-link">Testing Helpers</a>
+              </li>
+              <li>
+                <a href="/testing/testing-chai-a11y-axe.html" class="{% if permalink == 'testing/testing-chai-a11y-axe.html' %}active {% endif %}sidebar-link">Chai A11y aXe</a>
+              </li>
+              <li>
+                <a href="/testing/testing-sinon.html" class="{% if permalink == 'testing/testing-sinon.html' %}active {% endif %}sidebar-link">Testing with sinon</a>
+              </li>
+              <li>
+                <a href="/testing/semantic-dom-diff.html" class="{% if permalink == 'testing/semantic-dom-diff.html' %}active {% endif %}sidebar-link">Semantic Dom Diff</a>
+              </li>
+              <li>
+                <a href="/testing/karma-esm.html" class="{% if permalink == 'testing/karma-esm.html' %}active {% endif %}sidebar-link">karma-esm</a>
+              </li>
            </ul>
          </section>
        </li>
        <li>
          <section class="sidebar-group is-sub-group depth-1">
-            <p class="sidebar-heading"><span>Building</span>
+            <p class="sidebar-heading">
+              <span>Building</span>
              <!---->
            </p>
            <ul class="sidebar-links sidebar-group-items">
-              <li><a href="/building/rollup-plugin-html.html" class="{% if permalink == 'building/rollup-plugin-html.html' %}active {% endif %}sidebar-link">Rollup Plugin HTML</a></li>
-              <li><a href="/building/rollup-plugin-polyfills-loader.html" class="{% if permalink == 'building/rollup-plugin-polyfills-loader.html' %}active {% endif %}sidebar-link">Rollup Plugin Polyfills
-                  Loader</a></li>
-              <li><a href="/building/polyfills-loader.html" class="{% if permalink == 'building/polyfills-loader.html' %}active {% endif %}sidebar-link">Polyfills loader</a></li>
+              <li>
+                <a href="/building/rollup-plugin-html.html" class="{% if permalink == 'building/rollup-plugin-html.html' %}active {% endif %}sidebar-link">Rollup Plugin HTML</a>
+              </li>
+              <li>
+                <a href="/building/rollup-plugin-polyfills-loader.html" class="{% if permalink == 'building/rollup-plugin-polyfills-loader.html' %}active {% endif %}sidebar-link">Rollup Plugin Polyfills Loader</a>
+              </li>
+              <li>
+                <a href="/building/polyfills-loader.html" class="{% if permalink == 'building/polyfills-loader.html' %}active {% endif %}sidebar-link">Polyfills loader</a>
+              </li>
            </ul>
          </section>
        </li>
        <li>
          <section class="sidebar-group is-sub-group depth-1">
-            <p class="sidebar-heading"><span>Demoing</span>
+            <p class="sidebar-heading">
+              <span>Demoing</span>
              <!---->
            </p>
            <ul class="sidebar-links sidebar-group-items">
-              <li><a href="/demoing/storybook-addon-markdown-docs.html" class="{% if permalink == 'demoing/storybook-addon-markdown-docs.html' %}active {% endif %}sidebar-link">Storybook Addon: Markdown
-                  Docs</a></li>
+              <li>
+                <a href="/demoing/storybook-addon-markdown-docs.html" class="{% if permalink == 'demoing/storybook-addon-markdown-docs.html' %}active {% endif %}sidebar-link">Storybook Addon: Markdown Docs</a>
+              </li>
            </ul>
          </section>
        </li>
@@ -149,30 +233,56 @@
  </li>
  <li>
    <section class="sidebar-group collapsable depth-0">
-      <p class="sidebar-heading"><span>Experiments</span> <span class="arrow right"></span></p>
+      <p class="sidebar-heading">
+        <span>Experiments</span>
+        <span class="arrow right"></span></p>
      <ul class="sidebar-links sidebar-group-items" style="">
-        <li><a href="/mdjs/" class="{% if permalink == 'mdjs/index.html' %}active {% endif %}sidebar-link">Markdown JavaScript (mdjs) Format</a></li>
+        <li>
+          <a href="/mdjs/" class="{% if permalink == 'mdjs/index.html' %}active {% endif %}sidebar-link">Markdown JavaScript (mdjs) Format</a>
+        </li>
      </ul>
    </section>
  </li>
 </ul>
 <script>
-const groups = [...document.querySelectorAll('.sidebar-group:not(.is-sub-group)')];
-groups.map(group => {
-  group.querySelector('.sidebar-heading').addEventListener('click', e => {
-    e.currentTarget.classList.toggle('open');
-    const arrow = e.currentTarget.querySelector('.arrow');
-    arrow.classList.toggle('down');
-    arrow.classList.toggle('right');
-    e.currentTarget.nextElementSibling.classList.toggle('hidden');
-  });
-  const active = group.querySelector('.active');
-  if (active) {
-    const arrow = group.querySelector('.arrow');
-    arrow.classList.toggle('down');
-    arrow.classList.toggle('right');
-  } else {
-    group.querySelector('.sidebar-group-items').classList.toggle('hidden');
-  }
-})
-</script>
+  const groups = [...document.querySelectorAll('.sidebar-group:not(.is-sub-group)')];
+  groups.map(group => {
+    group
+      .querySelector('.sidebar-heading')
+      .addEventListener('click', e => {
+        e
+          .currentTarget
+          .classList
+          .toggle('open');
+        const arrow = e
+          .currentTarget
+          .querySelector('.arrow');
+        arrow
+          .classList
+          .toggle('down');
+        arrow
+          .classList
+          .toggle('right');
+        e
+          .currentTarget
+          .nextElementSibling
+          .classList
+          .toggle('hidden');
+      });
+    const active = group.querySelector('.active');
+    if (active) {
+      const arrow = group.querySelector('.arrow');
+      arrow
+        .classList
+        .toggle('down');
+      arrow
+        .classList
+        .toggle('right');
+    } else {
+      group
+        .querySelector('.sidebar-group-items')
+        .classList
+        .toggle('hidden');
+    }
+  })
+</script>
--- a/docs/_includes/partials/sidebar.njk
+++ b/docs/_includes/partials/sidebar.njk
@@ -1,37 +1,41 @@
 <div class="sidebar-mask"></div>
 <aside class="sidebar">
-<nav class="nav-links">
-    <div class="nav-item"><a href="/" class="nav-link">
+  <nav class="nav-links">
+    <div class="nav-item">
+      <a href="/" class="nav-link">
        Home
-    </a></div>
-    <div class="nav-item"><a href="/guide/index.html" class="nav-link">
+      </a>
+    </div>
+    <div class="nav-item">
+      <a href="/guide/index.html" class="nav-link">
        Guide
-    </a></div>
-    <div class="nav-item"><a href="/faq/index.html" class="nav-link active">
+      </a>
+    </div>
+    <div class="nav-item">
+      <a href="/faq/index.html" class="nav-link active">
        FAQ
-    </a></div>
-    <div class="nav-item"><a href="/about/index.html" class="nav-link">
+      </a>
+    </div>
+    <div class="nav-item">
+      <a href="/about/index.html" class="nav-link">
        About
-    </a></div> <a href="https://github.com/open-wc/open-wc" target="_blank" rel="noopener noreferrer"
-    class="repo-link">
-    GitHub
-    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15"
-        height="15" class="icon outbound">
-        <path fill="currentColor"
-        d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z">
-        </path>
-        <polygon fill="currentColor"
-        points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9">
-        </polygon>
-    </svg></a>
-</nav>
-{% if section == 'about' %}
-  {% include 'partials/sidebar-about.njk' %}
-{% endif %}
-{% if section == 'faq' %}
-  {% include 'partials/sidebar-faq.njk' %}
-{% endif %}
-{% if section == 'guides' %}
-  {% include 'partials/sidebar-guide.njk' %}
-{% endif %}
-</aside>
+      </a>
+    </div>
+    <a href="https://github.com/open-wc/open-wc" target="_blank" rel="noopener noreferrer" class="repo-link">
+      GitHub
+      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound">
+        <path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path>
+        <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon>
+      </svg>
+    </a>
+  </nav>
+  {% if section == 'about' %}
+    {% include 'partials/sidebar-about.njk' %}
+  {% endif %}
+  {% if section == 'faq' %}
+    {% include 'partials/sidebar-faq.njk' %}
+  {% endif %}
+  {% if section == 'guides' %}
+    {% include 'partials/sidebar-guide.njk' %}
+  {% endif %}
+</aside>
--- a/docs/_plugin-mdjs/index.js
+++ b/docs/_plugin-mdjs/index.js
@@ -0,0 +1,46 @@
+/* eslint-disable import/no-extraneous-dependencies */
+const { mdjsProcess, mdjsProcessPlugins } = require('@mdjs/core');
+
+const plugins = mdjsProcessPlugins.map(pluginObj => {
+  if (pluginObj.name === 'htmlHeading') {
+    return {
+      ...pluginObj,
+      options: {
+        properties: {
+          className: ['header-anchor'],
+        },
+        content: [{ type: 'text', value: '#' }],
+      },
+    };
+  }
+  return pluginObj;
+});
+
+function eleventyUnified() {
+  return {
+    set: () => {},
+    render: async str => {
+      const result = await mdjsProcess(str, {
+        plugins,
+      });
+      return result;
+    },
+  };
+}
+
+const defaultEleventyUnifiedOptions = {
+  plugins: [],
+};
+
+const _eleventy = {
+  initArguments: {},
+  configFunction: (eleventyConfig, pluginOptions = {}) => {
+    const options = {
+      ...defaultEleventyUnifiedOptions,
+      ...pluginOptions,
+    };
+    eleventyConfig.setLibrary('md', eleventyUnified(options));
+  },
+};
+
+module.exports = _eleventy;
--- a/docs/about/rationales.md
+++ b/docs/about/rationales.md
@@ -28,7 +28,7 @@ You are encouraged to freely switch between them depending on what you are worki
 The ideal development environment uses no tools, just an up-to-date browser and a simple HTTP server.

 <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>Unfortunately we are not fully there yet, because of the <a href="#bare-specifiers">bare modules exception</a> you will still need to have a server that at least supports them.
-We recommend our <a href="/developing/es-dev-server.html" class="">ES Dev Server</a> as it does nothing more/nothing less.</p></div>
+We recommend our <a href="../developing/es-dev-server.html" class="">ES Dev Server</a> as it does nothing more/nothing less.</p></div>

 When would you choose this workflow:

--- a/docs/codelabs/README.md
+++ b/docs/codelabs/README.md
@@ -14,7 +14,7 @@ Codelabs are step by step tutorials. They teach a specific topic through practic

 A quick primer on the basics of web component. Great if you're just getting started, or just want to learn a bit about what web components are.

-<a href="/codelabs/basics/web-components.html?index=/codelabs/" target="_blank">
+<a href="./basics/web-components.html?index=/codelabs/" target="_blank">
  > Go to the codelab
 </a>

@@ -22,7 +22,7 @@ A quick primer on the basics of web component. Great if you're just getting star

 A kickstart to building web components with lit-html and lit-element. Goes through the process of building a simple application, explaining in detail each step along the way.

-<a href="/codelabs/basics/lit-html.html?index=/codelabs/" target="_blank">
+<a href="./basics/lit-html.html?index=/codelabs/" target="_blank">
  > Go to the codelab
 </a>

@@ -30,6 +30,6 @@ A kickstart to building web components with lit-html and lit-element. Goes throu

 A further deep dive into lit-html and lit-element. Handles data fetching, loading states and complex templating.

-<a href="/codelabs/intermediate/lit-html.html?index=/codelabs/" target="_blank">
+<a href="./intermediate/lit-html.html?index=/codelabs/" target="_blank">
  > Go to the codelab
 </a>
--- a/docs/manifest.json
+++ b/docs/manifest.json
@@ -1,23 +1,23 @@
 {
-    "name": "OpenWC",
-    "short_name": "open-wc",
-    "theme_color": "#0077ff",
-    "background_color": "#0077ff",
-    "display": "standalone",
-    "orientation": "portrait",
-    "Scope": "/",
-    "start_url": "/",
-    "icons": [
-      {
-        "src": "/icons/icon-128x128.png",
-        "sizes": "128x128",
-        "type": "image/png"
-      },
-      {
-        "src": "/icons/icon-512x512.png",
-        "sizes": "512x512",
-        "type": "image/png"
-      }
-    ],
-    "splash_pages": null
-  }
+  "name": "OpenWC",
+  "short_name": "open-wc",
+  "theme_color": "#0077ff",
+  "background_color": "#0077ff",
+  "display": "standalone",
+  "orientation": "portrait",
+  "Scope": "/",
+  "start_url": "/",
+  "icons": [
+    {
+      "src": "./icons/icon-128x128.png",
+      "sizes": "128x128",
+      "type": "image/png"
+    },
+    {
+      "src": "./icons/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "splash_pages": null
+}
--- a/docs/rollup.config.js
+++ b/docs/rollup.config.js
@@ -0,0 +1,34 @@
+const path = require('path');
+const copy = require('rollup-plugin-copy');
+const { createMpaConfig } = require('./_building-rollup/createMpaConfig.js');
+
+module.exports = async () => {
+  const mpaConfig = await createMpaConfig({
+    outputDir: '_site',
+    legacyBuild: true,
+    inputGlob: '_site-dev/**/*.html',
+    rootPath: path.resolve('_site-dev'),
+
+    // development mode creates a non-minified build for debugging or development
+    developmentMode: false, // process.env.ROLLUP_WATCH === 'true',
+
+    // set to true to inject the service worker registration into your index.html
+    injectServiceWorker: false,
+    workbox: false,
+  });
+
+  const dest = '_site/';
+  mpaConfig.plugins.push(
+    copy({
+      targets: [
+        { src: '_site-dev/styles.css', dest },
+        { src: '_site-dev/demoing/demo/custom-elements.json', dest },
+        { src: '_site-dev/manifest.json', dest },
+        { src: '_site-dev/**/*.{png,gif}', dest },
+      ],
+      flatten: false,
+    }),
+  );
+
+  return mpaConfig;
+};
--- a/docs/server.config.js
+++ b/docs/server.config.js
@@ -0,0 +1,16 @@
+module.exports = {
+  nodeResolve: true,
+  open: './_site-dev',
+  responseTransformers: [
+    function rewriteBasePath({ contentType, body }) {
+      if (contentType.includes('text/html')) {
+        return {
+          body: body
+            .replace(/href="\//g, 'href="/_site-dev/')
+            .replace(/src="\//g, 'src="/_site-dev/'),
+        };
+      }
+      return null;
+    },
+  ],
+};
--- a/docs/transforms/html-min-transform.js
+++ b/docs/transforms/html-min-transform.js
@@ -1,14 +0,0 @@
-const htmlmin = require('html-minifier');
-
-module.exports = function htmlMinTransform(value, outputPath) {
-  if (outputPath.indexOf('.html') > -1) {
-    const minified = htmlmin.minify(value, {
-      useShortDoctype: true,
-      removeComments: true,
-      collapseWhitespace: true,
-      minifyCSS: true,
-    });
-    return minified;
-  }
-  return value;
-};
--- a/docs/unified/index.js
+++ b/docs/unified/index.js
@@ -1,55 +0,0 @@
-const unified = require('unified');
-const markdown = require('remark-parse');
-const remark2rehype = require('remark-rehype');
-const rehypePrism = require('rehype-prism-template');
-const raw = require('rehype-raw');
-const htmlStringify = require('rehype-stringify');
-const htmlSlug = require('rehype-slug');
-const htmlHeading = require('rehype-autolink-headings');
-const { mdjsParse } = require('@mdjs/core');
-
-function eleventyUnified(options) {
-  const processor = unified()
-    .use(markdown)
-    .use(mdjsParse)
-    .use(remark2rehype, { allowDangerousHTML: true })
-    .use(rehypePrism)
-    .use(raw)
-    .use(htmlSlug)
-    .use(htmlHeading, {
-      properties: {
-        className: ['header-anchor'],
-      },
-      content: [{ type: 'text', value: '#' }],
-    })
-    .use(htmlStringify);
-
-  for (let i = 0; i < options.plugins.length; i += 1) {
-    processor.use(options.plugins[i]);
-  }
-
-  return {
-    set: () => {},
-    render: async str => {
-      const result = await processor.process(str);
-      return result;
-    },
-  };
-}
-
-const defaultEleventyUnifiedOptions = {
-  plugins: [],
-};
-
-const _eleventy = {
-  initArguments: {},
-  configFunction: (eleventyConfig, pluginOptions = {}) => {
-    const options = {
-      ...defaultEleventyUnifiedOptions,
-      ...pluginOptions,
-    };
-    eleventyConfig.setLibrary('md', eleventyUnified(options));
-  },
-};
-
-module.exports = _eleventy;
--- a/netlify.toml
+++ b/netlify.toml
@@ -1,7 +1,7 @@
 [[plugins]]
 package = "netlify-plugin-checklinks"

-    [plugins.inputs]
-    pretty = true
+[plugins.inputs]
+pretty = true

-    skipPatterns = ['open-wc-org.netlify.app']
+skipPatterns = ['open-wc-org.netlify.app']
--- a/package.json
+++ b/package.json
@@ -6,10 +6,12 @@
    "build": "lerna run build",
    "build:types": "tsc -p tsconfig.build.types.json",
    "codelabs:build": "node ./packages/codelabs/build-codelabs.js",
-    "docs:build": "cd docs && eleventy",
-    "docs:serve": "es-dev-server --root-dir _site",
+    "docs:build": "npm run docs:build-dev && npm run docs:build-prod",
+    "docs:build-dev": "rimraf _site-dev && cd docs && eleventy",
+    "docs:build-prod": "rimraf _site && rollup -c docs/rollup.config.js",
+    "docs:serve": "node packages/es-dev-server/dist/cli.js -c docs/server.config.js",
    "docs:start": "run-p docs:watch docs:serve",
-    "docs:watch": "cd docs && eleventy --watch",
+    "docs:watch": "rimraf _site-dev && cd docs && eleventy --watch",
    "format": "npm run format:eslint && npm run format:prettier",
    "format:eslint": "eslint --ext .js,.html . --fix",
    "format:prettier": "prettier \"**/*.{js,md}\" \"**/package.json\" --write",
@@ -33,28 +35,13 @@
    "test:update-snapshots": "lerna run test:update-snapshots",
    "update-dependency": "node scripts/update-dependency.js"
  },
-  "dependencies": {
-    "@github/clipboard-copy-element": "^1.1.1",
-    "@mdjs/core": "^0.1.9",
-    "html-minifier": "^4.0.0",
-    "markdown-it-anchor": "^5.2.7",
-    "rehype-autolink-headings": "^2.0.5",
-    "rehype-prism-template": "^0.4.1",
-    "rehype-raw": "^4.0.1",
-    "rehype-slug": "^2.0.3",
-    "rehype-stringify": "^6.0.1",
-    "remark": "^11.0.2",
-    "remark-html": "^10.0.0",
-    "remark-parse": "^7.0.2",
-    "remark-rehype": "^5.0.0",
-    "unified": "^8.4.2"
-  },
  "devDependencies": {
    "@11ty/eleventy": "^0.10.0",
    "@11ty/eleventy-plugin-syntaxhighlight": "^3.0.1",
    "@commitlint/cli": "7.2.1",
    "@commitlint/config-conventional": "7.1.2",
    "@commitlint/config-lerna-scopes": "7.2.1",
+    "@github/clipboard-copy-element": "^1.1.1",
    "@open-wc/testing-karma": "file:./packages/testing-karma",
    "@open-wc/testing-karma-bs": "file:./packages/testing-karma-bs",
    "@types/chai": "^4.2.11",
@@ -62,7 +49,6 @@
    "babel-eslint": "^10.0.3",
    "chai": "^4.2.0",
    "core-js": "2.6.10",
-    "es-dev-server": "^1.46.5",
    "eslint": "^6.7.2",
    "eslint-config-airbnb-base": "^14.0.0",
    "eslint-plugin-html": "^6.0.0",
@@ -82,6 +68,7 @@
    "puppeteer": "^2.1.1",
    "rimraf": "^3.0.2",
    "rollup": "^2.7.2",
+    "rollup-plugin-copy": "^3.3.0",
    "sinon": "^7.4.1",
    "typescript": "^3.8.3",
    "webpack-merge": "^4.1.5"
--- a/packages/es-dev-server/README.md
+++ b/packages/es-dev-server/README.md
@@ -1,16 +1,13 @@
-# es dev server
-
 ---
-
 permalink: 'developing/es-dev-server.html'
 title: ES dev server
 section: guides
 tags:
-
- guides
-
+  - guides
 ---

+# es dev server
+
 A web server for development without bundling.

 ```bash
--- a/packages/karma-esm/README.md
+++ b/packages/karma-esm/README.md
@@ -88,12 +88,6 @@ It transforms: `import foo from 'bar'` to: `import foo from './node_modules/bar/

 See the [node-resolve documentation of es-dev-server](https://open-wc.org/developing/es-dev-server.html#node-resolve) for more information.

-### dedupe
-
-Deduplicate packages, ensuring only one version of a package is resolved.
-
-See the [dedupe documentation of es-dev-server](https://open-wc.org/developing/es-dev-server.html#dedupe) for more information.
-
 ### coverage

 Due to a bug in karma, the test coverage reporter causes browser logs to appear twice which can be annoying
--- a/packages/testing-karma/README.md
+++ b/packages/testing-karma/README.md
@@ -240,8 +240,3 @@ module.exports = config => {
  return config;
 };
 ```
-
-```js script
-const bar = 'This was logged from MDJS...';
-console.log(bar);
-```
--- a/yarn.lock
+++ b/yarn.lock
@@ -2148,28 +2148,6 @@
    mkdirp "^0.5.1"
    rimraf "^2.5.2"

-"@mdjs/core@^0.1.9":
-  version "0.1.9"
-  resolved "https://registry.yarnpkg.com/@mdjs/core/-/core-0.1.9.tgz#4855288e3615541778a96838f6637efba3da01f4"
-  integrity sha512-e+lA4ZgnfZg/AoEpFqfrZWHkjrExPl0ZmlHL+4gqxcX3cHIWeM0x6J3sha2NQdGHL/yBYff/qJ5qAiysnHvs7w==
-  dependencies:
-    "@mdjs/mdjs-preview" "^0.0.1"
-    "@mdjs/mdjs-story" "^0.0.1"
-    "@types/unist" "^2.0.3"
-    "@types/vfile" "^4.0.0"
-    es-module-lexer "^0.3.13"
-    github-markdown-css "^3.0.1"
-    rehype-autolink-headings "^2.0.5"
-    rehype-raw "^4.0.1"
-    rehype-slug "^2.0.3"
-    rehype-stringify "^6.0.1"
-    remark "^11.0.2"
-    remark-parse "^7.0.2"
-    remark-rehype "^5.0.0"
-    unified "^8.4.2"
-    unist-util-remove "^1.0.3"
-    unist-util-visit "^2.0.1"
-
 "@mdjs/mdjs-preview@^0.0.1":
  version "0.0.1"
  resolved "https://registry.yarnpkg.com/@mdjs/mdjs-preview/-/mdjs-preview-0.0.1.tgz#a478ed4f0223302b4c710bb9193536342558a044"
@@ -5740,7 +5718,7 @@ browserslist@^3.2.6:
    caniuse-lite "^1.0.30000844"
    electron-to-chromium "^1.3.47"

-browserslist@^4.0.0, browserslist@^4.11.1, browserslist@^4.12.0, browserslist@^4.8.5, browserslist@^4.9.1:
+browserslist@^4.0.0, browserslist@^4.11.1, browserslist@^4.12.0, browserslist@^4.8.3, browserslist@^4.9.1:
  version "4.12.0"
  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.12.0.tgz#06c6d5715a1ede6c51fc39ff67fd647f740b656d"
  integrity sha512-UH2GkcEDSI0k/lRkuDSzFl9ZZ87skSy9w2XAn1MsZnL+4c4rqbBd3e82UWHbYDpztABrPBhZsTEeuxVfHppqDg==
@@ -6064,12 +6042,17 @@ caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000844, caniuse-lite@^1.0.30000989:
  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001033.tgz#60c328fb56860de60f9a2cb419c31fb80587cba0"
  integrity sha512-8Ibzxee6ibc5q88cM1usPsMpJOG5CTq0s/dKOmlekPbDGKt+UrnOOTPSjQz3kVo6yL7N4SB5xd+FGLHQmbzh6A==

+caniuse-lite@^1.0.30001020:
+  version "1.0.30001053"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001053.tgz#b7ae027567ce2665b965b0437e4512b296ccd20d"
+  integrity sha512-HtV4wwIZl6GA4Oznse8aR274XUOYGZnQLcf/P8vHgmlfqSNelwD+id8CyHOceqLqt9yfKmo7DUZTh1EuS9pukg==
+
 caniuse-lite@^1.0.30001033:
  version "1.0.30001035"
  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001035.tgz#2bb53b8aa4716b2ed08e088d4dc816a5fe089a1e"
  integrity sha512-C1ZxgkuA4/bUEdMbU5WrGY4+UhMFFiXrgNAfxiMIqWgFTWfv/xsZCS2xEHT2LMq7xAZfuAnu6mcqyDl0ZR6wLQ==

-caniuse-lite@^1.0.30001039, caniuse-lite@^1.0.30001043:
+caniuse-lite@^1.0.30001043:
  version "1.0.30001052"
  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001052.tgz#33a5ddd13783cfe2c8a6a846ab983387d4edff75"
  integrity sha512-b2/oWZwkpWzEB1+Azr2Z4FcpdDkH+9R4dn+bkwk/6eH9mRSrnZjhA6v32+zsV+TSqC0pp2Rxush2yUVTJ0dJTQ==
@@ -6480,6 +6463,11 @@ color-name@~1.1.4:
  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==

+colorette@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.1.0.tgz#1f943e5a357fac10b4e0f5aaef3b14cdc1af6ec7"
+  integrity sha512-6S062WDQUXi6hOfkO/sBPVwE5ASXY4G2+b4atvhJfSsuUUhIaUKlkjLe9692Ipyt5/a+IPF5aVTu3V5gvXq5cg==
+
 colors@1.0.3:
  version "1.0.3"
  resolved "https://registry.yarnpkg.com/colors/-/colors-1.0.3.tgz#0433f44d809680fdeb60ed260f1b0c262e82a40b"
@@ -9353,6 +9341,20 @@ globalthis@^1.0.0:
  dependencies:
    define-properties "^1.1.3"

+globby@10.0.1:
+  version "10.0.1"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-10.0.1.tgz#4782c34cb75dd683351335c5829cc3420e606b22"
+  integrity sha512-sSs4inE1FB2YQiymcmTv6NWENryABjUNPeWhOvmn4SjtKybglsyPZxFB3U1/+L1bYi0rNZDqCLlHyLYDl1Pq5A==
+  dependencies:
+    "@types/glob" "^7.1.1"
+    array-union "^2.1.0"
+    dir-glob "^3.0.1"
+    fast-glob "^3.0.3"
+    glob "^7.1.3"
+    ignore "^5.1.1"
+    merge2 "^1.2.3"
+    slash "^3.0.0"
+
 globby@8.0.2:
  version "8.0.2"
  resolved "https://registry.yarnpkg.com/globby/-/globby-8.0.2.tgz#5697619ccd95c5275dbb2d6faa42087c1a941d8d"
@@ -11645,13 +11647,20 @@ listr@^0.14.3:
    p-map "^2.0.0"
    rxjs "^6.3.3"

-lit-element@^2.0.1, lit-element@^2.2.1, lit-element@^2.3.1:
+lit-element@^2.0.1, lit-element@^2.3.1:
  version "2.3.1"
  resolved "https://registry.yarnpkg.com/lit-element/-/lit-element-2.3.1.tgz#73343b978fa1e73d60526c6bb6ad60f53a16c343"
  integrity sha512-tOcUAmeO3BzwiQ7FGWdsshNvC0HVHcTFYw/TLIImmKwXYoV0E7zCBASa8IJ7DiP4cen/Yoj454gS0qqTnIGsFA==
  dependencies:
    lit-html "^1.1.1"

+lit-element@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/lit-element/-/lit-element-2.2.1.tgz#79c94d8cfdc2d73b245656e37991bd1e4811d96f"
+  integrity sha512-ipDcgQ1EpW6Va2Z6dWm79jYdimVepO5GL0eYkZrFvdr0OD/1N260Q9DH+K5HXHFrRoC7dOg+ZpED2XE0TgGdXw==
+  dependencies:
+    lit-html "^1.0.0"
+
 lit-html@^1.0.0, lit-html@^1.1.1:
  version "1.2.1"
  resolved "https://registry.yarnpkg.com/lit-html/-/lit-html-1.2.1.tgz#1fb933dc1e2ddc095f60b8086277d4fcd9d62cc8"
@@ -11722,7 +11731,7 @@ loader-utils@2.0.0, loader-utils@^2.0.0:
    emojis-list "^3.0.0"
    json5 "^2.1.2"

-loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3, loader-utils@^1.4.0:
+loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3:
  version "1.4.0"
  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613"
  integrity sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==
@@ -12099,11 +12108,6 @@ markdown-escapes@^1.0.0:
  resolved "https://registry.yarnpkg.com/markdown-escapes/-/markdown-escapes-1.0.4.tgz#c95415ef451499d7602b91095f3c8e8975f78535"
  integrity sha512-8z4efJYk43E0upd0NbVXwgSTQs6cT3T06etieCMEg7dRbzCbxUCK/GHlX8mhHRDcp+OLlHkPKsvqQTCvsRl2cg==

-markdown-it-anchor@^5.2.7:
-  version "5.2.7"
-  resolved "https://registry.yarnpkg.com/markdown-it-anchor/-/markdown-it-anchor-5.2.7.tgz#ec740f6bd03258a582cd0c65b9644b9f9852e5a3"
-  integrity sha512-REFmIaSS6szaD1bye80DMbp7ePwsPNvLTR5HunsUcZ0SG0rWJQ+Pz24R4UlTKtjKBPhxo0v0tOBDYjZQQknW8Q==
-
 markdown-it@^8.4.2:
  version "8.4.2"
  resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-8.4.2.tgz#386f98998dc15a37722aa7722084f4020bdd9b54"
@@ -12465,6 +12469,11 @@ minimist-options@^3.0.1:
    arrify "^1.0.1"
    is-plain-obj "^1.1.0"

+minimist@0.0.8:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
+  integrity sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=
+
 minimist@1.2.0:
  version "1.2.0"
  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
@@ -12578,7 +12587,7 @@ mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.1:
  dependencies:
    minimist "0.0.8"

-mkdirp@^0.5.3, mkdirp@^0.5.4:
+mkdirp@^0.5.4:
  version "0.5.5"
  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.5.tgz#d91cefd62d1436ca0f41620e251288d420099def"
  integrity sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==
@@ -13789,7 +13798,7 @@ performance-now@^2.1.0:
  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
  integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=

-picomatch@^2.0.4, picomatch@^2.0.5, picomatch@^2.2.1, picomatch@^2.2.2:
+picomatch@^2.0.4, picomatch@^2.0.5, picomatch@^2.0.7, picomatch@^2.2.1, picomatch@^2.2.2:
  version "2.2.2"
  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
  integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==
@@ -13976,7 +13985,7 @@ postcss-value-parser@^4.0.0:
  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.0.3.tgz#651ff4593aa9eda8d5d0d66593a2417aeaeb325d"
  integrity sha512-N7h4pG+Nnu5BEIzyeaaIYWs0LI5XC40OrRh5L60z0QjFsqGWcHcbkBvpe1WYpcIS9yQ8sOi/vIPt1ejQCrMVrg==

-postcss-value-parser@^4.0.3:
+postcss-value-parser@^4.0.2, postcss-value-parser@^4.0.3:
  version "4.1.0"
  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
  integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==
@@ -14895,12 +14904,12 @@ readdirp@^2.2.1:
    micromatch "^3.1.10"
    readable-stream "^2.0.2"

-readdirp@~3.4.0:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.4.0.tgz#9fdccdf9e9155805449221ac645e8303ab5b9ada"
-  integrity sha512-0xe001vZBnJEK+uKcj8qOhyAKPzIT+gStxWr3LCB0DwcXR5NZJ3IaC+yGnHCYzB/S7ov3m3EEbZI2zeNvX+hGQ==
+readdirp@~3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.3.0.tgz#984458d13a1e42e2e9f5841b129e162f369aff17"
+  integrity sha512-zz0pAkSPOXXm1viEwygWIPSPkcBYjW1xU5j/JBh5t9bGCJwa6f9+BJa6VaB2g+b55yVrmXzqkyLf4xaWYM0IkQ==
  dependencies:
-    picomatch "^2.2.1"
+    picomatch "^2.0.7"

 realpath-native@^1.1.0:
  version "1.1.0"
@@ -15600,6 +15609,17 @@ rollup-plugin-babel@^5.0.0-alpha.1:
    "@babel/helper-module-imports" "^7.7.4"
    rollup-pluginutils "^2.8.2"

+rollup-plugin-copy@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-copy/-/rollup-plugin-copy-3.3.0.tgz#5ba230047f86b9f703a29288f242948a5580e7b9"
+  integrity sha512-euDjCUSBXZa06nqnwCNADbkAcYDfzwowfZQkto9K/TFhiH+QG7I4PUsEMwM9tDgomGWJc//z7KLW8t+tZwxADA==
+  dependencies:
+    "@types/fs-extra" "^8.0.1"
+    colorette "^1.1.0"
+    fs-extra "^8.1.0"
+    globby "10.0.1"
+    is-plain-object "^3.0.0"
+
 rollup-plugin-terser@^5.2.0:
  version "5.3.0"
  resolved "https://registry.yarnpkg.com/rollup-plugin-terser/-/rollup-plugin-terser-5.3.0.tgz#9c0dd33d5771df9630cd027d6a2559187f65885e"
@@ -15747,7 +15767,7 @@ schema-utils@^1.0.0:
    ajv-errors "^1.0.0"
    ajv-keywords "^3.1.0"

-schema-utils@^2.0.1, schema-utils@^2.5.0, schema-utils@^2.6.5, schema-utils@^2.6.6:
+schema-utils@^2.0.1, schema-utils@^2.5.0, schema-utils@^2.6.6:
  version "2.6.6"
  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.6.6.tgz#299fe6bd4a3365dc23d99fd446caff8f1d6c330c"
  integrity sha512-wHutF/WPSbIi9x6ctjGGk2Hvl0VOz5l3EKEuKbjPlB30mKZUzb9A5k9yEXRX3pwyqVLPvpfZZEllaFq/M718hA==
@@ -17998,7 +18018,7 @@ warning@^4.0.2, warning@^4.0.3:
  dependencies:
    loose-envify "^1.0.0"

-watchpack@^1.6.1:
+watchpack@^1.6.0:
  version "1.6.1"
  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.6.1.tgz#280da0a8718592174010c078c7585a74cd8cd0e2"
  integrity sha512-+IF9hfUFOrYOOaKyfaI7h7dquUIOgyEMoQMLA7OP5FxegKA2+XdXThAZ9TU2kucfhDH7rfMHs1oPYziVGWRnZA==
@@ -18297,11 +18317,6 @@ wordwrap@0.0.2:
  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.2.tgz#b79669bb42ecb409f83d583cad52ca17eaa1643f"
  integrity sha1-t5Zpu0LstAn4PVg8rVLKF+qhZD8=

-wordwrap@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
-  integrity sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus=
-
 wordwrap@~0.0.2:
  version "0.0.3"
  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107"