Restore functionality for external link indicators #678
Conversation
✅ Deploy Preview for scientific-python-hugo-theme ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify project configuration. |
stefanv
left a comment
stefanv
left a comment
There was a problem hiding this comment.
LGTM, just one minor doc tweak. Thanks!
doc/content/user_guide/features.md
Outdated
|
|
||
| ## 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 (↗) |
There was a problem hiding this comment.
We're using a different icon in this PR, right?
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
I have an idea for a fix
There was a problem hiding this comment.
|
Haha, OK, fine that works. |
2 participants
#162 and #163 had previously added an external link indicator icon to the theme, which was later reverted in #269 due to discussion in ##233 (comment), where it was pointed out that it was broken for dark mode and there were some questions around how to style SVGs. Also, it was mentioned that this functionality was not being used in the websites that use the theme. However, we had enabled it downstream and it caught my eye on a routine visit recently. I've put forward in this PR a more correct implementation for external link indicators, drawing from how the PyData Sphinx Theme does it.
This also works with light and dark mode, the rationale being that the
::afterpseudo-element doesn't explicitly set acolorproperty and inherits it from the parent – wherein, in this case, we have--pst-color-text-baseand--pst-color-link-hoverthat are defined with different values for light and dark mode already.cc: @stefanv
Here are some screenshots for your reference: