https://github.com/victornpb/eleventy-plugin-page-assets
https://github.com/victornpb/eleventy-plugin-page-assets
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/victornpb/eleventy-plugin-page-assets
- Owner: victornpb
- License: mit
- Created: 2020-12-06T05:00:17.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2024-09-06T10:46:55.000Z (about 1 year ago)
- Last Synced: 2025-06-19T04:07:38.112Z (4 months ago)
- Language: JavaScript
- Size: 78.1 KB
- Stars: 22
- Watchers: 5
- Forks: 17
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# eleventy-plugin-page-assets
Copy local page assets to permalink folder
# Instalation
Available on [npm](https://www.npmjs.com/package/eleventy-plugin-page-assets)
```sh
npm install eleventy-plugin-page-assets --save-dev
```
Open up your Eleventy config file (probably .eleventy.js) and use addPlugin:
FILENAME .eleventy.js
```js
const pageAssetsPlugin = require('eleventy-plugin-page-assets');
module.exports = function(eleventyConfig) {
eleventyConfig.addPlugin(pageAssetsPlugin, {
mode: "parse",
postsMatching: "src/posts/*/*.md",
});
};
```
# How it works
This folder structure
```
📁 src/posts/
📁 some-title/
📄 index.md <-- when a template file is processed
🖼 cover.png assets relative to it are automatically
🖼 image.jpg copied to the permalink folder
📁 good-title/
📄 index.md
🖼 cover.png
📁 bar-title/
📄 index.md
📁 icons/
🖼 icon.png
📄 my-post.md
🖼 img.png
```
Will generate this output
```
📁 dist/
📁 perma-some-title/
📄 index.html
🖼 89509eae15a24c2276d54d4b7b28194a1391ee48.png
🖼 63d8ddb9ffadd92e3d9a95f0e49ae76e7201a672.jpg
📁 perma-good-title/
📄 index.html
🖼 d0017352f4da463a61a83a1bc8baf539a4c921c1.png
📁 perma-bar-title/
📄 index.md
🖼 faa22a543b2dcb21fdd9b7795095e364ef00d540.png
📁 perma-my-post/
📄 index.md
🖼 faa22a543b2dcb21fdd9b7795095e364ef00d540.png
```
----
## Directory mode
On directory mode the template is not parsed, assets on the same level as template are copied to the permalink folder, even if not used.
Note: Paths are not rewritten and folder structure is kept inside the perma folder.
This mode is cheaper as it does not parses the html or transforms it.
# Options
| Option | Required | Type | Default | Description |
|-----------------------|----------|---------|-----------------------|--------------------------------------------------------------------------------------------------------------------------------------------------|
| mode | false | string | parse | Parse mode will resolve assets referenced inside the template. Directory mode blindly copies files on the folder as the template. |
| postsMatching | false | string | "*.md" | Pattern (glob) filtering which templates to process |
| assetsMatching | false | string | "*.png\|*.jpg\|*.gif" | Specify a pattern (glob) that matches which assets are going to be resolved |
| recursive | false | boolean | false | Recursively scan assets under subdirectories (example src/posts/foo/bar/baz/img.jpg) (directory mode only) |
| hashAssets | false | boolean | true | Rewrite filenames to hashes. This will flatten the paths to always be next to the post .html file. (parse mode only) |
| hashingAlg | false | string | sha1 | Hashing algorithm sha1\|md5\|sha256\|sha512 https://nodejs.org/api/crypto.html#crypto_crypto_createhash_algorithm_optionsetc (parse mode only) |
| hashingDigest | false | string | hex | Digest of the hash hex\|base64 (parse mode only) |
| addIntegrityAttribute | false | boolean | false | Add a integrity attribute to the tag (parse mode only) |
| | | | | |
----
## TO-DO:
- [x] Parse the rendered html files looking for assets, and only used imported assets (similat to how what webpack loaders work)
- [x] Rewrite paths on the output files, possibly renaming files to md5 hashes, so images also have permalinks.
- [ ] Write tests