Open infogulch opened 2 years ago
So it just needed await tick();
and element.scrollIntoView();
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).
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.