Embedding a Mastodon Toot via Eleventy

I spent a bit of time this morning – ok, honestly, a bit of last night, too – looking into ways to embed a toot from Mastodon into a blog post or webpage.

I use Mastodon to share occasional running thoughts on stuff I’m reading and working on… for instance, in this thread I have going about Carl Becker.

I’d like to be able to collect these, eventually, on an index page on my site, probably as an Eleventy collection. But I figure part of that is also figuring out how to display them on individual pages.

The trouble is this: I am new to Eleventy and I’m using a theme^[1], which has its own project structure and is using nunjucks (which is also pretty new to me). So understanding exactly what is happening in generating the site, and how this particular theme-project has things structured, means I need to do a lot of learning to accomplish very little.

Patrick Curry has a nice collection of templates that should be useful, but I had a hard time conceptualizing where to put one of those in the context of Eleventy.

After reviewing a few other options, I settled on a shortcode solution from Bruce Wray, written for Eleventy. My project has a shortcodes folder in its _11ty directory, and it looked like my project’s main config file neatly iterated over that directory’s contents to export shortcodes. Great! So I added Wray’s stoot.js file and made a test post:

I want to try embedding a toot.

{% stoot "techhub.social", "113849759327049566" %}

Let's see what happens.

Errors are what happened. Unknown block tag and template rendering errors, mainly, which made me think that my reference to the shortcode wasn’t being recognized in my markdown file. I shifted things around, did a lot of poking and tweaking, and couldn’t figure out why the shortcode stoot.js file wasn’t being picked up.

I even wondered if I could reference shortcodes directly in markdown in this way, and tried using Eleventy’s Render plug-in to see if that might help.

No dice. But I tried adding the file’s code straight into the config file, with necessary adjustments, and that worked. That assured me that the disconnect was between the config file and the shortcode file itself, and helped me troubleshoot the rest.

In the end, the problem was pretty simple, if a bit hard to generalize. This theme uses a helper, moduleName, to help generate the name of shortcode. It also has all of its shortcode functions wrapped and exported in a similar, particular way.

In other words, the lesson of the day for me was: pay close attention not just to the directory structure and what is pulling what from what, but also to the formatting of the files themselves. Every piece goes together, and if I can mimic the formatting of some of the backend files, I’ll find success earlier and probably understand what’s happening a bit more clearly.

I also need to spend more time with eleventy outside the context of this theme-project, to better understand how it functions.

Anyhow, this means that I can now embed a toot. Well, almost — I think there’s an issue with pulling/storing/referencing the image, so it’s not fully building right now. The toot is also terribly styled… but I can see it in a non-production version, and I’ll take that as a win. Here it is, as an image, for posterity. I’ll work on styling next.

Perhaps if I have a few more wins, I’ll write up a few more formal notes about tweaking the Bliss theme.