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

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

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

Thanks @orballo!

@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?

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?

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

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

1 Like

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

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:

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.

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.

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

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.

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