✨ feat(webmentions): add webmentions support templates

config.toml

@@ -28,7 +28,7 @@ include_content = true
 # At which character to truncate the content to. Useful if you have a lot of pages and the index would
 # become too big to load on the site. Defaults to not being set.
 # truncate_content_length = 100
-# Wether to produce the search index as a javascript file or as a JSON file.
+# Whether to produce the search index as a javascript file or as a JSON file.
 # Accepted value "elasticlunr_javascript" or "elasticlunr_json".
 index_format = "elasticlunr_json"
 
@@ -372,6 +372,47 @@ service = "goatcounter"
 # Leave this field empty if you're using the service's default hosting.
 self_hosted_url = "https://tabi-stats.osc.garden"
 
+[extra.webmentions]
+enabled = true
+# Specify the domain registered with webmention.io.
+domain = "www.example.com"
+
+# The HTML ID for the object to fill in with the webmention data.
+# Defaults to "webmentions"
+# id = "webmentions"
+
+# data configuration for the webmention.min.js script
+# The base URL to use for this page. Defaults to window.location
+page_url = "https://www.jrussell.ie/blog/update-and-release/10-update-and-release/"
+
+# Additional URLs to check, separated by |s
+# add_urls 
+
+# The maximum number of words to render in reply mentions.
+wordcount = 20
+
+# The maximum number of mentions to retrieve. Defaults to 30.
+# max_webmentions 
+
+# By default, Webmentions render using the mf2 'url' element, which plays
+# nicely with webmention bridges (such as brid.gy and telegraph)
+# but allows certain spoofing attacks. If you would like to prevent
+# spoofing, set this to a non-empty string (e.g. "true").
+# prevent_spoofing 
+
+# What to order the responses by; defaults to 'published'. See
+# https://github.com/aaronpk/webmention.io#api
+# sort_by 
+
+# The order to sort the responses by; defaults to 'up' (i.e. oldest
+# first). See https://github.com/aaronpk/webmention.io#api
+# sort_dir 
+
+# If set to a non-empty string (e.g. "true"), will display comment-type responses
+# (replies/mentions/etc.) as being part of the reactions
+# (favorites/bookmarks/etc.) instead of in a separate comment list.
+# comments_are_reactions = "true"
+
 # giscus support for comments. https://giscus.app
 # Setup instructions: https://welpo.github.io/tabi/blog/comments/#setup
 [extra.giscus]

content/blog/javascript/index.ca.md

@@ -1,7 +1,7 @@
 +++
 title = "Sense JavaScript obligatori"
 date = 2023-01-06
-updated = 2025-02-15
+updated = 2025-02-21
 description = "JavaScript només s'utilitza quan HTML i CSS no són suficients."
 
 [taxonomies]

content/blog/javascript/index.es.md

@@ -1,7 +1,7 @@
 +++
 title = "Sin JavaScript obligatorio"
 date = 2023-01-06
-updated = 2025-02-15
+updated = 2025-02-21
 description = "JavaScript solo se utiliza cuando HTML y CSS no son suficientes."
 
 [taxonomies]

content/blog/javascript/index.md

@@ -1,7 +1,7 @@
 +++
 title = "No mandatory JavaScript"
 date = 2023-01-06
-updated = 2025-02-15
+updated = 2025-02-21
 description = "JavaScript is only used when HTML and CSS aren't enough."
 
 [taxonomies]

content/blog/markdown/index.ca.md

@@ -1,7 +1,7 @@
 +++
 title = "Exemples de Markdown"
 date = 2023-01-31
-updated = 2024-11-23
+updated = 2025-02-21
 description = "Aquesta publicació mostra alguns exemples de format en Markdown, incloent-hi una taula, blocs de codi i etiquetes, citacions, taules i notes a peu de pàgina."
 
 [taxonomies]

content/blog/markdown/index.es.md

@@ -1,7 +1,7 @@
 +++
 title = "Ejemplos de Markdown"
 date = 2023-01-31
-updated = 2024-11-23
+updated = 2025-02-21
 description = "Esta publicación muestra algunos ejemplos de formato Markdown, incluyendo una tabla, bloques de código y etiquetas, citas, tablas y notas al pie de página."
 
 [taxonomies]

content/blog/markdown/index.md

@@ -1,7 +1,7 @@
 +++
 title = "Markdown examples"
 date = 2023-01-31
-updated = 2024-11-23
+updated = 2025-02-21
 description = "This post showcases some examples of Markdown formatting, including a table, code blocks and tags, quotes, tables, and footnotes."
 
 [taxonomies]

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

