I have released a new version of the Paper theme today. It’s a minor upgrade that allows you to set a custom favicon through the theme settings. Of course, it is optional. If you do not configure it, the default Micro.blog favicon will be used. The upgrade is available now.


Paper Theme Now Supports Full Posts on Homepage

I have released an upgrade (v1.1) to Paper theme for Micro.blog today that allows modifying the default behaviour of the homepage. It includes a setting now to display full post content on the homepage of the blog. Here’s how the homepage with this setting on will look like. You can also check the same on my test blog.

Paper Theme 1.1.

This is one of the most asked for features since the first release. I could never get the look right without ruining the spirit of the theme. Or so I like to believe because the change isn’t too significant in itself. So, irrespective of which option you decide to go with, the homepage should feel as part of the original simple and clean theme.

If you are using the Paper theme, look out for the upgrade option in Plugins. It should be enabled soon. As always, if you find any bug or want any improvements, kindly let me know either as GitHub issue or connect with me on Micro.blog / via email.


Porting Hugo theme to Micro.blog

Micro.blog is a blogging platform built over Hugo, a fast static site engine. Given the way it is structured, every theme created for Hugo can potentially work with the blog hosted by Micro.blog. However, there are a few aspects added to Hugo that are specific to the way things work in Micro.blog. These need to be included as part of the themes to make the most of the features of this platform.

This article presents a non-extensive list of things that should be evaluated and included while porting a theme that is made for Hugo to Micro.blog. I have written this as I dug into the existing themes while porting Paper theme. As of this writing, a theme is considered as a plug-in in Micro.blog. Hence, many references link back to the way plug-ins work with the platform.

To reiterate, this is not an extensive list. Based on how a theme, that is being ported, is set up, one may need only a few of these steps or may need a few more than those listed below. However, this should be a good start to get a working version of the theme out for testing. If there are any issues or concerns, please reply to our email addresses.

Pre-requisites

Of course, the article assumes that you have already identified the theme that you want to port. The Hugo theme Showcase is a good place to check for all the wonderful themes available.

Though you are not required to have a detailed understanding of Hugo to port a theme, the knowledge on the below aspects should be handy.

Getting Started

The first step to get started is to access and clone the repository of the theme to be ported. You can either do this offline on your desktop or directly create a new theme in Micro.blog with mentioning the theme repository URL as Clone URL. You could then select this newly added theme as a custom theme for your test blog. This allows you to find out what breaks and also validate the additional modifications that you make to the theme.

For a theme to work, you only need a few folders and files — a typical Micro.blog theme directory structure is provided below for reference.

.
├── theme.toml
├── config.json
├── plugin.json
├── layouts
└── static
  • theme.toml - Contains bare meta information about the theme, like name, description, license, features, author.
  • config.json - Contains any properties required and referenced by the template files of the theme. If the property is to be provided by the user, typically it should be taken as a setting, defined in a separate file.
  • plugin.json - Contains meta information about the custom theme to be displayed as part of plugin repository. It also defines the feature settings that can be provided by user while plugin configuration. Refer to official guide on plug-ins for more details about this file.
  • layouts - A folder that stores html templates that defines how views of different content types will be rendered on a website with the style.
  • static - A folder that stores all the static content like CSS, JavaScript, etc.

You can get rid of all the other unnecessary files and folders and only keep the above-mentioned ones. This will keep the list of files in which changes are to be made manageable.

Before we move ahead, here’s a list of basic template files in the layouts folders that one would modify typically to port a theme.

  • /_default/list.html - A template that renders pages with multiple pieces of content, this includes the homepage. A homepage can also be independently styled by defining a template index.html in the root directory.
  • /_default/single.html or posts/single.html - A template that renders a page for a single post.
  • /_default/list.archivehtml.html - A template that renders the archive page of your website.
  • /partials/head.html - A template that defines the head section of your final rendered HTML.
  • /partials/header.html - A template that defines the header of your blog. This typically includes the site title, subtitle, navigation menu etc.
  • /partials/footer.html - A template that defines the footer of your blog. This typically includes the copyrights, author information etc.
  • /_default/baseof.html - A base template that stitches all the above defined partials together, including the main sections defined in list and single template pages above.

