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

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:

15

Hi guys, is there an update on this or has the development now stopped since the Automattic acquisition?

Thanks

2 Likes
16

Yeah seems like the project has been completely abandoned. Maybe we(the community) should get together and create a fork before Automatic completely tries to kill Frontity. I think there are quite a few people who are still here and quite passionate about pushing this project forward.

3 Likes
17

Maybe we(the community) should get together and create a fork

Hey Nikolay, thatā€™s awesome!

If you (or a group of people) are willing to take over the development and maintenance of the project, we can give you access to whatever you need (GitHub, Community, Docsā€¦). Do you want to set up a call to talk about it? :slightly_smiling_face: