Microblogging with Eleventy

Given the drive to move all of my content into one place and syndicate it to other networks, I decided that I’d also try out doing microblog-style posts with Eleventy. Before I could do that, I needed to add a CMS (there’s no way I’m manually adding Markdown files everytime I want to post a status).

Once that was done, I added a new collection for Microblog posts, which are just text fields with a posting datetime - no title, or any of the other frontmatter data that I’d normally add to a full blog post.

I also modified Netlify CMS to enable a max length on textarea fields - Mastodon Toots are 500 characters, so that’s where I drew the line.

Finally, I created a new RSS feed for my microblog posts - this will also be important later when I want to publish to other platforms.

Syndicating

I’ve already added Webmentions to my website, which allow me to send and receive certain types of interactions from other websites. These map pretty nicely to certain social media interactions, like replies, reblogs, and likes.

To start with, I need to be able to send out Webmentions when they’re included. To do this, I use Webmention.io, which provides me a webhook I can call. Then, I use IFTTT to trigger the webhook when it detects a new RSS feed item.

The final step is to use Bridgy to handle cross-posting. This is done by including the webmention syndication URL in the post body as an invisible anchor. For cross-posting to work, I need to markup my post using Microformats

For blog posts, this means adding h-entry with e-content and p-name tags. Bridgy will detect these, determine that it’s an article, and cross-post just the article title and a link.

<article class="h-entry">
  <h1 class="p-name">{{ title }}</h1>
  <div class="e-content">
    {{ content | safe }}
  </div>
  <div class="syndication">
    <a href="https://brid.gy/publish/mastodon"></a>
  </div>
</article>

For microblog posts, this is slightly different. Bridgy assumes that a post is an article if it contains a p-name tag, so I omit that. In it’s place I include the timestamp, which is slightly more important for these:

<article class="h-entry">
	<time class="dt-published">{{ date | microDate }}</time> 
    <div class="flow e-content">
        {{ content | safe }}
    </div>
    <div class="syndication">
      <a href="https://brid.gy/publish/mastodon"></a>
    </div>
</article>

Next steps

This works reasonably well - there’s a fairly large delay between publishing on my site and syndicating across to different platforms. That’s mostly because there are several different intermediaries that have to be triggered in turn (IFTTT -> Webhooks -> Webmention -> Brid.gy -> Mastodon). In fairly short order I’d like to replace at least some of this with my own code. I already use post-deploy Netlify functions to send ActivityPub messages, so I may as well use it for other syndication too.

I also want to improve some of the markup on my microblog posts, and add a proper feed to my home page. But that’ll also come with a bit of a site redesign, because I’m getting bored of this one.