A theme might have all the above files, or have just a subset of these. In case a theme does not provide a particular template file, one from the basic theme (which forms the base of every theme) of Micro.blog is used.

Moreover, make sure you configure the appropriate Hugo Version to be used for your blog. Micro.blog allows two versions of Hugo to be used, 0.54 and 0.91, the latest being relatively new. Many themes may not work with the older 0.54 version of the Hugo, typically indicated by the min_version configuration in the theme.toml. If the value is above 0.54, set the Hugo version to be used as 0.91. This can be done via Design → Hugo Version.

Fix the Broken Pages

Usually, the home page might not render the list of all the posts with the ported templates. This is often due to the wrong selection of the posts. To check the selection, visit the list template mentioned above and fix the file which is fetching all the posts. It should typically look like below where you pull all the regular pages where type is defined as post.

{{ $pages = where .Site.RegularPages "Type" "post" }}

A similar fix would also need to be applied to the archive page’s template, if it is defined custom. The archive page would also need styling the components appropriately, as these are all Micro.blog specific classes, not part of the default styling of the theme.

Next, you will have to fix the templates to handle the title-less posts. Most posts published with Micro.blog are, well, micro-posts with no titles. So, wherever a Title is referenced, it should be wrapped in a {{ if .Title }} condition. So, the title reference at every place should read like below.

{{ if .Title }}
	<h2>{{ .Title }}</h2>
{{ end }}

The title-less posts might also need minor styling fixes. A typical pitfall is when a post permalink is only available with title. So, a micro-post requires a different element to carry the permalink, mostly the date-time of the post.

Another aspect that is typically broken is rendering of the taxonomy. Most of the themes in Hugo use tags to define the taxonomy. Micro.blog uses categories and hence need to fetch them differently. So at every place a template mentions tags, mostly on list template, archives template and single template, replace them with categories. This primarily involves replacing all the references of .Params.tags with .Params.categories.

With these changes handled, you should have a working website that renders correctly. However, it is still not customised to include the benefits that Micro.blog brings to the table.

Add Micro.blog Specific Tags

Micro.blog packs the key IndieWeb principles, like IndieAuth, MicroPub, Webmentions, out-of-box for all websites hosted with the platform. However, this does involve defining a few relevant aspects at appropriate places. In addition, the platform is also rich in the ways a user not adept with coding can customise their website to their liking, with support for providing custom CSS, footer and plug-ins. Enabling these also need relevant components to be defined.

The changes to be made are in two files. First, modify the partials template that defines the head section of your website, /partials/head.html.

<link rel="stylesheet" href="{{ "custom.css" | relURL }}?{{ .Site.Params.theme_seconds }}">
<link rel="me" href="https://micro.blog/{{ .Site.Author.username }}" />
{{ with .Site.Params.twitter_username }}
	<link rel="me" href="https://twitter.com/{{ . }}" />
{{ end }}
{{ with .Site.Params.github_username }}
	<link rel="me" href="https://github.com/{{ . }}" />
{{ end }}
{{ with .Site.Params.instagram_username }}
	<link rel="me" href="https://instagram.com/{{ . }}" />
{{ end }}

<link rel="authorization_endpoint" href="https://micro.blog/indieauth/auth" />
<link rel="token_endpoint" href="https://micro.blog/indieauth/token" />
<link rel="micropub" href="https://micro.blog/micropub" />
<link rel="microsub" href="https://micro.blog/microsub" />
<link rel="webmention" href="https://micro.blog/webmention" />
<link rel="subscribe" href="https://micro.blog/users/follow" />

{{ range .Site.Params.plugins_css }}
	<link rel="stylesheet" href="{{ . }}" />
{{ end }}
{{ range $filename := .Site.Params.plugins_html }}
	{{ partial $filename $ }}
{{ end }}