@@ -1,7 +1,7 @@
 +++
 title = "Domina la configuració de tabi: guia completa"
 date = 2023-09-18
-updated = 2025-02-16
+updated = 2025-02-21
 description = "Descobreix les múltiples maneres en què pots personalitzar tabi."
 
 [taxonomies]

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

@@ -1,7 +1,7 @@
 +++
 title = "Domina la configuración de tabi: guía completa"
 date = 2023-09-18
-updated = 2025-02-16
+updated = 2025-02-21
 description = "Descubre las múltiples maneras en que puedes personalizar tabi."
 
 [taxonomies]

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-02-21
 description = "Discover the many ways you can customise your tabi site."
 
 [taxonomies]
@@ -113,7 +113,7 @@ The description is regular Markdown content, set outside the front matter.
 
 #### Listing Recent Posts
 
-To show posts on your main page, you first need to decide where these posts will be served from: the root path (`/`) or a subdirectory (e.g., `/blog`). 
+To show posts on your main page, you first need to decide where these posts will be served from: the root path (`/`) or a subdirectory (e.g., `/blog`).
 
 **Option A: Serve posts from the root path (`/`)**
 
@@ -789,6 +789,34 @@ If you have enabled a system globally, but want to disable it on a specific page
 
 Read [the docs](@/blog/comments/index.md) for more information on the available systems and their setup.
 
+### Webmentions {#adding-webmentions}
+
+As described by the recommended W3C standard [Webmention][1] is a simple way to notify any URL when you mention it on your site. From the receiver's perspective, it's a way to request notifications when other sites mention it.
+
+For static sites [webmention.io][2] hosts a webmention endpoint that can be used to receive webmentions. This feature fetches the webmentions stored at webmention.io and displays them for a page. You will need to have setup an account for your website at webmention.io. When you enable the webmention feature it will advertise your webmention.io endpoint and display the webmentions for any post using the webmention shortcut.
+
+Enable webmentions for your site by adding the following to your `config.toml` file.
+
+```
+[extra.webmentions]
+enable = true
+# Specify the domain registered with webmention.io.
+domain = "www.example.com"
+```
+
+Add the shortcut on the page where you want to display the webmentions:
+
+```
+{{/* webmentions() */}}
+```
+
+The webmentions section will then be displayed where you added it on the page as follows:
+
+{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/webmention_light.webp", dark_src="blog/mastering-tabi-settings/img/webmention_dark.webp" alt="Page footer, showing a 'Site source' link") }}
+
+[1]: https://www.w3.org/TR/webmention/#abstract-p-1
+[2]: https://webmention.io/
+
 ### Analytics
 
 | Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |

content/blog/security/index.ca.md

@@ -1,7 +1,7 @@
 +++
 title = "Seguretat per defecte"
 date = 2023-02-22
-updated = 2024-08-28
+updated = 2025-02-21
 description = "tabi té una Política de Seguretat de Contingut (CSP) fàcilment personalitzable amb valors segurs per defecte. Obtingues tranquil·litat i un A+ en l'Observatori de Mozilla."
 
 [taxonomies]

content/blog/security/index.es.md

@@ -1,7 +1,7 @@
 +++
 title = "Seguro por defecto"
 date = 2023-02-22
-updated = 2024-08-28
+updated = 2025-02-21
 description = "tabi tiene una Política de Seguridad de Contenido (CSP) fácilmente personalizable con configuraciones seguras. Obtén tranquilidad y una calificación de A+ en Mozilla Observatory."
 
 [taxonomies]

content/blog/security/index.md

@@ -1,7 +1,7 @@
 +++
 title = "Secure by default"
 date = 2023-02-22
-updated = 2024-08-28
+updated = 2025-02-21
 description = "tabi has an easily customizable Content Security Policy (CSP) with safe defaults. Get peace of mind and an A+ on Mozilla Observatory."
 
 [taxonomies]

content/blog/series/index.ca.md

@@ -1,7 +1,7 @@
 +++
 title = "Guia completa sobre sèries"
 date = 2024-11-08
-updated = 2025-02-15
+updated = 2025-02-21
 description = "Aprèn a organitzar les teves publicacions en sèries seqüencials, perfectes per a tutorials, cursos i històries de diverses parts."
 
 [taxonomies]

content/blog/series/index.es.md

@@ -1,7 +1,7 @@
 +++
 title = "Guía completa sobre series"
 date = 2024-11-08
-updated = 2025-02-15
+updated = 2025-02-21
 description = "Aprende a organizar tus publicaciones en series secuenciales, perfectas para tutoriales, cursos e historias de varias partes."
 
 [taxonomies]

content/blog/series/index.md

@@ -1,7 +1,7 @@
 +++
 title = "A Complete Guide to Series"
 date = 2024-11-08
-updated = 2025-02-15
+updated = 2025-02-21
 description = "Learn how to organize your posts into sequential series, perfect for tutorials, courses, and multi-part stories."
 
 [taxonomies]

content/blog/shortcodes/index.ca.md

@@ -1,7 +1,7 @@
 +++
 title = "Shortcodes personalitzats"
 date = 2023-02-19
-updated = 2025-02-15
+updated = 2025-02-21
 description = "Aquest tema inclou alguns shortcodes personalitzats útils que pots utilitzar per millorar les teves publicacions. Ja sigui per mostrar imatges que s'adapten als temes clar i fosc, o per donar format a una secció de referències amb un aspecte professional, aquests shortcodes personalitzats t'ajudaran."
 
 [taxonomies]

content/blog/shortcodes/index.es.md

@@ -1,7 +1,7 @@
 +++
 title = "Shortcodes personalizados"
 date = 2023-02-19
-updated = 2025-02-15
+updated = 2025-02-21
 description = "Este tema incluye algunos shortcodes personalizados útiles que puedes utilizar para mejorar tus publicaciones. Puedes mostrar imágenes que se adapten a los temas claro y oscuro, dar formato a una sección de referencias con un aspecto profesional, y más."
 
 [taxonomies]

content/blog/shortcodes/index.md

@@ -1,7 +1,7 @@
 +++
 title = "Custom shortcodes"
 date = 2023-02-19
-updated = 2025-02-15
+updated = 2025-02-21
 description = "This theme includes some useful custom shortcodes that you can use to enhance your posts. Whether you want to display images that adapt to light and dark themes, or format a professional-looking reference section, these custom shortcodes have got you covered."
 
 [taxonomies]
@@ -79,9 +79,9 @@ classDiagram
         +MakeAssumptions()
     }
     CognitiveDistortions *-- AllOrNothingThinking
