Restore functionality for external link indicators

assets/theme-css/footer.css

@@ -39,6 +39,18 @@
   color: var(--spht-color-link-hover);
 }
 
+.footer-item a.nav-external {
+  white-space: nowrap;
+}
+
+.footer-item a.nav-external::after {
+  font: var(--fa-font-solid);
+  content: "\f35d";
+  font-size: 0.75em;
+  margin-left: 0.3em;
+  display: inline-block;
+}
+
 .footer-actions {
   max-width: 25vw;
   margin: 1.25rem 1.563rem;

assets/theme-css/navbar.css

@@ -42,6 +42,15 @@ a.navbar-item:hover,
   text-decoration-thickness: max(3px, 0.1875rem, 0.12em);
 }
 
+a.navbar-item.nav-external::after,
+.navbar-dropdown a.navbar-item.nav-external::after {
+  font: var(--fa-font-solid);
+  content: "\f35d";
+  font-size: 0.75em;
+  margin-left: 0.3em;
+  display: inline-block;
+}
+
 .navbar-burger {
   font-family: inherit;
   font-size: 1em;

doc/config.yaml

@@ -41,6 +41,9 @@ params:
       url: /shortcodes/
     - title: Examples
       url: /examples/
+    - title: Repository
+      url: https://github.com/scientific-python/scientific-python-hugo-theme
+      is_external: true
     - title: More
       sublinks:
         - title: Dropdown item
@@ -70,9 +73,11 @@ params:
             link: /about/
           - text: Theme GitHub
             link: https://github.com/scientific-python/scientific-python-hugo-theme
+            is_external: true
       column2:
         links:
           - text: Scientific Python Forum
             link: https://discuss.scientific-python.org
+            is_external: true
       column3:
         links:

doc/content/user_guide/features.md

@@ -93,6 +93,48 @@ To use them elsewhere, e.g. in Hugo templates, we provide an `svg-icon` partial.
 {{ partial "svg-icon" "my-icon" }}
 ```
 
+## External links
+
+Links in the navbar and footer can be marked as external by adding `is_external: true`. This displays an external link indicator icon (↗)
+next to the link text and opens the link in a new tab.
+
+### Navbar external links
+
+```yaml
+params:
+  navbar:
+    - title: Documentation
+      url: /docs/
+    - title: GitHub
+      url: https://github.com/your-org/your-repo
+      is_external: true
+    - title: More
+      sublinks:
+        - title: Internal Page
+          url: /internal/
+        - title: External Resource
+          url: https://example.com
+          is_external: true
+```
+
+### Footer external links
+
+```yaml
+params:
+  footer:
+    quicklinks:
+      column1:
+        title: "Links"
+        links:
+          - text: About
+            link: /about/
+          - text: GitHub Repository
+            link: https://github.com/your-org/your-repo
+            is_external: true
+```
+
+The external link indicator automatically adapts to both light and dark colour modes.
+
 ## Mermaid diagrams
 
 [Mermaid](https://mermaid.js.org/) diagrams are rendered from code blocks:

layouts/partials/footer.html

@@ -16,7 +16,7 @@
       <div class="footer-column">
         {{- range .links }}
         <div class="footer-item">
-          <a href="{{ .link }}">
+          <a href="{{ .link }}"{{ if .is_external }} class="nav-external" target="_blank" rel="noopener"{{ end }}>
             {{ .text }}
           </a>
         </div>

layouts/partials/navbar.html

@@ -40,14 +40,14 @@
 
           <div class="navbar-dropdown">
             {{- range .sublinks }}
-            <a href="{{ .url }}" class="navbar-item">
+            <a href="{{ .url }}" class="navbar-item{{ if .is_external }} nav-external{{ end }}"{{ if .is_external }} target="_blank" rel="noopener"{{ end }}>
               {{ .title | safeHTML }}
             </a>
             {{- end }}
           </div>
         </div>
         {{- else }}
-        <a href="{{ .url }}" class="navbar-item">
+        <a href="{{ .url }}" class="navbar-item{{ if .is_external }} nav-external{{ end }}"{{ if .is_external }} target="_blank" rel="noopener"{{ end }}>
           {{ .title | safeHTML }}
         </a>
         {{- end }}