diff --git a/README.md b/README.md index 44e5030..949e1e8 100644 --- a/README.md +++ b/README.md @@ -56,6 +56,7 @@ tabi has a perfect score on Google's Lighthouse audit: - [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. - [X] [Custom Twitter card](https://welpo.github.io/tabi/blog/mastering-tabi-settings/#social-media-cards) and automatic Open Graph tags. +- [X] Anonymous [like buttons](https://welpo.github.io/tabi/blog/mastering-tabi-settings/#iine) powered by [iine](https://iine.to). - [X] [KaTeX](https://katex.org/) support for mathematical notation. - [X] [Stylized and human readable Atom feed](https://welpo.github.io/tabi/atom.xml). - [X] [Stylized and human readable sitemap](https://welpo.github.io/tabi/sitemap.xml). diff --git a/config.toml b/config.toml index 4278538..fe19e02 100644 --- a/config.toml +++ b/config.toml @@ -166,6 +166,14 @@ show_date = true # "both" - Show both the original date and the last updated date. post_listing_date = "date" +# Enable iine like buttons on all posts: https://iine.to/ +# Can be set at page or section levels, following the hierarchy: page > section > config. See: https://welpo.github.io/tabi/blog/mastering-tabi-settings/#settings-hierarchy +iine = true +iine_icon = "thumbs_up" # See https://iine.to/#customise +# Unify like counts across all language versions of the same page. +# When enabled, likes on /es/blog/hello/ will count towards /blog/hello/ (default language). +iine_unified_languages = true + # Show "Jump to posts" link next to series' title. # By default, the link appears automatically when a series description exceeds 2000 characters. # Can be set at page or section levels, following the hierarchy: page > section > config. See: https://welpo.github.io/tabi/blog/mastering-tabi-settings/#settings-hierarchy diff --git a/content/blog/mastering-tabi-settings/index.ca.md b/content/blog/mastering-tabi-settings/index.ca.md index ca86971..f95aa33 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-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 | diff --git a/content/blog/mastering-tabi-settings/index.es.md b/content/blog/mastering-tabi-settings/index.es.md index 57b08d8..3a27ecb 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-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 | diff --git a/content/blog/mastering-tabi-settings/index.md b/content/blog/mastering-tabi-settings/index.md index 27c8d9d..aa89926 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-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 | diff --git a/content/blog/shortcodes/index.ca.md b/content/blog/shortcodes/index.ca.md index c94b9c9..880267b 100644 --- a/content/blog/shortcodes/index.ca.md +++ b/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 diff --git a/content/blog/shortcodes/index.es.md b/content/blog/shortcodes/index.es.md index 6fa148c..5efaf8c 100644 --- a/content/blog/shortcodes/index.es.md +++ b/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 diff --git a/content/blog/shortcodes/index.md b/content/blog/shortcodes/index.md index 98945d8..d40d3cd 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-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 diff --git a/content/projects/_index.md b/content/projects/_index.md index 0199074..e07ac64 100644 --- a/content/projects/_index.md +++ b/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' +++ diff --git a/content/projects/iine/iine_logo.webp b/content/projects/iine/iine_logo.webp new file mode 100644 index 0000000..f6681dd Binary files /dev/null and b/content/projects/iine/iine_logo.webp differ diff --git a/content/projects/iine/index.ca.md b/content/projects/iine/index.ca.md new file mode 100644 index 0000000..28b7f90 --- /dev/null +++ b/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 + +``` + +Afegeix el botó: + +```html + +``` + +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. diff --git a/content/projects/iine/index.es.md b/content/projects/iine/index.es.md new file mode 100644 index 0000000..5396832 --- /dev/null +++ b/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 + +``` + +Añade el botón: + +```html + +``` + +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. diff --git a/content/projects/iine/index.md b/content/projects/iine/index.md new file mode 100644 index 0000000..557310f --- /dev/null +++ b/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 + +``` + +Add the button: + +```html + +``` + +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. diff --git a/content/projects/iine/social_cards/projects_iine.jpg b/content/projects/iine/social_cards/projects_iine.jpg new file mode 100644 index 0000000..bdb1d9a Binary files /dev/null and b/content/projects/iine/social_cards/projects_iine.jpg differ diff --git a/content/projects/ramu/index.ca.md b/content/projects/ramu/index.ca.md index 561ff50..63ce50e 100644 --- a/content/projects/ramu/index.ca.md +++ b/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 = '🐏' +++ ラム é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…). diff --git a/content/projects/ramu/index.es.md b/content/projects/ramu/index.es.md index 2cbdbf1..9e0311e 100644 --- a/content/projects/ramu/index.es.md +++ b/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 = '🐏' +++ ラム 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…). diff --git a/content/projects/ramu/index.md b/content/projects/ramu/index.md index a55bec0..8016baf 100644 --- a/content/projects/ramu/index.md +++ b/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 = '🐏' +++ ラム 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…). diff --git a/content/projects/tabi/index.ca.md b/content/projects/tabi/index.ca.md index 8b921db..0293403 100644 --- a/content/projects/tabi/index.ca.md +++ b/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. diff --git a/content/projects/tabi/index.es.md b/content/projects/tabi/index.es.md index 8e7dbbb..d6725bb 100644 --- a/content/projects/tabi/index.es.md +++ b/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/). diff --git a/content/projects/tabi/index.md b/content/projects/tabi/index.md index e434f1a..1d13797 100644 --- a/content/projects/tabi/index.md +++ b/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. diff --git a/i18n/ar.toml b/i18n/ar.toml index 8480d96..9f4273a 100644 --- a/i18n/ar.toml +++ b/i18n/ar.toml @@ -83,6 +83,9 @@ load_comments = "إظهار التعليقات" copied = "تم النسخ!" copy_code_to_clipboard = "نسخ الشِفرة إلى الحافظة" +# iine appreciation button. +like_this_post = "أعجبني هذا المقال" + # Footer: Powered by Zola and tabi. powered_by = "مُشَغل بواسطة" and = "و" diff --git a/i18n/ca.toml b/i18n/ca.toml index ab20e2d..0191c24 100644 --- a/i18n/ca.toml +++ b/i18n/ca.toml @@ -68,6 +68,9 @@ load_comments = "Carregar comentaris" copied = "Copiat!" copy_code_to_clipboard = "Copia el codi al porta-retalls" +# iine appreciation button. +like_this_post = "M'agrada aquesta publicació" + # Footer: Powered by Zola and tabi. powered_by = "Propulsat per" and = "i" diff --git a/i18n/de.toml b/i18n/de.toml index 4adb6a2..7255f9d 100644 --- a/i18n/de.toml +++ b/i18n/de.toml @@ -72,6 +72,9 @@ load_comments = "Kommentare laden" copied = "Kopiert!" copy_code_to_clipboard = "Code in die Zwischenablage kopieren" +# iine appreciation button. +like_this_post = "Dieser Beitrag gefällt mir" + # Footer. powered_by = "Angetrieben von" and = "und" diff --git a/i18n/en.toml b/i18n/en.toml index 178ea93..4184298 100644 --- a/i18n/en.toml +++ b/i18n/en.toml @@ -68,6 +68,9 @@ load_comments = "Load comments" copied = "Copied!" copy_code_to_clipboard = "Copy code to clipboard" +# iine appreciation button. +like_this_post = "Like this post" + # Footer: Powered by Zola and tabi. powered_by = "Powered by" and = "&" diff --git a/i18n/es.toml b/i18n/es.toml index 5a28339..a39478b 100644 --- a/i18n/es.toml +++ b/i18n/es.toml @@ -68,6 +68,9 @@ load_comments = "Cargar comentarios" copied = "Copiado!" copy_code_to_clipboard = "Copiar código al portapapeles" +# iine appreciation button. +like_this_post = "Me gusta esta publicación" + # Footer: Powered by Zola and tabi. powered_by = "Impulsado por" and = "y" diff --git a/i18n/et.toml b/i18n/et.toml index 8af0467..7f71604 100644 --- a/i18n/et.toml +++ b/i18n/et.toml @@ -68,6 +68,9 @@ load_comments = "Lae kommentaarid" copied = "Kopeeritud!" copy_code_to_clipboard = "Kopeeri kood lõikelauale" +# iine appreciation button. +like_this_post = "Mulle meeldib see postitus" + # Footer: Powered by Zola and tabi. powered_by = "Toetab" and = "ja" diff --git a/i18n/fa.toml b/i18n/fa.toml index 5f2073f..b609409 100644 --- a/i18n/fa.toml +++ b/i18n/fa.toml @@ -69,6 +69,9 @@ load_comments = "بارگذاری نظرات" copied = "کپی شد!" copy_code_to_clipboard = "کپی کد به کلیپبورد" +# iine appreciation button. +like_this_post = "این مقاله را دوست دارم" + # Footer: Powered by Zola and tabi. powered_by = "قدرت گرفته از" and = "و" diff --git a/i18n/fi.toml b/i18n/fi.toml index 19dfb7e..bf820e9 100644 --- a/i18n/fi.toml +++ b/i18n/fi.toml @@ -72,6 +72,9 @@ load_comments = "Lataa kommentit" copied = "Kopioitu!" copy_code_to_clipboard = "Kopioi koodi leikepöydälle" +# iine appreciation button. +like_this_post = "Pidän tästä kirjoituksesta" + # Footer: Powered by Zola and tabi. powered_by = "Pyörii ohjelmilla" # "Works using the software" and = "&" diff --git a/i18n/fr.toml b/i18n/fr.toml index 62917a5..54c8666 100644 --- a/i18n/fr.toml +++ b/i18n/fr.toml @@ -68,6 +68,9 @@ load_comments = "Afficher les commentaires" copied = "Copié !" copy_code_to_clipboard = "Copier le code dans le presse-papier" +# iine appreciation button. +like_this_post = "J'aime cet article" + # Footer: Powered by Zola and tabi. powered_by = "Propulsé par" and = "et" diff --git a/i18n/hi.toml b/i18n/hi.toml index c144d43..2ac79ba 100644 --- a/i18n/hi.toml +++ b/i18n/hi.toml @@ -70,6 +70,9 @@ load_comments = "कमेंट्स लोड करें" copied = "कॉपी किया गया!" copy_code_to_clipboard = "कोड क्लिपबोर्ड में कॉपी करें" +# iine appreciation button. +like_this_post = "मुझे यह पोस्ट पसंद है" + # Footer: Powered by Zola and tabi. powered_by = "चालित द्वारा" and = "और" diff --git a/i18n/it.toml b/i18n/it.toml index be00d12..4b558c9 100644 --- a/i18n/it.toml +++ b/i18n/it.toml @@ -68,6 +68,9 @@ load_comments = "Carica commenti" copied = "Copiato!" copy_code_to_clipboard = "Copia codice negli appunti" +# iine appreciation button. +like_this_post = "Mi piace questo post" + # Footer: Powered by Zola and tabi. powered_by = "Alimentato da" and = "e" diff --git a/i18n/ja.toml b/i18n/ja.toml index 95c1361..c1a7533 100644 --- a/i18n/ja.toml +++ b/i18n/ja.toml @@ -72,6 +72,9 @@ load_comments = "コメントを読む" copied = "コピーしました!" copy_code_to_clipboard = "コードをクリップボードにコピー" +# iine appreciation button. +like_this_post = "いいね!" + # Footer: Powered by Zola and tabi. powered_by = "Powered by" and = "と" diff --git a/i18n/ko.toml b/i18n/ko.toml index 02e737c..f4e177e 100644 --- a/i18n/ko.toml +++ b/i18n/ko.toml @@ -72,6 +72,9 @@ load_comments = "댓글 불러오기" copied = "복사됨!" copy_code_to_clipboard = "코드를 클립보드에 복사" +# iine appreciation button. +like_this_post = "이 글이 좋아요" + # Footer: Powered by Zola and tabi. powered_by = "제공됨" and = "&" diff --git a/i18n/nl.toml b/i18n/nl.toml index 95bb1e2..a300339 100644 --- a/i18n/nl.toml +++ b/i18n/nl.toml @@ -68,6 +68,9 @@ load_comments = "Laad opmerkingen" copied = "Gekopieerd!" copy_code_to_clipboard = "Kopieer code naar klembord" +# iine appreciation button. +like_this_post = "Vind ik leuk" + # Footer: Powered by Zola and tabi. powered_by = "Aangedreven door" and = "&" diff --git a/i18n/or.toml b/i18n/or.toml index 4400c96..e431309 100644 --- a/i18n/or.toml +++ b/i18n/or.toml @@ -68,6 +68,9 @@ load_comments = "ମତାମତ ଲୋଡ କରନ୍ତୁ" copied = "କପି ହେଲା!" copy_code_to_clipboard = "କ୍ଲିପବୋର୍ଡକୁ କପି କରନ୍ତୁ" +# iine appreciation button. +like_this_post = "ମୋର ଏହି ପୋସ୍ଟ ଭଲ ଲାଗେ" + # Footer: Powered by Zola and tabi. powered_by = "ଚାଳିତ ଦ୍ୱାରା" and = "ଏବଂ" diff --git a/i18n/pt-PT.toml b/i18n/pt-PT.toml index 62b3867..fa79380 100644 --- a/i18n/pt-PT.toml +++ b/i18n/pt-PT.toml @@ -68,6 +68,9 @@ load_comments = "Carregar comentários" copied = "Copiado!" copy_code_to_clipboard = "Copiar código para a área de transferência" +# iine appreciation button. +like_this_post = "Gosto desta publicação" + # Footer: Powered by Zola and tabi. powered_by = "Impulsionado por" and = "e" diff --git a/i18n/ru.toml b/i18n/ru.toml index c8a0e44..16765e3 100644 --- a/i18n/ru.toml +++ b/i18n/ru.toml @@ -77,6 +77,9 @@ load_comments = "Загрузить комментарии" copied = "Скопировано!" copy_code_to_clipboard = "Скопировать код в буфер обмена" +# iine appreciation button. +like_this_post = "Мне нравится эта статья" + # Footer: Powered by Zola and tabi. powered_by = "Под управлением" and = "&" diff --git a/i18n/uk.toml b/i18n/uk.toml index 62f565d..d20cb8e 100644 --- a/i18n/uk.toml +++ b/i18n/uk.toml @@ -81,6 +81,9 @@ load_comments = "Завантажити коментарі" copied = "Скопійовано!" copy_code_to_clipboard = "Копіювати код у буфер обміну" +# iine appreciation button. +like_this_post = "Мені подобається ця стаття" + # Footer: Powered by Zola and tabi. powered_by = "Під управлінням" and = "та" diff --git a/i18n/zh-Hans.toml b/i18n/zh-Hans.toml index af6ba12..f4f181b 100644 --- a/i18n/zh-Hans.toml +++ b/i18n/zh-Hans.toml @@ -68,6 +68,9 @@ load_comments = "载入留言" copied = "已复制!" # Machine translated. copy_code_to_clipboard = "复制代码到剪贴板" # Machine translated. +# iine appreciation button. +like_this_post = "喜欢这篇文章" + # Footer: Powered by Zola and tabi. powered_by = "网站基于" and = "和" diff --git a/i18n/zh-Hant.toml b/i18n/zh-Hant.toml index dd887c2..29d6282 100644 --- a/i18n/zh-Hant.toml +++ b/i18n/zh-Hant.toml @@ -68,6 +68,9 @@ load_comments = "載入留言" copied = "已复制!" # Machine translated. copy_code_to_clipboard = "复制代码到剪贴板" # Machine translated. +# iine appreciation button. +like_this_post = "喜歡這篇文章" + # Footer: Powered by Zola and tabi. powered_by = "網站基於" and = "和" diff --git a/sass/main.scss b/sass/main.scss index 9888004..d1470ff 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -8,6 +8,7 @@ @use 'parts/_header-anchor.scss'; @use 'parts/_header.scss'; @use 'parts/_home-banner.scss'; +@use 'parts/_iine.scss'; @use 'parts/_image-hover.scss'; @use 'parts/_image-toggler.scss'; @use 'parts/_image.scss'; @@ -22,8 +23,8 @@ @use 'parts/_table.scss'; @use 'parts/_tags.scss'; @use 'parts/_theme-switch.scss'; -@use 'parts/_zola-error.scss'; @use 'parts/_webmention.scss'; +@use 'parts/_zola-error.scss'; @font-face { src: local('Inter'), diff --git a/sass/parts/_iine.scss b/sass/parts/_iine.scss new file mode 100644 index 0000000..9ac95c4 --- /dev/null +++ b/sass/parts/_iine.scss @@ -0,0 +1,37 @@ +.iine-button { + display: inline-flex; + align-items: center; + gap: 5px; + transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; + cursor: pointer; + border: none; + background: transparent; + color: inherit; + font-family: var(--sans-serif-font); + -webkit-tap-highlight-color: transparent; + appearance: none; + margin: 0; + padding: 0; + font-size: inherit; + line-height: inherit; + + .icon { + display: inline-flex; + align-items: center; + } + + .counter { + margin-left: .2rem; + font-size: 0.8rem; + } + + svg { + width: 1em; + height: 1em; + } +} + +.iine-auto-buttons { + margin-top: 2rem; + padding: 1rem 0; +} diff --git a/templates/page.html b/templates/page.html index 19c62bd..0dff1a7 100644 --- a/templates/page.html +++ b/templates/page.html @@ -57,6 +57,8 @@ Current section extra: {% if current_section %}{{ current_section.extra | json_e {% set settings_to_test = [ + "iine", + "iine_icon", "enable_cards_tag_filtering", "footnote_backlinks", "add_src_to_code_block", @@ -98,6 +100,7 @@ Current section extra: {% if current_section %}{{ current_section.extra | json_e #} + {# {{ __tera_context }} #} {# End debugging #} @@ -273,6 +276,11 @@ Current section extra: {% if current_section %}{{ current_section.extra | json_e {{ processed_content | replace(from="", to=macros_toc::toc(page=page, header=false, language_strings=language_strings)) | safe }} + {#- iine button -#} + {%- if macros_settings::evaluate_setting_priority(setting="iine", page=page, default_global_value=false) == "true" -%} + {% include "partials/iine_button.html" %} + {%- endif -%} + {% if macros_settings::evaluate_setting_priority(setting="show_previous_next_article_links", page=page, default_global_value=true) == "true" %} {%- if page.lower or page.higher -%} {% set next_label = macros_translate::translate(key="next", default="Next", language_strings=language_strings) %} diff --git a/templates/partials/content_security_policy.html b/templates/partials/content_security_policy.html index 8ac2d0d..71ca50a 100644 --- a/templates/partials/content_security_policy.html +++ b/templates/partials/content_security_policy.html @@ -7,6 +7,9 @@ content="default-src 'self' {%- set giscus_enabled = config.extra.giscus.enabled_for_all_posts or page.extra.giscus -%} {%- set hyvortalk_enabled = config.extra.hyvortalk.enabled_for_all_posts or page.extra.hyvortalk -%} {%- set isso_enabled = config.extra.isso.enabled_for_all_posts or page.extra.isso -%} + {%- if page -%} + {%- set iine_enabled = macros_settings::evaluate_setting_priority(setting="iine", page=page, default_global_value=false) == "true" -%} + {%- endif -%} {%- if page -%} {%- set mermaid_enabled = macros_settings::evaluate_setting_priority(setting="mermaid", page=page, default_global_value=false) == "true" -%} {%- endif -%} @@ -50,7 +53,7 @@ content="default-src 'self' {%- set script_src = script_src ~ " " ~ " utteranc.es" -%} {%- endif -%} - {%- if mermaid_enabled and not serve_local_mermaid -%} + {%- if (mermaid_enabled and not serve_local_mermaid) or iine_enabled -%} {%- set script_src = script_src ~ " " ~ " cdn.jsdelivr.net" -%} {%- endif -%} @@ -59,6 +62,11 @@ content="default-src 'self' {%- set connect_src = connect_src ~ " webmention.io" -%} {%- endif -%} + {#- Check if iine like buttons are enabled to allow the necessary domains -#} + {%- if iine_enabled -%} + {%- set connect_src = connect_src ~ " vhiweeypifbwacashxjz.supabase.co" -%} + {%- endif -%} + {#- Append WebSocket for Zola serve mode -#} {%- if config.mode == "serve" -%} {%- set connect_src = connect_src ~ " ws:" -%} diff --git a/templates/partials/extra_features.html b/templates/partials/extra_features.html index 2dec211..50c3337 100644 --- a/templates/partials/extra_features.html +++ b/templates/partials/extra_features.html @@ -81,3 +81,8 @@ {%- if macros_settings::evaluate_setting_priority(setting="footnote_backlinks", page=page_s, section=section_s, default_global_value=false) == "true" -%} {%- endif -%} + +{# Add iine.js for the like button #} +{%- if macros_settings::evaluate_setting_priority(setting="iine", page=page_s, section=section_s, default_global_value=false) == "true" -%} + +{%- endif -%} diff --git a/templates/partials/iine_button.html b/templates/partials/iine_button.html new file mode 100644 index 0000000..508fd3a --- /dev/null +++ b/templates/partials/iine_button.html @@ -0,0 +1,33 @@ +{% import "macros/settings.html" as macros_settings %} +{%- set button_icon = button_icon | default(value=macros_settings::evaluate_setting_priority(setting="iine_icon", page=page | default(value=""), section=section | default(value=""), default_global_value="heart")) -%} +{%- if config.extra.iine_unified_languages and lang != config.default_language -%} + {%- set unified_slug = page.path | replace(from='/' ~ lang ~ '/', to='/') -%} + {%- set slug = slug | default(value=unified_slug) -%} +{%- else -%} + {%- set slug = slug | default(value=page.path) -%} +{%- endif -%} +{%- if label -%} + {%- set final_label = label -%} +{%- elif language_strings -%} + {%- set final_label = macros_translate::translate(key="like_this_post", default="Like this post", language_strings=language_strings) -%} +{%- else -%} + {%- set final_label = "Like this post" -%} +{%- endif -%} + +{%- if button_icon == "heart" -%} + {%- set icon_display = "♥️" -%} +{%- elif button_icon == "thumbs_up" -%} + {%- set icon_display = "👍" -%} +{%- elif button_icon == "upvote" -%} + {%- set icon_display = "⬆️" -%} +{%- else -%} + {%- set icon_display = button_icon -%} +{%- endif -%} + +
diff --git a/templates/shortcodes/iine.html b/templates/shortcodes/iine.html new file mode 100644 index 0000000..d37211d --- /dev/null +++ b/templates/shortcodes/iine.html @@ -0,0 +1,5 @@ +{% set button_icon = icon | default(value="heart") %} +{% set label = label | default(value="Like this post") %} +{% set slug = slug | default(value=page.path) %} + +{% include "partials/iine_button.html" %} diff --git a/theme.toml b/theme.toml index 9761d73..99eff43 100644 --- a/theme.toml +++ b/theme.toml @@ -114,6 +114,14 @@ show_date = true # "both" - Show both the original date and the last updated date. post_listing_date = "date" +# Enable iine like buttons on all posts: https://iine.to/ +# Can be set at page or section levels, following the hierarchy: page > section > config. See: https://welpo.github.io/tabi/blog/mastering-tabi-settings/#settings-hierarchy +iine = false +iine_icon = "heart" # See https://iine.to/#customise +# Unify like counts across all language versions of the same page. +# When enabled, likes on /es/blog/hello/ will count towards /blog/hello/ (default language). +iine_unified_languages = true + # Show "Jump to posts" link next to series' title. # By default, the link appears automatically when a series description exceeds 2000 characters. # Can be set at page or section levels, following the hierarchy: page > section > config. See: https://welpo.github.io/tabi/blog/mastering-tabi-settings/#settings-hierarchy