diff --git a/README.md b/README.md index 387039e..c5f8318 100644 --- a/README.md +++ b/README.md @@ -51,6 +51,7 @@ tabi has a perfect score on Google's Lighthouse audit: - [X] Perfect Lighthouse score (Performance, Accessibility, Best Practices and SEO). - [X] [Comprehensive multi-language support](https://welpo.github.io/tabi/blog/faq-languages/#how-does-tabi-handle-multilingual-support). Add as many languages as you wish. - [X] Support for [comments using giscus, utterances, Hyvor Talk, or Isso](https://welpo.github.io/tabi/blog/comments/). +- [X] [Indieweb](https://indieweb.org/) ready with microformats, [hcard](https://welpo.github.io/tabi/blog/mastering-tabi-settings/#representative-h-card) and [webmentions](https://welpo.github.io/tabi/blog/mastering-tabi-settings/#webmentions) support. - [X] Code syntax highlighting with colours based on [Catppuccin](https://github.com/catppuccin/catppuccin) Frappé. - [X] [Mermaid support](https://welpo.github.io/tabi/blog/shortcodes/#mermaid-diagrams) to create diagrams and charts with text. - [X] [Local search](https://welpo.github.io/tabi/blog/mastering-tabi-settings/#search) with an accessible, multi-lingual interface. diff --git a/config.toml b/config.toml index cedb2f1..fbcb337 100644 --- a/config.toml +++ b/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" @@ -428,6 +428,48 @@ 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). +[extra.webmentions] +# To disable for a specific section or page, set webmentions = false in that page/section's front matter's [extra] section. +enable = false +# Specify the domain registered with webmention.io. +domain = "" + +# 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 = + +# 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 = 30 + +# 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" + # h-card configuration # Will identify you on the indieweb (see https://microformats.org/wiki/h-card) [extra.hcard] diff --git a/content/blog/javascript/index.ca.md b/content/blog/javascript/index.ca.md index 6b54200..d9e461f 100644 --- a/content/blog/javascript/index.ca.md +++ b/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] diff --git a/content/blog/javascript/index.es.md b/content/blog/javascript/index.es.md index 0e0c54a..36e550e 100644 --- a/content/blog/javascript/index.es.md +++ b/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] diff --git a/content/blog/javascript/index.md b/content/blog/javascript/index.md index c43844d..57864b0 100644 --- a/content/blog/javascript/index.md +++ b/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] diff --git a/content/blog/markdown/index.ca.md b/content/blog/markdown/index.ca.md index 4321803..16cf165 100644 --- a/content/blog/markdown/index.ca.md +++ b/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] diff --git a/content/blog/markdown/index.es.md b/content/blog/markdown/index.es.md index 754bb31..af38f47 100644 --- a/content/blog/markdown/index.es.md +++ b/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] diff --git a/content/blog/markdown/index.md b/content/blog/markdown/index.md index f036a3f..ca2f4cf 100644 --- a/content/blog/markdown/index.md +++ b/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] diff --git a/content/blog/mastering-tabi-settings/img/webmention_dark.webp b/content/blog/mastering-tabi-settings/img/webmention_dark.webp new file mode 100644 index 0000000..2d4290f Binary files /dev/null and b/content/blog/mastering-tabi-settings/img/webmention_dark.webp differ diff --git a/content/blog/mastering-tabi-settings/img/webmention_light.webp b/content/blog/mastering-tabi-settings/img/webmention_light.webp new file mode 100644 index 0000000..f555252 Binary files /dev/null and b/content/blog/mastering-tabi-settings/img/webmention_light.webp differ diff --git a/content/blog/mastering-tabi-settings/index.ca.md b/content/blog/mastering-tabi-settings/index.ca.md index 191453f..362ef2d 100644 --- a/content/blog/mastering-tabi-settings/index.ca.md +++ b/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-06-01 +updated = 2025-06-08 description = "Descobreix les múltiples maneres en què pots personalitzar tabi." [taxonomies] @@ -1009,6 +1009,31 @@ Per a més informació, consulta la [pàgina de documentació de CSP](@/blog/sec ## Indieweb +### Webmentions + +| Pàgina | Secció | `config.toml` | Segueix jerarquia | Requereix JavaScript | +|:------:|:------:|:-------------:|:-----------------:|:--------------------:| +| ❓ | ❓ | ✅ | ❓ | ✅ | + +Com es descriu en l'estàndard W3C recomanat, [Webmention](https://www.w3.org/TR/webmention/#abstract-p-1) és una manera senzilla de notificar qualsevol URL quan la menciones al teu lloc web. Des de la perspectiva del receptor, és una manera de sol·licitar notificacions quan altres llocs web la mencionen. + +Per a llocs web estàtics, [webmention.io](https://webmention.io/) allotja un punt final de webmention que es pot utilitzar per rebre webmentions. Aquesta funcionalitat recupera les webmentions emmagatzemades a webmention.io i les mostra per a una pàgina. Hauràs de configurar un compte per al teu lloc web a webmention.io. Quan habilitis la funcionalitat de webmention, anunciarà el teu punt final de webmention.io i mostrarà les webmentions per a qualsevol pàgina. + +Habilita les webmentions per al teu lloc web afegint el següent al teu fitxer `config.toml`. + +```toml +[extra.webmentions] +enable = true +# Especifica el domini registrat amb webmention.io. +domain = "www.example.com" +``` + +❓: Per desactivar les webmentions per a una secció o pàgina específica, estableix `webmentions = false` a la secció `[extra]` del front matter d'aquesta secció o pàgina. + +La secció de webmentions es veu així: + +{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/webmention_light.webp", dark_src="blog/mastering-tabi-settings/img/webmention_dark.webp" alt="Captura de pantalla de webmentions mostrant republications, m'agrada, marcadors i comentaris", full_width=true) }} + ### h-card representativa | Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript | diff --git a/content/blog/mastering-tabi-settings/index.es.md b/content/blog/mastering-tabi-settings/index.es.md index cdaabed..749095d 100644 --- a/content/blog/mastering-tabi-settings/index.es.md +++ b/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-06-01 +updated = 2025-06-08 description = "Descubre las múltiples maneras en que puedes personalizar tabi." [taxonomies] @@ -1010,6 +1010,31 @@ Para obtener más información, consulta la [página de documentación de CSP](@ ## Indieweb +### Webmentions + +| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript | +|:------:|:-------:|:-------------:|:---------------:|:-------------------:| +| ❓ | ❓ | ✅ | ❓ | ✅ | + +Como se describe en el estándar W3C recomendado, [Webmention](https://www.w3.org/TR/webmention/#abstract-p-1) es una manera sencilla de notificar cualquier URL cuando la mencionas en tu sitio web. Desde la perspectiva del receptor, es una forma de solicitar notificaciones cuando otros sitios web la mencionan. + +Para sitios web estáticos, [webmention.io](https://webmention.io/) aloja un punto final de webmention que se puede utilizar para recibir webmentions. Esta función recupera las webmentions almacenadas en webmention.io y las muestra para una página. Necesitarás configurar una cuenta para tu sitio web en webmention.io. Cuando habilites la función, anunciará tu punto final de webmention.io y mostrará las webmentions para cualquier página. + +Habilita las webmentions para tu sitio web agregando lo siguiente a tu archivo `config.toml`. + +```toml +[extra.webmentions] +enable = true +# Especifica el dominio registrado con webmention.io. +domain = "www.example.com" +``` + +❓: Para desactivar las webmentions para una sección o página específica, establece `webmentions = false` en la sección `[extra]` del front matter de esa sección o página. + +La sección de webmentions se ve así: + +{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/webmention_light.webp", dark_src="blog/mastering-tabi-settings/img/webmention_dark.webp" alt="Captura de pantalla de webmentions mostrando reposts, me gusta, marcadores y comentarios", full_width=true) }} + ### h-card representativa | Página | Sección | `config.toml` | Sigue Jerarquía | Requiere JavaScript | diff --git a/content/blog/mastering-tabi-settings/index.md b/content/blog/mastering-tabi-settings/index.md index 9415d9d..19d9584 100644 --- a/content/blog/mastering-tabi-settings/index.md +++ b/content/blog/mastering-tabi-settings/index.md @@ -1,7 +1,7 @@ +++ title = "Mastering tabi Settings: A Comprehensive Guide" date = 2023-09-18 -updated = 2025-06-01 +updated = 2025-06-08 description = "Discover the many ways you can customise your tabi site." [taxonomies] @@ -1020,6 +1020,31 @@ See the [CSP documentation page](@/blog/security/index.md) for more information. ## Indieweb +### Webmentions + +| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript | +|:----:|:-------:|:-------------:|:-----------------:|:-------------------:| +| ❓ | ❓ | ✅ | ❓ | ✅ | + +As described by the recommended W3C standard [Webmention](https://www.w3.org/TR/webmention/#abstract-p-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](https://webmention.io/) 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 all posts. + +Enable webmentions for your site by adding the following to your `config.toml` file. + +```toml +[extra.webmentions] +enable = true +# Specify the domain registered with webmention.io. +domain = "www.example.com" +``` + +❓: To disable webmentions for a specific section or page, set `webmentions = false` in the `[extra]` section of that section or page's front matter. + +The webmentions section looks like this: + +{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/webmention_light.webp", dark_src="blog/mastering-tabi-settings/img/webmention_dark.webp" alt="Webmentions screenshot showing reposts, likes, bookmarks, and comments", full_width=true) }} + ### Representative h-card | Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript | diff --git a/content/blog/security/index.ca.md b/content/blog/security/index.ca.md index 7979961..6d3ebfe 100644 --- a/content/blog/security/index.ca.md +++ b/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] diff --git a/content/blog/security/index.es.md b/content/blog/security/index.es.md index 068b429..0a6f663 100644 --- a/content/blog/security/index.es.md +++ b/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] diff --git a/content/blog/security/index.md b/content/blog/security/index.md index 548ab12..7765287 100644 --- a/content/blog/security/index.md +++ b/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] diff --git a/content/blog/series/index.ca.md b/content/blog/series/index.ca.md index bd840aa..adb3998 100644 --- a/content/blog/series/index.ca.md +++ b/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] diff --git a/content/blog/series/index.es.md b/content/blog/series/index.es.md index 7c2ac06..9c6d673 100644 --- a/content/blog/series/index.es.md +++ b/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] diff --git a/content/blog/series/index.md b/content/blog/series/index.md index 5678f42..b17ce42 100644 --- a/content/blog/series/index.md +++ b/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] diff --git a/content/blog/shortcodes/index.md b/content/blog/shortcodes/index.md index b13f191..98945d8 100644 --- a/content/blog/shortcodes/index.md +++ b/content/blog/shortcodes/index.md @@ -1,7 +1,7 @@ +++ title = "Custom shortcodes" date = 2023-02-19 -updated = 2025-02-15 +updated = 2025-05-18 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] @@ -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") }} @@ -264,7 +265,7 @@ Using the content body and setting the position to right: A longer note that can span multiple lines. -*Markdown* is supported. +_Markdown_ is supported. {%/* end */%} ``` @@ -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 @@ -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 diff --git a/content/projects/tabi/index.ar.md b/content/projects/tabi/index.ar.md index 6db50a7..02abea0 100644 --- a/content/projects/tabi/index.ar.md +++ b/content/projects/tabi/index.ar.md @@ -23,6 +23,7 @@ local_image = "projects/tabi/tabi.webp" - سمتان داكنة وفاتحة، مع التبديل التلقائي حسب إعدادات النظام - [دعم التعليقات](https://welpo.github.io/tabi/blog/comments/) باستخدام giscus أو utterances أو Hyvor Talk أو Isso - [دعم KaTeX](https://katex.org/) للمعادلات الرياضية +- [دعم Indieweb](https://indieweb.org/) مع microformats وh-card وwebmentions - [دعم Mermaid](https://welpo.github.io/tabi/blog/shortcodes/#mermaid-diagrams) لإنشاء المخططات - [بحث محلي](https://welpo.github.io/tabi/blog/mastering-tabi-settings/#search) متعدد اللغات - تصميم متجاوب يعمل على جميع الأجهزة diff --git a/content/projects/tabi/index.ca.md b/content/projects/tabi/index.ca.md index 64e0ea2..fd153ed 100644 --- a/content/projects/tabi/index.ca.md +++ b/content/projects/tabi/index.ca.md @@ -26,6 +26,7 @@ social_media_card = "social_cards/ca_projects_tabi.jpg" - [Suport multilingüe complet](https://welpo.github.io/tabi/ca/blog/faq-languages/#com-gestiona-tabi-el-suport-multilingue). Afegeix tants idiomes com vulguis i deixa que els teus usuaris triin amb el selector d'idioma. - [Suport per a sèries](https://welpo.github.io/tabi/ca/blog/series/) per crear contingut seqüencial com tutorials, cursos i històries multipart. - Puntuació perfecta en Lighthouse (Rendiment, Accessibilitat, Millors Pràctiques i SEO). +- Suport per a [Indieweb](https://indieweb.org/) amb microformats, suport per a [hcard](https://welpo.github.io/tabi/ca/blog/mastering-tabi-settings/#h-card-representativa) i [webmentions](https://welpo.github.io/tabi/blog/ca/mastering-tabi-settings/#webmentions). - Suport per a [diagrames de Mermaid](https://welpo.github.io/tabi/ca/blog/shortcodes/#diagrames-de-mermaid) per a crear diagrames i gràfics amb text. - Ressaltat de sintaxi de codi amb colors basats en [Catppuccin](https://github.com/catppuccin/catppuccin) Frappé. - Suport per a [comentaris usant giscus, utterances, Hyvor Talk o Isso](https://welpo.github.io/tabi/ca/blog/comments/). diff --git a/content/projects/tabi/index.es.md b/content/projects/tabi/index.es.md index da055e3..8e7dbbb 100644 --- a/content/projects/tabi/index.es.md +++ b/content/projects/tabi/index.es.md @@ -26,6 +26,7 @@ social_media_card = "social_cards/es_projects_tabi.jpg" - Tema claro y oscuro. Se adapta a la configuración del sistema operativo, con un interruptor en la barra de navegación. - [Soporte para series](https://welpo.github.io/tabi/es/blog/series/) para crear contenido secuencial como tutoriales, cursos e historias en varias partes. - Puntuación perfecta en Lighthouse (Rendimiento, Accesibilidad, Mejores Prácticas y SEO). +- Soporte para [Indieweb](https://indieweb.org/) con microformatos, soporte para [hcard](https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#h-card-representativa) y [webmentions](https://welpo.github.io/tabi/blog/mastering-tabi-settings/#webmentions). - Soporte para [diagramas de Mermaid](https://welpo.github.io/tabi/es/blog/shortcodes/#diagramas-de-mermaid) para crear diagramas y gráficos con texto. - Resaltado de sintaxis de código con colores basados en [Catppuccin](https://github.com/catppuccin/catppuccin) Frappé. - Soporte para [comentarios usando giscus, utterances, Hyvor Talk o Isso](https://welpo.github.io/tabi/es/blog/comments/). diff --git a/content/projects/tabi/index.md b/content/projects/tabi/index.md index cf9c60b..e434f1a 100644 --- a/content/projects/tabi/index.md +++ b/content/projects/tabi/index.md @@ -27,6 +27,7 @@ social_media_card = "social_cards/projects_tabi.jpg" - Perfect Lighthouse score (Performance, Accessibility, Best Practices and SEO). - [Comprehensive multi-language support](https://welpo.github.io/tabi/blog/faq-languages/#how-does-tabi-handle-multilingual-support). Add as many languages as you wish. - Support for [comments using giscus, utterances, Hyvor Talk, or Isso](https://welpo.github.io/tabi/blog/comments/). +- [Indieweb](https://indieweb.org/) ready with microformats, [hcard](https://welpo.github.io/tabi/blog/mastering-tabi-settings/#representative-h-card) and [webmentions](https://welpo.github.io/tabi/blog/mastering-tabi-settings/#webmentions) support. - Code syntax highlighting with colours based on [Catppuccin](https://github.com/catppuccin/catppuccin) Frappé. - [Mermaid support](https://welpo.github.io/tabi/blog/shortcodes/#mermaid-diagrams) to create diagrams and charts with text. - [Local search](https://welpo.github.io/tabi/blog/mastering-tabi-settings/#search) with an accessible, multi-lingual interface. diff --git a/sass/main.scss b/sass/main.scss index cb72361..9888004 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -23,6 +23,7 @@ @use 'parts/_tags.scss'; @use 'parts/_theme-switch.scss'; @use 'parts/_zola-error.scss'; +@use 'parts/_webmention.scss'; @font-face { src: local('Inter'), diff --git a/sass/parts/_webmention.scss b/sass/parts/_webmention.scss new file mode 100644 index 0000000..b6d6338 --- /dev/null +++ b/sass/parts/_webmention.scss @@ -0,0 +1,149 @@ +#webmentions { + position: relative; + z-index: 100; + margin: 0; + background-color: var(--background-color); + color: var(--text-color); + line-height: 1.2em; + + h2 { + margin-bottom: 1.5em; + font-size: 1.1em; + } + + h3 { + display: flex; + align-items: center; + font-size: 0.9em; + + svg { + margin-inline-end: 0.2rem; + } + + .svg-icon, + span { + margin-inline-end: .3rem; + } + } + + ol { + padding: 0; + } + + li, + p { + font-family: inherit; + } + + +.likes { + display: flex; + flex-wrap: wrap; + margin-top: 0.5rem; + padding: 0; + list-style: none; + + li { + position: relative; + transition: transform 0.8s ease-out, z-index 0s linear 0.4s; + margin-bottom: .375rem; + margin-inline-start: -.75rem; + + &:first-child { + margin-inline-start: 0; + } + + &:hover { + transform: scale(1.3) translateY(-4px); + z-index: 10; + transition: transform 0.05s ease-out, z-index 0s linear 0s; + } + + img { + display: block; + border: 2px solid var(--background-color, white); + border-radius: 50%; + aspect-ratio: 1/1; + width: 2.5rem; + height: 2.5rem; + object-fit: cover; + } + } + } + + .comment { + margin-bottom: 1rem; + border-radius: 10px; + background: var(--bg-0); + padding: 1rem; + overflow: hidden; + font-size: 80%; + + div { + display: flex; + flex-wrap: nowrap; + justify-content: space-between; + align-items: center; + } + + p { + margin-bottom: 0; + line-height: 1.5em; + } + + .p-author { + font-style: bold; + font-size: 1.3em; + } + + .u-url { + font-style: italic; + text-decoration: underline; + } + + .u-author { + display: flex; + align-items: center; + + img { + display: block; + margin-inline-end: .625rem; + width: 2rem; + max-width: 100%; + height: 2rem; + } + } + } + + form { + input { + flex: 1; + border: 1px solid var(--divider-color); + border-radius: 20px 0px 0px 20px; + background-color: var(--input-background-color); + padding-inline: 1rem 1rem; + padding-block: .75rem; + width: calc(60% - 2rem); + color: var(--text-color); + font-size: 1rem; + } + + button { + flex: 1; + border: 1px solid var(--divider-color); + border-radius: 0px 20px 20px 0px; + background-color: var(--input-background-color); + padding-inline: 0.7rem 0.7rem; + padding-block: .75rem; + width: 7rem; + color: var(--text-color); + font-size: 1rem; + } + + button:hover { + cursor: pointer; + background-color: var(--primary-color); + color: var(--hover-color); + } + } +} diff --git a/static/js/webmention.js b/static/js/webmention.js new file mode 100644 index 0000000..261b238 --- /dev/null +++ b/static/js/webmention.js @@ -0,0 +1,412 @@ +/* webmention.js + +Simple thing for embedding webmentions from webmention.io into a page, client-side. + +(c)2018-2022 fluffy (http://beesbuzz.biz) +2025 mmai (https://misc.rhumbs.fr) + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. + +Basic usage: + + + + + + +
diff --git a/theme.toml b/theme.toml index 3dcb701..55bcd79 100644 --- a/theme.toml +++ b/theme.toml @@ -376,6 +376,48 @@ custom_subset = 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). +[extra.webmentions] +# To disable for a specific section or page, set webmentions = false in that page/section's front matter's [extra] section. +enable = false +# Specify the domain registered with webmention.io. +# domain = "" + +# 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 = + +# 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 = 30 + +# 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" + # h-card configuration # Will identify you on the indieweb (see https://microformats.org/wiki/h-card) [extra.hcard]