From 965911d6765c2ef249e3d3905f0b3cf200c1d663 Mon Sep 17 00:00:00 2001 From: welpo Date: Fri, 29 Nov 2024 13:06:58 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20add=20indicator=20to=20exte?= =?UTF-8?q?rnal=20links?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- config.toml | 5 +++++ sass/parts/_misc.scss | 44 +++++++++++++++++++++++++++++++++++++++++-- templates/base.html | 12 +++++++++--- templates/page.html | 2 +- theme.toml | 4 ++++ 5 files changed, 61 insertions(+), 6 deletions(-) diff --git a/config.toml b/config.toml index ab6cab686..8fd5306c1 100644 --- a/config.toml +++ b/config.toml @@ -38,6 +38,7 @@ 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 +external_links_target_blank = true [link_checker] internal_level = "warn" @@ -126,6 +127,10 @@ 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. +# Show an indicator (↗) next to external links. +# 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 +mark_external_links = true + # Add a "copy" button to codeblocks (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 diff --git a/sass/parts/_misc.scss b/sass/parts/_misc.scss index 1ebaddbf3..ecbbcf36e 100644 --- a/sass/parts/_misc.scss +++ b/sass/parts/_misc.scss @@ -82,6 +82,46 @@ a { text-decoration: inherit; } +// External link styles only apply (1) in main and (2) when `mark_external_links` is enabled. +html[data-external-links="true"] { + 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"); + .external-link:not(:has(img, svg, video, picture, figure)) { + display: inline-block; + padding-inline-end: 0.9em; + } + + .external-link: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) .external-link:not(:has(img, svg, video, picture, figure))::after { + transform: translateY(-50%) rotate(-90deg); + } + + .meta .external-link:not(:has(img, svg, video, picture, figure))::after { + background-color: var(--meta-color); + } + + .external-link: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 +131,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 +140,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/base.html b/templates/base.html index d3d0cc141..1073a14ff 100644 --- a/templates/base.html +++ b/templates/base.html @@ -24,10 +24,16 @@ {%- endif -%} - + {%- endif -%} + {%- if macros_settings::evaluate_setting_priority(setting="force_codeblock_ltr", page=current_page, default_global_value=true) == "false" %} + data-code-direction="inherit" + {%- endif -%} + {%- if macros_settings::evaluate_setting_priority(setting="mark_external_links", page=current_page, default_global_value=true) == "true" %} + data-external-links="true" + {%- endif -%}> {% include "partials/header.html" %} diff --git a/templates/page.html b/templates/page.html index dedaa8b05..3948fa524 100644 --- a/templates/page.html +++ b/templates/page.html @@ -177,7 +177,7 @@

diff --git a/theme.toml b/theme.toml index 46db97fc0..4086a98b8 100644 --- a/theme.toml +++ b/theme.toml @@ -83,6 +83,10 @@ 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. +# Show an indicator (↗) next to external links. +# 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 +mark_external_links = true + # Add a "copy" button to codeblocks (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