diff --git a/config.toml b/config.toml index ab6cab686..14ff2978b 100644 --- a/config.toml +++ b/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" diff --git a/content/blog/mastering-tabi-settings/img/external_link_dark.webp b/content/blog/mastering-tabi-settings/img/external_link_dark.webp new file mode 100644 index 000000000..61a6641dd Binary files /dev/null and b/content/blog/mastering-tabi-settings/img/external_link_dark.webp differ diff --git a/content/blog/mastering-tabi-settings/img/external_link_light.webp b/content/blog/mastering-tabi-settings/img/external_link_light.webp new file mode 100644 index 000000000..16d03a1f7 Binary files /dev/null and b/content/blog/mastering-tabi-settings/img/external_link_light.webp differ diff --git a/content/blog/mastering-tabi-settings/index.ca.md b/content/blog/mastering-tabi-settings/index.ca.md index c87927f1e..7f9053246 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-11-27 +updated = 2024-11-30 description = "Descobreix les múltiples maneres en què pots personalitzar tabi." [taxonomies] @@ -234,6 +234,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.19.3 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 | diff --git a/content/blog/mastering-tabi-settings/index.es.md b/content/blog/mastering-tabi-settings/index.es.md index 004618352..b5823b095 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-11-27 +updated = 2024-11-30 description = "Descubre las múltiples maneras en que puedes personalizar tabi." [taxonomies] @@ -234,6 +234,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.19.3 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 | diff --git a/content/blog/mastering-tabi-settings/index.md b/content/blog/mastering-tabi-settings/index.md index ab522cae1..5f910d49b 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-11-27 +updated = 2024-11-30 description = "Discover the many ways you can customise your tabi site." [taxonomies] @@ -238,6 +238,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.19.3 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 | diff --git a/sass/parts/_misc.scss b/sass/parts/_misc.scss index 1ebaddbf3..4529a3894 100644 --- a/sass/parts/_misc.scss +++ b/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: initial; } -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: ""; } diff --git a/templates/page.html b/templates/page.html index dedaa8b05..f741a48c7 100644 --- a/templates/page.html +++ b/templates/page.html @@ -177,7 +177,7 @@