-    CognitiveDistortions *-- Overgeneralization
+    CognitiveDistortions*-- Overgeneralization
     CognitiveDistortions *-- MentalFilter
-    CognitiveDistortions *-- JumpingToConclusions
+    CognitiveDistortions*-- JumpingToConclusions
 {% end %}
 
 The Mermaid shortcode supports two parameters:
@@ -121,6 +121,7 @@ Useful if you want to use a different image for the light and dark themes:
 {{ dual_theme_image(light_src="img/paris_day.webp", dark_src="img/paris_night.webp" alt="The Eiffel tower") }}
 
 #### Usage
+
 ```
 {{/* dual_theme_image(light_src="img/paris_day.webp", dark_src="img/paris_night.webp" alt="The Eiffel tower") */}}
 ```
@@ -151,7 +152,7 @@ Images with too much brightness or contrast can be jarring against a dark backgr
 
 ### Swap image on hover
 
-Povides an interaction where the image displayed changes as the user hovers over it. Useful for before-after comparisons, for example.
+Provides an interaction where the image displayed changes as the user hovers over it. Useful for before-after comparisons, for example.
 
 {{ image_hover(default_src="img/edited.webp", hovered_src="img/raw.webp", default_alt="Edited picture", hovered_alt="Original shot") }}
 
@@ -312,19 +313,19 @@ Display lines 3 to 7 (both inclusive) of a local file:
 
 Bring attention to information with these admonition shortcodes. They come in five `type`s: `note`, `tip`, `info`, `warning`, and `danger`.
 
-{{ admonition(type="note", text="Some **content** with _Markdown_ `syntax`. Check [this `api`](#).") }}
+{{ admonition(type="note", text="Some **content** with *Markdown* `syntax`. Check [this `api`](#).") }}
 
-{{ admonition(type="tip", text="Some **content** with _Markdown_ `syntax`. Check [this `api`](#).") }}
+{{ admonition(type="tip", text="Some **content** with *Markdown* `syntax`. Check [this `api`](#).") }}
 
-{{ admonition(type="info", text="Some **content** with _Markdown_ `syntax`. Check [this `api`](#).") }}
+{{ admonition(type="info", text="Some **content** with *Markdown* `syntax`. Check [this `api`](#).") }}
 
-{{ admonition(type="warning", text="Some **content** with _Markdown_ `syntax`. Check [this `api`](#).") }}
+{{ admonition(type="warning", text="Some **content** with *Markdown* `syntax`. Check [this `api`](#).") }}
 
