Now, I'm in IndieWeb?

Since I saw the concept of IndieWeb last year, I’ve been wanting to support it on my Zola blog. Before that my blog had never had a commenting system, and this time with Webmention I was finally able to get a static blog to display responses to articles on the web in plain html. I will document how I did it in this article.

The IndieWeb IndieWeb is a community of independent & personal websites connected by simple standards, based on the principles of: owning your domain & using it as your primary identity, publishing on your own site (optionally syndicating elsewhere), and owning your data.

1. Support IndieWeb Auth🔗

IndieAuth is a federated login protocol for Web sign-in, so by enabling this, we can use our own domain to sign in to other sites and services which support IndieAuth. Learn more about why IndieAuth and how to IndieAuth, here’s how I enabled it:

By editing my index template file, add this to the head:

<link rel="me" href="https://twitter.com/TheOwenYoung" />
<link rel="me" href="https://github.com/theowenyoung" />
<link rel="me" href="mailto:owen@owenyoung.com" />

Editing Twitter/GitHub profile bio, add my website URL https://www.owenyoung.com
Test it at https://indielogin.com/

2. Add Profile Info🔗

When you sign in with IndieAuth or using web mention, some sites will try to get your profile info, like name, image, and bio. So we can add this to our homepage, you can learn more about h-card here. Here’s how I added it:

By editing my index template file, add this in the aside (Cause I don’t want this to affect the layout of my site, so use css display: none to hide it for human, but the bot will see it):

<div class="display-none h-card pt">
  <img class="u-photo icon" alt="Owen"
  src="{{get_url(path="site/images/favicon-96x96.png",cachebust=true)}}" />
  <a class="p-name u-url" href="{{ config.base_url }}"
    >{{ config.extra.author }}</a
  >
  <p class="p-note">{{ config.extra.bio }}</p>
</div>

3. Joining IndieWeb Webring 🔗

A webring (or web ring) is a collection of websites linked together in a circular structure, and usually organized around a specific theme, often educational or social. They were popular in the 1990s and early 2000s, particularly among amateur websites.

Now, IndieWeb has one IndieWeb Webring! by adding webring in our sites, so people can find (and be found by) other folks with IndieWeb building blocks on their sites!

So, I’m in it! By joining this, my blog has been listed in the IndieWeb Webring Directory, you can see I already have a profile there.

It’s easy to join the webring, just click the link, and login with my domain www.owenyoung.com, then I can get my webring code, my webring code like this:

<a href="https://xn--sr8hvo.ws/%F0%9F%93%AE%F0%9F%86%99%F0%9F%93%A9/previous"
  >←</a
>
An IndieWeb Webring 🕸💍
<a href="https://xn--sr8hvo.ws/%F0%9F%93%AE%F0%9F%86%99%F0%9F%93%A9/next">→</a>

Then, I add this code to my homepage aside, you can see it on the aside footer

4. Adding Webmention Response to articles🔗

Webmention is a web standard for mentions and conversations across the web, a powerful building block that is used for a growing federated network of comments, likes, reposts, and other rich interactions across the decentralized social web.

“An @ mention that works across websites; so that you don’t feel immovable from Twitter or Fb.” — Rony Ngala

Learn more about Webmention and How to support webmention

Basically, I use Webmention.io to collect all webmentions about this blog, and then I use Denoflow to cache them to my blog repo, and then I use Zola load_data function to load them, and render them.

First, go webmention.io and create a new account with my domain www.owenyoung.com, then I can get my webmention endpoint, and I connected my twitter and github account to the service.
Second, let other services know your webmention endpoint. Add this to the head:

<link
  rel="webmention"
  href="https://webmention.io/www.owenyoung.com/webmention"
/>

Use Denoflow to cache all webmentions to my blog repo

Workflow file(workflows/fetch-webmention.yml):

Fetch webmention API to get updates, then save to webmentions directory.

sources:
  - use: fetch
    args:
      - https://webmention.io/api/mentions.jf2?domain=www.owenyoung.com&per-page=999&token=${{ctx.env.WEBMENTION_TOKEN}}
    run: return ctx.result.json()
    itemsPath: children
    key: "wm-id"
