It would be nice if all headers had an icon that could be clicked/tapped to copy a link to that location in a post.
All headers are currently linked with an <a name="header-name"></a>
, but it is not visible, so while an author can create deep links to posts (even if the ergonomics of inspecting the DOM with dev tools to get the anchor name is poor), it's not easy for readers to generate these URLs to share with others.
I really like the way Microsoft's Documentation does this (hover your mouse next to the header on desktop or tap the title on mobile to get the link icon to show up).
It makes it very easy to share direct links to specific locations on a page.
Since the anchors are already being generated on all pages, styles could be used to make them visible and clickable.
Currently, I have to add a second link to make the headers clickable:
## [A Great Section Header](#a-great-section-header)
Quo vitae earum ut corporis aliquid sint aut. Eum natus consequatur velit quam amet omnis. Tempore optio quod tenetur quia adipisci quia illo quos. Excepturi eligendi dignissimos consequatur eum iure. Vel vel sunt quia aliquid molestiae.
...
This generates the following HTML:
<h2>
<a name="a-great-section-header" href="#a-great-section-header">
</a>
<a href="#a-great-section-header">A Great Section Header</a>
</h2>
This means there are two identical anchors next to the same bit of text and feels like I'm working around the editor instead of with it.
Top comments (3)
This is really similar to what we do in the editor guide, and we likely have a lot of transferrable code/classes we could use ✨
I'm guessing if this was released, I might have to go back and delete my extra anchors that I've created... or would this be done during the markdown transformation?
Oh heck yeah! I like this feature idea a lot. 🙂