Webmentions Without Plugins

I recently wrote about bringing in webmentions from both other people's personal sites and from Fediverse/Bluesky interactions and displaying them on my posts. The only issue was that I relied on a plugin that hadn't been updated in a bit over 2 years, plus I like DIY-ing things. At yesterday's Pacific Homebrew Website Club meeting, I got some great feedback and was able to figure out making my own code!

To fix the issues I mentioned in the previous post, all I had to do was change from CommonJS to ES Module syntax. This meant changing the first line that imports the ”eleventy-fetch” package and the “export” line (see previous post for the original code), and changing the Eleventy data file from ”webmentions.js” to ”webmentions.mjs.” I still don't know why this worked—other attendees use CommonJS syntax and it works fine!—although one reason brought up was that it may relate to the version of Eleventy, with newer ones possibly needing ES Modules. At any rate, I'm glad to have it working!

_data/webmentions.mjs:

// Fetch webmentions from webmention.io API
import EleventyFetch from "@11ty/eleventy-fetch";

export default async function () {
  const url = `https://webmention.io/api/mentions.jf2?token=${process.env.WEBMENTION_IO_TOKEN}&per-page=1000`;
  try {
    const webmentions = await EleventyFetch(url, {
      duration: "1h",
      type: "json",
    });
    return {
      mentions: webmentions.children,
    };
  } catch (e) {
    console.log(e);
    return {
      mentions: [ "none" ]
    };
  }
};