Update all claps on a page

Just in case I start to put multiple claps on more than the announcement page.

assets/js/main.js

@@ -33,7 +33,9 @@ const performClap = (e) => {
     })
     .then(data => {
       localStorage.setItem(clapKey(btn.parentElement.action), 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)
-  }
+  })
 })

assets/scss/_main.scss

@@ -627,6 +627,7 @@ form.claps {
 
   svg {
     font-size: 1.5em;
+    margin-right: 0.4em;
 
     &:only-child {
       margin: 0;  

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!)
 
 <figure style="text-align:center">{{< claps >}}<br/><small style="font-style: italic">Press this to show appreciation!</small></figure>
 
@@ -27,6 +27,8 @@ Speaking of not needing javascript, the button is also a `<form>` and the 'val'
 
 …but of course javascript gives me more flexibility. I can record your clap without you leaving the page, and give the button an accented colour to give you some feedback. It also means that, when you click that button, I can recording your appreciation in your browser's local database. This means it'll remain accented for you ("you already showed your appreciation for this at least once") when you _next_ visit the same page, but while maintaining your anonymity and control. (If you ever 'clear browsing data' for this site, they'll stop being accented, but the clap still remains, anonymously, in my 'val').
 
+If you find this interesting enough to want to reproduce it on your own blog, please [reach out](/standing-invitation)! I can definitely make it easier to use on other sites 😅
+
 ## What's appreciated?
 
 I doubt this little tool will get much use — my site is a lovely wild garden for me, rather than a valuable resource for others — but to end with a little fun, here's a list of the six most appreciated posts across my site right now.