quire icon indicating copy to clipboard operation
quire copied to clipboard

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

Open cbutcosk opened this issue 2 years ago • 6 comments

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/[email protected] [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

cbutcosk avatar Nov 30 '23 16:11 cbutcosk

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 avatar Nov 30 '23 18:11 Erin-Cecele

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 avatar Dec 06 '23 00:12 Erin-Cecele

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!

Erin-Cecele avatar Dec 12 '23 20:12 Erin-Cecele

@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

geealbers avatar Dec 15 '23 19:12 geealbers

  • 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.

jenpark-getty avatar Feb 19 '24 21:02 jenpark-getty

Thank you @jenpark-getty

Erin-Cecele avatar Feb 23 '24 21:02 Erin-Cecele