use js for cabin event ping

LICENSE

@@ -1,3 +1,9 @@
+The MIT License applies to the code in this repository.
+
+Post content in the Markdown files is separately licensed under CC BY-NC-SA 4.0.
+
+* * *
+
 MIT License
 
 Copyright (c) 2023 John Bowdre

assets/js/kudos.js

@@ -0,0 +1,24 @@
+// 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', () => {
+    cabin.event('kudos')
+    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
+  });
+});

config/_default/hugo.toml

@@ -1,7 +1,6 @@
 baseURL = "https://runtimeterror.dev"
 theme = "risotto"
 title = "runtimeterror"
-copyright = "© 2024 John Bowdre"
 paginate = 10
 languageCode = "en"
 DefaultContentLanguage = "en"

layouts/_default/single.html

@@ -41,9 +41,15 @@
     {{- end }}
     {{- if eq $reply true }}
     <hr>
-      {{- if (eq $reply true) }}
+    <div class="kudos-container">
+      <button class="kudos-button">
+        <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 }}
-    {{- end }}
   <footer class="content__footer"></footer>
 {{ end }}

layouts/partials/footer.html

@@ -1,6 +1,6 @@
-<p class="copyright">{{ .Site.Copyright | markdownify }}</p>
+<span class="footer_slashes">{"<a href="/slashes/" title="slashpages">/slashes</a>": [{{- range $i, $link :=  .Site.Params.slashPages }}{{ if $i }}, {{ end }}&quot;<a href="{{ $link.url }}" title="{{ $link.label }}">{{ $link.title }}</a>&quot;{{ end }}]}</span>
-<p class="footer_links">{"<a href="/slashes/" title="slashpages">/slashes</a>": [{{- range $i, $link :=  .Site.Params.slashPages }}{{ if $i }}, {{ end }}&quot;<a href="{{ $link.url }}" title="{{ $link.label }}">{{ $link.title }}</a>&quot;{{ end }}]}
+<br><span class="copyright" xmlns:cc="http://creativecommons.org/ns#" xmlns:dct="http://purl.org/dc/terms/">{"copyright": ["content": "<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/?ref=chooser-v1" target="_blank" rel="license noopener noreferrer" title="Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International">CC BY-NC-SA 4.0</a>", "code": "<a href="https://github.com/jbowdre/runtimeterror/blob/main/LICENSE" target="_blank" rel="license noopener noreferrer" title="MIT License">MIT</a>"]}</span>
-<br>&lt;<a target="_blank" href="https://github.com/jbowdre/runtimeterror">view source</a>&gt;</p>
+<br><span class="footer_links">&lt;<a target="_blank" href="https://github.com/jbowdre/runtimeterror">view source</a>&gt;</span>
 
 <!-- Back to Top button via https://github.com/vfeskov/vanilla-back-to-top -->
 {{ $jsToTop := resources.Get "js/back-to-top.js" | minify }}

layouts/partials/head.html

@@ -34,6 +34,9 @@
 <link rel="stylesheet" href="{{ "css/risotto.css" | absURL }}">
 <link rel="stylesheet" href="{{ "css/custom.css" | absURL }}">
 
+<!-- CC BY-NC-SA 4.0 -->
+<link rel="license" href="https://creativecommons.org/licenses/by-nc-sa/4.0/">
+
 <!-- add pride bar for june -->
 <link rel="stylesheet" href="https://cdn.pride.codes/css/bar_body.css">
 

static/css/custom.css

@@ -38,23 +38,32 @@
 }
 
 /* Footer tweaks */
-.copyright {
+.footer_slashes {
   font-size: 14px;
-  line-height: 1.3rem;
+  line-height: 1.1rem;
+  color: var(--muted);
 }
 
-.footer_links {
+.footer_slashes a:link, .footer_slashes a:visited {
+  color: var(--link);
+  text-decoration: none;
+}
+
+.footer_links, .copyright {
   font-size: 12px;
   line-height: 1.1rem;
   color: var(--muted);
 }
 
-.footer_links a:link, .footer_links a:visited {
+.footer_links a:link, .footer_links a:visited,
+.copyright a:link, .copyright a:visited{
   color: var(--off-fg);
   text-decoration: none;
 }
 
-.footer_links a:hover {
+.footer_links a:hover,
+.footer_slashes a:hover,
+.copyright a:hover {
   color: var(--hover);
   text-decoration: underline;
 }
@@ -394,3 +403,38 @@ p:has(+ ul) {
   }
 }
 
+/* Cabin kudos styling */
+.kudos-container {
+  display: flex;
+  align-items: center;
+}
+
+.kudos-button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 1.2rem;
+  padding: 0;
+  margin-right: 0.25rem;
+}
+
+.kudos-button:disabled {
+  cursor: default;
+}
+
+.kudos-button .emoji {
+  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;
+}