d332e34874
All checks were successful
Build and copy to prod / build-and-copy (push) Successful in 1m24s
62 lines
3.5 KiB
Markdown
62 lines
3.5 KiB
Markdown
---
|
|
title: "Microblogging with Eleventy"
|
|
date: 2022-12-30T21:24:54
|
|
slug: microblogging-with-eleventy
|
|
tags:
|
|
- 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](https://lewisdale.dev/micro/feed.xml) for my microblog posts - this will also be important later when I want to publish to other platforms.
|
|
|
|
## Syndicating
|
|
|
|
I've already added [Webmentions](https://indieweb.org/Webmention) 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](https://webmention.io), which provides me a webhook I can call. Then, I use [IFTTT](https://ifttt.com) to trigger the webhook when it detects a new RSS feed item.
|
|
|
|
The final step is to use [Bridgy](https://brid.gy) 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](https://indieweb.org/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.
|
|
|
|
{% raw %}
|
|
```twig
|
|
<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>
|
|
```
|
|
{% endraw %}
|
|
|
|
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:
|
|
|
|
{% raw %}
|
|
```twig
|
|
<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>
|
|
```
|
|
{% endraw %}
|
|
|
|
## 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.
|
|
|