Luke Bonaccorsi
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 npm and the load it using .addPlugin, like this:

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

module.exports = function (eleventyConfig) {
eleventyConfig.addPlugin(Webmentions, {
domain: "lukeb.co.uk",
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 GitHub.

18 Responses

Powered by Webmentions via Webmention.io and Bridgy

15 Likes

3 Comments

  1. illtron
    illtron

    Thanks for making this. I've got my personal webmentions working well, but it feels rickety, so I may switch to the plugin. This will help a lot of people, particularly because so much Indieweb-type stuff feels like it's from a different era of the internet.

    View original post

  2. No worries, hopefully it works for you!

    View original post

  3. David Mead
    David Mead

    This is great news. Now I just have to work out: How to update my version of Eleventy How to install the plugin

    View original post