eric/ericxliu-me
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add email cloaking functionality and update social links in configuration
All checks were successful
Hugo Publish CI / build-and-deploy (push) Successful in 17s
Details

Browse Source
This commit is contained in:
Eric X. Liu
2025-12-20 19:56:51 -06:00
parent b19b045fc0
commit 9ec652c9c3
3 changed files with 77 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
config.toml
View File

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

48
layouts/partials/cloakemail.html Normal file
View File

@@ -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 */}}

28
layouts/partials/home/social.html Normal file
View File

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