Next, add the below lines to the end of your base template, /_default/baseof.html just before </body>. These load the custom footer and the plug-ins defined JavaScripts.

{{ partial "custom_footer.html" . }}

{{ range .Site.Params.plugins_js }}
	<script src="{{ . }}"></script>
{{ end }}

Display Replies as Conversations

Micro.blog allows including replies made on the posts to be shown as conversations on a post page via a design setting (Design → Include conversation on post page). However, for the replies to be rendered on your post page, you need to modify your single template, /_default/single.html or posts/single.html, and add the below lines at the end.

{{ if .Site.Params.include_conversation }}
	<script type="text/javascript" src="https://micro.blog/conversation.js?url={{ .Permalink }}"></script>
{{ end }}

Summary

The difficulty involved in porting a Hugo theme to Micro.blog depends completely on the complexity of the original theme. Though it is difficult to extensively cover all the changes required, fixing the things that are broken and adding support for the Micro.blog specific features and tags is all it takes. This article attempted to list down the majority of the identified changes.

In the future, the way of including the Micro.blog specific changes may be simplified significantly. This article would be updated accordingly to reflect the same. However, the awareness of the changes being done allows one to appreciate the hidden complexity and beauty of the platform that is Micro.blog.


PS: This post was written for, and is also published at Custom by Miraz Jordan - a website that intends to “develop reference information and tutorials to help people customise themes in hosted Micro.Blogs”.


I have released a new version of the Paper theme (v1.0.3) today to display category list on the archive page – this can be disabled via plug-in settings. The theme now also supports Reply by email and Conversation on M.b plug-ins by @sod. So if any of the plug-in is already installed, the appropriate link will be displayed under the posts. The upgrade also brings support to include Buy Me a Coffee profile in the social icons list.

I appreciate all the feedback I have received until now. With all the improvements, Paper has become my default theme for my blog (what you see here).


I have released a new version 1.1 of Posts Stats plug-in today. It adds the support to display a chart for the posts by year, displays categories as a cloud and introduces a new stat to show the longest post published. I am pleased with this version - demo here. 😊


I have released a new version 1.0.2 of the Paper theme today, which addresses the reported issues and suggestions since the first release yesterday. Here are the changes, in brief.

  • Added support to include replies on individual posts
  • Added the configuration of social icons as plug-in setting
  • Updated the styling to display categories along with posts
  • Updated documentation to include installation steps
  • Fixed styling of images on smaller screens

You can go to the Plug-ins section in Micro.blog and click “Upgrade” once the option is available. You will have to reconfigure (for the last time, hopefully) the social IDs in the settings of the plug-in. No need to modify the config.json, anymore. This also means the configurations will not be lost during the future upgrades.

I am thrilled with all the feedback that I have received. Paper is a beautifully designed theme, something I can take no credit for. At the same time, I am glad I could make it simpler for others to adopt it.


Paper – A Clean Theme for Micro.blog

After playing around briefly to understand how to bring a theme made for Hugo to Micro.blog, I have finally ported one that I love. Today, I am ready to share it with the Micro.blog community. The theme is called Paper and goes with a tagline “simple, clean, flexible”. You can check for yourself in the screenshot below, or see it live at my test blog.

I am a big fan of clean themes that are minimal, yet impressive. Paper is one such theme — I had used it earlier when I was hosting this blog with Hugo. Although it looks minimal, it isn’t so in the way it works. It has a simple, yet signature header, a built-in dark mode support with a beautiful toggle and a clean black & white look.

I have added the first version of this theme to the plug-ins directory so that you can install it directly as a plugin. It works with both Hugo versions that Micro.blog supports (0.54 and 0.91) [Update]: An issue was reported while using the theme with Hugo version 0.54. So, until further update, the theme supports only version 0.91 of Hugo. However, here are a few points to remember before you install the theme.

