Fetching Webmentions With Netlify and Eleventy Edge

Sadly, I'm not too good at documenting what I'm sometimes building in the little free time that I have. At the end of last year, I implemented an interesting feature on this site, but never wrote about it.

As you might have seen, this site supports Webmentions. They are displayed under each article, and I'm collecting them using a service called webmention.io. For the longest time, I was doing this at build time, which means that I had to trigger a build at Netlify to update the Webmentions on my site. While it isn't too hard to automate that task, it wasn't quite a fulfilling experience for me. So I was quite interested in trying out the Edge-Plugin for Netlify, which "is an exciting new way to add dynamic content to your Eleventy templates".

The Implementation

It actually didn't take too much time to add that dynamic content in an exciting new way to my templates, since I already had all the necessary code. I just had to put it in some other places after I'd installed the plugin, as described in its documentation. Then I wrapped the existing code in my template in a special edge tag that the plugin provides.

The second step was putting the existing code that fetches the webmentions into a Netlify Edge Function. It now looks like this:

import {
    EleventyEdge,
    precompiledAppData
} from "./_generated/eleventy-edge-app.js";

export default async (request, context) => {
    try {
        let edge = new EleventyEdge("edge", {
            request,
            context,
            precompiled: precompiledAppData,

            // default is [], add more keys to opt-in e.g. ["appearance", "username"]
            cookies: []
        });

        let slug = edge.url.pathname;

        const webmentionsResponse = await fetch(
            `https://webmention.io/api/mentions.jf2?domain=martinschneider.me&per-page=200&sort-dir=up&target=https://martinschneider.me${slug}`
        );
        const webmentions = await webmentionsResponse.json();

        edge.config((eleventyConfig) => {
            eleventyConfig.addGlobalData("webmentions", webmentions);
        });

        return await edge.handleResponse();
    } catch (e) {
        console.log("ERROR", { e });
        return context.next(e);
    }
};

The last step that I remember was telling Netlify when to call that function. You'll tell them in your "netlify.toml".

[[edge_functions]]
function = "eleventy-edge"
path = "/articles/*"

I'm pretty sure there was some back and forth until everything was working as expected. But that was pretty much it.

The Pros

Well, that was fun to build, and now there are always the latest Webmentions shown when you open a page on this site.

The Cons

First, there's that thing with the avatars: They are loaded in their full glory from webmention.io, and I've never found time and the right mood to make them smaller on the fly.

I haven't measured it, but I think the dynamic pages are now a little bit less "snappy" than the others. They're still fast, but the feeling is different. And what really bothers me is that I've chosen Eleventy over Sapper explicitly because it's a static site generator and I did not want to be dynamic in any way. I wanted to be static. So that implementation feels like a step back, especially with the knowledge that I'm bound to a certain hosting provider with that solution.

Back to the Roots

I'm working on a new version of this site. It'll be Eleventy again. But it will be really static. Maybe I'll have to post more often, so there are more rebuilds of the site.