✨ feat: enable adding URL/path to code blocks (#307)

config.toml

@@ -128,6 +128,10 @@ 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
+# 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
+
 # Show the reading time of a page.
 # 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
 show_reading_time = true

content/blog/javascript/index.ca.md

@@ -1,7 +1,7 @@
 +++
 title = "Sense JavaScript obligatori"
 date = 2023-01-06
-updated = 2024-01-07
+updated = 2024-05-03
 description = "JavaScript només s'utilitza quan HTML i CSS no són suficients."
 
 [taxonomies]
@@ -28,6 +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).
 - [**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)
 - [**Enllaços de retorn per a notes a peu de pàgina**](@/blog/markdown/index.ca.md#1). Habilitats configurant `footnote_backlinks = true` (~500 bytes).
 
 Per especificar aquestes opcions:

content/blog/javascript/index.es.md

@@ -1,7 +1,7 @@
 +++
 title = "Sin JavaScript obligatorio"
 date = 2023-01-06
-updated = 2024-01-07
+updated = 2024-05-03
 description = "JavaScript solo se utiliza cuando HTML y CSS no son suficientes."
 
 [taxonomies]
@@ -28,6 +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).
 - [**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)
 - [**Enlaces de retorno de notas al pie**](@/blog/markdown/index.es.md#1). Habilitado al configurar `footnote_backlinks = true` (~500 bytes).
 
 Para especificar estas opciones:

content/blog/javascript/index.md

@@ -1,7 +1,7 @@
 +++
 title = "No mandatory JavaScript"
 date = 2023-01-06
-updated = 2024-01-07
+updated = 2024-05-03
 description = "JavaScript is only used when HTML and CSS aren't enough."
 
 [taxonomies]
@@ -28,6 +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).
 - [**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)
 - [**Footnote backlinks**](@/blog/markdown/index.md#1). Enabled by setting `footnote_backlinks = true` (~500 bytes).
 
 To specify these settings:

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

@@ -1,7 +1,7 @@
 +++
 title = "Domina la configuració de tabi: guia completa"
 date = 2023-09-18
-updated = 2024-05-02
+updated = 2024-05-03
 description = "Descobreix les múltiples maneres en què pots personalitzar tabi."
 
 [taxonomies]
@@ -527,6 +527,14 @@ 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
+
+| 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).
+
 ### Suport per a KaTeX
 
 | Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript |

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

@@ -1,7 +1,7 @@
 +++
 title = "Domina la configuración de tabi: guía completa"
 date = 2023-09-18
-updated = 2024-05-02
+updated = 2024-05-03
 description = "Descubre las múltiples maneras en que puedes personalizar tabi."
 
 [taxonomies]
@@ -527,6 +527,14 @@ 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
+
+| 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).
+
 ### Soporte para KaTeX
 
 | Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |

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

@@ -1,7 +1,7 @@
 +++
 title = "Mastering tabi Settings: A Comprehensive Guide"
 date = 2023-09-18
-updated = 2024-05-02
+updated = 2024-05-03
 description = "Discover the many ways you can customise your tabi site."
 
 [taxonomies]
@@ -530,6 +530,14 @@ 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
+
+| 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).
+
 ### KaTeX Support
 
 | Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |

content/blog/shortcodes/index.ca.md

@@ -1,7 +1,7 @@
 +++
 title = "Shortcodes personalitzats"
 date = 2023-02-19
-updated = 2024-05-02
+updated = 2024-05-03
 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,6 +11,7 @@ tags = ["funcionalitat", "shortcodes"]
 toc = true
 toc_levels = 2
 quick_navigation_buttons = true
+add_src_to_code_block = true
 social_media_card = "social_cards/ca_blog_shortcodes.jpg"
 +++
 
