refactor(site): remove unused components; update counter

site/src/components/my-counter.js

@@ -2,12 +2,8 @@ class Counter extends WebComponent {
   static props = {
     count: 0,
   };
-
-  increment() {
-    this.onclick = () => ++this.props.count;
-  }
   get template() {
-    return html`<button onClick=${() => this.increment()}>
+    return html`<button onClick=${() => ++this.props.count}>
       ${this.props.count}
     </button>`;
   }

site/src/components/my-hello-world.js

@@ -1,21 +0,0 @@
-/**
- * Custom element using a minimal Web Component Base class
- * @see https://ayco.io/n/web-component-base
- */
-class MyHelloWorld extends WebComponent {
-  // tell browser which props to cause render
-  static properties = ["my-name"];
-
-  // Triggered when the component is connected to the DOM
-  onInit() {
-    let count = 0;
-    this.onclick = () => (this.props.myName = `Clicked ${++count}x`);
-  }
-
-  // give readonly template
-  get template() {
-    return `<button style="cursor:pointer">Hello ${
-      this.props.myName ?? "World"
-    }!</button>`;
-  }
-}

site/src/components/my-quote.js

@@ -1,37 +0,0 @@
-class MyQuote extends WebComponent {
-  static properties = ["type"];
-
-  /**
-   * @type {HTMLElement}
-   */
-  get wrapper() {
-    return this.querySelector("#wrapper");
-  }
-
-  afterViewInit() {
-    /**
-     * @type {Partial<CSSStyleDeclaration>}
-     */
-    const style = {
-      background: "#f5f2f0",
-      padding: "1em",
-      margin: "1em 0",
-      fontSize: "large",
-      overflow: "auto",
-      borderRadius: "5px",
-    };
-
-    Object.keys(style).forEach((rule) => {
-      this.wrapper.style[rule] = style[rule];
-    });
-  }
-
-  get template() {
-    const trimmed = this.innerHTML.trim();
-    return `
-        <div id="wrapper">
-            ${trimmed}
-        </div>
-        `;
-  }
-}