@henrycatalinismith/11tyhype v3.0.0
11tyhype is a rehype plugin for Eleventy. It hooks up rehype as an HTML transform so you can add rehype plugins to your Eleventy site with less boilerplate.
Installation
yarn add -D @henrycatalinismith/11tyhype rehype
Usage
This example uses rehype-accessible-emojis
to
improve emoji accessibility and
rehype-minify-whitespace
to strip out all the
whitespace from the HTML of an Eleventy site.
const { rehypePlugin } = require("@henrycatalinismith/11tyhype")
const accessibleEmojis = require("rehype-accessible-emojis")
const minifyWhitespace = require("rehype-minify-whitespace")
module.exports = function(eleventyConfig) {
eleventyConfig.addPlugin(rehypePlugin, {
plugins: [
[accessibleEmojis],
[minifyWhitespace],
]
})
}
Options
plugins
The plugins
array is a list of rehype plugins to use.
Each element of the array is an array of parameters that will be passed to
rehype's use()
function.
- The first array element should be the plugin function. In the example above
that's
minifyWhitespace
. - The second array element is optional. It's for passing options to plugins.
Here's an example with some options.
It's using rehype-urls
, and the second parameter tells the
plugin to prefix every URL it finds with https://example.org/
.
const { rehypePlugin } = require("@henrycatalinismith/11tyhype")
const urls = require("rehype-urls")
module.exports = function(eleventyConfig) {
eleventyConfig.addPlugin(rehypePlugin, {
plugins: [
[urls, url => {
return `https://example.org/${url.href}`
}],
]
})
}
id
If you have a lot of transforms in your Eleventy build then naming them can be
helpful for debugging build problems. So you can optionally pass an id
string to
11tyhype and it'll use this value as the name for the transform.
verbose
Pass verbose: true
to the plugin and it'll output a whole bunch of
information about what it's doing. This is mostly useful for debugging. Please
enable this this option if you're reporting a bug in 11tyhype.
Error Codes
11tyhype will try to help you set it up properly. If you make a mistake, it'll try to help you understand. For some mistakes that it can recognize, it'll print a link in the build output pointing at one of these error codes to help you troubleshoot.
no-plugins
This error code is generated when you add the plugin to Eleventy without giving it any rehype plugins to apply.
Double check your code against the example at the top of this readme. The
second argument you pass to eleventyConfig.addPlugin
should be an object with
a property called plugins
.
invalid-plugin
This error code is generated when you add the plugin to Eleventy with a mistake
in the list of plugins
. The error message will tell you which plugin in your
list has the mistake: e.g. if it says plugin #1 is invalid
then the very first
plugin in your list is the one that's wrong.
Read the instructions for the plugins
option and check that the
plugin specified by the error message has a rehype plugin function as its first
array element.