Add 11ty navigation plugin and some skeleton pages

Author: justinfagnani

package-lock.json

@@ -42,7 +42,7 @@ export class WCONavPage extends WCOPage {
   protected override renderMain() {
     console.log('WCONavPage renderMain');
     return html`
-      <nav id="main-outline">[Docs Outline]</nav>
+      <nav id="main-outline"><slot name="outline"></slot></nav>
       <article>${this.renderContent()}</article>
       <nav id="right-nav">[Page ToC]</nav>
     `;

packages/site-client/src/components/wco-nav-page.ts

@@ -6,8 +6,10 @@
 
 const fs = require('fs');
 const pathlib = require('path');
+const eleventyNavigationPlugin = require('@11ty/eleventy-navigation');
 
 module.exports = (eleventyConfig) => {
+  eleventyConfig.addPlugin(eleventyNavigationPlugin);
   symlinkForce('../assets', '_dev/assets');
   symlinkForce('../../site-client/lib/entrypoints', '_dev/js');
   return {

packages/site-content/eleventy.config.dev.cjs

@@ -4,7 +4,10 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+const eleventyNavigationPlugin = require('@11ty/eleventy-navigation');
+
 module.exports = (eleventyConfig) => {
+  eleventyConfig.addPlugin(eleventyNavigationPlugin);
   eleventyConfig.addPassthroughCopy('site/assets');
   eleventyConfig.addPassthroughCopy({'../site-client/bundled': 'js'});
   return {

packages/site-content/eleventy.config.prod.cjs

@@ -94,6 +94,7 @@
   },
   "dependencies": {
     "@11ty/eleventy": "^1.0.2",
+    "@11ty/eleventy-navigation": "^0.3.5",
     "@webcomponents/internal-site-client": "^0.0.0",
     "@webcomponents/internal-site-server": "^0.0.0"
   }

packages/site-content/package.json

@@ -14,10 +14,21 @@ module.exports = {
     // URL isn't exactly a Location, but it's close enough for read-only uses
     window.location = new URL('http://localhost:5450/docs/');
 
+    const navigationEntries = this.eleventyNavigation(data.collections.all);
+
+    // TODO: use custom navigation HTML generation so that we can leave out
+    // links for section items.
+    // See https://github.com/lit/lit.dev/blob/main/packages/lit-dev-content/site/_includes/docs-nav.html
+    const navigationHTML = this.eleventyNavigationToHtml(navigationEntries);
+
     return [
       ...renderPage({
         ...data,
-        content: html`<wco-nav-page>${unsafeHTML(data.content)}</wco-nav-page>`,
+        content: html`
+          <wco-nav-page>
+            <div slot="outline">${unsafeHTML(navigationHTML)}</div>
+            ${unsafeHTML(data.content)}
+          </wco-nav-page>`,
       }),
     ].join('');
   },

packages/site-content/site/_includes/layouts/docs.11ty.cjs

@@ -1,5 +1,8 @@
 ---
 title: 'Web Components | Docs'
+eleventyNavigation:
+  key: Introduction
+  order: 1
 ---
 # Introduction to Web Components
 

packages/site-content/site/docs/index.md

@@ -0,0 +1,10 @@
+---
+title: 'Web Components | Using Web Components | Basics'
+eleventyNavigation:
+  key: Using Basics
+  parent: Using
+  order: 1
+---
+# Using Web Components Basics
+
+_TODO_

packages/site-content/site/docs/using/basics.md

@@ -0,0 +1,9 @@
+---
+title: 'Web Components | Using Web Components'
+eleventyNavigation:
+  key: Using
+  order: 2
+permalink: false
+---
+
+<!-- This file exists only to create a section heading -->

packages/site-content/site/docs/using/index.md

@@ -0,0 +1,10 @@
+---
+title: 'Web Components | Writing Web Components | Basics'
+eleventyNavigation:
+  key: Writing Basics
+  parent: Writing
+  order: 1
+---
+# Writing Web Components Basics
+
+_TODO_