0.0.32 • Published 1 year ago
dwkns-eleventy-plugins v0.0.32
dwkns-11ty-plugins
Set of plugins for 11ty. Probably not a lot of use for most people.
Installing
yarn add dwkns-eleventy-plugins
htmlMinifer
Transform plugin which minifies HTML including inline CSS & JS on all HTML pages. If no options are passed in the following defaults are used.
Usage
// .eleventy.js
const { htmlMinifer } = require("dwkns-11ty-plugins");
module.exports = (eleventyConfig) => {
// default options shown
options = {
minify: true,
minifyCSS: true,
minifyJS: true,
}
eleventyConfig.addPlugin(htmlMinifer, options);
}
To pick up site settings
options = {
minify: site[site.currentEnv].minify_html,
};
Console
Nunjucks shortcode that Pretty Prints out variables to HTML <pre></pre>
and to the console. Up to 8 levels of object are printed.
Add to config. Usually .eleventy.js
const { logToConsole } = require("dwkns-11ty-plugins");
module.exports = (eleventyConfig) => {
// default options shown
options = {
logToHtml: true,
logToConsole: false,
colorizeConsole: true,
escapeHTML: true,
}
eleventyConfig.addPlugin(logToConsole);
}
Usage
{{ console <value>, <title — optional> }}
prependAnOrA
Nunjucks filter that prepends an A
or An
depending on the word supplied.
Add to config. Usually .eleventy.js
const { prependAnOrA } = require("dwkns-11ty-plugins");
module.exports = (eleventyConfig) => {
...
eleventyConfig.addPlugin(prependAnOrA);
...
}
Usage
{{ "book" | addAnOrA }}
>> A book
{{ "orange" | addAnOrA }}
>> An orange
Readable Date
Nunjucks filter that Creates Readable Dates
Add to config. Usually .eleventy.js
const { readableDate } = require("dwkns-11ty-plugins");
module.exports = (eleventyConfig) => {
...
eleventyConfig.addPlugin(readableDate, {
format: ''dd LLL yyyy' // default
});
...
}
Usage
---
date: 2021-10-18
---
{{date | readableDate }}
>> 18 Oct 2021
Inline SVG
Nunjucks async shortcode that inlines SVG's
Automatically removes height and width attributes.
Add to config. Usually .eleventy.js
const { inlineSVG } = require("dwkns-11ty-plugins");
module.exports = (eleventyConfig) => {
...
eleventyConfig.addPlugin(inlineSVG);
...
}
Usage
{% inlineSVG [filename], {options} %}
{% inlineSVG './src/images/logo.svg', { class: "w-auto h-16", alt: "Under2 logo", id: "under2Logo" } %}
Options
Options | Use | Default |
---|---|---|
class | Add class="" to the SVG | |
alt | Add an Title to SVG | |
id | Add an id="" to SVG |
Publish with:
npm publish --access public Needs a OTP from the Authy app