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.

.eleventy.cjs

@@ -0,0 +1,15 @@
+const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
+
+module.exports = function(eleventyConfig) {
+  eleventyConfig.addPlugin(syntaxHighlight);
+  return {
+    dir: {
+      input: "docs-src",
+      output: "docs"
+    },
+    templateExtensionAliases: {
+      "11ty.cjs": "11ty.js",
+      "11tydata.cjs": "11tydata.js"
+    }
+  };
+};

custom-elements.json

@@ -0,0 +1,51 @@
+{
+  "version": "experimental",
+  "tags": [
+    {
+      "name": "my-element",
+      "description": "An example element.",
+      "attributes": [
+        {
+          "name": "name",
+          "description": "The name to say \"Hello\" to.",
+          "type": "string",
+          "default": "\"World\""
+        },
+        {
+          "name": "count",
+          "description": "The number of times the button has been clicked.",
+          "type": "number",
+          "default": "0"
+        }
+      ],
+      "properties": [
+        {
+          "name": "name",
+          "attribute": "name",
+          "description": "The name to say \"Hello\" to.",
+          "type": "string",
+          "default": "\"World\""
+        },
+        {
+          "name": "count",
+          "attribute": "count",
+          "description": "The number of times the button has been clicked.",
+          "type": "number",
+          "default": "0"
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "description": "This element has a slot"
+        }
+      ],
+      "cssParts": [
+        {
+          "name": "button",
+          "description": "The button"
+        }
+      ]
+    }
+  ]
+}

docs-src/_README.md

@@ -0,0 +1,7 @@
+This directory containts the sources for the static site contained in the /docs/ directory. The site is based on the [eleventy](11ty.dev) static site generator.
+
+The site is intended to be used with GitHub pages. To enable the site go to the GitHub settings and change the GitHub Pages "Source" setting to "master branch /docs folder".
+
+To view the site locally, run `npm run serve`.
+
+To edit the site, add to or edit the files in this directory then run `npm run docs` to build the site. The built files must be checked in and pushed to GitHub to appear on GitHub pages.

docs-src/_data/api.11tydata.js

@@ -0,0 +1,8 @@
+const fs = require('fs');
+
+module.exports = () => {
+  const customElements = JSON.parse(fs.readFileSync('custom-elements.json', 'utf-8'));
+  return {
+    customElements,
+  };
+};

docs-src/_includes/example.11ty.cjs

@@ -0,0 +1,34 @@
+const page = require('./page.11ty.cjs');
+
+/**
+ * This template extends the page template and adds an examples list.
+ */
+module.exports = function(data) {
+
+  return page({
+    ...data,
+    content: renderExample(data),
+  });
+};
+
+const renderExample = ({name, content, collections, page}) => {
+  return `
+    <h1>Example: ${name}</h1>
+    <section class="examples">
+      <nav class="collection">
+        <ul>
+          ${collections.example === undefined
+              ? ''
+              : collections.example.map((post) => `
+                  <li class=${post.url === page.url ? 'selected' : ''}>
+                    <a href="/docs${post.url}">${ post.data.description.replace('<', '&lt;') }</a>
+                  </li>
+                `).join('')}
+        </ul>
+      </nav>
+      <div>
+        ${content}
+      </div>
+    </section>
+  `;
+};

docs-src/_includes/footer.11ty.cjs

@@ -0,0 +1,9 @@
+module.exports = function(data) {
+  return `
+<footer>
+  <p>
+    Made with
+    <a href="https://github.com/PolymerLabs/lit-element-starter-ts">lit-element-starter-ts</a>
+  </p>
+</footer>`;
+};

docs-src/_includes/header.11ty.cjs

@@ -0,0 +1,7 @@
+module.exports = function(data) {
+  return `
+<header>
+  <h1>&lt;my-element></h1>
+  <h2>A web component just for me.</h2>
+</header>`;
+};

docs-src/_includes/nav.11ty.cjs

@@ -0,0 +1,9 @@
+module.exports = function(data) {
+  return `
+<nav>
+  <a href="/docs/">Home</a>
+  <a href="/docs/examples/">Examples</a>
+  <a href="/docs/api/">API</a>
+  <a href="/docs/install/">Install</a>
+</nav>`;
+};

