From 1bd271acd05e831e185af40c7cae75f892447c64 Mon Sep 17 00:00:00 2001
From: Stefan Imhoff <stefan@imhoff.name>
Date: Sun, 5 May 2024 10:45:38 +0200
Subject: [PATCH] chore: add data attributes

---
 src/includes/colophon-donation.njk      |  1 +
 src/includes/home-link.njk              |  2 +-
 src/includes/language-switcher.njk      |  2 +-
 src/includes/pagination.njk             | 18 ++++++++++--------
 src/includes/recommendations-books.njk  |  2 ++
 src/includes/recommendations-movies.njk |  2 ++
 src/includes/theme-toggle.njk           |  2 +-
 src/includes/up-link.njk                |  2 +-
 src/utils/shortcodes.js                 | 10 ++++++----
 9 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/src/includes/colophon-donation.njk b/src/includes/colophon-donation.njk
index 997fd20..641ec5c 100644
--- a/src/includes/colophon-donation.njk
+++ b/src/includes/colophon-donation.njk
@@ -35,6 +35,7 @@
 		</li>
 		<li class="colophon-donation-list-item">
 			<a
+				data-umami-event="Paypal"
 				href="https://www.paypal.me/kogakure/"
 				rel="nofollow noopener noreferrer external"
 				target="_blank"
diff --git a/src/includes/home-link.njk b/src/includes/home-link.njk
index 6b519ae..965b40e 100644
--- a/src/includes/home-link.njk
+++ b/src/includes/home-link.njk
@@ -7,7 +7,7 @@
 {% if isHome %}
 	<div class="home-link-spacer"></div>
 {% else %}
-	<a class="home-link" href="{{ homeLink }}" title="{{ i18n[locale].homeLink }}">
+	<a class="home-link" href="{{ homeLink }}" title="{{ i18n[locale].homeLink }}" data-umami-event="{{ i18n[locale].homeLink }}">
 		<button
 			class="home-link-button"
 			aria-label="{{ i18n[locale].homeLink }}"
diff --git a/src/includes/language-switcher.njk b/src/includes/language-switcher.njk
index f2ea4fe..8bac686 100644
--- a/src/includes/language-switcher.njk
+++ b/src/includes/language-switcher.njk
@@ -14,7 +14,7 @@
 			{% endfor %}
 
 			<li class="language-switcher-list-item">
-				<a class="language-switcher-link {{ activeClass }}" href="{{ translatedUrl }}">{{ lang.title }}</a>
+				<a class="language-switcher-link {{ activeClass }}" href="{{ translatedUrl }}" data-umami-event="Language Switch {{ lang.title }}">{{ lang.title }}</a>
 			</li>
 
 			{% if loop.last %}
diff --git a/src/includes/pagination.njk b/src/includes/pagination.njk
index 0a91c99..144183c 100644
--- a/src/includes/pagination.njk
+++ b/src/includes/pagination.njk
@@ -1,8 +1,9 @@
 {% if previousPost %}
-	<a 
-		aria-label="{{ previousPost.data.title }}" 
-		class="pagination pagination-start" 
-		href="{{ previousPost.url }}" 
+	<a
+		aria-label="{{ previousPost.data.title }}"
+		class="pagination pagination-start"
+		data-umami-event="{{ previousPost.data.title }}"
+		href="{{ previousPost.url }}"
 		rel="prev"
 		title="{{ previousPost.data.title }}"
 	>
@@ -11,10 +12,11 @@
 {% endif %}
 
 {% if nextPost %}
-	<a 
-		aria-label="{{ nextPost.data.title }}" 
-		class="pagination pagination-end" 
-		href="{{ nextPost.url }}" 
+	<a
+		aria-label="{{ nextPost.data.title }}"
+		class="pagination pagination-end"
+		data-umami-event="{{ nextPost.data.title }}"
+		href="{{ nextPost.url }}"
 		rel="next"
 		title="{{ nextPost.data.title }}"
 	>
diff --git a/src/includes/recommendations-books.njk b/src/includes/recommendations-books.njk
index 61f743f..619c074 100644
--- a/src/includes/recommendations-books.njk
+++ b/src/includes/recommendations-books.njk
@@ -11,6 +11,7 @@
 				{% if book.asin %}
 					<a
 						class="product"
+						data-umami-event="{{ book.title }}"
 						href="{{ affiliateUrl }}"
 						rel="nofollow noopener noreferrer external"
 						target="_blank"
@@ -35,6 +36,7 @@
 							href="{{ book.link }}"
 							rel="nofollow noopener noreferrer external"
 							target="_blank"
+						  data-umami-event="{{ book.title }}"
 						>
 							<img alt="{{ book.title }}" src="{{ book.cover }}"/>
 						</a>
