[site-content] Add custom nav HTML generator (#1411)

Author: justinfagnani

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

@@ -4,6 +4,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+const {navToHTML} = require('./nav.cjs');
+
 module.exports = {
   async render(data) {
     const {renderPage, html, unsafeHTML} = await import(
@@ -19,17 +21,17 @@ module.exports = {
 
     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);
+    const navigationHTML = navToHTML(
+      navigationEntries,
+      {slot: 'outline'},
+      data.page
+    );
 
     return [
       ...renderPage({
         ...data,
         content: html`<wco-nav-page>
-          <div slot="outline">${unsafeHTML(navigationHTML)}</div>
-          ${unsafeHTML(data.content)}
+          ${unsafeHTML(navigationHTML)} ${unsafeHTML(data.content)}
         </wco-nav-page>`,
       }),
     ].join('');

packages/site-content/site/_includes/layouts/nav.cjs

@@ -0,0 +1,51 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Converts an eleventy-navigation entries array to a nested <ul> list.
+ *
+ * Entries with `url: false` (caused by `permalink: false` in page data) do
+ * not generate a link, and so are just section headers.
+ *
+ * When an entry matches the current page, it's `<li>` element is give the
+ * `active` class.
+ */
+const navToHTML = (navigationEntries, attributes, page) => {
+  const makeItems = (entries) =>
+    entries
+      ?.map(
+        (e) =>
+          `<li ${getEntryClassString(e, page)}>${maybeWrapInLink(
+            e,
+            e.key
+          )}${renderChildren(e.children, page)}</li>`
+      )
+      .join('') ?? '';
+
+  return `<ul ${getAttributesString(attributes)}>${makeItems(
+    navigationEntries
+  )}</ul>`;
+};
+
+const getEntryClassString = (entry, page) =>
+  entry.url === page.url ? 'class="active"' : '';
+
+const maybeWrapInLink = (entry, s) =>
+  entry.url !== false ? `<a href="${entry.url}">${s}</a>` : s;
+
+const renderChildren = (children, page) =>
+  children?.length > 0 ? navToHTML(children, {}, page) : '';
+
+const getAttributesString = (attributes) =>
+  attributes !== undefined
+    ? Object.entries(attributes)
+        .map(([name, value]) => `${name}="${value}"`)
+        .join(' ')
+    : '';
+
+module.exports = {
+  navToHTML,
+};