Uninstall any theme that you have installed as a plugin. Set you current theme to blank and Hugo Version to 0.91 in the design section of your blog. Make sure there are no other conflicting custom CSS configured for the previous theme. Then install the Paper theme from the plugin directory. Once the theme is successfully installed, you can configure the social icons displayed in the header by modifying the available options in config.json.

There’s already a brilliant selection of themes available for Micro.blog and I am excited to see the support grow further with every passing day. I hope you like this and a few folks benefit from it. If you do, I would love to hear from you.


I verified today that the Post Stats Micro.blog plugin works with the upgraded Hugo version (0.91). So, that’s one less issue I need to handle as part of the next upgrade. However, if you are using the plug-in (I am glad) and see an issue, please let me know.

Back to work on what I had originally planned.


Styling Newsletter Digests in Micro.blog

I recently changed the newsletter to a weekly digest instead of every long-form posts with Micro.blog. A fixed schedule is better for me than thinking about whether to include as part of the newsletter every time I post a post with a title. Until there is a better control (via categories) on what posts I can schedule for delivery, I want to avoid risking this particular setting.

That said, I didn’t really like the way the first digest looked. It was… mhmm … messy. Maybe a bit more control over the elements, like title etc. would be good. Without that, to make the digest look slightly better, here’s the custom CSS that I have added currently.

You can apply this to your digest by including this CSS block to your custom CSS (‘Design’ ⇾ ‘Edit CSS’).

/* Set the font display */
.microblog_email {
    font-family: "Avenir Next", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	font-size: 16px;
	line-height: 1.7em;
	max-width: 600px;
	margin: auto;
}

/* Assign area and display for the blockquote */
.microblog_email blockquote {
	display: block;
    margin: 0;
    margin-bottom: 14px;
    padding: 0 20px;
    border-color: #E0E4E8;
    border-left: 2px solid #E0E4E8;
    line-height: inherit;
}


/* Assign area and display for the images */
.microblog_email img {
	display: block;
	max-width: 100%;	
	height: auto;
	margin: 0 auto 0.5rem;
  	vertical-align: middle;
  	border-radius: 5px;  	
}

/* Style links */
.microblog_email a {
	color: #4F8BCA;
}

/* Hide the profile image and header */
.microblog_email .microblog_header, .microblog_email p:first-child img {
	display: none;
}

/* Style the footer links */
.microblog_email .microblog_footer {
	margin-top: 20px;
    text-align: center;
    font-size: 13px;
    padding-top: 10px;
    padding-left: 30px;
    padding-right: 30px;
    line-height: 1.5em;
}

/* Styling for the separator */
.microblog_email hr {  
  margin: 12px 0;
  border: 0;
  text-align: center;
}

.microblog_email hr:before {
	content: "\2022 \2022 \2022 \2022";
    font-size: 20px;
    color: #4F8BCA;
}

/* Styling the links */
.microblog_email .microblog_permalink {
    color: #4F8BCA;
} 

I would like to avoid these :nth-of-type and :first-child blocks. But until the elements across the body are assigned classes, I will have to stay with this. Anyway, hope this helps. Or if there’s a better, simpler way to achieve this, I would love to hear.


Update [24 April 2022]: Fixed the issue with blockquotes being hidden due to the selection for headers being mistakenly applied to the blockquotes too. This uses the recently added CSS selectors for .microblog_header and .microblog_footer.


A minor styling suggestion while using Posts Stats plugin with Marfa theme in dark mode. Add this snippet to custom CSS (‘Design’ -> ‘Edit CSS’) to fix background of alternate rows in tables.

@media(prefers-color-scheme: dark) {
	tr:nth-child(odd)>td {
	  background: initial;
	}
}

Thanks to Andrew for bringing this to my notice.


I like to remind myself about the number of words that I’ve written on my blog. Well, now I do, through my Archive page. It’s auto-generated, refreshed every time I publish. And if you host with Micro.blog, you can achieve the same with this plugin. It’s basic, but works.


