-
Notifications
You must be signed in to change notification settings - Fork 163
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
Generate id from heading #4434
Generate id from heading #4434
Conversation
Demo starting at https://vanilla-framework-4434.demos.haus |
@@ -97,7 +103,7 @@ | |||
var anchor = document.createElement('a'); | |||
anchor.classList.add('p-side-navigation__link'); | |||
|
|||
// Add all H3s with IDs to the table of contents list | |||
// Add all H2s with IDs to the table of contents list |
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.
Good catch, thanks for reading the comments ;)
templates/static/js/scripts.js
Outdated
@@ -87,6 +87,12 @@ | |||
|
|||
// Add table of contents to side navigation on documentation pages | |||
(function () { | |||
// Generate id from H2s content when it does not exist | |||
document.querySelectorAll('main h2:not([id])').forEach(function (heading) { | |||
var id = heading.textContent.toLowerCase().replaceAll(/\s+/g, '-'); |
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.
This may fail with some special characters in headers.
Maybe worth adding some more rules in here. That's what I found in one markdown implementation:
https://github.com/markedjs/marked/blob/30e90e5175700890e6feb1836c57b9404c854466/src/Slugger.js#L19
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.
LGTM, with a little suggestion to make it more bulletproof
Done
h2
s without an id and generate one from the heading.(I think in HTML5 any character is allowed for ids except for whitespace, so I kept it simple. Just lower cased it for consistency)
QA
Screenshots