feat: show 2.0 beta announcement

site/routes/api/user.js

@@ -1,11 +0,0 @@
-/**
- * `./routes/api/`
- * ...is where we put file-based REST API endpoints
- * this one is accessible via https://<domain>/api/user
- */
-export default eventHandler(() => {
-  return {
-    user: "AYO",
-    date: new Date(),
-  };
-});

site/src/components/my-quote.js

@@ -0,0 +1,38 @@
+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>
+        `;
+  }
+}

site/src/pages/index.html

@@ -26,6 +26,7 @@
     </awesome-header>
     <main>
       <section style="font-size: large;">
+
         <p>
           By extending our base class, you get an easy authoring experience as you would expect in writing your components:</p>
         <ul>
@@ -35,6 +36,17 @@
           <li>Provided out-of-the-box with <a href="https://ayco.io/gh/McFly">McFly</a>, a powerful no-framework framework</li>
         </ul>
         <call-to-action />
+        <my-quote type="info">
+          <p>
+            Version 2.0.0-beta is out! 🎉
+          </p>
+          <p>
+            We are now able to attach "side effects" to property value changes, from inside the component and outside.
+          </p>
+          <p>
+            Play on <a href="https://codepen.io/ayoayco-the-styleful/pen/ExrdWPv?editors=1010">CodePen</a>.
+          </p>
+        </my-quote>
       </section>
       <hr style="margin: 2em 0;" />
       <section style="font-size: large;">