Getting Post URL in Drummer

I enjoy writing posts in Drummer. One of the many reasons for that is I can see all my posts in the same editing space. It is so easy to scroll through all your posts and find reference to just that one old post.

One thing that missing, though, was there was no easy way to get the url for that post right in Drummer. So, I got scripting. I have created a script which does just that. Select any node, run the script, and it will present the URL for that post in a dialog box. Here’s how you enable it.

  • Copy the below Drummer script and paste it in your special opml file for Scripts menu (File ⇾ Special files ⇾ Scripts menu…)
  • You will see a new entry in Scripts menu
  • Select any node, even the headline (a titled post), and select the newly added script menu item

You will get the URL for the selected node.

Get Post URL
	var created = op.attributes.getOne("created");
	var baseurl = opml.getHeaders().urlBlogWebsite;
	if(typeof(baseurl) == "undefined"){
		baseurl = "http://oldschool.scripting.com/" + opml.getHeaders().ownerTwitterScreenName + "/";
	}
	var dt = new Date(created)
	var day = (dt.getUTCDate() < 10 ? '0' : '') + dt.getUTCDate();
	var month = ((dt.getUTCMonth() +1) < 10 ? '0' : '') + (dt.getUTCMonth() + 1);
	var year = dt.getUTCFullYear();
	var hour = (dt.getUTCHours() < 10 ? '0' : '') + dt.getUTCHours(); 
	var minutes = (dt.getUTCMinutes() < 10 ? '0' : '') + dt.getUTCMinutes()
	var seconds = (dt.getUTCSeconds() < 10 ? '0' : '') + dt.getUTCSeconds()
	var post = opml.parse(op.getCursorOpml());
	var isTitledPost = typeof(post.opml.body.subs[0].subs) != "undefined";
	var postUrl = "";
	if(isTitledPost) {
		postUrl = baseurl + year + "/" + month + "/" + day + "/" +  hour + minutes + seconds + ".html";
		postUrl = postUrl + "?title=" + op.getLineText();
	} else 
	{
		postUrl = baseurl + year + "/" + month + "/" + day + ".html#a" +  hour + minutes + seconds;
	}
	dialog.ask("This is the URL for the selected post:",  postUrl);

Getting Started Blogging with Drummer

I recently started blogging with Drummer, a new Outliner made public by Dave Winer. It has been a wonderful experience. I don’t know what it is about a single outline as a base for your blog, but it feels natural. I have been enjoying writing and playing around with my Drummer blog. However, it is not easy to fathom the simplicity of the whole system just through words — only trying it out will make you appreciate the ease. I wanted to capture what it is and how to quickly get started with it for myself and others to follow.

Drummer documentation captures most of this information. But for someone, like me, who’s new to the concept of outliner, the whole stuff can be pretty overwhelming. So, here I capture what I learned and liked so that it helps other newbies like me.

What’s an Outliner?

An outliner is basically an editor that can edit an outline. What is an outline, you ask? Well, outline is text items represented in a hierarchy, with each item having a parent (typically a title) or multiple sub-items (typically related points). There’s a lot more to know, but I am more focused on drawing a parallel with regular blogging terminologies.

You can think of a first parent item as a title of your post. Each sub-item that follows is like a new paragraph. You can further divide the items into sub-items, that’s grouping related points into a subtitle for example. The only difference is instead of it being represented as a header and list of paragraphs, it is a tree-structure of points, closely related and unrelated.

If a post doesn’t have any child, it’s a titleless post, a micro-post — something like a tweet.

Dave Winer is the strongest proponent of using the outlines as the base for the blogs, he uses them for his blog, Scripting News. The basic hierarchical structure of an outline, makes using outliner for blogging powerful. Both the types of posts, long-form and micro, sit well together. After all, it’s just one long list of text items one after another. Whether they have a sub-item or not define how they get represented. Or that’s how Dave likes them represented.

