From e3927b4c4640dc02d086fe3fefcf6c202422b9da Mon Sep 17 00:00:00 2001
From: Helen Chong <119173961+helenclx@users.noreply.github.com>
Date: Fri, 12 Apr 2024 00:22:57 +0800
Subject: [PATCH] Make support me buttons into a WebC component

---
 src/_includes/main/support-me.webc | 14 ++++++++++++++
 src/about.njk                      |  7 +++----
 src/home.njk                       |  7 +++----
 3 files changed, 20 insertions(+), 8 deletions(-)
 create mode 100644 src/_includes/main/support-me.webc

diff --git a/src/_includes/main/support-me.webc b/src/_includes/main/support-me.webc
new file mode 100644
index 00000000..aefb21d9
--- /dev/null
+++ b/src/_includes/main/support-me.webc
@@ -0,0 +1,14 @@
+<p>If you enjoy my work, you can support me on Ko-Fi or Buy Me a Coffee:</p>
+<div class="support-me">
+    <script webc:keep type='text/javascript' src='https://storage.ko-fi.com/cdn/widget/Widget_2.js'></script><script webc:keep type='text/javascript'>kofiwidget2.init('Support Me on Ko-fi', '#7A37A3', 'A1042UH4');kofiwidget2.draw();</script>
+
+    <script webc:keep type="text/javascript" src="https://cdnjs.buymeacoffee.com/1.0.0/button.prod.min.js" data-name="bmc-button" data-slug="leilukin" data-color="#7a37a3" data-emoji=""  data-font="Cookie" data-text="Buy me a coffee" data-outline-color="#ffffff" data-font-color="#ffffff" data-coffee-color="#FFDD00" ></script>
+</div>
+
+<style webc:keep webc:bucket="defer">
+    .support-me {
+        display: flex;
+        gap: 1em;
+        align-items: center;
+    }
+</style>
\ No newline at end of file
diff --git a/src/about.njk b/src/about.njk
index 0d12d54a..5cdd6590 100644
--- a/src/about.njk
+++ b/src/about.njk
@@ -72,9 +72,8 @@ metadata:
 
         <p>You can contact me via email: <a href="mailto:leilukin@outlook.com">leilukin@outlook.com</a>.</p>
 
-        <p>If you enjoy my work, you can support me on Ko-Fi or Buy Me a Coffee:
-        <script type='text/javascript' src='https://storage.ko-fi.com/cdn/widget/Widget_2.js'></script><script type='text/javascript'>kofiwidget2.init('Support Me on Ko-fi', '#7A37A3', 'A1042UH4');kofiwidget2.draw();</script><br><br>
-        <script type="text/javascript" src="https://cdnjs.buymeacoffee.com/1.0.0/button.prod.min.js" data-name="bmc-button" data-slug="leilukin" data-color="#7a37a3" data-emoji=""  data-font="Cookie" data-text="Buy me a coffee" data-outline-color="#ffffff" data-font-color="#ffffff" data-coffee-color="#FFDD00" ></script>
-        </p>
+        {% renderTemplate "webc" %}
+            <support-me></support-me>
+        {% endrenderTemplate %}
     </sectioin>
 </article>
\ No newline at end of file
diff --git a/src/home.njk b/src/home.njk
index f524717a..bde4e0c0 100644
--- a/src/home.njk
+++ b/src/home.njk
@@ -63,9 +63,8 @@ metadata:
 
     <section class="content-section">
         <h2>Support Me</h2>
-        <p>If you enjoy my work, you can support me on Ko-Fi or Buy Me a Coffee:
-            <script type='text/javascript' src='https://storage.ko-fi.com/cdn/widget/Widget_2.js'></script><script type='text/javascript'>kofiwidget2.init('Support Me on Ko-fi', '#7A37A3', 'A1042UH4');kofiwidget2.draw();</script><br><br>
-            <script type="text/javascript" src="https://cdnjs.buymeacoffee.com/1.0.0/button.prod.min.js" data-name="bmc-button" data-slug="leilukin" data-color="#7a37a3" data-emoji=""  data-font="Cookie" data-text="Buy me a coffee" data-outline-color="#ffffff" data-font-color="#ffffff" data-coffee-color="#FFDD00" ></script>
-        </p>
+        {% renderTemplate "webc" %}
+            <support-me></support-me>
+        {% endrenderTemplate %}
     </section>
 </div>
\ No newline at end of file