􀀂􀀟􀀍􀀄 􀀂􀀛􀀌􀀅 Archiving Tweets to HTML

I’m now archiving tweets to HTML on this site.


To accomplish this, I wrote a project called twarchive, with source code available at fontawesome/brands/github mrled/twarchive.

It has two components: a Python program to download tweet data to JSON files, and a Hugo theme module that renders them for the site.

You can see one example of it in action above, and there are lots of other embedded tweets on this site. You might also be interested in https://tweets.micahrl.com, which contains all my tweets.

Failed experiment: Saving tweets as SVG images

At first, I wanted to save tweets as SVG images. Terence Eden had an idea to turn tweets into SVGs, which was the original inspiration for this project. His solution templates HTML inside a <foreignObject> element in an SVG.

With an SVG, you can save a full copy of every image in the tweet as a data: URI, and you get a single downloadable “image” file that contains everything. I think this is a really cool result – if you want to save a tweet for later, you can do that in a single file.

I implemented this, but ran into a frustrating problem. An SVG actually has no idea what its dimensions are; the SVG creator must hard-code either width and height, or viewBox. Because of this, I abandoned SVG generation in favor of HTML generation (see below).

If you like, you can see my failed SVG tweet experiments. I later found https://tweet.cluster.fun/ (with code available at fontawesome/brands/github AverageMarcus/tweetsvg), which solves the problems I ran into. I may revisit SVG generation to see if I can do this in Python, or perhaps even JavaScript.

Saving tweets as self-contained HTML pages

But, as I said, I abandoned SVG tweets in favor of HTML ones. This was inspired by another post from Terence Eden, from which I learned that HTML documents can include a downloadable link to themselves. If I generate a self-contained HTML file for each tweet, I can include it as an iframe inside any page that wants to embed it, and use the download= attribute to allow users to get a copy.

This preserves the cool property of SVGs where the whole tweet, including all styles and any media, can be downloaded as a single file.

Agency over data is really important to me, and I like the idea that any user of this site can save a tweet for later with a single click.

A screenshot showing how to download the HTML of a tweet


Comments are hosted on this site and powered by Remark42 (thanks!).

Webmentions are hosted on remote sites and syndicated via Webmention.io (thanks!).