docs-src/_includes/page.11ty.cjs

@@ -0,0 +1,30 @@
+const header = require('./header.11ty.cjs');
+const footer = require('./footer.11ty.cjs');
+const nav = require('./nav.11ty.cjs');
+
+module.exports = function(data) {
+  return `
+<!doctype html>
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>${data.title}</title>
+    <link rel="stylesheet" href="/docs/docs.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Roboto+Mono">
+    <link href="/node_modules/prismjs/themes/prism-okaidia.css" rel="stylesheet" />
+    <script type="module" src="/my-element.js"></script>
+  </head>
+  <body>
+    ${header()}
+    ${nav(data)}
+    <div id="main-wrapper">
+      <main>
+        ${data.content}
+      </main>
+    </div>
+    ${footer()}
+  </body>
+</html>`;
+};

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);

docs-src/examples/index.md

@@ -0,0 +1,34 @@
+---
+layout: example.11ty.cjs
+title: <my-element> ⌲ Examples ⌲ Basic
+tags: example
+name: Basic
+description: A basic example
+---
+
+<style>
+  my-element p {
+    border: solid 1px blue;
+    padding: 8px;
+  }
+</style>
+<my-element>
+  <p>This is child content</p>
+</my-element>
+
+<h3>CSS</h3>
+
+```css
+  p {
+    border: solid 1px blue;
+    padding: 8px;
+  }
+```
+
+<h3>HTML</h3>
+
+```html
+<my-element>
+  <p>This is child content</p>
+</my-element>
+```

docs-src/examples/name-property.md

@@ -0,0 +1,15 @@
+---
+layout: example.11ty.cjs
+title: <my-element> ⌲ Examples ⌲ Name Property
+tags: example
+name: Name Property
+description: Setting the name property
+---
+
+<my-element name="Earth"></my-element>
+
+<h3>HTML</h3>
+
+```html
+<my-element name="Earth"></my-element>
+```

docs-src/index.md

@@ -0,0 +1,72 @@
+---
+layout: page.11ty.cjs
+title: <my-element> ⌲ Home
+---
+
+# &lt;my-element>
+
+`<my-element>` is an awesome element. It's a great introduction to building web components with LitElement, with nice documentation site as well.
+
+## As easy as HTML
+
+<section class="columns">
+  <div>
+
+`<my-element>` is just an HTML element. You can it anywhere you can use HTML!
+
+```html
+<my-element></my-element>
+```
+
+  </div>
+  <div>
+
+<my-element></my-element>
+
+  </div>
+</section>
+
+## Configure with attributes
+
+<section class="columns">
+  <div>
+
+`<my-element>` can be configured with attributed in plain HTML.
+
+```html
+<my-element name="HTML"></my-element>
+```
+
+  </div>
+  <div>
+
+<my-element name="HTML"></my-element>
+
+  </div>
+</section>
+
+## Declarative rendering
+
+<section class="columns">
+  <div>
+
+`<my-element>` can be used with declarative rendering libraries like Angular, React, Vue, and lit-html
+
+```js
+import {html, render} from 'lit-html';
+
+const name="lit-html";
+
+render(html`
+  <h2>This is a my-element>h2>
+  <my-element .name=${name}></my-element>
+`, document.body);
+```
+
+  </div>
+  <div>
+
+<my-element name="lit-html"></my-element>
+
+  </div>
+</section>

docs-src/install.md

@@ -0,0 +1,30 @@
+---
+layout: page.11ty.cjs
+title: <my-element> ⌲ Install
+---
+
+# Install
+
+`<my-element>` is distributed on npm, so you can install it locally or use it via npm CDNs like unpkg.com.
+
+## Local Installation
+
+```bash
+npm i my-element
+```
+
+## CDN
+
+npm CDNs like [unpkg.com]() can directly serve files that have been published to npm. This works great for standard JavaScript modules that the browser can load natively.
+
+For this element to work from unpkg.com specifically, you need to include the `?module` query parameter, which tells unpkg.com to rewrite "bare" module specificers to full URLs.
+
+### HTML
+```html
+<script type="module" src="https://unpkg.com/my-element?module"></script>
+```
+
+### JavaScript
+```html
+import {MyElement} from 'https://unpkg.com/my-element?module';
+```

