Over the last year or so, I’ve slowly been developing a system for live-blogging, mostly for sports, which has worked pretty well for me. It uses a combination of Drafts and Siri Shortcuts, and the blogging service Blot through Dropbox, with a little bit of JavaScript and maybe CSS (I don’t really know what I’m talking about. If that’s not evident yet, it probably will be shortly.)
Two of the features I’m pretty happy with when it comes to the live-blogs on my site are the auto-refresh and the update ordering. For someone with a technical background, this might be easy-peasy, but since I don’t know much about the technical side of my site, it took some research and some help from David, who runs Blot.
The auto-refresh feature is pretty simple. If the live-blog, is well… live, the page will automatically refresh every thirty seconds (timing can be adjusted easily to meet your needs). The ordering is also important here. When the live-blog is live, it will be ordered with the most recent update at the top, and the oldest at the bottom. This allows the reader to keep the page up and glance over to see if there have been any updates without having to scroll all the way to the bottom. Once the live-blog is over, the post ordering flips so that someone coming to it after the fact can read it in order from top to bottom.
Before we get into the nitty gritty, the basic requirements to be able to use this workflow are Drafts, or an app that allows you to quickly append to a Dropbox file, and Blot, or a blogging service that can connect to a service, which allows quick appends, a la Drafts and Dropbox.
Okay, so let’s get into it. I’ll get into some of the Blot configuration later, but it isn’t essential to getting started, so for now we will focus on the workflow with Drafts actions to append to a liveblog.
The first step is deciding there’s something you want to liveblog (easy enough, right?) If that’s the case, open up drafts, type out your H1 and any introduction you might want to include and then fire off this Drafts action.
This first Drafts action will prompt you for the permalink, and any additional tags you want to add. It will automatically add “🕸” since that’s become my standard tag for live-blogging. Then it creates a new file in your Posts folder (you’ll want to update the path to your own Dropbox setup) titled liveblog.txt. The header will include the date, the permalink (always preceded by the year and month as yyyy/mm/[permalink]), a metadata tag for “Live” and the desired site tags from the earlier prompt.
Hopefully that’s not too complicated or incomprehensible1.
The next step is easy. Whenever you have something you want to add, type away in Drafts, and then fire off this action (don’t forget to change the Dropbox path here as well). All this does is append to liveblog.txt with what you wrote, timestamped. Continue to do this to your hearts content.
Step number three is optional. When live-blogging a Bulls game, I like to include quarter breaks. Basically putting some line breaks, the period, and the score. So I’ll type something like this:
Q1
Bulls 15-45 Warriors
And then fire off this action. This is just another append, but it bolds both lines, includes some centering HTML, and line breaks.
Then you can go back to blogging about the second half. And maybe include another score line break at the end of the game.
Now it’s time to wrap things up.
I have a Drafts action that takes the text you write in Drafts, calls this Siri Shortcut, and then changes the file name for you to whatever you wrote in Drafts. But really, all you need to do at this point is easy. Change the file name so that it’s no longer liveblog.txt, if you don’t, you’ll end up with some issues the next time you try to do a liveblog.
Secondly, if you follow some of the Blot configuration below, you’ll want to remove the “live” metadata tag from the header of your text file. This metadata tag is what will eventually drive the auto-refresh, and the reverse ordering of posts. Once removed, the ordering goes back to normal and the auto-refresh gets turned off.
So if you are interested in those, look no further.
The first thing we have to do is create a class in our css file to reverse the display order of our entries.
.live {display:flex;flex-direction:column-reverse
}Then we need to make sure the reverse ordering and the refresh take place on the entry page. First, we will declare our metadata tag “live” and wrap our “live” container class around the body. This provides the reverse ordering of updates.
{#metadata.live}
<div class="container live">
%7Bbody}
</div>
<Br />
{/metadata.live}We also need to make sure we don’t mess up regular posts, so we’ll want to make sure we still have our body appearing for posts without the live metadata tag.
{^metadata.live}
%7Bbody}
{/metadata.live}Lastly, this code can be placed at the top of the entry.html to include the auto-refresh. For the below, “120” can be changed to any number of seconds you want the auto-refresh to occur. Again, since this is wrapped with the metadata tag for “live”, it will only occur for posts with the metadata in the header.
{#entry.metadata.live}
<meta http-equiv="refresh" content="120" />
{/entry.metadata.live}That’s it. Hopefully this was helpful, interesting, or at the very least, not too painful to get through.
I’m starting to realize why technical writing is so valuable. I suck at describing this process and I pretty much just started.↩︎