Luke Morrigan
Press Start

No Comment 2: The Webmentioning

When version 1.0.0 of Eleventy was released, one of the features that I was excited to see was the ability to add global data through configuration. This means that plugins can now add global data, and I saw it as a great opportunity to move my webmentions code into a plugin for others to use!

When I started to look into how to create a plugin, I quickly realised that in the Eleventy world, a plugin is just an extra .eleventy.js file that gets loaded 🤯. What an amazingly simple way to create plugins!

Because it's just an extra .eleventy.js, you have access to everything you can do in an Eleventy config file. In my case, I needed .addFilter to add the webmentionsForPage and webmentionCountForPage filters, and .addGlobalData to add the webmentions to the global data.

You can install it from npmAvatar for and the load it using .addPlugin, like this:

const Webmentions = require("eleventy-plugin-webmentions");

module.exports = function (eleventyConfig) {
eleventyConfig.addPlugin(Webmentions, {
domain: "",
token: "ABC123XYZ987",

This adds a webmentions global data object, and then in your templates, you can use the webmentionsForPage and webmentionCountForPage to filter webmentions.

Full documentation, including a load of configurable options is in the readme on GitHubAvatar for