filter:
  run: |
    const {ensureDir} = await import("https://deno.land/std@0.121.0/fs/mod.ts");
    const { dirname } = await import("https://deno.land/std@0.121.0/path/mod.ts");
    for(const item of ctx.items){
      const id = item["wm-id"];
      const target = new URL(item["wm-target"]);
      const pathname = target.pathname;
      const filename = pathname.slice(1).replace(/\/$/, "");
      const filepath = "webmentions/"+filename+".json";
      await ensureDir(dirname(filepath));
      let webmentionData = {};
      try {
        const dataString = await Deno.readTextFile(filepath);
        webmentionData = JSON.parse(dataString);
      } catch (_e) {
        // ignore
      }
      webmentionData[id] = item;
      console.log("write file:", filepath);
      await Deno.writeTextFile(filepath, JSON.stringify(webmentionData,null,2));
    }
    return ctx.items.map(()=>true);

Github Workflow file(.github/workflows/denoflow.yml):

Run denoflow every day at midnight, if there are any new updates, it will create a new pull request.

name: Denoflow
on:
  repository_dispatch:
  workflow_dispatch:
  # push:
  #   branches:
  #     - main
  schedule:
    - cron: "1 0 * * *"
jobs:
  denoflow:
    runs-on: ubuntu-latest
    concurrency: denoflow
    steps:
      - name: Check out repository code
        uses: actions/checkout@v2
      - uses: denoland/setup-deno@v1
        with:
          deno-version: v1.x
      - run: make webmention
        env:
          WEBMENTION_TOKEN: ${{secrets.WEBMENTION_TOKEN}}
        continue-on-error: true
      - name: chown
        run: sudo chown -R $USER:$USER ./
      - name: git config
        run: git config --global user.name "github-actions[bot]" && git config --global user.email github-actions-bot@users.noreply.github.com
      - name: git add
        run: git add data && git add webmentions
      - run: git status
      - id: isChanged
        run: git diff-index --cached --quiet HEAD || echo '::set-output name=changed::true'
      - name: Create pull request
        uses: peter-evans/create-pull-request@v3
        if: ${{ steps.isChanged.outputs.changed == 'true' }}
        with:
          token: ${{ secrets.PERSONAL_TOKEN }}
          labels: automerge
          add-paths: data,webmentions
          commit-message: "chore: new item"
          committer: "github-actions[bot] <github-actions-bot@users.noreply.github.com>"
          author: "github-actions[bot] <github-actions-bot@users.noreply.github.com>"
          branch: new-item
          delete-branch: true
          title: New item update

Github auto merge workflow file(.github/workflows/auto-merge.yml):

When a pull request is created, the workflow will automatically merge it if the pull request is from the same author

name: Auto merge
on:
  workflow_dispatch:
  pull_request_target:
jobs:
  auto-approve:
    runs-on: ubuntu-latest
    steps:
      - name: Merge
        if: (github.actor=='theowenyoung') && (startsWith(github.head_ref,'new-item'))
        uses: "pascalgn/automerge-action@v0.14.3"
        env:
          GITHUB_TOKEN: "${{ secrets.PERSONAL_TOKEN }}"
          MERGE_DELETE_BRANCH: true
          MERGE_LABELS: ""

Add response block to page tempalte

This part may take a while to finish, here is the main page template code, I’ll only show the main part.

Use Zola load_data function to load the webmention data JSON file.

{% set current_webmention_file_name = current_path | trim_end_matches(pat="/")
%} {% set webmention_data =
load_data(path="webmentions"~current_webmention_file_name~".json",required=false)
%}

Show response:

{% if webmention_data %} {% set_global mentions = [] %} {% for ignored, item in
webmention_data %} {% set_global mentions = mentions | concat(with=item) %} {%
endfor %}
<p class="muted text-sm">
  {{trans(key="label_response_description",lang=lang)| markdown(inline=true) |
  safe}}
</p>
{% for type, items in mentions | group_by(attribute="wm-property") %}
<h3>
  {{trans(key="label_"~type,lang=lang)}} ({{items | length}})<a
    href="#{{type}}"
    id="{{type}}"
    class="zola-anchor"
    >🔗</a
  >
</h3>
{% if type == 'like-of' or type == "repost-of" or type == "bookmark-of" or type
== "follow-of" %}
<ul class="list-none flex items-center flex-wrap">
  {% for item in items %} {{ macro::webmention(type=type, item=item) }} {%
  endfor %}
