├── .npmignore
├── .gitignore
├── demo
├── package.json
├── .eleventy.js
└── index.md
├── package.json
├── LICENSE
├── README.md
├── CONTRIBUTING.md
└── .eleventy.js
/.npmignore:
--------------------------------------------------------------------------------
1 | demo
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | package-lock.json
3 |
4 | demo/.env
5 | demo/node_modules
6 | demo/_site
7 | demo/package-lock.json
8 | demo/.cache
9 |
10 | .DS_Store
11 |
--------------------------------------------------------------------------------
/demo/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "scripts": {
3 | "dev": "eleventy --serve",
4 | "build": "eleventy"
5 | },
6 | "dependencies": {
7 | "@11ty/eleventy": "^0.12.1",
8 | "eleventy-plugin-local-images": "^0.4.1"
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/demo/.eleventy.js:
--------------------------------------------------------------------------------
1 | const localImages = require("../"); // For local development
2 |
3 | // const localImages = require("eleventy-plugin-local-images");
4 |
5 | module.exports = (eleventyConfig) => {
6 | eleventyConfig.addPlugin(localImages, {
7 | distPath: "_site",
8 | assetPath: "/assets/img",
9 | selector: "img, meta[property='og:image']",
10 | attribute: "src, content"
11 | });
12 | };
13 |
--------------------------------------------------------------------------------
/demo/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Hello world
3 | ---
4 |
5 |
6 |
7 | 
8 |
9 |
10 |
11 |
12 |
13 |
19 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "eleventy-plugin-local-images",
3 | "version": "0.4.0",
4 | "description": "a plugin to grab remote images and serve them locally",
5 | "main": ".eleventy.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1"
8 | },
9 | "repository": {
10 | "type": "git",
11 | "url": "git+https://github.com/robb0wen/eleventy-plugin-local-images.git"
12 | },
13 | "keywords": [
14 | "eleventy",
15 | "images",
16 | "assets",
17 | "performance"
18 | ],
19 | "author": {
20 | "name": "Robb Owen",
21 | "email": "hello@robbowen.digital",
22 | "url": "https://robbowen.digital"
23 | },
24 | "license": "MIT",
25 | "bugs": {
26 | "url": "https://github.com/robb0wen/eleventy-plugin-local-images/issues"
27 | },
28 | "homepage": "https://github.com/robb0wen/eleventy-plugin-local-images#readme",
29 | "dependencies": {
30 | "file-type": "^12.0.1",
31 | "fs-extra": "^8.1.0",
32 | "jsdom": "^15.1.1",
33 | "node-fetch": "^3.1.1",
34 | "shorthash": "0.0.2"
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2019 Robb Owen
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-local-images
2 |
3 | ## What is this plugin for?
4 | If you are pulling your Eleventy content from a cloud-based CMS or third-party API, then chances are high that any images referenced in the content will also be hosted in cloud storage. However, [Harry Roberts](https://twitter.com/@csswizardry) has suggested that it is usually more performant to self-host your static assets rather than host them on a CDN ([source](https://csswizardry.com/2019/05/self-host-your-static-assets/)).
5 |
6 | This plugin is a post-processor that looks for image paths within your generated site, pulls down a uniquely-hashed local copy of each remote image and updates the filepaths in markup - That way you can be confident that your site's images will still be working, even if your CMS or cloud storage goes down.
7 |
8 |
9 | ## Install the plugin
10 |
11 | From your project directory run:
12 | ```
13 | npm install eleventy-plugin-local-images --save-dev
14 | ```
15 | Once the package has installed, open up your `.eleventy.js` file.
16 |
17 | __Step 1:__ Require the plugin
18 |
19 | ```js
20 | const localImages = require('eleventy-plugin-local-images');
21 | ```
22 |
23 | __Step 2:__ Configure and add the plugin:
24 |
25 | ```js
26 | module.exports = function(eleventyConfig) {
27 | eleventyConfig.addPlugin(localImages, {
28 | distPath: '_site',
29 | assetPath: '/assets/img',
30 | selector: 'img',
31 | verbose: false
32 | });
33 | };
34 | ```
35 |
36 | ## Configuration options
37 |
38 | | Key | Type | Description |
39 | |--|--|--|
40 | | `distPath` | String | The output folder for your eleventy site, e.g. `'_site'` __Required__ |
41 | | `assetPath` | String | The root-relative folder where your image assets are stored, e.g. `'/assets/img'` __Required__ |
42 | | `selector` | String | The css selector for the images you wish to replace. This defaults to all images `'img'`, but could be used to fence certain images only, e.g. `'.post-content img'` Default: `'img'` |
43 | | `attribute` | String | The attribute(s) containing the image path. This defaults to `'src'`, but could be used to match other attributes, e.g. `'srcset'` if targeting a ``, or `'data-src'` if using a lazy-loading plugin or even a comma separated list of attributes `'src, content'` Default: `'src'` |
44 | | `verbose` | Boolean | Toggles console logging when images are saved locally Default: `false` |
45 |
46 | ## Known issues
47 |
48 | Currently, as all of the image checks are carried out asynchronously, if multiple `` tags exist with the same `src` attribute, the plugin will attempt to download the file for each instance of the path.
49 |
50 | This isn't as efficient as it should be, however the plugin will always save the file with the same hashed filename, so it will at least not result in duplicated files on your local storage.
51 |
52 | ## Contributing
53 |
54 | I'm really happy to consider any contributions to this plugin. Before you make any changes, please read the [contribution guide](https://github.com/robb0wen/eleventy-plugin-local-images/blob/master/CONTRIBUTING.md).
55 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Contributor Covenant Code of Conduct
2 |
3 | ## Our Pledge
4 |
5 | In the interest of fostering an open and welcoming environment, we as
6 | contributors and maintainers pledge to making participation in our project and
7 | our community a harassment-free experience for everyone, regardless of age, body
8 | size, disability, ethnicity, sex characteristics, gender identity and expression,
9 | level of experience, education, socio-economic status, nationality, personal
10 | appearance, race, religion, or sexual identity and orientation.
11 |
12 | ## Our Standards
13 |
14 | Examples of behavior that contributes to creating a positive environment
15 | include:
16 |
17 | * Using welcoming and inclusive language
18 | * Being respectful of differing viewpoints and experiences
19 | * Gracefully accepting constructive criticism
20 | * Focusing on what is best for the community
21 | * Showing empathy towards other community members
22 |
23 | Examples of unacceptable behavior by participants include:
24 |
25 | * The use of sexualized language or imagery and unwelcome sexual attention or
26 | advances
27 | * Trolling, insulting/derogatory comments, and personal or political attacks
28 | * Public or private harassment
29 | * Publishing others' private information, such as a physical or electronic
30 | address, without explicit permission
31 | * Other conduct which could reasonably be considered inappropriate in a
32 | professional setting
33 |
34 | ## Our Responsibilities
35 |
36 | Project maintainers are responsible for clarifying the standards of acceptable
37 | behavior and are expected to take appropriate and fair corrective action in
38 | response to any instances of unacceptable behavior.
39 |
40 | Project maintainers have the right and responsibility to remove, edit, or
41 | reject comments, commits, code, wiki edits, issues, and other contributions
42 | that are not aligned to this Code of Conduct, or to ban temporarily or
43 | permanently any contributor for other behaviors that they deem inappropriate,
44 | threatening, offensive, or harmful.
45 |
46 | ## Scope
47 |
48 | This Code of Conduct applies within all project spaces, and it also applies when
49 | an individual is representing the project or its community in public spaces.
50 | Examples of representing a project or community include using an official
51 | project e-mail address, posting via an official social media account, or acting
52 | as an appointed representative at an online or offline event. Representation of
53 | a project may be further defined and clarified by project maintainers.
54 |
55 | ## Enforcement
56 |
57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
58 | reported by contacting the project team at hello@robbowen.digital. All
59 | complaints will be reviewed and investigated and will result in a response that
60 | is deemed necessary and appropriate to the circumstances. The project team is
61 | obligated to maintain confidentiality with regard to the reporter of an incident.
62 | Further details of specific enforcement policies may be posted separately.
63 |
64 | Project maintainers who do not follow or enforce the Code of Conduct in good
65 | faith may face temporary or permanent repercussions as determined by other
66 | members of the project's leadership.
67 |
68 | ## Attribution
69 |
70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
71 | available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
72 |
73 | [homepage]: https://www.contributor-covenant.org
74 |
75 | For answers to common questions about this code of conduct, see
76 | https://www.contributor-covenant.org/faq
77 |
78 |
--------------------------------------------------------------------------------
/.eleventy.js:
--------------------------------------------------------------------------------
1 | const fs = require('fs-extra');
2 | const path = require('path');
3 | const {
4 | JSDOM
5 | } = require('jsdom');
6 | const fetch = require('node-fetch');
7 | const sh = require('shorthash');
8 | const fileType = require('file-type');
9 |
10 | let config = {
11 | distPath: '_site',
12 | verbose: false,
13 | attribute: 'src'
14 | };
15 |
16 | const downloadImage = async path => {
17 | if (config.verbose) {
18 | console.log('eleventy-plugin-local-images: Attempting to copy ' + path);
19 | }
20 |
21 | try {
22 | const imgBuffer = await fetch(path)
23 | .then(res => {
24 | if (res.status == 200) {
25 | return res;
26 | } else {
27 | throw new Error(`File "${path}" not found`);
28 | }
29 | }).then(res => res.buffer());
30 | return imgBuffer
31 | } catch (error) {
32 | console.log(error);
33 | }
34 | }
35 |
36 | const getFileType = (filename, buffer) => {
37 | // infer the file ext from the buffer
38 | const type = fileType(buffer);
39 |
40 | if (type.ext) {
41 | // return the filename with extension
42 | return `${filename}.${type.ext}`;
43 | } else {
44 | throw new Error(`Couldn't infer file extension for "${path}"`);
45 | }
46 | };
47 |
48 | const urlJoin = (a, b) => `${a.replace(/\/$/, '')}/${b.replace(/^\//, '')}`;
49 |
50 | const processImageSrcset = async img => {
51 |
52 | let {
53 | distPath,
54 | assetPath,
55 | attribute
56 | } = config;
57 |
58 | let srcset = img.getAttribute("srcset");
59 |
60 | let srcsetDef = "srcset";
61 |
62 | if (!srcset) {
63 | srcset = img.getAttribute("data-srcset");
64 | srcsetDef = "data-srcset";
65 | }
66 |
67 | if (!srcset) {
68 | return;
69 | }
70 |
71 | let newSrcset = [];
72 |
73 | let parts = srcset.split(",");
74 |
75 | parts.forEach(async (part) => {
76 | let url = part.trim().split(" ");
77 | let imgPath = url[0];
78 |
79 | // get the filename from the path
80 | const pathComponents = imgPath.split('/');
81 |
82 | // break off cache busting string if there is one
83 | let filename = pathComponents[pathComponents.length - 1].split("?");
84 | filename = filename[0];
85 |
86 | // generate a unique short hash based on the original file path
87 | // this will prevent filename clashes
88 | const hash = sh.unique(imgPath);
89 |
90 | // image is external so download it.
91 |
92 | let imgBuffer = await downloadImage(imgPath);
93 | if (imgBuffer) {
94 |
95 | // check if the remote image has a file extension and then hash the filename
96 | const hashedFilename = !path.extname(filename) ? `${hash}-${getFileType(filename, imgBuffer)}` : `${hash}-${filename}`;
97 |
98 | // create the file path from config
99 | let outputFilePath = path.join(distPath, assetPath, hashedFilename);
100 |
101 | // save the file out, and log it to the console
102 | await fs.outputFile(outputFilePath, imgBuffer);
103 | if (config.verbose) {
104 | console.log(`eleventy-plugin-local-images: Saving ${filename} to ${outputFilePath}`);
105 | }
106 |
107 | newSrcset.push(`${assetPath}/${hashedFilename} ${url[1]}`)
108 | }
109 | });
110 | img.setAttribute(srcsetDef, newSrcset.join(", "));
111 | }
112 |
113 | const processImage = async img => {
114 | let {
115 | distPath,
116 | assetPath,
117 | attribute
118 | } = config;
119 |
120 | const external = /https?:\/\/((?:[\w\d-]+\.)+[\w\d]{2,})/i;
121 | const attr = attribute.split(",").map(attr => attr.trim()).find(attr => img.getAttribute(attr));
122 | const imgPath = img.getAttribute(attr);
123 |
124 | if (external.test(imgPath)) {
125 | try {
126 | // get the filename from the path
127 | const pathComponents = imgPath.split('/');
128 |
129 | // break off cache busting string if there is one
130 | let filename = pathComponents[pathComponents.length - 1].split("?");
131 | filename = filename[0];
132 |
133 | // generate a unique short hash based on the original file path
134 | // this will prevent filename clashes
135 | const hash = sh.unique(imgPath);
136 |
137 | // image is external so download it.
138 |
139 | let imgBuffer = await downloadImage(imgPath);
140 | if (imgBuffer) {
141 |
142 | // check if the remote image has a file extension and then hash the filename
143 | const hashedFilename = !path.extname(filename) ? `${hash}-${getFileType(filename, imgBuffer)}` : `${hash}-${filename}`;
144 |
145 | // create the file path from config
146 | let outputFilePath = path.join(distPath, assetPath, hashedFilename);
147 |
148 | // save the file out, and log it to the console
149 | await fs.outputFile(outputFilePath, imgBuffer);
150 | if (config.verbose) {
151 | console.log(`eleventy-plugin-local-images: Saving ${filename} to ${outputFilePath}`);
152 | }
153 |
154 | // Update the image with the new file path
155 | img.setAttribute(attr, urlJoin(assetPath, hashedFilename));
156 |
157 | await processImageSrcset(img);
158 | }
159 | } catch (error) {
160 | console.log(error);
161 | }
162 | }
163 |
164 | return img;
165 | };
166 |
167 | const grabRemoteImages = async (rawContent, outputPath) => {
168 | let {
169 | selector = 'img'
170 | } = config;
171 | let content = rawContent;
172 |
173 | if (outputPath && outputPath.endsWith('.html')) {
174 | const dom = new JSDOM(content);
175 | const images = [...dom.window.document.querySelectorAll(selector)];
176 |
177 | if (images.length > 0) {
178 | await Promise.all(images.map(i => processImage(i)));
179 | content = dom.serialize();
180 | }
181 | }
182 |
183 | return content;
184 | };
185 |
186 | module.exports = {
187 | initArguments: {},
188 | configFunction: async (eleventyConfig, pluginOptions = {}) => {
189 | config = Object.assign({}, config, pluginOptions);
190 |
191 | // check the required config is present
192 | if (!config.assetPath || !config.distPath) {
193 | throw new Error("eleventy-plugin-local-images requires that assetPath and distPath are set");
194 | }
195 |
196 | eleventyConfig.addTransform('localimages', grabRemoteImages);
197 | },
198 | };
199 |
--------------------------------------------------------------------------------