canonical / canonical/vanilla-framework

Status labels in docs headings break section links

Open
#5,393 4 comments 0 reactions 0 assignees View on GitHub
Bug 🐛 P3 Triaged Triaged: v4
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.