From 9ec652c9c3f4ae2c657f8314759f4c987d99030e Mon Sep 17 00:00:00 2001
From: Eric Liu <eric@ericxliu.me>
Date: Sat, 20 Dec 2025 19:56:51 -0600
Subject: [PATCH] feat: Add email cloaking functionality and update social
 links in configuration

---
 config.toml                       |  1 +
 layouts/partials/cloakemail.html  | 48 +++++++++++++++++++++++++++++++
 layouts/partials/home/social.html | 28 ++++++++++++++++++
 3 files changed, 77 insertions(+)
 create mode 100644 layouts/partials/cloakemail.html
 create mode 100644 layouts/partials/home/social.html

diff --git a/config.toml b/config.toml
index 629b643..8312269 100644
--- a/config.toml
+++ b/config.toml
@@ -191,6 +191,7 @@ connectsrc = ["'self'", "https://www.google-analytics.com", "https://pagead2.goo
     name = "Personal email"
     icon = "fa fa-envelope fa-2x"
     weight = 3
+    email = "eric@ericxliu.me"
 [[params.social]]
     name = "RSS"
     icon = "fa-solid fa-rss fa-2x"
diff --git a/layouts/partials/cloakemail.html b/layouts/partials/cloakemail.html
new file mode 100644
index 0000000..9f0bb0e
--- /dev/null
+++ b/layouts/partials/cloakemail.html
@@ -0,0 +1,48 @@
+{{/* Get address, protocol and other parameters */}}
+{{- $address := .address -}}
+{{- $protocol := .protocol | default "mailto" -}}
+{{- $class := .class -}}
+{{- $displaytext := .display -}}
+{{- $parts := split $address "@" -}}
+{{- $user := (index $parts 0) -}}
+{{- $domain := (index $parts 1) | default "" -}}
+{{- $query := .query | default "" -}}
+{{/* Compute md5 fingerprint */}}
+{{- $fingerprint := md5 (print $address $protocol (index (seq 999 | shuffle) 0)) | truncate 8 "" -}}
+{{/* Hide the placeholder span when display text is provided (e.g., icons) */}}
+{{- if $displaytext }}
+<style>
+  #span-{{ $fingerprint }}.cloaked-e-mail {
+    display: none;
+  }
+</style>
+{{- else }}
+{{/* Set via CSS what is displayed when Javascript is disabled. Query is never displayed */}}
+<style>
+  #span-{{ $fingerprint }}.cloaked-e-mail:before {
+    content:{{ with $domain }}attr(data-domain) "\0040" {{ end }}attr(data-user);
+    unicode-bidi:bidi-override;
+    direction:rtl;
+  }
+</style>
+{{- end }}
+&#32;<span class="cloaked-e-mail" data-user="{{ range $index := seq (sub (len $user) 1) 0}}{{ substr $user $index 1}}{{ end }}"{{ with $domain }} data-domain="{{ range $index := seq (sub (len $domain) 1) 0}}{{ substr $domain $index 1}}{{ end }}"{{ end }}{{ with $displaytext }} data-display="{{ . | base64Encode }}"{{ end }} id="span-{{ $fingerprint }}"></span>&#32;
+{{/* Alter display with Javascript by changing DOM */}}
+<script id="script-{{ $fingerprint }}">
+  var scriptTag = document.getElementById("script-{{ $fingerprint }}");
+  var link = document.createElement("a");
+  var address = "{{ range $index := seq (sub (len $user) 1) 0}}{{ substr $user $index 1}}{{ end }}".split('').reverse().join(''){{ with $domain }} + "@" + "{{ range $index := seq (sub (len $domain) 1) 0}}{{ substr $domain $index 1}}{{ end }}".split('').reverse().join(''){{ with $query }} + "?" + "{{ range $index := seq (sub (len $query) 1) 0}}{{ substr $query $index 1}}{{ end }}".split('').reverse().join(''){{ end }}{{ end }};
+  link.href = {{ $protocol }} + ":" + address;
+  {{- with $displaytext }}
+  var span = document.getElementById("span-{{ $fingerprint }}");
+  link.innerHTML = atob(span.getAttribute("data-display"));
+  {{- else }}
+  link.innerText = address.split('?')[0];
+  {{- end }}
+  {{- with $class }}
+  link.className = "{{ $class }}";
+  {{- end }}
+  scriptTag.parentElement.insertBefore(link, scriptTag.previousElementSibling);
+  scriptTag.parentElement.removeChild(scriptTag.previousElementSibling);
+</script>
+{{/* The end */}}
\ No newline at end of file
diff --git a/layouts/partials/home/social.html b/layouts/partials/home/social.html
new file mode 100644
index 0000000..f23f0c5
--- /dev/null
+++ b/layouts/partials/home/social.html
@@ -0,0 +1,28 @@
+{{ with .Site.Params.social }}
+<ul>
+    {{ range sort . "weight" }}
+    {{ if .icon }}
+    <li>
+        {{ if .email }}
+        {{ $iconHTML := printf "<i class=\"%s\" aria-hidden=\"true\"></i>" .icon }}
+        {{ partial "cloakemail" (dict "address" .email "protocol" "mailto" "display" $iconHTML) }}
+        {{ else }}
+        <a href="{{ .url | safeURL }}" aria-label="{{ .name }}" {{ if .rel }}rel="{{ .rel }}" {{ end }} {{ if .target
+            }}target="{{ .target }}" {{ end }} {{ if .type }}type="{{ .type }}" {{ end }}>
+            <i class="{{ .icon }}" aria-hidden="true"></i>
+        </a>
+        {{ end }}
+    </li>
+    {{ else }}
+    <li>
+        {{ if .email }}
+        {{ partial "cloakemail" (dict "address" .email "protocol" "mailto" "display" .name) }}
+        {{ else }}
+        <a href="{{ .url | safeURL }}" aria-label="{{ .name }}" {{ if .rel }}rel="{{ .rel }}" {{ end }} {{ if .target
+            }}target="{{ .target }}" {{ end }}>{{ .name }}</a>
+        {{ end }}
+    </li>
+    {{ end }}
+    {{ end }}
+</ul>
+{{ end }}
\ No newline at end of file