prettier

* initial progress redesigning themer controls

* themer controls touchup, fix missing minus icons

* isolate themer control styles

* rename 'headwind' > 'migration'

* rename 'chic' > 'active'

* revert wa-details change

* fix misplaced tooltips and menus with high depth

* fully isolate themer controls styles, touchup

* redesign color mode toggle

* change default Glassy logo

* address PR feedback

* active theme assets (#58)

* fix tooltip color in brutalist message composer header (#59)

* add container queries to Glassy

---------

Co-authored-by: frances botsford <frrrances@users.noreply.github.com>

.eslintrc.cjs

@@ -42,19 +42,17 @@ module.exports = {
       rules: {
         'default-param-last': 'off',
         '@typescript-eslint/default-param-last': 'error',
-        'no-console': 'warn',
         'no-empty-function': 'off',
         '@typescript-eslint/no-empty-function': 'warn',
         'no-implied-eval': 'off',
-        'no-invalid-this': 'off',
-        'no-shadow': 'off',
-        'no-throw-literal': 'off',
-        'no-unused-expressions': 'off',
-        'lit-a11y/no-autofocus': 'off',
         '@typescript-eslint/no-implied-eval': 'error',
+        'no-invalid-this': 'off',
         '@typescript-eslint/no-invalid-this': 'error',
-        '@typescript-eslint/no-throw-literal': 'error',
+        'no-shadow': 'off',
         '@typescript-eslint/no-shadow': 'error',
+        'no-throw-literal': 'off',
+        '@typescript-eslint/no-throw-literal': 'error',
+        'no-unused-expressions': 'off',
         '@typescript-eslint/prefer-regexp-exec': 'off',
         '@typescript-eslint/no-unused-expressions': 'error',
         '@typescript-eslint/unbound-method': 'off',

.gitignore

@@ -4,6 +4,7 @@ _site
 package.json
 package-lock.json
 dist
+docs/assets/images/sprite.svg
 docs/public/pagefind
 node_modules
 src/react

.prettierignore

@@ -1,5 +1,5 @@
 *.hbs
-*.md
+*.mdx
 .cache
 .github
 cspell.json

cspell.json

@@ -141,8 +141,6 @@
     "scroller",
     "Segoe",
     "semibold",
-    "Shortcode",
-    "Shortcodes",
     "sitedir",
     "slotchange",
     "smartquotes",
@@ -158,7 +156,6 @@
     "testid",
     "textareas",
     "textfield",
-    "Themer",
     "tinycolor",
     "transitionend",
     "treeitem",

custom-elements-manifest.config.js

@@ -1,13 +1,24 @@
+import * as path from 'path';
 import { customElementJetBrainsPlugin } from 'custom-element-jet-brains-integration';
 import { customElementVsCodePlugin } from 'custom-element-vs-code-integration';
 import { customElementVuejsPlugin } from 'custom-element-vuejs-integration';
 import { parse } from 'comment-parser';
 import { pascalCase } from 'pascal-case';
+import commandLineArgs from 'command-line-args';
 import fs from 'fs';
 
 const packageData = JSON.parse(fs.readFileSync('./package.json', 'utf8'));
 const { name, description, version, author, homepage, license } = packageData;
-const outdir = 'dist';
+
+const { outdir } = commandLineArgs([
+  { name: 'litelement', type: String },
+  { name: 'analyze', defaultOption: true },
+  { name: 'outdir', type: String }
+]);
+
+function noDash(string) {
+  return string.replace(/^\s?-/, '').trim();
+}
 
 function replace(string, terms) {
   terms.forEach(({ from, to }) => {
@@ -18,10 +29,8 @@ function replace(string, terms) {
 }
 
 export default {
-  globs: ['src/components/**/*.ts'],
+  globs: ['src/components/**/*.component.ts'],
   exclude: ['**/*.styles.ts', '**/*.test.ts'],
-  litelement: true,
-  outdir,
   plugins: [
     // Append package data
     {
@@ -31,6 +40,35 @@ export default {
       }
     },
 
+    // Infer tag names because we no longer use @customElement decorators.
+    {
+      name: 'wa-infer-tag-names',
+      analyzePhase({ ts, node, moduleDoc }) {
+        switch (node.kind) {
+          case ts.SyntaxKind.ClassDeclaration: {
+            const className = node.name.getText();
+            const classDoc = moduleDoc?.declarations?.find(declaration => declaration.name === className);
+
+            const importPath = moduleDoc.path;
+
+            // This is kind of a best guess at components. "thing.component.ts"
+            if (!importPath.endsWith('.component.ts')) {
+              return;
+            }
+
+            const tagNameWithoutPrefix = path.basename(importPath, '.component.ts');
+            const tagName = 'wa-' + tagNameWithoutPrefix;
+
+            classDoc.tagNameWithoutPrefix = tagNameWithoutPrefix;
+            classDoc.tagName = tagName;
+
+            // This used to be set to true by @customElement
+            classDoc.customElement = true;
+          }
+        }
+      }
+    },
+
     // Parse custom jsDoc tags
     {
       name: 'wa-custom-tags',
@@ -39,7 +77,7 @@ export default {
           case ts.SyntaxKind.ClassDeclaration: {
             const className = node.name.getText();
             const classDoc = moduleDoc?.declarations?.find(declaration => declaration.name === className);
-            const customTags = ['dependency', 'documentation', 'since', 'status', 'title'];
+            const customTags = ['animation', 'dependency', 'documentation', 'since', 'status', 'title'];
             let customComments = '/**';
 
             node.jsDoc?.forEach(jsDoc => {
@@ -58,6 +96,17 @@ export default {
             const parsed = parse(`${customComments}\n */`);
             parsed[0].tags?.forEach(t => {
               switch (t.tag) {
+                // Animations
+                case 'animation':
+                  if (!Array.isArray(classDoc['animations'])) {
+                    classDoc['animations'] = [];
+                  }
+                  classDoc['animations'].push({
+                    name: t.name,
+                    description: noDash(t.description)
+                  });
+                  break;
+
                 // Dependencies
                 case 'dependency':
                   if (!Array.isArray(classDoc['dependencies'])) {
@@ -102,7 +151,6 @@ export default {
 
             if (classDoc?.events) {
               classDoc.events.forEach(event => {
-                if (!event.name) return;
                 event.reactName = `on${pascalCase(event.name)}`;
                 event.eventName = `${pascalCase(event.name)}Event`;
               });
@@ -127,7 +175,7 @@ export default {
           //
           const terms = [
             { from: /^src\//, to: '' }, // Strip the src/ prefix
-            { from: /\.(t|j)sx?$/, to: '.js' } // Convert .ts to .js
+            { from: /\.component.(t|j)sx?$/, to: '.js' } // Convert .ts to .js
           ];
 
           mod.path = replace(mod.path, terms);
@@ -171,15 +219,12 @@ export default {
           url: `https://shoelace.style/components/${tag.replace('wa-', '')}`
         };
       }
-    })
+    }),
 
-    //
-    // TODO - figure out why this broke when events were updated
-    //
-    // customElementVuejsPlugin({
-    //   outdir: './dist/types/vue',
-    //   fileName: 'index.d.ts',
-    //   componentTypePath: (_, tag) => `../../components/${tag.replace('wa-', '')}/${tag.replace('wa-', '')}.js`
-    // })
+    customElementVuejsPlugin({
+      outdir: './dist/types/vue',
+      fileName: 'index.d.ts',
+      componentTypePath: (_, tag) => `../../components/${tag.replace('wa-', '')}/${tag.replace('wa-', '')}.component.js`
+    })
   ]
 };

docs/.eleventy.js

@@ -1,126 +0,0 @@
-import { parse } from 'path';
-import { markdown } from './_utils/markdown.js';
-import { anchorHeadingsPlugin } from './_utils/anchor-headings.js';
-import { codeExamplesPlugin } from './_utils/code-examples.js';
-import { copyCodePlugin } from './_utils/copy-code.js';
-import { currentLink } from './_utils/current-link.js';
-import { highlightCodePlugin } from './_utils/highlight-code.js';
-import { formatCodePlugin } from './_utils/format-code.js';
-import { replaceTextPlugin } from './_utils/replace-text.js';
-import { searchPlugin } from './_utils/search.js';
-import { readFile } from 'fs/promises';
-import { outlinePlugin } from './_utils/outline.js';
-import { getComponents } from './_utils/manifest.js';
-import process from 'process';
-
-const packageData = JSON.parse(await readFile('./package.json', 'utf-8'));
-const isDeveloping = process.argv.includes('--develop');
-
-export default function (eleventyConfig) {
-  // Add template data
-  eleventyConfig.addGlobalData('package', packageData);
-
-  // Template filters - {{ content | filter }}
-  eleventyConfig.addFilter('inlineMarkdown', content => markdown.renderInline(content || ''));
-  eleventyConfig.addFilter('markdown', content => markdown.render(content || ''));
-  eleventyConfig.addFilter('stripExtension', string => parse(string).name);
-  eleventyConfig.addFilter('stripPrefix', content => content.replace(/^wa-/, ''));
-  eleventyConfig.addFilter('trimPipes', content => {
-    // Trims whitespace and pipes from the start and end of a string. Useful for CEM types, which can be pipe-delimited.
-    // With Prettier 3, this means a leading pipe will exist be present when the line wraps.
-    return typeof content === 'string' ? content.replace(/^(\s|\|)/g, '').replace(/(\s|\|)$/g, '') : content;
-  });
-
-  // Shortcodes - {% shortCode arg1, arg2 %}
-  eleventyConfig.addShortcode('cdnUrl', location => {
-    return (
-      `https://cdn.jsdelivr.net/npm/@shoelace-style/webawesome@${packageData.version}/` + location.replace(/^\//, '')
-    );
-  });
-
-  // Helpers
-  eleventyConfig.addNunjucksGlobal('getComponent', tagName => {
-    const component = getComponents().find(c => c.tagName === tagName);
-
-    if (!component) {
-      throw new Error(
-        `Unable to find "<${tagName}>". Make sure the file name is the same as the tag name (without prefix).`
-      );
-    }
-    return component;
-  });
-
-  // Use our own markdown instance
-  eleventyConfig.setLibrary('md', markdown);
-
-  // Add anchors to headings
-  eleventyConfig.addPlugin(anchorHeadingsPlugin({ container: '#content' }));
-
-  // Add an outline to the page
-  eleventyConfig.addPlugin(
-    outlinePlugin({
-      container: '#content',
-      target: '.outline-links',
-      selector: 'h2, h3',
-      ifEmpty: doc => {
-        doc.querySelector('#outline')?.remove();
-      }
-    })
-  );
-
-  // Add current link classes
-  eleventyConfig.addPlugin(currentLink());
-
-  // Add code examples for `<code class="example">` blocks
-  eleventyConfig.addPlugin(codeExamplesPlugin());
-
-  // Highlight code blocks with Prism
-  eleventyConfig.addPlugin(highlightCodePlugin());
-
-  // Add copy code buttons to code blocks
-  eleventyConfig.addPlugin(copyCodePlugin());
-
-  // Various text replacements
-  eleventyConfig.addPlugin(
-    replaceTextPlugin([
-      // Replace [issue:1234] with a link to the issue on GitHub
-      {
-        replace: /\[pr:([0-9]+)\]/gs,
-        replaceWith: '<a href="https://github.com/shoelace-style/webawesome/pull/$1">#$1</a>'
-      },
-      // Replace [pr:1234] with a link to the pull request on GitHub
-      {
-        replace: /\[issue:([0-9]+)\]/gs,
-        replaceWith: '<a href="https://github.com/shoelace-style/webawesome/issues/$1">#$1</a>'
-      },
-      // Replace [discuss:1234] with a link to the discussion on GitHub
-      {
-        replace: /\[discuss:([0-9]+)\]/gs,
-        replaceWith: '<a href="https://github.com/shoelace-style/webawesome/discussions/$1">#$1</a>'
-      }
-    ])
-  );
-
-  // Build the search index
-  eleventyConfig.addPlugin(
-    searchPlugin({
-      filename: '',
-      selectorsToIgnore: ['code.example'],
-      getContent: doc => doc.querySelector('#content')?.textContent ?? ''
-    })
-  );
-
-  // Production-only plugins
-  if (!isDeveloping) {
-    // Run Prettier on each file (prod only because it can be slow)
-    eleventyConfig.addPlugin(formatCodePlugin());
-  }
-
-  return {
-    dir: {
-      includes: '_includes',
-      layouts: '_layouts'
-    },
-    templateFormats: ['njk', 'md']
-  };
-}

docs/.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}

docs/.vscode/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}

docs/404.md

@@ -1,11 +0,0 @@
----
-title: Not Found
-description: Sorry, I couldn't find that.
-layout: page.njk
-permalink: 404.html
-noindex: true
----
-
-<p class="subtitle">{{ description }}</p>
-
-<p>Have you tried searching?</p>

docs/_includes/search.njk

@@ -1,61 +0,0 @@
-<wa-dialog id="site-search" no-header>
-  <div id="site-search-container">
-    {# Header #}
-    <header>
-      <div id="site-search-input-wrapper">
-        <wa-input
-          id="site-search-input"
-          type="search"
-          filled
-          size="large"
-          clearable
-          placeholder="Search"
-          autofocus
-          autocomplete="off"
-          autocorrect="off"
-          autocapitalize="off"
-          enterkeyhint="go"
-          spellcheck="false"
-          maxlength="100"
-          role="combobox"
-          aria-autocomplete="list"
-          aria-expanded="true"
-          aria-controls="site-search-listbox"
-          aria-haspopup="listbox"
-          aria-activedescendant
-        >
-          <wa-icon slot="prefix" name="search"></wa-icon>
-        </wa-input>
-      </div>
-    </header>
-
-    {# Body #}
-    <div id="site-search-body">
-      <ul
-        id="site-search-listbox"
-        role="listbox"
-        aria-label="Search results"
-      ></ul>
-      <div id="site-search-empty">
-        <wa-icon name="web-awesome" family="brands"></wa-icon>
-        No results
-      </div>
-    </div>
-
-    {# Footer #}
-    <footer>
-      <small>
-        <kbd aria-label="Up"><wa-icon name="arrow-up" family="micro"></wa-icon></kbd>
-        <kbd aria-label="Down"><wa-icon name="arrow-down" family="micro"></wa-icon></kbd>
-        Navigate
-      </small>
-
-      <small>
-        <kbd>Enter</kbd>
-        Select
-      </small>
-
-      <small><kbd>Esc</kbd> Close</small>
-    </footer>
-  </div>
-</wa-dialog>

docs/_includes/sidebar.njk

@@ -1,234 +0,0 @@
-{# Getting started #}
-<h2>Getting Started</h2>
-<ul>
-  <li><a href="/docs/installation">Installation</a></li>
-  <li><a href="/docs/usage">Usage</a></li>
-  <li><a href="/docs/themes">Themes</a></li>
-  <li><a href="/docs/customizing">Customizing</a></li>
-  <li><a href="/docs/localization">Localization</a></li>
-</ul>
-
-{# Experimental #}
-<h2>Experimental</h2>
-<ul>
-  <li><a href="/docs/experimental/themer">Theme Builder</a></li>
-  <li><a href="/docs/experimental/style-guide">Style Guide</a></li>
-  <li><a href="/docs/experimental/form-validation">Form Validation Styles</a></li>
-  <li><a href="/docs/experimental/sandbox">Sandbox</a></li>
-  <li style="margin-top: .5rem;"><wa-switch id="theme-toggle">Dark mode</wa-switch></li>
-  <script type="module">
-    // Temporary dark toggle
-    const toggle = document.getElementById('theme-toggle');
-    toggle.checked = document.documentElement.classList.contains('wa-theme-default-dark');
-
-    toggle.addEventListener('wa-change', () => {
-      document.documentElement.classList.toggle('wa-theme-default-dark');
-      localStorage.setItem('theme', toggle.checked ? 'dark' : 'light');
-    });
-  </script>
-</ul>
-
-
-{# Resources #}
-<h2>Resources</h2>
-<ul>
-  <li><a href="https://github.com/shoelace-style/shoelace/discussions">Help &amp; Support</a></li>
-  <li><a href="/docs/resources/community">Community</a></li>
-  <li><a href="/docs/resources/accessibility">Accessibility</a></li>
-  <li><a href="/docs/resources/contributing">Contributing</a></li>
-  <li><a href="/docs/resources/changelog">Changelog</a></li>
-</ul>
-
-{# Components #}
-<h2>Components</h2>
-<ul>
-  <li>
-    <a href="/docs/components/animated-image">Animated Image</a>
-  </li>
-  <li>
-    <a href="/docs/components/animation">Animation</a>
-  </li>
-  <li>
-    <a href="/docs/components/avatar">Avatar</a>
-  </li>
-  <li>
-    <a href="/docs/components/badge">Badge</a>
-  </li>
-  <li>
-    <a href="/docs/components/breadcrumb">Breadcrumb</a>
-    <ul>
-      <li>
-        <a href="/docs/components/breadcrumb-item">Breadcrumb Item</a>
-      </li>
-    </ul>
-  </li>
-  <li>
-    <a href="/docs/components/button">Button</a>
-  </li>
-  <li>
-    <a href="/docs/components/button-group">Button Group</a>
-  </li>
-  <li>
-    <a href="/docs/components/callout">Callout</a>
-  </li>
-  <li>
-    <a href="/docs/components/card">Card</a>
-  </li>
-  <li>
-    <a href="/docs/components/carousel">Carousel</a>
-    <ul>
-      <li>
-        <a href="/docs/components/carousel-item">Carousel Item</a>
-      </li>
-    </ul>
-  </li>
-  <li>
-    <a href="/docs/components/checkbox">Checkbox</a>
-  </li>
-  <li>
-    <a href="/docs/components/color-picker">Color Picker</a>
-  </li>
-  <li>
-    <a href="/docs/components/copy-button">Copy Button</a>
-  </li>
-  <li>
-    <a href="/docs/components/details">Details</a>
-  </li>
-  <li>
-    <a href="/docs/components/dialog">Dialog</a>
-  </li>
-  <li>
-    <a href="/docs/components/divider">Divider</a>
-  </li>
-  <li>
-    <a href="/docs/components/drawer">Drawer</a>
-  </li>
-  <li>
-    <a href="/docs/components/dropdown">Dropdown</a>
-  </li>
-  <li>
-    <a href="/docs/components/format-bytes">Format Bytes</a>
-  </li>
-  <li>
-    <a href="/docs/components/format-date">Format Date</a>
-  </li>
-  <li>
-    <a href="/docs/components/format-number">Format Number</a>
-  </li>
-  <li>
-    <a href="/docs/components/icon">Icon</a>
-  </li>
-  <li>
-    <a href="/docs/components/icon-button">Icon Button</a>
-  </li>
-  <li>
-    <a href="/docs/components/image-comparer">Image Comparer</a>
-  </li>
-  <li>
-    <a href="/docs/components/include">Include</a>
-  </li>
-  <li>
-    <a href="/docs/components/input">Input</a>
-  </li>
-  <li>
-    <a href="/docs/components/menu">Menu</a>
-    <ul>
-      <li>
-        <a href="/docs/components/menu-item">Menu Item</a>
-      </li>
-      <li>
-        <a href="/docs/components/menu-label">Menu Label</a>
-      </li>
-    </ul>
-  </li>
-  <li>
-    <a href="/docs/components/mutation-observer">Mutation Observer</a>
-  </li>
-  <li>
-    <a href="/docs/components/option">Option</a>
-  </li>
-  <li>
-    <a href="/docs/components/page">Page</a>
-  </li>
-  <li>
-    <a href="/docs/components/popup">Popup</a>
-  </li>
-  <li>
-    <a href="/docs/components/progress-bar">Progress Bar</a>
-  </li>
-  <li>
-    <a href="/docs/components/progress-ring">Progress Ring</a>
-  </li>
-  <li>
-    <a href="/docs/components/qr-code">QR Code</a>
-  </li>
-  <li>
-    <a href="/docs/components/radio-group">Radio Group</a>
-    <ul>
-      <li>
-        <a href="/docs/components/radio">Radio</a>
-      </li>
-      <li>
-        <a href="/docs/components/radio-button">Radio Button</a>
-      </li>
-    </ul>
-  </li>
-  <li>
-    <a href="/docs/components/range">Range</a>
-  </li>
-  <li>
-    <a href="/docs/components/rating">Rating</a>
-  </li>
-  <li>
-    <a href="/docs/components/relative-time">Relative Time</a>
-  </li>
-  <li>
-    <a href="/docs/components/resize-observer">Resize Observer</a>
-  </li>
-  <li>
-    <a href="/docs/components/select">Select</a>
-  </li>
-  <li>
-    <a href="/docs/components/skeleton">Skeleton</a>
-  </li>
-  <li>
-    <a href="/docs/components/spinner">Spinner</a>
-  </li>
-  <li>
-    <a href="/docs/components/split-panel">Split Panel</a>
-  </li>
-  <li>
-    <a href="/docs/components/switch">Switch</a>
-  </li>
-  <li>
-    <a href="/docs/components/tab-group">Tab Group</a>
-    <ul>
-      <li>
-        <a href="/docs/components/tab">Tab</a>
-      </li>
-      <li>
-        <a href="/docs/components/tab-panel">Tab Panel</a>
-      </li>
-    </ul>
-  </li>
-  <li>
-    <a href="/docs/components/tag">Tag</a>
-  </li>
-  <li>
-    <a href="/docs/components/textarea">Textarea</a>
-  </li>
-  <li>
-    <a href="/docs/components/tooltip">Tooltip</a>
-  </li>
-  <li>
-    <a href="/docs/components/tree">Tree</a>
-    <ul>
-      <li>
-        <a href="/docs/components/tree-item">Tree Item</a>
-      </li>
-    </ul>
-  </li>
-  <li>
-    <a href="/docs/components/visually-hidden">Visually Hidden</a>
-  </li>
-</ul>

docs/_layouts/component.njk

@@ -1,298 +0,0 @@
-{% set hasSidebar = true %}
-{% set hasOutline = true %}
-{% set component = getComponent('wa-' + page.fileSlug) %}
-{% set description = component.summary %}
-
-{% extends '../_includes/base.njk' %}
-
-{# Component header #}
-{% block beforeContent %}
-  <h1 class="title">{{ title }}</h1>
-  <div class="component-info">
-    <code class="component-tag">&lt;{{ component.tagName }}&gt;</code>
-    <wa-badge variant="neutral">Since {{ component.since }}</wa-badge>
-    <wa-badge
-      {% if component.status == 'stable' %}variant="brand"{% endif %}
-      {% if component.status == 'experimental' %}variant="warning"{% endif %}
-    >
-      {{ component.status }}
-    </wa-badge>
-  </div>
-  <p class="component-summary">
-    {{ component.summary }}
-  </p>
-{% endblock %}
-
-{# Content #}
-{% block content %}
-  {{ content | safe }}
-{% endblock %}
-
-{# Component API #}
-{% block afterContent %}
-  {# Slots #}
-  {% if component.slots.length %}
-    <h2>Slots</h2>
-
-    <div class="table-scroll">
-      <table class="component-table">
-        <thead>
-          <tr>
-            <th class="table-name">Name</th>
-            <th class="table-description">Description</th>
-          </tr>
-        </thead>
-        <tbody>
-          {% for slot in component.slots %}
-            <tr>
-              <td class="table-name">
-                {% if slot.name %}
-                  <code>{{ slot.name }}</code>
-                {% else %}
-                  (default)
-                {% endif %}
-              </td>
-              <td class="table-description">{{ slot.description | inlineMarkdown | safe }}</td>
-            </tr>
-          {% endfor %}
-        </tbody>
-      </table>
-    </div>
-  {% endif %}
-
-  {# Properties #}
-  {% if component.properties.length %}
-    <h2>Properties</h2>
-
-    <div class="table-scroll">
-      <table class="component-table">
-        <thead>
-          <tr>
-            <th class="table-name">Name</th>
-            <th class="table-attribute">Attribute</th>
-            <th class="table-description">Description</th>
-            <th class="table-reflects">Reflects</th>
-            <th class="table-type">Type</th>
-            <th class="table-default">Default</th>
-          </tr>
-        </thead>
-        <tbody>
-          {% for prop in component.properties %}
-            <tr>
-              <td class="table-name">
-                <code>{{ prop.name }}</code>
-              </td>
-              <td class="table-attribute">
-                {% if prop.attribute %}
-                  <code>{{ prop.attribute }}</code>
-                {% endif %}
-              </td>
-              <td class="table-description">
-                {{ prop.description | inlineMarkdown | safe }}
-              </td>
-              <td class="table-checkmark">
-                {% if prop.reflects %}
-                  <wa-icon name="check"></wa-icon>
-                {% endif %}
-              </td>
-              <td class="table-type">
-                {% if prop.type.text %}
-                  <code>{{ prop.type.text | trimPipes | inlineMarkdown | safe }}</code>
-                {% endif %}
-              </td>
-              <td class="table-default">
-                {% if prop.default %}
-                  <code>{{ prop.default | inlineMarkdown | safe }}</code>
-                {% endif %}
-              </td>
-            </tr>
-          {% endfor %}
-        </tbody>
-      </table>
-    </div>
-  {% endif %}
-
-  {# Methods #}
-  {% if component.methods.length %}
-    <h2>Methods</h2>
-    <div class="table-scroll">
-      <table class="component-table">
-        <thead>
-          <tr>
-            <th class="table-name">Name</th>
-            <th class="table-description">Description</th>
-            <th class="table-arguments">Arguments</th>
-          </tr>
-        </thead>
-        <tbody>
-          {% for method in component.methods %}
-            <tr>
-              <td class="table-name"><code>{{ method.name }}()</code></td>
-              <td class="table-description">{{ method.description | inlineMarkdown | safe }}</td>
-              <td class="table-arguments">
-                {% if method.parameters.length %}
-                  <code>
-                    {% for param in method.parameters %}
-                      {{ param.name }}: {{ param.type.text | trimPipes }}{% if not loop.last %},{% endif %}
-                    {% endfor %}
-                  </code>
-                {% endif %}
-              </td>
-            </tr>
-          {% endfor %}
-        </tbody>
-      </table>
-    </div>
-  {% endif %}
-
-  {# States #}
-  {% if component.states.length %}
-    <h2>States</h2>
-    <div class="table-scroll">
-      <table class="component-table">
-        <thead>
-          <tr>
-            <th class="table-name">Name</th>
-            <th class="table-description">Description</th>
-            <th class="table-selector">CSS selector</th>
-          </tr>
-        </thead>
-        <tbody>
-          {% for state in component.states %}
-            <tr>
-              <td class="table-name"><code>{{ state.name }}</code></td>
-              <td class="table-description">{{ state.description | inlineMarkdown | safe }}</td>
-              <td class="table-selector"><code>[data-state-{{ state.name }}]</code></td>
-            </tr>
-          {% endfor %}
-        </tbody>
-      </table>
-    </div>
-  {% endif %}
-
-  {# Events #}
-  {% if component.events.length %}
-    <h2>Events</h2>
-
-    <div class="table-scroll">
-      <table class="component-table">
-        <thead>
-          <tr>
-            <th class="table-name">Name</th>
-            <th class="table-description">Description</th>
-          </tr>
-        </thead>
-        <tbody>
-          {% for event in component.events %}
-            {% if event.name %}
-              <tr>
-                <td class="table-name"><code>{{ event.name }}</code></td>
-                <td class="table-description">{{ event.description | inlineMarkdown | safe }}</td>
-              </tr>
-            {% endif %}
-          {% endfor %}
-        </tbody>
-      </table>
-    </div>
-  {% endif %}
-
-  {# Custom Properties #}
-  {% if component.cssProperties.length %}
-    <h2>CSS custom properties</h2>
-
-    <div class="table-scroll">
-      <table class="component-table">
-        <thead>
-          <tr>
-            <th class="table-name">Name</th>
-            <th class="table-description">Description</th>
-            <th>Default</th>
-          </tr>
-        </thead>
-        <tbody>
-          {% for cssProperty in component.cssProperties %}
-            <tr>
-              <td class="table-name"><code>{{ cssProperty.name }}</code></td>
-              <td class="table-description">{{ cssProperty.description | inlineMarkdown | safe }}</td>
-              <td class="table-default">
-                {% if cssProperty.default %}
-                  <code>{{ cssProperty.default }}</code>
-                {% endif %}
-              </td>
-            </tr>
-          {% endfor %}
-        </tbody>
-      </table>
-    </div>
-  {% endif %}
-
-  {# CSS Parts #}
-  {% if component.cssParts.length %}
-    <h2>CSS parts</h2>
-
-    <div class="table-scroll">
-      <table class="component-table">
-        <thead>
-          <tr>
-            <th class="table-name">Name</th>
-            <th class="table-description">Description</th>
-            <th class="table-selector">CSS selector</th>
-          </tr>
-        </thead>
-        <tbody>
-          {% for cssPart in component.cssParts %}
-            <tr>
-              <td class="table-name"><code>{{ cssPart.name }}</code></td>
-              <td class="table-description">{{ cssPart.description | inlineMarkdown | safe }}</td>
-              <td class="table-selector"><code>::part({{ cssPart.name }})</code></td>
-            </tr>
-          {% endfor %}
-        </tbody>
-      </table>
-    </div>
-  {% endif %}
-
-  {# Dependencies #}
-  {% if component.dependencies.length %}
-    <h2>Dependencies</h2>
-    <p>
-      This component automatically imports the following elements. Subdependencies, if any exist, will also be included in this list.
-    </p>
-
-    <ul class="dependency-list">
-      {% for dependency in component.dependencies %}
-        <li><a href="/docs/components/{{ dependency | stripPrefix }}"><code>&lt;{{ dependency }}&gt;</code></a></li>
-      {% endfor %}
-    </ul>
-  {% endif %}
-
-  {# Importing #}
-  <h2>Importing</h2>
-  <p>
-    The <a href="/docs/#autoloading">autoloader</a> is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.
-  </p>
-
-  <wa-tab-group label="How would you like to import this component?">
-    <wa-tab slot="nav" panel="cdn">CDN</wa-tab>
-    <wa-tab slot="nav" panel="npm">npm</wa-tab>
-    <wa-tab slot="nav" panel="react">React</wa-tab>
-    <wa-tab-panel name="cdn">
-      <p>
-        To manually import this component from the CDN, use the following code.
-      </p>
-      <pre><code class="language-js">import '{% cdnUrl component.path %}';</code></pre>
-    </wa-tab-panel>
-    <wa-tab-panel name="npm">
-      <p>
-        To manually import this component from npm, use the following code.
-      </p>
-      <pre><code class="language-js">import '@shoelace-style/webawesome/{{ component.path }}';</code></pre>
-    </wa-tab-panel>
-    <wa-tab-panel name="react">
-      <p>
-        To manually import this component from React, use the following code.
-      </p>
-      <pre><code class="language-js">import '@shoelace-style/webawesome/react/{{ component.tagName | stripPrefix }}';</code></pre>
-    </wa-tab-panel>
-  </wa-tab-group>
-{% endblock %}

docs/_layouts/docs.njk

@@ -1,5 +0,0 @@
-{% set hasSidebar = true %}
-{% set hasOutline = true %}
-{% set section = 'docs' %}
-
-{% extends "../_includes/base.njk" %}

docs/_layouts/page.njk

@@ -1,4 +0,0 @@
-{% set hasSidebar = true %}
-{% set hasOutline = false %}
-
-{% extends "../_includes/base.njk" %}

docs/_utils/anchor-headings.js

@@ -1,78 +0,0 @@
-import { parse } from 'node-html-parser';
-import { v4 as uuid } from 'uuid';
-import slugify from 'slugify';
-
-function createId(text) {
-  let slug = slugify(String(text), {
-    remove: /[^\w|\s]/g,
-    lower: true
-  });
-
-  // ids must start with a letter
-  if (!/^[a-z]/i.test(slug)) {
-    slug = `wa_${slug}`;
-  }
-
-  return slug;
-}
-
-/**
- * Eleventy plugin to add anchors to headings to content.
- */
-export function anchorHeadingsPlugin(options = {}) {
-  options = {
-    container: 'body',
-    headingSelector: 'h2, h3, h4, h5, h6',
-    anchorLabel: 'Jump to heading',
-    ...options
-  };
-
-  return function (eleventyConfig) {
-    eleventyConfig.addTransform('anchor-headings', content => {
-      const doc = parse(content);
-      const container = doc.querySelector(options.container);
-
-      if (!container) {
-        return content;
-      }
-
-      // Look for headings
-      container.querySelectorAll(options.headingSelector).forEach(heading => {
-        const hasAnchor = heading.querySelector('a');
-        const clone = parse(heading.outerHTML);
-
-        // Create a clone of the heading so we can remove [data-no-anchor] elements from the text content
-        clone.querySelectorAll('[data-no-anchor]').forEach(el => el.remove());
-
-        const slug = createId(clone.textContent ?? '') ?? uuid().slice(-12);
-        let id = slug;
-        let suffix = 0;
-
-        // Make sure the slug is unique in the document
-        while (doc.getElementById(id) !== null) {
-          id = `${slug}-${++suffix}`;
-        }
-
-        if (hasAnchor || !id) {
-          return;
-        }
-
-        // Create the anchor
-        const anchor = parse(`
-          <a href="#${encodeURIComponent(id)}">
-            <span class="wa-visually-hidden"></span>
-            <span aria-hidden="true">#</span>
-          </a>
-        `);
-        anchor.querySelector('.wa-visually-hidden').textContent = options.anchorLabel;
-
-        // Update the heading
-        heading.setAttribute('id', id);
-        heading.classList.add('anchor-heading');
-        heading.appendChild(anchor);
-      });
-
-      return doc.toString();
-    });
-  };
-}

docs/_utils/code-examples.js

@@ -1,82 +0,0 @@
-import { parse } from 'node-html-parser';
-import { v4 as uuid } from 'uuid';
-
-/**
- * Eleventy plugin to turn `<code class="example">` blocks into live examples.
- */
-export function codeExamplesPlugin(options = {}) {
-  options = {
-    container: 'body',
-    ...options
-  };
-
-  return function (eleventyConfig) {
-    eleventyConfig.addTransform('code-examples', content => {
-      const doc = parse(content, { blockTextElements: { code: true } });
-      const container = doc.querySelector(options.container);
-
-      if (!container) {
-        return content;
-      }
-
-      // Look for external links
-      container.querySelectorAll('code.example').forEach(code => {
-        const pre = code.closest('pre');
-        const hasButtons = !code.classList.contains('no-buttons');
-        const isOpen = code.classList.contains('open') || !hasButtons;
-        const noEdit = code.classList.contains('no-edit');
-        const id = `code-example-${uuid().slice(-12)}`;
-        let preview = pre.textContent;
-
-        // Run preview scripts as modules to prevent collisions
-        const root = parse(preview, { blockTextElements: { script: true } });
-        root.querySelectorAll('script').forEach(script => script.setAttribute('type', 'module'));
-        preview = root.toString();
-
-        const codeExample = parse(`
-          <div class="code-example ${isOpen ? 'open' : ''}">
-            <div class="code-example-preview">
-              ${preview}
-            </div>
-            <div class="code-example-source" id="${id}">
-              ${pre.outerHTML}
-            </div>
-            ${
-              hasButtons
-                ? `
-                <div class="code-example-buttons">
-                  <button
-                    class="code-example-toggle"
-                    type="button"
-                    aria-expanded="${isOpen ? 'true' : 'false'}"
-                    aria-controls="${id}"
-                  >
-                    Code
-                    <wa-icon name="chevron-down"></wa-icon>
-                  </button>
-
-                  ${
-                    noEdit
-                      ? ''
-                      : `
-                        <button class="code-example-pen" type="button">
-                          <wa-icon name="pen-to-square"></wa-icon>
-                          Edit
-                        </button>
-                      `
-                  }
-
-                `
-                : ''
-            }
-            </div>
-          </div>
-        `);
-
-        pre.replaceWith(codeExample);
-      });
-
-      return doc.toString();
-    });
-  };
-}

docs/_utils/copy-code.js

@@ -1,32 +0,0 @@
-import { parse } from 'node-html-parser';
-
-/**
- * Eleventy plugin to add copy buttons to code blocks.
- */
-export function copyCodePlugin(options = {}) {
-  options = {
-    container: 'body',
-    ...options
-  };
-
-  return function (eleventyConfig) {
-    eleventyConfig.addTransform('copy-code', content => {
-      const doc = parse(content, { blockTextElements: { code: true } });
-      const container = doc.querySelector(options.container);
-
-      if (!container) {
-        return content;
-      }
-
-      // Look for code blocks
-      container.querySelectorAll('pre > code').forEach(code => {
-        const pre = code.closest('pre');
-
-        // Add a copy button (we set the copy data at runtime to reduce page bloat)
-        pre.innerHTML = `<wa-copy-button class="copy-button" hoist></wa-copy-button>` + pre.innerHTML;
-      });
-
-      return doc.toString();
-    });
-  };
-}

docs/_utils/current-link.js

@@ -1,53 +0,0 @@
-import { parse } from 'node-html-parser';
-
-function normalize(pathname) {
-  pathname = pathname.trim();
-
-  // Must start with a slash
-  if (!pathname.startsWith('/')) {
-    pathname = `/${pathname}`;
-  }
-
-  // Must not end in a slash
-  if (pathname.endsWith('/')) {
-    pathname = pathname.slice(0, -1);
-  }
-
-  // Convert /index.html to /
-  if (pathname.endsWith('/index.html')) {
-    pathname = pathname.slice(0, -10);
-  }
-
-  return pathname;
-}
-
-/**
- * Eleventy plugin to decorate current links with a custom class.
- */
-export function currentLink(options = {}) {
-  options = {
-    container: 'body',
-    className: 'current',
-    ...options
-  };
-
-  return function (eleventyConfig) {
-    eleventyConfig.addTransform('current-link', function (content) {
-      const doc = parse(content);
-      const container = doc.querySelector(options.container);
-
-      if (!container) {
-        return content;
-      }
-
-      // Compare the href attribute to 11ty's page URL
-      container.querySelectorAll('a[href]').forEach(a => {
-        if (normalize(a.getAttribute('href')) === normalize(this.page.url)) {
-          a.classList.add(options.className);
-        }
-      });
-
-      return doc.toString();
-    });
-  };
-}

docs/_utils/format-code.js

@@ -1,32 +0,0 @@
-import { format } from 'prettier';
-import defaultOptions from '../../prettier.config.js';
-
-/**
- * Formats a string of code using Prettier.
- *
- * @param {string} code - The code to format.
- * @param {*} options - Prettier options. Defaults are taken from the project's root config. See this page for more
- *   info: https://prettier.io/docs/en/options.html
- */
-export async function formatCode(string, options) {
-  return await format(string, {
-    ...defaultOptions,
-    ...options
-  });
-}
-
-/**
- * Eleventy plugin to format page HTML using Prettier.
- */
-export function formatCodePlugin(options = {}) {
-  options = {
-    parser: 'html',
-    ...options
-  };
-
-  return function (eleventyConfig) {
-    eleventyConfig.addTransform('format-code', content => {
-      return formatCode(content, options);
-    });
-  };
-}

docs/_utils/highlight-code.js

@@ -1,72 +0,0 @@
-/* eslint sort-imports-es6-autofix/sort-imports-es6: 0 */
-import { parse } from 'node-html-parser';
-import Prism from 'prismjs';
-import 'prismjs/plugins/custom-class/prism-custom-class.js';
-import PrismLoader from 'prismjs/components/index.js';
-
-PrismLoader('diff');
-PrismLoader.silent = true;
-Prism.plugins.customClass.prefix('code-');
-
-/**
- * Highlights a string of code using the specified language.
- *
- * @param {string} code - The code to highlight.
- * @param {string} language - The language the code is written in. For available languages, refer to this page:
- *   https://prismjs.com/#supported-languages
- */
-export function highlightCode(code, language = 'plain') {
-  const alias = language.replace(/^diff-/, '');
-  const isDiff = /^diff-/i.test(language);
-
-  if (!Prism.languages[alias]) {
-    PrismLoader(alias);
-    if (!Prism.languages[alias]) {
-      throw new Error(`Unsupported language for code highlighting: "${language}"`);
-    }
-  }
-
-  if (isDiff) {
-    Prism.languages[language] = Prism.languages.diff;
-  }
-
-  return Prism.highlight(code, Prism.languages[language], language);
-}
-
-/**
- * Eleventy plugin to highlight code blocks with the `language-*` attribute using Prism.js. Unlike most plugins, this
- * works on the entire document — not just markdown content.
- */
-export function highlightCodePlugin(options = {}) {
-  options = {
-    container: 'body',
-    ...options
-  };
-
-  return function (eleventyConfig) {
-    eleventyConfig.addTransform('highlight-code', content => {
-      const doc = parse(content, { blockTextElements: { code: true } });
-      const container = doc.querySelector(options.container);
-
-      if (!container) {
-        return content;
-      }
-
-      // Look for <code class="language-*"> and highlight each one
-      container.querySelectorAll('code[class*="language-"]').forEach(code => {
-        const langClass = [...code.classList.values()].find(val => val.startsWith('language-'));
-        const lang = langClass ? langClass.replace(/^language-/, '') : 'plain';
-
-        try {
-          code.innerHTML = highlightCode(code.textContent ?? '', lang);
-        } catch (err) {
-          if (!options.ignoreMissingLangs) {
-            throw new Error(err.message);
-          }
-        }
-      });
-
-      return doc.toString();
-    });
-  };
-}

docs/_utils/manifest.js

@@ -1,71 +0,0 @@
-import { fileURLToPath } from 'url';
-import { dirname, resolve } from 'path';
-import { readFileSync } from 'fs';
-
-const __dirname = dirname(fileURLToPath(import.meta.url));
-
-const manifest = JSON.parse(readFileSync(resolve(__dirname, '../../dist/custom-elements.json'), 'utf-8'));
-/**
- * @returns Fetches components from custom-elements.json and returns them in more sane format.
- */
-export function getComponents() {
-  const components = [];
-
-  manifest.modules?.forEach(module => {
-    module.declarations?.forEach(declaration => {
-      if (declaration.customElement) {
-        // Generate the dist path based on the src path and attach it to the component
-        declaration.path = module.path.replace(/^src\//, 'dist/').replace(/\.ts$/, '.js');
-
-        // Remove private members and those that lack a description
-        const members = declaration.members?.filter(member => member.description && member.privacy !== 'private');
-        const methods = members?.filter(prop => prop.kind === 'method' && prop.privacy !== 'private');
-        const properties = members?.filter(prop => {
-          // Look for a corresponding attribute
-          const attribute = declaration.attributes?.find(attr => attr.fieldName === prop.name);
-          if (attribute) {
-            prop.attribute = attribute.name || attribute.fieldName;
-          }
-
-          return prop.kind === 'field' && prop.privacy !== 'private';
-        });
-        components.push({
-          ...declaration,
-          methods,
-          properties
-        });
-      }
-    });
-  });
-
-  // Build dependency graphs
-  components.forEach(component => {
-    const dependencies = [];
-
-    // Recursively fetch sub-dependencies
-    function getDependencies(tag) {
-      const cmp = components.find(c => c.tagName === tag);
-      if (!cmp || !Array.isArray(component.dependencies)) {
-        return;
-      }
-
-      cmp.dependencies?.forEach(dependentTag => {
-        if (!dependencies.includes(dependentTag)) {
-          dependencies.push(dependentTag);
-        }
-        getDependencies(dependentTag);
-      });
-    }
-
-    getDependencies(component.tagName);
-
-    component.dependencies = dependencies.sort();
-  });
-
-  // Sort by name
-  return components.sort((a, b) => {
-    if (a.name < b.name) return -1;
-    if (a.name > b.name) return 1;
-    return 0;
-  });
-}

docs/_utils/markdown.js

@@ -1,63 +0,0 @@
-import MarkdownIt from 'markdown-it';
-import markdownItAttrs from 'markdown-it-attrs';
-import markdownItContainer from 'markdown-it-container';
-import markdownItIns from 'markdown-it-ins';
-import markdownItKbd from 'markdown-it-kbd';
-import markdownItMark from 'markdown-it-mark';
-
-/**
- * A custom Markdown It instance with added features.
- */
-export const markdown = MarkdownIt({
-  html: true,
-  xhtmlOut: false,
-  breaks: false,
-  langPrefix: 'language-',
-  linkify: false,
-  typographer: false
-});
-
-markdown.use(markdownItIns);
-markdown.use(markdownItKbd);
-markdown.use(markdownItMark);
-
-['info', 'warning'].forEach(type => {
-  markdown.use(markdownItContainer, type, {
-    render: function (tokens, idx) {
-      const variant = type === 'warning' ? 'warning' : 'info';
-      const icon = type === 'warning' ? 'triangle-exclamation' : 'circle-info';
-      if (tokens[idx].nesting === 1) {
-        return `
-          <div class="callout callout-${variant}">
-            <wa-icon class="callout-icon" name="${icon}"></wa-icon>
-            <div class="callout-content">
-        `;
-      }
-      return '</div></div>\n';
-    }
-  });
-});
-
-markdown.use(markdownItContainer, 'aside', {
-  render: function (tokens, idx) {
-    if (tokens[idx].nesting === 1) {
-      return `<aside>`;
-    }
-    return '</aside>\n';
-  }
-});
-
-markdown.use(markdownItContainer, 'details', {
-  validate: params => params.trim().match(/^details\s+(.*)$/),
-  render: (tokens, idx) => {
-    const m = tokens[idx].info.trim().match(/^details\s+(.*)$/);
-    if (tokens[idx].nesting === 1) {
-      return `<details>\n<summary><span>${markdown.utils.escapeHtml(m[1])}</span></summary>\n`;
-    }
-    return '</details>\n';
-  }
-});
-
-markdown.use(markdownItAttrs, {
-  allowedAttributes: ['id', 'class', 'data']
-});

docs/_utils/outline.js

@@ -1,69 +0,0 @@
-import { parse } from 'node-html-parser';
-
-/**
- * Eleventy plugin to add an outline (table of contents) to the page. Headings must have an id, otherwise they won't be
- * included in the outline. An unordered list containing links will be appended to the target element.
- *
- * If no headings are found for the outline, the `ifEmpty()` function will be called with a `node-html-parser` object as
- * the first argument. This can be used to toggle classes or remove elements when the outline is empty.
- *
- * See the `node-html-parser` docs for more details: https://www.npmjs.com/package/node-html-parser
- */
-export function outlinePlugin(options = {}) {
-  options = {
-    container: 'body',
-    target: '.outline',
-    selector: 'h2,h3',
-    ifEmpty: () => null,
-    ...options
-  };
-
-  return function (eleventyConfig) {
-    eleventyConfig.addTransform('outline', content => {
-      const doc = parse(content);
-      const container = doc.querySelector(options.container);
-      const ul = parse('<ul></ul>');
-      let numLinks = 0;
-
-      if (!container) {
-        return content;
-      }
-
-      container.querySelectorAll(options.selector).forEach(heading => {
-        const id = heading.getAttribute('id');
-        const level = heading.tagName.slice(1);
-        const clone = parse(heading.outerHTML);
-
-        if (heading.closest('[data-no-outline]')) {
-          return;
-        }
-
-        // Create a clone of the heading so we can remove links and [data-no-outline] elements from the text content
-        clone.querySelectorAll('a').forEach(a => a.remove());
-        clone.querySelectorAll('[data-no-outline]').forEach(el => el.remove());
-
-        // Generate the link
-        const li = parse(`<li data-level="${level}"><a></a></li>`);
-        const a = li.querySelector('a');
-        a.setAttribute('href', `#${encodeURIComponent(id)}`);
-        a.textContent = clone.textContent.trim().replace(/#$/, '');
-
-        // Add it to the list
-        ul.firstChild.appendChild(li);
-        numLinks++;
-      });
-
-      if (numLinks > 0) {
-        // Append the list to all matching targets
-        doc.querySelectorAll(options.target).forEach(target => {
-          target.appendChild(parse(ul.outerHTML));
-        });
-      } else {
-        // Remove if empty
-        options.ifEmpty(doc);
-      }
-
-      return doc.toString();
-    });
-  };
-}

docs/_utils/replace-text.js

@@ -1,19 +0,0 @@
-/**
- * Eleventy plugin to replace arbitrary text in the page's HTML.
- *
- * @param replacement - The terms to replace and what to replace them with. This must be an object (or an array of
- * objects) containing a `replace` key that's a string or RegExp and a `replaceWith` key that's a string.
- */
-export function replaceTextPlugin(replacements = []) {
-  replacements = Array.isArray(replacements) ? replacements : [replacements];
-
-  return function (eleventyConfig) {
-    eleventyConfig.addTransform('replace-text', function (content) {
-      replacements.forEach(replacement => {
-        content = content.replace(replacement.replace, replacement.replaceWith);
-      });
-
-      return content;
-    });
-  };
-}

docs/_utils/search.js

@@ -1,76 +0,0 @@
-/* eslint-disable no-invalid-this */
-import { dirname, join } from 'path';
-import { mkdir, writeFile } from 'fs/promises';
-import { parse } from 'node-html-parser';
-import lunr from 'lunr';
-
-function collapseWhitespace(string) {
-  return string.replace(/\s+/g, ' ');
-}
-
-/**
- * Eleventy plugin to build a Lunr search index.
- */
-export function searchPlugin(options = {}) {
-  options = {
-    filename: '',
-    selectorsToIgnore: [],
-    getTitle: doc => doc.querySelector('title')?.textContent ?? '',
-    getDescription: doc => doc.querySelector('meta[name="description"]')?.getAttribute('content') ?? '',
-    getHeadings: doc => [...doc.querySelectorAll('h1, h2, h3, h4, h5, h6')].map(heading => heading.textContent ?? ''),
-    getContent: doc => doc.querySelector('body')?.textContent ?? '',
-    ...options
-  };
-
-  return function (eleventyConfig) {
-    const pagesToIndex = [];
-
-    eleventyConfig.addTransform('search', function (content) {
-      const doc = parse(content, {
-        blockTextElements: {
-          script: false,
-          noscript: false,
-          style: false,
-          pre: false,
-          code: false
-        }
-      });
-
-      // Remove content that shouldn't be searchable to reduce the index size
-      options.selectorsToIgnore.forEach(selector => {
-        doc.querySelectorAll(selector).forEach(el => el.remove());
-      });
-
-      pagesToIndex.push({
-        title: collapseWhitespace(options.getTitle(doc)),
-        description: collapseWhitespace(options.getDescription(doc)),
-        headings: options.getHeadings(doc).map(collapseWhitespace),
-        content: collapseWhitespace(options.getContent(doc)),
-        url: this.page.url === '/' ? '/' : this.page.url.replace(/\/$/, '')
-      });
-
-      return content;
-    });
-
-    eleventyConfig.on('eleventy.after', ({ dir }) => {
-      const outputFilename = join(dir.output, 'search.json');
-      const map = [];
-      const searchIndex = lunr(async function () {
-        let index = 0;
-
-        this.ref('id');
-        this.field('t', { boost: 20 });
-        this.field('h', { boost: 10 });
-        this.field('c');
-
-        for (const page of pagesToIndex) {
-          this.add({ id: index, t: page.title, h: page.headings, c: page.content });
-          map[index] = { title: page.title, description: page.description, url: page.url };
-          index++;
-        }
-        await mkdir(dirname(outputFilename), { recursive: true });
-        await writeFile(outputFilename, JSON.stringify({ searchIndex, map }), 'utf-8');
-      });
-    });
-  };
-}