Make support me buttons into a WebC component

This commit is contained in:
Helen Chong 2024-04-12 00:22:57 +08:00
parent bd2e9cfcee
commit e3927b4c46
3 changed files with 20 additions and 8 deletions

View File

@ -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>

View File

@ -72,9 +72,8 @@ metadata:
<p>You can contact me via email: <a href="mailto:leilukin@outlook.com">leilukin@outlook.com</a>.</p> <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: {% renderTemplate "webc" %}
<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> <support-me></support-me>
<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> {% endrenderTemplate %}
</p>
</sectioin> </sectioin>
</article> </article>

View File

@ -63,9 +63,8 @@ metadata:
<section class="content-section"> <section class="content-section">
<h2>Support Me</h2> <h2>Support Me</h2>
<p>If you enjoy my work, you can support me on Ko-Fi or Buy Me a Coffee: {% renderTemplate "webc" %}
<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> <support-me></support-me>
<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> {% endrenderTemplate %}
</p>
</section> </section>
</div> </div>