✨ feat: add support for Isso comments

config.toml

@@ -224,3 +224,19 @@ page_id_is_slug = true  # If true, it will use the post's filename (slug) as id;
 lang = ""  # Leave blank to match the page's language.
 page_author = ""  # Email (or base64 encoded email) of the author.
 lazy_loading = true
+
+# Isso support for comments. https://isso-comments.de/
+# You need to self-host the backend first: https://blog.phusion.nl/2018/08/16/isso-simple-self-hosted-commenting-system/
+# More info on some settings: https://isso-comments.de/docs/reference/client-config/
+[extra.isso]
+enabled_for_all_posts = false  # Enables Isso on all posts. It can be enabled on individual posts by setting `isso = true` in the [extra] section of a post's front matter.
+automatic_loading = true  # If set to false, a "Load comments" button will be shown.
+endpoint_url = ""  # Accepts relative paths like "/comments/" or "/isso/", as well as full urls like "https://example.com/comments/". Include the trailing slash.
+page_id_is_slug = true  # If true, it will use the post's filename (slug) as id; this is the only way to share comments between languages. If false, it will use the entire url as id.
+lang = ""  # Leave blank to match the page's language.
+max_comments_top = "inf"  # Number of top level comments to show by default. If some comments are not shown, an “X Hidden” link is shown.
+max_comments_nested = "5"  # Number of nested comments to show by default. If some comments are not shown, an “X Hidden” link is shown.
+avatar = true
+voting = true
+page_author_hashes = ""  # hash (or list of hashes) of the author.
+lazy_loading = true  # Loads when the comments are in the viewport (using the Intersection Observer API).

content/blog/comments.ca.md

@@ -1,7 +1,7 @@
 +++
 title = "Afegeix comentaris a les teves publicacions amb giscus, utterances o Hyvor Talk"
 date = 2023-07-14
-updated = 2023-07-16
+updated = 2023-07-26
 description = "Descobreix com habilitar una secció de comentaris a les teves publicacions utilitzant giscus, utterances o Hyvor Talk, permetent la interacció i feedback dels lectors."
 
 [taxonomies]
@@ -10,9 +10,10 @@ tags = ["funcionalitat", "tutorial"]
 [extra]
 giscus = true
 quick_navigation_buttons = true
+toc = true
 +++
 
