diff --git a/config.toml b/config.toml
index 2482d03..1f5d982 100644
--- 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
index fc446f1..789601c 100644
--- 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
index 7a935fc..b2514ab 100644
--- 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
index a6b60ef..5da65a9 100644
--- 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
index 8b182f3..82ce431 100644
--- 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
index 00ed87f..0e3398d 100644
--- 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
index 2d2745d..b48b856 100644
--- 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
index e56375f..0d94ce8 100644
--- 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,9 +344,7 @@ 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"]
@@ -361,9 +352,7 @@ 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
index 47664f0..475396c 100644
--- 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,9 +344,7 @@ 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"]
@@ -361,9 +352,7 @@ 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"
diff --git a/content/blog/series/index.md b/content/blog/series/index.md
index bbb4648..ea73e65 100644
--- a/content/blog/series/index.md
+++ b/content/blog/series/index.md
@@ -1,6 +1,7 @@
+++
title = "A Complete Guide to Series"
date = 2024-11-08
+updated = 2025-02-15
description = "Learn how to organize your posts into sequential series, perfect for tutorials, courses, and multi-part stories."
[taxonomies]
@@ -48,9 +49,7 @@ flowchart
2. Create `_index.md` in the series directory.
3. Set up the `_index.md` front matter:
- {{ add_src_to_code_block(src="series/_index.md") }}
-
- ```toml
+ ```toml,name=series/_index.md
title = "Learning Rust"
template = "series.html"
sort_by = "slug"
@@ -154,9 +153,7 @@ This setting follows [the hierarchy](@/blog/mastering-tabi-settings/index.md#set
Series articles can have automatic introduction and conclusion sections. These are configured in your series' `_index.md`. A basic example:
-{{ add_src_to_code_block(src="series/_index.md") }}
-
-```toml
+```toml,name=series/_index.md
[extra.series_intro_templates]
default = "This article is part of the $SERIES_HTML_LINK series."
@@ -177,9 +174,7 @@ The series system uses different templates based on an article's position in the
The system automatically determines which template to use based on the article's position. The templates are defined in the series configuration (`_index.md`), as `extra.series_intro_templates` and `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 = "Welcome to part 1! Next up: $NEXT_HTML_LINK"
middle = "Previous: $PREV_HTML_LINK | Next: $NEXT_HTML_LINK"
@@ -285,9 +280,7 @@ There are three types of variables:
{{ admonition(type="tip", title="HTML vs text variables", text="Use HTML variables (ending in `_HTML_LINK`) when you want ready-made links. Use text variables (ending in `_TITLE` or `_PERMALINK`) when you want more control over the formatting.") }}
-{{ add_src_to_code_block(src="series/_index.md") }}
-
-```toml
+```toml,name=series/_index.md
# Introduction.
[extra.series_intro_templates]
next_only = """
@@ -351,9 +344,7 @@ Series templates support custom variables for additional information you want to
1. First, define your **placeholders** in your series configuration (`_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"]
@@ -361,9 +352,7 @@ series_template_placeholders = ["$POSITION", "$TOPIC", "$DIFFICULTY"]
2. Then, in each series article, provide the values for these placeholders in `series_template_variables`:
-{{ add_src_to_code_block(src="series/article.md") }}
-
-```toml
+```toml,name=series/article.md
[extra.series_template_variables]
position = "first"
topic = "Variables and Types"
@@ -374,9 +363,7 @@ difficulty = "Beginner"
You can use your custom variables in any template, alongside the built-in variables:
-{{ add_src_to_code_block(src="series/_index.md") }}
-
-```toml
+```toml,name=series/_index.md
[extra.series_intro_templates]
default = """
This is the $POSITION article in $SERIES_HTML_LINK.
@@ -389,9 +376,7 @@ Difficulty level: $DIFFICULTY
### Example with Custom Variables
-{{ add_src_to_code_block(src="series/_index.md") }}
-
-```toml
+```toml,name=series/_index.md
# In the series configuration.
[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
# In an article of the series.
[extra.series_template_variables]
learning_time = "30 minutes"
diff --git a/content/blog/shortcodes/index.ca.md b/content/blog/shortcodes/index.ca.md
index cf67637..b086215 100644
--- a/content/blog/shortcodes/index.ca.md
+++ b/content/blog/shortcodes/index.ca.md
@@ -1,7 +1,7 @@
+++
title = "Shortcodes personalitzats"
date = 2023-02-19
-updated = 2024-12-28
+updated = 2025-02-15
description = "Aquest tema inclou alguns shortcodes personalitzats útils que pots utilitzar per millorar les teves publicacions. Ja sigui per mostrar imatges que s'adapten als temes clar i fosc, o per donar format a una secció de referències amb un aspecte professional, aquests shortcodes personalitzats t'ajudaran."
[taxonomies]
@@ -11,7 +11,7 @@ tags = ["funcionalitat", "shortcodes"]
toc = true
toc_levels = 2
quick_navigation_buttons = true
-add_src_to_code_block = true
+clickable_code_names = true
mermaid = true
social_media_card = "social_cards/ca_blog_shortcodes.jpg"
+++
@@ -191,23 +191,55 @@ Tots els altres shortcodes d'imatges poden utilizar l'amplada completa assignant
### Mostrar ruta o URL
-Mostra una ruta o URL al següent bloc de codi trobat. Si comença amb "http", es convertirà en un enllaç. Particularment útil quan s'utilitza en conjunció amb el [shortcode de text remot](#text-remot).
+Pots mostrar una ruta o URL per a un bloc de codi utilitzant la sintaxi nativa de Zola:
-{{ admonition(type="warning", title="IMPORTANT", text="Aquesta funcionalitat requereix JavaScript. Per activar-la, configura `add_src_to_code_block = true` a la secció `[extra]` de la teva pàgina, secció, o `config.toml`.") }}
+{{ aside(text="Requereix Zola 0.20.0 o superior.") }}
-{{ add_src_to_code_block(src="https://github.com/welpo/doteki/blob/main/.gitignore") }}
+````
+```rust,name=src/main.rs
+fn main() {
+ println!("Hola, món!");
+}
+```
+````
-```.gitignore
-{{ remote_text(src="https://raw.githubusercontent.com/welpo/doteki/main/.gitignore") }}
+Això renderitza:
+
+```rust,name=src/main.rs
+fn main() {
+ println!("Hola, món!");
+}
+```
+
+Si estableixes el `name` com una URL (és a dir, comença amb `http` o `https`), pots convertir-lo en un enllaç clicable. Això és particularment útil quan s'utilitza juntament amb el [shortcode de text remot](#text-remot).
+
+{{ admonition(type="warning", title="JavaScript necessari", text="La funció d'URLs clicables requereix JavaScript. Per habilitar-la, configura `clickable_code_names = true` a la secció `[extra]` de la teva pàgina, secció, o `config.toml`.") }}
+
+```.gitignore,name=https://github.com/welpo/doteki/blob/main/.gitignore
+__pycache__/
+*coverage*
+.vscode/
+dist/
+```
+
+### Suport de shortcode heretat
+
+El shortcode `add_src_to_code_block` segueix funcionant per retrocompatibilitat però serà descontinuat en una versió futura. Si us plau, utilitza la sintaxi nativa de Zola:
+
+```
+# Forma antiga (descontinuada):
+{{/* add_src_to_code_block(src="ruta/al/fitxer.rs") */}}
+
+# Forma nova (recomanada):
+```rust,name=ruta/al/fitxer.rs
```
#### Ús
````
{{/* add_src_to_code_block(src="https://github.com/welpo/doteki/blob/main/.gitignore") */}}
-
```.gitignore
-__pycache__/
+**pycache**/
*coverage*
.vscode/
dist/
diff --git a/content/blog/shortcodes/index.es.md b/content/blog/shortcodes/index.es.md
index 6281335..df6419b 100644
--- a/content/blog/shortcodes/index.es.md
+++ b/content/blog/shortcodes/index.es.md
@@ -1,7 +1,7 @@
+++
title = "Shortcodes personalizados"
date = 2023-02-19
-updated = 2024-12-28
+updated = 2025-02-15
description = "Este tema incluye algunos shortcodes personalizados útiles que puedes utilizar para mejorar tus publicaciones. Puedes mostrar imágenes que se adapten a los temas claro y oscuro, dar formato a una sección de referencias con un aspecto profesional, y más."
[taxonomies]
@@ -11,7 +11,7 @@ tags = ["funcionalidad", "shortcodes"]
toc = true
toc_levels = 2
quick_navigation_buttons = true
-add_src_to_code_block = true
+clickable_code_names = true
mermaid = true
social_media_card = "social_cards/es_blog_shortcodes.jpg"
+++
@@ -190,28 +190,48 @@ Todos los otros shortcodes de imágenes pueden usar el ancho completo asignando
### Mostrar ruta o URL
-Muestra una ruta o URL en el siguiente bloque de código encontrado. Si comienza con "http", se convertirá en un enlace. Particularmente útil cuando se usa junto con el [shortcode de texto remot](#texto-remoto).
+Puedes mostrar una ruta o URL para un bloque de código usando la sintaxis nativa de Zola:
-{{ add_src_to_code_block(src="https://github.com/welpo/doteki/blob/main/.gitignore") }}
-
-```.gitignore
-{{ remote_text(src="https://raw.githubusercontent.com/welpo/doteki/main/.gitignore") }}
-```
-
-{{ admonition(type="warning", title="IMPORTANT", text="Esta característica requiere JavaScript. Para habilitarla, configura `add_src_to_code_block = true` en la sección `[extra]` de tu página, sección, o `config.toml`.") }}
-
-#### Uso
+{{ aside(text="Requiere Zola 0.20.0 o superior.") }}
````
-{{/* add_src_to_code_block(src="https://github.com/welpo/doteki/blob/main/.gitignore") */}}
+```rust,name=src/main.rs
+fn main() {
+ println!("¡Hola, mundo!");
+}
+```
+````
-```.gitignore
+Esto renderiza:
+
+```rust,name=src/main.rs
+fn main() {
+ println!("¡Hola, mundo!");
+}
+```
+
+Si estableces el `name` como una URL (es decir, comienza con `http` o `https`), puedes convertirlo en un enlace clickable. Esto es particularmente útil cuando se usa junto con el [shortcode de texto remoto](#texto-remoto).
+
+{{ admonition(type="warning", title="JavaScript requerido", text="La función de URLs clickables requiere JavaScript. Para habilitarla, configura `clickable_code_names = 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
__pycache__/
*coverage*
.vscode/
dist/
```
-````
+
+### Soporte de shortcode heredado
+
+El shortcode `add_src_to_code_block` sigue funcionando por retrocompatibilidad, pero será descontinuado en una versión futura. Por favor, usa la sintaxis nativa de Zola:
+
+```
+# Forma antigua (descontinuada):
+{{/* add_src_to_code_block(src="ruta/al/archivo.rs") */}}
+
+# Forma nueva (recomendada):
+```rust,name=ruta/al/archivo.rs
+```
## Shortcodes de texto
diff --git a/content/blog/shortcodes/index.md b/content/blog/shortcodes/index.md
index 34ef9f8..c3d0b40 100644
--- a/content/blog/shortcodes/index.md
+++ b/content/blog/shortcodes/index.md
@@ -1,7 +1,7 @@
+++
title = "Custom shortcodes"
date = 2023-02-19
-updated = 2024-12-28
+updated = 2025-02-15
description = "This theme includes some useful custom shortcodes that you can use to enhance your posts. Whether you want to display images that adapt to light and dark themes, or format a professional-looking reference section, these custom shortcodes have got you covered."
[taxonomies]
@@ -11,7 +11,7 @@ tags = ["showcase", "shortcodes"]
toc = true
toc_levels = 2
quick_navigation_buttons = true
-add_src_to_code_block = true
+clickable_code_names = true
mermaid = true
social_media_card = "social_cards/blog_shortcodes.jpg"
+++
@@ -191,28 +191,48 @@ All other image shortcodes can be made into full-width by setting the optional p
### Show source or path
-Display a path or URL on the next code block found. If it starts with "http", it will become a link. Particularly useful when used in conjunction with the [remote text shortcode](#remote-text).
+You can display a path or URL for a code block using Zola's native syntax:
-{{ add_src_to_code_block(src="https://github.com/welpo/doteki/blob/main/.gitignore") }}
-
-```.gitignore
-{{ remote_text(src="https://raw.githubusercontent.com/welpo/doteki/main/.gitignore") }}
-```
-
-{{ admonition(type="warning", title="IMPORTANT", text="This feature requires JavaScript. To enable it, set `add_src_to_code_block = true` on the `[extra]` section of your page, section, or `config.toml`.") }}
-
-#### Usage
+{{ aside(text="Requires Zola 0.20.0 or later.") }}
````
-{{/* add_src_to_code_block(src="https://github.com/welpo/doteki/blob/main/.gitignore") */}}
+```rust,name=src/main.rs
+fn main() {
+ println!("Hello, world!");
+}
+```
+````
-```.gitignore
+This renders:
+
+```rust,name=src/main.rs
+fn main() {
+ println!("Hello, world!");
+}
+```
+
+If you set the `name` to a URL (i.e. it starts with `http` or `https`), you can turn it into a clickable link. This is particularly useful when used in conjunction with the [remote text shortcode](#remote-text).
+
+{{ admonition(type="warning", title="JavaScript required", text="The clickable URL feature requires JavaScript. To enable it, set `clickable_code_names = true` on the `[extra]` section of your page, section, or `config.toml`.") }}
+
+```.gitignore,name=https://github.com/welpo/doteki/blob/main/.gitignore
__pycache__/
*coverage*
.vscode/
dist/
```
-````
+
+### Legacy shortcode support
+
+The `add_src_to_code_block` shortcode is still supported for backward compatibility but will be deprecated in a future release. Please use Zola's native syntax shown above instead:
+
+```
+# Old way (deprecated):
+{{/* add_src_to_code_block(src="path/to/file.rs") */}}
+
+# New way (preferred):
+```rust,name=path/to/file.rs
+```
## Text shortcodes
diff --git a/content/projects/doteki/index.ca.md b/content/projects/doteki/index.ca.md
index f4fa83c..6a318cb 100644
--- a/content/projects/doteki/index.ca.md
+++ b/content/projects/doteki/index.ca.md
@@ -10,7 +10,6 @@ tags = ["GitHub Actions", "automatització", "Python"]
local_image = "projects/doteki/doteki_logo.webp"
social_media_card = "social_cards/projects_doteki.jpg"
canonical_url = "https://osc.garden/ca/projects/doteki/"
-add_src_to_code_block = true
+++
**dōteki** actualitza el teu perfil de GitHub automàticament. Afegeix les teves últimes publicacions del blog, la música que escoltes o qualsevol altre contingut dinàmic mitjançant plugins.
@@ -23,16 +22,14 @@ add_src_to_code_block = true
1. Afegeix marcadors al teu README:
-{{ add_src_to_code_block(src="README.md") }}
-```md
+```md,name=README.md
```
2. Configura què hi va:
-{{ add_src_to_code_block(src="doteki.toml") }}
-```toml
+```toml,name=doteki.toml
[sections.blog]
plugin = "feed"
url = "https://osc.garden/atom.xml" # Substitueix amb el teu feed.
diff --git a/content/projects/doteki/index.es.md b/content/projects/doteki/index.es.md
index f3bb455..93e5159 100644
--- a/content/projects/doteki/index.es.md
+++ b/content/projects/doteki/index.es.md
@@ -10,7 +10,6 @@ tags = ["GitHub Actions", "automatización", "Python"]
local_image = "projects/doteki/doteki_logo.webp"
social_media_card = "social_cards/projects_doteki.jpg"
canonical_url = "https://osc.garden/es/projects/doteki/"
-add_src_to_code_block = true
+++
**dōteki** actualiza tu perfil de GitHub automáticamente. Añade tus últimas publicaciones del blog, la música que escuchas o cualquier otro contenido dinámico mediante plugins.
@@ -23,16 +22,14 @@ add_src_to_code_block = true
1. Añade marcadores a tu README:
-{{ add_src_to_code_block(src="README.md") }}
-```md
+```md,name=README.md
```
2. Configura qué va ahí:
-{{ add_src_to_code_block(src="doteki.toml") }}
-```toml
+```toml,name=doteki.toml
[sections.blog]
plugin = "feed"
url = "https://osc.garden/atom.xml" # Reemplaza con tu feed.
diff --git a/content/projects/doteki/index.md b/content/projects/doteki/index.md
index 02debb0..067bf76 100644
--- a/content/projects/doteki/index.md
+++ b/content/projects/doteki/index.md
@@ -10,7 +10,6 @@ tags = ["GitHub Actions", "automation", "Python"]
local_image = "projects/doteki/doteki_logo.webp"
social_media_card = "social_cards/projects_doteki.jpg"
canonical_url = "https://osc.garden/projects/doteki/"
-add_src_to_code_block = true
+++
**dōteki** updates your GitHub profile README automatically. Add your latest blog posts, music you're listening to, or any other dynamic content using plugins.
@@ -23,18 +22,14 @@ add_src_to_code_block = true
1. Add markers to your README:
-{{ add_src_to_code_block(src="README.md") }}
-
-```md
+```md,name=README.md
```
2. Configure what goes there:
-{{ add_src_to_code_block(src="doteki.toml") }}
-
-```toml
+```toml,name=doteki.toml
[sections.blog]
plugin = "feed"
url = "https://osc.garden/atom.xml" # Replace with your feed.
diff --git a/sass/parts/_code.scss b/sass/parts/_code.scss
index 748adc9..ac4f837 100644
--- a/sass/parts/_code.scss
+++ b/sass/parts/_code.scss
@@ -63,6 +63,27 @@ pre {
font-size: 0.8rem; // Fits ~77 characters.
}
+ // 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 {
+ display: block;
+ position: absolute;
+ top: 0;
+ inset-inline-end: 1.3rem;
+ padding-top: 0.3rem;
+ padding-inline-end: 1.3rem;
+ 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;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+
code {
display: block;
border: 0rem;
@@ -89,23 +110,6 @@ pre {
text-align: start;
text-transform: uppercase;
}
-
- .source-path {
- display: block;
- position: absolute;
- top: 0;
- inset-inline-end: 1.3rem;
- padding-top: 0.3rem;
- padding-inline-end: 1.3rem;
- max-width: calc(100% - 14em);
- height: 0.9rem;
- overflow: hidden;
- color: var(--hover-color);
- font-size: 0.65rem;
- text-align: end;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
}
}
diff --git a/static/js/addSrcToCodeBlock.js b/static/js/addSrcToCodeBlock.js
deleted file mode 100644
index 9b4cb9e..0000000
--- a/static/js/addSrcToCodeBlock.js
+++ /dev/null
@@ -1,20 +0,0 @@
-document.addEventListener("DOMContentLoaded", function() {
- document.querySelectorAll('.code-source').forEach(function(marker) {
- let sourceUrl = marker.getAttribute('data-source');
- let nextPre = marker.nextElementSibling;
-
- if (nextPre && nextPre.tagName === 'PRE') {
- let codeElement = nextPre.querySelector('code');
- if (codeElement) {
- // Use a span element for the source path if it's not a link.
- let sourceElement = document.createElement(sourceUrl.startsWith('http') ? 'a' : 'span');
- sourceElement.textContent = sourceUrl;
- sourceElement.className = 'source-path';
- if (sourceUrl.startsWith('http')) {
- sourceElement.href = sourceUrl;
- }
- codeElement.prepend(sourceElement);
- }
- }
- });
-});
diff --git a/static/js/addSrcToCodeBlock.min.js b/static/js/addSrcToCodeBlock.min.js
deleted file mode 100644
index ddd04ae..0000000
--- a/static/js/addSrcToCodeBlock.min.js
+++ /dev/null
@@ -1 +0,0 @@
-document.addEventListener("DOMContentLoaded",function(){document.querySelectorAll(".code-source").forEach(function(t){var e,n=t.getAttribute("data-source"),t=t.nextElementSibling;t&&"PRE"===t.tagName&&(t=t.querySelector("code"))&&((e=document.createElement(n.startsWith("http")?"a":"span")).textContent=n,e.className="source-path",n.startsWith("http")&&(e.href=n),t.prepend(e))})});
diff --git a/static/js/clickableCodeNames.js b/static/js/clickableCodeNames.js
new file mode 100644
index 0000000..ea0b678
--- /dev/null
+++ b/static/js/clickableCodeNames.js
@@ -0,0 +1,36 @@
+document.addEventListener("DOMContentLoaded", function() {
+ // Convert URLs in data-name to links.
+ document.querySelectorAll('code[data-name]').forEach(function(code) {
+ const name = code.getAttribute('data-name');
+ if (name.startsWith('http')) {
+ const link = document.createElement('a');
+ link.href = name;
+ link.className = 'source-path';
+ link.textContent = name;
+ code.insertBefore(link, code.firstChild);
+ // Remove data-name to avoid overlap with Zola's native display.
+ code.removeAttribute('data-name');
+ code.parentElement?.removeAttribute('data-name');
+ }
+ });
+
+ // Legacy support for old shortcode. https://github.com/welpo/tabi/pull/489
+ document.querySelectorAll('.code-source').forEach(function(marker) {
+ const sourceUrl = marker.getAttribute('data-source');
+ const nextPre = marker.nextElementSibling;
+ if (nextPre?.tagName === 'PRE') {
+ const code = nextPre.querySelector('code');
+ if (code) {
+ if (sourceUrl.startsWith('http')) {
+ const link = document.createElement('a');
+ link.href = sourceUrl;
+ link.className = 'source-path';
+ link.textContent = sourceUrl;
+ code.insertBefore(link, code.firstChild);
+ } else {
+ code.setAttribute('data-name', sourceUrl);
+ }
+ }
+ }
+ });
+});
diff --git a/static/js/clickableCodeNames.min.js b/static/js/clickableCodeNames.min.js
new file mode 100644
index 0000000..df1f999
--- /dev/null
+++ b/static/js/clickableCodeNames.min.js
@@ -0,0 +1 @@
+document.addEventListener("DOMContentLoaded",function(){document.querySelectorAll("code[data-name]").forEach(function(e){var t,a=e.getAttribute("data-name");a.startsWith("http")&&((t=document.createElement("a")).href=a,t.className="source-path",t.textContent=a,e.insertBefore(t,e.firstChild),e.removeAttribute("data-name"),e.parentElement?.removeAttribute("data-name"))}),document.querySelectorAll(".code-source").forEach(function(e){var t,a=e.getAttribute("data-source");"PRE"===(e=e.nextElementSibling)?.tagName&&(e=e.querySelector("code"))&&(a.startsWith("http")?((t=document.createElement("a")).href=a,t.className="source-path",t.textContent=a,e.insertBefore(t,e.firstChild)):e.setAttribute("data-name",a))})});
diff --git a/templates/partials/extra_features.html b/templates/partials/extra_features.html
index 9a91289..71f7161 100644
--- a/templates/partials/extra_features.html
+++ b/templates/partials/extra_features.html
@@ -62,9 +62,12 @@
{%- endif -%}
-{# JavaScript to use the "Show source or path" on code blocks shortcode: https://welpo.github.io/tabi/blog/shortcodes/#show-source-or-path #}
-{%- if macros_settings::evaluate_setting_priority(setting="add_src_to_code_block", page=page_s, section=section_s, default_global_value=false) == "true" -%}
-
+{# JavaScript to make code block names clickable when they are URLs: https://welpo.github.io/tabi/blog/shortcodes/#show-source-or-path #}
+{# Note: "add_src_to_code_block" is deprecated in favor of "clickable_code_names". It will be removed in a future release. #}
+{# See https://github.com/welpo/tabi/pull/489 #}
+{%- if macros_settings::evaluate_setting_priority(setting="clickable_code_names", page=page_s, section=section_s, default_global_value=false) == "true"
+ or macros_settings::evaluate_setting_priority(setting="add_src_to_code_block", page=page_s, section=section_s, default_global_value=false) == "true" -%}
+
{%- endif -%}
{# Add backlinks to footnotes #}
diff --git a/theme.toml b/theme.toml
index 5772e61..00b5562 100644
--- a/theme.toml
+++ b/theme.toml
@@ -87,9 +87,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.