Scrolling docs should update url

[boygirl]

should capture nearest anchor tag

[paulathevalley]

Ok. I spoke with @tptee who has done this before, and the takeaway was that this will not be simple nor easy!

There are two options:

1. Use react-waypoint to fire an arbitrary event when the user scrolls into a specific position. The position will most likely differ between mobile and desktop. The downside is that the scroll position is not super accurate.
2. Create a custom component that measures the viewport, finds the first instance of the .Anchor class and updates the URL. This will require getBoundingClientRect();, which is not performant, so it will need to be throttled (react-waypoint does both of these things already).

On both options, the entry-base.js will need to be modified such that anchorate() is only triggered when clicking between routes. If the URL updates and anchorate() fires, then it could potentially scroll the page for you, which would be pretty annoying. I think our use of useScroll() does not need to be modified, but I’m not super sure.

I'll let @tptee correct me if I’m wrong, but option 2 is the preferable one since react-waypoint is doing all the things anyway, and it’d be better to pick out a class name rather than a random scroll position.

Also... how high priority is this?

[ianwsperber]

So this is tricky because the docs are just markdown that Ecology renders into HTML and sets within our React components. We can't just drop in <Waypoint/> components the way we could when we're building the page with React components exclusively.

But Ecology appears to use ReactDOM to render playgrounds in the compiled HTML. In principle we should be able to do the same thing to render waypoints. I'd suggest exploring this avenue of development. react-waypoint looks like a good library as long as we can figure out how to fit it into our use case.