-tabi actualment suporta tres sistemes de comentaris: [giscus](https://giscus.app/ca) i [utterances](https://utteranc.es/) i [Hyvor Talk](https://talk.hyvor.com/).
+tabi actualment suporta quatre sistemes de comentaris: [giscus](https://giscus.app/ca) i [utterances](https://utteranc.es/), [Hyvor Talk](https://talk.hyvor.com/) i [Isso](https://isso-comments.de/).
 
 giscus i utterances són projectes de codi obert que et permeten afegir una secció de comentaris al teu lloc web utilitzant les «issues» (utterances) o «discussions» (giscus) de GitHub. Són perfectes per a generadors de llocs estàtics com Zola, ja que permeten als teus lectors interactuar i deixar comentaris a les teves publicacions sense requerir un backend tradicional o una base de dades.
 
@@ -28,6 +29,8 @@ Ambdues són excel·lents eines per afegir comentaris al teu blog, però giscus
 
 Hyvor Talk és una plataforma de comentaris de pagament centrada en la privadesa. Ofereix tots els avantatges del giscus i alguns més, com la moderació i la detecció de correu brossa.
 
+Isso és un sistema de comentaris de codi obert autoallotjat que emmagatzema els comentaris a la seva pròpia base de dades. Un dels seus principals avantatges és la privacitat; no comparteix les dades dels usuaris amb tercers. També té una interfície lleugera i neta, facilitant als teus visitants deixar comentaris. Isso també permet comentaris anònims, potencialment augmentant la participació dels usuaris a la teva pàgina web.
+
 ## Configuració
 
 ### Sistemes basats en GitHub
@@ -86,11 +89,30 @@ page_author = ""  # Correu (o correu codificat en base64) de l'autor.
 lazy_loading = true
 ```
 
+### Isso
+
+Per habilitar Isso, primer hauràs d'instal·lar i executar un servidor Isso ([aquí tens una guia útil](https://blog.phusion.nl/2018/08/16/isso-simple-self-hosted-commenting-system/#1installingisso)). Després, completa aquestes configuracions a `config.toml`:
+
+```toml
+[extra.isso]
+enabled_for_all_posts = false
+automatic_loading = true
+endpoint_url = "https://example.com/comments/"  # URL a Isso.
+page_id_is_slug = true
+lang = ""
+max_comments_top = "inf"
+max_comments_nested = "5"
+avatar = true
+voting = true
+page_author_hashes = ""
+lazy_loading = true
+```
+
 ### Configuracions comunes
 
 La opció `enabled_for_all_posts = true` habilita globalment el sistema de comentaris corresponent.
 
-Alternativament, pots habilitar els comentaris a publicacions concretes afegint el nom del sistema (`utterances`, `giscus` o `hyvortalk`) ` = true`. Per exemple, així és com habilitaries giscus:
+Alternativament, pots habilitar els comentaris a publicacions concretes afegint el nom del sistema (`utterances`, `giscus`, `hyvortalk` o `isso`) ` = true`. Per exemple, així és com habilitaries giscus:
 
 ```toml,hl_lines=09-10
 +++
@@ -108,7 +130,7 @@ giscus = true
 
 Si accidentalment habilites més d'un sistema, Zola mostrarà un error.
 
-Si el teu lloc web té múltiples idiomes amb publicacions coincidents (com aquesta demo), i t'agradaria compartir comentaris entre idiomes, has d'utilitzar `issue_term = "slug"` (per giscus y utterances) o `page_id_is_slug = true` (per Hyvor Talk). Això utilitzarà el nom de l'arxiu Markdown (sense l'etiqueta d'idioma) com a identificador. Totes les altres opcions crearan diferents seccions de comentaris per a cada idioma.
+Si el teu lloc web té múltiples idiomes amb publicacions coincidents (com aquesta demo), i t'agradaria compartir comentaris entre idiomes, has d'utilitzar `issue_term = "slug"` (per giscus y utterances) o `page_id_is_slug = true` (per Hyvor Talk o Isso). Això utilitzarà el nom de l'arxiu Markdown (sense l'etiqueta d'idioma) com a identificador. Totes les altres opcions crearan diferents seccions de comentaris per a cada idioma.
 
 ## Exemple en viu
 

content/blog/comments.es.md

@@ -1,7 +1,7 @@
 +++
 title = "Añade comentarios a tus publicaciones con giscus, utterances o Hyvor Talk"
 date = 2023-07-14
-updated = 2023-07-17
+updated = 2023-07-26
 description = "Descubre cómo habilitar una sección de comentarios en tus publicaciones usando giscus, utterances o Hyvor Talk, permitiendo la interacción y feedback de los lectores."
 
 [taxonomies]
@@ -10,9 +10,10 @@ tags = ["funcionalidad", "tutorial"]
 [extra]
 giscus = true
 quick_navigation_buttons = true
+toc = true
 +++
 
-tabi actualmente soporta tres sistemas de comentarios: [giscus](https://giscus.app/es) y [utterances](https://utteranc.es/) y [Hyvor Talk](https://talk.hyvor.com/).
+tabi actualmente soporta cuatro sistemas de comentarios: [giscus](https://giscus.app/es) y [utterances](https://utteranc.es/), [Hyvor Talk](https://talk.hyvor.com/) e [Isso](https://isso-comments.de/).
 
 giscus y utterances son proyectos de código abierto que te permiten añadir una sección de comentarios a tu sitio web usando las «issues» (utterances) o «discussions» (giscus) de GitHub. Son perfectos para generadores de sitios estáticos como Zola, ya que permiten a tus lectores interactuar y dejar comentarios en tus publicaciones sin requerir un backend tradicional ni una base de datos.
 
@@ -28,6 +29,8 @@ Ambas son excelentes herramientas para agregar comentarios a tu blog, pero giscu
 
 Hyvor Talk es una plataforma de comentarios de pago centrada en la privacidad. Ofrece todas las ventajas de giscus y algunas más, como moderación y detección de spam.
 
+Isso es un sistema de comentarios de código abierto y autoalojado que almacena los comentarios en su propia base de datos. Una de sus principales ventajas es la privacidad; no comparte los datos de los usuarios con terceros. También tiene una interfaz ligera y limpia, lo que facilita que tus visitantes dejen comentarios. Isso también permite comentarios anónimos, lo que podría aumentar la participación de los usuarios en tu sitio web.
+
 ## Configuración
 
 ### Sistemas basados en GitHub
@@ -87,11 +90,30 @@ page_author = ""  # Correo (o correo codificado en base64) del autor.
 lazy_loading = true
 ```
 
+### Isso
+
+Para habilitar Isso, primero necesitarás instalar y ejecutar un servidor Isso ([aquí tienes una guía útil](https://blog.phusion.nl/2018/08/16/isso-simple-self-hosted-commenting-system/#1installingisso)). Luego, completa estas configuraciones en `config.toml`:
+
+```toml
+[extra.isso]
+enabled_for_all_posts = false
+automatic_loading = true
+endpoint_url = "https://example.com/comments/"  # URL a Isso.
+page_id_is_slug = true
+lang = ""
+max_comments_top = "inf"
+max_comments_nested = "5"
+avatar = true
+voting = true
+page_author_hashes = ""
+lazy_loading = true
+```
+
 ### Ajustes comunes
 
 La opción `enabled_for_all_posts = true` habilitará globalmente el sistema de comentarios correspondiente.
 
-Alternativamente, puedes habilitar los comentarios en publicaciones concretas añadiendo el nombre del sistema (`utterances`, `giscus` o `hyvortalk`) `= true`. Por ejemplo, así habilitarías giscus:
+Alternativamente, puedes habilitar los comentarios en publicaciones concretas añadiendo el nombre del sistema (`utterances`, `giscus`, `hyvortalk` o `isso`) `= true`. Por ejemplo, así habilitarías giscus:
 
 ```toml,hl_lines=09-10
 +++
@@ -109,7 +131,7 @@ giscus = true
 
 Si accidentalmente habilitas más de un sistema, Zola mostrará un error.
 
-Si tu web tiene múltiples idiomas con publicaciones coincidentes (como esta demo), y te gustaría compartir comentarios entre idiomas, debes usar `issue_term = "slug"` (en el caso de giscus y utterances) o `page_id_is_slug = true` (para Hyvor Talk). Esto usará el nombre del archivo Markdown (sin la etiqueta de idioma) como identificador. Todas las demás opciones crearán diferentes secciones de comentarios para cada idioma.
+Si tu web tiene múltiples idiomas con publicaciones coincidentes (como esta demo), y te gustaría compartir comentarios entre idiomas, debes usar `issue_term = "slug"` (en el caso de giscus y utterances) o `page_id_is_slug = true` (para Hyvor Talk e Isso). Esto usará el nombre del archivo Markdown (sin la etiqueta de idioma) como identificador. Todas las demás opciones crearán diferentes secciones de comentarios para cada idioma.
 
 
 ## Ejemplo en vivo

content/blog/comments.md

@@ -1,7 +1,7 @@
 +++
 title = "Add comments to your posts with giscus, utterances or Hyvor Talk"
 date = 2023-07-14
-updated = 2023-07-17
+updated = 2023-07-26
 description = "Discover how to enable a comments section on your posts using giscus, utterances, or Hyvor Talk, enabling reader interaction and feedback."
 
 [taxonomies]
@@ -10,9 +10,10 @@ tags = ["showcase", "tutorial"]
 [extra]
 giscus = true
 quick_navigation_buttons = true
+toc = true
 +++
 
-tabi currently supports three comment systems: [giscus](https://giscus.app/), [utterances](https://utteranc.es/), and [Hyvor Talk](https://talk.hyvor.com/).
+tabi currently supports four comment systems: [giscus](https://giscus.app/), [utterances](https://utteranc.es/), [Hyvor Talk](https://talk.hyvor.com/), and [Isso](https://isso-comments.de/).
 
 giscus and utterances are open-source projects that let you add a comments section to your website using GitHub issues (utterances) or discussions (giscus). They are perfect for static site generators like Zola, since they enable your readers to interact and leave comments on your posts without requiring a traditional backend or database.
 
@@ -28,6 +29,8 @@ Both are great tools for adding comments to your blog, but giscus has a few adva
 
 Hyvor Talk is a paid privacy-focused commenting platform. It offers all of the giscus' advantages, and a few more, like moderation and spam detection.
 
+Isso is an open-source self-hosted commenting system that stores comments in its own database. One of its main advantages is privacy; it does not share user data with third parties. It also has a lightweight and clean interface, making it easy for your visitors to leave comments. Isso also allows anonymous comments, potentially increasing user engagement on your website.
+
 ## Setup
 
 ### GitHub based systems
@@ -87,11 +90,30 @@ page_author = ""  # Email (or base64 encoded email) of the author.
 lazy_loading = true
 ```
 
+### Isso
+
+To enable Isso, you'll first need to install and run an Isso server ([here's a useful guide](https://blog.phusion.nl/2018/08/16/isso-simple-self-hosted-commenting-system/#1installingisso)). Then, complete these settings in `config.toml`:
+
+```toml
+[extra.isso]
+enabled_for_all_posts = false
+automatic_loading = true
+endpoint_url = "https://example.com/comments/"  # URL to Isso host.
+page_id_is_slug = true
+lang = ""
+max_comments_top = "inf"
+max_comments_nested = "5"
+avatar = true
+voting = true
+page_author_hashes = ""
+lazy_loading = true
+```
+
 ### Common settings
 
 Setting `enabled_for_all_posts = true` for a comment system will enable it globally.
 
-Alternatively, enable comments on an individual post's front matter by adding the name of the system (i.e. `utterances`, `giscus` or `hyvortalk`) `= true`. For example, this is how you would enable giscus:
+Alternatively, enable comments on an individual post's front matter by adding the name of the system (`utterances`, `giscus`, `hyvortalk`, or `isso`) `= true`. For example, this is how you would enable giscus:
 
 ```toml,hl_lines=09-10
 +++
@@ -109,7 +131,7 @@ giscus = true
 
 If you accidentally enable more than one system, your site will fail to build with an error.
 
-If your site has multiple languages with matching posts (like this demo), and you'd like to share comments between languages, you must use `issue_term = "slug"` (for giscus and utterances) or `page_id_is_slug = true` (for Hyvor Talk). This will use the name of the Markdown file (sans the language tag) as the identifier. All other options will create different comment sections for each language.
+If your site has multiple languages with matching posts (like this demo), and you'd like to share comments between languages, you must use `issue_term = "slug"` (for giscus and utterances) or `page_id_is_slug = true` (for Hyvor Talk or Isso). This will use the name of the Markdown file (sans the language tag) as the identifier. All other options will create different comment sections for each language.
 
 ## Live example
 

sass/parts/_comments.scss

@@ -18,16 +18,15 @@
     }
 
     .load-comments-button {
-        display: inline-block;
+        display: block;
         font-family: var(--sans-serif-font);
         color: inherit;
         font-size: 0.95rem;
         background: none;
         border: none;
         padding: 0.5em 1em;
-        margin: 0.5em;
+        margin: 0.5em auto;
         cursor: pointer;
         text-decoration: none;
     }
-
 }