docs-src/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}

docs/api/index.html

@@ -0,0 +1,111 @@
+
+<!doctype html>
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title><my-element> ⌲ Docs</title>
+    <link rel="stylesheet" href="/docs/docs.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Roboto+Mono">
+    <link href="/node_modules/prismjs/themes/prism-okaidia.css" rel="stylesheet" />
+    <script type="module" src="/my-element.js"></script>
+  </head>
+  <body>
+    
+<header>
+  <h1>&lt;my-element></h1>
+  <h2>A web component just for me.</h2>
+</header>
+    
+<nav>
+  <a href="/docs/">Home</a>
+  <a href="/docs/examples/">Examples</a>
+  <a href="/docs/api/">API</a>
+  <a href="/docs/install/">Install</a>
+</nav>
+    <div id="main-wrapper">
+      <main>
+        
+      <h1>API</h1>
+      
+        <h2>&lt;my-element></h2>
+        <div>
+          An example element.
+        </div>
+        
+    <h3>Attributes</h3>
+    <table>
+      <tr>
+        <th>Name</th><th>Description</th><th>Type</th><th>Default</th>
+      </tr>
+      
+        <tr>
+          <td>name</td><td>The name to say "Hello" to.</td><td>string</td><td>"World"</td>
+        </tr>
+      
+        <tr>
+          <td>count</td><td>The number of times the button has been clicked.</td><td>number</td><td>0</td>
+        </tr>
+      
+    </table>
+  
+        
+    <h3>Properties</h3>
+    <table>
+      <tr>
+        <th>Name</th><th>Attribute</th><th>Description</th><th>Type</th><th>Default</th>
+      </tr>
+      
+        <tr>
+          <td>name</td><td>name</td><td>The name to say "Hello" to.</td><td>string</td><td>"World"</td>
+        </tr>
+      
+        <tr>
+          <td>count</td><td>count</td><td>The number of times the button has been clicked.</td><td>number</td><td>0</td>
+        </tr>
+      
+    </table>
+    
+        
+            
+        
+    <h3>Slots</h3>
+    <table>
+      <tr>
+        <th>Name</th><th>Description</th>
+      </tr>
+      
+        <tr>
+          <td></td><td>This element has a slot</td>
+        </tr>
+      
+    </table>
+    
+        
+    <h3>CSS Shadow Parts</h3>
+    <table>
+      <tr>
+        <th>Name</th><th>Description</th>
+      </tr>
+      
+        <tr>
+          <td>button</td><td>The button</td>
+        </tr>
+      
+    </table>
+  
+        
+        
+    
+      </main>
+    </div>
+    
+<footer>
+  <p>
+    Made with
+    <a href="https://github.com/PolymerLabs/lit-element-starter-ts">lit-element-starter-ts</a>
+  </p>
+</footer>
+  </body>
+</html>

docs/docs.css

