Runtime scrollToHash handlers incorrectly capture hash links off root pages (`/` -> `/checklist/1/#hash`) and subpages (`/checklist/` -> `/checklist/1/#hash`

thegetty / quire

A multi-package repository for the Quire multiformat publishing framework

https://quire.getty.edu/

BSD 3-Clause "New" or "Revised" License

89 stars 10 forks source link

Runtime scrollToHash handlers incorrectly capture hash links off root pages (`/` -> `/checklist/1/#hash`) and subpages (`/checklist/` -> `/checklist/1/#hash` #884

Open cbutcosk opened 8 months ago

cbutcosk commented 8 months ago

Before proceeding, make sure there isn’t an existing issue for this bug.

[X] I have searched the existing issues and determined this is a new bug.

Expected Behavior

We added a link from the cover page (url: /) to a hash anchor in an inner page, expecting that when users clicked the link they would be taken to that inner page and scroll to that section (url: /checklist/1/#cool-element).

Actual Behavior

Nothing happens, the user stays on the link.

Steps to Reproduce

Put an unadorned anchor link (ie, no q-modal_link class) anywhere in a quire document or template code.

Version Numbers

quire-cli 1.0.0-rc.11 quire-11ty 1.0.0-rc.16 starter https://github.com/thegetty/quire-starter-default@2.6.0 [System] quire-cli 1.0.0-rc.11 node v18.17.0 npm 6.14.18 os Darwin 22.6.0

Web Browser

Safari 17

Relevant Terminal/Shell Output

No response

Supporting Information

No response

Erin-Cecele commented 8 months ago

Hi @cbutcosk, does this sound similar to an issue I documented and resolved for one of our Getty Quire publications: https://github.com/thegetty/inventories-and-surveys/issues/12? I think this solution is tied specifically to headers, but maybe it provides some helpful insight. If not, I will bring this to the rest of the team for discussion.

Erin-Cecele commented 8 months ago

Hi @cbutcosk, Upon further review, I realize this is actually a Javascript issue. We often create links to other pages and haven't encountered this issue before. I will test and try to get to the bottom of what's going on.

Erin-Cecele commented 7 months ago

Per @geealbers request, @jenpark-getty can you please test this issue following these steps:

Create a new starter project
In essay.md identify an anchor link you want to use on the lower half of the page (for example [Fig. 4](#fig-4)).
Create a link to that figure on the index.md page and intro.md page: [Fig. 4](/essay/#fig-4)
Preview the project, click the link on both the cover and the intro and confirm whether it takes you to the figure (i.e. figure 4)

Please try it on a few different browsers and report back. Thank you!

geealbers commented 7 months ago

@Erin-Cecele, just so you know, @jenpark-getty and I talked about this a bit and I asked her to also test links to and from every possible combination to make sure we had our bases covered:

home page to a top-level page and a sub-directory page
top-level page to the home page and sub-directory page
sub-directory page to the home page and a top-level page

jenpark-getty commented 5 months ago

Home (index.md) -> top-level (intro.md, essay.md) ❌
Home to sub-directory (catalogue/1) ❌
Top-level (intro.md, catalogue) to home ✅
Top-level (intro.md) to sub-directory (catalogue/2) ✅
Top level (catalogue.md) to sub-directory ❌
Sub-directory (catalogue/1) to home ✅
Sub-directory (catalogue/1) to top-level (catalogue) ✅

Interestingly, opening the ❌ links in a new tab does make it work.

Erin-Cecele commented 5 months ago

Thank you @jenpark-getty