chore: add data attributes

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"

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 }}"

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 %}

src/includes/pagination.njk

@@ -2,6 +2,7 @@
 	<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 }}"
@@ -14,6 +15,7 @@
 	<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 }}"

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>

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"

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>

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>

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>