From 61793b2e56819f9a9322bf982c950e116fe6081c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=93scar?= Date: Sat, 15 Feb 2025 22:31:55 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20support=20Zola's=20native?= =?UTF-8?q?=20code=20block=20names=20(#489)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- config.toml | 6 +-- content/blog/javascript/index.ca.md | 4 +- content/blog/javascript/index.es.md | 4 +- content/blog/javascript/index.md | 4 +- .../blog/mastering-tabi-settings/index.ca.md | 4 +- .../blog/mastering-tabi-settings/index.es.md | 4 +- content/blog/mastering-tabi-settings/index.md | 4 +- content/blog/series/index.ca.md | 37 ++++---------- content/blog/series/index.es.md | 37 ++++---------- content/blog/series/index.md | 37 ++++---------- content/blog/shortcodes/index.ca.md | 50 +++++++++++++++---- content/blog/shortcodes/index.es.md | 50 +++++++++++++------ content/blog/shortcodes/index.md | 50 +++++++++++++------ content/projects/doteki/index.ca.md | 7 +-- content/projects/doteki/index.es.md | 7 +-- content/projects/doteki/index.md | 9 +--- sass/parts/_code.scss | 38 +++++++------- static/js/addSrcToCodeBlock.js | 20 -------- static/js/addSrcToCodeBlock.min.js | 1 - static/js/codeBlockNameLinks.js | 36 +++++++++++++ static/js/codeBlockNameLinks.min.js | 1 + templates/partials/extra_features.html | 9 ++-- theme.toml | 4 +- 23 files changed, 228 insertions(+), 195 deletions(-) delete mode 100644 static/js/addSrcToCodeBlock.js delete mode 100644 static/js/addSrcToCodeBlock.min.js create mode 100644 static/js/codeBlockNameLinks.js create mode 100644 static/js/codeBlockNameLinks.min.js diff --git a/config.toml b/config.toml index 2482d03..e4f4512 100644 --- a/config.toml +++ b/config.toml @@ -128,13 +128,13 @@ show_remote_changes = true # Defaults to true. # Show a link to the repository of the site, right next to the "Powered by Zola & tabi" text. show_remote_source = true # Defaults to true. -# Add a "copy" button to codeblocks (loads ~700 bytes of JavaScript). +# Add a "copy" button to code blocks (loads ~700 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 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 +code_block_name_links = 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..c3e48d0 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 `code_block_name_links = 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..00906d9 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 `code_block_name_links = 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..9d81b24 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 `code_block_name_links = 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..cfa76c7 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 `code_block_name_links = 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..21d07e3 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 `code_block_name_links = 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..c08ac23 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 `code_block_name_links = 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..c94b9c9 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 +code_block_name_links = 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 `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 +__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..6fa148c 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 +code_block_name_links = 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 `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 __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..b13f191 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 +code_block_name_links = 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 `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 __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/codeBlockNameLinks.js b/static/js/codeBlockNameLinks.js new file mode 100644 index 0000000..ea0b678 --- /dev/null +++ b/static/js/codeBlockNameLinks.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/codeBlockNameLinks.min.js b/static/js/codeBlockNameLinks.min.js new file mode 100644 index 0000000..df1f999 --- /dev/null +++ b/static/js/codeBlockNameLinks.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..2662b92 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 "code_block_name_links". It will be removed in a future release. #} +{# See https://github.com/welpo/tabi/pull/489 #} +{%- if macros_settings::evaluate_setting_priority(setting="code_block_name_links", 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..db3384e 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 +code_block_name_links = false # Force left-to-right (LTR) direction for code blocks. # Set to false to allow code to follow the document's natural direction.