Markdown generates anchor links in headers

[infogulch]

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]

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

[ekzhang]

Looks great, thanks for fixing this! Anchor links are super useful. I think it's a little bit unfortunate that there may be two links to the same ID that conflict if headings in different cells have the same text, but that seems very minor.

Only have a couple minor comments with respect to CSS.

[ekzhang]

What is filter: invert(0.1)?

[infogulch]

This is a generic way to 'lighten' the icon on hover without duplicating or parameterizing the svg or hard-coding colors. I changed it to 20% to make it a bit more noticeable. I'm mostly just having fun with css here, we can tune or remove it if you like. 😄

[infogulch]

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).