Forem Creators and Builders 🌱

Sean G. Wright
Sean G. Wright

Posted on

Feature Request: Link Headers Icon

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.

...
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
s_aitchison profile image
Suzanne Aitchison

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 ✨

Collapse
 
seangwright profile image
Sean G. Wright

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?

Collapse
 
michaeltharrington profile image
Michael Tharrington

Oh heck yeah! I like this feature idea a lot. 🙂