Add a static site generator

There is no build for the element or site utilities like PrismJS yet, so this site only works locally at the moment.

docs-src/api.11ty.cjs

@@ -0,0 +1,85 @@
+/**
+ * This page generates its content from the custom-element.json file as read by
+ * the _data/api.11tydata.js script.
+ */
+module.exports = class Docs {
+  data() {
+    return {
+      layout: 'page.11ty.cjs',
+      title: '<my-element> ⌲ Docs',
+    };
+  }
+
+  render(data) {
+    const customElements = data.api['11tydata'].customElements;
+    const tags = customElements.tags;
+    return `
+      <h1>API</h1>
+      ${tags.map((tag) => `
+        <h2>&lt;${tag.name}></h2>
+        <div>
+          ${tag.description}
+        </div>
+        ${renderTable(
+          'Attributes',
+          ['name', 'description', 'type', 'default'],
+          tag.attributes)}
+        ${renderTable(
+          'Properties',
+          ['name', 'attribute', 'description', 'type', 'default'],
+          tag.properties)}  
+        ${/*
+           * Methods are not output by web-component-analyzer yet (a bug), so
+           * this is a placeholder so that at least _something_ will be output
+           * when that is fixed, and element maintainers will hopefully have a
+           * signal to update this file to add the neccessary columns.
+           */
+          renderTable(
+          'Methods',
+          ['name', 'description'],
+          tag.methods)}
+        ${renderTable(
+          'Events',
+          ['name', 'description'],
+          tag.events)}    
+        ${renderTable(
+          'Slots',
+          ['name', 'description'],
+          tag.slots)}  
+        ${renderTable(
+          'CSS Shadow Parts',
+          ['name', 'description'],
+          tag.cssParts)}
+        ${renderTable(
+          'CSS Custom Properties',
+          ['name', 'description'],
+          tag.cssProperties)}
+        `).join('')}
+    `;
+  }
+}
+
+/**
+ * Renders a table of data, plucking the given properties from each item in
+ * `data`.
+ */
+const renderTable = (name, properties, data) => {
+  if (data === undefined) {
+    return ''
+  }
+  return `
+    <h3>${name}</h3>
+    <table>
+      <tr>
+        ${properties.map((p) => `<th>${capitalize(p)}</th>`).join('')}
+      </tr>
+      ${data.map((i) => `
+        <tr>
+          ${properties.map((p) => `<td>${i[p]}</td>`).join('')}
+        </tr>
+      `).join('')}
+    </table>
+  `
+};
+
+const capitalize = (s) => s[0].toUpperCase() + s.substring(1);