Skip to content

Add email obfuscation to prevent spam harvesting #3531

@asboyer

Description

@asboyer

Have you checked that your feature request isn't already filed?

  • I read through FAQ and searched through the past issues, none of which addressed my feature request.
  • Yes, I have checked that this feature request isn't already filed.

Description & Motivation

al-folio currently exposes email addresses in plaintext HTML in multiple places:

  • Social links (about page footer + navbar) — rendered by jekyll-socials as <a href='mailto:you@example.com'>
  • CV pages — rendered in _layouts/cv.liquid as plain text ({{ cv.email }} / {{ basics.email }})
  • Search command palette — rendered in _scripts/search.liquid.js with a mailto: handler

This makes email addresses trivially harvestable by web scrapers and bots for spam. The jekyll-email-protect plugin is already installed but unused.

Pitch

Add a protect_email toggle to _config.yml (default: false) that, when enabled:

  1. Social links (navbar/footer): Client-side JS transforms mailto: links into obfuscated elements with split data-eu / data-ed attributes. Clicking copies the email to clipboard instead of opening a mail client.
  2. CV pages: Liquid templates display email as user [at] domain [dot] tld with the same data attributes for clipboard copy.
  3. Search palette: The email entry copies to clipboard instead of opening mailto:.
  4. Toast notification: A slide-up toast confirms "email copied to clipboard" on any email click.

Where changes live

Area File(s) What changes
Config _config.yml New protect_email: false toggle
Body flag _layouts/default.liquid data-protect-email attribute on <body> so JS can detect the setting
Social links assets/js/common.js DOM-ready transform of mailto: → obfuscated elements
CV pages _layouts/cv.liquid Liquid conditional for [at] / [dot] display
Search _scripts/search.liquid.js Conditional clipboard copy instead of mailto:
Styles _sass/_components.scss Toast animation + email-protect cursor styles

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions