From 4fb7783da1bbd3fe5502d9d59736c5ec83f503fc Mon Sep 17 00:00:00 2001
From: Helen Chong <119173961+helenclx@users.noreply.github.com>
Date: Fri, 12 Apr 2024 00:03:29 +0800
Subject: [PATCH] Make my website button into a WebC component

---
 src/_includes/main/site-btn.webc | 45 ++++++++++++++++++++++++++++++++
 src/assets/css/main.css          | 30 ---------------------
 src/home.njk                     | 17 +++---------
 3 files changed, 48 insertions(+), 44 deletions(-)
 create mode 100644 src/_includes/main/site-btn.webc

diff --git a/src/_includes/main/site-btn.webc b/src/_includes/main/site-btn.webc
new file mode 100644
index 00000000..ce7bc15e
--- /dev/null
+++ b/src/_includes/main/site-btn.webc
@@ -0,0 +1,45 @@
+<div class="site-btn__container">
+    <div>
+        <a href="https://leilukin.neocities.org/" target="_blank"><img src="/assets/leilukin/Leilukins-Hub-button.png" alt="Button of Leilukin's Hub" title="Leilukin's Hub"></a>
+    </div>
+    <textarea class="site-btn__textarea textarea-for-copy"><a href="https://leilukin.neocities.org/" target="_blank"><img src="https://leilukin.neocities.org/assets/leilukin/Leilukins-Hub-button.png" alt="Button of Leilukin's Hub" title="Leilukin's Hub"></a></textarea>
+    <button class="copy-txt-btn">Copy HTML</button>
+</div>
+
+<style webc:keep webc:bucket="defer">
+    .site-btn__container {
+        display: flex;
+        gap: 1rem;
+        align-items: center;
+        margin: 0.5rem 0;
+    }
+
+    .site-btn__textarea {
+        width: 10rem;
+        height: 2.5rem;
+        font-size: 0.75rem;
+        background-color:black;
+        color: var(--clr-body-txt);
+    }
+
+    .copy-txt-btn {
+        border: none;
+        background: var(--clr-link-btn-bg);
+        color: var(--clr-body-txt);
+        padding: 0.3rem 0.8rem;
+        border-radius: 0.5rem;
+        font-size: 0.9rem;
+        font-weight: bold;
+    }
+
+    .copy-txt-btn:hover {
+        background: var(--clr-link-hover);
+    }
+</style>
+
+<script webc:keep webc:bucket="defer">
+    document.querySelector(".copy-txt-btn").onclick = () => {
+        document.querySelector(".textarea-for-copy").select();
+        document.execCommand('copy');
+    }
+</script>
diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index de94c6d0..361294be 100644
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -454,36 +454,6 @@ article, .content-container {
     height: 100%;
 }
 
-/* Website link button */
-.site-btn__container {
-    display: flex;
-    gap: 1rem;
-    align-items: center;
-    margin: 0.5rem 0;
-}
-
-.site-btn__textarea {
-    width: 10rem;
-    height: 2.5rem;
-    font-size: 0.75rem;
-    background-color:black;
-    color: var(--clr-body-txt);
-}
-
-.copy-txt-btn {
-    border: none;
-    background: var(--clr-link-btn-bg);
-    color: var(--clr-body-txt);
-    padding: 0.3rem 0.8rem;
-    border-radius: 0.5rem;
-    font-size: 0.9rem;
-    font-weight: bold;
-}
-
-.copy-txt-btn:hover {
-    background: var(--clr-link-hover);
-}
-
 /* Web button lists */
 .web-btn-wrapper {
     display: flex;
diff --git a/src/home.njk b/src/home.njk
index 335af6cd..539d4cdd 100644
--- a/src/home.njk
+++ b/src/home.njk
@@ -18,20 +18,9 @@ metadata:
         <h2>Link to My Website</h2>
 
         <p>You can link to my website with this button:</p>
-
-        <div class="site-btn__container">
-            <div>
-                <a href="https://leilukin.neocities.org/" target="_blank"><img src="/assets/leilukin/Leilukins-Hub-button.png" alt="Button of Leilukin's Hub" title="Leilukin's Hub"></a>
-            </div>
-            <textarea class="site-btn__textarea textarea-for-copy"><a href="https://leilukin.neocities.org/" target="_blank"><img src="https://leilukin.neocities.org/assets/leilukin/Leilukins-Hub-button.png" alt="Button of Leilukin's Hub" title="Leilukin's Hub"></a></textarea>
-            <button class="copy-txt-btn">Copy HTML</button>
-            <script>
-                document.querySelector(".copy-txt-btn").onclick = () => {
-                    document.querySelector(".textarea-for-copy").select();
-                    document.execCommand('copy');
-                }
-            </script>
-        </div>
+        {% renderTemplate "webc" %}
+            <site-btn></site-btn>
+        {% endrenderTemplate %}
 
         <p>Credit to <a href="https://github.com/hekate2" target="_blank">hekate2</a> for their <a href="https://hekate2.github.io/buttonmaker/" target="_blank">88x31 Web Button Maker</a>!</p>
     </section>