Scramble email addresses on blog posts (grrr spam)

site/content/assets/js/unscrambler.js

@@ -0,0 +1,42 @@
+/* This Python script will generate the scrambled text and output a list of alterations to use as a key
+
+#!/usr/bin/env python3
+import sys
+import random
+
+INPUT_STRING = sys.argv[1]
+
+incp = list(INPUT_STRING)
+transformations = []
+
+for i in range(len(incp) * 3):
+    a = random.randint(0, len(incp)-1)
+    b = None
+    while b is None or b == a:
+        b = random.randint(0, len(incp)-1)
+
+    incp[a], incp[b] = incp[b], incp[a]
+
+    transformations.append((a, b))
+
+print("const scrambled = " + repr("".join(incp)) + ";")
+print("const key = " + str(list(reversed(map(list, transformations)))) + ";")
+
+*/
+
+String.prototype.replaceAt = function (index, replacement) {
+  return this.substring(0, index) + replacement + this.substring(index + replacement.length);
+};
+
+const scrambledEmailAddr = "ieahola.pntkne@l";
+const keyForEmailAddr = [[7, 5], [14, 6], [0, 6], [0, 8], [10, 4], [14, 4], [8, 12], [0, 3], [15, 2], [5, 14], [3, 12], [14, 1], [7, 0], [13, 9], [13, 2], [14, 8], [3, 1], [4, 8], [10, 4], [2, 1], [1, 13], [4, 2], [4, 7], [10, 1], [10, 1], [15, 11], [1, 2], [14, 11], [6, 2], [0, 4], [4, 9], [12, 14], [5, 3], [3, 6], [15, 4], [12, 14], [9, 8], [4, 5], [3, 8], [1, 10], [10, 2], [15, 6], [12, 4], [14, 6], [4, 8], [5, 7], [2, 4], [9, 6]];
+
+const unscramble = (ciphertext, key) => {
+  for (let i = 0; i < key.length; i += 1) {
+    const op = key[i];
+    const t = ciphertext.charAt(op[0]);
+    ciphertext = ciphertext.replaceAt(op[0], ciphertext.charAt(op[1]));
+    ciphertext = ciphertext.replaceAt(op[1], t);
+  }
+  return ciphertext;
+};

site/content/index.html

@@ -51,55 +51,18 @@ description: "Hi! I'm Abi, a UK-based Computer Science student, photographer and
 <p>If you'd like to send me an email, feel free to drop me a message at <code><noscript>hello at this domain</noscript><span id="scrambled"></span></code>.</p>
 
 <script>
-    String.prototype.replaceAt = function(index, replacement) {
-        return this.substring(0, index) + replacement + this.substring(index + replacement.length);
-    }
-
-    const doUnscramble = (elem) => {
-        const ops = [[9, 6], [2, 4], [5, 7], [4, 8], [14, 6], [12, 4], [15, 6], [10, 2], [1, 10], [3, 8], [4, 5], [9, 8], [12, 14], [15, 4], [3, 6], [5, 3], [12, 14], [4, 9], [0, 4], [6, 2], [14, 11], [1, 2], [15, 11], [10, 1], [10, 1], [4, 7], [4, 2], [1, 13], [2, 1], [10, 4], [4, 8], [3, 1], [14, 8], [13, 2], [13, 9], [7, 0], [14, 1], [3, 12], [5, 14], [15, 2], [0, 3], [8, 12], [14, 4], [10, 4], [0, 8], [0, 6], [14, 6], [7, 5]];
+    const animatedUnscramble = (elem) => {
         const tofn = (i) => {
-            console.log(i, elem.innerText);
-            let s = elem.innerText;
-            const t = s.charAt(ops[i][0]);
-            s = s.replaceAt(ops[i][0], s.charAt(ops[i][1]));
-            s = s.replaceAt(ops[i][1], t);
-            elem.innerText = s;
-            if (i !=  0) {
-                setTimeout(tofn, (0.02 * Math.pow(ops.length - i, 2)) + 20, i-1);
+            elem.innerText = unscramble(elem.innerText, [keyForEmailAddr[i]])
+            if (i != keyForEmailAddr.length) {
+                setTimeout(tofn, (0.02 * Math.pow(keyForEmailAddr.length - i, 2)) + 20, i+1);
             }
-        }
-        tofn(ops.length - 1);
+        };
+        tofn(0);
     }
-
     const elem = document.getElementById("scrambled");
-    elem.innerText = "ieahola.pntkne@l";
-    doUnscramble(elem);
+    elem.innerText = scrambledEmailAddr;
+    animatedUnscramble(elem);
 </script>
 
 {% endblock %}
-
-{# This Python script will generate the scrambled text and output a list of alterations to put in the above
-
-#!/usr/bin/env python3
-import sys
-import random
-
-INPUT_STRING = sys.argv[1]
-
-incp = list(INPUT_STRING)
-transformations = []
-
-for i in range(len(incp) * 3):
-    a = random.randint(0, len(incp)-1)
-    b = None
-    while b is None or b == a:
-        b = random.randint(0, len(incp)-1)
-
-    incp[a], incp[b] = incp[b], incp[a]
-
-    transformations.append((a, b))
-
-print("".join(incp))
-print(list(map(list, transformations)))
-
-#}

site/templates/_includes/head.html

@@ -19,4 +19,6 @@
 <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
 <link rel="manifest" href="/site.webmanifest">
 
-<meta name="fediverse:creator" content="@abichrome@tech.lgbt">
+<meta name="fediverse:creator" content="@abichrome@tech.lgbt">
+
+<script src="/assets/js/unscrambler.js"></script>

site/templates/_layouts/blog/post.html

@@ -24,11 +24,21 @@
 {{ content | safe }}
 
 <center style="margin-top: 2em;">
-    <div>
+    <noscript>
+        <div>
+            <p>Thoughts? Corrections? Questions?<br>Drop me a message at <code>hello at this domain</code>!</p>
+        </div>
+    </noscript>
+    <div id="comment-container" style="display: none">
         <p>Thoughts? Corrections? Questions?</p>
-        <a class="button-grey h3" href="mailto:hello@akpain.net?subject=Re%3A%20{{ post.title | urlencode }}">Comment via email!</a>
+        <a id="comment-button" class="button-grey h3" href="overwritten by JS">Comment via email!</a>
     </div>
 </center>
+
+<script>
+    document.getElementById("comment-button").href = "mailto:" + unscramble(scrambledEmailAddr, keyForEmailAddr) + "?subject=Re%3A%20{{ post.title | urlencode }}";
+    document.getElementById("comment-container").style.display = "block";
+</script>
 {% endblock %}
 
 {% block aside %}