Drummer is one such outliner that benefits from the years of Dave’s experience. He has understood all the nitty-gritty of blogging through this form. So, once you overcome the initial struggle of unknown, the experience is pretty smooth.

Is it a Blogging CMS?

Not really, Drummer is just a web application that can edit outlines. These outlines are typically represented as an OPML file. Basically, all you do with Drummer is edit OPML files of different forms. It wraps a few special OPML files — mainly blog.opml — to give them specific meaning while using them as base for blogging.

But, all we do is edit these OPML files then, what builds the blog?

Well, the software that runs Dave’s blog does that job. It is called Old School (because Dave believes this is the old school way of blogging) and is hosted by Dave. In a way, Old School is the blogging CMS and not Drummer.

So, from my understanding, the way the thing connect is as below.

  1. You sign in with your Twitter account and that creates the necessary backend — basically a S3 store for your OPML files — based on your Twitter username.
  2. You create, view, edit the OPML files using Drummer. The special files like blog.opml and about.opml hold special meaning for Old School. (Update: In fact, about.opml is just used for representation. You can name it anything.) So, you update them and through a command in Drummer (Build my blog), you communicate to Old School server to refresh your blog.
  3. Old School receives the communication and based on provided inputs, it identifies the files to use for building the blog. It reads the OPML files from the backend store for the files and converts them to static files that get served as your blog.
  4. Old School also serves you blog at the http://oldschool.scripting.com/<your-user-name> URL. So in a way, you don’t need to host any additional software.

In a way, then, Drummer and Old School together act as your blogging engine. Drummer is your editor where you write your posts. Old School acts as a CMS to build and serve your blog.

How do I get started?

Dave has a got a handy documentation in place that you can follow. I will point to the relevant parts in the documentation so that you can follow along and get started.

  1. Main blog: Follow the getting started guide to get a blog up and running with Drummer. In short, create a blog.opml outline file. Make the outline public. And finally, build the blog using Tools > Build my blog.... This should open a new tab with your blog rendered with Old School. You can customise your title and description of your blog and a few head-level attributes.
  2. Title and Description: Modify/add the head-level attributes title and description and rebuild your blog.
  3. Header Image: Add a head-level attribute urlHeaderImage pointing to the header image of your choice and rebuild your blog.
  4. Copyright: Add a head-level attribute copyright with the text you want to appear in the footer and rebuild your blog.
  5. About Page: If you want to create a new tab in your blog for your About page, create a new about.opml outline file using Drummer, make the outline public, add a head-level attribute urlAboutOpml pointing to this public outline and build your blog again. (Update: In fact, about.opml is just used for representation. You can name it anything, as long as you configure the value for urlAboutOpml accordingly.)
  6. Link Blog: If the concept of linkblog excites you, you can use another software by Dave, Radio3. Just add a new head-level attribute urlLinkblogJson pointing to your linkblog JSON file, which would look something like http://radio3.io/users/<your-user-name>/linkblog.json.
  7. TimeZone: To make sure the dates are rendered correctly on your blog, add a head-level attribute timeZoneOffset for the place where you would be blogging from. The value should be the offset from UTC — for example, +5:30 for India or -4 for New York.
  8. Creating Post: Head over to your blog.opml file in Drummer and click on the + icon (for New Note), write what you want to write and rebuild your blog. Your post should be up.
  9. Adding Links: Select the text to which you want to add a link, click on the “Link” icon (the second icon from top in the icon bar that sits on the left of the editing area) and insert the URL.
  10. Adding Images: This one’s slightly tricky. First, have your image hosted on some place where it would be accessible publicly. Get the URL to your image. While on the item you want to associate the image with, click on the “Edit attributes” icon (the third icon from top in the icon bar that sits on the left of the editing area). Now you can either create an inline image (with attribute inlineImage), right-margin image (with attribute image), title image (with attribute metaImage). I wish this work was simpler.

At this point, you should have a well-configured blog up and running. Keep Drummer interface open in tab and keep adding entries. This method of updating your blog will soon grow on you.

