✨ feat: support Zola's native code block names

Add support for Zola's native code block name syntax (```lang,name=file.rs```). URLs in names become clickable links. Deprecate custom shortcode in favor of native syntax. - Rename `add_src_to_code_block` setting to clickable_code_names (old name supported for compatibility) - Consolidate CSS - Update documentation - Rename JS
welpo · Feb 15, 2025 · a65b496 · a65b496
1 parent 6837f6f
commit a65b496
Show file tree

Hide file tree

Showing 23 changed files with 221 additions and 188 deletions.
diff --git a/config.toml b/config.toml
@@ -132,9 +132,9 @@ show_remote_source = true  # Defaults to true.
 # Can be set at page or section levels, following the hierarchy: page > section > config. See: https://welpo.github.io/tabi/blog/mastering-tabi-settings/#settings-hierarchy
 copy_button = true
 
-# Loads the necessary JavaScript (~400 bytes) to use the "Show source or path" shortcode: https://welpo.github.io/tabi/blog/shortcodes/#show-source-or-path
+# Make code block names clickable if they are URLs (loads ~400 bytes of JavaScript).
 # Can be set at page or section levels, following the hierarchy: page > section > config. See: https://welpo.github.io/tabi/blog/mastering-tabi-settings/#settings-hierarchy
-add_src_to_code_block = false
+clickable_code_names = false
 
 # Force left-to-right (LTR) direction for code blocks.
 # Set to false to allow code to follow the document's natural direction.

diff --git a/content/blog/javascript/index.ca.md b/content/blog/javascript/index.ca.md
@@ -1,7 +1,7 @@
 +++
 title = "Sense JavaScript obligatori"
 date = 2023-01-06
-updated = 2024-12-15
+updated = 2025-02-15
 description = "JavaScript només s'utilitza quan HTML i CSS no són suficients."
 
 [taxonomies]
@@ -28,7 +28,7 @@ Les següents opcions es poden especificar per a publicacions, seccions i global
 - [**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)
