├── .gitignore ├── LICENSE ├── README.md ├── index.js ├── package-lock.json └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # TypeScript v1 declaration files 45 | typings/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Microbundle cache 57 | .rpt2_cache/ 58 | .rts2_cache_cjs/ 59 | .rts2_cache_es/ 60 | .rts2_cache_umd/ 61 | 62 | # Optional REPL history 63 | .node_repl_history 64 | 65 | # Output of 'npm pack' 66 | *.tgz 67 | 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | # dotenv environment variables file 72 | .env 73 | .env.test 74 | 75 | # parcel-bundler cache (https://parceljs.org/) 76 | .cache 77 | 78 | # Next.js build output 79 | .next 80 | 81 | # Nuxt.js build / generate output 82 | .nuxt 83 | dist 84 | 85 | # Gatsby files 86 | .cache/ 87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 88 | # https://nextjs.org/blog/next-9-1#public-directory-support 89 | # public 90 | 91 | # vuepress build output 92 | .vuepress/dist 93 | 94 | # Serverless directories 95 | .serverless/ 96 | 97 | # FuseBox cache 98 | .fusebox/ 99 | 100 | # DynamoDB Local files 101 | .dynamodb/ 102 | 103 | # TernJS port file 104 | .tern-port 105 | 106 | # Editors 107 | .vscode 108 | .idea 109 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Víctor Navarro 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # eleventy-plugin-external-links 2 | 3 | Eleventy plugin to make all external links open securely in a new tab 4 | 5 | ```shell script 6 | npm install -D eleventy-plugin-external-links 7 | ``` 8 | 9 | Then simply add it to you eleventy config 10 | 11 | ```js 12 | const externalLinks = require('eleventy-plugin-external-links') 13 | 14 | module.exports = (eleventyConfig) => { 15 | eleventyConfig.addPlugin(externalLinks, { 16 | // Plugin defaults: 17 | name: 'external-links', // Plugin name 18 | regex: /^(([a-z]+:)|(\/\/))/i, // Regex that test if href is external 19 | target: "_blank", // 'target' attribute for external links 20 | rel: "noopener", // 'rel' attribute for external links 21 | extensions: [".html"], // Extensions to apply transform to 22 | includeDoctype: true, // Default to include '' at the beginning of the file 23 | }) 24 | } 25 | ``` 26 | 27 | Under the hood it adds a simple transform that: 28 | 29 | 1. Checks the file extension 30 | 2. Parses the file using [node-html-parser](https://www.npmjs.com/package/node-html-parser) 31 | 3. Finds all the `` tags which `href` matches regex 32 | 4. Add `target` and `rel` attributes to the elements 33 | 5. Return the content with '' added at the beginning of the file as default 34 | 35 | The default regex will detect links as follows: 36 | 37 | | Link | External | 38 | | ---- | -------- | 39 | | http://google.com | ✔ | 40 | | https://google.com | ✔ | 41 | | //google.com | ✔ | 42 | | mailto:mail@example.com | ✔ | 43 | | /about | ❌ | 44 | | image.jpg | ❌ | 45 | | #anchor | ❌ | 46 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | const {parse} = require('node-html-parser') 2 | const {extname} = require('path') 3 | 4 | module.exports = (eleventyConfig, userOptions = {}) => { 5 | const options = { 6 | name: 'external-links', 7 | regex: new RegExp('^(([a-z]+:)|(//))', 'i'), 8 | target: "_blank", 9 | rel: "noopener", 10 | extensions: [".html"], 11 | includeDoctype: true, 12 | ...userOptions 13 | } 14 | 15 | eleventyConfig.addTransform(options.extensions, (content, outputPath) => { 16 | if (outputPath && options.extensions.includes(extname(outputPath))) { 17 | const root = parse(content); 18 | const links = root.querySelectorAll("a"); 19 | links.forEach((link) => { 20 | const href = link.getAttribute('href'); 21 | if (href && options.regex.test(href)) { 22 | link.setAttribute("target", options.target); 23 | link.setAttribute("rel", options.rel); 24 | } 25 | }); 26 | const newContent = root.toString(); 27 | return options.includeDoctype ? `${newContent}` : newContent; 28 | } 29 | return content; 30 | }) 31 | } 32 | 33 | -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "eleventy-plugin-external-links", 3 | "version": "1.0.0", 4 | "lockfileVersion": 1, 5 | "requires": true, 6 | "dependencies": { 7 | "boolbase": { 8 | "version": "1.0.0", 9 | "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", 10 | "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=" 11 | }, 12 | "css-select": { 13 | "version": "3.1.2", 14 | "resolved": "https://registry.npmjs.org/css-select/-/css-select-3.1.2.tgz", 15 | "integrity": "sha512-qmss1EihSuBNWNNhHjxzxSfJoFBM/lERB/Q4EnsJQQC62R2evJDW481091oAdOr9uh46/0n4nrg0It5cAnj1RA==", 16 | "requires": { 17 | "boolbase": "^1.0.0", 18 | "css-what": "^4.0.0", 19 | "domhandler": "^4.0.0", 20 | "domutils": "^2.4.3", 21 | "nth-check": "^2.0.0" 22 | } 23 | }, 24 | "css-what": { 25 | "version": "4.0.0", 26 | "resolved": "https://registry.npmjs.org/css-what/-/css-what-4.0.0.tgz", 27 | "integrity": "sha512-teijzG7kwYfNVsUh2H/YN62xW3KK9YhXEgSlbxMlcyjPNvdKJqFx5lrwlJgoFP1ZHlB89iGDlo/JyshKeRhv5A==" 28 | }, 29 | "dom-serializer": { 30 | "version": "1.2.0", 31 | "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.2.0.tgz", 32 | "integrity": "sha512-n6kZFH/KlCrqs/1GHMOd5i2fd/beQHuehKdWvNNffbGHTr/almdhuVvTVFb3V7fglz+nC50fFusu3lY33h12pA==", 33 | "requires": { 34 | "domelementtype": "^2.0.1", 35 | "domhandler": "^4.0.0", 36 | "entities": "^2.0.0" 37 | } 38 | }, 39 | "domelementtype": { 40 | "version": "2.1.0", 41 | "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.1.0.tgz", 42 | "integrity": "sha512-LsTgx/L5VpD+Q8lmsXSHW2WpA+eBlZ9HPf3erD1IoPF00/3JKHZ3BknUVA2QGDNu69ZNmyFmCWBSO45XjYKC5w==" 43 | }, 44 | "domhandler": { 45 | "version": "4.0.0", 46 | "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.0.0.tgz", 47 | "integrity": "sha512-KPTbnGQ1JeEMQyO1iYXoagsI6so/C96HZiFyByU3T6iAzpXn8EGEvct6unm1ZGoed8ByO2oirxgwxBmqKF9haA==", 48 | "requires": { 49 | "domelementtype": "^2.1.0" 50 | } 51 | }, 52 | "domutils": { 53 | "version": "2.5.0", 54 | "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.5.0.tgz", 55 | "integrity": "sha512-Ho16rzNMOFk2fPwChGh3D2D9OEHAfG19HgmRR2l+WLSsIstNsAYBzePH412bL0y5T44ejABIVfTHQ8nqi/tBCg==", 56 | "requires": { 57 | "dom-serializer": "^1.0.1", 58 | "domelementtype": "^2.0.1", 59 | "domhandler": "^4.0.0" 60 | } 61 | }, 62 | "entities": { 63 | "version": "2.2.0", 64 | "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz", 65 | "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==" 66 | }, 67 | "he": { 68 | "version": "1.2.0", 69 | "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", 70 | "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==" 71 | }, 72 | "node-html-parser": { 73 | "version": "3.1.2", 74 | "resolved": "https://registry.npmjs.org/node-html-parser/-/node-html-parser-3.1.2.tgz", 75 | "integrity": "sha512-t1FyoT8/3GTs1kgP70SsXAdQzxA0etXsBc8fPQYRwETucmgkD9f+1A7jVhSngUavEueR3fF8BkfDv3dRGWOOWQ==", 76 | "requires": { 77 | "css-select": "^3.1.2", 78 | "he": "1.2.0" 79 | } 80 | }, 81 | "nth-check": { 82 | "version": "2.0.0", 83 | "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.0.0.tgz", 84 | "integrity": "sha512-i4sc/Kj8htBrAiH1viZ0TgU8Y5XqCaV/FziYK6TBczxmeKm3AEFWqqF3195yKudrarqy7Zu80Ra5dobFjn9X/Q==", 85 | "requires": { 86 | "boolbase": "^1.0.0" 87 | } 88 | } 89 | } 90 | } 91 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "eleventy-plugin-external-links", 3 | "version": "1.1.2", 4 | "description": "Eleventy plugin to make all external links open securely in a new tab", 5 | "main": "index.js", 6 | "license": "MIT", 7 | "homepage": "https://github.com/vimtor/eleventy-plugin-external-links#readme", 8 | "author": { 9 | "name": "Victor Navarro", 10 | "url": "https://vimtor.io" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "git+https://github.com/vimtor/eleventy-plugin-external-links.git" 15 | }, 16 | "bugs": { 17 | "url": "https://github.com/vimtor/eleventy-plugin-external-links/issues" 18 | }, 19 | "keywords": [ 20 | "eleventy", 21 | "11ty", 22 | "plugin", 23 | "links" 24 | ], 25 | "dependencies": { 26 | "node-html-parser": "^3.1.2" 27 | } 28 | } 29 | --------------------------------------------------------------------------------