Move top-bar into Lit templates so it SSRs

justinfagnani · justinfagnani · commit 5ef964bc2ce4 · 2022-10-20T17:50:51.000-07:00
diff --git a/packages/site-content/site/_includes/layouts/base.11ty.cjs b/packages/site-content/site/_includes/layouts/base.11ty.cjs
@@ -9,6 +9,16 @@ module.exports = {
     const {renderPage} = await import(
       '@webcomponents/internal-site-server/lib/templates/base.js'
     );
-    return [...renderPage(data)].join('');
+    // TODO (justinfagnani): move the top-bar to a real template or
+    // back into the base template when we enable 11ty / Lit SSR integration
+    return [
+      ...renderPage({
+        ...data,
+        content: `
+    <wco-top-bar></wco-top-bar>
+    ${data.content}
+    `,
+      }),
+    ].join('');
   },
 };
diff --git a/packages/site-server/src/catalog/routes/catalog/catalog-route.ts b/packages/site-server/src/catalog/routes/catalog/catalog-route.ts
@@ -22,6 +22,7 @@ export const handleCatalogRoute = async (
       '/js/catalog.js'
     ],
     content: `
+    <wco-top-bar></wco-top-bar>
     <h1>Catalog</h1>
     <wco-catalog-search></wco-catalog-search>
   `,
diff --git a/packages/site-server/src/catalog/routes/element/element-route.ts b/packages/site-server/src/catalog/routes/element/element-route.ts
@@ -8,7 +8,6 @@ import {Readable} from 'stream';
 import {gql} from '@apollo/client/core/index.js';
 import Router from '@koa/router';
 import {render} from '@lit-labs/ssr/lib/render-with-global-dom-shim.js';
-import '@webcomponents/internal-site-client/lib/entrypoints/element.js';
 
 import {renderPage} from '../../../templates/base.js';
 import {client} from '../../graphql.js';
diff --git a/packages/site-server/src/catalog/routes/element/element-template.ts b/packages/site-server/src/catalog/routes/element/element-template.ts
@@ -12,6 +12,7 @@ import {
   resolveReference,
   normalizeModulePath,
 } from '@webcomponents/custom-elements-manifest-tools';
+import '@webcomponents/internal-site-client/lib/entrypoints/element.js';
 
 export const renderElement = ({
   packageName,
@@ -57,6 +58,7 @@ export const renderElement = ({
   }
 
   return html`
+    <wco-top-bar></wco-top-bar>
     <h1>${packageName}/${elementName}</h1>
     ${declaration.description}
     <h2>Usage</h2>
diff --git a/packages/site-server/src/templates/base.ts b/packages/site-server/src/templates/base.ts
@@ -52,7 +52,7 @@ export function* renderPage(data: {
     <title>${escapeHTML(data.title)}</title>
   </head>
   <body>
-    <wco-top-bar></wco-top-bar>`;
+`;
   if (typeof data.content === 'string') {
     yield data.content;
   } else {
