feat: add email obfuscation with clipboard copy and toast#3532
Open
asboyer wants to merge 5 commits intoalshedivat:mainfrom
Open
feat: add email obfuscation with clipboard copy and toast#3532asboyer wants to merge 5 commits intoalshedivat:mainfrom
asboyer wants to merge 5 commits intoalshedivat:mainfrom
Conversation
Add `protect_email: false` to _config.yml under the Layout section. When enabled, a `data-protect-email="true"` attribute is added to the <body> tag in the default layout, allowing client-side JavaScript to detect the setting and transform mailto links into obfuscated elements. This is the foundation for email obfuscation — no behavioral change until downstream JS and templates consume this flag.
Add client-side email protection logic to common.js:
- On page load, when data-protect-email is set on <body>, all
mailto: links (including those rendered by jekyll-socials) are
transformed into obfuscated elements with data-eu/data-ed attributes,
preventing email harvesting by scrapers.
- Clicking any .email-protect element reconstructs the email from
split parts and copies it to the clipboard, with a fallback for
browsers without the Clipboard API.
- A slide-up toast ("email copied to clipboard") confirms the action.
Add supporting styles to _components.scss:
- .email-protect cursor, .email-sep/.email-text colors for the
[at]/[dot] display used in CV pages.
- #email-copied-toast fixed-position slide-up animation.
When protect_email is enabled, email addresses in the CV layout are displayed as "user [at] domain [dot] tld" instead of plaintext. This applies to both the RenderCV (cv.email) and JSONResume (basics.email) contact information sections. The obfuscated display uses .email-protect spans with data-eu/data-ed attributes, so clicking copies the email to clipboard via the handler added in the previous commit. When protect_email is false (default), rendering is unchanged.
When protect_email is enabled, the email entry in the ninja-keys search palette copies the address to clipboard and shows a toast instead of opening a mailto: link. The email is split at build time so the full address never appears in the generated JavaScript. When protect_email is false (default), the existing mailto behavior with encode_email is preserved.
The toggle was set to true during testing. Reset to false so the feature is opt-in and existing users see no behavior change.
|
Codex usage limits have been reached for code reviews. Please check with the admins of this repo to increase the limits by adding credits. |
❌ Deploy Preview for relaxed-lollipop-b6bc17 failed. Why did it fail? →
|
asboyer
force-pushed
the
feat/email-obfuscation
branch
from
5354d20 to
10734f8
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Closes #3531
Adds an opt-in
protect_emailtoggle to_config.ymlthat obfuscates email addresses across the site to prevent spam harvesting by web scrapers. When enabled:mailto:links rendered byjekyll-socialsare transformed client-side into obfuscated elements — clicking copies the email to clipboard instead of opening a mail clientuser [at] domain [dot] tldinstead of plaintext, for both RenderCV and JSONResume formatsmailto:No changes to external plugins required — social link obfuscation is handled entirely client-side. Defaults to
false, so no breaking change for existing users.Files changed
_config.ymlprotect_email: falsetoggle_layouts/default.liquiddata-protect-emailbody attribute for JS detectionassets/js/common.js_sass/_components.scss_layouts/cv.liquid[at]/[dot]obfuscation for RenderCV and JSONResume email fields_scripts/search.liquid.jsScreenshots
CV email obfuscation
Search palette email
Toast notification
Test plan
protect_email: truein_config.ymluser [at] domain [dot] tldinstead of plaintext emailprotect_email: false— everything reverts to current behavior