Embedding a Mastodon Toot via Eleventy - pt 2

Earlier I shared that I was struggling with, but that I had mostly conquered, an effort to embed a Mastodon toot into an Eleventy post or page. I quickly realized that I had a few more challenges and, although some are specific to my Eleventy theme, I figure it’s probably useful to document some of it here. I am now successfully embedding toots on a Netlify-deployed Eleventy site. Here’s what I did should have done from the start, reflecting what I ultimately did but it in condensed form:

1. Grab the stoot.js file from Bryce Wray. Save it to the _11ty/shortcodes/ directory.

2. Install anything missing of the following packages: eleventy-fetch, luxon, and md5.

3. Edit stoot.js:

   • Edit the requirements at the top to include the moduleName helper, as follows:

     const moduleName = require('../helpers/moduleName');
     const EleventyFetch = require('@11ty/eleventy-fetch');
     const md5 = require('md5');
     const { DateTime } = require('luxon');
     

   • Alter the main function slightly, wrapping it in a const body declaration. The start of the new function should look like this:

     const body = async (instance, id) => {
     
       let stringToRet = '';
       let tootLink,       
     [...]
     

   • Add the module.exports section separately at the end. See the longer code block at the end of this page for all relevant changes.

     module.exports = {
     name: moduleName(__filename),
     body,
     };
     

   • And finally, I had some trouble with the following HTML, which is meant to retrieve the image of a toot’s card section. But in my case, I had a toot that did have a card, but did not have an image. That was ‘null’, but it threw off my build process… so I removed the following, and plan to go in and work in an exception here later:

     <img src="${Json.card.image}" 
          alt="Card image from ${instance} toot ${id}" 
          loading="lazy" class="tweet-card-img" />
     

     Note that this error did not show up until I actually attempted a build.

4. To run a quick test, create a new post and add the relevant shortcode and serve via npm start:

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

5. I had quite a few linting errors that I needed to correct. Most could be fixed with --fix, but a few were no-unused-vars. I was not in a place to be refactoring js/node this morning, so I disabled that rule by adding the following to the rules of my eslint.config.mjs file:

   no-unused-vars: 'off',
   

6. Add .cache to .gitignore per the Eleventy Fetch docs, which makes sense.

7. Lastly, if using Netlify, install npm-plugin-cache per the Eleventy deployment docs. After I did this, I saw a new message in the deployment notes in Netlify:

I think those are all the steps, but I likely missed something. As you can see below, I still haven’t gotten to mess with style at all, since that took more time than planned… but I posted about some of my confusion here:^[1]

Trevor Burrows @NearerAndFarther@techhub.social

I understand now (I think). I installed the `netlify-plugin-cache` and now am seeing this on the Netlify end of things, which seems promising!

8:18 PM • Jan 25, 2025