Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/martignoni/hugo-cloak-email

A Hugo theme component to cloak email adresses
https://github.com/martignoni/hugo-cloak-email

antispam email hugo hugo-theme-component

Last synced: 6 days ago
JSON representation

A Hugo theme component to cloak email adresses

Awesome Lists containing this project

README 

        
# hugo-cloak-email



[![Awesome](https://awesome.re/badge.svg)](https://github.com/budparr/awesome-hugo)



## About



This [Hugo](https://gohugo.io) 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.

```go

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

```

or via named `address` paramater:

```go

{{< 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 `` 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 `` 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`:

    ```yaml

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

    ```

    or, with `config.toml`,

    ```toml

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

    ```

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

    ```go

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

    ```

    or

    ```go

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

    ```

4. You may specify parameters (see above)



### Credits



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



Thanks to [@mxmehl](https://github.com/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](https://github.com/danieka) in [this pull request](https://github.com/gohugoio/hugo/pull/3935).