@@ -0,0 +1,162 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  color: #333;
+  font-family: 'Open Sans', arial, sans-serif;
+  min-width: min-content;
+  min-height: 100vh;
+  font-size: 18px;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+
+#main-wrapper {
+  flex-grow: 1;
+}
+
+main {
+  max-width: 1024px;
+  margin: 0 auto;
+}
+
+a:visited {
+  color: inherit;
+}
+
+header {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 360px;
+  margin: 0;
+  background: linear-gradient(0deg, rgba(9,9,121,1) 0%, rgba(0,212,255,1) 100%);
+  color: white;
+}
+
+footer {
+  width: 100%;
+  min-height: 120px;
+  background: gray;
+  color: white;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 12px;
+  margin-top: 64px;
+}
+
+h1 {
+  font-size: 2.5em;
+  font-weight: 400;
+}
+
+h2 {
+  font-size: 1.6em;
+  font-weight: 300;
+  margin: 64px 0 12px;
+}
+
+h3 {
+  font-weight: 300;
+}
+
+header h1 {
+  width: auto;
+  font-size: 2.8em;
+  margin: 0;
+}
+
+header h2 {
+  width: auto;
+  margin: 0;
+}
+
+nav {
+  display: grid;
+  width: 100%;
+  max-width: 100%;
+  grid-template-columns: repeat(auto-fit, 240px);
+  justify-content: center;
+  border-bottom: 1px solid #efefef;
+}
+
+nav > a {
+  color: #444;
+  display: block;
+  flex: 1;
+  font-size: 18px;
+  padding: 20px 0;
+  text-align: center;
+  text-decoration: none;
+}
+
+nav > a:hover {
+  text-decoration: underline;
+}
+
+nav.collection {
+  border: none;
+}
+
+nav.collection > ul {
+  padding: 0;
+  list-style: none;
+}
+
+nav.collection > ul > li {
+  padding: 4px 0;
+}
+
+nav.collection > ul > li.selected {
+  font-weight: 600;
+}
+
+nav.collection a {
+  text-decoration: none;
+}
+
+nav.collection a:hover {
+  text-decoration: underline;
+}
+
+section.columns {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(400px, 488px));
+  grid-gap: 48px;
+  justify-content: center;
+}
+
+section.columns > div {
+  flex: 1;
+}
+
+section.examples {
+  display: grid;
+  grid-template-columns: 240px minmax(400px, 784px);
+  grid-gap: 48px;
+  justify-content: center;
+}
+
+section.examples h2:first-of-type {
+  margin-top: 0;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+}
+th {
+  font-weight: 600;
+}
+
+td, th {
+  border: solid 1px #aaa;
+  padding: 4px;
+  text-align: left;
+}

docs/docs/index.html

@@ -0,0 +1,96 @@
+
+<!doctype html>
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title><my-element> ⌲ Docs</title>
+    <link rel="stylesheet" href="/docs/docs.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Roboto+Mono">
+    <link href="/node_modules/prismjs/themes/prism-okaidia.css" rel="stylesheet" />
+    <script type="module" src="/my-element.js"></script>
+  </head>
+  <body>
+    
+<header>
+  <h1>&lt;my-element></h1>
+  <h2>A web component just for me.</h2>
+</header>
+    
+<nav>
+  <a href="/docs/">Home</a>
+  <a href="/docs/examples/">Examples</a>
+  <a href="/docs/docs/">Documentation</a>
+  <a href="/docs/install/">Install</a>
+</nav>
+    <main>
+      
+      <h1>Documentation</h1>
+      
+        <h2>&lt;my-element></h2>
+        <div>
+          An example element.
+        </div>
+        
+    <h3>Attributes</h3>
+    <table>
+      <tr>
+        <th>name</th><th>description</th><th>type</th><th>default</th>
+      </tr>
+      
+        <tr>
+          <td>name</td><td>undefined</td><td>string</td><td>"World"</td>
+        </tr>
+      
+        <tr>
+          <td>count</td><td>The number of times the button has been clicked.</td><td>number</td><td>0</td>
+        </tr>
+      
+    </table>
+  
+        
+    <h3>Properties</h3>
+    <table>
+      <tr>
+        <th>name</th><th>attribute</th><th>description</th><th>type</th><th>default</th>
+      </tr>
+      
+        <tr>
+          <td>name</td><td>name</td><td>undefined</td><td>string</td><td>"World"</td>
+        </tr>
+      
+        <tr>
+          <td>count</td><td>count</td><td>The number of times the button has been clicked.</td><td>number</td><td>0</td>
+        </tr>
+      
+    </table>
+    
+            
+        
+    <h3>Slots</h3>
+    <table>
+      <tr>
+        <th>name</th><th>description</th>
+      </tr>
+      
+        <tr>
+          <td></td><td>This element has a slot</td>
+        </tr>
+      
+    </table>
+    
+        
+        
+        
+    
+    </main>
+    
+<footer>
+  <p>
+    Made with
+    <a href="https://github.com/PolymerLabs/lit-element-starter-ts">lit-element-starter-ts</a>
+  </p>
+</footer>
+  </body>
+</html>

docs/examples/basic/index.html

