Indieweb compatability

[Nizzlay]

Summary and motivation

Indieweb is a movement focussed on a people-focused alternative to the “corporate web”. Which I think aligns with why most of us are using the Tabi theme (and Zola in general), we want our own little space on the internet.

Thus, I think it would be nice if we can create further compatibility with the indieweb standards. We're already doing pretty well with Mastodon, so we're some part of the way there.

This would mainly mean adding some tags to identify ourselves, and tags to our profiles to confirm it's us.

Info about the tags and such can be found here on their official website, or in a simple to follow step-by-step guide.

Implementation details

No response

Checklist

• I've searched existing issues to make sure this feature hasn't already been requested.
• This feature aligns with tabi's philosophy (minimal JS, accessible…)
• I'm willing to contribute to the implementation of this feature.

[Nizzlay]

Robb has a pretty good write-up on how he had implemented it: https://rknight.me/blog/adding-webmentions-to-your-site/.

[welpo]

I think aligns with why most of us are using the Tabi theme (and Zola in general), we want our own little space on the internet.

For sure!

Thanks for a great feature request issue.

I'm definitely open to taking PRs for these changes. It doesn't need to be all in one PR.

I've added a couple of tags to bring this to the attention of potential contributors :)

[Nizzlay]

I'll see what I can do with the microformats, but the webmentions and federation seem a bit beyond my skill level.

[jerusdp]

Hi,

I will fork and take a crack at the webmentions.

[welpo]

Awesome @jerusdp! Feel free to reach out if you there's anything I can help with!

[mmai]

Hello, I am very excited by the ongoing work on webmentions.

An other feature of the indieweb, listed at the level 2 of the indiewebify me tool, is to have a 'representative' h-card on the homepage. The element can be hidden and still be visible by the microformat parsers.

I have implemented it on my site with these modifications on the tabi theme, I can make a pull request if you are interested.

[welpo]

Hey @mmai!

This sounds interesting. Can I see the live version of this h-card on a tabi site anywhere?

Thanks!

[mmai]

Hi @welpo,

The hcard is enabled on https://misc.rhumbs.fr. It is hidden but you can check the validity of the card with https://indiewebify.me/validate-h-card/?url=https%3A%2F%2Fmisc.rhumbs.fr%2F.

I've also made a page where the div is not hidden so you can see what it looks like, I didn't put too much effort in the styling because I don't plan to display it.

[welpo]

@mmai interesting!

Since I saw some CSS, I assumed it'd be visible.

I'd definitely take a minimal PR for this, adding the invisible card. Ideally it'd have a short paragraph on Mastering tabi, explaining what the purpose of the h-card is, with a couple of links (similar to your comment above).

[Nizzlay]

@mmai I have pulled the latest Tabi version, and did the config, but when validating it says I don't have any h-card. Any idea what I did wrong?

[mmai]

Hi @Nizzlay This is a subtle problem. You did nothing wrong, I see the h-card in the source code of your website. But the reason https://indiewebify.me/validate-h-card doesn’t detect it is probably due to how your server handles HTTP compression and the fact that indiewebify.me uses an old web client library.

Basically, your server sends back a gzip-compressed response, even when the client doesn't ask for it. This confuses the IndieWebify validator — it expects plain HTML, but gets compressed binary content instead, and fails silently.

You can confirm this with:

curl https://nizzlay.com

You'll get a warning about binary output.
But with:

curl --compressed https://nizzlay.com

It works fine and shows the expected HTML with your h-card.

So the fix is on the server side: make sure that gzip compression is only used when the client sends Accept-Encoding: gzip

I tested by installing a local version of indiwebify.me and updating the library that makes the http calls, and this time your h-card is detected.