What else can I customise?

Even though you have all the basics covered till now, there is still a lot that you can and should do. But I would recommend get comfortable working Drummer and check for yourself if the workflow fits your routine and liking. If it doesn’t, these additional configurations are just a distraction.

Anyway, if you find out that you are enjoying this system of blogging, here are links to a few additional configurations that you can perform.

A Few Additional Notes

  1. There’s a Mac app (electron based) called Electric Drummer that can act as an outliner. However, you should avoid using it for blogging if you intend to blog from multiple systems. Changes made through the app can overwrite ones as done on the web Drummer. So thread carefully.
  2. Drummer is evolving. Dave is working hard to make sure all serious reported issues are resolved. Early adopters are trying out a hundred things independently. If that sounds fun, the Drummer support issues page is the place to go.
  3. You can stay-to-date with all things Drummer by following this official blog.
  4. How does Drummer cost zero? Dave answers.
  5. Why is Drummer, and other software from Dave, so tightly coupled with Twitter? Dave answers.

I intend to use Drummer as a place where I form my thoughts over the time. The ease of the updating process makes posting unformed thoughts a breeze. So, in a way, this space represents the most raw me. You can follow this me as he experiments with my Drummer blog. And of course, there’s an RSS feed.


Finally, I have completed a pretty tricky exercise that I had started about a couple of weeks back. It wasn't tricky because I wanted to move my website to a different platform. It was tricky because I wanted to do it cleanly. I wanted to retain as many things that worked well for me as I could. I didn't want to break much that was core.

So, after days of experiments and trial runs, and notes and list of reviewed to-dos, I've managed to switch to WordPress. I will note down why someday - one short, but big reason though is editing. I am tired of working custom solutions with Blot -- it's a great service, no doubt. But you need to love your files a lot. I am currently not in that phase.

Anyway, as intended, the core is retained. The links are (hopefully 🤞) not broken. #IndieWeb support was a must, have stitched that in. The option to switch to a dark theme was a must. A simple reading experience was a must. I've managed to get good writing experience too. So, times now to sit back and relax.

Do let me know if see anything that's not working well. I won't mind if you also let me know if everything's working fine.


I have been working with David Merfield on a little side project. The idea started simple - what if there was a simple posting interface for Blot? In extension, something that one can use to write and publish a post to Dropbox. Blot is simple as-is for writing and posting (it’s all files). But there are times when I do want to quickly post from my web browser. And for such times, I still need a simple writing interface.

That thought was enough to interest both me and David. We got to work. The project got neglected in between. And then was picked up again. And I think, it is in a state now where it can really be useful to a few. I can attest to that because I, myself, have been using it for few days now.

Here’s Wall — a web-accessible text-editor over Dropbox, works nicely with Blot.

I believe this would be useful for many. It is clean. It is light, pure-client side application. It supports local drafts. It can export markdown. It can publish to Blot. Perfect for all those text posts.

I have my own fork of the project where I want to use the editor and support publishing to multiple places. To start with, I have extended it to post it anywhere in Dropbox.

I have hosted it here as Scribe. I plan to extend it next to be used as a micropub client. Still in works, though.

Of course, this is not perfect yet. For one, it does not work well on smaller screens. But it is a good enough. Do give it try.


Over the last week, I’ve added some features to Blotpub that were long in works - support for syndicating longer posts, support for updating posts. I’ve also automated sending of webmentions to the target sites for reply and like posts types. It’s been some productive week this.


I am having fun getting back into Indieweb stuff — working on adding support for updates to Blotpub. This has been in works for so long, I had to get to it. I also recently added support for syndicating longer posts to Twitter and Mastodon. Always makes me relaxed.


A quick question for the IndieWeb community here, how do you send the webmentions? Is it automated on posting? Is it part of the micropub or an independent script? Are there ready resources, scripts or tools available? I couldn’t find much on indieweb.org.


