Add wco-catalog-page

Author: justinfagnani

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

@@ -0,0 +1,33 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {html, css, LitElement} from 'lit';
+import {customElement} from 'lit/decorators.js';
+import './wco-top-bar.js';
+import './wco-catalog-search.js';
+
+@customElement('wco-catalog-page')
+export class WCOCatalogPage extends LitElement {
+  static styles = css`
+    :host {
+      display: block;
+    }
+  `;
+
+  render() {
+    return html`
+      <wco-top-bar></wco-top-bar>
+      <h1>Catalog</h1>
+      <wco-catalog-search></wco-catalog-search>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'wco-catalog-page': WCOCatalogPage;
+  }
+}

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

@@ -4,5 +4,4 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import '../components/wco-catalog-search.js';
-import '../components/wco-top-bar.js';
+import '../components/wco-catalog-page.js';

packages/site-server/src/catalog/routes/catalog/catalog-route.ts

@@ -26,11 +26,7 @@ export const handleCatalogRoute = async (
     renderPage({
       title: `Web Components Catalog`,
       scripts: ['/js/hydrate.js', '/js/catalog.js'],
-      content: render(html`
-        <wco-top-bar></wco-top-bar>
-        <h1>Catalog</h1>
-        <wco-catalog-search></wco-catalog-search>
-      `),
+      content: render(html`<wco-catalog-page></wco-catalog-page>`),
     })
   );
   context.type = 'html';