BryceWray.com

Communications concept - vintage pay telephones on a wall

Webmentions in three SSGs: Part 2

IndieWebbin’ in Eleventy

published:  April 28, 2020 utc
 

Image: Pavan Trikutam; Unsplash

Note: This is Part 2 of a five-part series about how you can set up webmentions in Web sites 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.

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 my Eleventy repo. First, it’s the repo that powers this site. 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 two 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/js/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.[1]

Eleventy: Displaying webmentions

At that point, a shortcode in /src/_includes/webmentionslist.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 /src/assets/css/webmentions.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.[2]


  1. For now, I don’t bother with displaying results of bookmark-of webmentions, although that capability should be easy enough to add later, if I change my mind. ↩︎

  2. And that’s just a playful little double entendre. If you saw through it: sorry, I couldn’t resist. ↩︎

Webmentions

(No webmentions yet.)

Other posts

Next: Webmentions in three SSGs: Part 3

Previous: Webmentions in three SSGs: Part 1