@@ -0,0 +1,54 @@
+
+<!doctype html>
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title><my-element> ⌲ Examples ⌲ Basic</title>
+    <link rel="stylesheet" href="/docs/docs.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Roboto+Mono">
+    <link href="/node_modules/prismjs/themes/prism-okaidia.css" rel="stylesheet" />
+    <script type="module" src="/my-element.js"></script>
+  </head>
+  <body>
+    
+<header>
+  <h1>&lt;my-element></h1>
+  <h2>A web component just for me.</h2>
+</header>
+    
+<nav>
+  <a href="/docs/">Home</a>
+  <a href="/docs/examples/">Examples</a>
+  <a href="/docs/api/">API</a>
+  <a href="/docs/install/">Install</a>
+</nav>
+    <div id="main-wrapper">
+      <main>
+        <h2>Basic Use</h2>
+<style>
+  my-element p {
+    border: solid 1px blue;
+    padding: 8px;
+  }
+</style>
+<my-element>
+  <p>This is child content</p>
+</my-element>
+<h3>CSS</h3>
+<pre class="language-css"><code class="language-css"><span class="highlight-line">  <span class="token selector">p</span> <span class="token punctuation">{</span></span><br><span class="highlight-line">    <span class="token property">border</span><span class="token punctuation">:</span> solid 1px blue<span class="token punctuation">;</span></span><br><span class="highlight-line">    <span class="token property">padding</span><span class="token punctuation">:</span> 8px<span class="token punctuation">;</span></span><br><span class="highlight-line">  <span class="token punctuation">}</span></span></code></pre>
+<h3>HTML</h3>
+<pre class="language-html"><code class="language-html"><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-element</span><span class="token punctuation">></span></span></span><br><span class="highlight-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>This is child content<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span></span><br><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-element</span><span class="token punctuation">></span></span></span></code></pre>
+
+      </main>
+    </div>
+    
+<footer>
+  <p>
+    Made with
+    <a href="https://github.com/PolymerLabs/lit-element-starter-ts">lit-element-starter-ts</a>
+  </p>
+</footer>
+  </body>
+</html>

docs/examples/index copy/index.html

@@ -0,0 +1,66 @@
+
+<!doctype html>
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title><my-element> ⌲ Examples ⌲ Basic</title>
+    <link rel="stylesheet" href="/docs/docs.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Roboto+Mono">
+    <link href="/node_modules/prismjs/themes/prism-okaidia.css" rel="stylesheet" />
+    <script type="module" src="/my-element.js"></script>
+  </head>
+  <body>
+    
+<header>
+  <h1>&lt;my-element></h1>
+  <h2>A web component just for me.</h2>
+</header>
+    
+<nav>
+  <a href="/docs/">Home</a>
+  <a href="/docs/examples/">Examples</a>
+  <a href="/docs/api/">API</a>
+  <a href="/docs/install/">Install</a>
+</nav>
+    <div id="main-wrapper">
+      <main>
+        
+    <h1>Examples</h1>
+    <nav class="collection">
+      <ul>
+        
+                <li><a href="/docs/examples/">A basic example</a></li>
+              ,
+                <li><a href="/docs/examples/index copy/">A basic example</a></li>
+              
+      </ul>
+    </nav>
+    <h2>Basic Use</h2>
+<style>
+  my-element p {
+    border: solid 1px blue;
+    padding: 8px;
+  }
+</style>
+<my-element>
+  <p>This is child content</p>
+</my-element>
+<h3>CSS</h3>
+<pre class="language-css"><code class="language-css"><span class="highlight-line">  <span class="token selector">p</span> <span class="token punctuation">{</span></span><br><span class="highlight-line">    <span class="token property">border</span><span class="token punctuation">:</span> solid 1px blue<span class="token punctuation">;</span></span><br><span class="highlight-line">    <span class="token property">padding</span><span class="token punctuation">:</span> 8px<span class="token punctuation">;</span></span><br><span class="highlight-line">  <span class="token punctuation">}</span></span></code></pre>
+<h3>HTML</h3>
+<pre class="language-html"><code class="language-html"><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-element</span><span class="token punctuation">></span></span></span><br><span class="highlight-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>This is child content<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span></span><br><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-element</span><span class="token punctuation">></span></span></span></code></pre>
+
+  
+      </main>
+    </div>
+    
+<footer>
+  <p>
+    Made with
+    <a href="https://github.com/PolymerLabs/lit-element-starter-ts">lit-element-starter-ts</a>
+  </p>
+</footer>
+  </body>
+</html>

