feat: change the theme and the content

content/blog/_index.ca.md

@@ -1,10 +0,0 @@
-+++
-paginate_by = 5
-title = "Blog"
-sort_by = "date"
-insert_anchor_links = "left"
-
-[extra]
-social_media_card = "ca_blog.jpg"
-show_previous_next_article_links = true
-+++

content/blog/_index.es.md

@@ -1,10 +0,0 @@
-+++
-paginate_by = 5
-title = "Blog"
-sort_by = "date"
-insert_anchor_links = "left"
-
-[extra]
-social_media_card = "es_blog.jpg"
-show_previous_next_article_links = true
-+++

content/blog/backup-mysql-databases-in-kubernetes/index.md

@@ -0,0 +1,130 @@
++++
+title = "Backup MySQL Databases in Kubernetes"
+date = 2021-03-03
+updated = 2021-03-03
+description = "In this post, we will show you how to create a MySQL server backup using Kubernetes CronJobs."
+
+[taxonomies]
+tags = ["docker", "kubernetes", "cronjob", "bash", "backup"]
+
+[extra]
+toc = false
+quick_navigation_buttons = true
++++
+In this post, we will show you how to create a MySQL server backup using Kubernetes CronJobs.
+
+In our case, we do not have a managed MySQL server. But we want to backup it to our NAS, so that we have a backup in case of emergency.
+For this we first build a container that can execute our tasks, because we will certainly need several tasks to backup our cluster.
+
+## CronJob Agent Container
+
+First, we'll show you our Dockerfile so you know what we need.
+
+```Dockerfile
+FROM alpine:3.10
+
+# Update
+RUN apk --update add --no-cache bash nodejs-current yarn curl busybox-extras vim rsync git mysql-client openssh-client
+RUN curl -LO https://storage.googleapis.com/kubernetes-release/release/v1.18.0/bin/linux/amd64/kubectl && chmod +x ./kubectl && mv ./kubectl /usr/local/bin/kubectl
+
+# Scripts
+RUN mkdir /srv/jobs
+COPY jobs/* /srv/jobs/
+
+# Backup Folder
+RUN mkdir /var/backup
+RUN mkdir /var/backup/mysql
+```
+
+## Backup Script
+
+And now our backup script which the container executes.
+
+Our script is quite simple, we get all tables with the mysql client, export them as sql file, pack them in a zip file and send them in a 8 hours interval to our NAS.
+
+```bash
+#!/bin/bash
+
+############# SET VARIABLES #############
+
+# Env Variables
+BACKUPSERVER="8.8.8.8" # Backup Server Ip
+BACKUPDIR=/var/backup/mysql
+BACKUPREMOTEDIR="/mnt/backup/kubernetes/"
+HOST="mariadb.default"
+NOW="$(date +"%Y-%m-%d")"
+STARTTIME=$(date +"%s")
+USER=mysqlUser
+PASS=mysqlPassword
+
+
+############# BUILD ENVIROMENT #############
+# Check if temp Backup Directory is empty
+mkdir $BACKUPDIR
+
+if [ "$(ls -A $BACKUPDIR)" ]; then
+    echo "Take action $BACKUPDIR is not Empty"
+    rm -f $BACKUPDIR/*.gz
+    rm -f $BACKUPDIR/*.mysql
+else
+    echo "$BACKUPDIR is Empty"
+fi
+
+############# BACKUP SQL DATABASES #############
+for DB in $(mysql -u$USER -p$PASS -h $HOST -e 'show databases' -s --skip-column-names); do
+    mysqldump -u$USER -p$PASS -h $HOST --lock-tables=false $DB > "$BACKUPDIR/$DB.sql";
+done
+
+############# ZIP BACKUP #############
+cd $BACKUPDIR
+tar -zcvf backup-${NOW}.tar.gz *.sql
+
+############# MOVE BACKUP TO REMOTE #############
+rsync -avz $BACKUPDIR/backup-${NOW}.tar.gz root@$BACKUPSERVER:$BACKUPREMOTEDIR
+
+# done
+```
+
+## Kubernetes CronJob Deployment
+
+Finally we show you the kubernetes deployment for our agent.
+
+In the deployment, our agent is defined as a CronJob that runs every 8 hours.
+In addition, we have added an SSH key as a Conifg map so that this can write to the NAS and a certain security is given.
+
+```yaml
+apiVersion: batch/v1beta1
+kind: CronJob
+metadata:
+  name: backup-mariadb
+  namespace: default
+spec:
+  schedule: "0 8 * * *"
+  successfulJobsHistoryLimit: 1
+  failedJobsHistoryLimit: 1
+  jobTemplate:
+    spec:
+      template:
+        spec:
+          containers:
+            - name: cronjob-agent
+              image: xxx/cronjob-agent
+              command: ["bash", "/srv/jobs/backup-mariadb.sh"]
+              volumeMounts:
+                - mountPath: /root/.ssh/id_rsa.pub
+                  name: cronjob-default-config
+                  subPath: id_rsa.pub
+                - mountPath: /root/.ssh/id_rsa
+                  name: cronjob-default-config
+                  subPath: id_rsa
+                  readOnly: true
+                - mountPath: /root/.ssh/config
+                  name: cronjob-default-config
+                  subPath: config
+          volumes:
+            - name: cronjob-default-config
+              configMap:
+                name: cronjob-default-config
+                defaultMode: 256
+          restartPolicy: Never
+```

content/blog/baremetal-cni-setup-with-cilium/index.md

@@ -0,0 +1,114 @@
++++
+title = "Baremetal CNI Setup with Cilium"
+date = 2022-01-21
+updated = 2022-01-21
+description = "In a freshly set up Kubernetes cluster, we need a so-called CNI. This CNI is not always present after installation."
+
+[taxonomies]
+tags = ["kubernetes", "cni", "baremetal"]
+
+[extra]
+toc = false
+quick_navigation_buttons = true
++++
+In a freshly set up Kubernetes cluster, we need a so-called CNI. This CNI is not always present after installation.
+
+## What is a Container Network Interface (CNI)?
+
+CNI is a network framework that allows the dynamic configuration of networking resources through a group of Go-written specifications and libraries. The specification mentioned for the plugin outlines an interface that would configure the network, provisioning the IP addresses, and mantain multi-host connectivity.
+
+In the Kubernetes context, the CNI seamlessly integrates with the kubelet to allow automatic network configuration between pods using an underlay or overlay network. An underlay network is defined at the physical level of the networking layer composed of routers and switches. In contrast, the overlay network uses a virtual interface like VxLAN to encapsulate the network traffic.
+
+Once the network configuration type is specified, the runtime defines a network for containers to join and calls the CNI plugin to add the interface into the container namespace and allocate the linked subnetwork and routes by making calls to IPAM (IP Address Management) plugin.
+
+In addition to Kubernetes networking, CNI also supports Kubernetes-based platforms like OpenShift to provide a unified container communication across the cluster through software-defined networking (SDN) approach.
+
+### What is Cilium?
+
+Cilium is an open-source, highly scalable Kubernetes CNI solution developed by Linux kernel developers. Cilium secures network connectivity between Kubernetes services by adding high-level application rules utilizing eBPF filtering technology. Cilium is deployed as a daemon `cilium-agent` on each node of the Kubernetes cluster to manage operations and translates the network definitions to eBPF programs.
+
+The communication between pods happens over an overlay network or utilizing a routing protocol. Both IPv4 and IPv6 addresses are supported for cases. Overlay network implementation utilizes VXLAN tunneling for packet encapsulation while native routing happens through unencapsulated BGP protocol.
+
+Cilium can be used with multiple Kubernetes clusters and can provide multi CNI features, a high level of inspection,pod-to-pod connectivity across all clusters.
+
+Its network and application layer awareness manages packet inspection, and the application protocol packets are using.
+
+Cilium also has support for Kubernetes Network Policies through HTTP request filters. The policy configuration can be written into a YAML or JSON file and offers both ingress and egress enforcements. Admins can accept or reject requests based on the request method or path header while integrating policies with service mesh like Istio.
+
+### Preparation
+
+For the installation we need the CLI from Cilium.
+We can install this with the following commands:
+
+**Mac OSx**
+
+```bash
+curl -L --remote-name-all https://github.com/cilium/cilium-cli/releases/latest/download/cilium-darwin-amd64.tar.gz{,.sha256sum}
+shasum -a 256 -c cilium-darwin-amd64.tar.gz.sha256sum
+sudo tar xzvfC cilium-darwin-amd64.tar.gz /usr/local/bin
+rm cilium-darwin-amd64.tar.gz{,.sha256sum}
+```
+
+**Linux**
+
+```bash
+curl -L --remote-name-all https://github.com/cilium/cilium-cli/releases/latest/download/cilium-linux-amd64.tar.gz{,.sha256sum}
+sha256sum --check cilium-linux-amd64.tar.gz.sha256sum
+sudo tar xzvfC cilium-linux-amd64.tar.gz /usr/local/bin
+rm cilium-linux-amd64.tar.gz{,.sha256sum}
+```
+
+### Install Cilium
+
+You can install Cilium on any Kubernetes cluster. These are the generic instructions on how to install Cilium into any Kubernetes cluster. The installer will attempt to automatically pick the best configuration options for you.
+
+#### Requirements
+
+- Kubernetes must be configured to use CNI
+- Linux kernel >= 4.9.17
+
+#### Install
+
+Install Cilium into the Kubernetes cluster pointed to by your current kubectl context:
+
+```bash
+cilium install
+```
+
+If the installation fails for some reason, run `cilium status` to retrieve the overall status of the Cilium deployment and inspect the logs of whatever pods are failing to be deployed.
+
+### Validate the Installation
+
+To validate that Cilium has been properly installed, you can run
+
+```bash
+$ cilium status --wait
+   /¯¯\
+/¯¯\__/¯¯\    Cilium:         OK
+\__/¯¯\__/    Operator:       OK
+/¯¯\__/¯¯\    Hubble:         disabled
+\__/¯¯\__/    ClusterMesh:    disabled
+   \__/
+
+DaemonSet         cilium             Desired: 2, Ready: 2/2, Available: 2/2
+Deployment        cilium-operator    Desired: 2, Ready: 2/2, Available: 2/2
+Containers:       cilium-operator    Running: 2
+                  cilium             Running: 2
+Image versions    cilium             quay.io/cilium/cilium:v1.9.5: 2
+                  cilium-operator    quay.io/cilium/operator-generic:v1.9.5: 2
+```
+
+Run the following command to validate that your cluster has proper network connectivity:
+
+```bash
+$ cilium connectivity test
+ℹ️  Monitor aggregation detected, will skip some flow validation steps
+✨ [k8s-cluster] Creating namespace for connectivity check...
+(...)
+---------------------------------------------------------------------------------------------------------------------
+📋 Test Report
+---------------------------------------------------------------------------------------------------------------------
+✅ 69/69 tests successful (0 warnings)
+```
+
+Congratulations! You have a fully functional Kubernetes cluster with Cilium. 🎉

content/blog/comments/index.ca.md

