Make wco-docs-page component and move nav HTML generation into it (#1412)

- Make a wco-docs-page component
- Move nav HTML generation into wco-nav-page component
- Fix hydration of docs page

Also:
- Rename hydrate.js to hydrate-support.js
- Move hydrate-support directly into base template

Author: aomarks

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

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {customElement} from 'lit/decorators.js';
+import {WCONavPage} from './wco-nav-page.js';
+
+export type {NavEntry} from './wco-nav-page.js';
+
+@customElement('wco-docs-page')
+export class WCODocsPage extends WCONavPage {}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'wco-docs-page': WCODocsPage;
+  }
+}

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

@@ -4,11 +4,18 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {html, css} from 'lit';
-import {customElement} from 'lit/decorators.js';
+import {html, css, TemplateResult} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import {classMap} from 'lit/directives/class-map.js';
 import {WCOPage} from './wco-page.js';
 import './wco-top-bar.js';
 
+export interface NavEntry {
+  key: string;
+  url: string;
+  children?: NavEntry[];
+}
+
 /**
  * A page with left and right side navigation areas.
  */
@@ -36,16 +43,45 @@ export class WCONavPage extends WCOPage {
         align-items: center;
         border: solid 1px red;
       }
+
+      nav li.active {
+        font-weight: bold;
+      }
     `,
   ];
 
+  @property({attribute: false})
+  navEntries?: NavEntry[];
+
   protected override renderMain() {
     return html`
-      <nav id="main-outline"><slot name="outline"></slot></nav>
+      <nav id="main-outline">${this._renderNav(this.navEntries)}</nav>
       <article>${this.renderContent()}</article>
       <nav id="right-nav">[Page ToC]</nav>
     `;
   }
+
+  private _renderNav(
+    entries: NavEntry[] | undefined
+  ): TemplateResult | undefined {
+    if (entries === undefined || entries.length === 0) {
+      return;
+    }
+    return html`<ul>
+      ${entries.map(
+        (entry) => html`<li
+          class="${classMap({
+            active: entry.url === globalThis.location.pathname,
+          })}"
+        >
+          ${entry.url
+            ? html`<a href="${entry.url}">${entry.key}</a>`
+            : entry.key}
+          ${this._renderNav(entry.children)}
+        </li>`
+      )}
+    </ul>`;
+  }
 }
 
 declare global {

packages/site-client/src/entrypoints/docs-hydrate.ts

@@ -0,0 +1,15 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {NavEntry} from '../components/wco-nav-page.js';
+
+const data = (globalThis as unknown as {__ssrData: [NavEntry[]]}).__ssrData;
+
+const navEntries = data[0];
+// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+const el = document.querySelector('wco-docs-page')!;
+el.navEntries = navEntries;
+el.removeAttribute('defer-hydration');

packages/site-client/src/entrypoints/docs.ts

@@ -0,0 +1,15 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import '../components/wco-docs-page.js';
+import type {NavEntry} from '../components/wco-docs-page.js';
+import {html} from 'lit';
+import {unsafeHTML} from 'lit/directives/unsafe-html.js';
+
+export const renderDocsPage = (content: string, navEntries: NavEntry[]) =>
+  html`<wco-docs-page .navEntries=${navEntries}
+    >${unsafeHTML(content)}</wco-docs-page
+  >`;

packages/site-client/src/entrypoints/hydrate.ts renamed to packages/site-client/src/entrypoints/hydrate-support.ts

@@ -4,36 +4,38 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-const {navToHTML} = require('./nav.cjs');
-
 module.exports = {
   async render(data) {
-    const {renderPage, html, unsafeHTML} = await import(
-      '../../../templates/lib/base.js'
-    );
+    const {renderPage} = await import('../../../templates/lib/base.js');
     await import(
       '@webcomponents/internal-site-client/lib/components/wco-nav-page.js'
     );
+    const {renderDocsPage} = await import(
+      '@webcomponents/internal-site-client/lib/entrypoints/docs.js'
+    );
 
     // Set location because wco-nav-bar reads pathname from it. URL isn't
     // exactly a Location, but it's close enough for read-only uses
-    globalThis.location = new URL('http://localhost:5450/docs/');
-
-    const navigationEntries = this.eleventyNavigation(data.collections.all);
-
-    const navigationHTML = navToHTML(
-      navigationEntries,
-      {slot: 'outline'},
-      data.page
+    globalThis.location = new URL(
+      `http://localhost:5450${data.page.url || '/'}`
     );
 
+    const navEntries = this.eleventyNavigation(data.collections.all);
+
     return [
-      ...renderPage({
-        ...data,
-        content: html`<wco-nav-page>
-          ${unsafeHTML(navigationHTML)} ${unsafeHTML(data.content)}
-        </wco-nav-page>`,
-      }),
+      ...renderPage(
+        {
+          ...data,
+          content: renderDocsPage(data.content, navEntries),
+          initialData: [navEntries],
+          initScript: '/js/docs-hydrate.js',
+        },
+        {
+          // We need to defer elements from hydrating so that we can
+          // manually provide data to the element in docs-hydrate.js
+          deferHydration: true,
+        }
+      ),
     ].join('');
   },
 };

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

@@ -1,6 +1,4 @@
 {
   "layout": "layouts/docs.11ty.cjs",
-  "scripts": [
-    "../js/homepage.js"
-  ]
+  "scripts": ["/js/docs.js"]
 }

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

@@ -37,6 +37,7 @@ export function* renderPage(
       href="https://fonts.googleapis.com/css?family=Material+Icons&display=block"
       rel="stylesheet"
     />
+    <script type="module" src="/js/hydrate-support.js"></script>
     <!-- TODO (justinfagnani): only add this in dev. In prod we should have
          compiled any process access out. DO_NOT_LAUNCH -->
     <script>

packages/site-content/site/docs/docs.json

@@ -27,7 +27,7 @@ export const handleCatalogRoute = async (
   context.body = Readable.from(
     renderPage({
       title: `Web Components Catalog`,
-      scripts: ['/js/hydrate.js', '/js/catalog.js'],
+      scripts: ['/js/catalog.js'],
       content: html`<wco-catalog-page></wco-catalog-page>`,
     })
   );