-{{ admonition(type="danger", text="Some **content** with _Markdown_ `syntax`. Check [this `api`](#).") }}
+{{ admonition(type="danger", text="Some **content** with *Markdown* `syntax`. Check [this `api`](#).") }}
 
 You can change the `title` and `icon` of the admonition. Both parameters take a string and default to the type of admonition. `icon` can be any of the available admonition types.
 
-{{ admonition(type="note", icon="tip", title="Custom title and icon", text="Some **content** with _Markdown_ `syntax`. Check [this `api`](#).") }}
+{{ admonition(type="note", icon="tip", title="Custom title and icon", text="Some **content** with *Markdown* `syntax`. Check [this `api`](#).") }}
 
 #### Usage
 
@@ -352,12 +353,12 @@ Both methods support the same parameters (`type`, `icon`, and `title`), with the
 
 This shortcode allows you to display both the translated and original text for a quote. The quotation marks will be added automatically:
 
-{{ multilingual_quote(original="Qué sosiego, ir por la vida en silencio, saludando sólo a los amigos.", translated="What tranquility, to go through life in silence, greeting only friends.", author="Francisco Umbral") }}
+{{ multilingual_quote(original="Qué sosiego, ir por la vida en silencio, saludando sólo a los amigos.", translated="What tranquillity, to go through life in silence, greeting only friends.", author="Francisco Umbral") }}
 
 #### Usage
 
 ```
-{{/* multilingual_quote(original="Qué sosiego, ir por la vida en silencio, saludando sólo a los amigos.", translated="What tranquility, to go through life in silence, greeting only friends.", author="Francisco Umbral") */}}
+{{/* multilingual_quote(original="Qué sosiego, ir por la vida en silencio, saludando sólo a los amigos.", translated="What tranquillity, to go through life in silence, greeting only friends.", author="Francisco Umbral") */}}
 ```
 
 ### References with hanging indent
@@ -414,7 +415,7 @@ Use this shortcode if you want to have a wider table, paragraph, code block… O
 
 | Title             |  Year | Director             | Cinematographer       | Genre         | IMDb  | Duration     |
 |-------------------|-------|----------------------|-----------------------|---------------|-------|--------------|
-| Beoning           | 2018  | Lee Chang-dong       | Hong Kyung-pyo        | Drama/Mystery | 7.5   | 148 min      |
+| Burning           | 2018  | Lee Chang-dong       | Hong Kyung-pyo        | Drama/Mystery | 7.5   | 148 min      |
 | The Master        | 2012  | Paul Thomas Anderson | Mihai Mălaimare Jr.   | Drama/History | 7.1   | 137 min      |
 | The Tree of Life  | 2011  | Terrence Malick      | Emmanuel Lubezki      | Drama         | 6.8   | 139 min      |
 
@@ -439,10 +440,12 @@ Force the text direction of a content block. Overrides both the global `force_co
 Accepts the parameter `direction`: the desired text direction. This can be either "ltr" (left-to-right) or "rtl" (right-to-left). Defaults to "ltr".
 
 {% force_text_direction(direction="rtl") %}
+
 ```python
 def مرحبا_بالعالم():
     print("مرحبا بالعالم!")
 ```
+
 {% end %}
 
 #### Usage
@@ -459,3 +462,37 @@ def مرحبا_بالعالم():
 
 {%/* end */%}
 ````
+
+## Displaying webmentions for your posts
+
+As described by the recommended W3C standard [Webmention][1] is a simple way to notify any URL when you mention it on your site. From the receiver's perspective, it's a way to request notifications when other sites mention it.
+
+For static sites [webmention.io][2] hosts a webmention endpoint that can be used to receive webmentions. This feature fetches the webmentions stored at webmention.io and displays them for a page. You will need to have setup an account for your website at webmention.io. When you enable the webmention feature it will advertise your webmention.io endpoint and display the webmentions for any post using the webmention shortcut.
+
+### Configuration and Usage
+
+Enable webmentions for your site, add the following to your `config.toml` file:
+
+```toml
+[extra.webmentions]
+enabled = true
+# Specify the domain registered with webmention.io.
+domain = "www.example.com"
+```
+
+Add the shortcut on the page where you want to display the webmentions:
+
+```
+{{/* webmentions() */}}
+```
+
+The webmentions section will then be displayed where you added it on the page as follows:
+
+{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/webmention_light.webp", dark_src="blog/mastering-tabi-settings/img/webmention_dark.webp" alt="Page footer, showing a 'Site source' link") }}
+
+The following is a live example based on the specific page_url configured in the template config.toml.
+
+{{ webmentions() }}
+
+[1]: https://www.w3.org/TR/webmention/#abstract-p-1
+[2]: https://webmention.io/