Now, I'm in IndieWeb?

2022-06-12T03:40:31+08:00

Since I saw the concept of IndieWeb</a> last year, I’ve been wanting to support it on my Zola blog</a>. 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</a> IndieWeb is a community of independent & personal websites connected by simple standards, based on the principles</a> of: owning your domain</a> & using it as your primary identity</a>, publishing on your own site (optionally syndicating elsewhere)</a>, and owning your data</a>. </blockquote>
1. Support IndieWeb Auth 🔗</a></h2>
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</a>. Learn more about why IndieAuth</a> and how to IndieAuth</a>, here’s how I enabled it:

By editing my index template file</a>, add this to the head:</li> </ol>
<link rel="me" href="https://twitter.com/TheOwenYoung" /> <link rel="me" href="https://github.com/theowenyoung" /> <link rel="me" href="mailto:owen@owenyoung.com" /> </code></pre>

Editing Twitter/GitHub profile bio, add my website URL https://www.owenyoung.com</code> </li>
Test it at https://indielogin.com/</a> </li> </ol> 2. Add Profile Info🔗</a></h2> When you sign in with IndieAuth or using web mention</a>, 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</a> here. Here’s how I added it: By editing my index template file</a>, add this in the aside</code> (Cause I don’t want this to affect the layout of my site, so use css display: none</code> 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> </code></pre> 3. Joining IndieWeb Webring</a>🔗</a></h2> 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. </blockquote> Now, IndieWeb has one IndieWeb Webring</a>! 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</a>, you can see I already have a profile</a> there. It’s easy to join the webring, just click the link</a>, and login with my domain www.owenyoung.com</code>, 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> </code></pre> Then, I add this code to my homepage aside</a>, you can see it on the aside footer</a> 4. Adding Webmention</a> Response to articles🔗</a></h2> Webmention</a> 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</a> </blockquote> Learn more about Webmention</a> and How to support webmention</a> Basically, I use Webmention.io</a> to collect all webmentions about this blog, and then I use Denoflow</a> to cache them to my blog repo</a>, and then I use Zola</a> load_data</code> function to load them, and render them. First, go webmention.io</a> and create a new account with my domain www.owenyoung.com</code>, then I can get my webmention endpoint, and I connected my twitter and github account to the service. </li> Second, let other services know your webmention endpoint. Add this to the head: </li> </ol> <link rel="webmention" href="https://webmention.io/www.owenyoung.com/webmention" /> </code></pre> Use Denoflow</a> to cache all webmentions to my blog repo</a></li> </ol> Workflow file(workflows/fetch-webmention.yml</code></a>): Fetch webmention API</a> to get updates, then save to webmentions</code> directory. </blockquote> 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); </code></pre> Github Workflow file(.github/workflows/denoflow.yml</code></a>): Run denoflow every day at midnight, if there are any new updates, it will create a new pull request. </blockquote> 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 </code></pre> Github auto merge workflow file(.github/workflows/auto-merge.yml</code></a>): When a pull request is created, the workflow will automatically merge it if the pull request is from the same author </blockquote> 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: "" </code></pre> Add response block to page tempalte</li> </ol> This part may take a while to finish, here is the main page template code</a>, I’ll only show the main part. Use Zola load_data function</a> 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) %} </code></pre> 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 %} </code></pre> 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> </code></pre> Optional: I also added an activity page for aggregating all response, the activity template page is here</a> </blockquote> Cause I don’t have too many mentions, so I use sebastiandedeyne’s</a> mention data as this article’s webmention data. </blockquote> 5. Send webmention when you publish a new article🔗</a></h2> When we publish a new article, we want to send a webmention to the mentioned links. We can do this by using Denoflow</a> and the Webmention.app</a> API. Webmention.app</a> can check all the mentioned links in the new article and send all webmentions to them. Before Webmention.app</a> can recognize the mentioned links, we need to add some extra microformats2</a> 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</a>, h-entry</a> and h-feed</a>. 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> </code></pre> I have updated page.html</a>, index.html</a>, taxonomy_single.html</a> and section.html</a> to support these new microformats. I have to say this is the most demanding job, good luck! Once finished, I went to indiewebify</a> to test if it can recognize my new microformats. It works! Next, I went to webmention.app</a> 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</code></a>): 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); </code></pre> Don’t forget to add enviroment variables WEBMENTION_APP_TOKEN</code> to your denoflow workflow file(.github/workflows/denoflow.yml</code>). - 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}} </code></pre> Conclusion🔗</a></h2> 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</a> Resources🔗</a></h2> Bird.gy</a> - Bridgy connects your web site to social media. Likes, retweets, mentions, cross-posting</li> Indie Webring</a></li> Telegraph</a> - Easily send Webmentions from your website</li> Webmention.app</a> - Automate your outgoing webmentions</li> Webmention.io</a> - Webmention.io is a hosted service created to easily receive webmentions on any web page.</li> Fediring</a></li> Webmentions on a static site with GitHub Actions</a></li> </ul>

Conclusion 🔗</a></h2>
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.</p>
You can find the all source code of this blog on Github</a></p>

Owen Young's Blog - IndieWeb

Now, I'm in IndieWeb?

Owen Young's Blog - IndieWeb

Now, I'm in IndieWeb?

Conclusion🔗</a></h2> 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.</p> You can find the all source code of this blog on Github</a></p>

Conclusion 🔗</a></h2>
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.</p>
You can find the all source code of this blog on Github</a></p>