docs/examples/index.html

@@ -0,0 +1,73 @@
+
+<!doctype html>
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title><my-element> ⌲ Examples ⌲ Basic</title>
+    <link rel="stylesheet" href="/docs/docs.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Roboto+Mono">
+    <link href="/node_modules/prismjs/themes/prism-okaidia.css" rel="stylesheet" />
+    <script type="module" src="/my-element.js"></script>
+  </head>
+  <body>
+    
+<header>
+  <h1>&lt;my-element></h1>
+  <h2>A web component just for me.</h2>
+</header>
+    
+<nav>
+  <a href="/docs/">Home</a>
+  <a href="/docs/examples/">Examples</a>
+  <a href="/docs/api/">API</a>
+  <a href="/docs/install/">Install</a>
+</nav>
+    <div id="main-wrapper">
+      <main>
+        
+    <h1>Example: Basic</h1>
+    <section class="examples">
+      <nav class="collection">
+        <ul>
+          
+                  <li class=selected>
+                    <a href="/docs/examples/">A basic example</a>
+                  </li>
+                
+                  <li class=>
+                    <a href="/docs/examples/name-property/">Setting the name property</a>
+                  </li>
+                
+        </ul>
+      </nav>
+      <div>
+        <style>
+  my-element p {
+    border: solid 1px blue;
+    padding: 8px;
+  }
+</style>
+<my-element>
+  <p>This is child content</p>
+</my-element>
+<h3>CSS</h3>
+<pre class="language-css"><code class="language-css"><span class="highlight-line">  <span class="token selector">p</span> <span class="token punctuation">{</span></span><br><span class="highlight-line">    <span class="token property">border</span><span class="token punctuation">:</span> solid 1px blue<span class="token punctuation">;</span></span><br><span class="highlight-line">    <span class="token property">padding</span><span class="token punctuation">:</span> 8px<span class="token punctuation">;</span></span><br><span class="highlight-line">  <span class="token punctuation">}</span></span></code></pre>
+<h3>HTML</h3>
+<pre class="language-html"><code class="language-html"><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-element</span><span class="token punctuation">></span></span></span><br><span class="highlight-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>This is child content<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span></span><br><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-element</span><span class="token punctuation">></span></span></span></code></pre>
+
+      </div>
+    </section>
+  
+      </main>
+    </div>
+    
+<footer>
+  <p>
+    Made with
+    <a href="https://github.com/PolymerLabs/lit-element-starter-ts">lit-element-starter-ts</a>
+  </p>
+</footer>
+  </body>
+</html>

docs/examples/name-property/index.html

@@ -0,0 +1,63 @@
+
+<!doctype html>
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title><my-element> ⌲ Examples ⌲ Name Property</title>
+    <link rel="stylesheet" href="/docs/docs.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Roboto+Mono">
+    <link href="/node_modules/prismjs/themes/prism-okaidia.css" rel="stylesheet" />
+    <script type="module" src="/my-element.js"></script>
+  </head>
+  <body>
+    
+<header>
+  <h1>&lt;my-element></h1>
+  <h2>A web component just for me.</h2>
+</header>
+    
+<nav>
+  <a href="/docs/">Home</a>
+  <a href="/docs/examples/">Examples</a>
+  <a href="/docs/api/">API</a>
+  <a href="/docs/install/">Install</a>
+</nav>
+    <div id="main-wrapper">
+      <main>
+        
+    <h1>Example: Name Property</h1>
+    <section class="examples">
+      <nav class="collection">
+        <ul>
+          
+                  <li class=>
+                    <a href="/docs/examples/">A basic example</a>
+                  </li>
+                
+                  <li class=selected>
+                    <a href="/docs/examples/name-property/">Setting the name property</a>
+                  </li>
+                
+        </ul>
+      </nav>
+      <div>
+        <p><my-element name="Earth"></my-element></p>
+<h3>HTML</h3>
+<pre class="language-html"><code class="language-html"><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-element</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Earth<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-element</span><span class="token punctuation">></span></span></span></code></pre>
+
+      </div>
+    </section>
+  
+      </main>
+    </div>
+    
+<footer>
+  <p>
+    Made with
+    <a href="https://github.com/PolymerLabs/lit-element-starter-ts">lit-element-starter-ts</a>
+  </p>
+</footer>
+  </body>
+</html>

