Add support for hash links in `@frontity/tiny-router`

šŸ—£ Feature Discussions Awaiting Development
#1

Description

Add support for hash links in @frontity/tiny-router.

Examples

When we do actions.router.set('#some-div') the site should scroll to the div with that id.

Possible solution

fd-hash-links
fd-hash-links2715Ɨ4401 465 KB

Hash being removed from the url
#2

I already started working on this. As soon as I have the implementation finished Iā€™ll open a PR.

#3

Thanks @orballo!

#4

@luisherranz I have this on pause currently as the client that needed these changes told me they might not be necessary anymore, so Iā€™m on hold.

If I remember right, I did some progress and finished the part for state.source.get() and actions.source.fetch(). Do you want me to open a PR draft with that code in case somebody else wants to pick it up from there in case I cannot continue with it?

#5

Oh, yes please :slightly_smiling_face: Open a PR and link it here.

@SantosGuillamot I guess we can move this back to ā€œawaiting developmentā€, right?

#6

Yes, it makes sense. I have just changed it.

#7

Here is the PR draft: https://github.com/frontity/frontity/pull/660

1 Like
#8

@santosguillamot, maybe it makes to add this one to the roadmap for this Q?

#9

Yes, I think it makes sense. Actually I was thinking if we should consider this a feature or a bug :grinning_face_with_smiling_eyes:

#10

In case it affects somehow: I was taking a look at our blog, where we are using the twentytwenty-theme with the Link component, and the hash links seem to work in CSR but they donā€™t in SSR. You can see an example at our post about Gutenberg and Frontity.

#11

Btw, what I meant is that if I go directly (SSR) to a link with a hash like this one:

https://frontity.org/blog/connecting-gutenberg-and-frontity/#how-did-we-implement-it

I expect to arrive directly to the How did we implement it? section of the post but it loads at the top of the page.

If after loading the post I click on the link #how-did-we-implement-it (CSR), that is included in the index, it scrolls until that section.

#12

Oh I see. I was asking just because the #hash part of any link does not hit the server so expecting SSR based on the hash part should not be expected.

Specifically speaking about this :smiley: Iā€™ve tried it in incognito and it works for me ā€“ navigates to the hash section. But I think this is about the internal links to arrive to the same page, load the data, and then ā€˜moveā€™ the focus to the hashed value.

1 Like
#13

Yep, I think thatā€™s exactly the case we were trying to fix here.

  • :white_check_mark: Hash in SSR links work.
  • :white_check_mark: Hash in CSR links for the same page work.
  • :x: Hash in CSR links for a different page donā€™t work.

Iā€™ve made a video because I think itā€™s not trivial to understand: https://www.loom.com/share/4dd6a62c00334e21b96632c9941fc7ec

EDIT: Also relative links donā€™t work. That is probably more serious because it is more common. If you do:

actions.router.set("#why-gutenberg-and-frontity")

You will end up on https://frontity.org/#why-gutenberg-and-frontity, not on https://frontity.org/blog/connecting-gutenberg-and-frontity/#why-gutenberg-and-frontity.

#14

Ooh okay, I get it know. Thanks for explaining it guys :slightly_smiling_face: