Skip to content

Commit 4fa3ad5

Browse files
mxmehlmxmehl
authored
make shortcode also usable as partial (#14)
1 parent 19e0284 commit 4fa3ad5

File tree

3 files changed

+59
-40
lines changed

3 files changed

+59
-40
lines changed

‎README.md

+11-2
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,11 @@
44

55
## About
66

7-
This [Hugo](https://gohugo.io) theme component provides a shortcode.
7+
This [Hugo](https://gohugo.io) theme component provides a shortcode and a partial
88

99
## Features
1010

11-
Shortcode `cloakemail` cloakes e-mail or other messaging (`xmpp`, `tg`, etc.) or phone (`sip`, `tel`, etc.) addresses from spamming bots.
11+
Shortcode `cloakemail` cloakes e-mail or other messaging (`xmpp`, `tg`, etc.) or phone (`sip`, `tel`, etc.) addresses from spamming bots. Can also be used as a partial with equivalent functionality.
1212

1313
### Mandatory parameter
1414

@@ -31,6 +31,15 @@ Don't indicate other URI parameters, for instance to indicate an e-mail subject.
3131

3232
All parameters can be combined.
3333

34+
### Use as partial
35+
36+
In some cases, you have to embed e-mail addresses directly in your theme code, e.g. partials. Therefore, you can also use the functionality as a partial.
37+
38+
Examples:
39+
40+
- `{{ partial "cloakemail" (dict "address" "jane.doe@example.com") }}`
41+
- `{{ partial "cloakemail" (dict "address" "jane.doe@example.com" "protocol" "xmpp") }}`
42+
3443
### How it works
3544

3645
Given address `jane.doe@example.com`, the shortcode

‎layouts/partials/cloakemail.html

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
{{/* Get address, protocol and other parameters */}}
2+
{{- $address := .address -}}
3+
{{- $protocol := .protocol | default "mailto" -}}
4+
{{- $class := .class -}}
5+
{{- $displaytext := .display -}}
6+
{{- $parts := split $address "@" -}}
7+
{{- $user := (index $parts 0) -}}
8+
{{- $domain := (index $parts 1) | default "" -}}
9+
{{- $query := .query | default "" -}}
10+
{{/* Compute md5 fingerprint */}}
11+
{{- $fingerprint := md5 (print $address $protocol (index (seq 999 | shuffle) 0)) | truncate 8 "" -}}
12+
{{/* Set via CSS what is displayed when Javascript is disabled. Query is never displayed */}}
13+
<style>
14+
#span-{{ $fingerprint }}.cloaked-e-mail:before {
15+
content:{{ with $domain }}attr(data-domain) "\0040" {{ end }}attr(data-user);
16+
unicode-bidi:bidi-override;
17+
direction:rtl;
18+
}
19+
</style>
20+
&#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 }} id="span-{{ $fingerprint }}"></span>&#32;
21+
{{/* Alter display with Javascript by changing DOM */}}
22+
<script id="script-{{ $fingerprint }}">
23+
var scriptTag = document.getElementById("script-{{ $fingerprint }}");
24+
var link = document.createElement("a");
25+
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 }};
26+
link.href = {{ $protocol }} + ":" + address;
27+
{{- with $displaytext }}
28+
link.innerText = {{ $displaytext }};
29+
{{- else }}
30+
link.innerText = address.split('?')[0];
31+
{{- end }}
32+
{{- with $class }}
33+
link.className = "{{ $class }}";
34+
{{- end }}
35+
scriptTag.parentElement.insertBefore(link, scriptTag.previousElementSibling);
36+
scriptTag.parentElement.removeChild(scriptTag.previousElementSibling)
37+
</script>
38+
{{/* The end */}}

‎layouts/shortcodes/cloakemail.html

+10-38
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,10 @@
1-
{{/* Get address, protocol and other parameters */}}
2-
{{- $address := .Get "address" | default (.Get 0) -}}
3-
{{- $protocol := .Get "protocol" | default "mailto" -}}
4-
{{- $class := .Get "class" -}}
5-
{{- $displaytext := .Get "display" -}}
6-
{{- $parts := split $address "@" -}}
7-
{{- $user := (index $parts 0) -}}
8-
{{- $domain := (index $parts 1) | default "" -}}
9-
{{- $query := .Get "query" | default "" -}}
10-
{{/* Compute md5 fingerprint */}}
11-
{{- $fingerprint := md5 (print $address $protocol (index (seq 999 | shuffle) 0)) | truncate 8 "" -}}
12-
{{/* Set via CSS what is displayed when Javascript is disabled. Query is never displayed */}}
13-
<style>
14-
#span-{{ $fingerprint }}.cloaked-e-mail:before {
15-
content:{{ with $domain }}attr(data-domain) "\0040" {{ end }}attr(data-user);
16-
unicode-bidi:bidi-override;
17-
direction:rtl;
18-
}
19-
</style>
20-
&#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 }} id="span-{{ $fingerprint }}"></span>&#32;
21-
{{/* Alter display with Javascript by changing DOM */}}
22-
<script id="script-{{ $fingerprint }}">
23-
var scriptTag = document.getElementById("script-{{ $fingerprint }}");
24-
var link = document.createElement("a");
25-
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 }};
26-
link.href = {{ $protocol }} + ":" + address;
27-
{{- with $displaytext }}
28-
link.innerText = {{ $displaytext }};
29-
{{- else }}
30-
link.innerText = address.split('?')[0];
31-
{{- end }}
32-
{{- with $class }}
33-
link.className = "{{ $class }}";
34-
{{- end }}
35-
scriptTag.parentElement.insertBefore(link, scriptTag.previousElementSibling);
36-
scriptTag.parentElement.removeChild(scriptTag.previousElementSibling)
37-
</script>
38-
{{/* The end */}}
1+
2+
{{- partial "cloakemail.html"
3+
(dict
4+
"address" (.Get "address" | default (.Get 0))
5+
"protocol" (.Get "protocol")
6+
"class" (.Get "class")
7+
"display" (.Get "display")
8+
"query" (.Get "query")
9+
)
10+
-}}

0 commit comments

Comments
 (0)