Category: Blot

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.

Finally, managed to document the steps to enable webmentions support on one’s site. I hope it comes handy for at least few people. This should allow people to fetch mentions to their posts, including the replies from micro.blog, and display them along with posts.

I had missed that David has added a new function to Blot to step around the issues micro.blog was having with images in Blot’s RSS feeds”. This change should allow using the caching feature without missing images in the timeline. Have updated my post on the issue.

Displaying images from Blot on Micro.blog

Update: David has added a new function to step around the issues micro.blog was having with images in Blot’s RSS feeds”. This change should allow using the Blot’s caching feature.

For all the defaults templates, David has already deployed the fix. So you should have the issue sorted without any update. If you have a custom template, to enable this change, wrap the html component around with the function absoluteURLs in your RSS file. For example, if you use html, use the below block in your description feed of your rss file (typically feed.rss).

{ {#absoluteURLs}} { { {html}}} { {/absoluteURLs}}

When you publish a micro post (one without title) on Blot which has images in it, Blot uses a CDN by default to store for these images. Though it may be helpful overall in blog performance, it causes some issues while interoperating with micro.blog. You will find that these images are not visible on its timeline.

It’s a known issue where micro.blog is unable to parse these images. To enable the images posted on Blot to appear on micro.blog timeline, make following changes with the configuration.

  1. You can disable the blot cdn. This option is available on the Blot settings page under Settings > Services > Cache And Optimize Images. This makes the images be served directly under your blog’s domain. This change does not take much time to propagate, you will see the change reflect in the url for the images.
  2. In addition, by default (in most themes), images may have relative urls. For example, you might just put \_images\<IMAGE_NAME> while adding the image to the post. However,these relative paths are again not parsed by micro.blog well (though most feed readers do it well). Anyway, to overcome this problem just include the complete url of the image while adding it (for example, http://<BLOGNAME>/<PATH>).

These changes should be enough to allow your images to be visible at m.b timeline.

Blotpub bundles a Media Endpoint now

There was one (last?) missing piece in the quest of mine to simplify posting to my blog – and that was photos. Most of my posts originate on micropub clients, mainly Micro.blog. But photos couldn’t without a media endpoint. Not any more. Blotpub now has one in-built.

Creating a new view on Blot

I recently wanted to create a new view (a page) for all my social posts. Apparently, even if you create the page there are still few additional configurations to be done for the template to make it available at a particular link.

Configuration to be done is to define a route which will serve that particular page. This can be done on the web editor at Blot dashboard in the template section.

As of now, this is only possible when local editing is disabled. So if you have the local editing enabled, you can disable it to access the below mentioned sections.

You can create a new view’ on the web editor in the view section of the templates (available at https://blot.im/template/<theme-name>/view).

Once you create a new view, go to settings page for the newly created view and specify its route. For example, the route (or URL) for archives.html is set to /archives. This enables the Blot engine to render the given template view at the configured URL. You can explore the archives view for more options.

Blotpub now supports syndication to Mastodon

With all the recent discussions around Mastodon and how it is different, possibly better, I thought there is no way to judge that without using the platform first, be a native resident”.

But I have come to realise one fact, I just can’t post actively at multiple places. Especially important, none of those places can not be my blog. It has to be posted on my blog first and may then flow into other systems. POSSE.

Micro.blog was covered, via feeds. It had also got me covered for Twitter. Mastodon didn’t look to be an easy case. There is no easy way to push updates from feeds to Mastodon. Web hooks may be the only feasible way. I thought I had to get a more seamless solution than that.

And what better may to do that than syndicating right while posting. So I have updated Blotpub to support syndication to Mastodon. I can now indicate the Micropub clients to syndicate current posts to Mastodon. Nice!

Blotpub Now Supports Likes and Replies

Since I introduced blotpub a couple of days back, I have been continuously posting to the site from different Micropub clients. And I am happy that the system worked well. Added satisfaction was provided by the community by expressing interest and openness to try the endpoint out.

As I had mentioned in that post, handling “the creation of like and reply post types” was next on the list. I just couldn’t live with the fact that the endpoint didn’t handle these simple post types. So, it had to be addressed. And it is addressed now — the latest version of blotpub handles replies and like posts.

The information is added as properties in-reply-to and like-of to the post metadata.

In addition, support has been added to explicitly place the date property as part of the metadata.

Earlier, file creation date was used as the post date. The enhancement was discussed with @jack as part of this git issue. With this version, if the published date is provided, it would be set in the metadata. Else date-time for post creation request would be used. To enable this, just set SET_DATE environment variable to true. Additionally, you can also set the TZ variable to override default timezones for the server hosting your endpoint. Refer to the README for more details.

I have also fixed some minor issues in handling the post creation via different clients, mainly Micro.blog iOS client.

What’s next? Handling of image files.

Blotpub – Micropub Endpoint for Blot

Continuing my experiments with Blot, and as a next step in Indiewebifying it, I had recently sorted out the webmentions setup and display.

There was one final piece of puzzle missing, one that I had posted in a recent update on the theme refresh.

Why not make this the primary homepage? Well, I am still on the journey of indiewebifying this place. I still post to my site using other apps, mainly Quill and Micro.blog. Until I get the micropub endpoint that I am working on done, I will keep this place booked for my excursions, my experiments.

Well, I finally managed to get a basic version of one worked out. Basic, but a workable version. Introducing Blotpub.

It is a self-hosteable Micropub endpoint for blot.im and Dropbox. It accepts Micropub requests, creates a simple Blot posts and saves them to a configured Dropbox folder. This enables updating a Blot blog through a Micropub client.

I have tested creation of both long and short posts via Quill. It supports creation of posts with or without titles. For me, the former are my micro posts while later are more of the long form articles.

It also supports metadata creation for tags and slugs as part of the post documents.

With this, I have my basic needs covered. Most of the time, I am posting text posts; the current version should be able to handle that.

Next, I need to handle the creation of like and reply post types and also handle the image files. It may so happen that I end up getting these done soon. However, I wanted to put the bare bones version out there.

How do I use this?

Well, as I said earlier the source is open. It is a Node application which you can self-host as your own micropub endpoint. I have covered some of the details as part of the project readme.

However, before you use blotpub, there is one essential step from IndieWeb that needs to be addressed – to make your website your identity online. It involves declaring openly your social network profiles as rel-me links and link those profiles back to your site. This allows you to login to any IndieAuth enabled services using your website’s homepage – no need to create an account or maintain passwords.

You can refer to the Essential IndiWeb” section in this post on how to display webmentions on your site. That step applies to using a micropub too.

This is an early alpha release of the application. Things may be a bit unstable. Please use it with caution. Also, I will continue to work on this and improve it, so, you may have to refresh your deployment regularly. However, I would be happy if you choose to join me on this bumpy ride – this will only get better with more people using it.
  1. Install: Just install this as a normal Node.js application. A better way would be to deploy directly to Heroku.

  2. Grant Dropbox Access: Generate a Dropbox access token from the Dropbox App Console to grant the application access to your Dropbox folder. Just create a new app in the console, chose API as Dropbox API, select the type of access as Full Dropbox” and finally, name your application. You will need this generated token while configuring your application. Just to reiterate the point, the Permission type” for the app that you create for blotpub in dropbox needs to be set to Full Dropbox”
  3. Configure: Add the required configuration values via environment variables or the Heroku app deploy dashboard. You will need the token generated above.

  4. Endpoint Discovery: Once you have deployed the application, your Micropub endpoint will be available at /micropub (e.g. https://deployed-blotpub-app.com/micropub). Note that the endpoint url is different from your website url. It would be the url for the blotpub application that your installed in the 1st step.

    For Heroku deployment, it would be something like https://*****.herokuapp.com/micropub (exact url will be available at Heroku dashboard). To enable automatic discovery for your Micropub endpoint and token endpoint, you will need to add the following values to your Blot site’s <head> – usually available in the head.html file in your theme/template.

<link rel="micropub" href="https://deployed-blotpub-app.com/micropub"> <link rel="token_endpoint" href="https://tokens.indieauth.com/token">
  1. Media Endpoint: Most of the micropub clients, like quill, can send the media files as multipart data. So, you can attach image while creating a new post. However, some clients like Micro.blog require a Media Endpoint to handle the media files (primarily the image files). Blotpub comes with an inbuilt media endpoint. To use it, just configure the MEDIA_ENDPOINT variable in your blotpub deployment to https://deployed-blotpub-app.com/micropub/media (for Heroku, something like https://*****.herokuapp.com/micropub/media). This will allow you to post image from such clients too.

  2. Note that file uploads via blotpub media endpoint will only add the image file at the location configured at PHOTO_PATH and the URL to the image will be added to the post metadata as photo: <url-to-image>. To render this in the post, you can add the below code block in entries.html and entry.html in your Blot theme either before or after {{{html}}} as per your preference.

{{#metadata.photo} } <img src="{{metadata.photo} }"> {{/metadata.photo} }

You should now be able to post to your Blot site from external Micropub clients (like Micro.blog iOS App, Quill etc). If you do use this, ping me. All your feedback is welcome.