Obfuscate contact emails so that they don't get web scraped

The inspiration for this comes from a few places:
- https://css-tricks.com/how-to-safely-share-your-email-address-on-a-website/
- https://mauriciorobayo.github.io/react-obfuscate-email/?path=/docs/react-obfuscate-email--mail

Also, these two commits from my other repo:
- pcraig3/taxgpt@5dffdfc
- pcraig3/taxgpt@5820321

src/_includes/layouts/page.njk

@@ -22,3 +22,7 @@
     {% include "partials/subscribe.njk" %}
 
 {% endblock %}
+
+{% block scripts %}
+  <script src="{{ '/js/email.js' | url }}" defer></script>
+{% endblock %}

src/_js/email.js

@@ -0,0 +1,49 @@
+/* Obfuscate emails */
+
+const obfuscateEmail = (node) => {
+  // Create a new element
+  const newNode = document.createElement("a");
+
+  if (node.dataset.email) {
+    // Preserve data attributes
+    newNode.dataset.email = node.dataset.email;
+    if (node.dataset.text) {
+      newNode.dataset.text = node.dataset.text;
+    }
+
+    // Get email and text
+    const email = atob(node.dataset.email);
+    const text = node.dataset.text || email.split("?")[0];
+
+    // Add dummy href and obfuscated email
+    newNode.setAttribute("href", "#");
+    // idea comes from https://mauriciorobayo.github.io/react-obfuscate-email/?path=/docs/react-obfuscate-email--mail
+    newNode.innerHTML = text.replaceAll("@", '<span class="roe"></span>');
+
+    newNode.addEventListener("mouseover", unobfuscateEmail, false);
+    newNode.addEventListener("focus", unobfuscateEmail, false);
+
+    node.replaceWith(newNode);
+  }
+};
+
+function unobfuscateEmail(event) {
+  const node = event.target;
+  if (node.dataset.email) {
+    // Get email and text
+    const email = atob(node.dataset.email);
+    const text = node.dataset.text || email.split("?")[0];
+
+    // Set real mailto attribute and content
+    node.setAttribute("href", "mailto:".concat(email));
+    node.innerText = text;
+  }
+}
+
+document.addEventListener("DOMContentLoaded", function () {
+  // Loop through all elements with "email--swap" classname
+  var nodes = document.getElementsByClassName("email--swap");
+  while (nodes.length) {
+    obfuscateEmail(nodes[0]);
+  }
+});

src/_sass/style.scss

@@ -54,3 +54,8 @@ body {
 .flex-wrapper {
   @include mixins.flex-wrapper;
 }
+
+/* for obfuscating emails. Idea comes from https://mauriciorobayo.github.io/react-obfuscate-email/?path=/docs/react-obfuscate-email--mail */
+a > span.roe::after {
+  content: "@";
+}

src/pages/about.md

@@ -31,7 +31,7 @@ The goal was always that you would end up on this About page.
 
 ### “I have a great idea. Can I contribute a post?”
 
-Email me.
+Email me: <span class="email--swap" data-email="cGF1bEBwY3JhaWcuY2E=">“paul [a] pcraig [dot] ca”</span>
 
 ### Why a newsletter?
 

src/pages/contact.md

@@ -9,7 +9,7 @@ Hello! I am humbled and delighted by your interest in my writing slash youthful
 
 Fortunately, I am pretty contactable:
 
-- email <a href="mailto:paul@pcraig3.ca">paul@pcraig3.ca</a>
+- email <span class="email--swap" data-email="cGF1bEBwY3JhaWcuY2E=">“paul [a] pcraig [dot] ca”</span>
 - tweet <a href="https://twitter.com/pcraig3" target="_blank">@pcraig3</a>
 - hang around <a href="https://www.google.com/maps/place/Starbucks/@45.4190313,-75.6938579,17z/data=!3m1!5s0x4cce05abd71952f9:0xda669a6c79dbcdbc!4m12!1m6!3m5!1s0x4cce05019604f58f:0x3f2b0767e2ba86b2!2sStarbucks!8m2!3d45.4190683!4d-75.6915809!3m4!1s0x4cce05019604f58f:0x3f2b0767e2ba86b2!8m2!3d45.4190683!4d-75.6915809" target="_blank" rel="nofollow">the starbucks at Elgin and Lisgar</a> long enough