diff --git a/assets/js/main.js b/assets/js/main.js
index 96500fe3..03fbdf20 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -33,7 +33,9 @@ const performClap = (e) => {
})
.then(data => {
localStorage.setItem(clapKey(btn.parentElement.action), data.claps);
- setClapCount(btn, data.claps);
+ forEveryClapButton((btn) => {
+ setClapCount(btn, data.claps);
+ }, btn.parentElement.action)
btn.parentElement.classList.add('clapped')
btn.disabled = false;
})
@@ -64,13 +66,19 @@ const setClapCount = (btn, clapCount) => {
const clapCountEl = (btn) => btn.querySelector('span')
+const forEveryClapButton = (fn, sameAction = '') => {
+ for (const btn of document.querySelectorAll(`form.claps${sameAction ? `[action="${sameAction}"]` : ''} button`)) {
+ fn(btn)
+ }
+}
+
document.addEventListener("DOMContentLoaded", () => {
- for (const btn of document.querySelectorAll('form.claps button')) {
+ forEveryClapButton((btn) => {
const lastClappedTo = localStorage.getItem(clapKey(btn.parentElement.action));
if (lastClappedTo) {
btn.parentElement.classList.add('clapped')
setClapCount(btn, lastClappedTo)
}
btn.addEventListener("click", performClap)
- }
+ })
})
diff --git a/assets/scss/_main.scss b/assets/scss/_main.scss
index f262b102..cb0e37fa 100644
--- a/assets/scss/_main.scss
+++ b/assets/scss/_main.scss
@@ -627,6 +627,7 @@ form.claps {
svg {
font-size: 1.5em;
+ margin-right: 0.4em;
&:only-child {
margin: 0;
diff --git a/content/posts/easy-appreciation/index.md b/content/posts/easy-appreciation/index.md
index d0a7da01..ae4417bf 100644
--- a/content/posts/easy-appreciation/index.md
+++ b/content/posts/easy-appreciation/index.md
@@ -11,7 +11,7 @@ tags:
Here in my little career break I'm spending a lot of time thinking about _community_. This blog hasn't had much of a need for community (there's such an ecclectic mix of stuff here that people stumble upon it rather than frequent it) but as I've been building in tools like [webmentions](https://indieweb.org/Webmention), and pulling comments from other sites (like [on this post](/posts/chef-gpt/#interactions)), I've noticed the absence of an easy "I appreciate this" mechanism for passers-through.
-Yesterday I built a clap button, the one you can see below this paragraph, and on every page at the bottom of the post. If you click it it lets me know you appreciate my post, and keeps track of how many times that's happened (you can press it more than once if you really like something!)
+Yesterday I built a clap button, the one you can see below this paragraph, and on every page at the bottom of the post (though sometimes its a heart instead of a clap, for aesthetic reasons). If you click it it lets me know you appreciate my post, and keeps track of how many times that's happened (you can press it more than once if you really like something!)
Press this to show appreciation!