@@ -95,6 +96,33 @@ Tots els altres shortcodes d'imatges poden utilizar l'amplada completa assignant
 {{/* full_width_image(src="img/amsterdam_by_oskerwyld.webp", alt="Fotografia d'un canal a Àmsterdam") */}}
 ```
 
+## Shortcodes de codi
+
+### 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).
+
+{{ 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`.") }}
+
+{{ 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") }}
+```
+
+#### Ús
+
+````
+{{/* add_src_to_code_block(src="https://github.com/welpo/doteki/blob/main/.gitignore") */}}
+
+```.gitignore
+__pycache__/
+*coverage*
+.vscode/
+dist/
+```
+````
+
 ## Shortcodes de text
 
 ### Text remot

content/blog/shortcodes/index.es.md

@@ -1,7 +1,7 @@
 +++
 title = "Shortcodes personalizados"
 date = 2023-02-19
-updated = 2024-05-02
+updated = 2024-05-03
 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,6 +11,7 @@ tags = ["funcionalidad", "shortcodes"]
 toc = true
 toc_levels = 2
 quick_navigation_buttons = true
+add_src_to_code_block = true
 social_media_card = "social_cards/es_blog_shortcodes.jpg"
 +++
 
@@ -96,6 +97,33 @@ Todos los otros shortcodes de imágenes pueden usar el ancho completo asignando
 {{/* full_width_image(src="img/amsterdam_by_oskerwyld.webp", alt="Fotografía de un canal en Ámsterdam") */}}
 ```
 
+## Shortcodes de código
+
+### 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).
+
+{{ 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
+
+````
+{{/* add_src_to_code_block(src="https://github.com/welpo/doteki/blob/main/.gitignore") */}}
+
+```.gitignore
+__pycache__/
+*coverage*
+.vscode/
+dist/
+```
+````
+
 ## Shortcodes de texto
 
 ### Texto remoto

content/blog/shortcodes/index.md

@@ -1,7 +1,7 @@
 +++
 title = "Custom shortcodes"
 date = 2023-02-19
-updated = 2024-05-02
+updated = 2024-05-03
 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,6 +11,7 @@ tags = ["showcase", "shortcodes"]
 toc = true
 toc_levels = 2
 quick_navigation_buttons = true
+add_src_to_code_block = true
 social_media_card = "social_cards/blog_shortcodes.jpg"
 +++
 
@@ -95,11 +96,38 @@ All other image shortcodes can be made into full-width by setting the optional p
 {{/* full_width_image(src="img/amsterdam_by_oskerwyld.webp", alt="Photograph of a canal in Amsterdam") */}}
 ```
 
+## Code shortcodes
+
+### 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).
+
+{{ 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
+
+````
+{{/* add_src_to_code_block(src="https://github.com/welpo/doteki/blob/main/.gitignore") */}}
+
+```.gitignore
+__pycache__/
+*coverage*
+.vscode/
+dist/
+```
+````
+
 ## Text shortcodes
 
 ### Remote text
 
-Embed text from a remote URL or a local file.
+Embed text from a remote URL or a local file. To display the path or URL on the code block, see the [show source or path shortcode](#show-source-or-path).
 
 **Important**:
 

sass/parts/_code.scss

@@ -78,6 +78,23 @@ pre {
             text-align: left;
             text-transform: uppercase;
         }
+
+        .source-path {
+            display: block;
+            position: absolute;
+            top: 0;
+            right: 1.3rem;
+            padding-top: 0.3rem;
+            padding-right: 1.3rem;
+            max-width: 80%;
+            height: 0.9rem;
+            overflow: hidden;
+            color: var(--hover-color);
+            font-size: 0.65rem;
+            text-align: right;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
     }
 }
 

static/js/addSrcToCodeBlock.js

@@ -0,0 +1,20 @@
+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);
+            }
+        }
+    });
+});

static/js/addSrcToCodeBlock.min.js

@@ -0,0 +1 @@
+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))})});

templates/page.html

@@ -17,6 +17,8 @@
 
 {% set settings_to_test = [
     "footnote_backlinks",
+    "add_src_to_code_block",
+    "copy_button",
     "katex",
     "quick_navigation_buttons",
     "show_reading_time",

templates/partials/extra_features.html

@@ -47,6 +47,11 @@
     <script defer src="{{ get_url(path='js/copyCodeToClipboard.min.js', trailing_slash=false) | safe }}"></script>
 {%- 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, default_global_value=false) == "true" -%}
+    <script defer src="{{ get_url(path='js/addSrcToCodeBlock.min.js', trailing_slash=false) | safe }}"></script>
+{%- endif -%}
+
 {# Add backlinks to footnotes #}
 {%- if macros_settings::evaluate_setting_priority(setting="footnote_backlinks", page=page, default_global_value=false) == "true" -%}
     <script defer src="{{ get_url(path='js/footnoteBacklinks.min.js', trailing_slash=false | safe )}}"></script>

templates/shortcodes/add_src_to_code_block.html

@@ -0,0 +1 @@
+<span class="code-source hidden" data-source="{{ src | safe }}"></span>

theme.toml

@@ -83,6 +83,10 @@ 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
+# 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
+
 # Show the reading time of a page.
 # 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
 show_reading_time = true