docs/index.html

@@ -0,0 +1,72 @@
+
+<!doctype html>
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title><my-element> ⌲ Home</title>
+    <link rel="stylesheet" href="/docs/docs.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Roboto+Mono">
+    <link href="/node_modules/prismjs/themes/prism-okaidia.css" rel="stylesheet" />
+    <script type="module" src="/my-element.js"></script>
+  </head>
+  <body>
+    
+<header>
+  <h1>&lt;my-element></h1>
+  <h2>A web component just for me.</h2>
+</header>
+    
+<nav>
+  <a href="/docs/">Home</a>
+  <a href="/docs/examples/">Examples</a>
+  <a href="/docs/api/">API</a>
+  <a href="/docs/install/">Install</a>
+</nav>
+    <div id="main-wrapper">
+      <main>
+        <h1>&lt;my-element&gt;</h1>
+<p><code>&lt;my-element&gt;</code> is an awesome element. It's a great introduction to building web components with LitElement, with nice documentation site as well.</p>
+<h2>As easy as HTML</h2>
+<section class="columns">
+  <div>
+<p><code>&lt;my-element&gt;</code> is just an HTML element. You can it anywhere you can use HTML!</p>
+<pre class="language-html"><code class="language-html"><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-element</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-element</span><span class="token punctuation">></span></span></span></code></pre>
+  </div>
+  <div>
+<p><my-element></my-element></p>
+  </div>
+</section>
+<h2>Configure with attributes</h2>
+<section class="columns">
+  <div>
+<p><code>&lt;my-element&gt;</code> can be configured with attributed in plain HTML.</p>
+<pre class="language-html"><code class="language-html"><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-element</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>HTML<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-element</span><span class="token punctuation">></span></span></span></code></pre>
+  </div>
+  <div>
+<p><my-element name="HTML"></my-element></p>
+  </div>
+</section>
+<h2>Declarative rendering</h2>
+<section class="columns">
+  <div>
+<p><code>&lt;my-element&gt;</code> can be used with declarative rendering libraries like Angular, React, Vue, and lit-html</p>
+<pre class="language-js"><code class="language-js"><span class="highlight-line"><span class="token keyword">import</span> <span class="token punctuation">{</span>html<span class="token punctuation">,</span> render<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'lit-html'</span><span class="token punctuation">;</span></span><br><span class="highlight-line"></span><br><span class="highlight-line"><span class="token keyword">const</span> name<span class="token operator">=</span><span class="token string">"lit-html"</span><span class="token punctuation">;</span></span><br><span class="highlight-line"></span><br><span class="token function">render</span><span class="token punctuation">(</span>html<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><br><span class="highlight-line">  &lt;h2>This is a my-element>h2></span><br><span class="highlight-line">  &lt;my-element .name=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">>&lt;/my-element></span><br></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> document<span class="token punctuation">.</span>body<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
+  </div>
+  <div>
+<p><my-element name="lit-html"></my-element></p>
+  </div>
+</section>
+
+      </main>
+    </div>
+    
+<footer>
+  <p>
+    Made with
+    <a href="https://github.com/PolymerLabs/lit-element-starter-ts">lit-element-starter-ts</a>
+  </p>
+</footer>
+  </body>
+</html>

docs/install/index.html

@@ -0,0 +1,51 @@
+
+<!doctype html>
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title><my-element> ⌲ Install</title>
+    <link rel="stylesheet" href="/docs/docs.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Roboto+Mono">
+    <link href="/node_modules/prismjs/themes/prism-okaidia.css" rel="stylesheet" />
+    <script type="module" src="/my-element.js"></script>
+  </head>
+  <body>
+    
+<header>
+  <h1>&lt;my-element></h1>
+  <h2>A web component just for me.</h2>
+</header>
+    
+<nav>
+  <a href="/docs/">Home</a>
+  <a href="/docs/examples/">Examples</a>
+  <a href="/docs/api/">API</a>
+  <a href="/docs/install/">Install</a>
+</nav>
+    <div id="main-wrapper">
+      <main>
+        <h1>Install</h1>
+<p><code>&lt;my-element&gt;</code> is distributed on npm, so you can install it locally or use it via npm CDNs like unpkg.com.</p>
+<h2>Local Installation</h2>
+<pre class="language-bash"><code class="language-bash"><span class="highlight-line"><span class="token function">npm</span> i my-element</span></code></pre>
+<h2>CDN</h2>
+<p>npm CDNs like <a href="">unpkg.com</a> can directly serve files that have been published to npm. This works great for standard JavaScript modules that the browser can load natively.</p>
+<p>For this element to work from unpkg.com specifically, you need to include the <code>?module</code> query parameter, which tells unpkg.com to rewrite &quot;bare&quot; module specificers to full URLs.</p>
+<h3>HTML</h3>
+<pre class="language-html"><code class="language-html"><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://unpkg.com/my-element?module<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span></span></code></pre>
+<h3>JavaScript</h3>
+<pre class="language-html"><code class="language-html"><span class="highlight-line">import {MyElement} from 'https://unpkg.com/my-element?module';</span></code></pre>
+
+      </main>
+    </div>
+    
+<footer>
+  <p>
+    Made with
+    <a href="https://github.com/PolymerLabs/lit-element-starter-ts">lit-element-starter-ts</a>
+  </p>
+</footer>
+  </body>
+</html>

package.json

@@ -10,8 +10,10 @@
     "build:watch": "tsc --watch",
     "lint": "lit-analyzer && eslint 'src/**/*.ts'",
     "format": "prettier src/* --write",
+    "docs": "npm run analyze & eleventy --config=.eleventy.cjs",
+    "docs:watch": "eleventy --config=.eleventy.cjs --watch",
     "analyze": "wca analyze \"src/**/*.ts\" --outFile custom-elements.json",
-    "serve": "es-dev-server --app-index demo/index.html --node-resolve --watch --open",
+    "serve": "es-dev-server --node-resolve --watch",
     "test": "karma start karma.conf.cjs",
     "test:watch": "karma start karma.conf.cjs --auto-watch=true --single-run=false",
     "test:update-snapshots": "karma start karma.conf.cjs --update-snapshots",
@@ -28,6 +30,8 @@
     "lit-element": "^2.2.1"
   },
   "devDependencies": {
+    "@11ty/eleventy": "^0.9.0",
+    "@11ty/eleventy-plugin-syntaxhighlight": "^2.0.3",
     "@open-wc/testing": "^2.4.2",
     "@open-wc/testing-karma": "^3.2.19",
     "@types/chai": "^4.2.7",

src/my-element.ts

@@ -14,6 +14,12 @@
 
 import {LitElement, html, customElement, property, css} from 'lit-element';
 
+/**
+ * An example element.
+ *
+ * @slot - This element has a slot
+ * @csspart button - The button
+ */
 @customElement('my-element')
 export class MyElement extends LitElement {
   static styles = css`
@@ -25,16 +31,24 @@ export class MyElement extends LitElement {
     }
   `;
 
+  /**
+   * The name to say "Hello" to.
+   */
   @property()
   name = 'World';
 
+  /**
+   * The number of times the button has been clicked.
+   */
   @property({type: Number})
   count = 0;
 
   render() {
     return html`
       <h1>Hello, ${this.name}!</h1>
-      <button @click=${this._onClick}>Click Count: ${this.count}</button>
+      <button @click=${this._onClick} part="button">
+        Click Count: ${this.count}
+      </button>
       <slot></slot>
     `;
   }
@@ -42,6 +56,10 @@ export class MyElement extends LitElement {
   private _onClick() {
     this.count++;
   }
+
+  foo(): string {
+    return 'foo';
+  }
 }
 
 declare global {