Webmentions in three SSGs: Part 2

General note: This site’s appearance, configuration, hosting, and other basic considerations will change over time. As a result, certain content on this page could be at variance with what you’re currently seeing on the site, but the two were consistent when this post originally appeared.

Note: This is Part 2 of a five-part series about how you can set up webmentions in websites built by three different static site generators (SSGs): Eleventy (the subject of this part), Hugo (the subject of Part 3), and Gatsby (covered in detail in Part 4). In the conclusion, you’ll find a bibliography of the best articles I found on the subject of this series. All of the articles link (even if only through tiny GitHub logos) to their authors’ code. They were invaluable to this effort, and I encourage you to take particular notice of them and their authors.

Added note, 2020-07-26: I have now archived the various configuration files linked within this series within a GitHub repo of their own and changed the links accordingly, so as to make them immune to ongoing changes in the repos originally linked from this series.

Having covered the purpose of this series, the IndieWeb, and the general setup of webmentions in this series’ introduction, we’ll now get into details about implementing them in the Eleventy SSG.

For two reasons, we start with the Eleventy repo. First, it’s the repo that powered this site as of the time I wrote this.¹ Second, it’s where I initially added webmentions in their barest form — only so-called “mentions” — and then, more recently, enhanced their appearances. I refer to it here only as the Eleventy repo rather than, as usual, the Eleventy/webpack repo, because the addition of webpack really had nothing whatsoever to do with this particular process.

Eleventy: Fetching webmentions

Two things made this much easier with Eleventy than it would prove to be on the other two repos: Eleventy’s amazing flexibility; and a pair of superb articles by Max Böck and Sia Karamalegos.

In the Eleventy repo, /_data/webmentions.js “phones home” to webmention.io and collects the resulting JSON data into /_cache/webmentions.json]. From there, /.eleventy.js (the main Eleventy configuration file) and /src/assets/utils/filters.js massage the data for presentation. For example, each webmention is put in chronological order and arranged according to its respective type (in webmention-ese, its wm-property): like-of, in-reply-to, bookmark-of, mention-of, or repost-of.²

Eleventy: Displaying webmentions

At that point, a shortcode in /src/_includes/webmentionlist.js makes the massaged data presentable. Other pages and templates can then use this shortcode to access the result. Right now, the only one that uses it is /src/_includes/layouts/posts/singlepost.11ty.js, the template for each individual post (like the one you’re reading now) as well as the “About” page. If I wanted, I could add it for the home page, too, of course; just haven’t yet decided to do that.

In addition, I also edited /src/_includes/layouts/partials/footer.js so that it would have the necessary microformats information for the entire site, as well as page-specific microformats stuff except on any page within the paginated posts list.

And, yeah, that pretty much was it where the Eleventy repo and webmentions were concerned — other than, it should be noted, massaging the CSS to handle the actual look-and-feel of the webmentions display on each relevant page. That was especially necessary because of the newly added “counter” and “drop-down” functionality (the latter through use of the HTML details tag).

Saying goodbye to Easy Street

After Eleventy, things got a bit (?) more challenging, to put it mildly.

See you in Part 3, where I explain the webmention-izing of my Hugo repo (and then Part 4, where I cover the angst-y process of doing the same for my Gatsby repo). Don’t be late; last one there is a rotten SSG.³