✨ feat(indieweb): add hidden h-card

config.toml

@@ -427,3 +427,21 @@ avatar = true
 voting = true
 page_author_hashes = ""  # hash (or list of hashes) of the author.
 lazy_loading = true  # Loads when the comments are in the viewport (using the Intersection Observer API).
+
+# h-card configuration
+# will identify you on the indieweb (see https://microformats.org/wiki/h-card)
+[extra.hcard]
+# enable = true # Enables the h-card on the home page
+# with_mail = false        # Add your email to the card if extra.email is set and not encoded
+# with_social_links = true # Add your social links to the card
+# homepage = "https://myhomepage.net" # Homepage url, default to the value of 'base_url'
+# avatar = "img/profile.webp"
+# full_name = "John Doe" # Display name, default to the value of 'author'
+# biography = "Fond of the indieweb" # Small bio, as shown on social media profiles 
+#
+# You can add any property from https://microformats.org/wiki/h-card#Properties
+# Make sure to replace all '-' characters by '_'
+# Below are some examples
+# p_nickname = "nickname"
+# p_locality = "Bordeaux"
+# p_country_name = "France"

content/blog/mastering-tabi-settings/index.md

@@ -1,7 +1,7 @@
 +++
 title = "Mastering tabi Settings: A Comprehensive Guide"
 date = 2023-09-18
-updated = 2025-02-16
+updated = 2025-04-02
 description = "Discover the many ways you can customise your tabi site."
 
 [taxonomies]
@@ -1018,6 +1018,24 @@ See the [CSP documentation page](@/blog/security/index.md) for more information.
 
 ---
 
+## Indieweb
+
+### Representative h-card
+
+| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
+| :--: | :-----: | :-----------: | :---------------: | :-----------------: |
+|  ❌  |   ❌    |      ✅       |        ❌         |         ❌          |
+
+Tabi adds a representative [h-card](https://microformats.org/wiki/h-card) to the homepage out of the box. It is hidden to the naked eye, but remains visible by microformat parsers. You can check the validity of the card with the [Indiewebify.me](https://indiewebify.me/validate-h-card/) tool.
+
+It is possible to disable the h-card by setting `enable = false` in the `[extra.hcard]` section of the config file.
+
+The default h-card includes your name, website url and social media links.
+You can set a profile picture and a small bio with the `avatar` and `biography` settings.
+All other [h-card properties](https://microformats.org/wiki/h-card#Properties) can be added by listing them under the `[extra.hcard]`section of the config file. Simply replace all `-` characters by `_`.
+
+---
+
 [^1]: If you're using a remote Git repository, you might want to automate the process of updating the `updated` field. Here's a guide for that: [Zola Git Pre-Commit Hook: Updating Post Dates](https://osc.garden/blog/zola-date-git-hook/).
 
 [^2]: To encode your email in base64 you can use [online tools](https://www.base64encode.org/) or, on your terminal, run: `printf 'mail@example.com' | base64`.

templates/partials/hcard.html

@@ -0,0 +1,70 @@
+{%- set hcard = config.extra.hcard -%}
+
+{% set full_name = config.author %}
+{% if hcard.full_name %}
+  {% set full_name = hcard.full_name %}
+{% endif %}
+
+{%- set homepage = config.base_url -%}
+{% if hcard.homepage %}
+  {%- set homepage = hcard.homepage -%}
+{% endif %}
+
+{% if hcard.enable %}
+<div class="h-card hidden">
+  <div>
+    {%- if hcard.avatar -%}
+    <img
+      class="u-photo"
+      src="{{ get_url(path=hcard.avatar) }}"
+      width="200"
+      height="200"
+      alt="{{ full_name }}"
+    />
+    {%- endif -%}
+
+    <span class="p-name" rel="me">{{ full_name }}</span>
+
+    {% if hcard.p_nickname %}
+    ( <span class="p-nickname">{{ hcard.p_nickname }}</span> )
+    {% endif %}
+  </div>
+
+  {% if hcard.biography %}
+  <p class="p-note">{{ hcard.biography }}</p>
+  {% endif %}
+
+  {# links #}
+  <div>
+    {%- if hcard.with_mail and config.extra.email and not config.extra.encode_plaintext_email -%}
+    <span>
+      <a class="u-email" href="mailto:{{ config.extra.email | safe }}">email</a>
+    </span> -
+    {%- endif -%}
+
+    <span>
+      <a class="u-url u-id" href="{{ homepage }}">homepage</a>
+    </span> -
+
+    {%- if hcard.with_social_links and config.extra.socials %}
+      {% for social in config.extra.socials %}
+      <span>
+        <a class="p-url" rel="me" href="{{ social.url | safe }}">{{ social.name }}</a>
+      </span> -
+      {% endfor %}
+    {% endif %}
+  </div>
+
+  {# additional properties #}
+  <dl>
+  {% for key, value in hcard %}
+    {# exclude all properties previously displayed #}
+    {% if key not in ['enable', 'with_mail', 'with_social_links', 'homepage', 'full_name', 'avatar', 'biography', 'p_nickname'] %} 
+      <dt>{{ key | replace(from="p_", to="") | replace(from="u_", to="") | replace(from="dt_", to="") | replace(from="_", to=" ") | capitalize }}</dt>
+      <dd class="{{ key | replace(from="_", to="-") }}">{{ value }}</dd>
+    {% endif %}
+  {% endfor %}
+  </dl>
+
+</div>
+{% endif %}

templates/section.html

@@ -24,6 +24,9 @@
 {%- endif -%}
 
 <main {% if more_than_one_section_shown %}class="{{ first_section }}-first"{% endif %}>
+{%- if config.extra.hcard %}
+    {%- include "partials/hcard.html" -%}
+{% endif -%}
 {%- if section.extra.header %}
     {%- include "partials/home_banner.html" -%}
 {%- elif section.content -%}

theme.toml

@@ -375,3 +375,21 @@ custom_subset = true
 # voting = true
 # page_author_hashes = ""  # hash (or list of hashes) of the author.
 # lazy_loading = true  # Loads when the comments are in the viewport (using the Intersection Observer API).
+
+# h-card configuration
+# will identify you on the indieweb (see https://microformats.org/wiki/h-card)
+[extra.hcard]
+enable = true # Enables the h-card on the home page
+# with_mail = false # Add your email to the card if extra.email is set and not encoded
+with_social_links = true # Add your social links to the card
+# homepage = "https://myhomepage.net" # Homepage url, default to the value of 'base_url'
+# avatar = "img/profile.webp"
+# full_name = "John Doe" # Display name, default to the value of 'author'
+# biography = "Fond of the indieweb" # Small bio, as shown on social media profiles 
+#
+# You can add any property from https://microformats.org/wiki/h-card#Properties
+# Make sure to replace all '-' characters by '_'
+# Below are some examples
+# p_nickname = "nickname"
+# p_locality = "Bordeaux"
+# p_country_name = "France"