eleventy-plugin-page-assets

Copy local page assets to permalink folder

Instalation

Available on npm

npm install eleventy-plugin-page-assets --save-dev

Open up your Eleventy config file (probably .eleventy.js) and use addPlugin:

FILENAME .eleventy.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