hugo-cloak-email

About

This Hugo theme component provides a shortcode and a partial.

Features

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

Mandatory parameter

Address to cloak, e.g.

{{< cloakemail "[email protected]" >}}

or via named address paramater:

{{< cloakemail address="[email protected]" >}}

Don't indicate other URI parameters, for instance to indicate an e-mail subject. For such feature, use instead optional query parameter (see below).

Optional parameters

• Use protocol to specify the protocol: {{< cloakemail address="[email protected]" protocol="xmpp" >}} or {{< cloakemail address="+1 212 664-7665" protocol="tel" >}}
• Use display to display any text on the page instead of the address: {{< cloakemail address="[email protected]" display="Send us a mail!" >}}
• Use class to indicate CSS classes to use: {{< cloakemail address="[email protected]" class="vip company-a" >}}
• Use query to specify a e-mail subject or other URI parameters (URI query): {{< cloakemail address="[email protected]" query="subject=Message from contact form" >}}. The query is never printed on the web page.

All parameters can be combined.

Use as partial

In some cases, you have to embed e-mail addresses directly in your theme code, e.g. with partials. This component can also be used as a partial, with the same functionality.

Examples:

• {{ partial "cloakemail" (dict "address" "[email protected]") }}
• {{ partial "cloakemail" (dict "address" "[email protected]" "protocol" "xmpp") }}

How it works

Given address [email protected], the shortcode

• Writes <span class="cloaked-e-mail" data-user="eod.enaj" data-domain="moc.elpmaxe"></span> in the web page.
• A CSS rule reverses the strings back to their original values and concatenates them with @ in-between. No link is available yet.
• A Javascript builds then the link by creating a <a href=...> element.

Installation

1. Add the hugo-cloak-email as a submodule to be able to get upstream changes later git submodule add https://github.com/martignoni/hugo-cloak-email.git themes/hugo-cloak-email
2. Add hugo-cloak-email as the left-most element of the theme list variable in your site's or theme's configuration file config.yaml or config.toml. Example, with config.yaml:

   theme: ["hugo-cloak-email", "my-theme"]

   or, with config.toml,

   theme = ["hugo-cloak-email", "my-theme"]

3. In your site, use the shortcode, this way:

   {{< cloakemail "[email protected]" >}}

   or

   {{< cloakemail address="[email protected]" >}}

4. You may specify parameters (see above)

Credits

Copyright © 2019 onwards, Nicolas Martignoni [email protected].

Thanks to @mxmehl for ideas and explanations about other protocols and script fingerprinting and for implementing the use of this component as a partial.

This theme component was possible because of the work done by @danieka in this pull request.