✨ feat: add indicator to external links

welpo · Nov 30, 2024 · 38c2243 · 38c2243
1 parent e42832e
commit 38c2243
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 3 deletions.
diff --git 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/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
@@ -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 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>