eleventy-plugin-external-links

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

npm install -D eleventy-plugin-external-links

Then simply add it to you eleventy config

const externalLinks = require('eleventy-plugin-external-links')

module.exports = (eleventyConfig) => {
    eleventyConfig.addPlugin(externalLinks, {
        // Plugin defaults:
        name: 'external-links',         // Plugin name
        regex: /^(([a-z]+:)|(\/\/))/i,  // Regex that test if href is external
        target: "_blank",               // 'target' attribute for external links
        rel: "noopener",                // 'rel' attribute for external links
        extensions: [".html"],          // Extensions to apply transform to
        includeDoctype: true,           // Default to include '<!DOCTYPE html>' at the beginning of the file
    })
}

Under the hood it adds a simple transform that:

Checks the file extension
Parses the file using node-html-parser
Finds all the <a /> tags which href matches regex
Add target and rel attributes to the elements
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:mail@example.com	✔
/about	❌
image.jpg	❌
#anchor	❌

vimtor/eleventy-plugin-external-links

eleventy-plugin-external-links