Original opening 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.
Added note, 2020-09-16: The site no longer uses webmentions.
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.1 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
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
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
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.3
For now, I don’t bother with displaying results of
bookmark-ofwebmentions, although that capability should be easy enough to add later, if I change my mind. ↩︎
And that’s just a playful little double entendre. If you saw through it: sorry, I couldn’t resist. ↩︎