✨ feat(iine): add like buttons (#550)

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-16
+updated = 2025-08-01
 description = "Descobreix les múltiples maneres en què pots personalitzar tabi."
 
 [taxonomies]
@@ -780,6 +780,35 @@ Si has activat un sistema de forma global i vols desactivar-lo per a una pàgina
 
 Llegeix la [documentació](@/blog/comments/index.ca.md) per a més informació sobre els sistemes disponibles i la seva configuració.
 
+### Botons d'iine {#iine}
+
+| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
+|:------:|:------:|:-------------:|:--------------------:|:--------------------:|
+|   ✅   |   ✅   |      ✅       |          ✅          |         ❌          |
+
+tabi permet botons d'[iine](https://iine.to/) per mostrar apreciació anònima pel teu contingut. Aquests botons centrats en la privadesa funcionen sense JavaScript i no rastegen usuaris.
+
+Per activar els botons iine globalment:
+
+```toml
+[extra]
+iine = true
+```
+
+Pots personalitzar la icona usada als botons (segueix la jerarquia):
+
+```toml
+[extra]
+iine_icon = "thumbs_up"  # Opcions: "heart", "thumbs_up", "upvote", o qualsevol emoji
+```
+
+Per a llocs multilingües, pots unificar els recomptes de likes entre versions en diferents idiomes del mateix contingut (configuració només de config; valor per defecte és `true`):
+
+```toml
+[extra]
+iine_unified_languages = true  # Els likes a /ca/blog/hello/ compten cap a /blog/hello/
+```
+
 ### Anàlisi web
 
 | Pàgina | Secció  | `config.toml` | Segueix la jerarquia | Requereix JavaScript |

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-16
+updated = 2025-08-01
 description = "Descubre las múltiples maneras en que puedes personalizar tabi."
 
 [taxonomies]
@@ -781,6 +781,37 @@ Si has activado un sistema globalmente, pero quieres desactivarlo en una página
 
 Lee la [documentación](@/blog/comments/index.es.md) para obtener más información sobre los sistemas disponibles y su configuración.
 
+### Botones de iine {#iine}
+
+| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |
+|:------:|:-------:|:-------------:|:-------------------:|:-------------------:|
+|   ✅   |   ✅    |      ✅       |          ✅         |         ❌          |
+
+tabi soporta botones de [iine](https://iine.to/) para mostrar apreciación anónima por tu contenido. Estos botones centrados en la privacidad funcionan sin JavaScript y no rastrean usuarios.
+
+Para activar los botones iine globalmente:
+
+```toml
+[extra]
+iine = true
+```
+
+Puedes personalizar el icono usado en los botones (esta configuración sigue la jerarquía):
+
+```toml
+[extra]
+iine_icon = "thumbs_up"  # Opciones: "heart", "thumbs_up", "upvote", o cualquier emoji
+```
+
+Para sitios multilingües, puedes unificar los conteos de likes entre versiones en diferentes idiomas del mismo contenido (configuración solo de config; valor predeterminado: `true`):
+
+```toml
+[extra]
+iine_unified_languages = true  # Los likes en /es/blog/hello/ cuentan hacia /blog/hello/
+```
+
+También puedes activar los botones iine en páginas o secciones individuales estableciendo `iine = true` en su front matter, o personalizar el icono con `iine_icon = "🚀"`.
+
 ### Análisis web
 
 | Página | Sección  | `config.toml` | Sigue Jerarquía | Requiere JavaScript |

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-16
+updated = 2025-08-01
 description = "Discover the many ways you can customise your tabi site."
 
 [taxonomies]
@@ -789,6 +789,37 @@ 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.
 
+### iine Like Buttons {#iine}
+
+| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
+|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
+|  ✅  |   ✅    |      ✅       |         ✅        |         ❌          |
+
+tabi supports [iine](https://iine.to/) like buttons for anonymous appreciation of your content. These privacy-focused buttons work without JavaScript and don't track users.
+
+To enable iine buttons globally:
+
+```toml
+[extra]
+iine = true
+```
+
+You can customise the icon used for the buttons (follows the hierarchy):
+
+```toml
+[extra]
+iine_icon = "thumbs_up"  # Options: "heart", "thumbs_up", "upvote", or any emoji
+```
+
+For multilingual sites, you can unify like counts across language versions of the same content (config-only setting; true by default):
+
+```toml
+[extra]
+iine_unified_languages = true  # Likes on /es/blog/hello/ count towards /blog/hello/
+```
+
+You can also enable iine buttons on individual pages or sections by setting `iine = true` in their front matter, or override the icon with `iine_icon = "🚀"`.
+
 ### Analytics
 
 | Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |

content/blog/shortcodes/index.ca.md

@@ -1,7 +1,7 @@
 +++
 title = "Shortcodes personalitzats"
 date = 2023-02-19
-updated = 2025-02-15
+updated = 2025-08-01
 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]
@@ -187,6 +187,28 @@ Tots els altres shortcodes d'imatges poden utilizar l'amplada completa assignant
 {{/* full_width_image(src="img/amsterdam_by_oskerwyld.webp", alt="Fotografia d'un canal a Àmsterdam") */}}
 ```
 
+## Shortcodes socials
+
+### iine
+
+{{ aside(text="Per afegir-lo a totes les publicacions, estableix `iine = true` a la secció `[extra]` del teu `config.toml`.") }}
+
+Aquest shortcode et permet afegir botons addicionals d'[iine.to](https://iine.to) a les teves publicacions, com aquest:
+
+{{ iine(slug="/blog/shortcodes/demo-button") }}
+
+#### Ús
+
+```
+{{/* iine(icon="heart", slug="/post/el-meu-slug-de-post/like", label="M'agrada aquesta publicació") */}}
+```
+
+El shortcode accepta els següents paràmetres opcionals:
+
+- `icon`: La icona a mostrar. Pot ser `heart`, `thumbs_up`, `upvote`, o qualsevol emoji.
+- `slug`: Un identificador únic. Per defecte és la ruta de la pàgina actual. Útil si vols més d'un botó a la mateixa pàgina.
+- `label`: L'etiqueta d'accessibilitat per al botó. Per defecte és "M'agrada aquesta publicació".
+
 ## Shortcodes de codi
 
 ### Mostrar ruta o URL

content/blog/shortcodes/index.es.md

@@ -1,7 +1,7 @@
 +++
 title = "Shortcodes personalizados"
 date = 2023-02-19
-updated = 2025-02-15
+updated = 2025-08-01
 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]
@@ -186,6 +186,28 @@ Todos los otros shortcodes de imágenes pueden usar el ancho completo asignando
 {{/* full_width_image(src="img/amsterdam_by_oskerwyld.webp", alt="Fotografía de un canal en Ámsterdam") */}}
 ```
 
+## Shortcodes sociales
+
+### iine
+
+{{ aside(text="Para añadirlo a todas las publicaciones, establece `iine = true` en la sección `[extra]` de tu `config.toml`.") }}
+
+Este shortcode te permite añadir botones adicionales de [iine.to](https://iine.to) a tus publicaciones, como este:
+
+{{ iine(slug="/blog/shortcodes/demo-button") }}
+
+#### Uso
+
+```
+{{/* iine(icon="heart", slug="/post/mi-slug-de-post/like", label="Me gusta esta publicación") */}}
+```
+
+El shortcode acepta los siguientes parámetros opcionales:
+
+- `icon`: El icono a mostrar. Puede ser `heart`, `thumbs_up`, `upvote`, o cualquier emoji.
+- `slug`: Un identificador único. Por defecto es la ruta de la página actual. Útil si quieres más de un botón en la misma página.
+- `label`: La etiqueta de accesibilidad para el botón. Por defecto es "Me gusta esta publicación".
+
 ## Shortcodes de código
 
 ### Mostrar ruta o URL

content/blog/shortcodes/index.md

@@ -1,7 +1,7 @@
 +++
 title = "Custom shortcodes"
 date = 2023-02-19
-updated = 2025-05-18
+updated = 2025-07-26
 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]
@@ -188,6 +188,28 @@ All other image shortcodes can be made into full-width by setting the optional p
 {{/* full_width_image(src="img/amsterdam_by_oskerwyld.webp", alt="Photograph of a canal in Amsterdam") */}}
 ```
 
+## Engagement shortcodes
+
+### iine
+
+{{ aside(text="To add it to all posts, set `iine = true` in the `[extra]` section of your `config.toml`.") }}
+
+This shortcode allows you to add extra [iine.to](https://iine.to) buttons to your posts, like this:
+
+{{ iine(slug="/blog/shortcodes/demo-button") }}
+
+#### Usage
+
+```
+{{/* iine(icon="heart", slug="/post/my-post-slug/like", label="Like this post") */}}
+```
+
+The shortcode takes the following optional parameters:
+
+- `icon`: The icon to display. Can be `heart`, `thumbs_up`, `upvote`, or any emoji.
+- `slug`: A unique identifier. Defaults to the current page's path. Useful if you want more than one button on the same page.
+- `label`: The accessibility label for the button. Defaults to "Like this post".
+
 ## Code shortcodes
 
 ### Show source or path

content/projects/_index.md

@@ -8,4 +8,5 @@ insert_anchor_links = "left"
 social_media_card = "projects/projects.jpg"
 show_reading_time = false
 quick_navigation_buttons = true
+iine_icon = 'heart'
 +++

content/projects/iine/index.ca.md

@@ -0,0 +1,52 @@
++++
+title = "iine"
+description = "Botons d'apreciació centrats en la privadesa i accessibles per a la web petita/independent."
+weight = 15
+
+[taxonomies]
+tags = ["web", "JavaScript", "privadesa", "backend"]
+
+[extra]
+local_image = "projects/iine/iine_logo.webp"
+social_media_card = "social_cards/projects_iine.jpg"
+canonical_url = "https://osc.garden/projects/iine/"
++++
+
+Botons d'apreciació per al teu blog, jardí digital, portafoli… No cal compte. Sense seguiment.
+
+#### [GitHub](https://github.com/welpo/iine) • [Web](https://iine.to) {.centered-text}
+
+## Característiques
+
+- Sense marques de temps, sense IPs, sense seguiment
+- ~3KB de JavaScript vanilla
+- Funciona sense JavaScript
+- Diverses icones: cor, polze amunt, vot positiu, o qualsevol emoji
+- Construït per a la web petita/independent
+- Gratuït per sempre
+- Accessible per disseny
+- Auto-hostejable
+
+## Inici ràpid
+
+Afegeix botons d'apreciació al teu lloc amb dues línies. Carrega l'script:
+
+```html
+<script defer src="https://cdn.jsdelivr.net/gh/welpo/iine@main/iine.mini.js"></script>
+```
+
+Afegeix el botó:
+
+```html
+<button class="iine-button" aria-hidden="true"></button>
+```
+
+Fet. Els teus visitants ja poden mostrar apreciació anònima pel teu contingut.
+
+## Per què iine?
+
+Volia afegir botons de m'agrada/felicitacions/alegria/apreciació al [meu blog](https://osc.garden) sense registrar-me a res, i assegurant-me que els meus visitants no fossin rastrejats.
+
+Esperant que altres ho trobin útil, vaig fer el servei públic (codi obert) i gratuït per sempre (almenys fins que doni suport a més de 100k llocs web).
+
+Construït per a blogs, portafolis, jardins digitals, i qualsevol que cregui que la web hauria de ser més humana.

content/projects/iine/index.es.md

@@ -0,0 +1,52 @@
++++
+title = "iine"
+description = "Botones de apreciación centrados en la privacidad y accesibles para la web pequeña."
+weight = 15
+
+[taxonomies]
+tags = ["web", "JavaScript", "privacidad", "backend"]
+
+[extra]
+local_image = "projects/iine/iine_logo.webp"
+social_media_card = "social_cards/projects_iine.jpg"
+canonical_url = "https://osc.garden/projects/iine/"
++++
+
+Botones de apreciación para tu blog, jardín digital, portafolio… Sin cuenta requerida. Sin seguimiento.
+
+#### [GitHub](https://github.com/welpo/iine) • [Sitio web](https://iine.to) {.centered-text}
+
+## Características
+
+- Sin marcas de tiempo, sin IPs, sin seguimiento
+- ~3KB de JavaScript vanilla
+- Funciona sin JavaScript
+- Varios iconos: corazón, pulgar arriba, voto positivo, o cualquier emoji
+- Construido para la web pequeña/independiente
+- Gratis para siempre
+- Accesible por diseño
+- Auto-hosteable
+
+## Inicio rápido
+
+Añade botones de apreciación a tu sitio con dos líneas. Carga el script:
+
+```html
+<script defer src="https://cdn.jsdelivr.net/gh/welpo/iine@main/iine.mini.js"></script>
+```
+
+Añade el botón:
+
+```html
+<button class="iine-button" aria-hidden="true"></button>
+```
+
+Listo. Tus visitantes ya pueden mostrar apreciación anónima por tu contenido.
+
+## ¿Por qué iine?
+
+Quería añadir botones de me gusta/felicitaciones/alegría/apreciación a [mi blog](https://osc.garden) sin registrarme en nada, y asegurándome de que mis visitantes no fueran rastreados.
+
+Esperando que otros lo encuentren útil, hice el servicio público (código abierto) y gratis para siempre (al menos hasta que soporte más de 100k sitios web).
+
+Construido para blogs, portafolios, jardines digitales, y cualquiera que crea que la web debería ser más humana.

content/projects/iine/index.md

@@ -0,0 +1,52 @@
++++
+title = "iine"
+description = "Privacy-focused & accessible like buttons for the small web."
+weight = 15
+
+[taxonomies]
+tags = ["web", "JavaScript", "privacy", "backend"]
+
+[extra]
+local_image = "projects/iine/iine_logo.webp"
+social_media_card = "social_cards/projects_iine.jpg"
+canonical_url = "https://osc.garden/projects/iine/"
++++
+
+Appreciation buttons for your blog, digital garden, portfolio… No account required. No tracking.
+
+#### [GitHub](https://github.com/welpo/iine) • [Website](https://iine.to) {.centered-text}
+
+## Features
+
+- No timestamps, no IPs, no tracking
+- ~3KB of vanilla JavaScript
+- Works without JavaScript
+- Various icons: heart, thumbs up, upvote, or any emoji
+- Built for the small/indie web
+- Free forever
+- Accessible by design
+- Self-hostable
+
+## Quick start
+
+Add appreciation buttons to your site with two lines. Load the script:
+
+```html
+<script defer src="https://cdn.jsdelivr.net/gh/welpo/iine@main/iine.mini.js"></script>
+```
+
+Add the button:
+
+```html
+<button class="iine-button" aria-hidden="true"></button>
+```
+
+Done. Your visitors can now show anonymous appreciation for your content.
+
+## Why iine?
+
+I wanted to add like/kudos/cheers/appreciation buttons to [my blog](https://osc.garden) without signing up for anything, and making sure my visitors weren't tracked.
+
+Hoping others find it useful, I made the service public (open source) and free forever (at least until it supports over 100k websites).
+
+Built for blogs, portfolios, digital gardens, and anyone who believes the web should be more human.

content/projects/ramu/index.ca.md

@@ -10,6 +10,7 @@ tags = ["Japonès", "interactiu", "web app", "web", "PWA", "JavaScript"]
 local_image = "projects/ramu/ramu_logo.webp"
 canonical_url = "https://osc.garden/ca/projects/ramu/"
 social_media_card = "social_cards/projects_ramu.jpg"
+iine_icon = '🐏'
 +++
 
 <ruby>ラ<rt>ra</rt>ム<rt>mu</rt></ruby> és una aplicació web progressiva per practicar la lectura i comprensió auditiva de nombres en japonès. El nom reflecteix el seu propòsit: aconseguir accès aleatori (RAM; memòria d'accés aleatori) als nombres, en contraposició a una memòria seqüencial (1, 2, 3…).

content/projects/ramu/index.es.md

@@ -10,6 +10,7 @@ tags = ["Japonés", "interactivo", "web app", "web", "PWA", "JavaScript"]
 local_image = "projects/ramu/ramu_logo.webp"
 canonical_url = "https://osc.garden/es/projects/ramu/"
 social_media_card = "social_cards/projects_ramu.jpg"
+iine_icon = '🐏'
 +++
 
 <ruby>ラ<rt>ra</rt>ム<rt>mu</rt></ruby> es una aplicación web progresiva para practicar la lectura y comprensión auditiva de números en japonés. El nombre refleja su propósito: lograr acceso aleatorio (RAM; memoria de acceso aleatorio) a los números, en contraposición a una memoria secuencial (1, 2, 3…).

content/projects/ramu/index.md

@@ -10,6 +10,7 @@ tags = ["Japanese", "interactive", "web app", "web", "PWA", "JavaScript"]
 local_image = "projects/ramu/ramu_logo.webp"
 canonical_url = "https://osc.garden/projects/ramu/"
 social_media_card = "social_cards/projects_ramu.jpg"
+iine_icon = '🐏'
 +++
 
 <ruby>ラ<rt>ra</rt>ム<rt>mu</rt></ruby> is a Progressive Web App to practice reading and listening to Japanese numbers. The name reflects its purpose: achieving RAM (Random Access Memory) to numbers, as opposed to sequential memory (1, 2, 3…).

content/projects/tabi/index.ca.md

@@ -10,6 +10,7 @@ tags = ["web", "JavaScript"]
 local_image = "projects/tabi/tabi.webp"
 canonical_url = "https://osc.garden/ca/projects/tabi/"
 social_media_card = "social_cards/ca_projects_tabi.jpg"
+iine_icon = '🌱'
 +++
 
 [**tabi**](https://github.com/welpo/tabi) és un tema modern i ric en funcionalitat per a [Zola](https://www.getzola.org/), un generador de llocs web estàtics molt ràpid.
@@ -28,6 +29,7 @@ social_media_card = "social_cards/ca_projects_tabi.jpg"
 - 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/ca/blog/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.
+- Botons de «m'agrada» d'[iine](https://iine.to/) per mostrar apreciació anònima pel teu contingut.
 - 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/).
 - [Cerca local](https://welpo.github.io/tabi/ca/blog/mastering-tabi-settings/#cerca) amb una interfície accessible i multilingüe.

content/projects/tabi/index.es.md

@@ -10,6 +10,7 @@ tags = ["web", "JavaScript"]
 local_image = "projects/tabi/tabi.webp"
 canonical_url = "https://osc.garden/es/projects/tabi/"
 social_media_card = "social_cards/es_projects_tabi.jpg"
+iine_icon = '🌱'
 +++
 
 [**tabi**](https://github.com/welpo/tabi) es un tema moderno y rico en funcionalidad para [Zola](https://www.getzola.org/), un generador de sitios web estáticos muy rápido.
@@ -27,6 +28,7 @@ social_media_card = "social_cards/es_projects_tabi.jpg"
 - [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).
+- Botones de «me gusta» de [iine](https://iine.to/) para mostrar aprecio anónimo por tu contenido.
 - 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/).

content/projects/tabi/index.md

@@ -9,6 +9,7 @@ tags = ["web", "JavaScript"]
 [extra]
 local_image = "projects/tabi/tabi.webp"
 social_media_card = "social_cards/projects_tabi.jpg"
+iine_icon = '🌱'
 +++
 
 [**tabi**](https://github.com/welpo/tabi) is a modern, feature-rich theme for [Zola](https://www.getzola.org/), a fast static site generator.
@@ -29,6 +30,7 @@ social_media_card = "social_cards/projects_tabi.jpg"
 - 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é.
+- [iine like buttons](https://iine.to/) for anonymous appreciation of your content.
 - [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.
 - [Custom Twitter card](https://welpo.github.io/tabi/blog/mastering-tabi-settings/#social-media-cards) and automatic Open Graph tags.