Skip to content

Restore functionality for external link indicators #678

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
stefanv merged 9 commits into from
Dec 3, 2025
Merged

Restore functionality for external link indicators #678

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
e02aea2
Add `nav-external` class for external links
agriyakhetarpal Nov 19, 2025
67125e0
Add styling based on what PST does
agriyakhetarpal Nov 19, 2025
f805b17
Add docs
agriyakhetarpal Nov 19, 2025
827c76e
Add examples to theme navbar and footers
agriyakhetarpal Nov 19, 2025
8851a77
Need more space for external SVGs in the footer
agriyakhetarpal Nov 19, 2025
85dd207
Use `U+F35D`
agriyakhetarpal Dec 3, 2025
936e464
Try the HTML `` entity variant
agriyakhetarpal Dec 3, 2025
5fa9b45
Render unicode icon with FA6 font
agriyakhetarpal Dec 3, 2025
438a154
Merge branch 'main' into is-external-link
agriyakhetarpal Dec 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions assets/theme-css/footer.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
9 changes: 9 additions & 0 deletions assets/theme-css/navbar.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
5 changes: 5 additions & 0 deletions doc/config.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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:
42 changes: 42 additions & 0 deletions doc/content/user_guide/features.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (↗)
Copy link
Copy Markdown
Member

@stefanv stefanv Dec 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We're using a different icon in this PR, right?

Copy link
Copy Markdown
Member Author

@agriyakhetarpal agriyakhetarpal Dec 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, we are using https://utf8-icons.com/utf-8-character-62301. This ↗ one is the closest I could find in Unicode at that time, but I can change it to the U+F35D icon (). Unfortunately, it looks like my computer doesn't support this icon at all (I see a glyph with a question mark inside it), so could you please check if you can see it? It looks roughly like this icon: https://fontawesome.com/v5/icons/external-link-alt?s=solid. I can see it in the CSS for some reason though; that's how I have the screenshots.

Copy link
Copy Markdown
Member Author

@agriyakhetarpal agriyakhetarpal Dec 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay, so it looks like my browser also can't understand this icon, because it's only available with the "Font Awesome 6 Free" font, but this paragraph in the documentation uses the default font. This explains why we can see it in the header and the footer.

Copy link
Copy Markdown
Member Author

@agriyakhetarpal agriyakhetarpal Dec 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have an idea for a fix

Copy link
Copy Markdown
Member Author

@agriyakhetarpal agriyakhetarpal Dec 3, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See 5fa9b45 (https://deploy-preview-678--scientific-python-hugo-theme.netlify.app/user_guide/features/#external-links) 😉

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:
Expand Down
2 changes: 1 addition & 1 deletion layouts/partials/footer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions layouts/partials/navbar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }}
Expand Down
Loading