</ul>
{% else %}
<ul class="list-none">
  {% for item in items %} {{ macro::webmention(type=type, item=item) }} {%
  endfor %}
</ul>
{% endif %} {% endfor %} {% endif %}

Then, I add a webmention form, so if people want to submit their mentions, they can directly submit it.

<form
  class="webmention-form"
  action="https://webmention.io/www.owenyoung.com/webmention"
  method="post"
>
  <div class="flex items-center flex-wrap pb">
    <input type="url" name="source" class="flex-3 mr-sm w-full py-sm px-sm" />
    <input type="submit" class="px py-sm" value="Send Webmention" />
  </div>
  <input type="hidden" name="target" value="{{current_url}}" />
</form>

Optional: I also added an activity page for aggregating all response, the activity template page is here

Cause I don’t have too many mentions, so I use sebastiandedeyne’s mention data as this article’s webmention data.

5. Send webmention when you publish a new article🔗

When we publish a new article, we want to send a webmention to the mentioned links. We can do this by using Denoflow and the Webmention.app API. Webmention.app can check all the mentioned links in the new article and send all webmentions to them. Before Webmention.app can recognize the mentioned links, we need to add some extra microformats2 to our article html. Basically, it’s some html tag class names. These took me quite a few time to update my templates, so now I have supported h-card, h-entry and h-feed. It looks like this:

<article class="h-entry">
  <h1 class="p-name">Microformats are amazing</h1>
  <p>
    Published by
    <a class="p-author h-card" href="http://example.com">W. Developer</a> on
    <time class="dt-published" datetime="2013-06-13 12:00:00"
      >13<sup>th</sup> June 2013</time
    >
  </p>
  <p class="p-summary">In which I extoll the virtues of using microformats.</p>
  <div class="e-content">
    <p>Blah blah blah</p>
  </div>
</article>

I have updated page.html, index.html, taxonomy_single.html and section.html to support these new microformats. I have to say this is the most demanding job, good luck!

Once finished, I went to indiewebify to test if it can recognize my new microformats. It works!

Next, I went to webmention.app to apply for a token. Then I can add a denoflow workflow file to fetch it’s service every day.

Here is the workflow file(workflows/send-webmention.yml):

sources:
  - from: https://deno.land/x/denoflow@0.0.35/sources/rss.ts
    args:
      - https://www.owenyoung.com/blog/atom.xml
  - from: https://deno.land/x/denoflow@0.0.35/sources/rss.ts
    args:
      - https://www.owenyoung.com/en/blog/atom.xml
steps:
  - use: fetch
    args:
      - https://webmention.app/check?token=${{ctx.env.WEBMENTION_APP_TOKEN}}&url=${{encodeURIComponent(ctx.item.links[0].href)}}
      - method: GET
        headers:
          Content-Type: application/json
    run: |
      console.log(ctx.item.links[0].href);
      const json = await ctx.result.json();
      console.log(json);

Don’t forget to add enviroment variables WEBMENTION_APP_TOKEN to your denoflow workflow file(.github/workflows/denoflow.yml).

- run: deno run -A https://deno.land/x/denoflow/cli.ts run
  env:
    WEBMENTION_TOKEN: ${{secrets.WEBMENTION_TOKEN}}
    WEBMENTION_APP_TOKEN: ${{secrets.WEBMENTION_APP_TOKEN}}

Conclusion🔗

I really like the concept of IndieWeb and their API design philosophy, it took some time but I still think it was worth it. It gave me renewed confidence in the Internet.

You can find the all source code of this blog on Github

Resources🔗

Bird.gy - Bridgy connects your web site to social media. Likes, retweets, mentions, cross-posting
Indie Webring
Telegraph - Easily send Webmentions from your website
Webmention.app - Automate your outgoing webmentions
Webmention.io - Webmention.io is a hosted service created to easily receive webmentions on any web page.
Fediring
Webmentions on a static site with GitHub Actions

该博客没有评论系统，我正在实验有意义的讨论是否更易在社群中发生，不知道为什么，人在社群中，似乎会有更好的行为规范。然后如果有高质量的讨论，我会手动再精选到原文。为此，我建立了一个 Telegram 讨论群组，你可以在里面讨论这篇文章，点此复制文章标题和链接。