Skip to content

Latest commit

 

History

History
102 lines (76 loc) · 4.5 KB

README.md

File metadata and controls

102 lines (76 loc) · 4.5 KB

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:

  • Parse the rendered html files looking for assets, and only used imported assets (similat to how what webpack loaders work)
  • Rewrite paths on the output files, possibly renaming files to md5 hashes, so images also have permalinks.
  • Write tests