diff --git a/assets/theme-css/footer.css b/assets/theme-css/footer.css index 3947f421..930ab562 100644 --- a/assets/theme-css/footer.css +++ b/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; diff --git a/assets/theme-css/navbar.css b/assets/theme-css/navbar.css index 9e8eeafb..f7d1958d 100644 --- a/assets/theme-css/navbar.css +++ b/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; diff --git a/doc/config.yaml b/doc/config.yaml index e4fca1e8..b9596100 100644 --- a/doc/config.yaml +++ b/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: diff --git a/doc/content/user_guide/features.md b/doc/content/user_guide/features.md index 69a841a0..a6569fe6 100644 --- a/doc/content/user_guide/features.md +++ b/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: diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index de969b9d..ebccfc6a 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -16,7 +16,7 @@ {{- else }} - + {{ .title | safeHTML }} {{- end }}