Add stub catalog widget (#1369)

Author: justinfagnani

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

@@ -0,0 +1,31 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+ import {html, css, LitElement} from 'lit';
+ import {customElement} from 'lit/decorators.js';
+ 
+ @customElement('wco-catalog-search')
+ export class WCOCatalogSearch extends LitElement {
+   static styles = css`
+     :host {
+       display: flex;
+       align-items: center;
+     }
+   `;
+ 
+   render() {
+     return html`
+       Search: <input>
+     `;
+   }
+ }
+ 
+ declare global {
+   interface HTMLElementTagNameMap {
+     'wco-catalog-search': WCOCatalogSearch;
+   }
+ }
+ 

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

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import '../components/wco-catalog-search.js';
+import '../components/wco-top-bar.js';

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

@@ -17,8 +17,12 @@ export const handleCatalogRoute = async (
 ) => {
   context.body = renderPage({
     title: `Web Components Catalog`,
+    scripts: [
+      './js/catalog.js'
+    ],
     content: `
     <h1>Catalog</h1>
+    <wco-catalog-search></wco-catalog-search>
   `,
   });
   context.type = 'html';