♻️ refactor: improve Zola v0.22.0 compatibility (#612)

config.toml

@@ -33,14 +33,16 @@ include_content = true
 index_format = "elasticlunr_json"
 
 [markdown]
-highlight_code = true
 bottom_footnotes = true
-# To use a Zola built-in theme, CSP needs to allow unsafe-inline for style-src.
-highlight_theme = "css"
 smart_punctuation = true
 # Set to 'external' to add an indicator next to external links.
 external_links_class = "external"
 
+[markdown.highlighting]
+theme = "catppuccin-frappe"
+style = "class"
+error_on_missing_language = true
+
 [link_checker]
 internal_level = "warn"
 skip_prefixes = [

content/blog/security/index.ca.md

@@ -1,7 +1,7 @@
 +++
 title = "Seguretat per defecte"
 date = 2023-02-22
-updated = 2025-02-21
+updated = 2026-01-14
 description = "tabi té una Política de Seguretat de Contingut (CSP) fàcilment personalitzable amb valors segurs per defecte. Obtingues tranquil·litat i un A+ en l'Observatori de Mozilla."
 
 [taxonomies]
@@ -35,7 +35,7 @@ Pots desactivar les capçaleres (permitint-ho tot) en una pàgina, secció, o gl
 **Notas**:
 
 - [Habilitar els comentaris](@/blog/comments/index.ca.md), [les analítiques](@/blog/mastering-tabi-settings/index.ca.md#analisi-web), o [els diagrames de mermaid](@/blog/shortcodes/index.ca.md#diagrames-de-mermaid) permet automàticament els scripts/frames/estils/conexions pertinents.
-- Per utilitzar un [tema de resaltat de sintaxis integrat a Zola](https://www.getzola.org/documentation/getting-started/configuration/#syntax-highlighting), has de permetre `unsafe-inline` a la directiva `style-src`:
+- Per utilitzar un [tema de resaltat de sintaxis integrat a Zola](https://www.getzola.org/documentation/content/syntax-highlighting/), has de permetre `unsafe-inline` a la directiva `style-src`:
 
     ```
     { directive = "style-src", domains = ["'self'", "'unsafe-inline'"] },

content/blog/security/index.es.md

@@ -1,7 +1,7 @@
 +++
 title = "Seguro por defecto"
 date = 2023-02-22
-updated = 2025-02-21
+updated = 2026-01-14
 description = "tabi tiene una Política de Seguridad de Contenido (CSP) fácilmente personalizable con configuraciones seguras. Obtén tranquilidad y una calificación de A+ en Mozilla Observatory."
 
 [taxonomies]
@@ -35,7 +35,7 @@ Puedes desactivar las cabeceras (permitiendo todo) en una página, sección, o g
 **Notas**:
 
 - [Habilitar los comentarios](@/blog/comments/index.es.md), [las analíticas](@/blog/mastering-tabi-settings/index.es.md#analisis-web), o [los diagramas mermaid](@/blog/shortcodes/index.es.md#diagramas-de-mermaid) permite automáticamente los scripts/frames/estilos/conexiones pertinentes.
-- Para usar un [tema de resaltado de sintaxis integrado en Zola](https://www.getzola.org/documentation/getting-started/configuration/#syntax-highlighting), has de permitir `unsafe-inline` en la directiva `style-src`:
+- Para usar un [tema de resaltado de sintaxis integrado en Zola](https://www.getzola.org/documentation/content/syntax-highlighting/), has de permitir `unsafe-inline` en la directiva `style-src`:
 
     ```
     { directive = "style-src", domains = ["'self'", "'unsafe-inline'"] },

content/blog/security/index.md

@@ -1,7 +1,7 @@
 +++
 title = "Secure by default"
 date = 2023-02-22
-updated = 2025-02-21
+updated = 2026-01-14
 description = "tabi has an easily customizable Content Security Policy (CSP) with safe defaults. Get peace of mind and an A+ on Mozilla Observatory."
 
 [taxonomies]
@@ -35,7 +35,7 @@ You can disable the CSP (allowing all connections) on a page, section, or global
 **Notes**:
 
 - [Enabling comments](@/blog/comments/index.md), [analytics](@/blog/mastering-tabi-settings/index.md#analytics), or [mermaid diagrams](@/blog/shortcodes/index.md#mermaid-diagrams) automatically allows scripts/frames/styles/connections as needed.
-- To use a [Zola built-in syntax highlighting theme](https://www.getzola.org/documentation/getting-started/configuration/#syntax-highlighting), you need to allow `unsafe-inline` in the `style-src` directive:
+- To use a [Zola built-in syntax highlighting theme](https://www.getzola.org/documentation/content/syntax-highlighting/), you need to allow `unsafe-inline` in the `style-src` directive:
 
     ```
     { directive = "style-src", domains = ["'self'", "'unsafe-inline'"] },

content/blog/shortcodes/index.ca.md

@@ -28,7 +28,7 @@ Per incloure un diagrama Mermaid a la teva publicació, cal fer dues coses:
 
 2. Utilitza el shortcode `mermaid()` per definir el teu diagrama. Per exemple:
 
-```txt
+```plain
 {%/* mermaid() */%}
 classDiagram
     class DistorsionsCognitives {
@@ -237,7 +237,7 @@ Si estableixes el `name` com una URL (és a dir, comença amb `http` o `https`),
 
 {{ admonition(type="warning", title="JavaScript necessari", text="La funció d'URLs clicables requereix JavaScript. Per habilitar-la, configura `code_block_name_links = true` a la secció `[extra]` de la teva pàgina, secció, o `config.toml`.") }}
 
-```.gitignore,name=https://github.com/welpo/doteki/blob/main/.gitignore
+```plain,name=https://github.com/welpo/doteki/blob/main/.gitignore
 __pycache__/
 *coverage*
 .vscode/
@@ -260,7 +260,7 @@ El shortcode `add_src_to_code_block` segueix funcionant per retrocompatibilitat
 
 ````
 {{/* add_src_to_code_block(src="https://github.com/welpo/doteki/blob/main/.gitignore") */}}
-```.gitignore
+```plain
 **pycache**/
 *coverage*
 .vscode/

content/blog/shortcodes/index.es.md

@@ -236,7 +236,7 @@ Si estableces el `name` como una URL (es decir, comienza con `http` o `https`),
 
 {{ admonition(type="warning", title="JavaScript requerido", text="La función de URLs clickables requiere JavaScript. Para habilitarla, configura `code_block_name_links = true` en la sección `[extra]` de tu página, sección, o `config.toml`.") }}
 
-```.gitignore,name=https://github.com/welpo/doteki/blob/main/.gitignore
+```plain,name=https://github.com/welpo/doteki/blob/main/.gitignore
 __pycache__/
 *coverage*
 .vscode/

content/blog/shortcodes/index.md

@@ -238,7 +238,7 @@ If you set the `name` to a URL (i.e. it starts with `http` or `https`), you can
 
 {{ admonition(type="warning", title="JavaScript required", text="The clickable URL feature requires JavaScript. To enable it, set `code_block_name_links = true` on the `[extra]` section of your page, section, or `config.toml`.") }}
 
-```.gitignore,name=https://github.com/welpo/doteki/blob/main/.gitignore
+```plain,name=https://github.com/welpo/doteki/blob/main/.gitignore
 __pycache__/
 *coverage*
 .vscode/

sass/parts/_code.scss

@@ -14,6 +14,7 @@ code {
         color: inherit;
     }
 
+    /* Legacy table support for Zola versions older than 0.22.0 */
     table {
         margin: 0rem;
         border-collapse: collapse;
@@ -21,18 +22,15 @@ code {
         width: 100%;
         text-align: start;
 
-        td,
+        td, th, tr {
-        th,
-        tr {
             border: none;
             padding: 0rem;
         }
 
-        // Line number col.
         tbody td:first-child {
             opacity: 50%;
             padding-inline-end: 0.8rem;
-            width: 1px;  // Without this, iOS Safari centres short lines.
+            width: 1px;
             user-select: none;
             text-align: end;
         }
@@ -41,6 +39,24 @@ code {
             background-color: inherit;
         }
     }
+
+    /* Span-based layout (Giallo; Zola v0.22.0 and above) */
+    .giallo-l {
+        float: left;
+        clear: left;
+        width: 100%;
+        line-height: 1.2;
+    }
+
+    .giallo-ln {
+        display: inline-block;
+        opacity: 0.5;
+        padding-inline-end: 0.8rem;
+        min-width: 3ch;
+        color: inherit;
+        user-select: none;
+        text-align: end;
+    }
 }
 
 a:hover code {
@@ -66,8 +82,8 @@ pre {
 
     // Supports both native Zola way of adding src, and old shortcode-based logic.
     // See: https://github.com/welpo/tabi/pull/489
-    &::after,
+    code .source-path,
-    code .source-path {
+    code[data-name]::after {
         display: block;
         position: absolute;
         top: 0;
@@ -77,7 +93,6 @@ pre {
         max-width: calc(100% - 14em);
         height: 0.9rem;
         overflow: hidden;
-        content: attr(data-name);
         color: var(--hover-color);
         font-size: 0.65rem;
         text-align: end;
@@ -85,6 +100,10 @@ pre {
         white-space: nowrap;
     }
 
+    code[data-name]::after {
+        content: attr(data-name);
+    }
+
     code {
         display: block;
         border: 0rem;
@@ -124,6 +143,10 @@ html[data-code-direction="inherit"] {
     code, pre {
         direction: inherit;
     }
+    .giallo-l {
+        float: right;
+        clear: right;
+    }
 }
 
 .copy-code {