I have completed the consolidation exercise that I had planned to carry out this weekend. All the posts exist on the home page of the root domain now and is hosted by Blot. There are no sub-domains for separate posts. There is no landing page. It’s all words.

Of course, I had butterflies in my stomach before I began the whole exercise. I had posts spread across different categories. I had very specific styling done for some rarely used components of the blog posts. And I had pages.

Then I had some complex pages and posts. It was the thought of migrating this varied content that made me a bit edgy. Posts like this guide on moving to Hugo. Or this one about displaying webmentions along with posts. I had to manually migrate such posts along with the necessary styles.

I am happy overall with what I have achieved. Things are simpler now. If I have to post something, I know where it would be. Doesn’t matter what the nature of the post is. This space now supports all types. Along with the /now page reseted to begin from now.

What this also means that I have to bear with few things. I have lost webmentions to the blog sub-domain posts. I have to reset my indieweb presence, clear all caches with indieauth sites. Thankfully, not much was broken that couldn’t be fixed simple re-logins and re-configurations. I (and you) have to bear with the configured redirects to propagate through the Internet and reach all. So the old links will stay unreachable till that happens.

I have kept the Hugo site alive. It hosts the archive, something I did not want to carry along. I just restyled it to make it resemble a timeline leading back into the time. I do not wish to ever post to it again. Simplicity of maintaining and updating my website with Blot has won me over.


When you have a mind not too clogged with some insignificant thoughts, one can get things done. I managed to add support for syndicating posts to Twitter from Blotpub. A minor update, sure. But an update nonetheless after a long time. Good to have the focus back.


I realized today that it was on this day a year back that I had opened Micro.threads to all. It was the first project built ground up that I had made available for every one to use. The earlier projects were either customized or personal. It has been a wonderful learning experience.

It was also an opportunity for myself to gain confidence. It kick-started my journey to more hobby projects, inspired me to even write more. Funny how few small beginnings can turn into significant projects.


Recently David documented the steps to expose a JSON feed on a @Blot site. I’ve been running a JSON feed for my blog for some time now, which also drives the On This Day page on my blog. I shared my approach so that others with a site running on Blot can create such a page.


Adding On This Day feature to Blot

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.

One key thing to understand here is how to create a view in Blot. It would be important to be aware of this step to proceed further. A view can be created in Blot by accessing the editing template section (Settings > Template) in Blot dashboard. Click on Edit against your currently installed theme and search for an option Create new view.

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.

  1. Fetches all the posts as JSON objects from the JSON feed
  2. Identifies the posts that share the same date and month as the current date (but not the year to avoid loading today’s posts)
  3. 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 fuction renderPost.

Make sure the above created view is accessible at a URL. If not, define a route in the Settings section of the view.

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.

TL;DR: Expose a JSON feed on your site. Create two views in Blot using the gist flashback.js and on-this-day.html. You should have two additional pages, you can use the same file names. If you do, you can access your On This Day page at /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.


On this day, a year ago

Around a year ago, I got enthralled by the IndieWeb principles and started experimenting with them on my website. Exactly a year ago today, I had started contributing on the Micro.blog platform. And it has been a very productive year writing-wise since then.

I have expressed myself a lot more in the past year. I have thought a lot clearer, a lot better as a result. It is all thanks to the wonderful interactions on the platform.

What it also means is that I have a year worth of posts to look back upon. And I thought what better way to do so than getting the On This Day page added to my blog. I have done that. It presents how the journey started - if nothing else I myself can follow the thoughts along as they evolved.

Will it stick in this same form? May be not. I may experiment a bit on how I see this feature. But I have got the base working now for my blot-based blog.

PS: This feature is based on the wonderful project Micro Memories by Jonathan LaCour for the micro.blog hosted blogs. I have just customized and simplified it as per my needs.


Humble brag alert - Micro.threads used up my free dyno hours on Heroku, for the 1st time. Plus few people successfully setup and used Blotpub. It’s gratifying to see something you build being of some help to others. May sound like minor wins - but for me, no win is ever minor 😁