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.
2019-12-19 20:48:45 -08:00
parent 2b3e914666
commit fc662728eb
28 changed files with 5770 additions and 6 deletions
--- a/docs-src/_includes/example.11ty.cjs
+++ b/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>
+  `;
+};
--- a/docs-src/_includes/footer.11ty.cjs
+++ b/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>`;
+};
--- a/docs-src/_includes/header.11ty.cjs
+++ b/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>`;
+};
--- a/docs-src/_includes/nav.11ty.cjs
+++ b/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>`;
+};
--- a/docs-src/_includes/page.11ty.cjs
+++ b/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>`;
+};