canonical / canonical/vanilla-framework
Status labels in docs headings break section links
- Dominant language
- HTML
- Stars
- 983
- Forks
- 216
- Avg merge
- 3d 13h
- Merged PRs (30d)
- 3
Description
**Describe the bug**
Our new system for adding status labels in docs pages causes links to docs sections to break. It seems like the status label's text is included in the search for a matching page section, causing navigation to those sections to break.
Consider this heading:
```md
### Dense help text {{ status('updated') }}
```
This should allow you to navigate to that heading with `#dense-help-text`. However, you can only navigate to the requested heading by removing the status label.
**To Reproduce**
Steps to reproduce the behavior:
1. Checkout the repo
2. Find any docs heading that has a {{ status() }} label.
3. Attempt to navigate to it directly by appending the url encoding of the heading to your URL. I.E [colour-coding](https://vanillaframework.io/docs/patterns/badge#colour-coding) for a "Colour coding" section.
4. See that the requested heading is not scrolled to on page load. You should also see an error in console:
```
Uncaught TypeError: title is null
fixScroll http://0.0.0.0:8101/static/js/example.js?v=0134365:485
resizeInterval http://0.0.0.0:8101/static/js/example.js?v=0134365:369
setInterval handler*renderIframe http://0.0.0.0:8101/static/js/example.js?v=0134365:365
renderExample http://0.0.0.0:8101/static/js/example.js?v=0134365:291
async* http://0.0.0.0:8101/static/js/example.js?v=0134365:81
http://0.0.0.0:8101/static/js/example.js?v=0134365:80
EventListener.handleEvent* http://0.0.0.0:8101/static/js/example.js?v=0134365:77
http://0.0.0.0:8101/static/js/example.js?v=0134365:512
example.js:485:7
```
5. Remove the status label from the markdown title. Retry navigating to the section.
6. See that the page scrolls to the requested section on load.
**Expected behavior**
Navigating to a documentation section by using a section name in a hash causes the browser to scroll to that section on load, regardless of status label.
Contributor guide
Research direction
Start with static/js/example.js, especially fixScroll around line 485, and reproduce the broken hash navigation using a documentation heading containing {{ status('updated') }}. Compare navigation with and without the status label; done means the browser scrolls to the requested section and the console error no longer occurs.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- html, javascript
- Domain
- documentation, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100