Webmentions and 11ty

I have been struggling getting webmentions working on the site. It’s worth noting that I don’t have many yet, but I like to think I’m preparing for the future.

I found Bob Monsour’s blog post on the topic the most helpful. While your mileage may vary, I found a couple of changes helped with my flow. It’s worth noting, my JS skills are not the strongest, so troubleshooting some of the issues was perhaps more difficult for me than they may be for you.

First, my _data/webmentions.js looks like this:

const EleventyFetch = require("@11ty/eleventy-fetch");
require('dotenv').config()
module.exports = async function () {
  const WEBMENTIONS_STUFF = process.env.WEBMENTION_IO_TOKEN;
  const url = `https://webmention.io/api/mentions.jf2?token=${WEBMENTIONS_STUFF}&per-page=900`;
  const res = EleventyFetch(url, {
    duration: "1h",
    type: "json",
  });
  const webmentions = await res;
  return {
    mentions: webmentions.children,
  };
};

This adds the require('dotenv').config() to it. If you already trigger that elsewhere, disregard this adjustment.

Additionally, don’t forget to add these to your eleventy.js (or eleventy.config.js) file.

eleventyConfig.addFilter("webmentionsByUrl", webmentionsByUrl);
eleventyConfig.addFilter("plainDate", plainDate);

Also, make sure in the same file that your imports include webmentionsByUrl and plainDate:

const {
  toISOString,
  formatDate,
  toAbsoluteUrl,
  stripHtml,
  minifyCss,
  minifyJs,
  splitlines,
  webmentionsByUrl,
  plainDate
} = require('./config/filters/index.js');

AND that your filters/index.js file includes the same exports:

module.exports = {
  toISOString,
  formatDate,
  toAbsoluteUrl,
  stripHtml,
  minifyCss,
  minifyJs,
  splitlines,
  webmentionsByUrl,
  plainDate
  };

With those, I was able to get webmentions working. You’ll see a couple of my own tests on this post. It was a frustrating road to get to this point but worth it.

Likes (4)



Reposts (1)


photo of the author of one of the webmentions for this page

Comments (2)


photo of the author of one of the webmentions for this page

@jasonmoser So, I've made some progress thanks to the information you shared. I can retrieve the Webmentions and I can identify which posts have mentions vs those that don't. What's left for me is to figure out how to traverse the JSON to pull the details correctly.

February 12, 2024

photo of the author of one of the webmentions for this page

@jasonmoser I’ve not solved this yet but I will try again tonight.

February 11, 2024

Other Posts