Reply via email with hugo-cloak-email theme plugin

Hi. I’m trying to add a reply via email in single.html template and incorporate hugo-cloak-email theme plugin.

My current template is:

{{ with .Site.Social.email }}
<a href='mailto:{{ . }}?subject={{ i18n "email-subject" }}"{{ default $.Site.Title $.Page.Title }}"'>Reply via email</a>
{{ end }}

It creates a reply button emailed to .Site.Social.email with a dynamic subject of the page title. The problem is the email is exposed to spammers.

Hugo cloak email

When the hugo-cloak-email theme plugin is used:

{{< cloakemail "hi@example.com" >}}

This is what is rendered in the front end:

hi@example.com

But the email is hidden in the page source:

<style>
  #span-72381b06.cloaked-e-mail:before {
    content:attr(data-domain) "\0040" attr(data-user);
    unicode-bidi:bidi-override;
    direction:rtl;
  }
</style>
&#32;<span class="cloaked-e-mail" data-user="ih" data-domain="moc.elpmaxe" id="span-72381b06"></span>&#32;

<script id="script-72381b06">
  var scriptTag = document.getElementById("script-72381b06");
  var link = document.createElement("a");
  var address = "ih".split('').reverse().join('') + "@" + "moc.elpmaxe".split('').reverse().join('');
  link.href = "mailto" + ":" + address;
  
  link.innerText = address.split('?')[0];
  
  
  scriptTag.parentElement.insertBefore(link, scriptTag.previousElementSibling);
  scriptTag.parentElement.removeChild(scriptTag.previousElementSibling)
</script>

How to get the hi@example.com in rendered HTML with hugo-cloak-email theme plugin and put it in mailto, while maintaining its cloak capability?

<a href='mailto:{{ . }}?subject={{ i18n "email-subject" }}"{{ default $.Site.Title $.Page.Title }}"'>Reply via email</a>

You can’t have your cake and eat it too – either it’s visible in the HTML as mailto, then it’s not cloaked. Or it’s the other way around. And the (badly written) JavaScript following your span element seems to just do what you want: It creates a mailto link, which it adds to the document directly before the span. I suggest that you have a look at the final HTML in your favorite browser’s developer tools.
If you want to use a subject as well in the mailto link, you should modify the shortcode accordingly.

Yeah I know it’s absurd. I’m staying with this shortcode then:

{{ with .Site.Social.email }}
<a href='mailto:{{ . }}?subject={{ i18n "email-subject" }}"{{ default $.Site.Title $.Page.Title }}"'>Reply via email</a>
{{ end }}

Thank you for your insight.

below link can be pasted as is in the html site.
put extra y’s in the email address.
the y will be removed on click.
For putting in a menu or anywhere in a template, I created a very simple partial (brankomail) with the following:

<a class="nav-link" href="mailto:yemyyyailyyy@exyyyamypyle.cyoym" onclick="this.href=this.href.replace(/y/g,'');" title="email me">Contact</a>

then call the partial from a template by

            {{ partial "brankomail.html" . }}

script creds go to my friend Branko Lankester