eleventy-plugin-pack11ty

[ Pack11ty ] eleventy-plugin-pack11ty

Pack11ty is an heavily opinionated Eleventy starter (aka "template project").

eleventy-plugin-pack11ty is an Eleventy plugin containing a set of filters, shortcodes, transforms and plugins for Eleventy, used in the Pack11ty starter, but also usable in any other Eleventy project.

Feel free to use it, enhance it, and share your ideas/comments with issues, or (even better) pull requests.

Installation

You can either use the Pack11ty starter, or install the plugin into your existing Eleventy project:

npm install --save-dev eleventy-plugin-pack11ty

Then, in your Eleventy configuration file (usually .eleventy.js or eleventy.config.js), load the plugin as follows:

import eleventyPluginPack11ty from 'eleventy-plugin-pack11ty';

export default async function (eleventyConfig) {
	eleventyConfig.addPlugin(eleventyPluginPack11ty);
};

Usage

Options

You can set some options for the plugin to activate and configure some transforms.

Change the previous code to this and replace the false values as you wish:

import eleventyPluginPack11ty from 'eleventy-plugin-pack11ty';

export default async function (eleventyConfig) {
	eleventyConfig.addPlugin(eleventyPluginPack11ty, {
		responsiver: false,
		minifyHtml: false,
	});
};

Option name	Description	Value
responsiver	Transform simple <img src="…"> images into responsive images with srcset/sizes attributes with eleventy-plugin-images-responsiver.	false (default) or an object with multiple keys. See details in the Tranforms section below.
minifyHtml	Minify the HTML after building pages. Recommended for a production build only.	false (default) or true

Filters

Arrays

Strings

HTML

Nunjucks shortcodes

Paired shortcode

Transforms

Responsive images

Minify HTML

Included plugins

Would you like to know more?

Read the full documentation on pack11ty.dev!