Porting to Gatsby

Last month, Tumblr announced that they'd no longer be allowing "Adult Content" on their platform. I found this distressing, not because I depend on Tumblr for pornography, but because it was clear that a hamfisted approach to automating the deletion of adult content would not go good.

I downloaded my blog content using a script I found, and started looking around for the best thing to port my blog to. I definitely wanted something that would let me write markdown and export static content. Blosxom looked promising, but it seemed pretty old, and I have no interest in learning Perl at this time.

Gatsby stood out as a serious contender. All the cool kids use React and Graphql these days, and it would let me both learn the new shape of web development, and leverage my JavaScript and Node.js skills.

My initial impressions so far:

The importer was fun to write, and pretty straightforward.

The media plugin goober thingie was originally only going to be used for photosets, but I ended up using it for all media types, so it's increasingly misnamed. I plan to publish it as a standalone plugin, though I'm not sure how many people would make use of it. I did actually try to make photosets work with flex-box and display:table, but in practice, nothing is as stable or reliable as actual <table> elements. I always got weird extra whitespace when turning divs into display:table elements.

I made them reactive by just making all the elements display:block. It's much more reliable to turn a td into a div than the other way around, apparently.

The template and CSS I built from scratch using my existing tumblr blog as a visual design. I went down a weird rabbit hole for a while because I didn't realize you were supposed to just import './foo.css' in a component in order to pull in the CSS. I was using Helmet to stuff a <style> tag in the header, and always getting a flash of unstyled content.

Overall, I'm happy with the result, and really glad that things like Gatsby exist :)