diff --git a/config.toml b/config.toml index 77d503e88..d8aa34782 100644 --- a/config.toml +++ b/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 diff --git a/content/blog/javascript/index.ca.md b/content/blog/javascript/index.ca.md index 68829bf99..9f6f45959 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-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: diff --git a/content/blog/javascript/index.es.md b/content/blog/javascript/index.es.md index 12375aa69..d574717a8 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-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: diff --git a/content/blog/javascript/index.md b/content/blog/javascript/index.md index 0139a5365..9217a5545 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-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: diff --git a/content/blog/mastering-tabi-settings/index.ca.md b/content/blog/mastering-tabi-settings/index.ca.md index c30e6b17e..fb70133d2 100644 --- a/content/blog/mastering-tabi-settings/index.ca.md +++ b/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.md#show-source-or-path). + ### Suport per a KaTeX | Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript | diff --git a/content/blog/mastering-tabi-settings/index.es.md b/content/blog/mastering-tabi-settings/index.es.md index 8c5889c7a..5c0d39a75 100644 --- a/content/blog/mastering-tabi-settings/index.es.md +++ b/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.md#show-source-or-path). + ### Soporte para KaTeX | Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript | diff --git a/content/blog/mastering-tabi-settings/index.md b/content/blog/mastering-tabi-settings/index.md index 65ffba771..16cc7567f 100644 --- a/content/blog/mastering-tabi-settings/index.md +++ b/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 | diff --git a/content/blog/shortcodes/index.ca.md b/content/blog/shortcodes/index.ca.md index 680a02b22..071773f20 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-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 diff --git a/content/blog/shortcodes/index.es.md b/content/blog/shortcodes/index.es.md index c8e53ad83..3aade5312 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-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 diff --git a/content/blog/shortcodes/index.md b/content/blog/shortcodes/index.md index 16412c5ad..a525bb01d 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-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**: diff --git a/sass/parts/_code.scss b/sass/parts/_code.scss index c37b2fb5b..3bf062b0b 100644 --- a/sass/parts/_code.scss +++ b/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; + } } } diff --git a/static/js/addSrcToCodeblock.js b/static/js/addSrcToCodeblock.js new file mode 100644 index 000000000..05021fc87 --- /dev/null +++ b/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.appendChild(sourceElement); + } + } + }); +}); diff --git a/static/js/addSrcToCodeblock.min.js b/static/js/addSrcToCodeblock.min.js new file mode 100644 index 000000000..5d1880c11 --- /dev/null +++ b/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.appendChild(e))})}); diff --git a/templates/page.html b/templates/page.html index 269e5fca0..762064049 100644 --- a/templates/page.html +++ b/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", diff --git a/templates/partials/extra_features.html b/templates/partials/extra_features.html index 35cddfc19..e0671e4eb 100644 --- a/templates/partials/extra_features.html +++ b/templates/partials/extra_features.html @@ -47,6 +47,11 @@ {%- 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" -%} + +{%- endif -%} + {# Add backlinks to footnotes #} {%- if macros_settings::evaluate_setting_priority(setting="footnote_backlinks", page=page, default_global_value=false) == "true" -%} diff --git a/templates/shortcodes/add_src_to_code_block.html b/templates/shortcodes/add_src_to_code_block.html new file mode 100644 index 000000000..907e09207 --- /dev/null +++ b/templates/shortcodes/add_src_to_code_block.html @@ -0,0 +1 @@ + diff --git a/theme.toml b/theme.toml index f43d217a0..9e81f418f 100644 --- a/theme.toml +++ b/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