eleventy-external-links

Eleventy plugin to make all external links open securely in a new tab.

This project is based on https://github.com/vimtor/eleventy-plugin-external-links.

npm install semasquare/eleventy-external-links#v1.0.0 --save

Then simply add it to you eleventy config

const externalLinks = require("@semasquare/eleventy-external-links");

module.exports = (eleventyConfig) => {
    eleventyConfig.addPlugin(externalLinks, {
        // Plugin defaults:
        extensions: [".html"],                                  // Extensions to apply transform to
        rules: [
            {
                name: "external links",                         // Plugin name
                regex: new RegExp("^(([a-z]+:)|(//))", "i"),    // Regex that test if href is external
                target: "_blank",                               // 'target' attribute for external links
                rel: "noopener"                                 // 'rel' attribute for external links
            }
        ]
    })
}

Under the hood it adds a simple transform that:

1. Checks the file extension
2. Parses the file using node-html-parser
3. Finds all the <a /> tags which href matches regex
4. Add target and rel attributes to the elements
5. Return the content with '' added at the beginning of the file as default

The default regex will detect links as follows:

Link	External
http://google.com	✔
https://google.com	✔
//google.com	✔
mailto:[email protected]	✔
/about	❌
image.jpg	❌
#anchor	❌

Run tests

npm run test