@@ -1,136 +0,0 @@
-+++
-title = "Afegeix comentaris a les teves publicacions amb aquestes 4 plataformes"
-date = 2023-07-14
-updated = 2023-07-26
-description = "Descobreix com habilitar una secció de comentaris a les teves publicacions utilitzant giscus, utterances, Hyvor Talk, o Isso, permetent la interacció i feedback dels lectors."
-
-[taxonomies]
-tags = ["funcionalitat", "tutorial"]
-
-[extra]
-giscus = true
-quick_navigation_buttons = true
-toc = true
-social_media_card = "social_cards/ca_blog_comments.jpg"
-+++
-
-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.
-
-Com que tots dos es basen en GitHub, giscus i utterances requereixen que els usuaris tinguin un compte a GitHub i autoritzin l'aplicació respectiva. Alternativament, els visitants també poden comentar directament en la discussió o «issue» corresponent a GitHub.
-
-Ambdues són excel·lents eines per afegir comentaris al teu blog, però giscus té alguns avantatges:
-- Més temes.
-- Suport per a reaccions.
-- Respostes a comentaris i vista de conversa.
-- Més segur: utterances requereix habilitar estils en línia no segurs («unsafe inline styles») per establir l'altura del frame; giscus no.
-- Suport multilingüe: utterances només està disponible en anglès; giscus suporta més de 20 idiomes.
-- Desenvolupament més actiu: l'últim commit de giscus, en el moment d'aquesta publicació, va ser fa dos dies. L'últim commit d'utterances es va fer fa més d'un any.
-
-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
-
-giscus y utterances requereixen una configuració similar. Primer, visita el lloc web del sistema que vulguis habilitar: [giscus.app](https://giscus.app/ca) o [utteranc.es](https://utteranc.es/).
-
-Segueix les instruccions de la secció **Configuració** del lloc web, i tria les opcions que prefereixis. Finalment, estableix els valors que es mostren a la secció **Habilitar giscus/utterances** (el bloc de codi `script`) en la secció corresponent del teu `config.toml`: `[extra.giscus]` o `[extra.utterances]`.
-
-#### giscus
-
-giscus té més opcions que utterances:
-
-```toml
-[extra.giscus]
-enabled_for_all_posts = false
-automatic_loading = true
-repo = "elTeuNomDUsuariDeGithub/elTeuRepositori"
-repo_id = "LaTevaIDdeRepositori"
-category = "Anuncis"
-category_id = "LaTevaIDdeCategoria"
-mapping = "slug"
-strict_title_matching = 1  # 1 per habilitar, 0 per deshabilitar.
-enable_reactions = 1  # 1 per habilitar, 0 per deshabilitar.
-comment_box_above_comments = true
-light_theme = "noborder_light"
-dark_theme = "noborder_dark"
-lang = ""  # Deixa en blanc perquè coincideixi amb l'idioma de la pàgina.
-lazy_loading = true
-```
-#### utterances
-
-```
-[extra.utterances]
-enabled_for_all_posts = false
-automatic_loading = true
-repo = "elTeuNomDUsuariDeGithub/elTeuRepositori"
-issue_term = "slug"
-label = "💬"
-light_theme = "github-light"
-dark_theme = "photon-dark"
-lazy_loading = true
-```
-
-### Hyvor Talk
-
-Configura el teu lloc web des de la [consola Hyvor Talk](https://talk.hyvor.com/console) i completa la configuració a `config.toml`:
-
-```toml
-[extra.hyvortalk]
-enabled_for_all_posts = false
-automatic_loading = true
-website_id = "1234"
-page_id_is_slug = true
-lang = ""
-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`, `hyvortalk` o `isso`) ` = true`. Per exemple, així és com habilitaries giscus:
-
-```toml,hl_lines=09-10
-title = "L'art de l'entremaliadura segons Shin-Chan
-date = 1990-02-14
-description = "Descobreix com les travessures poden canviar la teva perspectiva de vida."
-
-[taxonomies]
-tags = ["personal", "travessures"]
-
-[extra]
-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 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
-
-A continuació trobaràs el widget de giscus amb la configuració mostrada [a dalt](#giscus).

content/blog/comments/index.es.md

@@ -1,138 +0,0 @@
-+++
-title = "Añade comentarios a tus publicaciones con estas 4 plataformas"
-date = 2023-07-14
-updated = 2023-07-26
-description = "Descubre cómo habilitar una sección de comentarios en tus publicaciones usando giscus, utterances, Hyvor Talk, o Isso, permitiendo la interacción y feedback de los lectores."
-
-[taxonomies]
-tags = ["funcionalidad", "tutorial"]
-
-[extra]
-giscus = true
-quick_navigation_buttons = true
-toc = true
-social_media_card = "social_cards/es_blog_comments.jpg"
-+++
-
-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.
-
-Al estar basados en GitHub, giscus y utterances requieren que los usuarios tengan una cuenta en dicha plataforma y autoricen la respectiva aplicación. Alternativamente, los visitantes también pueden comentar directamente en la discusión o «issue» correspondiente de GitHub.
-
-Ambas son excelentes herramientas para agregar comentarios a tu blog, pero giscus tiene algunas ventajas:
-- Más temas.
-- Soporte para reacciones.
-- Respuestas a comentarios y vista de conversación.
-- Más seguro: utterances requiere habilitar estilos en línea inseguros («unsafe inline styles») para ajustar la altura del frame; giscus no.
-- Soporte multilingüe: utterances solo está disponible en inglés; giscus soporta más de 20 idiomas.
-- Desarrollo más activo: el último commit de giscus, a fecha de esta publicación, fue hace una dos días. El último commit de utterances fue hace más de un año.
-
-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
-
-giscus y utterances requieren una configuración similar. Primero, visita el sitio web del sistema que quieras habilitar: [giscus.app](https://giscus.app/es) o [utteranc.es](https://utteranc.es/).
-
-Sigue las instrucciones de la sección **Configuración** del sitio web, y elige las opciones que prefieras. Luego, establece los valores que se muestran en la sección **Habilitar giscus/utterances** (el bloque de código `script`) en la sección correspondiente de tu `config.toml`: `[extra.giscus]` o `[extra.utterances]`.
-
-#### giscus
-
-giscus tiene algunos ajustes más que utterances:
-
-```toml
-[extra.giscus]
-enabled_for_all_posts = false
-automatic_loading = true
-repo = "tuNombreDeUsuarioDeGithub/tuRepositorio"
-repo_id = "TuIDdeRepositorio"
-category = "Anuncios"
-category_id = "TuIDdeCategoría"
-mapping = "slug"
-strict_title_matching = 1  # 1 para habilitar, 0 para deshabilitar.
-enable_reactions = 1  # 1 para habilitar, 0 para deshabilitar.
-comment_box_above_comments = true
-light_theme = "noborder_light"
-dark_theme = "noborder_dark"
-lang = ""  # Deja en blanco para que coincida con el idioma de la página.
-lazy_loading = true
-```
-
-#### utterances
-
-```toml
-[extra.utterances]
-enabled_for_all_posts = false
-automatic_loading = true
-repo = "tuNombreDeUsuarioDeGithub/tuRepositorio"
-issue_term = "slug"
-label = "💬"
-light_theme = "github-light"
-dark_theme = "photon-dark"
-lazy_loading = true
-```
-
-### Hyvor Talk
-
-Configura tu web desde la [consola de Hyvor Talk](https://talk.hyvor.com/console) y rellena las opciones en `config.toml`:
-
-```toml
-[extra.hyvortalk]
-enabled_for_all_posts = false
-automatic_loading = true
-website_id = "1234"
-page_id_is_slug = true
-lang = ""
-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`, `hyvortalk` o `isso`) `= true`. Por ejemplo, así habilitarías giscus:
-
-```toml,hl_lines=09-10
-title = "Los molinos de viento de mi vida: reflexiones de un escudero"
-date = 1605-01-16
-description = "Mi viaje junto a Don Quijote, enfrentándome a gigantes imaginarios y descubriendo las verdaderas batallas de la vida."
-
-[taxonomies]
-tags = ["personal", "reflexiones"]
-
-[extra]
-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 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
-
-Al final de esta publicación encontrarás el widget de giscus usando los ajustes mostrados [arriba](#giscus).

content/blog/comments/index.md

@@ -1,137 +0,0 @@
-+++
-title = "Add comments to your posts with these 4 comment systems"
-date = 2023-07-14
-updated = 2023-07-26
-description = "Discover how to enable a comments section on your posts using giscus, utterances, Hyvor Talk, or Isso, enabling reader interaction and feedback."
-
-[taxonomies]
-tags = ["showcase", "tutorial"]
-
-[extra]
-giscus = true
-quick_navigation_buttons = true
-toc = true
-social_media_card = "social_cards/blog_comments.jpg"
-+++
-
-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.
-
-As they are based on GitHub, giscus and utterances require users to have a GitHub account and authorize the respective app. Alternatively, visitors can also comment directly on the corresponding GitHub discussion or issue.
-
-Both are great tools for adding comments to your blog, but giscus has a few advantages:
-- More themes.
-- Support for reactions.
-- Comment replies and conversation view.
-- Safer: utterances requires enabling unsafe inline styles to set the height of the frame; giscus doesn't.
-- Multilanguage support: utterances is only available in English; giscus supports over 20 languages.
-- More active development: giscus' last commit, as of this post, was a two days ago. utterances' last commit was over a year ago.
-
-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
-
-The configuration of both giscus and utterances is quite similar. First, visit the website of the system you want to enable: [giscus.app](https://giscus.app/) or [utteranc.es](https://utteranc.es/).
-
-Follow the instructions on the **Configuration** section of the website, and set it up it to your liking. Then, set the values shown on the **Enable giscus/utterances** section (the `script` codeblock) on the proper section of your `config.toml`: `[extra.giscus]` or `[extra.utterances]`.
-
-#### giscus
-
-giscus has a few more settings than utterances:
-
-```toml
-[extra.giscus]
-enabled_for_all_posts = false
-automatic_loading = true
-repo = "yourGithubUsername/yourRepo"
-repo_id = "YourRepoID"
-category = "Announcements"
-category_id = "YourCategoryID"
-mapping = "slug"
-strict_title_matching = 1  # 1 to enable, 0 to disable.
-enable_reactions = 1  # 1 to enable, 0 to disable.
-comment_box_above_comments = true
-light_theme = "noborder_light"
-dark_theme = "noborder_dark"
-lang = ""  # Leave blank to match the page's language.
-lazy_loading = true
-```
-
-#### utterances
-
-```toml
-[extra.utterances]
-enabled_for_all_posts = false
-automatic_loading = true
-repo = "yourgithubuser/yourrepo"
-issue_term = "slug"
-label = "💬"
-light_theme = "github-light"
-dark_theme = "photon-dark"
-lazy_loading = true
-```
-
-### Hyvor Talk
-
-Set up your website from the [Hyvor Talk console](https://talk.hyvor.com/console) and fill in the settings in `config.toml`:
-
-```toml
-[extra.hyvortalk]
-enabled_for_all_posts = false
-automatic_loading = true
-website_id = "1234"
-page_id_is_slug = true
-lang = ""
-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 (`utterances`, `giscus`, `hyvortalk`, or `isso`) `= true`. For example, this is how you would enable giscus:
-
-```toml,hl_lines=09-10
-title = "Bears, Beets, Battlestar Galactica: The Dwight Schrute Guide to Life"
-date = 2007-04-26
-description = "Lessons learned from beet farming and paper sales."
-
-[taxonomies]
-tags = ["personal", "beets"]
-
-[extra]
-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 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
-
-Below you'll find the giscus widget using the settings shown [above](#giscus).

content/blog/custom-font-subset/index.ca.md

@@ -1,193 +0,0 @@
-+++
-title = "Optimitza la càrrega amb un subconjunt de font personalitzat"
-date = 2023-04-29
-updated = 2023-07-08
-description = "Aprèn com crear un subconjunt personalitzat que només inclogui els glifs necessaris."
-
-[taxonomies]
-tags = ["funcionalitat", "tutorial"]
-
-[extra]
-social_media_card = "social_cards/ca_blog_custom_font_subset.jpg"
-+++
-
-## El problema
-
-Les fonts personalitzades causen parpelleig de text a Firefox. Per veure un gif i més detalls, mira [aquesta issue](https://github.com/welpo/tabi/issues/75).
-
-## La solució
-
-Per solucionar això, tabi carrega un subconjunt de glifs per a l'encapçalament. Donat que això augmenta lleugerament el temps de càrrega inicial, és una bona idea intentar minimitzar la mida d'aquest subconjunt.
-
-Per defecte, tabi inclou fitxers de subconjunts per a caràcters en anglès i espanyol (amb alguns símbols). Aquests fitxers es carreguen quan la pàgina o el lloc web de Zola està en aquest idioma.
-
-Per a una optimització addicional, pots crear un subconjunt de fonts personalitzat que només inclogui els caràcters utilitzats en el teu encapçalament.
-
-## Requisits
-
-Instal·la aquestes eines:
-
-- [fonttools](https://github.com/fonttools/fonttools)
-
-- [brotli](https://github.com/google/brotli)
-
-Executa `pip install fonttools brotli` per instal·lar totes dues.
-
-## L'script
-
-El següent script pren un fitxer `config.toml` i un fitxer de font com a entrada, extreu els caràcters necessaris, crea un subconjunt de la font i genera un fitxer CSS que conté el subconjunt codificat en base64.
-
-```bash
-#!/usr/bin/env bash
-
-usage() {
-    echo "Usage: $0 [--config | -c CONFIG_FILE] [--font | -f FONT_FILE] [--output | -o OUTPUT_PATH]"
-    echo
-    echo "Options:"
-    echo "  --config, -c   Path to the config.toml file."
-    echo "  --font, -f     Path to the font file."
-    echo "  --output, -o   Output path for the generated custom_subset.css file (default: current directory)"
-    echo "  --help, -h     Show this help message and exit"
-}
-
-# La sortida per defecte és el directori actual.
-output_path="."
-
-# Opcions de la línia de comandes.
-while [ "$#" -gt 0 ]; do
-    case "$1" in
-        --config|-c)
-            config_file="$2"
-            shift 2
-            ;;
-        --font|-f)
-            font_file="$2"
-            shift 2
-            ;;
-        --output|-o)
-            output_path="$2"
-            shift 2
-            ;;
-        --help|-h)
-            usage
-            exit 0
-            ;;
-        *)
-            echo "Unknown option: $1"
-            usage
-            exit 1
-            ;;
-    esac
-done
-
-# Comprova si s'han proporcionat les opcions -c i -f.
-if [ -z "$config_file" ]; then
-    echo "Error: --config|-c option is required."
-    usage
-    exit 1
-fi
-
-if [ -z "$font_file" ]; then
-    echo "Error: --font|-f option is required."
-    usage
-    exit 1
-fi
-
-# Comprova si els fitxers de configuració i de font existeixen.
-if [ ! -f "$config_file" ]; then
-    echo "Error: Config file '$config_file' not found."
-    exit 1
-fi
-
-if [ ! -f "$font_file" ]; then
-    echo "Error: Font file '$font_file' not found."
-    exit 1
-fi
-
-# Extreu el títol i els noms del menú del fitxer de configuració.
-title=$(awk -F' = ' '/^title/{print $2}' "$config_file" | tr -d '"')
-menu_names=$(awk -F' = ' '/^menu/{f=1;next} /socials/{f=0} f && /name/{print $2}' "$config_file" | cut -d',' -f1 | tr -d '"' )
-language_names=$(awk -F' = ' '/^language_name\./{print $2}' "$config_file" | tr -d '"' )
-
-# Si el lloc web és multilingüe, obté les traduccions del menú.
-if [ -n "$language_names" ]; then
-    for menu_name in $menu_names; do
-        # Find the line with the menu name inside a [languages.*.translations] section and get the translated menus.
-        menu_translation=$(awk -F' = ' "/\\[languages.*\\.translations\\]/{f=1;next} /^\\[/ {f=0} f && /$menu_name =/{print \$2}" "$config_file" | tr -d '"' )
-        # Add the found menu value to the translations string
-        menu_names+="$menu_translation"
-    done
-fi
-
-# Combina les cadenes extretes.
-combined="$title$menu_names$language_names"
-
-# Obté els caràcters únics.
-unique_chars=$(echo "$combined" | grep -o . | sort -u | tr -d '\n')
-
-# Crea un fitxer temporal per a subset.woff2.
-temp_subset=$(mktemp)
-
-# Crea el subconjunto.
-pyftsubset "$font_file" \
-    --text="$unique_chars" \
-    --layout-features="*" --flavor="woff2" --output-file="$temp_subset" --with-zopfli
-
-# Codifica en base64 el fitxer temporal subset.woff2 i crea el fitxer CSS.
-base64_encoded_font=$(base64 -i "$temp_subset")
-echo "@font-face{font-family:\"Inter Subset\";src:url(data:application/font-woff2;base64,$base64_encoded_font);}" > "$output_path/custom_subset.css"
-
-# Elimina el fitxer temporal subset.woff2.
-rm "$temp_subset"
-```
-
-## Ús
-
-Guarda l'script a algun lloc com `~/bin/subset_font`. Fes-lo executable amb `chmod +x ~/bin/subset_font`.
-
-Ara pots executar-lo amb les opcions requerides `--config` i `--font`:
-
-```bash
-~/bin/subset_font --config path/to/config.toml --font path/to/font.woff2
-```
-
-De forma predeterminada, això generarà un fitxer `custom_subset.css` al directori actual. Utilitza `-o` o `--output` per especificar una ruta diferent:
-
-```bash
-~/bin/subset_font -c path/to/config.toml -f path/to/font.woff2 -o path/to/output
-```
-
-Col·loca aquest fitxer `custom_subset.css` dins del directori `static/` del teu projecte de Zola.
-
-## Automatització amb un Pre-commit Hook
-
-És possible que canviïs el títol o les opcions del menú del teu lloc web, la qual cosa faria que el subconjunt personalitzat deixés de ser útil.
-
-Per automatitzar el procés de creació d'aquest fitxer, pots integrar l'script en un ganxo (hook) pre-commit de Git que s'activi en detectar canvis al fitxer `config.toml`, executi l'script i guardi el fitxer CSS resultant al directori `static/` del teu lloc web.
-
-1. Crea un fitxer `.git/hooks/pre-commit` al teu projecte de Git, si encara no existeix.
-
-2. Fes-lo executable amb `chmod +x .git/hooks/pre-commit`.
-
-3. Afegeix el següent codi al fitxer:
-
-```bash
-# Comprova si config.toml s'ha modificat.
-if git diff --cached --name-only | grep -q "config.toml"; then
-    echo "config.toml modified. Running subset_font…"
-
-    # Executa l'script subset_font.
-    ~/bin/subset_font -c config.toml -f static/fonts/Inter4.woff2 -o static/
-
-    # Afegeix el fitxer subset.css generat al commit.
-    git add static/custom_subset.css
-fi
-```
-
-Asegura't de modificar l'script perquè coincideixi amb la ruta on has guardat l'script `subset_font`. Les rutes de configuració i font haurien de funcionar correctament amb la configuració predeterminada de tabi.
-
-Ara, cada vegada que facis canvis al teu projecte de Git i facis commit, el ganxo pre-commit verificarà les modificacions al fitxer `config.toml` i executarà automàticament l'script `subset_font` per actualitzar el fitxer `custom_subset.css`.
-
-Per cert, si t'interessa una forma d'actualitzar automàticament la data de les teves publicacions a Zola o comprimir automàticament els teus fitxers PNG, fes un cop d'ull a [aquesta publicació](https://osc.garden/ca/blog/zola-date-git-hook/).
-
-Si desitges utilitzar tots els scripts alhora (compressió de fitxers PNG, actualització de la data i creació del subconjunt de fonts), combina el seu codi en un sol fitxer `.git/hooks/pre-commit`.

content/blog/custom-font-subset/index.es.md

@@ -1,194 +0,0 @@
-+++
-title = "Optimiza la carga con un subconjunto de fuente personalizado"
-date = 2023-04-29
-updated = 2023-07-08
-description = "Aprende cómo crear un subconjunto personalizado que solo incluya los glifos necesarios."
-
-[taxonomies]
-tags = ["funcionalidad", "tutorial"]
-
-[extra]
-social_media_card = "social_cards/es_blog_custom_font_subset.jpg"
-+++
-
-## El problema
-
-Las fuentes personalizadas causan parpadeo de texto en Firefox. Para ver un gif y más detalles, mira [esta issue](https://github.com/welpo/tabi/issues/75).
-
-## La solución
-
-Para solucionar esto, tabi carga un subconjunto de glifos para el encabezado. Dado que esto aumenta ligeramente el tiempo de carga inicial, es una buena idea tratar de minimizar el tamaño de este subconjunto.
-
-Por defecto, tabi incluye archivos de subconjuntos para caracteres en inglés y español (con algunos símbolos). Estos archivos se cargan cuando la página o el sitio de Zola está en ese idioma.
-
-Para una optimización adicional, puedes crear un subconjunto de fuentes personalizado que solo incluya los caracteres utilizados en tu encabezado.
-
-## Requisitos
-
-Instala estas herramientas:
-
-- [fonttools](https://github.com/fonttools/fonttools)
-
-- [brotli](https://github.com/google/brotli)
-
-Ejecuta `pip install fonttools brotli` para instalar ambas.
-
-## El script
-
-El script que sigue toma un archivo `config.toml` y un archivo de fuente como entrada, extrae los caracteres necesarios, crea un subconjunto de la fuente y genera un archivo CSS que contiene el subconjunto codificado en base64.
-
-```bash
-#!/usr/bin/env bash
-
-usage() {
-    echo "Usage: $0 [--config | -c CONFIG_FILE] [--font | -f FONT_FILE] [--output | -o OUTPUT_PATH]"
-    echo
-    echo "Options:"
-    echo "  --config, -c   Path to the config.toml file."
-    echo "  --font, -f     Path to the font file."
-    echo "  --output, -o   Output path for the generated custom_subset.css file (default: current directory)"
-    echo "  --help, -h     Show this help message and exit"
-}
-
-# La salida predeterminada es el directorio actual.
-output_path="."
-
-# Analiza las opciones de la línea de comandos.
-while [ "$#" -gt 0 ]; do
-    case "$1" in
-        --config|-c)
-            config_file="$2"
-            shift 2
-            ;;
-        --font|-f)
-            font_file="$2"
-            shift 2
-            ;;
-        --output|-o)
-            output_path="$2"
-            shift 2
-            ;;
-        --help|-h)
-            usage
-            exit 0
-            ;;
-        *)
-            echo "Unknown option: $1"
-            usage
-            exit 1
-            ;;
-    esac
-done
-
-# Comprueba si se proporcionan las opciones -c y -f.
-if [ -z "$config_file" ]; then
-    echo "Error: --config|-c option is required."
-    usage
-    exit 1
-fi
-
-if [ -z "$font_file" ]; then
-    echo "Error: --font|-f option is required."
-    usage
-    exit 1
-fi
-
-# Comprueba si existen los archivos de configuración y de fuentes.
-if [ ! -f "$config_file" ]; then
-    echo "Error: Config file '$config_file' not found."
-    exit 1
-fi
-
-if [ ! -f "$font_file" ]; then
-    echo "Error: Font file '$font_file' not found."
-    exit 1
-fi
-
-# Extrae el título y los nombres de los menús del archivo de configuración.
-title=$(awk -F' = ' '/^title/{print $2}' "$config_file" | tr -d '"')
-menu_names=$(awk -F' = ' '/^menu/{f=1;next} /socials/{f=0} f && /name/{print $2}' "$config_file" | cut -d',' -f1 | tr -d '"' )
-language_names=$(awk -F' = ' '/^language_name\./{print $2}' "$config_file" | tr -d '"' )
-
-# Si el sitio es multilingüe, obtiene las traducciones de los menús.
-if [ -n "$language_names" ]; then
-    for menu_name in $menu_names; do
-        # Find the line with the menu name inside a [languages.*.translations] section and get the translated menus.
-        menu_translation=$(awk -F' = ' "/\\[languages.*\\.translations\\]/{f=1;next} /^\\[/ {f=0} f && /$menu_name =/{print \$2}" "$config_file" | tr -d '"' )
-        # Add the found menu value to the translations string
-        menu_names+="$menu_translation"
-    done
-fi
-
-# Combina las cadenas extraídas.
-combined="$title$menu_names$language_names"
-
-# Obtiene los caracteres únicos.
-unique_chars=$(echo "$combined" | grep -o . | sort -u | tr -d '\n')
-
-# Crea un archivo temporal para subset.woff2.
-temp_subset=$(mktemp)
-
-# Crea el subconjunto.
-pyftsubset "$font_file" \
-    --text="$unique_chars" \
-    --layout-features="*" --flavor="woff2" --output-file="$temp_subset" --with-zopfli
-
-# Codifica en Base64 el archivo temporal subset.woff2 y crea el archivo CSS.
-base64_encoded_font=$(base64 -i "$temp_subset")
-echo "@font-face{font-family:\"Inter Subset\";src:url(data:application/font-woff2;base64,$base64_encoded_font);}" > "$output_path/custom_subset.css"
-
-# Elimina el archivo temporal subset.woff2.
-rm "$temp_subset"
-```
-
-## Uso
-
-Guarda el script en algún lugar como `~/bin/subset_font`. Hazlo ejecutable con `chmod +x ~/bin/subset_font`.
-
-Ahora puedes ejecutarlo con las opciones requeridas `--config` y `--font`:
-
-```bash
-~/bin/subset_font --config path/to/config.toml --font path/to/font.woff2
-```
-
-De forma predeterminada, esto generará un archivo `custom_subset.css` en el directorio actual. Usa `-o` o `--output` para especificar una ruta diferente:
-
-```bash
-~/bin/subset_font -c path/to/config.toml -f path/to/font.woff2 -o path/to/output
-```
-
-Coloca este archivo `custom_subset.css` dentro del directorio `static/`.
-
-
-## Automatización con un Pre-commit Hook
-
-Es posible que cambies el título o las opciones del menú de tu sitio, lo que haría que el subconjunto personalizado deje de ser útil.
-
-Para automatizar el proceso de creación de este archivo, puedes integrar el script en un gancho (hook) pre-commit de Git que se active al detectar cambios en el archivo `config.toml`, ejecute el script y guarde el archivo CSS resultante en el directorio `static/` de tu sitio.
-
-1. Crea un archivo `.git/hooks/pre-commit` en tu proyecto de Git, si aún no existe.
-
-2. Hazlo ejecutable con `chmod +x .git/hooks/pre-commit`.
-
-3. Agrega el siguiente código al archivo:
-
-```bash
-# Comprueba si config.toml se ha modificado.
-if git diff --cached --name-only | grep -q "config.toml"; then
-    echo "config.toml modified. Running subset_font…"
-
-    # Ejecuta el script subset_font.
-    ~/bin/subset_font -c config.toml -f static/fonts/Inter4.woff2 -o static/
-
-    # Añadie el subset.css recién generado al commit.
-    git add static/custom_subset.css
-fi
-```
-
-Asegúrate de modificar el script para que coincida con la ruta donde has guardado el script `subset_font`. Las rutas de configuración y fuente deberían funcionar correctamente con la configuración predeterminada de tabi.
-
-Ahora, cada vez que hagas cambios en tu proyecto de Git y los confirmes, el gancho pre-commit verificará las modificaciones en el archivo `config.toml` y ejecutará automáticamente el script `subset_font` para actualizar el archivo `custom_subset.css`.
-
-Por cierto, si te interesa una forma de actualizar automáticamente la fecha de tus publicaciones en Zola o comprimir automáticamente tus archivos PNG, echa un vistazo a [esta publicación](https://osc.garden/es/blog/zola-date-git-hook/).
-
-Si deseas utilizar todos los scripts a la vez (compresión de archivos PNG, actualización de la fecha y creación del subconjunto de fuentes), combina su código en un solo archivo `.git/hooks/pre-commit`.

content/blog/custom-font-subset/index.md

@@ -1,196 +0,0 @@
-+++
-title = "Optimise loading times with a custom font subset"
-date = 2023-04-29
-updated = 2023-07-08
-description = "Learn how to create a custom subset that only includes the necessary glyphs."
-
-[taxonomies]
-tags = ["showcase", "tutorial"]
-
-[extra]
-social_media_card = "social_cards/blog_custom_font_subset.jpg"
-+++
-
-## The problem
-
-Custom fonts cause flashing text in Firefox. For a gif and more details, see [this issue](https://github.com/welpo/tabi/issues/75).
-
-## The solution
-
-To fix this, tabi loads a subset of glyphs for the header. Since this (slightly) increases the initial load time, it's a good idea to try and minimise the size of this subset.
-
-By default, there are subset files for English and Spanish characters (with a few symbols). These files are loaded when the Zola page/site is set to that language.
-
-For further optimisation, you can create a custom font subset that only includes the characters used in your header.
-
-## Requirements
-
-Install these tools:
-
-- [fonttools](https://github.com/fonttools/fonttools)
-
-- [brotli](https://github.com/google/brotli)
-
-Run `pip install fonttools brotli` to install both.
-
-## The script
-
-The script below takes a `config.toml` file and a font file as input, extracts the necessary characters, creates a subset of the font, and generates a CSS file containing the base64 encoded subset.
-
-```bash
-#!/usr/bin/env bash
-
-usage() {
-    echo "Usage: $0 [--config | -c CONFIG_FILE] [--font | -f FONT_FILE] [--output | -o OUTPUT_PATH]"
-    echo
-    echo "Options:"
-    echo "  --config, -c   Path to the config.toml file."
-    echo "  --font, -f     Path to the font file."
-    echo "  --output, -o   Output path for the generated subset.css file (default: current directory)"
-    echo "  --help, -h     Show this help message and exit"
-}
-
-# Default output is current directory.
-output_path="."
-
-# Parse command line options
-while [ "$#" -gt 0 ]; do
-    case "$1" in
-        --config|-c)
-            config_file="$2"
-            shift 2
-            ;;
-        --font|-f)
-            font_file="$2"
-            shift 2
-            ;;
-        --output|-o)
-            output_path="$2"
-            shift 2
-            ;;
-        --help|-h)
-            usage
-            exit 0
-            ;;
-        *)
-            echo "Unknown option: $1"
-            usage
-            exit 1
-            ;;
-    esac
-done
-
-# Check if -c and -f options are provided
-if [ -z "$config_file" ]; then
-    echo "Error: --config|-c option is required."
-    usage
-    exit 1
-fi
-
-if [ -z "$font_file" ]; then
-    echo "Error: --font|-f option is required."
-    usage
-    exit 1
-fi
-
-# Check if config and font files exist.
-if [ ! -f "$config_file" ]; then
-    echo "Error: Config file '$config_file' not found."
-    exit 1
-fi
-
-if [ ! -f "$font_file" ]; then
-    echo "Error: Font file '$font_file' not found."
-    exit 1
-fi
-
-# Extract the title and menu names from the config file.
-title=$(awk -F' = ' '/^title/{print $2}' "$config_file" | tr -d '"')
-menu_names=$(awk -F' = ' '/^menu/{f=1;next} /socials/{f=0} f && /name/{print $2}' "$config_file" | cut -d',' -f1 | tr -d '"' )
-language_names=$(awk -F' = ' '/^language_name\./{print $2}' "$config_file" | tr -d '"' )
-
-# If the site is multilingual, get the menu translations.
-if [ -n "$language_names" ]; then
-    for menu_name in $menu_names; do
-        # Find the line with the menu name inside a [languages.*.translations] section and get the translated menus.
-        menu_translation=$(awk -F' = ' "/\\[languages.*\\.translations\\]/{f=1;next} /^\\[/ {f=0} f && /$menu_name =/{print \$2}" "$config_file" | tr -d '"' )
-        # Add the found menu value to the translations string
-        menu_names+="$menu_translation"
-    done
-fi
-
-# Combine the extracted strings.
-combined="$title$menu_names$language_names"
-
-# Get unique characters.
-unique_chars=$(echo "$combined" | grep -o . | sort -u | tr -d '\n')
-
-# Create a temporary file for subset.woff2.
-temp_subset=$(mktemp)
-
-# Create the subset.
-pyftsubset "$font_file" \
-    --text="$unique_chars" \
-    --layout-features="*" --flavor="woff2" --output-file="$temp_subset" --with-zopfli
-
-# Remove trailing slash from output path, if present.
-output_path=${output_path%/}
-
-# Base64 encode the temporary subset.woff2 file and create the CSS file.
-base64_encoded_font=$(base64 -i "$temp_subset")
-echo "@font-face{font-family:\"Inter Subset\";src:url(data:application/font-woff2;base64,$base64_encoded_font);}" > "$output_path/custom_subset.css"
-
-# Remove the temporary subset.woff2 file.
-rm "$temp_subset"
-```
-
-## Usage
-
-Save the script somewhere like `~/bin/subset_font`. Make it executable with `chmod +x ~/bin/subset_font`.
-
-Now you can run it with the required `--config` and `--font` options:
-
-```bash
-~/bin/subset_font --config path/to/config.toml --font path/to/font.woff2
-```
-By default, this generates a `custom_subset.css` file in the current directory. Use `-o` or `--output` to specify a different path:
-
-```bash
-~/bin/subset_font -c path/to/config.toml -f path/to/font.woff2 -o path/to/output
-```
-
-You should place this `custom_subset.css` file inside the `static/` directory.
-
-
-## Automating with Pre-commit Hook
-
-You might change the title or menu options of your site, making the custom subset no longer useful.
-
-To automate the process of creating this file, you can integrate the script into a Git pre-commit hook that checks for changes in the `config.toml` file, runs the script, and stores the resulting CSS file in the `static/` directory of your site.
-
-1. Create a `.git/hooks/pre-commit` file in your Git project, if it doesn't already exist.
-
-2. Make it executable with `chmod +x .git/hooks/pre-commit`.
-
-3. Add the following code to the file:
-
-```bash
-# Check if config.toml has been modified.
-if git diff --cached --name-only | grep -q "config.toml"; then
-    echo "config.toml modified. Running subset_font…"
-
-    # Call the subset_font script.
-    ~/bin/subset_font -c config.toml -f static/fonts/Inter4.woff2 -o static/
-
-    # Add the generated subset.css file to the commit.
-    git add static/custom_subset.css
-fi
-```
-
-Make sure to modify the script to match the path where you stored the `subset_font` script. The config and font paths should work fine with tabi's default setup.
-
-Now, every time you commit changes to your Git project, the pre-commit hook will check for modifications in the `config.toml` file and automatically run the `subset_font` script to update the `custom_subset.css` file.
-
-By the way, if you're interested in a way to automatically update the date of your Zola posts or compress your PNG files, check out [this post](https://osc.garden/blog/zola-date-git-hook/).
-
-If you want to use all scripts at once (compressing PNG files, updating the date, and creating the font subset), combine their code into a single `.git/hooks/pre-commit` file.

content/blog/customise-tabi/index.ca.md

@@ -1,204 +0,0 @@
-+++
-title = "Personalitza el color de tabi i el tema per defecte"
-date = 2023-08-09
-updated = 2024-09-12
-description = "Aprèn a personalitzar tabi fent servir skins i establint un tema per defecte, aconseguint un aspecte únic."
-
-[taxonomies]
-tags = ["funcionalitat", "tutorial"]
-
-[extra]
-toc = true
-quick_navigation_buttons = true
-social_media_card = "social_cards/ca_blog_customise_tabi.jpg"
-+++
-
-tabi pot ser personalitzat de dues maneres: establint el tema per defecte (fosc o clar) i triant el color principal per al tema ("skin").
-
-## Tema per defecte
-
-Utilitza `default_theme = "dark"` per establir el tema fosc com a predeterminat, o `default_theme = "light"` per establir el tema clar com a predeterminat.
-
-Establir `default_theme = ""` (o comentar la variable) seguirà la preferència del sistema de l'usuari (mode clar o fosc).
-
-Per configurar permanentment el teu lloc en el tema fosc o clar, necessites desactivar el `theme_switcher` a `config.toml` i establir el teu tema preferit (`light` o `dark`) a `default_theme`.
-
-Per exemple, per tenir un tema fosc permanent:
-
-```toml
-[extra]
-theme_switcher = false
-default_theme = "dark"
-```
-
-## Skins
-
-No t'agrada l'aiguamarina? Cap problema! tabi té 12 skins per triar. Si cap d'aquestes t'agrada, pots [crear la teva pròpia skin](#crea-la-teva-propia-skin).
-
-Una skin és un arxiu CSS amb dues variables: el color principal per al tema clar i el color principal per al tema fosc.
-
-Activar una skin és tan fàcil com establir la variable `skin` a la teva `config.toml` amb el nom de la skin. Per exemple:
-
-```toml
-[extra]
-skin = "sakura"
-```
-
-Fes una ullada a les skins disponibles a continuació.
-
-**Fes clic a les imatges** per canviar entre els temes fosc i clar.
-
-<hr>
-
-### Aiguamarina
-
-La skin per defecte. Si la variable `skin` no està configurada (o és igual a `"teal"`), aquest és l'aspecte de tabi:
-
-{{ image_toggler(default_src="blog/customise-tabi/skins/teal_light.webp", toggled_src="blog/customise-tabi/skins/teal_dark.webp", default_alt="teal skin in light mode", toggled_alt="teal skin in dark mode", full_width=true) }}
-
-<hr>
-
-### Lavanda
-
-{{ image_toggler(default_src="blog/customise-tabi/skins/lavender_light.webp", toggled_src="blog/customise-tabi/skins/lavender_dark.webp", default_alt="skin lavanda en mode clar", toggled_alt="skin lavanda en mode fosc", full_width=true) }}
-
-Per aplicar-la, utilitza `skin = "lavender"`.
-
-<hr>
-
-### Vermell
-
-{{ image_toggler(default_src="blog/customise-tabi/skins/red_light.webp", toggled_src="blog/customise-tabi/skins/red_dark.webp", default_alt="skin vermell en mode clar", toggled_alt="skin vermell en mode fosc", full_width=true) }}
-
-Canvia a aquesta skin establint `skin = "red"`.
-
-<hr>
-
-### Menta
-
-Una skin dissenyada per 🅿️.
-
-{{ image_toggler(default_src="blog/customise-tabi/skins/mint_light.webp", toggled_src="blog/customise-tabi/skins/mint_dark.webp", default_alt="skin menta amb tema clar", toggled_alt="skin menta amb tema fosc", full_width=true) }}
-
-Activa-la amb `skin = "mint"`.
-
-<hr>
-
-### Sakura
-
-Inspirat per la temporada de floració dels cirerers al Japó.
-
-{{ image_toggler(default_src="blog/customise-tabi/skins/sakura_light.webp", toggled_src="blog/customise-tabi/skins/sakura_dark.webp", default_alt="skin sakura en mode clar", toggled_alt="skin sakura en mode fosc", full_width=true) }}
-
-Per habilitar aquesta skin, ajusta `skin = "sakura"`.
-
-<hr>
-
-### Blau
-
-{{ image_toggler(default_src="blog/customise-tabi/skins/blue_light.webp", toggled_src="blog/customise-tabi/skins/blue_dark.webp", default_alt="skin blau en mode clar", toggled_alt="skin blau en mode fosc", full_width=true) }}
-
-Per activar aquesta aparença, estableix `skin = "blue"`.
-
-<hr>
-
-### Lingot indigo
-
-*Indigo* pel blau (en el tema clar) i *lingot* pel daurat (en el tema fosc).
-
-{{ image_toggler(default_src="blog/customise-tabi/skins/indigo_ingot_light.webp", toggled_src="blog/customise-tabi/skins/indigo_ingot_dark.webp", default_alt="skin lingot indigo en mode clar", toggled_alt="skin lingot indigo en mode fosc", full_width=true) }}
-
-Per activar aquest tema, utilitza `skin = "indigo_ingot"`.
-
-<hr>
-
-### Evangelion
-
-Inspirat pels colors de la Unitat Evangelion-01 (en el tema fosc) i la Unitat-02 (en el tema clar).
-
-{{ image_toggler(default_src="blog/customise-tabi/skins/evangelion_light.webp", toggled_src="blog/customise-tabi/skins/evangelion_dark.webp", default_alt="skin evangelion en mode clar", toggled_alt="skin evangelion en mode fosc", full_width=true) }}
-
-<hr>
-
-### Monocromàtic
-
-{{ image_toggler(default_src="blog/customise-tabi/skins/monochrome_light.webp", toggled_src="blog/customise-tabi/skins/monochrome_dark.webp", default_alt="skin monocromàtic en mode clar", toggled_alt="skin monocromàtic en mode fosc", full_width=true) }}
-
-Per aconseguir aquesta aparença, estableix `skin = "monochrome"`.
-
-<hr>
-
-### Taronja (baix contrast)
-
-**AVÍS!** Aquesta skin en mode clar pot tenir [baix contrast](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html), afectant l'accessibilitat i la qualificació Lighthouse. (El mode fosc té bon contrast.)
-
-{{ image_toggler(default_src="blog/customise-tabi/skins/lowcontrast_orange_light.webp", toggled_src="blog/customise-tabi/skins/lowcontrast_orange_dark.webp", default_alt="skin taronja de baix contrast en mode clar", toggled_alt="skin taronja de baix contrast en mode fosc", full_width=true) }}
-
-Per utilitzar-la, estableix `skin = "lowcontrast_orange"`.
-
-<hr>
-
-### Préssec (baix contrast)
-
-**AVÍS!** Aquesta skin en mode clar pot tenir [baix contrast](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html), afectant l'accessibilitat i la qualificació Lighthouse. (El mode fosc té bon contrast.)
-
-{{ image_toggler(default_src="blog/customise-tabi/skins/lowcontrast_peach_light.webp", toggled_src="blog/customise-tabi/skins/lowcontrast_peach_dark.webp", default_alt="skin préssec de baix contrast en mode clar", toggled_alt="skin préssec de baix contrast en mode fosc", full_width=true) }}
-
-Especifica `skin = "lowcontrast_peach"` per utilitzar aquesta skin.
-
-<hr>
-
-### Rosa (baix contrast)
-
-**AVÍS!** Aquesta skin en mode clar pot tenir [baix contrast](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html), afectant l'accessibilitat i la qualificació Lighthouse. (El mode fosc té bon contrast.)
-
-{{ image_toggler(default_src="blog/customise-tabi/skins/lowcontrast_pink_light.webp", toggled_src="blog/customise-tabi/skins/lowcontrast_pink_dark.webp", default_alt="skin rosa de baix contrast en tema clar", toggled_alt="skin rosa de baix contrast en tema fosc", full_width=true) }}
-
-Per utilitzar aquests colors, assigna `skin = "lowcontrast_pink"`.
-
-<hr>
-
-### Crea la teva pròpia skin
-
-No estàs limitat a les skins predefinides. Per què no crees un disseny únic que et representi?
-
-Pots guardar la teva nova skin en qualsevol d'aquests dos directoris:
-1. Dins del directori del tema: `themes/tabi/sass/skins`
-2. Dins del directori principal del teu lloc: `sass/skins` (necessitaràs crear aquesta carpeta)
-
-Crea un nou arxiu `.scss` (per exemple, `la_teva_skin.scss`) a la ubicació que prefereixis. Aquest arxiu ha de contenir aquestes dues variables (aquesta és la skin predeterminada, "teal"):
-
-```scss
-// This defines theme-specific variables.
-@mixin theme-variables($theme) {
-    @if $theme =='light' {
-        // Light theme colours.
-        --primary-color: #087e96; // Contrast ratio: 4.73:1
-    }
-    @else if $theme == 'dark' {
-        // Dark theme colours.
-        --primary-color: #91e0ee;  // Contrast ratio: 11.06:1
-    }
-}
-
-// Apply light theme variables by default.
-:root {
-    @include theme-variables('light');
-}
-
-[data-theme='dark'] {
-    @include theme-variables('dark');
-}
-
-// Apply dark theme variables when user's system prefers dark mode
-// and the theme is not explicitly set to light.
-@media (prefers-color-scheme: dark) {
-    :root:not([data-theme='light']) {
-        @include theme-variables('dark');
-    }
-}
-```
-
-Modifica els colors al teu gust. Una vegada estiguis satisfet, actualitza la variable `skin` perquè coincideixi amb el nom del teu arxiu.
-
-Recorda tenir en compte l'accesibilitat dels colors que triis. Aquí tens un enllaç que et pot ajudar: [WebAIM: Contrast Checker](https://webaim.org/resources/contrastchecker/). El fondo del tema clar és `#fff`, i el del tema fosc `#1f1f1f`.

content/blog/customise-tabi/index.es.md

@@ -1,207 +0,0 @@
-+++
-title = "Personaliza el color de tabi y el tema predeterminado"
-date = 2023-08-09
-updated = 2024-09-12
-description = "Aprende a personalizar tabi usando skins y estableciendo un tema predeterminado, haciendo que tu sitio sea único."
-
-[taxonomies]
-tags = ["funcionalidad", "tutorial"]
-
-[extra]
-toc = true
-quick_navigation_buttons = true
-social_media_card = "social_cards/es_blog_customise_tabi.jpg"
-+++
-
-tabi puede ser personalizado de dos maneras: estableciendo el tema predeterminado (oscuro o claro) y eligiendo el color principal para el tema ("skin").
-
-## Tema predeterminado
-
-Usa `default_theme = "dark"` para establecer el tema oscuro como predeterminado, o `default_theme = "light"` para establecer el tema claro como predeterminado.
-
-Establecer `default_theme = ""` (o no especificar la variable) seguirá las preferencias del sistema del usuario (modo claro u oscuro).
-
-Para configurar permanentemente tu sitio en el tema oscuro o claro, necesitas desactivar el `theme_switcher` en `config.toml` y establecer tu tema preferido (`light` o `dark`) como el `default_theme`.
-
-Por ejemplo, para tener un tema oscuro permanente:
-
-```toml
-[extra]
-theme_switcher = false
-default_theme = "dark"
-```
-
-## Skins
-
-¿No te gusta el aguamarina? ¡No hay problema! tabi tiene 12 skins (pieles) para elegir. Si ninguna de estas te convence, puedes [crear tu propia skin](#crea-tu-propia-skin).
-
-Una skin es un archivo CSS con dos variables: el color principal para el tema claro y el color principal para el tema oscuro.
-
-Activar una skin es tan fácil como establecer la variable `skin` en tu `config.toml` con el nombre de la skin. Por ejemplo:
-
-```toml
-[extra]
-skin = "sakura"
-```
-
-Echa un vistazo a las pieles disponibles a continuación.
-
-**Haz clic en las imágenes** para cambiar entre los temas oscuro y claro.
-
-<hr>
-
-### Aguamarina
-
-La skin predeterminada. Si la variable `skin` no está configurada (o es igual a `"teal"`), este es el aspecto de tabi:
-
-{{ image_toggler(default_src="blog/customise-tabi/skins/teal_light.webp", toggled_src="blog/customise-tabi/skins/teal_dark.webp", default_alt="skin aguamarina en tema claro", toggled_alt="skin aguamarina en tema oscuro", full_width=true) }}
-
-<hr>
-
-### Lavanda
-
-{{ image_toggler(default_src="blog/customise-tabi/skins/lavender_light.webp", toggled_src="blog/customise-tabi/skins/lavender_dark.webp", default_alt="skin lavanda en tema claro", toggled_alt="skin lavanda en tema oscuro", full_width=true) }}
-
-Aplica esta skin con `skin = "lavender"`.
-
-<hr>
-
-### Rojo
-
-{{ image_toggler(default_src="blog/customise-tabi/skins/red_light.webp", toggled_src="blog/customise-tabi/skins/red_dark.webp", default_alt="skin rojo en tema claro", toggled_alt="skin rojo en tema oscuro", full_width=true) }}
-
-Cambia a esta skin con la configuración `skin = "red"`.
-
-<hr>
-
-### Menta
-
-Una skin hecha por 🅿️.
-
-{{ image_toggler(default_src="blog/customise-tabi/skins/mint_light.webp", toggled_src="blog/customise-tabi/skins/mint_dark.webp", default_alt="skin menta en tema claro", toggled_alt="skin menta en tema oscuro", full_width=true) }}
-
-Actívala con `skin = "mint"`.
-
-<hr>
-
-### Sakura
-
-Inspirada en la temporada de florecimiento de los cerezos en Japón.
-
-{{ image_toggler(default_src="blog/customise-tabi/skins/sakura_light.webp", toggled_src="blog/customise-tabi/skins/sakura_dark.webp", default_alt="skin sakura en tema claro", toggled_alt="skin sakura en tema oscuro", full_width=true) }}
-
-Para activar esta skin, ajusta `skin = "sakura"`.
-
-<hr>
-
-### Azul
-
-{{ image_toggler(default_src="blog/customise-tabi/skins/blue_light.webp", toggled_src="blog/customise-tabi/skins/blue_dark.webp", default_alt="skin azul en tema claro", toggled_alt="skin azul en tema oscuro", full_width=true) }}
-
-Para lograr esta apariencia, establece `skin = "blue"`.
-
-<hr>
-
-### Lingote índigo
-
-*Índigo* por el azul (en el tema claro) y *lingote* por el oro (en el tema oscuro).
-
-{{ image_toggler(default_src="blog/customise-tabi/skins/indigo_ingot_light.webp", toggled_src="blog/customise-tabi/skins/indigo_ingot_dark.webp", default_alt="skin lingote índigo en tema claro", toggled_alt="skin lingote índigo en tema oscuro", full_width=true) }}
-
-Para activar esta skin, usa `skin = "indigo_ingot"`.
-
-<hr>
-
-### Evangelion
-
-Inspirada en los colores de la Unidad-01 de Evangelion (en el tema oscuro) y el EVA-02 (en el tema claro).
-
-{{ image_toggler(default_src="blog/customise-tabi/skins/evangelion_light.webp", toggled_src="blog/customise-tabi/skins/evangelion_dark.webp", default_alt="skin evangelion en tema claro", toggled_alt="skin evangelion en tema oscuro", full_width=true) }}
-
-Actívala con `skin = "evangelion"`.
-
-<hr>
-
-### Monocromático
-
-{{ image_toggler(default_src="blog/customise-tabi/skins/monochrome_light.webp", toggled_src="blog/customise-tabi/skins/monochrome_dark.webp", default_alt="skin monocromático en tema claro", toggled_alt="skin monocromático en tema oscuro", full_width=true) }}
-
-Si te gusta este look, usa `skin = "monochrome"`.
-
-<hr>
-
-### Naranja (bajo contraste)
-
-**¡ADVERTENCIA!** El tema claro de esta skin podría tener [poco contraste](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html), afectando la accesibilidad y la calificación de Lighthouse. (El tema oscuro tiene buen contraste.)
-
-{{ image_toggler(default_src="blog/customise-tabi/skins/lowcontrast_orange_light.webp", toggled_src="blog/customise-tabi/skins/lowcontrast_orange_dark.webp", default_alt="skin naranja de bajo contraste en tema claro", toggled_alt="skin naranja de bajo contraste en tema oscuro", full_width=true) }}
-
-Para activarla, configura `skin = "lowcontrast_orange"`.
-
-<hr>
-
-### Melocotón (bajo contraste)
-
-**¡ADVERTENCIA!** El tema claro de esta skin podría tener [poco contraste](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html), afectando la accesibilidad y la calificación de Lighthouse. (El tema oscuro tiene buen contraste.)
-
-{{ image_toggler(default_src="blog/customise-tabi/skins/lowcontrast_peach_light.webp", toggled_src="blog/customise-tabi/skins/lowcontrast_peach_dark.webp", default_alt="skin melocotón de bajo contraste en tema claro", toggled_alt="skin melocotón de bajo contraste en tema oscuro", full_width=true) }}
-
-Especifica `skin = "lowcontrast_peach"` para usar esta skin.
-
-<hr>
-
-### Rosa (bajo contraste)
-
-**¡ADVERTENCIA!** El tema claro de esta skin podría tener [poco contraste](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html), afectando la accesibilidad y la calificación de Lighthouse. (El tema oscuro tiene buen contraste.)
-
-{{ image_toggler(default_src="blog/customise-tabi/skins/lowcontrast_pink_light.webp", toggled_src="blog/customise-tabi/skins/lowcontrast_pink_dark.webp", default_alt="skin rosa de bajo contraste en tema claro", toggled_alt="skin rosa de bajo contraste en tema oscuro", full_width=true) }}
-
-Para usar estos colores, asigna `skin = "lowcontrast_pink"`.
-
-<hr>
-
-### Crea tu propia skin
-
-No estás limitado a las skins predefinidas. ¿Por qué no diseñas un aspecto único que te represente?
-
-Puedes guardar tu nueva skin en cualquiera de estos dos directorios:
-1. Dentro del directorio del tema: `themes/tabi/sass/skins`
-2. Dentro del directorio principal de tu sitio: `sass/skins` (necesitarás crear esta carpeta)
-
-Crea un nuevo archivo `.scss` (por ejemplo, `tu_skin.scss`) en la ubicación que prefieras. Este archivo debe contener estas dos variables (esta es la skin predeterminada, "teal"):
-
-```scss
-// This defines theme-specific variables.
-@mixin theme-variables($theme) {
-    @if $theme =='light' {
-        // Light theme colours.
-        --primary-color: #087e96; // Contrast ratio: 4.73:1
-    }
-    @else if $theme == 'dark' {
-        // Dark theme colours.
-        --primary-color: #91e0ee;  // Contrast ratio: 11.06:1
-    }
-}
-
-// Apply light theme variables by default.
-:root {
-    @include theme-variables('light');
-}
-
-// Apply dark theme variables when dark theme is explicitly set.
-[data-theme='dark'] {
-    @include theme-variables('dark');
-}
-
-// Apply dark theme variables when user's system prefers dark mode
-// and the theme is not explicitly set to light.
-@media (prefers-color-scheme: dark) {
-    :root:not([data-theme='light']) {
-        @include theme-variables('dark');
-    }
-}
-```
-
-Modifica los colores a tu gusto. Una vez que estés satisfecho, actualiza la variable `skin` para que coincida con el nombre de tu archivo.
-
-Recuerda tener en cuenta la accesibilidad de los colores que elijas. Aquí tienes un enlace que te puede ayudar: [WebAIM: Contrast Checker](https://webaim.org/resources/contrastchecker/). El fondo del tema claro es `#fff`, y el del tema oscuro `#1f1f1f`.

content/blog/customise-tabi/index.md

@@ -1,216 +0,0 @@
-+++
-title = "Customise tabi with skins and a default theme"
-date = 2023-08-09
-updated = 2024-09-12
-description = "Learn how to customise tabi using skins and setting a default theme, making your site uniquely yours."
-
-[taxonomies]
-tags = ["showcase", "tutorial"]
-
-[extra]
-toc = true
-quick_navigation_buttons = true
-social_media_card = "social_cards/blog_customise_tabi.jpg"
-+++
-
-tabi can be customised in two ways: by setting the default theme (dark or light) and by choosing the main colour for the theme (skins).
-
-## Default theme
-
-Use `default_theme = "dark"` to set the dark theme as the default, or `default_theme = "light"` to set the light theme as the default.
-
-Setting `default_theme = ""` (or commenting out the variable) will follow the user's system preference (light or dark mode).
-
-To permanently set your site to either the dark or light theme, you need to disable the theme switcher in `config.toml` and set your preferred theme as the `default_theme`.
-
-For example, to have a permanent dark theme:
-
-```toml
-[extra]
-theme_switcher = false
-default_theme = "dark"
-```
-
-## Skins
-
-Not a fan of teal? No problem! tabi has 12 skins for you to choose from. If none of these work for you, you can [create your own](#create-your-own-skin).
-
-A skin is a CSS file with two variables: the primary colour for the light theme, and the primary colour for the dark theme.
-
-Enabling a skin is as easy as setting the `skin` variable in your `config.toml` with the name of the skin. For example:
-
-```toml
-[extra]
-skin = "sakura"
-```
-
-Take a look below at the available skins below.
-
-**Click on the images** to switch between dark and light themes.
-
-<hr>
-
-### Teal
-
-The default skin. If the `skin` variable is unset (or set to `"teal"`), this is what tabi looks like:
-
-{{ image_toggler(default_src="blog/customise-tabi/skins/teal_light.webp", toggled_src="blog/customise-tabi/skins/teal_dark.webp", default_alt="teal skin in light mode", toggled_alt="teal skin in dark mode", full_width=true) }}
-
-<hr>
-
-### Lavender
-
-{{ image_toggler(default_src="blog/customise-tabi/skins/lavender_light.webp", toggled_src="blog/customise-tabi/skins/lavender_dark.webp", default_alt="lavender skin in light mode", toggled_alt="lavender skin in dark mode", full_width=true) }}
-
-To apply, use `skin = "lavender"`.
-
-
-<hr>
-
-### Red
-
-{{ image_toggler(default_src="blog/customise-tabi/skins/red_light.webp", toggled_src="blog/customise-tabi/skins/red_dark.webp", default_alt="red skin in light mode", toggled_alt="red skin in dark mode", full_width=true) }}
-
-Switch to this by setting `skin = "red"`.
-
-
-<hr>
-
-### Mint
-
-A skin designed by 🅿️.
-
-{{ image_toggler(default_src="blog/customise-tabi/skins/mint_light.webp", toggled_src="blog/customise-tabi/skins/mint_dark.webp", default_alt="mint skin in light mode", toggled_alt="mint skin in dark mode", full_width=true) }}
-
-Activate it with `skin = "mint"`.
-
-
-<hr>
-
-### Sakura
-
-Inspired by the Japanese cherry blossom season.
-
-{{ image_toggler(default_src="blog/customise-tabi/skins/sakura_light.webp", toggled_src="blog/customise-tabi/skins/sakura_dark.webp", default_alt="sakura skin in light mode", toggled_alt="sakura skin in dark mode", full_width=true) }}
-
-To enable this skin, adjust `skin = "sakura"`.
-
-
-<hr>
-
-### Blue
-
-{{ image_toggler(default_src="blog/customise-tabi/skins/blue_light.webp", toggled_src="blog/customise-tabi/skins/blue_dark.webp", default_alt="blue skin in light mode", toggled_alt="blue skin in dark mode", full_width=true) }}
-
-For this appearance, set `skin = "blue"`.
-
-
-<hr>
-
-### Indigo Ingot
-
-*Indigo* for blue (in light theme) and *ingot* for gold (in dark theme).
-
-{{ image_toggler(default_src="blog/customise-tabi/skins/indigo_ingot_light.webp", toggled_src="blog/customise-tabi/skins/indigo_ingot_dark.webp", default_alt="indigo ingot skin in light mode", toggled_alt="indigo ingot skin in dark mode", full_width=true) }}
-
-To activate this skin, use `skin = "indigo_ingot"`.
-
-
-<hr>
-
-### Evangelion
-
-Inspired by the colours of Evangelion Unit-01 (in dark theme) and Unit-02 (in light theme).
-
-{{ image_toggler(default_src="blog/customise-tabi/skins/evangelion_light.webp", toggled_src="blog/customise-tabi/skins/evangelion_dark.webp", default_alt="evangelion skin in light mode", toggled_alt="evangelion skin in dark mode", full_width=true) }}
-
-
-<hr>
-
-### Monochrome
-
-{{ image_toggler(default_src="blog/customise-tabi/skins/monochrome_light.webp", toggled_src="blog/customise-tabi/skins/monochrome_dark.webp", default_alt="monochrome skin in light mode", toggled_alt="monochrome skin in dark mode", full_width=true) }}
-
-To achieve this look, set `skin = "monochrome"`.
-
-
-<hr>
-
-### Low contrast orange
-
-**WARNING!** This skin's light theme may have [low contrast](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html), affecting accessibility and Lighthouse rating. (Dark theme is fine.)
-
-{{ image_toggler(default_src="blog/customise-tabi/skins/lowcontrast_orange_light.webp", toggled_src="blog/customise-tabi/skins/lowcontrast_orange_dark.webp", default_alt="low contrast orange skin in light mode", toggled_alt="low contrast orange skin in dark mode", full_width=true) }}
-
-To use, set `skin = "lowcontrast_orange"`.
-
-
-<hr>
-
-### Low contrast peach
-
-**WARNING!** This skin's light theme may have [low contrast](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html), affecting accessibility and Lighthouse rating. (Dark theme is fine.)
-
-{{ image_toggler(default_src="blog/customise-tabi/skins/lowcontrast_peach_light.webp", toggled_src="blog/customise-tabi/skins/lowcontrast_peach_dark.webp", default_alt="low contrast peach skin in light mode", toggled_alt="low contrast peach skin in dark mode", full_width=true) }}
-
-To enable it, specify `skin = "lowcontrast_peach"`.
-
-
-<hr>
-
-### Low contrast pink
-
-**WARNING!** This skin's light theme may have [low contrast](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html), affecting accessibility and Lighthouse rating. (Dark theme is fine.)
-
-{{ image_toggler(default_src="blog/customise-tabi/skins/lowcontrast_pink_light.webp", toggled_src="blog/customise-tabi/skins/lowcontrast_pink_dark.webp", default_alt="low contrast pink skin in light mode", toggled_alt="low contrast pink skin in dark mode", full_width=true) }}
-
-For this colourscheme, choose `skin = "lowcontrast_pink"`.
-
-
-<hr>
-
-### Create your own skin
-
-You're not just limited to predefined skins. Why not create a look that's distinctively tailored to your preferences?
-
-You can save your new skin it in either of these two directories:
-1. Inside the theme's directory: `themes/tabi/sass/skins`
-2. Inside your main site's directory: `sass/skins` (you'll need to create this folder)
-
-Create a new `.scss` file (for example, `your_skin.scss`) in your preferred location. This file needs to have these two variables (this is the default skin, "teal"):
-
-```scss
-// This defines theme-specific variables.
-@mixin theme-variables($theme) {
-    @if $theme =='light' {
-        // Light theme colours.
-        --primary-color: #087e96; // Contrast ratio: 4.73:1
-    }
-    @else if $theme == 'dark' {
-        // Dark theme colours.
-        --primary-color: #91e0ee;  // Contrast ratio: 11.06:1
-    }
-}
-
-// Apply light theme variables by default.
-:root {
-    @include theme-variables('light');
-}
-
-// Apply dark theme variables when dark theme is explicitly set.
-[data-theme='dark'] {
-    @include theme-variables('dark');
-}
-
-// Apply dark theme variables when user's system prefers dark mode
-// and the theme is not explicitly set to light.
-@media (prefers-color-scheme: dark) {
-    :root:not([data-theme='light']) {
-        @include theme-variables('dark');
-    }
-}
-```
-
-Modify the colours to your taste. Once you're satisfied, update the `skin` variable to match your filename.
-
-Remember to consider the accessibility of the colours you choose. Here's a link that can help you: [WebAIM: Contrast Checker](https://webaim.org/resources/contrastchecker/). The background of the light theme is `#fff`, and the dark one is `#1f1f1f`.

content/blog/faq-languages/index.ca.md

@@ -1,135 +0,0 @@
-+++
-title = "Lost in Translation? Explora les capacitats multilingües de tabi"
-date = 2023-09-12
-updated = 2024-08-18
-description = "Descobreix com tabi t'ajuda a connectar amb una audiència global gràcies a les seves funcions multilingües. Aprèn a canviar la llengua per defecte, afegir més llengües i aportar les teves pròpies traduccions."
-
-[taxonomies]
-tags = ["funcionalitat", "tutorial", "Preguntes Freqüents"]
-
-[extra]
-quick_navigation_buttons = true
-toc_ignore_pattern = "^(Preguntes Freqüents)"
-social_media_card = "social_cards/ca_blog_faq_languages.jpg"
-+++
-
-tabi simplifica el procés de creació de llocs web multilingües perquè puguis connectar amb una audiència global. En aquesta guia, t'explicarem tot el que necessites saber, des de com configurar la llengua principal en el teu lloc fins a com contribuir amb les teves pròpies traduccions. Comencem!
-
-### Preguntes Freqüents
-
-<!-- toc -->
-
-## Quines llengües admet tabi?
-
-tabi admet les següents llengües:
-
-- Alemany
-- Àrab
-- Anglès
-- Català
-- Coreà
-- Espanyol
-- Estonià
-- Francès
-- Hindi
-- Italià
-- Japonès
-- Odia
-- Persa
-- Portuguès (Europeu)
-- Rus
-- Ucraïnès
-- Xinès (Simplificat)
-
-Per a una llista sempre actualitzada de llengües suportades, consulta la [carpeta `i18n`](https://github.com/welpo/tabi/tree/main/i18n) en el repositori de tabi.
-
-## Com estableixo la llengua predeterminada del meu lloc?
-
-Pots definir la llengua principal del teu lloc configurant la variable `default_language` a `config.toml`.
-
-Per exemple, si vols que la llengua principal sigui el Xinès, simplement afegeix aquesta línia a l'arxiu `config.toml`:
-
-```toml, hl_lines=03
-base_url = "https://welpo.github.io/tabi"
-title = "~/tabi"
-default_language = "zh"
-```
-
-Si el valor de `default_language` coincideix amb el nom d'un fitxer TOML al [directori `i18n`](https://github.com/welpo/tabi/tree/main/i18n), tots els textos de tabi es traduiran a aquest idioma.
-
-## Com gestiona tabi el suport multilingüe?
-
-Zola genera automàticament URLs per a cada llengua que no sigui la predeterminada de la següent manera: `{base_url}/{codi_idioma}/{post}`.
-
-tabi facilita la navegació entre llengües afegint un commutador de llengua en la barra de navegació (que només es mostra quan hi ha més d'una llengua habilitada).
-
-Si [pujes](#) a la barra de navegació, veuràs el commutador de llengua. Si cliques sobre ell, es mostrarà un desplegable amb les llengües disponibles. Si fas clic en el nom d'una llengua, et portarà a la mateixa pàgina en aquesta llengua.
-
-Si una pàgina específica no està disponible en una llengua, tabi mostrarà una pàgina 404 amb el text:
-
-> La pàgina que has sol·licitat sembla que no existeix o encara no s'ha traduït al teu idioma. Comprova l'URL per detectar errors o torna a la pàgina d'inici.
-
-Aquest text es mostrarà una vegada per cada llengua activada en el teu lloc. Pots veure aquesta pàgina en acció [aquí](https://welpo.github.io/tabi/404.html).
-
-## Com activo el suport multilingüe?
-
-Per habilitar el suport per a diverses llengües, necessites configurar la variable `languages` a `config.toml`. Per exemple, si vols un lloc amb anglès com a llengua principal que també admeti hindi i espanyol, pots configurar el teu `config.toml` de la següent manera:
-
-```toml
-base_url = "https://example.com"
-title = "My Site"
-default_language = "en"
-
-[languages.hi]
-title = "मेरी वेबसाइट"
-
-[languages.es]
-title = "El meu web"
-```
-
-En cada secció de llengua pots establir altres variables com `taxonomies`, `description`… Consulta la [documentació de suport multilingüe de Zola](https://www.getzola.org/documentation/content/multilingual/) per a més informació.
-
-## Què són aquests codis de dues lletres?
-
-Els codis de dues lletres són [codis d'idioma ISO 639-1](https://localizely.com/iso-639-1-list/) (o [IETF BCP 47](https://ca.wikipedia.org/wiki/Codi_de_llengua_IETF), quan cal), que serveixen per identificar idiomes d'una manera estandarditzada.
-
-tabi utilitza aquests codis per permetre la navegació entre idiomes i traduir el tema.
-
-## Com personalitzo o reemplaço una cadena de text específica al meu lloc web?
-
-tabi cerca els fitxers de cadenes en el següent ordre. `$base_directory` és on resideix el teu lloc Zola (allà on està `config.toml`):
-
-1. `$base_directory + "i18n"`
-2. `$base_directory + "themes/tabi/i18n"`
-
-Per tant, si crees `i18n/ca.toml` al teu directori base, tabi llegirà les cadenes de text d'aquest fitxer en lloc de les cadenes predeterminades en català. Pots fer això per a qualsevol idioma, suportat o no.
-
-Assegura't de copiar tot el fitxer per a aquest idioma primer, o el tema utilitzarà l'anglès per les claus que faltin.
-
-## Què passa si falta una traducció o està incompleta?
-
-Si una cadena no es troba en el fitxer d'idioma, tabi utilitzarà a la cadena predeterminada en anglès.
-
-## El meu idioma no està suportat. Puc contribuir amb una traducció?
-
-És clar! Sempre estem buscant afegir suport per a més idiomes. Pots contribuir amb una traducció creant una Pull Request al [repositori de tabi](https://github.com/welpo/tabi).
-
-Pots utilitzar el [fitxer en català](https://github.com/welpo/tabi/blob/main/i18n/ca.toml) com a base per traduir les cadenes al teu idioma. Assegura't de mantenir la mateixa estructura.
-
-El fitxer ha de portar el nom del codi de dues lletres del teu idioma i ha de ser un fitxer TOML. Per exemple, si vols afegir suport per al suahili, pots crear un fitxer anomenat `sw.toml` al directori `i18n`.
-
-Nota: quan provis la teva traducció, és possible que necessitis reiniciar `zola serve` per veure els canvis, ja que Zola no sempre detecta canvis en els fitxers TOML.
-
-## He trobat un error en una traducció. Com el corregeixo?
-
-Si trobes un error en una traducció, pots crear una issue o una Pull Request al [repositori de tabi](https://github.com/welpo/tabi).
-
-## Com actualitzo les traduccions després d'una actualització del tema?
-
-Si no vas personalitzar les traduccions, simplement actualitza el tema.
-
-Si ho vas fer, hauràs d'actualitzar manualment les traduccions. Pots fer-ho copiant les noves cadenes dels fitxers corresponents i enganxant-les al teu fitxer personalitzat.
-
-## tabi tradueix el meu contingut?
-
-No. tabi només tradueix les cadenes de text del tema. Hauràs de traduir el teu contingut tu mateix.

content/blog/faq-languages/index.es.md

@@ -1,135 +0,0 @@
-+++
-title = "¿Lost in Translation? Explora las capacidades multilingües de tabi"
-date = 2023-09-12
-updated = 2024-08-18
-description = "Descubre cómo tabi te ayuda a conectar con una audiencia global gracias a sus funciones multilingües. Aprende a cambiar el idioma por defecto, añadir más idiomas y aportar tus propias traducciones."
-
-[taxonomies]
-tags = ["funcionalidad", "tutorial", "Preguntas Frecuentes"]
-
-[extra]
-quick_navigation_buttons = true
-toc_ignore_pattern = "^(Preguntas Frecuentes)"
-social_media_card = "social_cards/es_blog_faq_languages.jpg"
-+++
-
-tabi simplifica el proceso de crear sitios web multilingües para que puedas conectar con una audiencia global. En esta guía, te explicaremos todo lo que necesitas saber, desde cómo configurar el idioma principal en tu sitio hasta cómo contribuir con tus propias traducciones. ¡Empecemos!
-
-### Preguntas Frecuentes
-
-<!-- toc -->
-
-## ¿Qué idiomas admite tabi?
-
-tabi admite los siguientes idiomas:
-
-- Alemán
-- Árabe
-- Catalán
-- Chino (Simplificado)
-- Coreano
-- Español
-- Estonio
-- Francés
-- Hindi
-- Inglés
-- Italiano
-- Japonés
-- Odia
-- Persa
-- Portugués (Europeo)
-- Ruso
-- Ucraniano
-
-Para una lista siempre actualizada de idiomas soportados, consulta la [carpeta `i18n`](https://github.com/welpo/tabi/tree/main/i18n) en el repositorio de tabi.
-
-## ¿Cómo establezco el idioma predeterminado de mi sitio?
-
-Puedes definir el idioma principal de tu sitio configurando la variable `default_language` en tu archivo `config.toml`.
-
-Por ejemplo, si deseas que el idioma principal sea el Chino, simplemente añade esta línea al archivo `config.toml`:
-
-```toml, hl_lines=03
-base_url = "https://welpo.github.io/tabi"
-title = "~/tabi"
-default_language = "zh"
-```
-
-Si el valor de `default_language` coincide con el nombre de un archivo TOML en el [directorio `i18n`](https://github.com/welpo/tabi/tree/main/i18n), todos los textos de tabi se traducirán a ese idioma.
-
-## ¿Cómo gestiona tabi el soporte multilingüe?
-
-Zola genera automáticamente URLs para cada idioma que no sea el predeterminado de la siguiente manera: `{base_url}/{código_idioma}/{post}`.
-
-tabi facilita la navegación entre idiomas añadiendo un conmutador de idioma en la barra de navegación (que sólo se muestra cuando hay más de un idioma habilitado).
-
-Si [subes](#) a la barra de navegación, verás el conmutador de idioma. Al hacer clic sobre él, se mostrará un desplegable con los idiomas disponibles. Si haces clic en el nombre de un idioma, te llevará a la misma página en ese idioma.
-
-Si una página específica no está disponible en un idioma, tabi mostrará una página 404 con el texto:
-
-> La página que has solicitado parece no existir o aún no se ha traducido a tu idioma. Revisa la URL en busca de errores o regresa a la página de inicio.
-
-Este texto se mostrará una vez por cada idioma activado en tu sitio. Puedes ver esta página en acción [aquí](https://welpo.github.io/tabi/404.html).
-
-## ¿Cómo activo el soporte multilingüe?
-
-Para habilitar el soporte para varios idiomas, necesitas configurar la variable `languages` en `config.toml`. Por ejemplo, si quieres un sitio con inglés como idioma principal que también admita hindi y español, puedes configurar tu `config.toml` de la siguiente manera:
-
-```toml
-base_url = "https://example.com"
-title = "My Site"
-default_language = "en"
-
-[languages.hi]
-title = "मेरी वेबसाइट"
-
-[languages.es]
-title = "Mi web"
-```
-
-En cada sección de idioma puedes establecer otras variables como `taxonomies`, `description`… Consulta la [documentación de soporte multilingüe de Zola](https://www.getzola.org/documentation/content/multilingual/) para más información.
-
-## ¿Qué son estos códigos de dos letras?
-
-Los códigos de dos letras son [códigos de idioma ISO 639-1](https://localizely.com/iso-639-1-list/) (o [IETF BCP 47](https://es.wikipedia.org/wiki/C%C3%B3digo_de_idioma_IETF), si hace falta), que sirven para identificar idiomas de una manera estandarizada.
-
-tabi utiliza estos códigos para permitir la navegación entre idiomas y traducir el tema.
-
-## ¿Cómo personalizo o reemplazo una cadena de texto específica en mi sitio web?
-
-tabi busca los archivos de cadenas en el siguiente orden. `$base_directory` es donde reside tu sitio Zola (donde se guarda `config.toml`):
-
-1. `$base_directory + "i18n"`
-2. `$base_directory + "themes/tabi/i18n"`
-
-Por lo tanto, si creas `i18n/en.toml` en tu directorio base, tabi leerá las cadenas de texto de ese archivo en lugar de las cadenas predeterminadas en inglés. Puedes hacer esto para cualquier idioma, soportado o no.
-
-Asegúrate de copiar todo el archivo para ese idioma primero, o el tema usará el inglés para las claves faltantes.
-
-## ¿Qué pasa si falta una traducción o está incompleta?
-
-Si una cadena no se encuentra en el archivo de idioma, tabi recurrirá a la cadena predeterminada en inglés.
-
-## Mi idioma no está soportado. ¿Puedo contribuir con una traducción?
-
-¡Por supuesto! Siempre estamos buscando añadir soporte para más idiomas. Puedes contribuir con una traducción creando una Pull Request en el [repositorio de tabi](https://github.com/welpo/tabi).
-
-Puedes usar el [archivo en inglés](https://github.com/welpo/tabi/blob/main/i18n/en.toml) como base para traducir las cadenas a tu idioma. Asegúrate de mantener la misma estructura.
-
-El archivo debe llevar el nombre del código de dos letras de tu idioma y debe ser un archivo TOML. Por ejemplo, si quieres añadir soporte para el suajili, puedes crear un archivo llamado `sw.toml` en el directorio `i18n`.
-
-Nota: cuando pruebes tu traducción, es posible que necesites reiniciar `zola serve` para ver los cambios, ya que Zola no siempre detecta cambios en los archivos TOML.
-
-## He encontrado un error en una traducción. ¿Cómo lo corrijo?
-
-Si encuentras un error en una traducción, puedes abrir un ticket o una Pull Request en el [repositorio de tabi](https://github.com/welpo/tabi).
-
-## ¿Cómo actualizo las traducciones después de una actualización del tema?
-
-Si no personalizaste las traducciones, basta con actualizar el tema.
-
-Si lo hiciste, tendrás que actualizar manualmente las traducciones. Puedes hacerlo copiando las nuevas cadenas de los archivos correspondientes y pegándolas en tu archivo personalizado.
-
-## ¿tabi traduce el contenido de mi sitio?
-
-No. tabi sólo traduce el tema. Los posts deberás traducirlos tú mismo.

content/blog/faq-languages/index.md

@@ -1,136 +0,0 @@
-+++
-title = "Lost in Translation? Not with tabi's Multilingual Capabilities"
-date = 2023-09-12
-updated = 2024-03-01
-description = "Master the art of serving a global audience through tabi's built-in multilingual features. Learn how to change the default language, add multilingual support, and contribute your own translations."
-
-[taxonomies]
-tags = ["showcase", "tutorial", "FAQ"]
-
-[extra]
-quick_navigation_buttons = true
-toc_ignore_pattern = "^(Frequently Asked Questions)"
-social_media_card = "social_cards/blog_faq_languages.jpg"
-+++
-
-To broaden your reach to a global audience, tabi streamlines the process of building multilingual websites. In this guide, we'll walk you through everything you need to know—from setting a default language for your site to contributing your own translations. Let's get started!
-
-### Frequently Asked Questions
-
-<!-- toc -->
-
-## What languages does tabi support?
-
-tabi supports the following languages:
-
-- Arabic
-- Catalan
-- Chinese (Simplified)
-- Chinese (Traditional)
-- English
-- Estonian
-- French
-- German
-- Hindi
-- Italian
-- Japanese
-- Korean
-- Odia
-- Persian
-- Portuguese (European)
-- Russian
-- Spanish
-- Ukranian
-
-For an always up to date list of supported languages, refer to the [`i18n` directory](https://github.com/welpo/tabi/tree/main/i18n) in the tabi repository.
-
-## How do I set a default language for my site?
-
-You can set the default language for your site by defining the `default_language` variable in your `config.toml` file.
-
-For instance, if you want (Simplified) Chinese to be the primary language, simply add this line to  `config.toml`:
-
-```toml, hl_lines=03
-base_url = "https://welpo.github.io/tabi"
-title = "~/tabi"
-default_language = "zh-Hans"
-```
-
-If the value of `default_language` matches the name of a TOML file in the [`i18n` directory](https://github.com/welpo/tabi/tree/main/i18n), all of tabi's text strings will be translated to that language.
-
-## How does tabi handle multilingual support?
-
-Zola automatically generates URLs for each non-default language like this: `{base_url}/{language_code}/{post}`.
-
-tabi facilitates the navigation between languages by adding a language switcher to the navigation bar (only shown when there's more than one language enabled).
-
-If you [scroll up](#) to the navigation bar, you'll see the language switcher (the globe icon). Clicking on it will display a dropdown with the available languages. Clicking on a language's name will take you to the same page in that language.
-
-If a specific page is not available in a language, tabi will display a 404 page with the text:
-
-> The page you've requested seems to be missing or hasn't been translated into your language yet. Check the URL for errors or go back to the homepage.
-
-This text will be shown once for each language enabled on your site. You can see this page in action [here](https://welpo.github.io/tabi/404.html).
-
-## How do I enable multilingual support?
-
-To enable multilingual support, you need to set the `languages` variable in your `config.toml` file. For example, if want an English-default site with support for Hindi and Spanish, you can set up your `config.toml` like so:
-
-```toml
-base_url = "https://example.com"
-title = "My Site"
-default_language = "en"
-
-[languages.hi]
-title = "मेरी वेबसाइट"
-
-[languages.es]
-title = "Mi web"
-```
-
-On each language's section, you can set other variables like `taxonomies`, `description`, whether to generate a feed… Refer to Zola's [multilingual support documentation](https://www.getzola.org/documentation/content/multilingual/) for more information.
-
-## What are these two letter codes?
-
-The two letter codes are [ISO 639-1 language codes](https://localizely.com/iso-639-1-list/) (or [IETF BCP 47](https://en.wikipedia.org/wiki/IETF_language_tag), when necessary). They are used to identify languages in a standardised way.
-
-tabi uses these codes to allow navigation between languages and translate the theme.
-
-## How do I customise or override a specific text string on my website?
-
-tabi looks for the strings files in the following order. `$base_directory` is where your Zola site resides (where `config.toml` is stored):
-
-1. `$base_directory + "i18n"`
-2. `$base_directory + "themes/tabi/i18n"`
-
-So if you create  `i18n/en.toml` in your base directory, tabi will read the strings from that file instead of the default English strings. You can do this for any language, supported or not.
-
-Make sure to copy the entire file for that language first, or the theme will fall back to the default English strings.
-
-## What happens if a translation is missing or incomplete?
-
-If a string is not found in the language file, tabi will fall back to the default English string.
-
-## My language is not supported. Can I contribute a translation?
-
-Please do! We are always looking to add support for more languages. You can contribute a translation by creating a pull request in the [tabi repository](https://github.com/welpo/tabi).
-
-You can use the [English file](https://github.com/welpo/tabi/blob/main/i18n/en.toml) as a base to translate the strings to your language. Please make sure to follow the same structure.
-
-The file should be named after the two letter code of your language, and should be a TOML file. For example, if you want to add support for Swahili, you can create a file named `sw.toml` in the `i18n` directory.
-
-Note: when testing your translation, you might need to restart `zola serve` to see the changes, as Zola doesn't always detect changes in the TOML files.
-
-## I've found an error in a translation. How do I fix it?
-
-If you find an error in a translation, you can create an issue or a pull request in the [tabi repository](https://github.com/welpo/tabi).
-
-## How do I update the translations after a theme update?
-
-If you didn't customise the translations, simply updating the theme will update the translations.
-
-If you did, you will need to manually update the translations. You can do this by copying the new strings from the corresponding files, and pasting them in your custom file.
-
-## Does tabi translate my content?
-
-No. tabi only translates the theme's text strings. You will need to translate your content yourself.

content/blog/highly-scalable-minecraft-cluster/index.md

@@ -0,0 +1,89 @@
++++
+title = "Highly scalable Minecraft cluster"
+date = 2023-11-03
+updated = 2023-11-03
+description = "How to build and configure a highly scalable Minecraft server"
+
+[taxonomies]
+tags = ["kubernetes", "minecraft", "cluster"]
+
+[extra]
+toc = false
+quick_navigation_buttons = true
++++
+Are you planning a very large Minecraft LAN party? Then this article is for you. Here I show you how to set up a highly scalable Minecraft cluster.
+
+
+### What is a Minecraft cluster?
+
+A Minecraft cluster is a Minecraft server network that consists of multiple Minecraft servers. These servers are connected to each other via a network and can therefore be shared. This means that you can play with your friends on a server that consists of multiple servers.
+
+### How does a Minecraft cluster work?
+
+A Minecraft cluster consists of several components. 
+
+<!-- Image -->
+![Minecraft cluster](https://github.com/MultiPaper/MultiPaper/raw/main/assets/multipaper-diagram.jpg)
+
+#### Master database
+First, there is the master database. This database allows servers to store data in a central location that all servers can access. Servers store chunks, maps, level.dat, player data, banned players, and more in this database. This database also records which chunk belongs to which server and coordinates communication between servers.
+
+#### Server
+The master database is great for storing data, but not so good at synchronizing data in real time between servers. This is where peer-to-peer communication comes in. Each server establishes a connection to another server so that data between them can be updated in real time. When a player on server A attacks another player on server B, server A sends this data directly to server B so that server B can damage the player and apply any knockback.
+
+#### Load Balancer
+The load balancer is the last component of the cluster. A load balancer is required to distribute players evenly across your servers. A load balancer automatically distributes players between servers to distribute the load evenly across the individual servers.
+
+### Why do I need multiple servers?
+By having multiple servers, we can distribute the load across multiple servers. This means that we can have more players on our servers without the servers becoming overloaded. With this setup, we can also easily add new servers if we get more players. If the number of players decreases again, the server can be removed again.
+
+## Preparation
+
+You should be familiar with Kubernetes and have set up a Kubernetes cluster. I recommend [k3s](https://k3s.io/).
+
+You should also be familiar with Helm. I recommend [Helm 3](https://helm.sh/docs/intro/install/).
+
+## Installation
+
+First, you should clone the repository.
+
+```bash
+git clone git@github.com:alexohneander/MultiPaperHelm.git
+cd MultiPaperHelm/
+```
+
+I installed the entire setup in a separate namespace. You can create this namespace with the following command.
+
+```bash
+kubectl create namespace minecraft
+```
+
+Next, we install the Minecraft cluster with Helm.
+
+```bash
+helm install multipaper . --namespace minecraf
+```
+
+Once the Helm chart is installed, you can view the port of the proxy service.
+
+```bash
+kubectl describe service multipaper-master-proxy -n minecraft
+```
+
+This port is the port that you need to enter in your Minecraft client.
+
+## Configuration
+
+The Helm chart creates several ConfigMaps. In these ConfigMaps, you can customize the configuration of your cluster.
+
+For example, you can set the number of maximum players or change the description of the server.
+
+For more information on the individual config files, see [MultiPaper](https://github.com/MultiPaper/MultiPaper).
+
+## Conclusion
+
+With this setup, you can easily set up a highly scalable Minecraft cluster. You can easily add new servers if you get more players and remove them again if the number of players decreases again.
+
+You can test this setup under the following Server Address: `minecraft.alexohneander.de:31732`
+
+If you have any questions, feel free to contact me on [Email](mailto:moin@wellnitz-alex.de) or on [Matrix](https://matrix.to/#/@alexohneander:dev-null.rocks).

content/blog/javascript/index.ca.md

@@ -1,46 +0,0 @@
-+++
-title = "Sense JavaScript obligatori"
-date = 2023-01-06
-updated = 2024-12-15
-description = "JavaScript només s'utilitza quan HTML i CSS no són suficients."
-
-[taxonomies]
-tags = ["funcionalitat", "tutorial"]
-
-[extra]
-social_media_card = "social_cards/ca_blog_javascript.jpg"
-+++
-
-Aquest tema no requereix JavaScript obligatori. Opcionalment, pot carregar una quantitat mínima per afegir algunes característiques que són impossibles d'aconseguir amb HTML i CSS.
-
-## Opcions habilitades globalment
-
-- [**Cerca**](@/blog/mastering-tabi-settings/index.ca.md#cerca). Activada establint un idioma per defecte i `build_search_index = true` a la secció principal de `config.toml`. (~23KB de JavaScript)
-
-- L'**interruptor de mode clar/fosc** es pot habilitar configurant `theme_switcher = true` a la secció `[extra]` del teu `config.toml` (~1KB de JavaScript).
-
-- **Decodificació de correu electrònic** (~400 bytes). Per protegir contra robots de correu brossa, pots configurar `encode_plaintext_email = true`. Si el teu lloc web està en un repositori públic, considera utilitzar el teu `email` com una cadena codificada en base64[^1].
-
-## Opcions que es poden sobreescriure de forma jeràrquica
-
-Les següents opcions es poden especificar per a publicacions, seccions i globalment, seguint la jerarquia de `pàgina > secció > config.toml`:
-
-- [**Suport de KaTeX**](@/blog/markdown/index.ca.md#katex). Habilitat configurant `katex = true` (274 KB). Per renderitzar fórmules sense JS, prova [MathML](https://developer.mozilla.org/docs/Web/MathML/).
-- [**Diagrames de Mermaid**](@/blog/shortcodes/index.ca.md#diagrames-de-mermaid). Habilitat configurant `mermaid = true` (~2.5 MB).
-- [**Còpia de blocs de codi amb un sol clic**](@/blog/markdown/index.ca.md#bloc-de-codi). Habilitada configurant `copy_button = true`. (~700 bytes)
-- [**Mostrar ruta/URL a blocs de codi**](@/blog/shortcodes/index.ca.md#mostrar-ruta-o-url). S'activa configurant `add_src_to_code_block = true`. (~400 bytes)
-- [**Filtratge per etiquetes** per a graelles de targetes](@/blog/mastering-tabi-settings/index.ca.md#filtrar-projectes) (p. ex. [projectes](@/projects/_index.ca.md)) (~2KB). S'habilita configurant `enable_cards_tag_filtering = true`.
-
-Per especificar aquestes opcions:
-
-- **Globalment**: Afegeix-les sota la secció `[extra]` al teu `config.toml`.
-- **Per a una secció**: Afegeix-les sota la secció `[extra]` al front matter de l'`_index.md` de la secció.
-- **Per a una publicació individual**: Configura les variables corresponents a la secció `[extra]` del front matter de la publicació.
-
-## Opcions que es poden habilitar globalment o per a publicacions individuals
-
-- [**Comentaris**](@/blog/comments/index.ca.md). giscus (2 KB), utterances (1 KB), Hyvor Talk (~800 bytes) o Isso (1KB) es poden habilitar globalment configurant `enabled_for_all_posts = true` a la secció apropiada del teu `config.toml` (`[extra.giscus]`, `[extra.utterances]`, `[extra.hyvortalk]` o `[extra.isso]`). Per habilitar comentaris en publicacions individuals, configura el nom del sistema `= true` (per exemple, `hyvortalk = true`) al front matter del post.
-
-A part d'això, és un tema ràpid amb HTML i CSS que funciona sense JavaScript. Just com hauria de ser (la majoria de) la web :-)
-
-[^1]: Per codificar el teu correu en base64 pots utilitzar [eines en línia](https://www.base64encode.org/) o, al terminal, executa: `printf 'mail@example.com' | base64`.

content/blog/javascript/index.es.md

@@ -1,46 +0,0 @@
-+++
-title = "Sin JavaScript obligatorio"
-date = 2023-01-06
-updated = 2024-12-15
-description = "JavaScript solo se utiliza cuando HTML y CSS no son suficientes."
-
-[taxonomies]
-tags = ["funcionalidad", "tutorial"]
-
-[extra]
-social_media_card = "social_cards/es_blog_javascript.jpg"
-+++
-
-Este tema no requiere JavaScript de manera obligatoria. Opcionalmente, puede cargar una cantidad mínima de JavaScript para añadir algunas características que son imposibles de lograr con solo HTML y CSS.
-
-## Opciones habilitadas globalmente
-
-- [**Búsqueda**](@/blog/mastering-tabi-settings/index.es.md#busqueda). Habilitada estableciendo un idioma por defecto y `build_search_index = true` en la sección principal de `config.toml`. (~23KB de JavaScript)
-
-- El **interruptor de modo claro/oscuro** puede habilitarse configurando `theme_switcher = true` en la sección `[extra]` de tu `config.toml` (~1KB de JavaScript).
-
-- **Descodificación de correo electrónico** (~400 bytes). Para proteger contra bots que recopilan correos electrónicos desde tu sitio web, puedes configurar `encode_plaintext_email = true`. Si tu sitio está en un repositorio público, para mayor protección, considera configurar tu `email` como una cadena codificada en base64[^1].
-
-## Opciones que se pueden sobreescribir de forma jerárquica
-
-Las siguientes opciones pueden especificarse para publicaciones, secciones y a nivel global, siguiendo la jerarquía de `página > sección > config.toml`:
-
-- [**Soporte de KaTeX**](@/blog/markdown/index.es.md#katex). Habilitado al configurar `katex = true` (274 KB). Para renderizar fórmulas sin JS, prueba [MathML](https://developer.mozilla.org/docs/Web/MathML/).
-- [**Diagramas de Mermaid**](@/blog/shortcodes/index.es.md#diagramas-de-mermaid). Habilitado al configurar `mermaid = true` (~2.5 MB).
-- [**Copia de bloques de código con un solo clic**](@/blog/markdown/index.es.md#bloque-de-codigo). Habilitado al configurar `copy_button = true` (~700 bytes).
-- [**Mostrar ruta/URL en bloques de código**](@/blog/shortcodes/index.es.md#mostrar-ruta-o-url). Se activa configurando `add_src_to_code_block = true`. (~400 bytes)
-- [**Filtraje por etiquetas** para cuadrículas de tarjetas](@/blog/mastering-tabi-settings/index.es.md#filtrar-proyectos) (p. ej. [proyectos](@/projects/_index.es.md)) (~2KB). Habilitado al configurar `enable_cards_tag_filtering = true`.
-
-Para especificar estas opciones:
-
-- **Globalmente**: Añádelas en la sección `[extra]` de tu `config.toml`.
-- **Para una sección**: Añádelas en la sección `[extra]` del front matter del `_index.md` de la sección.
-- **Para una publicación individual**: Configura las variables correspondientes en la sección `[extra]` del front matter de la publicación.
-
-## Opciones que pueden habilitarse globalmente o para publicaciones individuales
-
-- [**Comentarios**](@/blog/comments/index.es.md). giscus (2 KB), utterances (1 KB), Hyvor Talk (~800 bytes) o Isso (1KB) pueden habilitarse globalmente configurando `enabled_for_all_posts = true` en la sección apropiada de tu `config.toml` (`[extra.giscus]`, `[extra.utterances]`, `[extra.hyvortalk]` o `[extra.isso]`). Para habilitar comentarios en publicaciones individuales, configura el nombre del sistema `= true` (por ejemplo, `hyvortalk = true`) en el front matter de la publicación.
-
-Aparte de eso, es un tema rápido con HTML y CSS que funciona con JavaScript deshabilitado. Justo como debería ser (la mayoría de) la web :-)
-
-[^1]: Para codificar tu correo electrónico en base64 puedes usar [herramientas en línea](https://www.base64encode.org/) o, en tu terminal, ejecutar: `printf 'mail@example.com' | base64`.

content/blog/javascript/index.md

@@ -1,46 +0,0 @@
-+++
-title = "No mandatory JavaScript"
-date = 2023-01-06
-updated = 2024-12-15
-description = "JavaScript is only used when HTML and CSS aren't enough."
-
-[taxonomies]
-tags = ["showcase", "tutorial"]
-
-[extra]
-social_media_card = "social_cards/blog_javascript.jpg"
-+++
-
-This theme has no mandatory JavaScript. Optionally, it can load a minimal amount to add some features that are impossible to achieve with HTML and CSS.
-
-## Globally enabled settings
-
-- [**Search**](@/blog/mastering-tabi-settings/index.md#search). Enabled by setting a default language and `build_search_index = true` on the main section of `config.toml`. (~23KB of JavaScript)
-
-- The **light/dark mode switch** can be enabled by setting `theme_switcher = true` in the `[extra]` section of your `config.toml` (~1KB of JavaScript).
-
-- **E-mail decoding** (~400 bytes). To protect against spambots scraping your e-mail from your website, you can set `encode_plaintext_email = true`. If your site is on a public repository, for extra protection, consider setting your `email` as a base64-encoded string[^1] directly.
-
-## Settings with hierarchical override capability
-
-The following settings can be specified for posts, sections and globally, following the hierarchy of `page > section > config.toml`:
-
-- [**KaTeX support**](@/blog/markdown/index.md#katex). Enabled by setting `katex = true` (274 KB). To render math without JS, check out [MathML](https://developer.mozilla.org/docs/Web/MathML/).
-- [**Mermaid diagrams**](@/blog/shortcodes/index.md#mermaid-diagrams). Enabled by setting `mermaid = true` (~2.5 MB).
-- [**One-click copy of code blocks**](@/blog/markdown/index.md#code-block). Enabled by setting `copy_button = true`. (~700 bytes)
-- [**Showing source (path or URL) in code blocks**](@/blog/shortcodes/index.md#show-source-or-path). Enabled by setting `add_src_to_code_block = true`. (~300 bytes)
-- [**Tag filtering** for card grids](@/blog/mastering-tabi-settings/index.md#filtering-projects) (e.g. [projects](@/projects/_index.md)) (~2KB). Enabled by setting `enable_cards_tag_filtering = true`.
-
-To specify these settings:
-
-- **Globally**: Add them under the `[extra]` section in your `config.toml` file.
-- **For a section**: Add them under the `[extra]` section in the front matter of the section's `_index.md`.
-- **For an individual post**: Set the corresponding variables in the `[extra]` section of the post's front matter.
-
-## Settings that can be enabled globally or for individual posts
-
-- [**Comments**](@/blog/comments/index.md). giscus (2 KB), utterances (1 KB), Hyvor Talk (~800 bytes) or Isso (1KB) can be globally enabled by setting `enabled_for_all_posts = true` in the right section of your  `config.toml` (i.e. `[extra.giscus]`, `[extra.utterances]`, `[extra.hyvortalk]` or `[extra.isso]`). To enable comments on individual posts, set the name of the system `= true` (e.g. `hyvortalk = true`) in the post's front matter.
-
-Other than that, it's a fast theme with HTML and CSS which works with JavaScript disabled. Just the way (most of) the web should be :-)
-
-[^1]: To encode your email in base64 you can use [online tools](https://www.base64encode.org/) or, on your terminal, run: `printf 'mail@example.com' | base64`.

content/blog/markdown/index.ca.md

@@ -1,108 +0,0 @@
-+++
-title = "Exemples de Markdown"
-date = 2023-01-31
-updated = 2024-11-23
-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]
-tags = ["markdown", "funcionalitat"]
-
-[extra]
-katex = true
-social_media_card = "social_cards/ca_blog_markdown.jpg"
-+++
-
-## $\KaTeX$
-
-[$\KaTeX$](https://katex.org/) és una llibreria ràpida i fàcil d'usar que permet representar notació matemàtica mitjançant la sintaxi LaTeX.
-
-Pots utilitzar $\KaTeX$ **en línia** embolcallant l'expressió entre `$` o entre `\\(` i `\\)`.
-
-Per exemple, `$ \sin(x) = \sum_{n=0}^{\infty} \frac{(-1)^n}{(2n + 1)!} x^{2n + 1} $` es renderitzarà com: $ \sin(x) = \sum_{n=0}^{\infty} \frac{(-1)^n}{(2n + 1)!} x^{2n + 1} $
-
-Per mostrar l'expressió **en una línia pròpia i centrada**, embolcalla-la amb `$$` o entre `\\[` i `\\]`.
-
-Per exemple, `\\[ r = \frac{\sum_{i=1}^{n}(x_i - \bar{x})(y_i - \bar{y})}{\sqrt{\sum_{i=1}^{n}(x_i - \bar{x})^2}\sqrt{\sum_{i=1}^{n}(y_i - \bar{y})^2}} \\]` es renderitzarà com: \\[ r = \frac{\sum_{i=1}^{n}(x_i - \bar{x})(y_i - \bar{y})}{\sqrt{\sum_{i=1}^{n}(x_i - \bar{x})^2}\sqrt{\sum_{i=1}^{n}(y_i - \bar{y})^2}} \\]
-
-Per activar $\KaTeX$ en una publicació o secció sencera, inclou `katex = true` dins de la secció `[extra]` de les metadades. Per exemple:
-
-```toml,hl_lines=5-6
-title = "Provant KaTeX"
-date = 2002-11-30
-
-[extra]
-katex = true
-```
-
-Per activar-lo globalment, afeigeix `katex = true` a la secció `[extra]` del teu `config.toml`.
-
-Per obtenir un millor rendiment i seguretat, els fitxers JavaScript, CSS i les tipografies de $\KaTeX$ s'allotgen localment.
-
-**Nota**: Després d'activar $\KaTeX$, si vols utilitzar el caràcter \$ sense renderitzar-lo com a expressió matemàtica, escapa'l amb una barra inversa: `\$`.
-
-## Taula
-
-Aquí tens un exemple de taula[^1]. Els seus colors canvien en funció del tema actual.
-
-| Símbol  | Element | Nombre atòmic |
-|---------|---------|---------------|
-| H       | Hidrogen| 1             |
-| C       | Carboni | 6             |
-| Fe      | Ferro   | 26            |
-| Au      | Or      | 79            |
-
-## Bloc de codi
-
-```rust
-fn main() {
-    println!("Hola, món!") -> ();
-}
-```
-
-### Amb numeració de línies
-
-```rust,linenos
-use std::collections::HashMap;
-
-#[derive(Debug)]
-struct TwinPeaksCharacter {
-    name: String,
-    coffee_rating: f32,
-    pie_preference: String,
-}
-
-fn main() {
-    let mut black_lodge = HashMap::new();
-
-    black_lodge.insert("agent", TwinPeaksCharacter {
-        name: String::from("Dale Cooper"),
-        coffee_rating: 9999.99,
-        pie_preference: String::from("Damn Fine Cherry"),
-    });
-
-    black_lodge.insert("giant", TwinPeaksCharacter {
-        name: String::from("The Fireman"),
-        coffee_rating: 42.424242,
-        pie_preference: String::from("Garmonbozia"),
-    });
-
-    // Calculate total appreciation of damn fine coffee
-    let total_coffee: f32 = black_lodge.values()
-        .map(|character| character.coffee_rating)
-        .sum();
-
-    println!("☕ Total coffee appreciation: {:.2} cups", total_coffee);
-}
-```
-
-## Etiquetes de codi
-
-A Rust, declares una variable mutable amb `let mut x = 5;`, mentre que a Python, simplement fas `x = 5`. De manera similar, per imprimir un valor a Rust, utilitzaries `println!("Valor: {}", x);`, però a Python, és tan senzill com `print(f"Valor: {x}")`.
-
-## Quote
-
-> «La vida, perquè sigui vida, s'ha de viure a poc a poc…»
->
-> — Mercè Rodoreda, La plaça del Diamant
-
-[^1]: I aquí tens un exemple de nota a peu de pàgina!

content/blog/markdown/index.es.md

@@ -1,108 +0,0 @@
-+++
-title = "Ejemplos de Markdown"
-date = 2023-01-31
-updated = 2024-11-23
-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]
-tags = ["markdown", "funcionalidad"]
-
-[extra]
-katex = true
-social_media_card = "social_cards/es_blog_markdown.jpg"
-+++
-
-## $\KaTeX$
-
-[$\KaTeX$](https://katex.org/) es una biblioteca rápida y fácil de usar que permite la representación de notación matemática utilizando sintaxis LaTeX.
-
-Puedes usar $\KaTeX$ **en línea** al envolver la expresión entre `$` o entre `\\(` y `\\)`.
-
-Por ejemplo, `$ \sin(x) = \sum_{n=0}^{\infty} \frac{(-1)^n}{(2n + 1)!} x^{2n + 1} $` se mostraría como: $ \sin(x) = \sum_{n=0}^{\infty} \frac{(-1)^n}{(2n + 1)!} x^{2n + 1} $
-
-Para mostrar la expresión **en su propia línea y centrada**, envuélvela entre `$$` o entre `\\[` y `\\]`.
-
-Por ejemplo, `\\[ r = \frac{\sum_{i=1}^{n}(x_i - \bar{x})(y_i - \bar{y})}{\sqrt{\sum_{i=1}^{n}(x_i - \bar{x})^2}\sqrt{\sum_{i=1}^{n}(y_i - \bar{y})^2}} \\]` se mostraría como: \\[ r = \frac{\sum_{i=1}^{n}(x_i - \bar{x})(y_i - \bar{y})}{\sqrt{\sum_{i=1}^{n}(x_i - \bar{x})^2}\sqrt{\sum_{i=1}^{n}(y_i - \bar{y})^2}} \\]
-
-Para activar $\KaTeX$ en una publicación o sección entera, incluye `katex = true` dentro de la sección `[extra]` del encabezado. Por ejemplo:
-
-```toml,hl_lines=5-6
-title = "Probando KaTeX"
-date = 2002-11-30
-
-[extra]
-katex = true
-```
-
-Para activarlo globalmente, añade `katex = true` en la sección `[extra]` de tu `config.toml`.
-
-Para un mejor rendimiento y seguridad, el JavaScript, CSS y las fuentes de $\KaTeX$ se alojan localmente.
-
-**Nota**: Después de habilitar $\KaTeX$, si deseas usar \$ sin representar una expresión matemática, escápalo con una sola barra invertida: `\$`.
-
-## Tabla
-
-Aquí tienes un ejemplo de una tabla[^1]. Los colores cambian dependiendo del tema actual.
-
-| Símbolo | Elemento | Número atómico |
-|---------|----------|----------------|
-| H       | Hidrógeno| 1              |
-| C       | Carbono  | 6              |
-| Fe      | Hierro   | 26             |
-| Au      | Oro      | 79             |
-
-## Bloque de código
-
-```rust
-fn main() {
-    println!("¡Hola, mundo!") -> ();
-}
-```
-
-### Con números de línea
-
-```rust,linenos
-use std::collections::HashMap;
-
-#[derive(Debug)]
-struct TwinPeaksCharacter {
-    name: String,
-    coffee_rating: f32,
-    pie_preference: String,
-}
-
-fn main() {
-    let mut black_lodge = HashMap::new();
-
-    black_lodge.insert("agent", TwinPeaksCharacter {
-        name: String::from("Dale Cooper"),
-        coffee_rating: 9999.99,
-        pie_preference: String::from("Damn Fine Cherry"),
-    });
-
-    black_lodge.insert("giant", TwinPeaksCharacter {
-        name: String::from("The Fireman"),
-        coffee_rating: 42.424242,
-        pie_preference: String::from("Garmonbozia"),
-    });
-
-    // Calculate total appreciation of damn fine coffee
-    let total_coffee: f32 = black_lodge.values()
-        .map(|character| character.coffee_rating)
-        .sum();
-
-    println!("☕ Total coffee appreciation: {:.2} cups", total_coffee);
-}
-```
-
-## Etiquetas de código
-
-En Rust, declaras una variable mutable con `let mut x = 5;`, mientras que en Python, simplemente usas `x = 5`. De manera similar, para imprimir un valor en Rust, utilizarías `println!("Valor: {}", x);`, pero en Python, es tan sencillo como `print(f"Valor: {x}")`.
-
-## Cita
-
-> «A mí me sobra el cuerpo, Orfeo, me sobra el cuerpo porque me falta alma.»
->
-> — Miguel de Unamuno, Niebla
-
-[^1]: ¡Y aquí tienes un ejemplo de una nota al pie de página!

content/blog/markdown/index.md

@@ -1,108 +0,0 @@
-+++
-title = "Markdown examples"
-date = 2023-01-31
-updated = 2024-11-23
-description = "This post showcases some examples of Markdown formatting, including a table, code blocks and tags, quotes, tables, and footnotes."
-
-[taxonomies]
-tags = ["markdown", "showcase"]
-
-[extra]
-katex = true
-social_media_card = "social_cards/blog_markdown.jpg"
-+++
-
-## $\KaTeX$
-
-[$\KaTeX$](https://katex.org/) is a fast and easy-to-use library that enables the rendering of mathematical notation, using LaTeX syntax.
-
-You can use $\KaTeX$ **inline** by wrapping the expression between `$` or between `\\(` and `\\)`.
-
-For example, `$ \sin(x) = \sum_{n=0}^{\infty} \frac{(-1)^n}{(2n + 1)!} x^{2n + 1} $` would render: $ \sin(x) = \sum_{n=0}^{\infty} \frac{(-1)^n}{(2n + 1)!} x^{2n + 1} $
-
-To display the expression **on its own line and centered**, wrap it around `$$` or between `\\[` and `\\]`.
-
-For example, `\\[ r = \frac{\sum_{i=1}^{n}(x_i - \bar{x})(y_i - \bar{y})}{\sqrt{\sum_{i=1}^{n}(x_i - \bar{x})^2}\sqrt{\sum_{i=1}^{n}(y_i - \bar{y})^2}} \\]` renders: \\[ r = \frac{\sum_{i=1}^{n}(x_i - \bar{x})(y_i - \bar{y})}{\sqrt{\sum_{i=1}^{n}(x_i - \bar{x})^2}\sqrt{\sum_{i=1}^{n}(y_i - \bar{y})^2}} \\]
-
-To activate $\KaTeX$ for a post or an entire section, include `katex = true` within the `[extra]` section of the front matter. For exemple:
-
-```toml,hl_lines=5-6
-title = "Testing KaTeX"
-date = 2002-11-30
-
-[extra]
-katex = true
-```
-
-You may enable it globally as well, by setting `katex = true` in the `[extra]` section of your `config.toml`.
-
-For enhanced performance and security, the $\KaTeX$ JavaScript, CSS, and fonts are hosted locally.
-
-**Note**: After enabling $\KaTeX$, if you want to use \$ without rendering a mathematical expression, escape it with a single backslash: `\$`.
-
-## Table
-
-Here's an example of a table[^1]. Its colours change depending on the current theme.
-
-| Symbol  | Element | Atomic Number |
-|---------|---------|---------------|
-| H       | Hydrogen| 1             |
-| C       | Carbon  | 6             |
-| Fe      | Iron    | 26            |
-| Au      | Gold    | 79            |
-
-## Code Block
-
-```rust
-fn main() {
-    println!("Hello, world!") -> ();
-}
-```
-
-### With line numbers
-
-```rust,linenos
-use std::collections::HashMap;
-
-#[derive(Debug)]
-struct TwinPeaksCharacter {
-    name: String,
-    coffee_rating: f32,
-    pie_preference: String,
-}
-
-fn main() {
-    let mut black_lodge = HashMap::new();
-
-    black_lodge.insert("agent", TwinPeaksCharacter {
-        name: String::from("Dale Cooper"),
-        coffee_rating: 9999.99,
-        pie_preference: String::from("Damn Fine Cherry"),
-    });
-
-    black_lodge.insert("giant", TwinPeaksCharacter {
-        name: String::from("The Fireman"),
-        coffee_rating: 42.424242,
-        pie_preference: String::from("Garmonbozia"),
-    });
-
-    // Calculate total appreciation of damn fine coffee
-    let total_coffee: f32 = black_lodge.values()
-        .map(|character| character.coffee_rating)
-        .sum();
-
-    println!("☕ Total coffee appreciation: {:.2} cups", total_coffee);
-}
-```
-
-## Code tags
-
-In Rust, you declare a mutable variable with `let mut x = 5;`, whereas in Python, you simply use `x = 5`. Similarly, to print a value in Rust, you would use `println!("Value: {}", x);`, but in Python, it's as straightforward as `print(f"Value: {x}")`.
-
-## Quote
-
-> "We're all hurtling towards death. Yet here we are, for the moment, alive. Each of us knowing we're going to die. Each of us secretly believing we won't."
->
-> — Charlie Kaufman, Synecdoche, New York
-
-[^1]: And here's an example of a footnote!

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

@@ -1,965 +0,0 @@
-+++
-title = "Domina la configuració de tabi: guia completa"
-date = 2023-09-18
-updated = 2024-11-30
-description = "Descobreix les múltiples maneres en què pots personalitzar tabi."
-
-[taxonomies]
-tags = ["funcionalitat", "tutorial", "preguntes freqüents"]
-
-[extra]
-pinned = true
-quick_navigation_buttons = true
-social_media_card = "social_cards/ca_blog_mastering_tabi_settings.jpg"
-+++
-
-Aquesta és la guia completa sobre la configuració a tabi. Si tens alguna pregunta, pots [obrir un issue a GitHub](https://github.com/welpo/tabi/issues/new) o [iniciar una discussió](https://github.com/welpo/tabi/discussions).
-
-<details>
-    <summary><b>Taula de continguts</b></summary>
-    <!-- toc -->
-</details>
-
-## Jerarquia de configuració
-
-tabi té una jerarquia que permet personalitzar el teu lloc a diferents nivells. La jerarquia (de menor a major prioritat) és la següent:
-
-1. **Configuracions globals**: Aquestes són les configuracions que s'apliquen a tot el teu lloc. Es configuren a `config.toml`.
-2. **Configuracions de secció**: Aquestes són les configuracions que s'apliquen a una secció del teu lloc (per exemple, `/blog` o `/projects`). Es configuren a la metainformació de l'arxiu `_index.md` de la secció.
-3. **Configuració de la pàgina «pare»**: Per a pàgines anidades (pàgines dins de pàgines), aquestes són les configuracions de la pàgina que les conté.
-4. **Configuracions de pàgina**: Aquestes són les configuracions que s'apliquen a una sola pàgina. Es configuren a la metainformació de la pàgina.
-
-En tots els casos, les opcions de tabi es configuren a la secció `[extra]`.
-
-Per a les configuracions que segueixen aquesta jerarquia, el valor establert a una pàgina reemplaça el valor d'una secció, que al seu torn reemplaça el valor global. En resum: com més específica sigui la configuració, més prioritat tindrà, o `pàgina > pàgina pare/secció > config.toml`.
-
----
-
-## Cerca
-
-| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
-|:------:|:------:|:-------------:|:--------------------:|:--------------------:|
-|   ❌   |   ❌   |       ✅      |          ❌          |          ✅          |
-
-tabi permet cerca local accessible i multilingüe amb [Elasticlunr](http://elasticlunr.com/). Per activar-la, necessites:
-
-1. Establir un `default_language` a `config.toml`.
-2. Establir `build_search_index = true`.
-3. Opcionalment, configurar la secció `[search]`.
-
-Per exemple:
-
-```toml
-base_url = "https://example.com"
-default_language = "en"
-build_search_index = true
-
-[search]
-index_format = "elasticlunr_json" # O el menys eficient "elasticlunr_javascript".
-include_title = true
-include_description = true
-include_path = true
-include_content = true
-```
-
-**Nota**: per suport de cerca en Xinès/Japonès, necessites utilitzar una [build personalitzada de Zola](https://github.com/getzola/zola/blob/master/Cargo.toml#L54-L55). Addicionalment, actualment no hi ha suport per a la cerca en català.
-
-### Consideracions per a usuaris de Zola 0.17.X
-
-Zola 0.17.X no proporciona accés a la variable `search.index_format` ([informe del bug](https://github.com/getzola/zola/issues/2165)). En utilitzar tabi, s'assumeix l'ús de l'índex JSON, que és més eficient. No obstant això, a causa d'[un altre bug](https://github.com/getzola/zola/issues/2193) solucionat en 0.18.0, l'índex JSON per a llocs multilingües no es genera correctament.
-
-Els usuaris amb versions de Zola anteriors a 0.18.0 que vulguin utilitzar l'índex JavaScript necessiten establir la variable `index_format` a dos llocs:
-
-```toml
-[search]
-index_format = "elasticlunr_javascript"
-
-[extra]
-index_format = "elasticlunr_javascript"
-```
-
-Això assegura que tabi carregui els arxius correctes. Recomanem actualitzar a Zola 0.18.0 o posterior per a una funcionalitat òptima.
-
-### Detalls d'implementació
-
-Per a detalls tècnics sobre la implementació de la cerca, incloent quan es carrega l'índex, característiques d'accessibilitat i altres detalls, consulta el [Pull Request #250](https://github.com/welpo/tabi/pull/250).
-
----
-
-## Suport multilingüe
-
-tabi ofereix suport multilingüe complet per al teu lloc Zola, des de configurar un idioma predeterminat fins a afegir tots els que vulguis. Consulta les [preguntes freqüents sobre idiomes](@/blog/faq-languages/index.ca.md) per a més informació.
-
----
-
-## Aparença
-
-### Pàgina principal
-
-La [pàgina principal](/) d'aquesta demo té una capçalera amb una imatge, un títol i una descripció:
-
-{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/header_light.webp", dark_src="blog/mastering-tabi-settings/img/header_dark.webp", alt="Capçalera de la pàgina principal") }}
-
-#### Capçalera
-
-Per configurar la imatge i el títol, pots utilitzar la variable `header` al front matter de l'arxiu `_index.md` de la secció. Per exemple:
-
-```toml
-[extra]
-header = {title = "Hola! Soc tabi~", img = "img/main.webp", img_alt = "Óscar Fernández, l'autor del tema" }
-```
-
-La descripció és contingut Markdown normal, escrit fora del front matter.
-
-#### Llistant publicacions recents
-
-Per mostrar publicacions a la pàgina principal, primer has de decidir d'on es serviran: de la ruta arrel (`/`) o d'un subdirectori (per exemple, `/blog`).
-
-**Opció A: Servir publicacions des de la ruta arrel (`/`)**
-
-Configura `paginate_by` al front matter del teu arxiu `content/_index.md`:
-
-```toml
-title = "Últimes publicacions"
-sort_by = "date"
-paginate_by = 5  # Mostra 5 publicacions per pàgina.
-
-[extra]
-header = {title = "Hola! Soc tabi~", img = "img/main.webp", img_alt = "El teu nom" }
-```
-
-{{ admonition(type="note", text="La configuració `paginate_by` va al front matter principal, no a la secció `[extra]`.") }}
-
-**Opció B: Servir publicacions des d'un subdirectori (per exemple, `/blog`)**
-
-Utilitza `section_path` a la secció `[extra]` del teu arxiu `content/_index.md`:
-
-```toml
-title = "Últimes publicacions"
-sort_by = "date"
-# No configuris `paginate_by` aquí.
-
-[extra]
-header = {title = "Hola! Soc tabi~", img = "img/main.webp", img_alt = "El teu nom" }
-section_path = "blog/_index.md"  # On trobar les teves publicacions.
-max_posts = 5  # Mostra fins a 5 publicacions a la pàgina principal.
-```
-
-{{ admonition(type="warning", title="ALERTA", text="No configuris `paginate_by` i `section_path` alhora. Aquestes configuracions són mútuament excloents i usar ambdues pot fer que no es mostrin publicacions.") }}
-
-Notes addicionals:
-
-- El `title` al front matter estableix el títol que apareix sobre les publicacions.
-- Utilitza la ruta completa a l'arxiu `_index.md` de la secció per a `section_path`. Usar `section_path = "blog/"` no funcionarà.
-
-##### Fixar entrades
-
-Pots fixar entrades per mantenir-les a la part superior de la pàgina principal. En aquesta demo, aquesta entrada està fixada, així que apareix primera amb una icona i etiqueta de "fixada":
-
-{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/pinned_post_light.webp", dark_src="blog/mastering-tabi-settings/img/pinned_post_dark.webp", alt="Entrada fixada", full_width=true) }}
-
-Les entrades fixades es mostren primer, mantenint el seu ordre relatiu segons el `sort_by` de la secció, seguides per les entrades regulars.
-
-Per fixar una entrada, afegeix el següent al seu front matter:
-
-```toml
-[extra]
-pinned = true
-```
-
-{{ admonition(type="info", text="Aquesta configuració només afecta les pàgines principals del lloc (com `/`, `/es/`, `/fr/`). Altres seccions com `blog/`, `tags/` o `archive/` mostren les publicacions en el seu ordre habitual.") }}
-
-{{ admonition(type="warning", text='Quan s'utilitza la paginació (`paginate_by`), les entrades fixades poden aparèixer dues vegades: una vegada a la part superior de la primera pàgina, i una altra en la seva posició cronològica normal en pàgines posteriors.') }}
-
-##### Mostrar la data dels articles al llistat
-
-Per defecte, quan es llisten els articles, es mostra la data de creació. Pots configurar quina(es) data(es) mostrar utilitzant l'opció `post_listing_date`. Configuracions disponibles:
-
-- `date`: Mostra només la data de publicació original de l'article (opció per defecte).
-- `updated`: Mostra només la data de l'última actualització de l'article. Si no hi ha data d'actualització, es mostra la data de publicació original.
-- `both`: Mostra tant la data de publicació original com la data de l'última actualització.
-
-#### Llistat de Projectes
-
-Pots mostrar una selecció de projectes a la teva pàgina principal. Per fer això, primer necessitaràs configurar el directori `projects`.
-
-Un cop fet això, configura la ruta als projectes a la secció `[extra]` del teu fitxer `_index.md`:
-
-```toml
-[extra]
-projects_path = "projects/_index.md"
-```
-
-Això mostrarà els 3 projectes de major prioritat (amb menor pes; el mateix ordre que a Projectes). Per mostrar més o menys projectes, configura `max_projects` a `[extra]`.
-
-Per defecte, la secció de projectes es mostrarà a la part inferior de la pàgina principal, sota les publicacions. Si prefereixes mostrar-la a la part superior, configura `show_projects_first = true`.
-
-### Commutador de mode clar i fosc
-
-| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
-|:------:|:------:|:-------------:|:---------------:|:-------------------:|
-|   ❌   |   ❌    |      ✅       |        ❌        |         ✅          |
-
-El commutador de mode clar i fosc (la icona de lluna/sol a la cantonada superior dreta) es pot habilitar configurant `theme_switcher = true` a `config.toml`.
-
-### Mode predeterminat (clar/fosc)
-
-| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
-|:------:|:------:|:-------------:|:---------------:|:-------------------:|
-|   ❌   |   ❌    |      ✅       |        ❌        |         ❌          |
-
-El mode predeterminat es pot especificar amb la variable `default_theme`, que accepta `"dark"` o `"light"`. Si no s'especifica, el mode predeterminat és el mode del sistema.
-
-### Skin personalitzada
-
-| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
-|:------:|:------:|:-------------:|:---------------:|:-------------------:|
-|   ❌   |   ❌    |      ✅       |        ❌        |         ❌          |
-
-Les skins («pells») de tabi canvien el color principal del lloc web. Pots configurar la skin a `config.toml` amb `skin = "nom_de_la_skin`. Per exemple, `skin = "lavender"` es veu així (clica per canviar entre mode clar i fosc):
-
-{{ image_toggler(default_src="blog/customise-tabi/skins/lavender_light.webp", toggled_src="blog/customise-tabi/skins/lavender_dark.webp", default_alt="pell lavender en mode clar", toggled_alt="pell lavender en mode fosc", full_width=true) }}
-
-Explora les skins disponibles i aprèn com crear la teva pròpia consultant [la documentació](/ca/blog/customise-tabi/#skins).
-
-### Font sans serif (pal sec)
-
-| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
-|:------:|:------:|:-------------:|:---------------:|:-------------------:|
-|   ❌   |   ❌    |      ✅       |        ❌        |         ❌          |
-
-tabi utilitza una font serif per als paràgrafs dels articles (la que estàs veient ara). Pots canviar a una font sans-serif (la que veus als encapçalaments/menú) a tot el teu lloc configurant `override_serif_with_sans = true` a `config.toml`.
-
-Fes clic a la imatge a continuació per comparar les fonts:
-
-{{ image_toggler(default_src="blog/mastering-tabi-settings/img/serif.webp", toggled_src="blog/mastering-tabi-settings/img/sans-serif.webp", default_alt="Font serif", toggled_alt="Font sans-serif", full_width=true) }}
-
-### Estils CSS personalitzats
-
-| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
-|:------:|:------:|:-------------:|:---------------:|:-------------------:|
-|   ✅   |   ❌    |      ✅       |        ❌        |         ❌          |
-
-Pots carregar estils CSS personalitzats per a tot el lloc web o en pàgines específiques utilitzant `stylesheets`, que accepta una llista de rutes cap a arxius CSS. Per exemple:
-
-```toml
-stylesheets = ["css/custom.css", "css/another.css"]
-```
-
-### Color del tema del navegador
-
-| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
-|:------:|:------:|:-------------:|:---------------:|:-------------------:|
-|   ❌   |   ❌    |      ✅       |        ❌        |         ❌          |
-
-El color del tema del navegador és el color que apareix a la barra de pestanyes del navegador:
-
-{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/browser_theme_color_light.webp", dark_src="blog/mastering-tabi-settings/img/browser_theme_color_dark.webp" alt="pestanyes amb un tema de navegador de color") }}
-
-Pots establir-ho a `config.toml` com a `browser_theme_color = "#087e96"`. Si vols diferents colors per als modes clar/obscur, pots establir un conjunt de colors amb `browser_theme_color = ["#ffffff", "#000000"]`. El primer color és per al mode clar, el segon per al fosc.
-
-Aquesta variable accepta qualsevol color CSS vàlid, així que pots utilitzar paraules clau (per exemple, `blue`), codis hexadecimals (per exemple, `#087e96`) o valors RGB/HSL (per exemple, `rgb(8, 126, 150)`).
-
-### Etiquetes compactes
-
-| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
-|:------:|:------:|:-------------:|:-----------------:|:--------------------:|
-|   ❌   |   ❌   |      ✅       |         ❌        |          ❌          |
-
-Per defecte, la [pàgina d'etiquetes](/ca/tags) mostra les etiquetes com:
-
-[NomEtiqueta](#) — n entrada[es]
-
-Establir `compact_tags = true` les mostrarà com:
-
-[NomEtiqueta](#) <sup>n</sup>
-
-### Ordre de les etiquetes
-
-| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
-|:------:|:------:|:-------------:|:-----------------:|:--------------------:|
-|   ❌   |   ❌   |      ✅       |         ❌        |          ❌          |
-
-Per defecte, la [pàgina d'etiquetes](/ca/tags) ordena les etiquetes alfabèticament, donada la configuració predeterminada de `tag_sorting = "name"`.
-Si configures `tag_sorting = "frequency"`, s'ordenaran segons el nombre de publicacions (de més a menys).
-
----
-
-## Sèries
-
-Per a una explicació detallada, consulta la [documentació de sèries](@/blog/series/index.ca.md).
-
-### Enllaç per saltar a les publicacions
-
-| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
-|:------:|:-------:|:-------------:|:------------------:|:-------------------:|
-|   ❌   |   ✅    |      ✅       |        ✅          |         ❌          |
-
-Per defecte, apareix automàticament un enllaç "Salta a les publicacions" al costat del títol de la sèrie quan una sèrie té un contingut de més de 2000 caràcters:
-
-{{ dual_theme_image(light_src="blog/series/img/jump_to_series_posts_light.webp", dark_src="blog/series/img/jump_to_series_posts_dark.webp" alt="enllaç per saltar a les publicacions de la sèrie", full_width=true) }}
-
-Estableix `show_jump_to_posts = true` per forçar l'activació de la funció i `show_jump_to_posts = false` per desactivar-la.
-
-### Indexació de pàgines de sèries
-
-| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
-|:------:|:-------:|:-------------:|:------------------:|:-------------------:|
-|   ❌   |   ✅    |      ✅       |        ✅          |         ❌          |
-
-Per defecte, les pàgines de sèries s'indexen (usant una indexació basada en 1) segons el `sort_by` de la secció de sèries.
-
-Estableix `post_listing_index_reversed = true` per invertir aquest índex.
-
----
-
-## Integració amb repositoris Git
-
-| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
-|:------:|:-------:|:-------------:|:--------------------:|:--------------------:|
-|   ❓   |    ❓   |       ✅      |          ❓          |          ❌          |
-
-❓: `show_remote_source` sí que segueix [la jerarquia](#jerarquia-de-configuracio) i es pot configurar en una pàgina, secció o de manera global. La resta de les configuracions només es poden establir a `config.toml`.
-
-Aquestes configuracions et permeten vincular el teu lloc web tabi amb un repositori públic de Git a GitHub, GitLab, Gitea o Codeberg. Exemples de configuració:
-
-```toml
-remote_repository_url = "https://github.com/welpo/tabi"
-remote_repository_git_platform = "auto"
-remote_repository_branch = "main"
-show_remote_changes = true
-show_remote_source = true
-```
-
-Això habilita dues funcions:
-
-1. `show_remote_source = true` afegeix un enllaç al codi font del teu lloc web (el teu `remote_repository_url`) que es mostrarà al peu de pàgina:
-
-{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/site_source_light.webp", dark_src="blog/mastering-tabi-settings/img/site_source_dark.webp" alt="Peu de pàgina del lloc web, mostrant un enllaç 'Codi font del lloc'") }}
-
-2. `show_remote_changes = true` afegeix un enllaç "Veure canvis ↗" a l'historial de commits de l'article actualitzat, al costat de la data de l'última actualització [^1]:
-
-{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/see_changes_light.webp", dark_src="blog/mastering-tabi-settings/img/see_changes_dark.webp" alt="Títol de l'article i metadades, mostrant un enllaç 'Veure canvis'") }}
-
-En clicar aquest enllaç, seràs dirigit a l'historial de commits de l'article, on podràs veure els canvis realitzats en ell:
-
-{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/commit_history_light.webp", dark_src="blog/mastering-tabi-settings/img/commit_history_dark.webp" alt="Historial de commits d'un article", full_width=true) }}
-
----
-
-## Pàgines
-
-### Projectes
-
-tabi té una plantilla integrada per a projectes. Per habilitar-la, pots crear un directori a `content/projects/`. Allà, pots crear un fitxer `_index.md` amb el següent contingut al bloc de metadades:
-
-```toml
-title = "Projectes"
-sort_by = "weight"
-template = "cards.html"
-insert_anchor_links = "left"
-
-[extra]
-show_reading_time = false
-quick_navigation_buttons = true
-```
-
-- `title` és el títol de la pàgina.
-- `sort_by` determina com s'ordenen els projectes. Pots ordenar per "date", "update_date", "title", "title_bytes", "weight", "slug" o "none".
-- `template = "cards.html"` estableix la plantilla per renderitzar la pàgina de projectes.
-- `insert_anchor_links = "left"` afegeix enllaços àncora als encapçalaments.
-- `show_reading_time = false` amaga el temps estimat de lectura.
-- `quick_navigation_buttons = true` mostra els botons de navegació ràpida.
-
-Al costat del fitxer `_index.md`, pots crear un fitxer per a cada projecte. Per exemple, aquest és el bloc de metadades per a la pàgina del projecte [tabi](@/projects/tabi/index.ca.md):
-
-```toml
-title = "tabi"
-description = "Un tema de Zola ràpid, lleuger i modern amb suport multilingüe."
-weight = 1
-
-[extra]
-local_image = "img/tabi.webp"
-```
-
-- `title` és el títol del projecte.
-- `description` és la descripció del projecte.
-- `weight` determina l'ordre en què es mostren els projectes. Com menor sigui el pes, més amunt apareixerà el projecte.
-- `local_image` és la ruta de la imatge del projecte. Aquesta imatge es mostra a la pàgina de projectes.
-
-Quan un usuari faci clic a la imatge o al títol d'un projecte, serà portat a la pàgina del projecte. Si prefereixes que els usuaris vagin a un enllaç extern, pots establir `link_to = "https://example.com"` a la secció `[extra]` del fitxer `.md` del projecte.
-
-La pàgina del projecte individual es renderitza amb la plantilla predeterminada, tret que estableixis una altra, per exemple, `template = "info-page.html"`.
-
-#### Filtrar projectes
-
-Si afegeixes etiquetes als teus projectes, veuràs un filtre d'etiquetes:
-
-{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/projects_tag_filter_light.webp", dark_src="blog/mastering-tabi-settings/img/projects_tag_filter_dark.webp", alt="Pàgina de projectes amb filtre d'etiquetes", full_width=true) }}
-
-El sistema de filtratge d'etiquetes utilitza millora progressiva:
-
-- Sense JavaScript: Les etiquetes enllacen directament a pàgines d'etiquetes dedicades (per exemple, `/tags/nom-de-l-etiqueta`).
-- Amb JavaScript: Filtratge instantani, sincronització d'URL (#nom-etiqueta) i navegació amb el teclat.
-
-Per desactivar aquesta funció, estableix `enable_cards_tag_filtering = false` a la secció `[extra]` del fitxer `projects/_index.md` o a `config.toml`.
-
-{% admonition(type="tip") %}
-
-Per filtrar projectes per etiquetes, necessites establir etiquetes a la front matter de cada projecte. Per exemple:
-
-```toml
-title = "nom del projecte"
-weight = 40
-
-[taxonomies]
-tags = ["etiqueta", "etiqueta 2", "tercera etiqueta"]
-```
-
-{% end %}
-
-### Arxiu
-
-Afegir una pàgina d'arxiu és similar a afegir una pàgina de projectes. Pots crear un directori a `content/archive/`. Allà, pots crear un fitxer `_index.md` amb el següent encapçalament:
-
-```toml
-title = "Arxiu"
-template = "archive.html"
-```
-
-Per defecte, l'arxiu llistarà les publicacions situades a `blog/`. Per personalitzar això, pots modificar la secció `[extra]` de l'arxiu `_index.md`:
-
-- **Per a un sol directori**: Estableix `section_path = "directori/"` per llistar publicacions d'un directori específic. Assegura't d'incloure la barra inclinada al final.
-
-- **Per a múltiples directoris**: Si vols agregar publicacions de diversos directoris, especifica la llista a `section_path`. Per exemple:
-
-  ```toml
-  [extra]
-  section_path = ["blog/", "notes/", "camí-tres/"]
-  ```
-
-**Nota**:
-
-- La pàgina d'arxiu només llistarà publicacions amb data.
-- L'ordre de les publicacions ve determinada per la variable `sort_by` de les seccions arxivades. Aquesta demo utilitza `sort_by = "date"` en `blog/_index.md`.
-
-### Etiquetes
-
-tabi té suport integrat per a etiquetes. Per habilitar-les, simplement afegeix la taxonomia al teu `config.toml`:
-
-```toml
-taxonomies = [{name = "tags", feed = true}]
-```
-
-Després, pots afegir etiquetes a les teves publicacions afegint-les a l'array `tags` en el bloc de metadades de la teva publicació. Per exemple:
-
-```toml,hl_lines=05-06
-title = "Els molins de vent de la meva vida: reflexions d'un escuder"
-date = 1605-01-16
-description = "El meu viatge al costat de Don Quixot, enfrontant-me a gegants imaginats i descobrint les veritables batalles de la vida."
-
-[taxonomies]
-tags = ["personal", "reflexions"]
-```
-
-### Pàgina sobre
-
-Si vols tenir una pàgina que no sigui un article, per exemple per a una secció "Sobre", "Contacte" o "Drets d'autor", pots utilitzar la plantilla `info-page.html`.
-
-Primer, crea un directori dins de `content/` amb el nom que prefereixis. Per exemple, `content/pages/`. Després, crea un fitxer `_index.md` dins d'aquest directori. El fitxer hauria de ser així:
-
-```markdown
-+++
-render = false
-insert_anchor_links = "left"
-+++
-```
-
-- `render = false` indica a Zola que no renderitzi la secció.
-- `insert_anchor_links = "left"` afegeix enllaços àncora als encapçalaments. Això és opcional.
-
-Dins del directori, pots crear qualsevol quantitat de fitxers `.md`.
-
-En aquesta demo, la pàgina [Sobre mi](/ca/about/) utilitza la plantilla `info-page.html`. El bloc de metadades és el següent:
-
-```toml
-title = "Sobre mi"
-template = "info-page.html"
-path = "about"
-```
-
-Fixa't com s'estableix `path = "about"`. Zola situarà la pàgina a `$base_url/about/`. Si vols que la pàgina estigui disponible a `/contacte/`, hauries d'establir `path = "contacte"`.
-
----
-
-## SEO
-
-tabi s'encarrega de la majoria de tasques de SEO per a tu (com ara les etiquetes del protocol Open Graph, descripció, paleta de colors...), però hi ha certes configuracions que pots personalitzar.
-
-### Favicon
-
-| Pàgina | Secció  | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
-|:------:|:-------:|:-------------:|:--------------------:|:--------------------:|
-|   ❌   |   ❌    |      ✅       |          ❌          |          ❌           |
-
-El favicon és la petita imatge que es mostra a la pestanya del navegador. Pots establir-la a `config.toml` amb `favicon = "img/favicon.png"`.
-
-### Favicon d'emoji
-
-| Pàgina | Secció  | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
-|:------:|:-------:|:-------------:|:--------------------:|:--------------------:|
-|   ❌   |   ❌    |      ✅       |          ❌          |          ❌           |
-
-També pots establir un emoji com a favicon amb `favicon_emoji`. Per exemple, `favicon_emoji = "👾"`.
-
-Nota: Alguns navegadors no suporten favicons d'emoji. Consulta la taula de compatibilitat a [caniuse](https://caniuse.com/link-icon-svg).
-
-### URL canònica
-
-| Pàgina | Secció  | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
-|:------:|:-------:|:-------------:|:--------------------:|:--------------------:|
-|   ✅   |   ✅    |      ✅       |          ❌          |          ❌           |
-
-L'URL canònica és una manera d'indicar als motors de cerca quina és l'URL preferida per al contingut del teu lloc web. Això és útil per al SEO i per evitar problemes de contingut duplicat.
-
-Per defecte, l'URL canònica és l'URL de la pàgina on et trobes. No obstant això, pots canviar això configurant `canonical_url` al front matter de la teva pàgina o secció.
-
-Si tens un lloc amb una estructura idèntica i contingut coincident, pots configurar `base_canonical_url` al teu `config.toml`. L'URL canònica es crearà substituint el `$base_url` de l'URL actual amb el `$base_canonical_url` que establisquis.
-
-Per exemple, si configures `base_canonical_url = "https://example.com"`, l'URL canònica de la pàgina `$base_url/blog/post1` serà `https://example.com/blog/post1`. Això és útil si tens un lloc amb diversos dominis que comparteixen el mateix contingut.
-
-**Nota**: per assegurar-te que l'URL canònica sigui correcta, probablement serà millor configurar `canonical_url` individualment per a cada pàgina.
-
-### Targetes per a xarxes socials
-
-| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
-|:------:|:------:|:-------------:|:---------------:|:-------------------:|
-|   ✅   |   ✅   |      ✅       |        ✅       |         ❌          |
-
-Les targetes per a xarxes socials són les imatges que es mostren quan comparteixes un enllaç a les xarxes socials:
-
-{{ dimmable_image(src="img/with_social_media_card.webp", alt="Una captura de pantalla de WhatsApp mostrant un enllaç amb una targeta per a xarxes socials") }}
-
-Pots establir la imatge per a xarxes socials amb `social_media_card = "img/social_media_card.png"`.
-
-Pots especificar rutes tant relatives com absolutes.
-
-- **Ruta relativa**: Posiciona la imatge a la mateixa carpeta que la teva entrada de blog i especifica el seu nom. Per exemple, `social_media_card = "relative_image.png"`.
-
-- **Ruta absoluta**: Posiciona la imatge en una carpeta específica i especifica la ruta des de l'arrel. Per exemple, `social_media_card = "/img/absolute_image.png"`.
-
-Si ambdues rutes, relativa i absoluta, són vàlides, la ruta relativa tindrà prioritat.
-
-Ja que segueix la [jerarquia](#jerarquia-de-configuracio), si no està configurat en una pàgina, però sí ho està en una secció, s'utilitzarà la imatge de la secció. Si no està configurat en una pàgina o secció, però sí en `config.toml`, s'utilitzarà la imatge global.
-
-{{ admonition(type="tip", title="CONSELL", text="Automatitza la seva creació amb un [script](https://github.com/welpo/osc.garden/blob/main/static/code/social-cards-zola): [Automatitzant les vistes prèvies dels enllaços amb Zola](https://osc.garden/ca/blog/automating-social-media-cards-zola/).") }}
-
-### Creador del fedivers
-
-| Pàgina | Secció | `config.toml` | Segueix jerarquia | Requereix JavaScript |
-|:------:|:------:|:-------------:|:-----------------:|:--------------------:|
-|   ❌   |   ❌   |      ✅       |         ❌        |          ❌          |
-
-Pots mostrar el perfil del fedivers de l'autor en les previsualitzacions d'enllaços de Mastodon configurant la variable `fediverse_creator` al teu `config.toml`. Per exemple, per a @username@example.com, fes servir:
-
-```toml
-fediverse_creator = { handle = "username", domain = "example.com" }
-```
-
----
-
-## Navegació
-
-### Barra de navegació
-
-| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
-|:------:|:------:|:-------------:|:---------------:|:-------------------:|
-|   ❌   |   ❌   |      ✅       |        ❌       |         ❌          |
-
-La barra de navegació és la franja a la part superior de la pàgina que conté el títol del lloc i el menú de navegació. Pots personalitzar els elements que apareixen configurant `menu` en `config.toml`. Per exemple:
-
-```toml
-menu = [
-    { name = "blog", url = "blog", trailing_slash = true },
-    { name = "arxiu", url = "archive", trailing_slash = true },
-    { name = "etiquetes", url = "tags", trailing_slash = true },
-    { name = "projectes", url = "projects", trailing_slash = true },
-    { name = "sobre nosaltres", url = "about", trailing_slash = true },
-]
-```
-
-### Botons de navegació ràpida
-
-| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
-|:------:|:------:|:-------------:|:---------------:|:-------------------:|
-|   ✅   |   ✅   |      ✅       |        ✅       |         ❌          |
-
-Els botons de navegació ràpida són els botons que apareixen a la part inferior dreta de la pantalla. Hauries de veure'ls en aquesta pàgina, si no estàs en un dispositiu mòbil. Es veuen així:
-
-{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/quick_navigation_buttons_light.webp", dark_src="blog/mastering-tabi-settings/img/quick_navigation_buttons_dark.webp", alt="Botons de navegació ràpida") }}
-
-Per activar-los, estableix `quick_navigation_buttons = true`.
-
-### Taula de continguts
-
-| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
-|:------:|:------:|:-------------:|:------------------:|:--------------------:|
-|   ✅   |   ✅   |      ✅       |        ✅          |          ❌          |
-
-Activa l'índex de continguts just sota del títol i metadades de l'article amb `toc = true`.
-
-Per saber més sobre com personalitzar-ho, consulta [la documentació sobre la Taula de continguts](@/blog/toc/index.ca.md).
-
-### Enllaços als articles anterior i següent
-
-| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
-|:------:|:------:|:-------------:|:--------------------:|:--------------------:|
-|   ✅   |   ✅   |      ✅       |          ✅          |         ❌          |
-
-Mostra enllaços als articles anterior i següent a la part inferior dels posts. Es veu així:
-
-{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/show_previous_next_article_links_light.webp", dark_src="blog/mastering-tabi-settings/img/show_previous_next_article_links_dark.webp", alt="Enllaços als articles anterior i següent", full_width=true) }}
-
-Per activar aquesta funció, estableix `show_previous_next_article_links = true` i assegura't que la secció té un valor `sort_by` (per exemple `sort_by = "date"`).
-
-Per defecte, els articles següents estaran al costat esquerre de la pàgina i els articles anteriors al costat dret.
-Per invertir l'ordre (articles següents al costat dret i articles anteriors al costat esquerre), configura `invert_previous_next_article_links = true`.
-
-Per defecte, aquesta secció de navegació tindrà l'amplada completa del lloc (igual que la barra de navegació de la part superior). Per fer-la més estreta, coincidint amb l'amplada de l'article, configura `previous_next_article_links_full_width = false`.
-
-Totes aquestes configuracions segueixen la jerarquia.
-
-### Enllaços de retorn a les notes a peu de pàgina
-
-{{ admonition(type="warning", title="ADVERTÈNCIA DE DEPRECACIÓ", text="Zola v0.19.0 i posterior pot fer això de forma nativa. Estableix `bottom_footnotes = true` a la secció `[markdown]` de la teva configuració.") }}
-
-| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
-|:------:|:------:|:-------------:|:------------------:|:--------------------:|
-|   ✅   |   ✅   |      ✅       |        ✅          |          ✅          |
-
-Establir `footnote_backlinks = true` afegirà enllaços de retorn a les notes a peu de pàgina de les teves publicacions, com aquest:
-
-{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/footnote_backlinks_light.webp", dark_src="blog/mastering-tabi-settings/img/footnote_backlinks_dark.webp", alt="Enllaços de retorn a les notes a peu de pàgina", full_width=true) }}
-
-Quan facis clic en un enllaç de retorn (la fletxa ↩), et portarà de tornada al punt del text on es va fer referència a la nota a peu de pàgina.
-
----
-
-## Usabilitat
-
-### Botó de copiar en blocs de codi
-
-| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
-|:------:|:------:|:-------------:|:------------------:|:--------------------:|
-|   ✅   |   ✅   |      ✅       |        ✅          |          ✅          |
-
-Establir `copy_button = true` afegirà un petit botó de copiar a la part superior dreta dels blocs de codi, com aquest:
-
-{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/copy_button_on_code_blocks_light.webp", dark_src="blog/mastering-tabi-settings/img/copy_button_on_code_blocks_dark.webp", alt="Botó de copiar en blocs de codi", full_width=true) }}
-
-### Mostrar ruta/URL en blocs de codi
-
-| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
-|:------:|:-------:|:-------------:|:---------------:|:-------------------:|
-|   ✅   |   ✅    |      ✅       |        ✅       |         ✅          |
-
-Estableix `add_src_to_code_block = true` per habilitar l'ús del [shortcode `add_src_to_code_block`](@/blog/shortcodes/index.ca.md#mostrar-ruta-o-url).
-
-### Forçar blocs de codi d'esquerra a dreta
-
-| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
-|:------:|:------:|:-------------:|:-----------------:|:--------------------:|
-|   ✅   |   ✅   |      ✅       |         ✅        |          ❌          |
-
-Per defecte, els blocs de codi es renderitzen d'esquerra a dreta, independentment de la direcció general del text. Estableix `force_codeblock_ltr = false` per permetre que els blocs de codi segueixin la direcció del document. Útil per a idiomes de dreta a esquerra que necessiten blocs de codi de dreta a esquerra.
-
-### Suport per a KaTeX
-
-| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
-|:------:|:------:|:-------------:|:------------------:|:--------------------:|
-|   ✅   |   ✅   |      ✅       |        ✅          |          ✅          |
-
-KaTeX és una biblioteca JavaScript ràpida i fàcil d'usar per a la representació de matemàtiques TeX a la web. Pots habilitar-ho amb `katex = true`. Mira com es veu en tabi [aquí](/ca/blog/markdown/#katex).
-
-### Suport per a Mermaid
-
-| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
-|:------:|:------:|:-------------:|:-----------------:|:--------------------:|
-|   ✅   |   ✅   |      ✅       |         ✅        |          ✅          |
-
-[Mermaid](https://github.com/mermaid-js/mermaid) és una eina de diagramació i gràfics basada en JavaScript. Pots activar-la amb `mermaid = true`.
-
-Per defecte, la biblioteca Mermaid es serveix localment. Si prefereixes utilitzar un CDN, estableix `serve_local_mermaid = false` a `config.toml`. L'ús d'un CDN servirà la versió més recent de Mermaid; l'opció local servirà la versió inclosa amb tabi.
-
-Consulta la [documentació de Mermaid](@/blog/shortcodes/index.ca.md#diagrames-de-mermaid) per a instruccions d'ús i exemples.
-
-### Subconjunt de tipus de lletra personalitzat
-
-| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
-|:------:|:------:|:-------------:|:------------------:|:--------------------:|
-|   ❌   |   ❌   |      ✅       |        ❌          |          ❌          |
-
-Les tipus de lletra personalitzades causen parpalleig del text en Firefox. Per resoldre això, tabi carrega un subconjunt de glifs per a la capçalera. Donat que això (lleugerament) augmenta el temps de càrrega inicial, és una bona idea intentar minimitzar la mida d'aquest subconjunt.
-
-Pots crear un subconjunt personalitzat adaptat al teu lloc, guardar-lo com a `static/custom_subset.css`, i fer que es carregui amb `custom_subset = true`.
-
-Per obtenir més informació, incloent instruccions sobre com crear un subconjunt personalitzat, consulta la [documentació](@/blog/custom-font-subset/index.ca.md).
-
-### Contingut complet al feed
-
-| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
-|:------:|:-------:|:-------------:|:-------------------:|:-------------------:|
-|   ❌   |   ❌   |      ✅       |         ❌          |         ❌          |
-
-Per defecte, el feed Atom només conté el resum o descripció de les teves publicacions. Pots incloure el contingut complet de les publicacions establint `full_content_in_feed = true` a `config.toml`.
-
-### Amagar contingut del feed
-
-| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
-|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
-|  ✅  |   ✅    |      ✅       |         ✅        |         ❌          |
-
-Pots amagar pàgines específiques o seccions senceres del feed amb `hide_from_feed = true`.
-
-### Comentaris {#afegir-comentaris}
-
-| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
-|:------:|:-------:|:-------------:|:-------------------:|:-------------------:|
-|   ✅   |   ❌   |      ✅       |         ❌          |         ✅          |
-
-Per activar els comentaris en una pàgina, establert el nom del sistema com a `true` al front matter. Per exemple, `utterances = true`.
-
-Si vols activar els comentaris de forma global, pots fer-ho establint `enabled_for_all_posts = true` a la secció apropiada del teu `config.toml` (per exemple, a `[extra.giscus]`).
-
-Si has activat un sistema de forma global i vols desactivar-lo per a una pàgina específica, pots fer-ho establint el nom del sistema com a `false` al front matter. Per exemple, `utterances = false`.
-
-Llegeix la [documentació](@/blog/comments/index.ca.md) per a més informació sobre els sistemes disponibles i la seva configuració.
-
-### Anàlisi web
-
-| Pàgina | Secció  | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
-|:------:|:-------:|:-------------:|:-----------------:|:--------------------:|
-|   ❌   |    ❌   |       ✅       |         ❌         |          ✅          |
-
-tabi ofereix suport per a 3 sistemes d'anàlisi web que respecten la privacitat: [Plausible](https://plausible.io/), [GoatCounter](https://www.goatcounter.com/) i [Umami](https://umami.is/).
-
-Pots configurar-los en la secció `[extra.analytics]` del teu arxiu `config.toml`.
-
-- `service`: el servei a utilitzar. Les opcions disponibles són `"goatcounter"`, `"umami", i "plausible"`.
-
-- `id`: l'identificador únic per al teu servei d'anàlisi. Això varia segons el servei:
-  - Per a GoatCounter, és el codi triat durant el registre. Instàncies auto-allotjades de GoatCounter no requereixen aquest camp.
-  - Per a Umami, és l'ID del lloc web.
-  - Per a Plausible, és el nom de domini.
-
-- `self_hosted_url`: Opcional. Utilitza aquest camp per especificar l'URL si tens una instància auto-allotjada. L'URL base variarà segons la teva configuració particular. Alguns exemples:
-  - Per a GoatCounter: `"https://stats.example.com"`
-  - Per a Umami: `"https://umami.example.com"`
-  - Per a Plausible: `"https://plausible.example.com"`
-
-Un exemple de configuració per a GoatCounter no auto-allotjada seria:
-
-```toml
-[extra.analytics]
-service = "goatcounter"
-id = "tabi"
-self_hosted_url = ""
-```
-
-## Icones al peu de pàgina
-
-### Icones de xarxes socials
-
-| Pàgina | Secció | `config.toml` | Respecta jerarquia | Requereix JavaScript |
-|:------:|:-------:|:-------------:|:------------------:|:-------------------:|
-|   ❌   |   ❌   |      ✅       |         ❌         |         ❌          |
-
-Pots afegir icones de xarxes socials al peu de pàgina amb `socials`, que accepta una llista d'objectes de xarxes socials. Per exemple:
-
-```toml
-socials = [
-    { name = "github", url = "https://github.com/welpo/", icon = "github" },
-    { name = "soundcloud", url = "https://soundcloud.com/oskerwyld", icon = "soundcloud" },
-    { name = "instagram", url = "https://instagram.com/oskerwyld", icon = "instagram" },
-    { name = "youtube", url = "https://youtube.com/@oskerwyld", icon = "youtube" },
-    { name = "spotify", url = "https://open.spotify.com/artist/5Hv2bYBhMp1lUHFri06xkE", icon = "spotify" },
-]
-```
-
-Per veure una llista de totes les icones integrades, fes un cop d'ull al directori [`static/social_icons` a GitHub](https://github.com/welpo/tabi/tree/main/static/social_icons).
-
-Trobes a faltar algun icona? Si creus que seria una bona addició a tabi, no dubtis en [obrir un issue](https://github.com/welpo/tabi/issues/new?assignees=&labels=enhancement&projects=&template=feature_request.md&title=) o enviar una pull request ([exemple](https://github.com/welpo/tabi/pull/333)).
-
-Per utilitzar una icona personalitzada, pots afegir-la al directori `static/social_icons` del teu lloc web. Per exemple, si afegeixes `custom.svg`, la pots referenciar així:
-
-```
-{ name = "custom", url = "https://example.com", icon = "custom" }
-```
-
-{{ admonition(type="note", title="NOTA", text="Tots els enllaços a xarxes socials inclouen l'[atribut](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel/me) `rel='me'`. Això ajuda els motors de cerca i serveis web a verificar que les comptes de xarxes socials et pertanyen.") }}
-
-### Icona de feed
-
-| Pàgina | Secció  | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
-|:------:|:-------:|:-------------:|:---------------------:|:-------------------:|
-|   ❌   |   ❌    |      ✅       |          ❌           |         ❌          |
-
-Pots afegir un enllaç al teu feed RSS/Atom al peu de pàgina amb `feed_icon = true`.
-
-Nota pels usuaris de Zola 0.19.X: quan hi ha dos noms de fitxer a `feed_filenames`, només s'enllaçarà el primer al peu de pàgina.
-
-#### Menú de peu de pàgina
-
-| Pàgina | Secció  | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
-|:------:|:-------:|:-------------:|:-----------------:|:--------------------:|
-|   ❌   |   ❌    |      ✅       |        ❌         |          ❌          |
-
-Pots afegir un menú al peu de pàgina amb `footer_menu`, que accepta una llista d'elements de menú. Per exemple:
-
-```toml
-footer_menu = [
-    {url = "about", name = "about", trailing_slash = true},
-    {url = "privacy", name = "privacy", trailing_slash = true},
-    {url = "sitemap.xml", name = "sitemap", trailing_slash = false},
-    {url = "https://example.com", name = "external link", trailing_slash = true},
-]
-```
-
-### Copyright
-
-| Pàgina | Secció  | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
-|:------:|:-------:|:-------------:|:---------------------:|:-------------------:|
-|   ❌   |   ❌    |      ✅       |          ❌           |         ❌          |
-
-Per afegir una menció sobre els drets d'autor al teu lloc web, configura `copyright`:
-
-```toml
-copyright = "© $CURRENT_YEAR Your Name $SEPARATOR Unless otherwise noted, the content in this website is available under the [CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/) license."
-```
-
-- `$TITLE` serà reemplaçat per la variable `title` configurada a `config.toml`
-- `$CURRENT_YEAR` serà reemplaçat per l'any actual
-- `$AUTHOR` serà reemplaçat per la variable `author`
-- `$SEPARATOR` serà reemplaçat per la [variable `separator`](#separador-personalitzat).
-
-El text es processarà en Markdown. Per exemple, la configuració d'adalt:
-
-{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/copyright_light.webp", dark_src="blog/mastering-tabi-settings/img/copyright_dark.webp" alt="Secció de drets d'autor", full_width=true) }}
-
-Si tens un lloc multilingüe i vols establir diferents notificacions de drets d'autor per a diferents idiomes, afegeix la traducció corresponent a `copyright_translations.{codi_d'idioma}` per a cada idioma que vulguis donar suport. El codi de llengua ha de coincidir amb el [codi de llengua de tabi](https://welpo.github.io/tabi/ca/blog/faq-languages/#que-son-aquests-codis-de-dues-lletres). Per exemple, pel castellà:
-
-```toml
-copyright_translations.es = "© $CURRENT_YEAR $AUTHOR $SEPARATOR A menos que se indique lo contrario, el contenido de esta web está disponible bajo la licencia [CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/)."
-```
-
----
-
-## Metadades
-
-### Mostrar autoria
-
-| Pàgina | Secció  | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
-|:------:|:-------:|:-------------:|:---------------------:|:-------------------:|
-|   ✅   |   ✅    |      ✅       |          ✅           |         ❌          |
-
-Per mostrar l'autoria d'un article, estableix `show_author = true`.
-
-Això mostrarà els autors establerts a la variable `authors = []` al front matter del post. Si aquest camp no està configurat, mostrarà l'autor de `config.toml` (`author = ""`).
-
-### Temps de lectura
-
-| Pàgina | Secció  | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
-|:------:|:-------:|:-------------:|:---------------------:|:-------------------:|
-|   ✅   |   ✅    |      ✅       |          ✅           |         ❌          |
-
-Pots activar o desactivar el temps estimat de lectura d'un article amb `show_reading_time`. Si el configures com a `true`, apareixerà a les metadades de l'article, com això:
-
-{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/see_changes_light.webp", dark_src="blog/mastering-tabi-settings/img/see_changes_dark.webp" alt="Títol de l'article i metadades, mostrant un enllaç «Veure canvis»") }}
-
-Com que segueix [la jerarquia](#jerarquia-de-configuracio), pots activar-lo o desactivar-lo per a pàgines o seccions específiques. Per exemple, aquesta demo desactiva `show_reading_time = false` a la secció [projectes](https://welpo.github.io/tabi/ca/projects/) a l'arxiu [`_index.md`](https://github.com/welpo/tabi/blob/main/content/projects/_index.es.md?plain=1), de manera que les seves publicacions individuals no mostren el temps de lectura.
-
-### Mostrar la data
-
-| Pàgina | Secció  | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
-|:------:|:------:|:-------------:|:--------------------:|:-------------------:|
-|   ✅   |   ✅   |      ✅       |         ✅           |         ❌          |
-
-Per defecte, la data es mostra sota el títol de la publicació. Pots amagar-la amb `show_date = false`. Aquest ajust segueix [la jerarquia](#jerarquia-de-configuracio).
-
-### Format de data
-
-| Pàgina | Secció  | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
-|:------:|:-------:|:-------------:|:---------------------:|:-------------------:|
-|   ❌   |   ❌    |      ✅       |          ❌           |         ❌          |
-
-tabi té dos formats de data: `long_date_format` i `short_date_format`. El format curt s'utilitza a les metadades d'una publicació, mentre que el format llarg s'utilitza al llistar les publicacions (és a dir, a la [secció de blog](/ca/blog/) o a la [pàgina principal](/ca/)).
-
-Per defecte és "6th July 2049" per a ambdós formats en anglès. Per a altres idiomes, el predeterminat és `"%d %B %Y"` per al format llarg i `"%-d %b %Y"` per al format curt.
-
-A Zola, la sintaxi per al format de temps està inspirada en strftime. Una referència completa està disponible a la [documentació de chrono](https://docs.rs/chrono/0.4.31/chrono/format/strftime/index.html).
-
-### Separador personalitzat
-
-| Pàgina | Secció  | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
-|:------:|:-------:|:-------------:|:---------------------:|:-------------------:|
-|   ❌   |   ❌    |      ✅       |          ❌           |         ❌          |
-
-El separador apareix en diversos llocs: al títol del navegador, entre les metadades d'una publicació...
-
-El separador per defecte és un punt de llista (`•`), però pots canviar-lo configurant alguna cosa com `separator = "|"`.
-
-### Ordre del títol
-
-| Pàgina | Secció  | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
-|:------:|:-------:|:-------------:|:---------------------:|:-------------------:|
-|   ❌   |   ❌    |      ✅       |          ❌           |         ❌          |
-
-Per defecte, el títol a la pestanya del navegador és el nom del lloc seguit del títol de la pàgina. Per exemple, el títol de la secció del blog és «~/tabi • Blog».
-
-Configurant `invert_title_order = true`, pots invertir l'ordre del títol del lloc i el títol de la pàgina a la pestanya del navegador. Per exemple, l'etiqueta del títol de la secció del blog es convertiria en «Blog • ~/tabi».
-
----
-
-Certainly, here is a high-quality, non-literal translation of the provided text into Catalan. I've adhered to your specifications, keeping the variables and English terms unchanged.
-
-## Seguretat
-
-### Correu electrònic codificat
-
-| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
-|:------:|:------:|:-------------:|:--------------------:|:--------------------:|
-|   ❌   |   ❌   |      ✅       |          ❌          |          ✅          |
-
-Per tal de protegir la teva adreça de correu electrònic contra els spambots, pots codificar-la al peu de pàgina. Pots fer això establint `email` a una versió codificada en base64 de la teva adreça de correu electrònic[^2]. Per exemple, `email = "bWFpbEBleGFtcGxlLmNvbQ=="` és la versió codificada en base64 de "mail@example.com".
-
-Si no vols codificar el teu correu electrònic tu mateix, tabi pot fer-ho per tu si configures `encode_plaintext_email = true`. Això et permet establir un correu electrònic en text pla en la configuració. Tingues en compte que això només protegeix la teva adreça de correu electrònic al teu lloc web, no en repositoris públics.
-
-Si el correu electrònic està codificat (ja sigui per tu o per tabi), els usuaris amb JavaScript desactivat no veuran la icona de correu electrònic.
-
-### CSP (Content Security Policy)
-
-| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
-|:------:|:------:|:-------------:|:--------------------:|:--------------------:|
-|   ❌   |   ❌   |      ✅       |          ❌          |          ❌          |
-
-La Content Security Policy (CSP) és una capa addicional de seguretat que ajuda a detectar i mitigar certs tipus d'atacs, inclosos atacs de Cross Site Scripting (XSS) i injecció de dades. Aquests atacs s'utilitzen per a tot, des del robatori de dades fins a la desfiguració de llocs web i la distribució de programari maliciós.
-
-tabi té una CSP predeterminada que permet imatges i vídeos remots, així com incrustacions de YouTube i Vimeo. Pots personalitzar-la amb `allowed_domains`, que accepta una llista de directrius de CSP. Aquesta és la CSP predeterminada:
-
-```toml
-allowed_domains = [
-    { directive = "font-src", domains = ["'self'", "data:"] },
-    { directive = "img-src", domains = ["'self'", "https://*", "data:"] },
-    { directive = "script-src", domains = ["'self'"] },
-    { directive = "style-src", domains = ["'self'"] },
-    { directive = "frame-src", domains = ["player.vimeo.com", "https://www.youtube-nocookie.com"] },
-]
-```
-
-Aquesta opció està habilitada per defecte. Per desactivar-la per una pàgina, secció o globalment, estableix `enable_csp = false`. La configuració de `enable_csp` segueix la jerarquia.
-
-Per a més informació, consulta la [pàgina de documentació de CSP](@/blog/security/index.ca.md).
-
-[^1]: Si estàs utilitzant un repositori Git remot, potser voldràs automatitzar el procés d'actualització del camp `updated`. Aquí tens una guia per a això: [Zola Git Hook: actualitzant les dates de les publicacions](https://osc.garden/ca/blog/zola-date-git-hook/).
-
-[^2]: Per a codificar el teu correu electrònic en base64 pots utilitzar [eines en línia](https://www.base64encode.org/) o, al teu terminal, executar: `printf 'mail@example.com' | base64`

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

@@ -1,965 +0,0 @@
-+++
-title = "Domina la configuración de tabi: guía completa"
-date = 2023-09-18
-updated = 2024-11-30
-description = "Descubre las múltiples maneras en que puedes personalizar tabi."
-
-[taxonomies]
-tags = ["funcionalidad", "tutorial", "preguntas frecuentes"]
-
-[extra]
-pinned = true
-quick_navigation_buttons = true
-social_media_card = "social_cards/es_blog_mastering_tabi_settings.jpg"
-+++
-
-Esta es la guía completa sobre la configuración en tabi. Si tienes alguna pregunta, puedes [abrir un issue en GitHub](https://github.com/welpo/tabi/issues/new) o [inciar una discusión](https://github.com/welpo/tabi/discussions).
-
-<details>
-    <summary><b>Tabla de contenido</b></summary>
-    <!-- toc -->
-</details>
-
-## Jerarquía de configuración
-
-tabi tiene una jerarquía que te permite personalizar tu sitio en diferentes niveles. La jerarquía (de menor a mayor prioridad) es la siguiente:
-
-1. **Configuraciones globales**: Estas son las configuraciones que se aplican a todo tu sitio. Se establecen en `config.toml`.
-2. **Configuraciones de sección**: Estas son las configuraciones que se aplican a una sección de tu sitio (por ejemplo, `/blog` o `/projects`). Se establecen en la metainformación del archivo `_index.md` de la sección.
-3. **Configuración de la página «padre»**: Para páginas anidadas (páginas dentro de páginas), estas son las configuraciones de la página que las contiene.
-4. **Configuraciones de página**: Estas son las configuraciones que se aplican a una sola página. Se establecen en la metainformación de la página.
-
-En todos los casos, las opciones de tabi se establecen en la sección `[extra]`.
-
-Para las configuraciones que siguen esta jerarquía, el valor establecido en una página reemplaza el valor de una sección, que a su vez reemplaza el valor global. En resumen: cuanto más específica sea la configuración, mayor prioridad tendrá, o `página > página padre/sección > config.toml`.
-
----
-
-## Búsqueda
-
-| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |
-|:------:|:-------:|:-------------:|:---------------:|:-------------------:|
-|   ❌   |   ❌    |       ✅       |        ❌       |          ✅          |
-
-tabi soporta búsqueda local accesible y multilingüe con [Elasticlunr](http://elasticlunr.com/). Para activarla, necesitas:
-
-1. Establecer un `default_language` en `config.toml`.
-2. Establecer `build_search_index = true`.
-3. Opcionalmente, configurar la sección `[search]`.
-
-Por ejemplo:
-
-```toml
-base_url = "https://example.com"
-default_language = "en"
-build_search_index = true
-
-[search]
-index_format = "elasticlunr_json" # O el menos eficiente "elasticlunr_javascript".
-include_title = true
-include_description = true
-include_path = true
-include_content = true
-```
-
-**Nota**: para soporte de búsqueda en Chino/Japonés, necesitas usar una [build personalizada de Zola](https://github.com/getzola/zola/blob/master/Cargo.toml#L54-L55).
-
-### Consideraciones para usuarios de Zola 0.17.X
-
-Zola 0.17.X no proporciona acceso a la variable `search.index_format` ([reporte del bug](https://github.com/getzola/zola/issues/2165)). Al usar tabi, se asume el uso del índice JSON, que es más eficiente. Sin embargo, debido a [otro bug](https://github.com/getzola/zola/issues/2193) solucionado en 0.18.0, el índice JSON para sitios multilingües no se genera correctamente.
-
-Los usuarios con versiones de Zola anteriores a 0.18.0 que quieran usar el índice JavaScript necesitan establecer la variable `index_format` en dos lugares:
-
-```toml
-[search]
-index_format = "elasticlunr_javascript"
-
-[extra]
-index_format = "elasticlunr_javascript"
-```
-
-Esto asegura que tabi cargue los archivos correctos. Recomendamos actualizar a Zola 0.18.0 o posterior para una funcionalidad óptima.
-
-### Detalles de implementación
-
-Para detalles técnicos sobre la implementación de la búsqueda en tabi, incluyendo cuándo se carga el índice, características de accesibilidad y otros detalles, consulta el [Pull Request #250](https://github.com/welpo/tabi/pull/250).
-
----
-
-## Soporte multilingüe
-
-tabi ofrece soporte multilingüe completo para tu sitio Zola, desde configurar un idioma predeterminado hasta añadir todos los que desees. Consulta la [preguntas frecuentes sobre idiomas](@/blog/faq-languages/index.es.md) para más información.
-
----
-
-## Apariencia
-
-### Página principal
-
-La [página principal](/) de esta demo tiene un encabezado con una imagen, un título y una descripción:
-
-{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/header_light.webp", dark_src="blog/mastering-tabi-settings/img/header_dark.webp", alt="Encabezado de la página principal") }}
-
-#### Cabecera
-
-Para configurar la imagen y el título, puedes usar la variable `header` en el front matter del archivo `_index.md` de la sección. Por ejemplo:
-
-```toml
-[extra]
-header = {title = "¡Hola! Soy tabi~", img = "blog/mastering-tabi-settings/img/main.webp", img_alt = "Óscar Fernández, el autor del tema" }
-```
-
-La descripción es contenido Markdown normal, escrito fuera del front matter.
-
-#### Listando publicaciones recientes
-
-Para mostrar publicaciones en la página principal, primero debes decidir de dónde se servirán: de la ruta raíz (`/`) o de un subdirectorio (por ejemplo, `/blog`).
-
-**Opción A: Servir publicaciones desde la ruta raíz (`/`)**
-
-Configura `paginate_by` en el front matter de tu archivo `content/_index.md`:
-
-```toml
-title = "Últimas publicaciones"
-sort_by = "date"
-paginate_by = 5  # Muestra 5 publicaciones por página.
-
-[extra]
-header = {title = "¡Hola! Soy tabi~", img = "img/main.webp", img_alt = "Tu nombre" }
-```
-
-{{ admonition(type="note", text="La configuración `paginate_by` va en el front matter principal, no en la sección `[extra]`.") }}
-
-**Opción B: Servir publicaciones desde un subdirectorio (por ejemplo, `/blog`)**
-
-Utiliza `section_path` en la sección `[extra]` de tu archivo `content/_index.md`:
-
-```toml
-title = "Últimas publicaciones"
-sort_by = "date"
-# No configures `paginate_by` aquí.
-
-[extra]
-header = {title = "¡Hola! Soy tabi~", img = "img/main.webp", img_alt = "Tu nombre" }
-section_path = "blog/_index.md"  # Dónde encontrar tus publicaciones.
-max_posts = 5  # Muestra hasta 5 publicaciones en la página principal.
-```
-
-{{ admonition(type="warning", title="ALERTA", text="No configures `paginate_by` y `section_path` a la vez. Estas configuraciones son mutuamente excluyentes y usarlas juntas puede resultar en que no se muestren publicaciones.") }}
-
-Notas adicionales:
-
-- El `title` en el front matter establece el título que aparece sobre las publicaciones.
-- Usa la ruta completa al archivo `_index.md` de la sección para `section_path`. Usar `section_path = "blog/"` no funcionará.
-
-##### Fijar publicaciones
-
-Puedes fijar publicaciones para mantenerlas en la parte superior de la página principal. En esta demo, esta publicación está fijada, por lo que aparece primera con un icono y etiqueta de "fijada":
-
-{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/pinned_post_light.webp", dark_src="blog/mastering-tabi-settings/img/pinned_post_dark.webp", alt="Entrada fijada", full_width=true) }}
-
-Las publicaciones fijadas se muestran primero, manteniendo su orden relativo según el `sort_by` de la sección, seguidas por el resto de las publicaciones.
-
-Para fijar una publicación, añade lo siguiente a su front matter:
-
-```toml
-[extra]
-pinned = true
-```
-
-{{ admonition(type="info", text="Este ajuste solo afecta a las páginas principales del sitio (como `/`, `/es/`, `/fr/`). Otras secciones como `blog/`, `tags/` o `archive/` muestran las publicaciones en su orden habitual.") }}
-
-{{ admonition(type="warning", text='Cuando se utiliza la paginación (`paginate_by`), las publicaciones destacadas pueden aparecer dos veces: una vez en la parte superior de la primera página, y otra en su posición cronológica normal en páginas posteriores.') }}
-
-##### Mostrar la fecha de los artículos en el listado
-
-Por defecto, cuando se listan los artículos, se muestra la fecha de creación. Puedes configurar qué fecha(s) mostrar usando la opción `post_listing_date`. Configuraciones disponibles:
-
-- `date`: Muestra solo la fecha de publicación original del artículo (opción por defecto).
-- `updated`: Muestra solo la fecha de la última actualización del artículo. Si no hay fecha de actualización, muestra la fecha de publicación original.
-- `both`: Muestra tanto la fecha de publicación original como la fecha de la última actualización.
-
-#### Listado de proyectos
-
-Puedes mostrar una selección de proyectos en tu página principal. Para hacer esto, primero necesitarás configurar el directorio `projects`.
-
-Una vez hecho esto, configura la ruta a los proyectos en la sección `[extra]` de tu archivo `_index.md`:
-
-```toml
-[extra]
-projects_path = "projects/_index.md"
-```
-
-Esto mostrará los 3 proyectos de mayor prioridad (con menor peso; el mismo orden que en Proyectos). Para mostrar más o menos proyectos, puedes establecer `max_projects` en `[extra]`.
-
-Por defecto, la sección de proyectos se mostrará en la parte inferior de la página principal, bajo los posts. Si prefieres que aparezca en la parte superior, establece `show_projects_first = true`.
-
-### Interruptor de modo claro y oscuro
-
-| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |
-|:------:|:-------:|:-------------:|:---------------:|:-------------------:|
-|   ❌   |   ❌    |      ✅       |        ❌        |         ✅          |
-
-El interruptor de modo claro y oscuro (el icono de luna/sol en la esquina superior derecha) puede habilitarse configurando `theme_switcher = true` en `config.toml`.
-
-### Modo predeterminado (claro/oscuro)
-
-| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |
-|:------:|:-------:|:-------------:|:---------------:|:-------------------:|
-|   ❌   |   ❌    |      ✅       |        ❌        |         ❌          |
-
-El tema predeterminado puede especificarse con la variable `default_theme`, que acepta `"dark"` o `"light"`. Si no lo especificas, el tema predeterminado será el tema del sistema.
-
-### Pieles personalizadas
-
-| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |
-|:------:|:-------:|:-------------:|:---------------:|:-------------------:|
-|   ❌   |   ❌    |      ✅       |        ❌        |         ❌          |
-
-Las pieles de tabi cambian el color principal del sitio. Puedes configurar la piel en `config.toml` con `skin = "nombre_de_la_piel"`. Por ejemplo, `skin = "lavender"` se ve así (haz clic para cambiar entre modo claro y oscuro):
-
-{{ image_toggler(default_src="blog/customise-tabi/skins/lavender_light.webp", toggled_src="blog/customise-tabi/skins/lavender_dark.webp", default_alt="piel lavender en modo claro", toggled_alt="piel lavender en modo oscuro", full_width=true) }}
-
-Explora las pieles disponibles y aprende cómo crear la tuya propia consultando [la documentación](/es/blog/customise-tabi/#skins).
-
-### Fuente sans serif (paloseco)
-
-| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |
-|:------:|:-------:|:-------------:|:---------------:|:-------------------:|
-|   ❌   |   ❌    |      ✅       |        ❌        |         ❌          |
-
-tabi utiliza una fuente serif para los párrafos de los artículos (la que estás viendo ahora). Puedes cambiar a una fuente sans serif (la que ves en los encabezados/menú) en todo tu sitio configurando `override_serif_with_sans = true` en `config.toml`.
-
-Haz clic en la imagen para comparar las fuentes:
-
-{{ image_toggler(default_src="blog/mastering-tabi-settings/img/serif.webp", toggled_src="blog/mastering-tabi-settings/img/sans-serif.webp", default_alt="Fuente serif", toggled_alt="Fuente sans-serif", full_width=true) }}
-
-### Estilos CSS personalizados
-
-| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |
-|:------:|:-------:|:-------------:|:---------------:|:-------------------:|
-|   ✅   |    ❌   |       ✅      |        ❌       |         ❌         |
-
-Puedes cargar estilos CSS personalizados para todo el sitio o en páginas específicas utilizando `stylesheets`, que acepta una lista de rutas hacia archivos CSS. Por ejemplo:
-
-```toml
-stylesheets = ["css/custom.css", "css/another.css"]
-```
-
-### Color del tema del navegador
-
-| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |
-|:------:|:-------:|:-------------:|:---------------:|:-------------------:|
-|   ❌   |    ❌   |       ✅      |        ❌       |         ❌         |
-
-El color del tema del navegador es el color que aparece en la barra de pestañas del navegador:
-
-{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/browser_theme_color_light.webp", dark_src="blog/mastering-tabi-settings/img/browser_theme_color_dark.webp" alt="pestañas con un tema de navegador de color") }}
-
-Puedes establecerlo en `config.toml` como `browser_theme_color = "#087e96"`. Si deseas diferentes colores para los modos oscuro/claro, puedes establecer un conjunto de colores con `browser_theme_color = ["#ffffff", "#000000"]`. El primer color es para el modo claro, el segundo para el oscuro.
-
-Esta variable acepta cualquier color CSS válido, así que puedes usar palabras clave (por ejemplo, `blue`), códigos hexadecimales (por ejemplo, `#087e96`) o valores RGB/HSL (por ejemplo, `rgb(8, 126, 150)`).
-
-### Etiquetas compactas
-
-| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |
-|:------:|:-------:|:-------------:|:---------------:|:-------------------:|
-|   ❌   |   ❌    |      ✅       |        ❌        |         ❌          |
-
-Por defecto, la [página de etiquetas](/es/tags) muestra las etiquetas así:
-
-[NombreEtiqueta](#) — n publicación[es]
-
-Establecer `compact_tags = true` mostrará las mismas de este modo:
-
-[NombreEtiqueta](#) <sup>n</sup>
-
-### Orden de las etiquetas
-
-| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |
-|:------:|:-------:|:-------------:|:---------------:|:-------------------:|
-|   ❌   |   ❌    |      ✅       |        ❌        |         ❌          |
-
-Por defecto, la [página de etiquetas](/es/tags) ordena las etiquetas alfabéticamente, dada la configuración predeterminada de `tag_sorting = "name"`.
-Si configuras `tag_sorting = "frequency"`, se ordenarán según el número de publicaciones (de mayor a menor).
-
----
-
-## Series
-
-Para una explicación detallada, consulta la [documentación de series](@/blog/series/index.es.md).
-
-### Enlace para saltar a las publicaciones
-
-| Página | Sección | `config.toml` | Sigue jerarquía | Requiere JavaScript |
-|:------:|:-------:|:-------------:|:------------------:|:-------------------:|
-|   ❌   |   ✅    |      ✅       |        ✅          |         ❌          |
-
-Por defecto, aparece automáticamente un enlace "Saltar a publicaciones" junto al título de la serie cuando una serie tiene un contenido de más de 2000 caracteres:
-
-{{ dual_theme_image(light_src="blog/series/img/jump_to_series_posts_light.webp", dark_src="blog/series/img/jump_to_series_posts_dark.webp" alt="enlace para saltar a las publicaciones de la serie", full_width=true) }}
-
-Establece `show_jump_to_posts = true` para forzar la activación de la función y `show_jump_to_posts = false` para desactivarla.
-
-### Indexación de páginas de series
-
-| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |
-|:------:|:-------:|:-------------:|:------------------:|:-------------------:|
-|   ❌   |   ✅    |      ✅       |        ✅          |         ❌          |
-
-Por defecto, las páginas de series se indexan (usando una indexación basada en 1) según el `sort_by` de la sección de series.
-
-Establece `post_listing_index_reversed = true` para invertir el índice.
-
----
-
-## Integración con repositorios Git
-
-| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |
-|:------:|:-------:|:-------------:|:---------------:|:-------------------:|
-|   ❓   |    ❓   |       ✅      |        ❓       |         ❌         |
-
-❓: `show_remote_source` sí sigue [la jerarquía](#jerarquia-de-configuracion) y puede configurarse en una página, sección o globalmente. El resto de las configuraciones solo pueden establecerse en `config.toml`.
-
-Estas configuraciones te permiten vincular tu sitio web tabi con un repositorio público de Git en GitHub, GitLab, Gitea o Codeberg. Configuraciones de ejemplo:
-
-```toml
-remote_repository_url = "https://github.com/welpo/tabi"
-remote_repository_git_platform = "auto"
-remote_repository_branch = "main"
-show_remote_changes = true
-show_remote_source = true
-```
-
-Esto habilita dos funciones:
-
-1. `show_remote_source = true` añade un enlace al código fuente de tu sitio (tu `remote_repository_url`) que se mostrará en el pie de página:
-
-{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/site_source_light.webp", dark_src="blog/mastering-tabi-settings/img/site_source_dark.webp" alt="Pie de página del sitio, mostrando un enlace 'Código fuente del sitio'") }}
-
-1. `show_remote_changes = true` añade un enlace «Ver cambios ↗» al historial de commits del artículo actualizado, al lado de la fecha de última actualización [^1]:
-
-{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/see_changes_light.webp", dark_src="blog/mastering-tabi-settings/img/see_changes_dark.webp" alt="Título del artículo y metadatos, mostrando un enlace 'Ver cambios'") }}
-
-Al hacer clic en este enlace, serás dirigido al historial de commits del artículo, donde podrás ver los cambios realizados en él:
-
-{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/commit_history_light.webp", dark_src="blog/mastering-tabi-settings/img/commit_history_dark.webp" alt="Historial de commits de un artículo", full_width=true) }}
-
----
-
-## Páginas
-
-### Proyectos
-
-tabi tiene una plantilla integrada para proyectos. Para habilitarla, puedes crear un directorio en `content/projects/`. Allí, puedes crear un archivo `_index.md` con el siguiente contenido en el bloque de metadatos:
-
-```toml
-title = "Proyectos"
-sort_by = "weight"
-template = "cards.html"
-insert_anchor_links = "left"
-
-[extra]
-show_reading_time = false
-quick_navigation_buttons = true
-```
-
-- `title` es el título de la página.
-- `sort_by` determina cómo se ordenan los proyectos. Puedes ordenar por «date», «update_date», «title», «title_bytes», «weight», «slug» o «none».
-- `template = "cards.html"` establece la plantilla para renderizar la página de proyectos.
-- `insert_anchor_links = "left"` añade enlaces ancla a los encabezados.
-- `show_reading_time = false` oculta el tiempo estimado de lectura.
-- `quick_navigation_buttons = true` muestra los botones de navegación rápida.
-
-Junto al archivo `_index.md`, puedes crear un archivo para cada proyecto. Por ejemplo, este es el bloque de metadatos para la página del proyecto [tabi](@/projects/tabi/index.es.md):
-
-```toml
-title = "tabi"
-description = "Un tema de Zola rápido, ligero y moderno con soporte multilingüe."
-weight = 1
-
-[extra]
-local_image = "img/tabi.webp"
-```
-
-- `title` es el título del proyecto.
-- `description` es la descripción del proyecto.
-- `weight` determina el orden en el que se muestran los proyectos. Cuanto menor sea el peso, más arriba aparecerá el proyecto.
-- `local_image` es la ruta de la imagen del proyecto. Esta imagen se muestra en la página de proyectos.
-
-Cuando un usuario haga clic en la imagen o el título de un proyecto, será llevado a la página del proyecto. Si prefieres que los usuarios vayan a un enlace externo, puedes establecer `link_to = "https://example.com"` en la sección `[extra]` del archivo `.md` del proyecto.
-
-La página del proyecto individual se renderiza con la plantilla predeterminada, a menos que establezcas otra, por ejemplo, `template = "info-page.html"`.
-
-#### Filtrar proyectos
-
-Si agregas etiquetas a tus proyectos, verás un filtro de etiquetas:
-
-{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/projects_tag_filter_light.webp", dark_src="blog/mastering-tabi-settings/img/projects_tag_filter_dark.webp", alt="Página de proyectos con filtro de etiquetas", full_width=true) }}
-
-El sistema de filtrado de etiquetas utiliza mejora progresiva:
-
-- Sin JavaScript: Las etiquetas enlazan directamente a páginas de etiquetas dedicadas (por ejemplo, `/tags/nombre-etiqueta`).
-- Con JavaScript: Filtrado instantáneo, sincronización de URL (#nombre-etiqueta) y navegación por teclado.
-
-Para desactivar esta función, establece `enable_cards_tag_filtering = false` en la sección `[extra]` del archivo `projects/_index.md` o en `config.toml`.
-
-{% admonition(type="tip") %}
-
-Para filtrar proyectos por etiquetas, necesitas establecer etiquetas en el front matter de cada proyecto. Por ejemplo:
-
-```toml
-title = "nombre del proyecto"
-weight = 40
-
-[taxonomies]
-tags = ["etiqueta uno", "etiqueta 2", "tercera etiqueta"]
-```
-
-{% end %}
-
-### Archivo
-
-Agregar una página de archivo es similar a agregar una página de proyectos. Puedes crear un directorio en `content/archive/`. Allí, puedes crear un archivo `_index.md` con el siguiente encabezado:
-
-```toml
-title = "Archivo"
-template = "archive.html"
-```
-
-Por defecto, el archivo mostrará las publicaciones ubicadas en `blog/`. Para personalizar esto, puedes modificar la sección `[extra]` del archivo `_index.md`:
-
-- **Para una sola ruta**: Establece `section_path = "tu-ruta/"` para listar publicaciones de un directorio específico. Asegúrate de incluir la barra inclinada al final.
-
-- **Para múltiples rutas**: Si deseas agregar publicaciones de varios directorios, `section_path` puede especificarse como una lista de rutas. Por ejemplo:
-
-  ```toml
-  [extra]
-  section_path = ["blog/", "notas/", "ruta-tres/"]
-  ```
-
-**Nota**:
-
-- La página de Archivo sólo listará publicaciones con fecha.
-- El orden las publicaciones viene determinada por la variable `sort_by` de las secciones archivadas. Esta demo utiliza `sort_by = "date"` en `blog/_index.md`.
-
-### Etiquetas
-
-tabi tiene soporte integrado para etiquetas. Para habilitarlas, simplemente añade la taxonomía a tu `config.toml`:
-
-```toml
-taxonomies = [{name = "tags", feed = true}]
-```
-
-Luego, puedes añadir etiquetas a tus publicaciones agregándolas al array `tags` en el bloque de metadatos de tu publicación. Por ejemplo:
-
-```toml,hl_lines=05-06
-title = "Los molinos de viento de mi vida: reflexiones de un escudero"
-date = 1605-01-16
-description = "Mi viaje junto a Don Quijote, enfrentándome a gigantes imaginarios y descubriendo las verdaderas batallas de la vida."
-
-[taxonomies]
-tags = ["personal", "reflexiones"]
-```
-
-### Página acerca de
-
-Si deseas tener una página que no sea un artículo, por ejemplo para un apartado "Acerca de", "Contacto" o "Derechos de autor", puedes usar la plantilla `info-page.html`.
-
-Primero, crea un directorio dentro de `content/` con el nombre que prefieras. Por ejemplo, `content/pages/`. Luego, crea un archivo `_index.md` dentro de ese directorio. El archivo debería verse así:
-
-```markdown
-+++
-render = false
-insert_anchor_links = "left"
-+++
-```
-
-- `render = false` indica a Zola que no renderice la sección.
-- `insert_anchor_links = "left"` añade enlaces ancla a los encabezados. Esto es opcional.
-
-Dentro del directorio, puedes crear cualquier cantidad de archivos `.md`.
-
-En esta demo, la página [Sobre mí](/es/about/) utiliza la plantilla `info-page.html`. El bloque de metadatos es el siguiente:
-
-```toml
-title = "Sobre mí"
-template = "info-page.html"
-path = "about"
-```
-
-Fíjate cómo se establece `path = "about"`. Zola colocará la página en `$base_url/about/`. Si deseas que la página esté disponible en `/contacto/`, tendrías que establecer `path = "contacto"`.
-
----
-
-## SEO
-
-tabi se encarga de la mayoría de las tareas de SEO por ti (como etiquetas del protocolo Open Graph, descripción, esquema de colores…), pero hay ciertas configuraciones que puedes personalizar.
-
-### Favicon
-
-| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |
-|:------:|:-------:|:-------------:|:---------------:|:-------------------:|
-|   ❌   |   ❌    |      ✅       |        ❌       |         ❌          |
-
-El favicon es el pequeño icono que aparece en la pestaña del navegador. Puedes establecerlo en `config.toml` con `favicon = "img/favicon.png"`.
-
-### Favicon de emoji
-
-| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |
-|:------:|:-------:|:-------------:|:---------------:|:-------------------:|
-|   ❌   |   ❌    |      ✅       |        ❌       |         ❌          |
-
-También puedes establecer un emoji como tu favicon con `favicon_emoji`. Por ejemplo, `favicon_emoji = "👾"`.
-
-Nota: Algunos navegadores no admiten favicons de emoji. Consulta la tabla de compatibilidad en [caniuse](https://caniuse.com/link-icon-svg).
-
-### URL canónica
-
-| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |
-|:------:|:-------:|:-------------:|:---------------:|:-------------------:|
-|   ✅   |   ✅    |      ✅       |        ❌       |         ❌          |
-
-La URL canónica es una manera de indicar a los motores de búsqueda cuál es la URL preferida para el contenido de tu sitio web. Esto es útil para el SEO y para evitar problemas de contenido duplicado.
-
-Por defecto, la URL canónica es la URL de la página en la que te encuentras. Sin embargo, puedes cambiar esto configurando `canonical_url` en el front matter de tu página o sección.
-
-Si tienes un sitio con una estructura idéntica y contenido coincidente, puedes configurar `base_canonical_url` en tu `config.toml`. La URL canónica se creará reemplazando el `$base_url` de la URL actual con el `$base_canonical_url` que establezcas.
-
-Por ejemplo, si configuras `base_canonical_url = "https://example.com"`, la URL canónica de la página `$base_url/blog/post1` será `https://example.com/blog/post1`. Esto es útil si tienes un sitio con varios dominios que comparten el mismo contenido.
-
-**Nota**: para asegurarte de que la URL canónica sea correcta, probablemente sea mejor configurar `canonical_url` individualmente para cada página.
-
-### Tarjetas para redes sociales
-
-| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |
-|:------:|:-------:|:-------------:|:---------------:|:-------------------:|
-|   ✅   |   ✅    |      ✅       |        ✅       |         ❌          |
-
-Las tarjetas para redes sociales son las imágenes que se muestran cuando compartes un enlace en redes sociales:
-
-{{ dimmable_image(src="img/with_social_media_card.webp", alt="Una captura de pantalla de WhatsApp mostrando un enlace con una tarjeta para redes sociales") }}
-
-Puedes establecer la imagen para redes sociales con `social_media_card = "img/social_media_card.png"`.
-
-Puedes especificar rutas tanto relativas como absolutas.
-
-- **Ruta relativa**: Coloca la imagen en la misma carpeta que tu entrada de blog y especifica su nombre. Por ejemplo, `social_media_card = "relative_image.png"`.
-
-- **Ruta absoluta**: Coloca la imagen en una carpeta específica y especifica la ruta desde la raíz. Por ejemplo, `social_media_card = "img/absolute_image.png"`.
-
-Si ambas rutas, relativa y absoluta, son válidas, la ruta relativa tendrá prioridad.
-
-Dado que sigue la [jerarquía](#jerarquia-de-configuracion), si no está configurado en una página, pero sí lo está en una sección, se utilizará la imagen de la sección. Si no está configurado en una página o sección, pero sí en `config.toml`, se usará la imagen global.
-
-{{ admonition(type="tip", title="CONSEJO", text="Automatiza su creación con un [script](https://github.com/welpo/osc.garden/blob/main/static/code/social-cards-zola): [Automatizando las vistas previas de los enlaces con Zola](https://osc.garden/es/blog/automating-social-media-cards-zola/).") }}
-
-### Creador del fediverso
-
-| Página | Sección | `config.toml` | Sigue jerarquía | Requiere JavaScript |
-|:------:|:-------:|:-------------:|:----------------:|:-------------------:|
-|   ❌   |    ❌   |      ✅       |        ❌        |         ❌          |
-
-Puedes mostrar tu perfil del fediverso en las vistas previas de enlaces de Mastodon configurando la variable `fediverse_creator` en tu `config.toml`. Por ejemplo, para @username@example.com, usa:
-
-```toml
-fediverse_creator = { handle = "username", domain = "example.com" }
-```
-
----
-
-## Navegación
-
-### Barra de navegación
-
-| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |
-|:------:|:-------:|:-------------:|:---------------:|:-------------------:|
-|   ❌   |   ❌    |      ✅       |        ❌       |         ❌          |
-
-La barra de navegación es la barra en la parte superior de la página que contiene el título del sitio y el menú de navegación. Puedes personalizar los elementos que aparecen configurando `menu` en `config.toml`. Por ejemplo:
-
-```toml
-menu = [
-    { name = "blog", url = "blog", trailing_slash = true },
-    { name = "archivo", url = "archive", trailing_slash = true },
-    { name = "etiquetas", url = "tags", trailing_slash = true },
-    { name = "proyectos", url = "projects", trailing_slash = true },
-    { name = "acerca de", url = "about", trailing_slash = true },
-]
-```
-
-### Botones de navegación rápida
-
-| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |
-|:------:|:-------:|:-------------:|:---------------:|:-------------------:|
-|   ✅   |   ✅    |      ✅       |        ✅       |         ❌          |
-
-Los botones de navegación rápida son los botones que aparecen en la parte inferior derecha de la pantalla. Deberías verlos en esta página, si no estás en un dispositivo móvil. Se ven así:
-
-{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/quick_navigation_buttons_light.webp", dark_src="blog/mastering-tabi-settings/img/quick_navigation_buttons_dark.webp", alt="Botones de navegación rápida") }}
-
-Para activarlos, establece `quick_navigation_buttons = true`.
-
-### Table de contenido
-
-| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |
-|:------:|:-------:|:-------------:|:---------------:|:-------------------:|
-|   ✅   |   ✅    |      ✅       |        ✅       |         ❌          |
-
-Habilita el índice de contenidos justo debajo del título y metadatos del artículo con `toc = true`.
-
-Para saber más sobre cómo personalizarlo, consulta [la documentación sobre la Tabla de contenido](@/blog/toc/index.es.md).
-
-### Enlace a los artículos anterior y siguiente
-
-| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |
-|:------:|:-------:|:-------------:|:------------------:|:-------------------:|
-|   ✅   |   ✅   |      ✅       |         ✅         |         ❌         |
-
-Muestra enlaces a los artículos anterior y siguiente en la parte inferior de los posts. Se ve así:
-
-{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/show_previous_next_article_links_light.webp", dark_src="blog/mastering-tabi-settings/img/show_previous_next_article_links_dark.webp", alt="Enlaces a los artículos anterior y siguiente", full_width=true) }}
-
-Para activar esta función, configura `show_previous_next_article_links = true` y asegúrate de que tu sección tiene `sort_by` (por ejemplo, `sort_by = "date"`).
-
-Por defecto, los artículos siguientes estarán en el lado izquierdo de la página y los artículos anteriores en el lado derecho.
-Para invertir el orden (artículos siguientes en el lado derecho y artículos anteriores en el lado izquierdo), establece `invert_previous_next_article_links = true`.
-
-Por defecto, esta sección de navegación tendrá el ancho completo del sitio (igual que la barra de navegación de la parte superior). Para hacerla más estrecha, coincidiendo con el ancho del artículo, establece `previous_next_article_links_full_width = false`.
-
-Todas estas configuraciones siguen la jerarquía.
-
-### Enlaces de retorno en notas al pie
-
-{{ admonition(type="warning", title="ADVERTENCIA DE DEPRECACIÓN", text="Zola v0.19.0 y posterior puede hacer esto de forma nativa. Establece `bottom_footnotes = true` en la sección `[markdown]` de tu configuración.") }}
-
-| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |
-|:------:|:-------:|:-------------:|:---------------:|:-------------------:|
-|   ✅   |   ✅    |      ✅       |        ✅       |         ✅          |
-
-Establecer `footnote_backlinks = true` añadirá enlaces de retorno a las notas al pie de tus publicaciones, como este:
-
-{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/footnote_backlinks_light.webp", dark_src="blog/mastering-tabi-settings/img/footnote_backlinks_dark.webp", alt="Enlaces de retorno en notas al pie", full_width=true) }}
-
-Cuando hagas clic en un enlace de retorno (la flecha ↩), te llevará de vuelta al punto del texto donde se hizo referencia a la nota al pie.
-
----
-
-## Usabilidad
-
-### Botón de copiar en bloques de código
-
-| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |
-|:------:|:-------:|:-------------:|:---------------:|:-------------------:|
-|   ✅   |   ✅    |      ✅       |        ✅       |         ✅          |
-
-Establecer `copy_button = true` añadirá un pequeño botón de copiar en la parte superior derecha de los bloques de código, como este:
-
-{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/copy_button_on_code_blocks_light.webp", dark_src="blog/mastering-tabi-settings/img/copy_button_on_code_blocks_dark.webp", alt="Botón de copiar en bloques de código", full_width=true) }}
-
-### Mostrar ruta/URL en bloques de código
-
-| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |
-|:------:|:-------:|:-------------:|:---------------:|:-------------------:|
-|   ✅   |   ✅    |      ✅       |        ✅       |         ✅          |
-
-Establece `add_src_to_code_block = true` para habilitar el uso del [shortcode `add_src_to_code_block`](@/blog/shortcodes/index.es.md#mostrar-ruta-o-url).
-
-### Forzar bloques de código de izquierda a derecha
-
-| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |
-|:------:|:-------:|:-------------:|:----------------:|:-------------------:|
-|   ✅   |   ✅    |      ✅       |        ✅        |         ❌         |
-
-Por defecto, los bloques de código se renderizan de izquierda a derecha, independientemente de la dirección general del texto. Establece `force_codeblock_ltr = false` para permitir que los bloques de código sigan la dirección del documento. Útil para idiomas de derecha a izquierda que necesitan bloques de código de derecha a izquierda.
-
-### Soporte para KaTeX
-
-| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |
-|:------:|:-------:|:-------------:|:---------------:|:-------------------:|
-|   ✅   |   ✅    |      ✅       |        ✅       |         ✅          |
-
-KaTeX es una biblioteca JavaScript rápida y fácil de usar para la representación de matemáticas TeX en la web. Puedes habilitarlo con `katex = true`. Mira cómo se ve en tabi [aquí](/es/blog/markdown/#katex).
-
-### Soporte para Mermaid
-
-| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |
-|:------:|:-------:|:-------------:|:----------------:|:-------------------:|
-|   ✅   |    ✅   |      ✅       |        ✅        |         ✅          |
-
-[Mermaid](https://github.com/mermaid-js/mermaid) es una herramienta de diagramación y gráficos basada en JavaScript. Puedes activarla con `mermaid = true`.
-
-Por defecto, la biblioteca Mermaid se sirve localmente. Si prefieres usar un CDN, establece `serve_local_mermaid = false` en `config.toml`. El uso de un CDN servirá la versión más reciente de Mermaid; la opción local servirá la versión incluida con tabi.
-
-Consulta la [documentación de Mermaid](@/blog/shortcodes/index.es.md#diagramas-de-mermaid) para instrucciones de uso y ejemplos.
-
-### Subconjunto de fuente personalizada
-
-| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |
-|:------:|:-------:|:-------------:|:---------------:|:-------------------:|
-|   ❌   |   ❌    |      ✅       |        ❌       |         ❌          |
-
-Las fuentes personalizadas causan parpadeo del texto en Firefox. Para solucionar esto, tabi carga un subconjunto de glifos para el encabezado. Dado que esto (ligeramente) aumenta el tiempo de carga inicial, es una buena idea intentar minimizar el tamaño de este subconjunto.
-
-Puedes crear un subconjunto personalizado adaptado a tu sitio, guardarlo como `static/custom_subset.css`, y hacer que se cargue con `custom_subset = true`.
-
-Para obtener más información, incluyendo instrucciones sobre cómo crear un subconjunto personalizado, consulta la [documentación](@/blog/custom-font-subset/index.es.md).
-
-### Contenido completo en el feed
-
-| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |
-|:------:|:-------:|:-------------:|:---------------:|:-------------------:|
-|   ❌   |   ❌    |      ✅       |        ❌       |         ❌          |
-
-Por defecto, el feed Atom solo contiene el resumen/descripción de tus publicaciones. Puedes incluir el contenido completo de las publicaciones estableciendo `full_content_in_feed = true` en `config.toml`.
-
-### Ocultar contenido del feed
-
-| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |
-|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
-|  ✅  |   ✅    |      ✅       |         ✅        |         ❌          |
-
-Puedes ocultar páginas específicas o secciones enteras del feed con `hide_from_feed = true`.
-
-### Comentarios {#añadir-comentarios}
-
-| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |
-|:------:|:-------:|:-------------:|:---------------:|:-------------------:|
-|   ✅   |  ❌    |      ✅        |        ❌       |         ✅          |
-
-Para activar los comentarios en una página, establece el nombre del sistema como `true` en el front matter. Por ejemplo, `utterances = true`.
-
-Si quieres activar los comentarios de forma global, puedes hacerlo estableciendo `enabled_for_all_posts = true` en la sección apropiada de tu `config.toml` (por ejemplo, en `[extra.giscus]`).
-
-Si has activado un sistema globalmente, pero quieres desactivarlo en una página específica, puedes hacerlo estableciendo el nombre del sistema como `false` en el front matter. Por ejemplo, `utterances = false`.
-
-Lee la [documentación](@/blog/comments/index.es.md) para obtener más información sobre los sistemas disponibles y su configuración.
-
-### Análisis web
-
-| Página | Sección  | `config.toml` | Sigue Jerarquía | Requiere JavaScript |
-|:------:|:--------:|:-------------:|:----------------:|:-------------------:|
-|   ❌   |    ❌    |       ✅      |        ❌        |          ✅         |
-
-tabi ofrece soporte para 3 sistemas de análisis web que respetan la privacidad: [Plausible](https://plausible.io/), [GoatCounter](https://www.goatcounter.com/) y [Umami](https://umami.is/).
-
-Puedes configurarlos en la sección `[extra.analytics]` de tu archivo `config.toml`.
-
-- `service`: el servicio a utilizar. Las opciones disponibles son `"goatcounter"`, `"umami"`, y `"plausible"`.
-
-- `id`: el identificador único para tu servicio de análisis. Esto varía según el servicio:
-  - Para GoatCounter, es el código elegido durante el registro. Instancias auto-alojadas de GoatCounter no requieren este campo.
-  - Para Umami, es la ID del sitio web.
-  - Para Plausible, es el nombre de dominio.
-
-- `self_hosted_url`. Opcional. Utiliza este campo para especificar la URL si tienes una instancia auto-alojada. La URL base variará según tu configuración particular. Algunos ejemplos:
-  - Para GoatCounter: `"https://stats.example.com"`
-  - Para Umami: `"https://umami.example.com"`
-  - Para Plausible: `"https://plausible.example.com"`
-
-Un ejemplo de configuración para GoatCounter no auto-alojada sería:
-
-```toml
-[extra.analytics]
-service = "goatcounter"
-id = "tabi"
-self_hosted_url = ""
-```
-
----
-
-## Pie de página
-
-### Iconos de redes sociales
-
-| Página | Sección | `config.toml` | Respeta jerarquía | Requiere JavaScript |
-|:------:|:-------:|:-------------:|:-----------------:|:-------------------:|
-|   ❌   |   ❌    |      ✅       |         ❌        |         ❌          |
-
-Puedes añadir iconos de redes sociales al pie de página con `socials`, que acepta una lista de objetos de redes sociales. Por ejemplo:
-
-```toml
-socials = [
-    { name = "github", url = "https://github.com/welpo/", icon = "github" },
-    { name = "soundcloud", url = "https://soundcloud.com/oskerwyld", icon = "soundcloud" },
-    { name = "instagram", url = "https://instagram.com/oskerwyld", icon = "instagram" },
-    { name = "youtube", url = "https://youtube.com/@oskerwyld", icon = "youtube" },
-    { name = "spotify", url = "https://open.spotify.com/artist/5Hv2bYBhMp1lUHFri06xkE", icon = "spotify" },
-]
-```
-
-Para ver una lista de todos los iconos integrados, echa un vistazo al directorio [`static/social_icons` en GitHub](https://github.com/welpo/tabi/tree/main/static/social_icons).
-
-¿Echas en falta algún icono? Si crees que sería una buena adición a tabi, no dudes en [abrir un issue](https://github.com/welpo/tabi/issues/new?assignees=&labels=enhancement&projects=&template=feature_request.md&title=) o enviar un pull request ([ejemplo](https://github.com/welpo/tabi/pull/333)).
-
-Para usar un icono personalizado, puedes añadirlo al directorio `static/social_icons` de tu sitio. Por ejemplo, si añades `custom.svg`, puedes referenciarlo así:
-
-```
-{ name = "custom", url = "https://example.com", icon = "custom" }
-```
-
-{{ admonition(type="note", title="NOTA", text="Todos los enlaces sociales incluyen el [atributo](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel/me) `rel='me'`. Esto ayuda a los motores de búsqueda y servicios web a verificar que las cuentas de redes sociales te pertenecen.") }}
-
-### Icono de feed
-
-| Página | Sección | `config.toml` | Respeta jerarquía | Requiere JavaScript |
-|:------:|:-------:|:-------------:|:-----------------:|:-------------------:|
-|   ❌   |   ❌    |      ✅       |         ❌        |         ❌          |
-
-Puedes añadir un enlace a tu feed RSS/Atom en el pie de página con `feed_icon = true`.
-
-Nota para usuarios de Zola 0.19.X: cuando hay dos nombres de archivo en `feed_filenames`, solo se enlazará el primero en el pie de página.
-
-### Menú de pie de página
-
-| Página | Sección | `config.toml` | Respeta jerarquía | Requiere JavaScript |
-|:------:|:-------:|:-------------:|:---------------:|:------------------:|
-|   ❌   |   ❌    |      ✅       |        ❌       |        ❌          |
-
-Puedes añadir un menú al pie de página con `footer_menu`, que acepta una lista de elementos de menú. Por ejemplo:
-
-```toml
-footer_menu = [
-    {url = "about", name = "about", trailing_slash = true},
-    {url = "privacy", name = "privacy", trailing_slash = true},
-    {url = "sitemap.xml", name = "sitemap", trailing_slash = false},
-    {url = "https://example.com", name = "external link", trailing_slash = true},
-]
-```
-
-### Copyright
-
-| Página | Sección | `config.toml` | Respeta jerarquía | Requiere JavaScript |
-|:------:|:-------:|:-------------:|:-----------------:|:-------------------:|
-|   ❌   |   ❌    |      ✅       |         ❌        |         ❌          |
-
-Para añadir una mención sobre los derechos de autor a tu sitio web, configura `copyright`:
-
-```toml
-copyright = "© $CURRENT_YEAR Your Name $SEPARATOR Unless otherwise noted, the content in this website is available under the [CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/) license."
-```
-
-- `$TITLE` será reemplazado por la variable `title` configurada en `config.toml`
-- `$CURRENT_YEAR` será reemplazado por el año actual
-- `$AUTHOR` será reemplazado por la variable `author`
-- `$SEPARATOR` será reemplazado por la [variable `separator`](#separador-personalizado).
-
-Se procesará el texto en Markdown. Por ejemplo, la configuració de arriba:
-
-{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/copyright_light.webp", dark_src="blog/mastering-tabi-settings/img/copyright_dark.webp" alt="Sección de derechos de autor", full_width=true) }}
-
-Si tienes un sitio multilingüe y deseas establecer diferentes notificaciones de derechos de autor para diferentes idiomas, añade la traducción correspondiente a `copyright_translations.{código_de_idioma}` para cada idioma que quieras dar soporte. El código de idioma debe coincidir con el [código de idioma de tabi](https://welpo.github.io/tabi/es/blog/faq-languages/#que-son-estos-codigos-de-dos-letras). Por ejemplo:
-
-```toml
-copyright_translations.es = "© $CURRENT_YEAR $AUTHOR $SEPARATOR A menos que se indique lo contrario, el contenido de esta web está disponible bajo la licencia [CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/)."
-```
-
----
-
-## Metadatos
-
-### Mostrar autoría
-
-| Página | Sección | `config.toml` | Respeta jerarquía | Requiere JavaScript |
-|:------:|:-------:|:-------------:|:-----------------:|:-------------------:|
-|   ✅   |   ✅    |      ✅       |         ✅        |         ❌          |
-
-Para mostrar la autoría de un artículo, usa `show_author = true`.
-
-Esto mostrará lxs autorxs establecidxs en la variable `authors = []` en el front matter del artículo. Si esto no está disponible, se usará `author = ""` en `config.toml`.
-
-### Tiempo de lectura
-
-| Página | Sección | `config.toml` | Respeta jerarquía | Requiere JavaScript |
-|:------:|:-------:|:-------------:|:-----------------:|:-------------------:|
-|   ✅   |   ✅    |      ✅       |         ✅        |         ❌          |
-
-Puedes activar o desactivar el tiempo estimado de lectura de un artículo con `show_reading_time`. Si lo estableces en `true`, se mostrará en los metadatos del artículo, así:
-
-{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/see_changes_light.webp", dark_src="blog/mastering-tabi-settings/img/see_changes_dark.webp" alt="Título del artículo y metadatos, mostrando un enlace «Ver cambios»") }}
-
-Dado que sigue [la jerarquía](#jerarquia-de-configuracion), puedes activarlo o desactivarlo para páginas o secciones específicas. Por ejemplo, esta demo desactiva `show_reading_time = false` en la sección [proyectos](https://welpo.github.io/tabi/es/projects/) en el archivo [`_index.md`](https://github.com/welpo/tabi/blob/main/content/projects/_index.es.md?plain=1), por lo que sus publicaciones individuales no muestran el tiempo de lectura.
-
-### Mostrar la fecha
-
-| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |
-|:------:|:-------:|:-------------:|:------------------:|:-------------------:|
-|   ✅   |   ✅    |      ✅       |         ✅          |         ❌          |
-
-Por defecto, la fecha se muestra debajo del título de la publicación. Puedes ocultarla con `show_date = false`. Esta configuración sigue [la jerarquía](#jerarquia-de-configuracion).
-
-### Formato de fecha
-
-| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |
-|:------:|:-------:|:-------------:|:------------------:|:-------------------:|
-|   ❌   |   ❌    |      ✅       |         ❌         |         ❌          |
-
-tabi tiene dos formatos de fecha: `long_date_format` y `short_date_format`. El formato corto se utiliza en los metadatos de una publicación, mientras que el formato largo se utiliza al listar las publicaciones (es decir, en la [sección de blog](/es/blog/) o en la [página principal](/es/)).
-
-Por defecto es "6th July 2049" para ambos formatos en inglés. Para otros idiomas, el predeterminado es `"%d %B %Y"` para el formato largo y `"%-d %b %Y"` para el formato corto.
-
-En Zola, la sintaxis para el formateo de tiempo está inspirada en strftime. Una referencia completa está disponible en la [documentación de chrono](https://docs.rs/chrono/0.4.31/chrono/format/strftime/index.html).
-
-### Separador personalizado
-
-| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |
-|:------:|:-------:|:-------------:|:------------------:|:-------------------:|
-|   ❌   |   ❌    |      ✅       |         ❌         |         ❌          |
-
-El separador aparece en varios lugares: en el título del navegador, entre los metadatos de una publicación…
-
-El separador por defecto es un punto de viñeta (`•`), pero puedes cambiarlo configurando algo como `separator = "|"`.
-
-### Orden del título
-
-| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |
-|:------:|:-------:|:-------------:|:------------------:|:-------------------:|
-|   ❌   |   ❌    |      ✅       |         ❌         |         ❌          |
-
-Por defecto, el título en la pestaña del navegador es el nombre del sitio seguido del título de la página. Por ejemplo, el título de la sección del blog es «~/tabi • Blog».
-
-Al configurar `invert_title_order = true`, puedes invertir el orden del título del sitio y el título de la página en la pestaña del navegador. Por ejemplo, la etiqueta del título de la sección del blog se convertiría en «Blog • ~/tabi».
-
----
-
-## Seguridad
-
-### Correo electrónico codificado
-
-| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |
-|:------:|:-------:|:-------------:|:------------------:|:-------------------:|
-|   ❌   |   ❌    |      ✅       |         ❌         |         ✅          |
-
-Para proteger tu dirección de correo electrónico de los spambots, puedes codificarla en el pie de página. Puedes hacer esto estableciendo `email` en una versión codificada en base64 de tu dirección de correo electrónico[^2]. Por ejemplo, `email = "bWFpbEBleGFtcGxlLmNvbQ=="` es la versión codificada en base64 de "mail@example.com".
-
-Si no quieres codificar tu correo electrónico tú mismo, tabi puede hacerlo por ti si configuras `encode_plaintext_email = true`. Esto te permite establecer un correo electrónico en texto plano en la configuración. Ten en cuenta que esto sólo protege tu dirección de correo electrónico en tu sitio, no en repositorios públicos.
-
-Si el correo electrónico está codificado (ya sea por ti o por tabi), los usuarios con JavaScript desactivado no verán el icono de correo electrónico.
-
-### CSP (Content Security Policy)
-
-| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |
-|:------:|:-------:|:-------------:|:------------------:|:-------------------:|
-|   ❌   |   ❌    |      ✅       |         ❌         |         ❌          |
-
-La Content Security Policy (CSP) es una capa adicional de seguridad que ayuda a detectar y mitigar ciertos tipos de ataques, incluidos ataques de Cross Site Scripting (XSS) e inyección de datos. Estos ataques se utilizan para todo, desde robo de datos hasta desfiguración de sitios y distribución de malware.
-
-tabi tiene una CSP predeterminada que permite imágenes y vídeos remotos, así como incrustaciones de YouTube y Vimeo. Puedes personalizarla con `allowed_domains`, que toma una lista de directivas de CSP. Esta es la CSP predeterminada:
-
-```toml
-allowed_domains = [
-    { directive = "font-src", domains = ["'self'", "data:"] },
-    { directive = "img-src", domains = ["'self'", "https://*", "data:"] },
-    { directive = "script-src", domains = ["'self'"] },
-    { directive = "style-src", domains = ["'self'"] },
-    { directive = "frame-src", domains = ["player.vimeo.com", "https://www.youtube-nocookie.com"] },
-]
-```
-
-Esta función está habilitada por defecto. Para deshabilitarla (y permitir todo), configura `enable_csp = false` en una página, sección o globalmente. La opción `enable_csp` sigue [la jerarquía](#jerarquia-de-configuracion).
-
-Para obtener más información, consulta la [página de documentación de CSP](@/blog/security/index.es.md).
-
-[^1]: Si estás utilizando un repositorio Git remoto, es posible que quieras automatizar el proceso de actualización del campo `updated`. Aquí tienes una guía para eso: [Zola Git Hook: actualizando las fechas de las publicaciones](https://osc.garden/es/blog/zola-date-git-hook/).
-
-[^2]: Para codificar tu correo electrónico en base64 puedes utilizar [herramientas en línea](https://www.base64encode.org/) o, en tu terminal, ejecutar: `printf 'mail@example.com' | base64`

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

@@ -1,977 +0,0 @@
-+++
-title = "Mastering tabi Settings: A Comprehensive Guide"
-date = 2023-09-18
-updated = 2024-11-30
-description = "Discover the many ways you can customise your tabi site."
-
-[taxonomies]
-tags = ["showcase", "tutorial", "FAQ"]
-
-[extra]
-pinned = true
-quick_navigation_buttons = true
-social_media_card = "social_cards/blog_mastering_tabi_settings.jpg"
-+++
-
-This aims to be a comprehensive guide to every setting in tabi. If you have any questions, feel free to [open an issue on GitHub](https://github.com/welpo/tabi/issues/new) or [start a discussion](https://github.com/welpo/tabi/discussions).
-
-<details>
-    <summary><b>Table of Contents</b></summary>
-    <!-- toc -->
-</details>
-
-## Settings Hierarchy
-
-tabi has a hierarchy that allows you to customise your site at different levels. The hierarchy (from low to high priority) is as follows:
-
-1. **Global settings**: These are the settings that apply to your entire site. They are set in `config.toml`.
-2. **Section settings**: These are the settings that apply to a section of your site (e.g.`/blog` or `/projects`). They are set in the front matter of the `_index.md` file of the section.
-3. **Parent page settings**: For nested pages (pages within pages), these are the settings from the parent page.
-4. **Page settings**: These are the settings that apply to a single page. They are set in the front matter of the page.
-
-In all cases, tabi's settings are set in the `[extra]` section.
-
-For settings which follow this hierarchy, the value set on a page overrides the value for a section, which overrides the global value. In short: the more specific the setting, the higher priority it has, or `page > parent page/section > config.toml`.
-
----
-
-## Search
-
-| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
-|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
-|  ❌  |   ❌    |      ✅       |         ❌        |         ✅          |
-
-tabi supports accessible, local multi-lingual search with [Elasticlunr](http://elasticlunr.com/). To enable it, you need to:
-
-1. Set a `default_language` in `config.toml`.
-2. Set `build_search_index = true`.
-3. Optionally, configure the `[search]`.
-
-Here's an example configuration:
-
-```toml
-base_url = "https://example.com"
-default_language = "en"
-build_search_index = true
-
-[search]
-index_format = "elasticlunr_json" # Or the less efficient "elasticlunr_javascript".
-include_title = true
-include_description = true
-include_path = true
-include_content = true
-```
-
-**Note**: for Chinese/Japanese search support, you need to use a [custom Zola build](https://github.com/getzola/zola/blob/master/Cargo.toml#L54-L55).
-
-### Considerations for Zola 0.17.X Users
-
-Zola 0.17.X doesn't provide access to the `search.index_format` variable ([bug report](https://github.com/getzola/zola/issues/2165)). When using tabi, this variable defaults to the more efficient JSON index. However, due to [another bug](https://github.com/getzola/zola/issues/2193) fixed in 0.18.0, the JSON index for multi-language sites is not generated correctly.
-
-Users with Zola versions prior to 0.18.0 who want to use the JavaScript index need to set the `index_format` variable in two places:
-
-```toml
-[search]
-index_format = "elasticlunr_javascript"
-
-[extra]
-index_format = "elasticlunr_javascript"
-```
-
-This ensures tabi loads the right files. We recommend upgrading to Zola 0.18.0 or later for optimal functionality.
-
-### Implementation Details
-
-For technical details about the search implementation in tabi, including when the index loads, accessibility features, and other specifics, see the [Pull Request #250](https://github.com/welpo/tabi/pull/250).
-
----
-
-## Multilingual Support
-
-tabi offers comprehensive multilingual support for your Zola site, from setting a default language to adding as many as you wish. Refer to the [multilingual FAQ](@/blog/faq-languages/index.md) for more information.
-
----
-
-## Appearance
-
-### Home Page
-
-The [main page](/) of this demo has a header with an image, a title and description:
-
-{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/header_light.webp", dark_src="blog/mastering-tabi-settings/img/header_dark.webp", alt="Main page header") }}
-
-#### Heading
-
-To set the image and title, you can use the `header` variable in the front matter of the section's `_index.md` file. For example:
-
-```toml
-[extra]
-header = {title = "Hello! I'm tabi~", img = "img/main.webp", img_alt = "Óscar Fernández, the theme's author" }
-```
-
-The description is regular Markdown content, set outside the front matter.
-
-#### Listing Recent Posts
-
-To show posts on your main page, you first need to decide where these posts will be served from: the root path (`/`) or a subdirectory (e.g., `/blog`). 
-
-**Option A: Serve posts from the root path (`/`)**
-
-Set `paginate_by` in the front matter of your `content/_index.md` file:
-
-```toml
-title = "Latest posts"
-sort_by = "date"
-paginate_by = 5  # Show 5 posts per page.
-
-[extra]
-header = {title = "Hello! I'm tabi~", img = "img/main.webp", img_alt = "Your Name" }
-```
-
-{{ admonition(type="note", text="The `paginate_by` setting goes in the main front matter, not in the `[extra]` section.") }}
-
-**Option B: Serve posts from a subdirectory (e.g., `/blog`)**
-
-Use `section_path` in the `[extra]` section of your `content/_index.md` file:
-
-```toml
-title = "Latest posts"
-sort_by = "date"
-# Do not set `paginate_by` here.
-
-[extra]
-header = {title = "Hello! I'm tabi~", img = "img/main.webp", img_alt = "Your Name" }
-section_path = "blog/_index.md"  # Where to find your posts.
-max_posts = 5  # Show up to 5 posts on the main page.
-```
-
-{{ admonition(type="warning", text="Do not set both `paginate_by` and `section_path`. These settings are mutually exclusive and using both may result in no posts being displayed.") }}
-
-Additional notes:
-
-- The `title` in the front matter sets the header that appears above the posts.
-- Use the full path to the section's `_index.md` file for `section_path`. Using `section_path = "blog/"` will not work.
-
-##### Pinning Posts
-
-You can pin posts to keep them at the top of the main page listing. In this demo, this post is pinned, so it appears first with a "pinned" icon and label:
-
-{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/pinned_post_light.webp", dark_src="blog/mastering-tabi-settings/img/pinned_post_dark.webp", alt="Pinned post", full_width=true) }}
-
-Pinned posts are shown first, maintaining their relative order of the section's `sort_by`, followed by regular posts.
-
-To pin a post, add the following to its front matter:
-
-```toml
-[extra]
-pinned = true
-```
-
-{{ admonition(type="info", text="This setting only affects your site's main pages (like `/`, `/es/`, `/fr/`). Other sections like `blog/`, `tags/`, or `archive/` show posts in their normal order.") }}
-
-{{ admonition(type="warning", text='When using pagination (`paginate_by`), pinned posts may appear twice: once on top of page 1, and again in their normal chronological position on subsequent pages.') }}
-
-##### Display the Date of Posts in Listing
-
-By default, when listing posts, the date of post creation is shown. You can configure which date(s) to display using the `post_listing_date` option. Available settings:
-
-- `date`: Show only the original date of the post (default).
-- `updated`: Show only the last updated date of the post. If there is no last updated date, it shows the original date.
-- `both`: Show both the original date and the last updated date.
-
-```toml
-post_listing_date = "date"
-```
-
-#### Listing Projects
-
-You can showcase a selection of projects on your main page. To do this, you'll need to set up the `projects` directory first.
-
-Once that's done, you configure the path to the projects in the `[extra]` section of your `_index.md` file:
-
-```toml
-[extra]
-projects_path = "projects/_index.md"
-```
-
-By default, this will show the 3 projects with the highest priority (smallest weight; same sorting as Projects page). To show more or fewer projects, you can set `max_projects` in the `[extra]` section.
-
-By default, the featured projects will be shown after the posts. If you want to show the projects before the posts, set `show_projects_first = true`.
-
-### Light and Dark Mode Switcher
-
-| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
-|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
-|  ❌  |   ❌    |      ✅       |         ❌        |         ✅          |
-
-The light and dark mode switcher (the moon/sun icon on the top right) can be enabled by setting `theme_switcher = true` in  `config.toml`.
-
-### Default (Light/Dark) Mode
-
-| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
-|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
-|  ❌  |   ❌    |      ✅       |         ❌        |         ❌          |
-
-The default theme can be specified with the `default_theme` variable, which accepts either `"dark"` or `"light"`. If you don't set it, the default theme will be the one set in the user's browser.
-
-### Custom Skins
-
-| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
-|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
-|  ❌  |   ❌    |      ✅       |         ❌        |         ❌          |
-
-tabi's skins change the main colour of the site. You can set the skin in `config.toml` with `skin = "skin_name"`. For example, `skin = "lavender"` looks like this (click to switch between light and dark mode):
-
-{{ image_toggler(default_src="blog/customise-tabi/skins/lavender_light.webp", toggled_src="blog/customise-tabi/skins/lavender_dark.webp", default_alt="lavender skin in light mode", toggled_alt="lavender skin in dark mode", full_width=true) }}
-
-Explore the available skins and learn how to create your own reading [the documentation](/blog/customise-tabi/#skins).
-
-### Sans-serif Font
-
-| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
-|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
-|  ❌  |   ❌    |      ✅       |         ❌        |         ❌          |
-
-tabi uses a serif font for article paragraphs (the one you're seeing now). You can switch to using a sans-serif font (the one on the headers/menu) throughout your entire site by setting `override_serif_with_sans = true` in your `config.toml`.
-
-Click on the image below to compare the two looks:
-
-{{ image_toggler(default_src="blog/mastering-tabi-settings/img/serif.webp", toggled_src="blog/mastering-tabi-settings/img/sans-serif.webp", default_alt="Serif font", toggled_alt="Sans-serif font", full_width=true) }}
-
-### Custom CSS
-
-| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
-|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
-|  ✅  |   ❌    |      ✅       |         ❌        |         ❌          |
-
-You can load custom CSS for the entire site or on specific pages with `stylesheets`, which takes a list of paths to CSS files. For example:
-
-```toml
-stylesheets = ["css/custom.css", "css/another.css"]
-```
-
-### Browser Theme Colour
-
-| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
-|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
-|  ❌  |   ❌    |      ✅       |         ❌        |         ❌          |
-
-The browser theme colour is the colour that appears in the browser's tab bar:
-
-{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/browser_theme_color_light.webp", dark_src="blog/mastering-tabi-settings/img/browser_theme_color_dark.webp" alt="tabi with a coloured browser theme") }}
-
-You can set it in `config.toml` like `browser_theme_color = "#087e96"`. If you'd like different colours for dark/light mode, you can set an array of colours with `browser_theme_color = ["#ffffff", "#000000"]`. The first colour will be used for light mode, the second for dark mode.
-
-This variable accepts any valid CSS colour, so you can use keywords (e.g. `blue`), hex codes (e.g. `#087e96`) or RGB/HSL values (e.g. `rgb(8, 126, 150)`).
-
-### Compact Tags
-
-| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
-|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
-|  ❌  |   ❌    |      ✅       |         ❌        |         ❌          |
-
-By default, the [tags page](/tags) displays tags as:
-
-[TagName](#) — n post[s]
-
-Setting `compact_tags = true` will display them as:
-
-[TagName](#) <sup>n</sup>
-
-### Tags Sorting
-
-| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
-|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
-|  ❌  |   ❌    |      ✅       |         ❌        |         ❌          |
-
-By default, the [tags page](/tags) sorts tags alphabetically, given the default setting of `tag_sorting = "name"`.
-
-Setting `tag_sorting = "frequency"` will sort them by number-of-posts (descending).
-
----
-
-## Series
-
-For a detailed explanation of the series feature, see the [series documentation](@/blog/series/index.md).
-
-### Jump to posts link
-
-| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
-|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
-|  ❌  |     ✅  |      ✅       |           ✅      |         ❌          |
-
-By default, a "Jump to posts" link automatically appears next to the series title when a series has a content over 2000 characters:
-
-{{ dual_theme_image(light_src="blog/series/img/jump_to_series_posts_light.webp", dark_src="blog/series/img/jump_to_series_posts_dark.webp" alt="jump to series posts link", full_width=true) }}
-
-Set `show_jump_to_posts = true` to force the feature on and `show_jump_to_posts = false` to force it off.
-
-### Series pages indexation
-
-| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
-|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
-|  ❌  |     ✅  |      ✅       |           ✅      |         ❌          |
-
-By default, series page are indexed (using a 1-based indexing) as per the series section `sort_by`.
-
-Set `post_listing_index_reversed = true` to reverse this index.
-
----
-
-## Git Repository Integration
-
-| Page  | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
-|:-----:|:-------:|:-------------:|:-----------------:|:-------------------:|
-|  ❓   |   ❓    |      ✅       |         ❓        |         ❌          |
-
-❓: `show_remote_source` does follow [the hierarchy](#settings-hierarchy) and can be set on a page, section or globally. The rest of the settings can only be set in `config.toml`.
-
-These settings allow you to link your tabi website with a public Git repository in GitHub, GitLab, Gitea or Codeberg. Example settings:
-
-```toml
-remote_repository_url = "https://github.com/welpo/tabi"
-remote_repository_git_platform = "auto"
-remote_repository_branch = "main"
-show_remote_changes = true
-show_remote_source = true
-```
-
-This enables two features:
-
-1. `show_remote_source = true` adds a link to the source code of your site (your `remote_repository_url`) will be displayed on the footer:
-
-{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/site_source_light.webp", dark_src="blog/mastering-tabi-settings/img/site_source_dark.webp" alt="Page footer, showing a 'Site source' link") }}
-
-1. `show_remote_changes = true` adds a "See changes ↗" link to the commit history of updated posts, next to the last updated date [^1]:
-
-{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/see_changes_light.webp", dark_src="blog/mastering-tabi-settings/img/see_changes_dark.webp" alt="Post title and metadata, showing a 'See changes' link") }}
-
-Clicking on this link will take you to the commit history of the post, where you can see the changes made to it:
-
-{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/commit_history_light.webp", dark_src="blog/mastering-tabi-settings/img/commit_history_dark.webp" alt="Commit history of a post", full_width=true) }}
-
----
-
-## Pages
-
-### Projects
-
-tabi has a built-in projects (cards) template. To enable it, you can create a directory in `content/projects/`. There, you can create a `_index.md` file with the following front matter:
-
-```toml
-title = "Projects"
-sort_by = "weight"
-template = "cards.html"
-insert_anchor_links = "left"
-
-[extra]
-show_reading_time = false
-quick_navigation_buttons = true
-```
-
-- The `title` is the title of the page.
-- `sort_by` determines how the projects are sorted. You can sort by "date", "update_date", "title", "title_bytes", "weight", "slug" or "none".
-- `template = "cards.html"` sets the template to render the projects page.
-- `insert_anchor_links = "left"` adds anchor links to headers.
-- `show_reading_time = false` hides the [reading time](#reading-time).
-- `quick_navigation_buttons = true` shows the [quick navigation buttons](#quick-navigation-buttons) are shown.
-
-Alongside the `_index.md` file, you can create a file for each project. For example, this is the front matter for the [tabi project page](@/projects/tabi/index.md):
-
-```toml
-title = "tabi"
-description = "A feature-rich modern Zola theme with first-class multi-language support."
-weight = 1
-
-[extra]
-local_image = "img/tabi.webp"
-```
-
-- `title` is the title of the project.
-- `description` is the description of the project.
-- `weight` determines the order in which the projects are shown. The lower the weight, the higher the project will appear.
-- `local_image` is the path to the image of the project. This image is shown on the projects page.
-
-When a user clicks on the image or title of a project, they will be taken to the project's page. If you'd rather have users go to an external link, you can set `link_to = "https://example.com` in the `[extra]` section of the project's `.md` file.
-
-The individual project's page is rendered with the default template, unless you set another one, e.g. `template = "info-page.html"`.
-
-#### Filtering Projects
-
-If you add tags to your projects, you will see a tag filter:
-
-{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/projects_tag_filter_light.webp", dark_src="blog/mastering-tabi-settings/img/projects_tag_filter_dark.webp", alt="Projects page with tag filter", full_width=true) }}
-
-The tag filtering system uses progressive enhancement:
-
-- Without JavaScript: Tags link directly to dedicated tag pages (e.g. `/tags/tag-name`)
-- With JavaScript: Instant filtering, URL syncing (#tag-name), and keyboard navigation
-
-To disable this feature, set `enable_cards_tag_filtering = false` in the `[extra]` section of the `projects/_index.md` file or in `config.toml`.
-
-{% admonition(type="tip") %}
-
-To filter projects by tags, you need to set tags in the front matter of each project. For example:
-
-```toml
-title = "project name"
-weight = 40
-
-[taxonomies]
-tags = ["tag one", "tag 2", "third tag"]
-```
-
-{% end %}
-
-### Archive
-
-Adding an archive page is similar to adding a projects page. You can create a directory in `content/archive/`. There, you can create a `_index.md` file with the following front matter:
-
-```toml
-title = "Archive"
-template = "archive.html"
-```
-
-By default, the archive will list posts located in `blog/`. To customise this, you can modify the `[extra]` section of the `_index.md` file:
-
-- **For a single source path**: Set `section_path = "your-path/"` to list posts from a specific directory. Make sure to include the trailing slash.
-
-- **For multiple source paths**: If you want to aggregate posts from various directories, `section_path` can be specified as a list of paths. For example:
-
-  ```toml
-  [extra]
-  section_path = ["blog/", "notes/", "path-three/"]
-  ```
-
-**Notes**:
-
-- the Archive page will only list posts that have a date in their front matter.
-- Post sorting is determined by the `sort_by` variable of the sections you are archiving. This demo uses `sort_by = "date"` set in the `blog/_index.md`.
-
-### Tags
-
-tabi has built-in support for tags. To enable them, simply add the taxonomy to your `config.toml`:
-
-```toml
-taxonomies = [{name = "tags", feed = true}]
-```
-
-You can then add tags to your posts by adding them to the `tags` array in the front matter of your post. For example:
-
-```toml,hl_lines=05-06
-title = "Bears, Beets, Battlestar Galactica: The Dwight Schrute Guide to Life"
-date = 2007-04-26
-description = "Lessons learned from beet farming and paper sales."
-
-[taxonomies]
-tags = ["personal", "beets"]
-```
-
-### About Page
-
-If you'd like to have a non-article page for an "About" section, a "Contact" or "Copyright" page, etc., you can use the `info-page.html` template.
-
-First, create a directory inside `content/` with any name you like. For example, `content/pages/`. Then, create a `_index.md` file inside that directory. The file should look like this:
-
-```markdown
-+++
-render = false
-insert_anchor_links = "left"
-+++
-```
-
-- `render = false` tells Zola not to render the section.
-- `insert_anchor_links = "left"` adds anchor links to headers. This is optional.
-
-Inside the directory, you can create any number of `.md` files.
-
-In this demo, the [about](about/) page uses the `info-page.html` template. The front matter is as follows:
-
-```toml
-title = "About"
-template = "info-page.html"
-path = "about"
-```
-
-Notice how the `path` is set to `about`. Zola will place the page at `$base_url/about/`. If you'd like to have the page available at `/contact/`, you'd set `path = "contact"`.
-
----
-
-## SEO
-
-tabi takes care of most of the SEO for you (like Open Graph protocol tags, description, color-scheme…), but there are a few things you can customise.
-
-### Favicon
-
-| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
-|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
-|  ❌  |   ❌    |      ✅       |         ❌        |         ❌          |
-
-The favicon is the small icon that appears in the browser tab. You can set it in `config.toml` with `favicon = "img/favicon.png"`.
-
-### Emoji Favicon
-
-| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
-|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
-|  ❌  |   ❌    |      ✅       |         ❌        |         ❌          |
-
-You can also set an emoji as your favicon with `favicon_emoji`. For example, `favicon_emoji = "👾"`.
-
-Note: Some browsers don't support emoji favicons. See the compatibility table in [caniuse](https://caniuse.com/link-icon-svg).
-
-### Canonical URL
-
-| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
-|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
-|  ✅  |   ✅    |      ✅       |         ❌        |         ❌          |
-
-The canonical URL is a way to indicate to search engines what the preferred URL is for your website content. This is useful for SEO and avoiding duplicate content issues.
-
-By default, the canonical URL is the URL of the page you're on. However, you can override this by setting `canonical_url` in the front matter of your page or section.
-
-If you have a site with an identical structure and matching content, you can set `base_canonical_url` in your `config.toml`. The canonical URL will be crafted by replacing the `$base_url` of the current URL with the `$base_canonical_url` you set.
-
-For example, if you set `base_canonical_url = "https://example.com"`, the canonical URL of the page `$base_url/blog/post1` will be `https://example.com/blog/post1`. This is useful if you have a site with multiple domains that share the same content.
-
-**Note**: to ensure that the canonical URL is correct, it's probably best to set `canonical_url` individually for each page.
-
-### Social media cards
-
-| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
-|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
-|  ✅  |   ✅    |      ✅       |         ✅        |         ❌          |
-
-Social media cards are the images that are displayed when you share a link on social media:
-
-{{ dimmable_image(src="img/with_social_media_card.webp", alt="A screenshot of WhatsApp showing a link with a social media card") }}
-
-You can set the social media image with `social_media_card = "img/social_media_card.png"`.
-
-You can specify both relative and absolute paths.
-
-- **Relative Path**: Place the image in the same folder as your blog post and specify its name. For example, `social_media_card = "relative_image.png"`.
-
-- **Absolute Path**: Put the image in a specific folder and specify the path from the root. For example, `social_media_card = "/img/absolute_image.png"`.
-
-If both relative and absolute paths are valid, the relative path will take precedence.
-
-Since it follows the [hierarchy](#settings-hierarchy), if it's not set on a page, but is set on a section, the section's image will be used. If it's not set on a page or section, but is set in `config.toml`, the global image will be used.
-
-{{ admonition(type="tip", title="PROTIP", text="Automate their creation with a [script](https://github.com/welpo/osc.garden/blob/main/static/code/social-cards-zola): [Automating Link Previews for Zola Sites](https://osc.garden/blog/automating-social-media-cards-zola/).") }}
-
-### Fediverse Creator
-
-| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
-|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
-|  ❌  |   ❌    |      ✅       |         ❌        |         ❌          |
-
-You can highlight your fediverse profile in Mastodon link previews by setting the `fediverse_creator` variable in your `config.toml`. For example, for @username@example.com, use:
-
-```toml
-fediverse_creator = { handle = "username", domain = "example.com" }
-```
-
-This adds metadata to your HTML, allowing Mastodon to display the author's fediverse profile when your content is shared.
-
----
-
-## Navigation
-
-### Navigation Bar
-
-| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
-|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
-|  ❌  |   ❌    |      ✅       |         ❌        |         ❌          |
-
-The navigation bar is the bar at the top of the page that contains the site title and the navigation menu. You can customise which items appear by setting `menu` in `config.toml`. For example:
-
-```toml
-menu = [
-    { name = "blog", url = "blog", trailing_slash = true },
-    { name = "archive", url = "archive", trailing_slash = true },
-    { name = "tags", url = "tags", trailing_slash = true },
-    { name = "projects", url = "projects", trailing_slash = true },
-    { name = "about", url = "about", trailing_slash = true },
-]
-```
-
-### Quick Navigation Buttons
-
-| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
-|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
-|  ✅  |   ✅    |      ✅       |         ✅        |         ❌          |
-
-Quick navigation buttons are the buttons that appear on the bottom right of the screen. You should see them on this page, if you're not on mobile. They look like this:
-
-{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/quick_navigation_buttons_light.webp", dark_src="blog/mastering-tabi-settings/img/quick_navigation_buttons_dark.webp" alt="Quick navigation buttons") }}
-
-The buttons allow you to quickly navigate through an expandable mini-table of contents, to the comment section (if enabled), as well as to the top of the page.
-
-To enable them, set `quick_navigation_buttons = true`.
-
-### Table of Contents
-
-| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
-|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
-|  ✅  |   ✅    |      ✅       |         ✅        |         ❌          |
-
-Enable the table of contents right below the post's title and metadata with `toc = true`.
-
-Read more about the table of contents and how to customise it by reading [the docs](@/blog/toc/index.md).
-
-### Previous and Next Article Links
-
-| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
-|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
-|  ✅  |   ✅    |      ✅       |         ✅        |         ❌          |
-
-Displays links to the previous and next articles at the bottom of posts. It looks like this:
-
-{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/show_previous_next_article_links_light.webp", dark_src="blog/mastering-tabi-settings/img/show_previous_next_article_links_dark.webp" alt="Previous and next article links", full_width=true) }}
-
-To activate this feature, set `show_previous_next_article_links = true` and ensure your section has a `sort_by` value (e.g. `sort_by = "date"`).
-
-By default, next articles will be on the left side of the page and previous articles will be on the right side.
-To reverse the order (next articles on the right and previous articles on the left), set `invert_previous_next_article_links = true`.
-
-By default, this navigation section will have the full width of the site (same as the navigation bar at the top).
-To make it narrower, matching the article width, set `previous_next_article_links_full_width = false`.
-
-All of these settings follow the hierarchy.
-
-### Footnote Backlinks
-
-{{ admonition(type="warning", title="DEPRECATION WARNING", text="Zola v0.19.0 and later can do this natively. Set `bottom_footnotes = true` in your config's `[markdown]` section.") }}
-
-| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
-|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
-|  ✅  |   ✅    |      ✅       |         ✅        |         ✅          |
-
-Setting `footnote_backlinks = true` will add backlinks to the footnotes of your posts, like this:
-
-{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/footnote_backlinks_light.webp", dark_src="blog/mastering-tabi-settings/img/footnote_backlinks_dark.webp" alt="Footnote backlinks", full_width=true) }}
-
-When you click on a backlink (the arrow ↩), it will take you back to the text where the footnote was referenced.
-
----
-
-## Usability
-
-### Copy Button on Code Blocks
-
-| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
-|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
-|  ✅  |   ✅    |      ✅       |         ✅        |         ✅          |
-
-Setting `copy_button = true` will add a small copy button to the top right of code blocks, like this:
-
-{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/copy_button_on_code_blocks_light.webp", dark_src="blog/mastering-tabi-settings/img/copy_button_on_code_blocks_dark.webp" alt="Copy button on code blocks", full_width=true) }}
-
-### Source/Path on Code Blocks
-
-| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
-|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
-|  ✅  |   ✅    |      ✅       |         ✅        |         ✅          |
-
-Setting `add_src_to_code_block = true` enables the use of the [`add_src_to_code_block` shortcode](@/blog/shortcodes/index.md#show-source-or-path).
-
-### Force Code Blocks LTR
-
-| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
-|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
-|  ✅  |   ✅    |      ✅       |         ✅        |         ❌          |
-
-By default, code blocks are rendered left-to-right, regardless of the overall text direction. Set `force_codeblock_ltr = false` to allow code blocks to follow the document's text direction. Useful for RTL languages needing RTL code blocks.
-
-### KaTeX Support
-
-| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
-|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
-|  ✅  |   ✅    |      ✅       |         ✅        |         ✅          |
-
-KaTeX is a fast, easy-to-use JavaScript library for TeX math rendering on the web. You can enable it with `katex = true`. See what it looks like in tabi [here](/blog/markdown/#katex).
-
-### Mermaid Support
-
-| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
-|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
-|  ✅  |    ✅    |      ✅       |         ✅         |         ✅          |
-
-[Mermaid](https://github.com/mermaid-js/mermaid) is a JavaScript-based diagramming and charting tool. You can enable it with `mermaid = true`.
-
-By default, the Mermaid library is served locally. If you prefer to use a CDN, set `serve_local_mermaid = false` in `config.toml`. Using a CDN will serve the latest version of Mermaid; the local option will serve the version bundled with tabi.
-
-See the [Mermaid documentation](@/blog/shortcodes/index.md#mermaid-diagrams) for usage instructions and examples.
-
-### Custom Font Subset
-
-| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
-|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
-|  ❌  |   ❌    |      ✅       |         ❌        |         ❌          |
-
-Custom fonts cause flashing text in Firefox. To amend this, tabi loads a subset of glyphs for the header. Since this (slightly) increases the initial load time, it's a good idea to try and minimise the size of this subset.
-
-You can create a custom subset tailored to your site, save it as `static/custom_subset.css`, and have it load with `custom_subset = true`.
-
-For more information, including instructions on how to create a custom subset, see the [docs](@/blog/custom-font-subset/index.md).
-
-### Full Content in Feed
-
-| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
-|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
-|  ❌  |   ❌    |      ✅       |         ❌        |         ❌          |
-
-By default, the Atom feed only contains the summary/description of your posts. You can include the entire posts' content by setting `full_content_in_feed = true` in `config.toml`.
-
-### Hiding Content from Feed
-
-| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
-|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
-|  ✅  |   ✅    |      ✅       |         ✅        |         ❌          |
-
-You can hide specific pages or entire sections from your feed by setting `hide_from_feed = true`.
-
-### Comments {#adding-comments}
-
-| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
-|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
-|  ✅  |   ❌    |      ✅       |         ❌        |         ✅          |
-
-To enable comments on an individual page, set the name of the system you want to enable to `true` in the front matter. For example, `utterances = true`.
-
-To enable a system globally (on all pages), set `enabled_for_all_posts = true` in the correct section of your `config.toml` (e.g. inside `[extra.giscus]`).
-
-If you have enabled a system globally, but want to disable it on a specific page, set the name of the system to `false` in the front matter of that page. For example, `utterances = false`.
-
-Read [the docs](@/blog/comments/index.md) for more information on the available systems and their setup.
-
-### Analytics
-
-| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
-|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
-|  ❌  |   ❌    |      ✅       |         ❌        |         ✅          |
-
-tabi supports 3 privacy-friendly analytics systems: [Plausible](https://plausible.io/), [GoatCounter](https://www.goatcounter.com/) and [Umami](https://umami.is/).
-
-You can set them up in the `[extra.analytics]` section of your `config.toml`.
-
-- `service`: Specifies which analytics service to use. Supported options are `"goatcounter"`, `"umami"`, and `"plausible"`.
-
-- `id`: The unique identifier for your analytics service. This varies based on the service:
-  - For GoatCounter, it's the code chosen during signup. Self-hosted instances of GoatCounter don't require this field.
-  - For Umami, it's the website ID.
-  - For Plausible, it's the domain name.
-
-- `self_hosted_url`: Optional. Use this field to specify the URL for self-hosted instances of your chosen analytics service. The base URL differs based on your specific setup. Some examples:
-  - For GoatCounter: `"https://stats.example.com"`
-  - For Umami: `"https://umami.example.com"`
-  - For Plausible: `"https://plausible.example.com"`
-
-An example configuration for non-self-hosted GoatCounter would look like this:
-
-```toml
-[extra.analytics]
-service = "goatcounter"
-id = "tabi"
-self_hosted_url = ""
-```
-
----
-
-## Footer
-
-### Social Media Icons
-
-| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
-|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
-|  ❌  |   ❌    |      ✅       |         ❌        |         ❌          |
-
-You can add social media icons to the footer with `socials`, which takes a list of social media objects. For example:
-
-```toml
-socials = [
-    { name = "github", url = "https://github.com/welpo/", icon = "github" },
-    { name = "soundcloud", url = "https://soundcloud.com/oskerwyld", icon = "soundcloud" },
-    { name = "instagram", url = "https://instagram.com/oskerwyld", icon = "instagram" },
-    { name = "youtube", url = "https://youtube.com/@oskerwyld", icon = "youtube" },
-    { name = "spotify", url = "https://open.spotify.com/artist/5Hv2bYBhMp1lUHFri06xkE", icon = "spotify" },
-]
-```
-
-To see a list of all the built-in icons, take a look at the [`static/social_icons` directory on GitHub](https://github.com/welpo/tabi/tree/main/static/social_icons).
-
-Missing an icon? If you think it would be a good addition to tabi, feel free to [open an issue](https://github.com/welpo/tabi/issues/new?assignees=&labels=enhancement&projects=&template=feature_request.md&title=) or submit a pull request ([example](https://github.com/welpo/tabi/pull/333)).
-
-To use a custom icon, you can add it to your site's `static/social_icons` directory. For example, if you add `custom.svg`, you can reference it like this:
-
-```
-{ name = "custom", url = "https://example.com", icon = "custom" }
-```
-
-{{ admonition(type="note", text="All social links include the `rel='me'` [attribute](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel/me). This helps search engines and web services verify that the social media accounts are owned by you.") }}
-
-### Feed Icon
-
-| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
-|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
-|  ❌  |   ❌    |      ✅       |         ❌        |         ❌          |
-
-You can add a link to your RSS/Atom feed to the footer with `feed_icon = true`.
-
-Note for Zola 0.19.X users: when there are two filenames in `feed_filenames`, only the first one will be linked in the footer.
-
-### Footer Menu
-
-| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
-|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
-|  ❌  |   ❌    |      ✅       |         ❌        |         ❌          |
-
-You can add a menu to the footer with `footer_menu`, which takes a list of menu items. For example:
-
-```toml
-footer_menu = [
-    {url = "about", name = "about", trailing_slash = true},
-    {url = "privacy", name = "privacy", trailing_slash = true},
-    {url = "sitemap.xml", name = "sitemap", trailing_slash = false},
-    {url = "https://example.com", name = "external link", trailing_slash = true},
-]
-```
-
-### Copyright
-
-| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
-|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
-|  ❌  |   ❌    |      ✅       |         ❌        |         ❌          |
-
-To add a copyright notice to your site, set `copyright`:
-
-```toml
-copyright = "© $CURRENT_YEAR Your Name $SEPARATOR Unless otherwise noted, the content in this website is available under the [CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/) license."
-```
-
-You can use the following variables:
-
-- `$TITLE` will be replaced by `title` variable set in `config.toml`
-- `$CURRENT_YEAR` will be replaced by the current year
-- `$AUTHOR` will be replaced by the `author` variable
-- `$SEPARATOR` will be replaced by the [`separator` variable](#custom-separator)
-
-Markdown is rendered. The example above:
-
-{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/copyright_light.webp", dark_src="blog/mastering-tabi-settings/img/copyright_dark.webp" alt="Copyright section", full_width=true) }}
-
-If you have a multilingual site and want to set different copyright notices for different languages, you can add the corresponding translation to `copyright_translations.{language_code}` for each language you want to support. The language code must match [tabi's language code](https://welpo.github.io/tabi/blog/faq-languages/#what-are-these-two-letter-codes). For example, for Spanish:
-
-```toml
-copyright_translations.es = "© $CURRENT_YEAR $AUTHOR $SEPARATOR A menos que se indique lo contrario, el contenido de esta web está disponible bajo la licencia [CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/)."
-```
-
----
-
-## Metadata
-
-### Show author
-
-| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
-|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
-|  ✅  |   ✅    |      ✅       |         ✅        |         ❌          |
-
-To show the author(s) below the post title, set `show_author = true`.
-
-This will display the authors set on `authors = []` in the front matter of the post. If this is not available, it will fall back to `author = ""`in `config.toml`.
-
-### Reading Time
-
-| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
-|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
-|  ✅  |   ✅    |      ✅       |         ✅        |         ❌          |
-
-You can enable or hide the reading time of a post with `show_reading_time`. If you set it to `true`, it will be displayed in the post's metadata, like this:
-
-{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/see_changes_light.webp", dark_src="blog/mastering-tabi-settings/img/see_changes_dark.webp" alt="Post title and metadata, showing a 'See changes' link") }}
-
-Since it follows [the hierarchy](#settings-hierarchy), you can enable it or hide it for specific pages or sections. For example, this demo sets `show_reading_time = false` in the [projects](https://welpo.github.io/tabi/projects/) section's [`_index.md`](https://github.com/welpo/tabi/blob/main/content/projects/_index.md?plain=1), so their individual posts don't show the reading time.
-
-### Show Date
-
-| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
-|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
-|  ✅  |   ✅    |      ✅       |         ✅        |         ❌          |
-
-By default, the date is shown below the post title. You can hide it with `show_date = false`. This setting follows [the hierarchy](#settings-hierarchy).
-
-### Date Format
-
-| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
-|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
-|  ❌  |   ❌    |      ✅       |         ❌        |         ❌          |
-
-tabi has two date formats: `long_date_format` and `short_date_format`. The short format is used in a post's metadata, while the long format is used when listing posts (i.e. on the [blog section](@/blog/_index.md) or the [main page](@/_index.md)).
-
-The default is "6th July 2049" for both formats in English. For other languages, the defaut is `"%d %B %Y"` for the long format and `"%-d %b %Y"` for the short format.
-
-In Zola, time formatting syntax is inspired fom strftime. A full reference is available in the [chrono docs](https://docs.rs/chrono/0.4.31/chrono/format/strftime/index.html).
-
-### Custom Separator
-
-| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
-|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
-|  ❌  |   ❌    |      ✅       |         ❌        |         ❌          |
-
-The separator appears in various places: in the title tag, between the metadata of a post…
-
-The default separator is a bullet point (`•`), but you can change by setting something like `separator = "|"`.
-
-### Title Tag Order
-
-| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
-|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
-|  ❌  |   ❌    |      ✅       |         ❌        |         ❌          |
-
-The title tag is the text that appears in the browser tab. By default, it's the site title followed by the page title. For example, the title tag of the blog section is "~/tabi • Blog".
-
-By setting `invert_title_order = true`, you can invert the order of the site title and page title in the browser tab. For example, the title tag of the blog section would become "Blog • ~/tabi".
-
----
-
-## Security
-
-### Encoded Email
-
-| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
-|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
-|  ❌  |   ❌    |      ✅       |         ❌        |         ✅          |
-
-To protect your email address from spambots, you can encode it in the footer. You can do this by setting `email` to a base64 encoded version of your email address[^2]. For example, `email = "bWFpbEBleGFtcGxlLmNvbQ=="` is the base64 encoded version of "mail@example.com".
-
-If you don't want to encode your email yourself, tabi can encode it for you if you set `encode_plaintext_email = true`. This allows you to set a plaintext email on the config. Note that this only protects your email address on your site, not in public repositories.
-
-If the email is encoded (either by you or by tabi), users with JavaScript disabled will not see the email icon.
-
-### CSP (Content Security Policy)
-
-| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
-|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
-|  ❌  |   ❌    |      ✅       |         ❌        |         ❌          |
-
-Content Security Policy (CSP) is an added layer of security that helps to detect and mitigate certain types of attacks, including Cross Site Scripting (XSS) and data injection attacks. These attacks are used for everything from data theft to site defacement to distribution of malware.
-
-tabi has a default CSP that allows for remote images and videos, as well as YouTube and Vimeo embeds. You can customise it with `allowed_domains`, which takes a list of CSP directives. This is the default CSP:
-
-```toml
-allowed_domains = [
-    { directive = "font-src", domains = ["'self'", "data:"] },
-    { directive = "img-src", domains = ["'self'", "https://*", "data:"] },
-    { directive = "script-src", domains = ["'self'"] },
-    { directive = "style-src", domains = ["'self'"] },
-    { directive = "frame-src", domains = ["player.vimeo.com", "https://www.youtube-nocookie.com"] },
-]
-```
-
-This feature is enabled by default. To disable it (and allow all connections), set `enable_csp = false` on a page, section or globally. The `enable_csp` setting follows the [hierarchy](#settings-hierarchy).
-
-See the [CSP documentation page](@/blog/security/index.md) for more information.
-
-[^1]: If you're using a remote Git repository, you might want to automate the process of updating the `updated` field. Here's a guide for that: [Zola Git Pre-Commit Hook: Updating Post Dates](https://osc.garden/blog/zola-date-git-hook/).
-
-[^2]: To encode your email in base64 you can use [online tools](https://www.base64encode.org/) or, on your terminal, run: `printf 'mail@example.com' | base64`.