✨ feat: add indicator to external links

welpo · Nov 29, 2024 · 965911d · 965911d
1 parent e42832e
commit 965911d
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 6 deletions.
diff --git 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
@@ -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
@@ -24,10 +24,16 @@
 {%- endif -%}
 
 <!DOCTYPE html>
-<html lang="{{ lang }}" {% if config.extra.default_theme -%}
+<html lang="{{ lang }}"
+    {%- if config.extra.default_theme %}
     data-theme="{{config.extra.default_theme}}"
-{%- endif -%}{% if macros_settings::evaluate_setting_priority(setting="force_codeblock_ltr", page=current_page, default_global_value=true) == "false" -%}
-    data-code-direction="inherit"{% 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
@@ -177,7 +177,7 @@ <h1 class="article-title">
                 </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 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>

diff --git 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