A couple of days ago Fedi.Tips, an account that shares Mastodon tips, asked about how non-technical users could make use of their Mastodon archive. Mastodon makes this fairly easy (see this guide for more information), and spurred by that, I actually started work on a simple(ish) client-side application to support that. (You can see it here: https://tootviewer.netlify.app) This post isn't about that, but rather, a look at how you can turn your archive into a web site using Eleventy. This is rather rough and ugly, but I figure it may help others. Here's what I built.
Start with a Fresh Eleventy Site
To begin, I just created a folder and npm installed Eleventy. I'm using the latest 2.0.1 build as I'm not quite ready to go to the 3.X alpha.
Store the Archive
I shared the guide above, but to start, you'll need to request and download your archive. This will be a zip file that contains various JSON files as well as your uploaded media.
My thinking is that I wanted to make it as easy as possible to use and update your Eleventy version of the archive, so with that in mind, I created a folder named _data/mastodon/archive. The parent folder, _data/mastodon, will include custom scripts, but inside archive, you can simply dump the output of the zip.
Expose the Data
Technically, as soon as I copied crap inside _data, it was available to Eleventy. That's awesome and one of the many reasons I love Eleventy. While the data from the archive is "workable", I figured it may make sense to do a bit of manipulation of the data to make things a bit more practical.
To be clear, everything that follows is my opinion and could probably be done better, but here's what I did.
First, I made a file named _data/mastodon/profile.js which serves the purpose of exposing your Mastodon profile info to your templates. Here's the entire script:
// I do nothing except rename actor
let data = require('./archive/actor.json');
module.exports = () => {
return data;
}
So, I started this file with the intent of removing stuff from the original JSON that I didn't think was useful and possibly renaming things here and there and... I just stopped. While there are a few things I think could be renamed, in general, it's ok as is. I kept this file with the idea that it provides a 'proxy' to the archived file and in the future, it could be improved.
For your toots, the Mastodon archive stores this in outbox.json file. I added _data/mastodon/toots.js:
let data = require('./archive/outbox.json');
module.exports = () => {
return data.orderedItems.filter(m => m.type === 'Create').reverse();
}
This is slightly more complex as it does two things - filtered to the Create type, which is your actual toots, and then sorts then newest first. (That made sense to me.) Again, there's probably an argument here for renaming/reformatting the data, but I kept it as is for now.
Rendering the Profile
With this in place, I could then use the data in a Liquid page like so:
<h2>Mastodon Profile</h2>
{{ mastodon.profile.name }} ({{ mastodon.profile.preferredUsername }})<br>
{{ mastodon.profile.summary }}
<h2>Properties</h2>
<p>
<b>Joined:</b> {{ mastodon.profile.published | dtFormat }}
</p>
{% for attachment in mastodon.profile.attachment %}
<p>
<b>{{ attachment.name }}: </b> {{ attachment.value }}
</p>
{% endfor %}
Right away you can see one small oddity which I could see being corrected in profile.js, your join date is recorded as a published property. I really struggled with renaming this but then got over it. Again, feel free to do this in your version! That dtFormat filter is a simple Intl wrapper in my .eleventy.js config file.
Ditto for attachment which are the 'extra' bits that get displayed in your Mastodon profile. You can see them here:
With no CSS in play, here's my profile rendering on my Eleventy site:
That's the profile, how about your toots?
Rendering the Toots
I just love the word "toot", how about you? I currently have nearly two thousand of them, so for this, I decided on pagination. My toots.liquid file began with:
---
pagination:
data: mastodon.toots
size: 50
alias: toots
---
That page size is a bit arbitrary and honestly, feels like a lot on one page, but it was a good starting point. My initial version focused on rendering the date and content of the toot:
<style>
div.toot {
border-style: solid;
border-width: thin;
padding: 10px;
margin-bottom: 10px;
}
</style>
<h2>Toots</h2>
{% for toot in toots %}
<div class="toot">
<p>
Published: {{ toot.published | dtFormat }}
</p>
<p>
{{ toot.object.content }}
</p>
<p>
<a href="{{ toot.object.url }}" target="_new">Link</a>
</p>
</div>
{% endfor %}
At the end of the page, I added pagination:
<hr>
<p>
Page:
{%- for pageEntry in pagination.pages %}
<a href="{{ pagination.hrefs[ forloop.index0 ] }}"{% if page.url == pagination.hrefs[ forloop.index0 ] %} aria-current="page"{% endif %}>{{ forloop.index }}</a></li>
{%- endfor %}
</p>
While not terribly pretty, here's how it looks:
Not shown is the list of pages, which at 50 a pop ended up at thirty-seven unique pages. I don't think anyone is going to paginate through that, but there ya go.
Supporting Images
One thing missing from the toot display was embedded attachments, specifically images. In the zip file, these attachments are stored in a folder named media_attachments with multiple levels of numerically named subdirectories. A toot may refer to it in JSON like so:
"attachment": [
{
"type": "Document",
"mediaType": "image/png",
"url": "/media_attachments/files/112/689/247/193/996/228/original/38d560658c00a4e8.png",
"name": "A picture of kittens dressed as lawyers. ",
"blurhash": "ULFY0?s,D%~W~p%Js+^+xpt6tR%LRQaeoes.",
"focalPoint": [
0.0,
0.0
],
"width": 2000,
"height": 2000
}
],
Not every attachment is an image, but I turned to Eleventy's Image plugin for help. It handles everything possible when it comes to working with images. Using a modified version of the example in the docs, I built a new shortcode named mastodon_attachment to support this:
eleventyConfig.addShortcode('mastodon_attachment', async function (src, alt, sizes) {
/*
todo, support other formats
*/
let IMG_FORMATS = ['jpg','gif','png','jpeg'];
let format = src.split('.').pop();
if(IMG_FORMATS.includes(format)) {
// check for valid image
let mSrc = './_data/mastodon/archive' + src;
let metadata = await Image(mSrc, {
widths: [500],
formats: ['jpeg'],
});
let imageAttributes = {
alt,
sizes,
loading: 'lazy',
decoding: 'async',
};
// You bet we throw an error on a missing alt (alt="" works okay)
return Image.generateHTML(metadata, imageAttributes);
}
// do nothing
console.log('mastodon_attachment sc - unsupported ext', format);
return '';
});
Breaking it down, it looks at the src attribute and if it's an image, uses the Image plugin to create a resized version as well as return an HTML string I can drop right into my template. I went back to my toots.liquid template and added support like so:
{% if toot.object.attachment %}
{% for attachment in toot.object.attachment %}
{% mastodon_attachment attachment.url, attachment.name %}
{% endfor %}
{% endif %}
The name value of the attachment ends up being the alt for the image, and currently, I just ignore non-images, but you could certainly do something else, like link to it perhaps for downloading at least. Here's an example of it in use:
Show Me the Code!
Ok, this was all done in about an hour or so, and as I think I said, it's ugly as sin, but in theory, if you make it prettier then you're good to go. You can deploy, wait a few months and get a new archive, unzip, and deploy again. Feel free to take this code and run - you can't make it any uglier. ;)
https://github.com/cfjedimaster/eleventy-demos/tree/master/masto_archive