feat(site): call-to-action, link to mcfly

site/src/components/call-to-action.html

@@ -0,0 +1,18 @@
+<div style="
+    padding: 1em;
+    margin: 1em 0;
+    text-align: center;
+    width: 100%;
+">
+  <a
+    style="
+        background-color: var(--color-primary);
+        color: white;
+        padding: 1em;
+        border-radius: 5px;
+        text-decoration: none;
+    "
+    href="https://www.npmjs.com/package/web-component-base#readme">
+    Learn More
+  </a>
+</div>

site/src/components/my-counter.js

@@ -0,0 +1,10 @@
+class Counter extends WebComponent {
+  static properties = ["count"];
+  onInit() {
+    this.props.count = 0;
+    this.onclick = () => ++this.props.count;
+  }
+  get template() {
+    return `<button>${this.props.count}</button>`;
+  }
+}

site/src/components/my-footer.html

@@ -1,9 +1,8 @@
 <footer style="text-align: right; font-style: italic; padding: 0.5em 1em">
   <p>
     <small
-      >✨ Star on
-      <a href="https://github.com/ayoayco/web-component-base">GitHub</a> to
-      support!</small
+      >Built with
+      <a href="https://github.com/ayoayco/McFly">McFly</a>, the no-framework framework</small
     ><br />
     <slot />
   </p>

site/src/components/my-head.html

@@ -22,6 +22,9 @@
     content="A zero-dependency, ~600 Bytes (minified & gzipped), JS base class for creating reactive custom elements easily"
   />
   <style>
+    :root {
+      --color-primary: #3054bf;
+    }
     body {
       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
       max-width: 40em;

site/src/pages/index.html

@@ -31,18 +31,20 @@
           tiny package
         </a>
         provides zero-dependency, ~600 Bytes (minified & gzipped), JS base class
-        for creating reactive custom elements easily
+        for creating reactive custom elements easily.
       </p>
-
+      <call-to-action></call-to-action>
       <p>
         When you extend the WebComponent class for your component, you only have
         to define the template and properties. Any change in any property value
         will automatically cause just the component UI to render.
       </p>
 
-      <p>The result is a reactive UI on property changes.</p>
+      <p>The result is a reactive UI on property changes: <my-counter></my-counter></p>
       <code-block language="js">
         <pre>
+import WebComponent from &quot;https://unpkg.com/web-component-base@1.13.0/WebComponent.min.js&quot;;
+
 export class Counter extends WebComponent {
   static properties = [&quot;count&quot;];
   onInit() {
@@ -52,7 +54,10 @@ export class Counter extends WebComponent {
   get template() {
     return `&lt;button&gt;${this.props.count}&lt;/button&gt;`;
   }
-}</pre>
+}
+
+customElements.define(&quot;my-counter&quot;, Counter);
+</pre>
       </code-block>
     </main>
     <my-footer>