diff --git a/src/includes/recommendations-movies.njk b/src/includes/recommendations-movies.njk
index f4a2c59..86b4175 100644
--- a/src/includes/recommendations-movies.njk
+++ b/src/includes/recommendations-movies.njk
@@ -11,6 +11,7 @@
 				{% if movie.asin %}
 					<a
 						class="product"
+						data-umami-event="{{ movie.title }}"
 						href="{{ affiliateUrl }}"
 						rel="nofollow noopener noreferrer external"
 						target="_blank"
@@ -31,6 +32,7 @@
 				{% elif movie.imdb %}
 					<a
 						class="product"
+						data-umami-event="{{ movie.title }}"
 						href="https://www.imdb.com/title/{{ movie.imdb }}"
 						rel="nofollow noopener noreferrer external"
 						target="_blank"
diff --git a/src/includes/theme-toggle.njk b/src/includes/theme-toggle.njk
index fae666a..a719f9f 100644
--- a/src/includes/theme-toggle.njk
+++ b/src/includes/theme-toggle.njk
@@ -1,4 +1,4 @@
-<button id="theme-toggle" class="theme-toggle" aria-label="{{ i18n[locale].themeToggle }}">
+<button id="theme-toggle" class="theme-toggle" aria-label="{{ i18n[locale].themeToggle }}" data-umami-event="Switch color theme">
 	<svg class="theme-toggle-icon"  aria-hidden="true" viewBox="0 0 24 24" width="1em" height="1em">
 		<use xlink:href="#circle"></use>
 	</svg>
diff --git a/src/includes/up-link.njk b/src/includes/up-link.njk
index 7b9e4f0..ec39b34 100644
--- a/src/includes/up-link.njk
+++ b/src/includes/up-link.njk
@@ -1,4 +1,4 @@
-<a id="up-link" class="up-link" href="#top" onClick="{scrollToTop}">
+<a id="up-link" class="up-link" href="#top" onClick="{scrollToTop}" data-umami-event="{{ i18n[locale].upLink }}">
 	<button class="up-link-button" aria-label="{{ i18n[locale].upLink }}">
 		<svg class="up-link-icon" aria-hidden="true" viewBox="0 0 24 24" width="1em" height="1em">
 			<use xlink:href="#arrow-up"></use>
diff --git a/src/utils/shortcodes.js b/src/utils/shortcodes.js
index 26e8308..616594b 100644
--- a/src/utils/shortcodes.js
+++ b/src/utils/shortcodes.js
@@ -16,6 +16,7 @@ module.exports = {
 		const html = outdent`
     <a class="product" href="${affiliateUrl}" rel="nofollow noopener noreferrer external" target="_blank">
       <img
+    		data-umami-event="${alt}"
         alt="${alt}"
         class="product-cover"
         src="${amazonImageUrl}"
@@ -81,7 +82,7 @@ module.exports = {
 		}
 
 		const html = outdent`
-    <a href="${url}" ${externalLink}>${text}<span class="more-icon">
+    <a href="${url}" ${externalLink} data-umami-event="${text}">${text}<span class="more-icon">
         <svg aria-hidden="true" viewBox="0 0 24 24" width="1em" height="1em">
           <use xlink:href="#arrow-right"></use>
         </svg>
@@ -100,7 +101,7 @@ module.exports = {
 		}
 
 		const html = outdent`
-    <a href="${url}" ${externalLink}>${text}<span class="download-icon">
+    <a href="${url}" ${externalLink} data-umami-event="${text}">${text}<span class="download-icon">
         <svg aria-hidden="true" viewBox="0 0 24 24" width="1em" height="1em">
           <use xlink:href="#download"></use>
         </svg>
@@ -111,13 +112,14 @@ module.exports = {
 	email: function (text, key = false) {
 		const downloadText = 'Download public key (ProtonMail/GPG)';
 		const link = outdent`
-    <a id="email" class="objuscated" href="mailto:hey (at) imhoff (dot) name">${text}</a>`;
+    <a id="email" class="objuscated" href="mailto:hey (at) imhoff (dot) name" data-umami-event="${text}">${text}</a>`;
 		const keyDownload = outdent`
     <span id="lock-box" class="lock-box hidden">
       <a
-        title="${downloadText}"
+				data-umami-event="${downloadText}"
         aria-label="${downloadText}"
         href="https://www.stefanimhoff.de/downloads/publickey.hey@stefanimhoff.de-9cb867d4ccd2c1d7d9fde82f4b649797f3e007a9.asc"
+        title="${downloadText}"
       >
         <svg class="lock-icon" aria-hidden="true" viewBox="0 0 24 24" width="1em" height="1em">
           <use xlink:href="#lock"></use>