From 44617ed999cf4c50ebf65c920c46c35ad77fe14c Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Thu, 23 Nov 2023 08:06:29 +0100
Subject: [PATCH] feat(site): call-to-action, link to mcfly

---
 site/src/components/call-to-action.html | 18 ++++++++++++++++++
 site/src/components/my-counter.js       | 10 ++++++++++
 site/src/components/my-footer.html      |  5 ++---
 site/src/components/my-head.html        |  3 +++
 site/src/pages/index.html               | 13 +++++++++----
 5 files changed, 42 insertions(+), 7 deletions(-)
 create mode 100644 site/src/components/call-to-action.html
 create mode 100644 site/src/components/my-counter.js

diff --git a/site/src/components/call-to-action.html b/site/src/components/call-to-action.html
new file mode 100644
index 0000000..6796be1
--- /dev/null
+++ b/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>
diff --git a/site/src/components/my-counter.js b/site/src/components/my-counter.js
new file mode 100644
index 0000000..0e413d7
--- /dev/null
+++ b/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>`;
+  }
+}
diff --git a/site/src/components/my-footer.html b/site/src/components/my-footer.html
index 76e703d..8063ddb 100644
--- a/site/src/components/my-footer.html
+++ b/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>
diff --git a/site/src/components/my-head.html b/site/src/components/my-head.html
index ff55db7..ab35641 100644
--- a/site/src/components/my-head.html
+++ b/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;
diff --git a/site/src/pages/index.html b/site/src/pages/index.html
index e57e96e..e876a43 100644
--- a/site/src/pages/index.html
+++ b/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>