ekzhang / percival

📝 Web-based, reactive Datalog notebooks for data analysis and visualization
https://percival.ink
MIT License
601 stars 25 forks source link

Markdown generates anchor links in headers #15

Open infogulch opened 2 years ago

infogulch commented 2 years ago

I think linkable headers are the best thing since sliced bread and wish people would use them more.

This PR adds rehypeSlug & rehypeAutolinkHeadings packages, part of the markdown parser library system used in the project, to make html headers generated from markdown include link anchors to the header. This is nice for linking to a particular section of a long document, like this: https://percival.ink/#embedding-code <- This PR intends to make links like that valid.

I made it so that it's only visible while hovering a header, and very clear that it's a clickable link with a bit of hover animation This is the "I wish people would use them more" part; maybe if I make the UX really good they'll be more likely to use it 😺. You can see a visual demo here: https://codepen.io/infogulch/pen/BaYBZxa?editors=1100 Visually I'm aiming for subtle but obvious, but the style could be tuned.

infogulch commented 2 years ago

So it just needed await tick(); and element.scrollIntoView();

infogulch commented 2 years ago

Nice callouts on the css, I adjusted it.

two links to the same ID that conflict

I agree it's unfortunate. But this will be very hard to fix automatically without tradeoffs. E.g. say we make the ids unique by adding a numbered suffix, then the user copies a link to the second header, then they change the first header so it's not conflicting anymore: now the link breaks. Also since these are separate instances of the markdown component we'd have to do global analysis of the markdown output and oh my god this is a giant can of worms for the size of this feature just make the user fix it 😆.

This way, it's easy enough for the user to see what the problem is, you get nicer ids, and it's a good writing practice to name your headers uniquely anyway (cope).