Recently David Merfield, the developer behind Blot, documented the steps to expose a JSON feed on a Blot site. I have been running a JSON feed for my blog for quite some time now, with some valuable help from David of course. It is this feed that drives the On This Day page on this blog. I thought I will share my approach so that others with a blog running on Blot can create such a page.
To begin with, follow the guide to get a working JSON feed for your blog. Validate you have a properly formed and accessible feed being served using the JSON feed validator.
Once the JSON feed is available, create a view in Blot for a javascript file. Copy the complete content of the javascript available as a gist* and add them to this new view. Modify the json_feed_url
and tz
variables appropriately to reflect the URL for the JSON feed and the timezone for your blog, you can refer to the formats in TZ database time zones. This script does the following.
- Fetches all the posts as JSON objects from the JSON feed
- Identifies the posts that share the same date and month as the current date (but not the year to avoid loading today’s posts)
- Renders the posts (or no posts message) in the predefined section detailed below. This also includes some styling via the
.className
definition, you can remove/modify that as per your liking in fuctionrenderPost
.
Next, create another view for a page to display these posts; a reference html page is available as a gist. Modify the src
in <script src="/flashback.js"></script>
to reflects the URL for the javascript created above. The script adds and renders the posts made on this day in earlier years in the div
element with id
on-this-day
.
Do give this a try, it is fascinating to see your thoughts change, or at times stay exactly the same, over the year. Reach out to me if you face any issues or find any step missing.
/on-this-day
. * This javascript is inspired by and based on the wonderful project Micro Memories by Jonathan LaCour for the micro.blog hosted blogs. I have customized and simplified it as per my needs.