-
-
Notifications
You must be signed in to change notification settings - Fork 78.7k
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.
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
Replace AnchorJS with a Hugo render hook #32953
Conversation
4614292
to
86d5d5e
Compare
heya - FYI- I used render hook code similar to this for a docs project and Algolia displayed the anchor |
@ffoodd could you help me out with this please? ❤️ |
I'll try to 👌 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Seems already good to me!
What :focus
fix did you have in mind? It's working fine IMHO.
There's no need to use a pseudo-element to handle #
here because aria-label
erases text content from link's accessible name.
So yeah, that's really good I think :)
@@ -0,0 +1,5 @@ | |||
<h{{ .Level }} id="{{ .Anchor | safeURL }}">{{ .Text | safeHTML }} | |||
{{- if and (ge .Level 2) (le .Level 5) }}{{" " -}} | |||
<a class="anchor-link" href="#{{ .Anchor | safeURL }}" aria-label="Anchor">#</a> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
aria-label
value is questionable. @patrickhlauke Do we consider the heading context is enough, or should we try to complete the label using heading's content?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
yeah i'd probably go for something a bit more descriptive, like having aria-label="Link to this section: {{ .Text | safeHTML }}"
perhaps. yes, admittedly a bit wordy, but it front-loads what the meaning of the link is and AT users can always choose not to listen to the entire thing
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Note that I used what anchor.js is already doing. I don't have a preference about this, whatever you guys think is better.
Regarding this being markdown headings only: since this is outputs a very simple markup, we should be able to add anchors manually on markup headings, shouldn't we? It may even be a simple shortcode to help computing the markup. |
Regarding
I think we should be OK in the sense that ToC already works with Markdown headings anyway. So, this way, we are actually more consistent, I think. |
e5daa24
to
d13db84
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Made a few tweaks to polish this: improved aria-label
after discussion, and (opinionated) made the anchor link visible when anchor is active (with :target
).
Might help recalling the current URL targets an anchor, which I often forget about :D
Edit: also moved the #
to a pseudo-element to follow @coliff 's recommendation.
TODO:
::after
?:focus
if possibleIdea taken from gohugoio/gohugoioTheme#146
Pros:
Cons:
Preview: https://deploy-preview-32953--twbs-bootstrap.netlify.app/docs/5.1/getting-started/introduction/