Obfuscate emails until javascript loads

pcraig3 · Jun 20, 2023 · 5dffdfc · 5dffdfc
1 parent 7bc4dde
commit 5dffdfc
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 3 deletions.
diff --git a/md/about.md b/md/about.md
@@ -45,13 +45,13 @@ The [Canadian maple leaf](/robot.svg) mascot is [Tyler Benning’s](https://tyle
 
 ### Contact
 
-If you spot an error, want to make a suggestion, or just want to give me a virtual high-five, please reach out to me at [paul@pcraig3.ca](mailto:paul@pcraig3.ca).
+If you spot an error, want to make a suggestion, or just want to give me a virtual high-five, please reach out to me at <span class="email--swap" data-email="cGF1bEBwY3JhaWcuY2E=">“paul [a] pcraig [dot] ca”</span>.
 
 I am kind of a one-person team over here, so there are likely some rough edges.
 
 ## FAQ
 
-If you have a question that’s not on here, [get in touch](mailto:paul@pcraig3.ca) and I might add it to the list.
+If you have a question that’s not on here, <span class="email--swap" data-email="cGF1bEBwY3JhaWcuY2E=" data-text="Get in touch">get in touch with “paul [a] pcraig [dot] ca”</span> and I might add it to the list.
 
 ### Is TaxGPT a Government of Canada service?
 
@@ -103,7 +103,7 @@ We don’t need “voting professionals” to fill out ballots for us during ele
 
 That’s why I highlight Wealthsimple Tax specifically. It’s a well-designed, completely free tax-filing product without paid-for ‘premium’ features or trying to upsell you to an expert.
 
-If you believe another free tax-filing product without dark design patterns should be featured by TaxGPT, [get in touch](mailto:paul@pcraig3.ca) and I’ll look into it.
+If you believe another free tax-filing product without dark design patterns should be featured by TaxGPT, ~GET IN TOUCH and I’ll look into it.
 
 ### Is TaxGPT a dangerous experiment? What about the risk of wrong answers?
 

diff --git a/pages/_document.js b/pages/_document.js
@@ -10,6 +10,7 @@ export default function Document() {
           href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@500;600&family=League+Spartan:wght@500&family=Open+Sans:ital,wght@0,400;0,700;1,400&display=swap"
           rel="stylesheet"
         />
+        <script src="/email.js" defer />
       </Head>
       <body>
         <Main />

diff --git a/public/email.js b/public/email.js
@@ -0,0 +1,28 @@
+const replacePlaceholderEmail = (node) => {
+  // Get email and text
+  const email = atob(node.dataset.email)
+  const text = node.dataset.text || email
+
+  // Create a new element
+  const newNode = document.createElement('a')
+
+  // Preserve data attributes
+  newNode.dataset.email = node.dataset.email
+  if (node.dataset.text) {
+    newNode.dataset.text = node.dataset.text
+  }
+
+  // Add ID and content
+  newNode.setAttribute('href', 'mailto:'.concat(email))
+  newNode.innerText = text
+
+  node.replaceWith(newNode)
+}
+
+document.addEventListener('DOMContentLoaded', function () {
+  // Loop through all elements with "email--swap" classname
+  var nodes = document.getElementsByClassName('email--swap')
+  while (nodes.length) {
+    replacePlaceholderEmail(nodes[0])
+  }
+})