+- [**Noms de blocs de codi clicables**](@/blog/shortcodes/index.ca.md#mostrar-ruta-o-url). S'activa configurant `clickable_code_names = 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:

diff --git a/content/blog/javascript/index.es.md b/content/blog/javascript/index.es.md
@@ -1,7 +1,7 @@
 +++
 title = "Sin JavaScript obligatorio"
 date = 2023-01-06
-updated = 2024-12-15
+updated = 2025-02-15
 description = "JavaScript solo se utiliza cuando HTML y CSS no son suficientes."
 
 [taxonomies]
@@ -28,7 +28,7 @@ Las siguientes opciones pueden especificarse para publicaciones, secciones y a n
 - [**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)
+- [**Nombres de bloques de código clicables**](@/blog/shortcodes/index.es.md#mostrar-ruta-o-url). Se activa configurando `clickable_code_names = 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:

diff --git a/content/blog/javascript/index.md b/content/blog/javascript/index.md
@@ -1,7 +1,7 @@
 +++
 title = "No mandatory JavaScript"
 date = 2023-01-06
-updated = 2024-12-15
+updated = 2025-02-15
 description = "JavaScript is only used when HTML and CSS aren't enough."
 
 [taxonomies]
@@ -28,7 +28,7 @@ The following settings can be specified for posts, sections and globally, follow
 - [**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)
+- [**Clickable code block names**](@/blog/shortcodes/index.md#show-source-or-path). Enabled by setting `clickable_code_names = 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:

diff --git a/content/blog/mastering-tabi-settings/index.ca.md b/content/blog/mastering-tabi-settings/index.ca.md
@@ -697,13 +697,13 @@ Establir `copy_button = true` afegirà un petit botó de copiar a la part superi
 
 {{ 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
+### Nom del bloc de codi clicable
 
 | 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).
+En establir `clickable_code_names = true` s'habiliten els enllaços clicables als noms dels blocs de codi. Consulta la [documentació](@/blog/shortcodes/index.ca.md#mostrar-ruta-o-url) per veure exemples i ús.
 
 ### Forçar blocs de codi d'esquerra a dreta
 

diff --git a/content/blog/mastering-tabi-settings/index.es.md b/content/blog/mastering-tabi-settings/index.es.md
@@ -698,13 +698,13 @@ Establecer `copy_button = true` añadirá un pequeño botón de copiar en la par
 
 {{ 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
+### Nombres de bloques de código clicables
 
 | 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).
+Establece `clickable_code_names = true` para habilitan los enlaces clickables en los nombres de bloques de código. Consulta la [documentación](@/blog/shortcodes/index.es.md#mostrar-ruta-o-url) para ver ejemplos y uso.
 
 ### Forzar bloques de código de izquierda a derecha
 

diff --git a/content/blog/mastering-tabi-settings/index.md b/content/blog/mastering-tabi-settings/index.md
@@ -708,13 +708,13 @@ Setting `copy_button = true` will add a small copy button to the top right of co
 
 {{ 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
+### Clickable Code Block Names
 
 | 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).
+Setting `clickable_code_names = true` enables URLs in code block names to become clickable links. Check out the [documentation](@/blog/shortcodes/index.md#show-source-or-path) for examples and usage.
 
 ### Force Code Blocks LTR
 

diff --git a/content/blog/series/index.ca.md b/content/blog/series/index.ca.md
@@ -1,6 +1,7 @@
 +++
 title = "Guia completa sobre sèries"
 date = 2024-11-08
+updated = 2025-02-15
 description = "Aprèn a organitzar les teves publicacions en sèries seqüencials, perfectes per a tutorials, cursos i històries de diverses parts."
 
 [taxonomies]
@@ -48,9 +49,7 @@ flowchart
 2. Crea `_index.md` al directori de la sèrie
 3. Configura el front matter de `_index.md`:
 
-    {{ add_src_to_code_block(src="series/_index.md") }}
-
-    ```toml
+    ```toml,name=series/_index.md
     title = "Aprenent Rust"
     template = "series.html"
     sort_by = "slug"
@@ -154,9 +153,7 @@ Aquesta configuració segueix [la jerarquia](@/blog/mastering-tabi-settings/inde
 
 Els articles d'una sèrie poden tenir seccions automàtiques d'introducció i conclusió. Aquestes es configuren al `_index.md` de la teva sèrie. Un exemple bàsic:
 
-{{ add_src_to_code_block(src="series/_index.md") }}
-
-```toml
+```toml,name=series/_index.md
 [extra.series_intro_templates]
 default = "Aquest article és part de la sèrie $SERIES_HTML_LINK."
 
@@ -177,9 +174,7 @@ El sistema de sèries utilitza diferents plantilles segons la posició de l'arti
 
 El sistema determina automàticament quina plantilla utilitzar segons la posició de l'article. Les plantilles es defineixen a la configuració de la sèrie (`_index.md`), com `extra.series_intro_templates` i `extra.series_outro_templates`:
 
-{{ add_src_to_code_block(src="series/_index.md") }}
-
-```toml
+```toml,name=series/_index.md
 [extra.series_intro_templates]
 next_only = "Benvingut a la part 1! Següent: $NEXT_HTML_LINK"
 middle = "Anterior: $PREV_HTML_LINK | Següent: $NEXT_HTML_LINK"
@@ -285,9 +280,7 @@ Hi ha tres tipus de variables:
 
 {{ admonition(type="tip", title="Variables HTML vs text", text="Utilitza variables HTML (que acaben en `_HTML_LINK`) quan vulguis enllaços preparats per usar. Utilitza variables de text (que acaben en `_TITLE` o `_PERMALINK`) quan vulguis més control sobre el format.") }}
 
-{{ add_src_to_code_block(src="series/_index.md") }}
-
-```toml
+```toml,name=series/_index.md
 # Introducció
 [extra.series_intro_templates]
 next_only = """
@@ -351,19 +344,15 @@ Les plantilles de sèries admeten variables personalitzades per incloure informa
 
 1. Primer, defineix els teus **marcadors** a la configuració de la teva sèrie (`_index.md`):
 
-{{ add_src_to_code_block(src="series/_index.md") }}
-
-```toml
+```toml,name=series/_index.md
 [extra]
 series = true
 series_template_placeholders = ["$POSITION", "$TOPIC", "$DIFFICULTY"]
 ```
 
 2. Després, a cada article de la sèrie, proporciona els valors per a aquests marcadors a `series_template_variables`:
 
-{{ add_src_to_code_block(src="series/article.md") }}
-
-```toml
+```toml,name=series/article.md
 [extra.series_template_variables]
 position = "primer"
 topic = "Variables i tipus"
@@ -374,9 +363,7 @@ difficulty = "Principiant"
 
 Pots usar les teves variables personalitzades a qualsevol plantilla, juntament amb les variables integrades:
 
-{{ add_src_to_code_block(src="series/_index.md") }}
-
-```toml
+```toml,name=series/_index.md
 [extra.series_intro_templates]
 default = """
 Aquest és l'article $POSITION a $SERIES_HTML_LINK.
@@ -389,9 +376,7 @@ Nivell de dificultat: $DIFFICULTY
 
 ### Exemple amb variables personalitzades
 
-{{ add_src_to_code_block(src="series/_index.md") }}
-
-```toml
+```toml,name=series/_index.md
 # A la configuració de la sèrie.
 [extra]
 series = true
@@ -404,9 +389,7 @@ series_intro_templates.default = """
 """
 ```
 
-{{ add_src_to_code_block(src="series/02-learning-rust/index.md") }}
-
-```toml
+```toml,name=series/02-learning-rust/index.md
 # En un article de la sèrie.
 [extra.series_template_variables]
 learning_time = "30 minuts"

diff --git a/content/blog/series/index.es.md b/content/blog/series/index.es.md
@@ -1,6 +1,7 @@
 +++
 title = "Guía completa sobre series"
 date = 2024-11-08
+updated = 2025-02-15
 description = "Aprende a organizar tus publicaciones en series secuenciales, perfectas para tutoriales, cursos e historias de varias partes."
 
 [taxonomies]
@@ -48,9 +49,7 @@ flowchart
 2. Crea `_index.md` en el directorio de la serie
 3. Configura el front matter de `_index.md`:
 
-    {{ add_src_to_code_block(src="series/_index.md") }}
-
-    ```toml
+    ```toml,name=series/_index.md
     title = "Aprendiendo Rust"
     template = "series.html"
     sort_by = "slug"
@@ -154,9 +153,7 @@ Esta configuración sigue [la jerarquía](@/blog/mastering-tabi-settings/index.e
 
 Los artículos de una serie pueden tener secciones automáticas de introducción y conclusión. Estas se configuran en el `_index.md` de tu serie. Un ejemplo básico:
 
-{{ add_src_to_code_block(src="series/_index.md") }}
-
-```toml
+```toml,name=series/_index.md
 [extra.series_intro_templates]
 default = "Este artículo es parte de la serie $SERIES_HTML_LINK."
 
@@ -177,9 +174,7 @@ El sistema de series usa diferentes plantillas según la posición del artículo
 
 El sistema determina automáticamente qué plantilla usar según la posición del artículo. Las plantillas se definen en la configuración de la serie (`_index.md`), como `extra.series_intro_templates` y `extra.series_outro_templates`:
 
-{{ add_src_to_code_block(src="series/_index.md") }}
-
-```toml
+```toml,name=series/_index.md
 [extra.series_intro_templates]
 next_only = "¡Bienvenido a la parte 1! Siguiente: $NEXT_HTML_LINK"
 middle = "Anterior: $PREV_HTML_LINK | Siguiente: $NEXT_HTML_LINK"
@@ -285,9 +280,7 @@ Hay tres tipos de variables:
 
 {{ admonition(type="tip", title="Variables HTML vs texto", text="Usa variables HTML (que terminan en `_HTML_LINK`) cuando quieras enlaces listos para usar. Usa variables de texto (que terminan en `_TITLE` o `_PERMALINK`) cuando quieras más control sobre el formato.") }}
 
-{{ add_src_to_code_block(src="series/_index.md") }}
-
-```toml
+```toml,name=series/_index.md
 # Introducción.
 [extra.series_intro_templates]
 next_only = """
@@ -351,19 +344,15 @@ Las plantillas de series admiten variables personalizadas para incluir informaci
 
 1. Primero, define tus **marcadores** en la configuración de tu serie (`_index.md`):
 
-{{ add_src_to_code_block(src="series/_index.md") }}
-
-```toml
+```toml,name=series/_index.md
 [extra]
 series = true
 series_template_placeholders = ["$POSITION", "$TOPIC", "$DIFFICULTY"]
 ```
 
 2. Luego, en cada artículo de la serie, proporciona los valores para estos marcadores en `series_template_variables`:
 
-{{ add_src_to_code_block(src="series/article.md") }}
-
-```toml
+```toml,name=series/article.md
 [extra.series_template_variables]
 position = "primero"
 topic = "Variables y tipos"
@@ -374,9 +363,7 @@ difficulty = "Principiante"
 
 Puedes usar tus variables personalizadas en cualquier plantilla, junto con las variables integradas:
 
-{{ add_src_to_code_block(src="series/_index.md") }}
-
-```toml
+```toml,name=series/_index.md
 [extra.series_intro_templates]
 default = """
 Este es el artículo $POSITION en $SERIES_HTML_LINK.
@@ -389,9 +376,7 @@ Nivel de dificultad: $DIFFICULTY
 
 ### Ejemplo con variables personalizadas
 
-{{ add_src_to_code_block(src="series/_index.md") }}
-
-```toml
+```toml,name=series/_index.md
 # En la configuración de la serie.
 [extra]
 series = true
@@ -404,9 +389,7 @@ series_intro_templates.default = """
 """
 ```
 
-{{ add_src_to_code_block(src="series/02-learning-rust/index.md") }}
-
-```toml
+```toml,name=series/02-learning-rust/index.md
 # En un artículo de la serie.
 [extra.series_template_variables]
 learning_time = "30 minutos"