✨ feat: add indicator to external links (#443)

config.toml

@@ -38,6 +38,8 @@ bottom_footnotes = true
 # To use a Zola built-in theme, CSP needs to allow unsafe-inline for style-src.
 highlight_theme = "css"
 smart_punctuation = true
+# Set to 'external' to add an indicator next to external links.
+external_links_class = "external"
 
 [link_checker]
 internal_level = "warn"

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 = 2025-02-09
+updated = 2025-02-15
 description = "Descobreix les múltiples maneres en què pots personalitzar tabi."
 
 [taxonomies]
@@ -237,6 +237,25 @@ Fes clic a la imatge a continuació per comparar les fonts:
 
 {{ image_toggler(default_src="blog/mastering-tabi-settings/img/serif.webp", toggled_src="blog/mastering-tabi-settings/img/sans-serif.webp", default_alt="Font serif", toggled_alt="Font sans-serif", full_width=true) }}
 
+### Indicador d'enllaços externs
+
+| Pàgina | Secció | `config.toml` | Segueix Jerarquia | Requereix JavaScript |
+|:------:|:------:|:-------------:|:-----------------:|:-------------------:|
+|   ❌   |   ❌   |      ✅       |         ❌        |         ❌          |
+
+{{ admonition(type="info", text="Requereix Zola 0.20.0 o posterior.") }}
+
+Si vols afegir una icona als enllaços externs, configura la secció `[markdown]` (no `[extra]`) al teu `config.toml`:
+
+```toml
+[markdown]
+external_links_class = "external"
+```
+
+Això afegirà una petita icona al costat dels enllaços externs:
+
+{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/external_link_light.webp", dark_src="blog/mastering-tabi-settings/img/external_link_dark.webp", alt="Icona d'enllaç extern", full_width=true) }}
+
 ### Estils CSS personalitzats
 
 | 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 = 2025-02-09
+updated = 2025-02-15
 description = "Descubre las múltiples maneras en que puedes personalizar tabi."
 
 [taxonomies]
@@ -238,6 +238,25 @@ Haz clic en la imagen para comparar las fuentes:
 
 {{ image_toggler(default_src="blog/mastering-tabi-settings/img/serif.webp", toggled_src="blog/mastering-tabi-settings/img/sans-serif.webp", default_alt="Fuente serif", toggled_alt="Fuente sans-serif", full_width=true) }}
 
+### Indicador de enlaces externos
+
+| Página | Sección | `config.toml` | Sigue Jerarquía | Requiere JavaScript |
+|:------:|:-------:|:-------------:|:----------------:|:------------------:|
+|   ❌   |    ❌   |      ✅       |        ❌        |         ❌         |
+
+{{ admonition(type="info", text="Requiere Zola 0.20.0 o posterior.") }}
+
+Si deseas añadir un icono a los enlaces externos, configura la sección `[markdown]` (no `[extra]`) en tu `config.toml`:
+
+```toml
+[markdown]
+external_links_class = "external"
+```
+
+Esto añadirá un pequeño icono junto a los enlaces externos:
+
+{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/external_link_light.webp", dark_src="blog/mastering-tabi-settings/img/external_link_dark.webp", alt="Icono de enlace externo", full_width=true) }}
+
 ### Estilos CSS personalizados
 
 | 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 = 2025-02-09
+updated = 2025-02-15
 description = "Discover the many ways you can customise your tabi site."
 
 [taxonomies]
@@ -242,6 +242,25 @@ Click on the image below to compare the two looks:
 
 {{ image_toggler(default_src="blog/mastering-tabi-settings/img/serif.webp", toggled_src="blog/mastering-tabi-settings/img/sans-serif.webp", default_alt="Serif font", toggled_alt="Sans-serif font", full_width=true) }}
 
+### External Link Indicator
+
+| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
+|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
+|  ❌  |   ❌    |      ✅       |         ❌        |         ❌          |
+
+{{ admonition(type="info", text="Requires Zola 0.20.0 or later.") }}
+
+If you'd like to add an icon to external links, configure the `[markdown]` (not `[extra]`) section in your `config.toml`:
+
+```toml
+[markdown]
+external_links_class = "external"
+```
+
+This will add a small icon next to external links:
+
+{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/external_link_light.webp", dark_src="blog/mastering-tabi-settings/img/external_link_dark.webp", alt="External link icon", full_width=true) }}
+
 ### Custom CSS
 
 | Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |

sass/parts/_misc.scss

@@ -82,6 +82,44 @@ a {
     text-decoration: inherit;
 }
 
+// External link styles with `external_links_class = "external"`.
+main {
+    --external-link-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M11 5h-6v14h14v-6'/%3E%3Cpath d='M13 11l7 -7'/%3E%3Cpath d='M21 3h-6M21 3v6'/%3E%3C/g%3E%3C/svg%3E");
+    a.external:not(:has(img, svg, video, picture, figure)) {
+        display: inline-block;
+        padding-inline-end: 0.9em;
+    }
+
+    a.external:not(:has(img, svg, video, picture, figure))::after {
+        -webkit-mask-image: var(--external-link-icon);
+        -webkit-mask-size: 100% 100%;
+        display: inline-block;
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        mask-image: var(--external-link-icon);
+        mask-size: 100% 100%;
+        margin-inline-start: 0.2em;
+        inset-inline-end: 0;
+        background-color: var(--primary-color);
+        width: 0.8em;
+        height: 0.8em;
+        content: '';
+    }
+
+    &:dir(rtl) a.external:not(:has(img, svg, video, picture, figure))::after {
+        transform: translateY(-50%) rotate(-90deg);
+    }
+
+    .meta a.external:not(:has(img, svg, video, picture, figure))::after {
+        background-color: var(--meta-color);
+    }
+
+    a.external:not(:has(img, svg, video, picture, figure)):hover::after {
+        background-color: var(--hover-color);
+    }
+}
+
 a:hover {
     background-color: var(--primary-color);
     color: var(--hover-color);
@@ -91,7 +129,7 @@ a:hover rt {
     color: var(--text-color);
 }
 
-a:not(.no-hover-padding):hover::after {
+a:not(.no-hover-padding):hover::before {
     display: inline-block;
     position: absolute;
     z-index: -1;
@@ -100,7 +138,7 @@ a:not(.no-hover-padding):hover::after {
     inset-inline-end: -0.15em;
     inset-inline-start: -0.15em;
     background-color: var(--primary-color);
-    max-inline-size: 105%;  // This fixes multi-line links (see #225)
+    max-inline-size: 105%;
     content: "";
 }
 

templates/page.html

@@ -178,7 +178,7 @@ Current section extra: {% if current_section %}{{ current_section.extra | json_e
                 </ul><ul class="meta last-updated"><li>{{ updated_str }}</li>
                 {#- Show link to remote changes if enabled -#}
                 {%- if config.extra.remote_repository_url and macros_settings::evaluate_setting_priority(setting="show_remote_changes", page=page, default_global_value=true) == "true" -%}
-                    <li>{%- if previous_visible -%}{{ separator_with_class | safe }}{%- endif -%}<a href="{% include "partials/history_url.html" %}" {{ blank_target }} rel="{{ rel_attributes }}">{{ macros_translate::translate(key="see_changes", default="See changes", language_strings=language_strings) }}<small>&nbsp;<span class="arrow-corner">↗</span></small></a></li>
+                    <li>{%- if previous_visible -%}{{ separator_with_class | safe }}{%- endif -%}<a class="external" href="{% include "partials/history_url.html" %}" {{ blank_target }} rel="{{ rel_attributes }}">{{ macros_translate::translate(key="see_changes", default="See changes", language_strings=language_strings) }}</a></li>
                 {%- endif -%}
             {% endif %}
         </ul>