Hello, IndieWeb

In this post I want to share how this website connects with IndieWeb.

What is IndieWeb

IndieWeb how it describes itself, is:

a people-focused alternative to the “corporate web”

I also don’t like the “corporate web” and try not to participate in it. However, right now IndieWeb for me is mostly something fun to do on the weekends.

On a more technical level, it’s a combination of protocols like WebMentions, Microsub and some others that together enable a distributed social interaction on the Web.

What I would like to achieve

Setup

I used to power this website with Hugo - a static website generator. But it doesn’t quite fit IndieWeb requirements for me.

Most people, as I understand, use centralized platforms like webmention.io or micro.blog mixed with different CMS plugins to be on IndieWeb. For me - it’s no fun. I want to do it all myself - thus static website won’t do it. I have to have a server to at least receive webmentions.

Some time ago SvelteKit got me interested. SvelteKit is a framework to build webapps using Svelte. What is especially cool about it for my use-case is that it is:

With that said, my tech choice is: SvelteKit deployed to Cloudflare Pages

SvelteKit

I won’t dive into details here, you can check out the code. Pretty much it’s SvelteKit with mdsvex. While configuring it, there two articles helped me a lot:

Microformats

First step in IndieWeb is to setup microformats. It’s a data format built on top of xml that provides a standard way of communicating between IndieWeb sites, meaning:

You add some attributes to your website’s html:

<a class="h-card" href="/" rel="me">Jimmy</a>

Microformats parsers take html and convert it to standardised JSON:

{
  "items": [
    {
      "properties": {
        "name": ["Jimmy"],
        "url": ["http://example.com/"]
      },
      "type": ["h-card"]
    }
  ],
  "rel-urls": {
    "http://example.com": {
      "rels": ["me"],
      "text": "Jimmy"
    }
  },
  "rels": {
    "me": ["http://example.com/"]
  }
}

The JSON is used to power comments functionality on your website (for example).

You can read more here and here.

Webmentions

Second step is webmentions. Webmentions is a very simple protocol to let other’s know that you’ve mentioned their page. A mention could be anything form a ‘like’ to ‘comment’ or even ‘rsvp’.

Since the protocol is so simple, I am implementing it myself. Both because it’s more fun and to satisfy my requirements for the project.

There are two parts when it comes to webmentions: receiving and sending.

Receiving

Since I don’t want to pay for the hosting, here is a plan:

  1. When someone send me a webmention, the request is be processed by a serverless handler hosted on cloudflare workers and then stored in their key value storage
  2. Later, an export script is triggered by myself manually or via GitHub Actions cronjob to download all of the new webmentions into my repository
  3. Then, a processing script is triggered in a similar manner to process new webmentions
  4. Viola, now all the raw webmentions data is available in my repository at all times, and I can use it to render static pages

What I like about this plan is that:

Of course the non real timeness of the solution might be considered a downside.

Sending

After receiving part was done I conviniently had written code that can be reused to send webmentions too. Since this website is fully prerendered and distributed as a set of static files, I can analyze those files and extract my webmentions from it.

Once webmentions are extracted, it’s trivial to implement the discovery and make script ping the endpoints.

Test

The footer of this article contains a list of received webmentions, and I’ve already sent one!

Update

Support for webmentions was successfully removed, since I do not use it :)