https://github.com/vimtor/eleventy-plugin-external-links
Eleventy plugin to make all external links open securely in a new tab
https://github.com/vimtor/eleventy-plugin-external-links
eleventy eleventy-plugin
Last synced: 6 months ago
JSON representation
Eleventy plugin to make all external links open securely in a new tab
- Host: GitHub
- URL: https://github.com/vimtor/eleventy-plugin-external-links
- Owner: vimtor
- License: mit
- Created: 2021-01-03T16:12:42.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2024-12-31T17:17:01.000Z (about 1 year ago)
- Last Synced: 2025-08-04T16:16:45.457Z (6 months ago)
- Topics: eleventy, eleventy-plugin
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/eleventy-plugin-external-links
- Size: 13.7 KB
- Stars: 10
- Watchers: 0
- Forks: 1
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# eleventy-plugin-external-links
Eleventy plugin to make all external links open securely in a new tab
```shell script
npm install -D eleventy-plugin-external-links
```
Then simply add it to you eleventy config
```js
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 '' at the beginning of the file
})
}
```
Under the hood it adds a simple transform that:
1. Checks the file extension
2. Parses the file using [node-html-parser](https://www.npmjs.com/package/node-html-parser)
3. Finds all the `` 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:mail@example.com | ✔ |
| /about | ❌ |
| image.jpg | ❌ |
| #anchor | ❌ |