disable kudos button after click

assets/js/kudos.js

@@ -0,0 +1,23 @@
+// disables kudos button after click
+
+document.addEventListener('DOMContentLoaded', () => {
+  const kudosButton = document.querySelector('.kudos-button');
+  const kudosText = document.querySelector('.kudos-text');
+  const emojiSpan = kudosButton.querySelector('.emoji');
+
+  kudosButton.addEventListener('click', () => {
+    kudosButton.disabled = true;
+    kudosButton.classList.add('clicked');
+
+    kudosText.textContent = 'Thanks!';
+    kudosText.classList.add('thanks');
+
+    // Rotate the emoji
+    emojiSpan.style.transform = 'rotate(360deg)';
+
+    // Change the emoji after rotation
+    setTimeout(() => {
+      emojiSpan.textContent = '🎉';
+    }, 150);  // Half of the transition time for a smooth mid-rotation change
+  });
+});

layouts/_default/single.html

@@ -41,7 +41,14 @@
     {{- end }}
     {{- if eq $reply true }}
     <hr>
-    <span class="post_kudos"><button class="kudos" data-cabin-event="kudos">👍</button>Enjoyed this?</span>
+    <div class="kudos-container">
+      <button class="kudos-button" data-cabin-event="kudos">
+        <span class="emoji">👍</span>
+      </button>
+      <span class="kudos-text">Enjoyed this?</span>
+    </div>
+    {{ $kudos := resources.Get "js/kudos.js" | minify }}
+    <script src="{{ $kudos.RelPermalink }}"></script>
     <span class="post_email_reply"><a href="mailto:wheel.east.brief@clkdmail.com?Subject=Re: {{ .Title }}">📧 Reply by email</a></span>
     {{- end }}
   <footer class="content__footer"></footer>

static/css/custom.css

@@ -404,26 +404,37 @@ p:has(+ ul) {
 }
 
 /* Cabin kudos styling */
-.post_kudos {
+.kudos-container {
   display: flex;
+  align-items: center;
 }
 
-button.kudos {
+.kudos-button {
-  border: 0;
+  background: none;
-  background-color: transparent;
+  border: none;
   cursor: pointer;
-  display: flex;
-  color: var(--off-fg);
   font-size: 1.2rem;
   padding: 0;
-  transition: all .2s ease-in-out;
+  margin-right: 0.25rem;
 }
 
-button.kudos:hover {
+.kudos-button:disabled {
-  transform: scale(1.1);
+  cursor: default;
-  text-shadow: var(-off-bg) 0 0 1px;
 }
 
-button.kudos:active {
+.kudos-button .emoji {
-  transform: scale(0.9);
+  display: inline-block;
+  transition: transform 0.3s ease;
+}
+
+.kudos-button.clicked .emoji {
+  transform: rotate(360deg);
+}
+
+.kudos-text {
+  transition: font-style 0.3s ease;
+}
+
+.kudos-text.thanks {
+  font-style: italic;
 }