Heading self-links: more compact, customizable, and reusable

[chalin]

• Fixes Use Hugo render hook instead of AnchorJS #1460
  • Fixes Header self-link: improve style, ux, customizability, and reusability #1813
• Relative to the previous heading anchor link:
  • Drops the onmouse* attributes, replacing them with CSS of equivalent functionality
  • Drops the SVG, replacing it with a CSS defined simple character: #. This makes the headings much more compact.
• Defines the heading anchor link styling through a new class .td-heading-self-link
  • The link is always visible on mobile and touch devices
  • Otherwise the link is invisible until the user hovers over the heading
  • Projects can customize the appearance of the heading link to their liking, changing the symbol, etc.
• As mentioned in the CHANGELOG, projects must now explicitly enable the feature.

Preview of user-guide addition (and the new heading-self-link implementation):

• https://deploy-preview-1831--docsydocs.netlify.app/docs/adding-content/navigation/#heading-self-links

Screenshots (narrow display)

Before1	After

Footnotes

1. I forced the display of the anchor symbol so you can see it in the "before" image. ↩

[chalin]

Ok, I've reimplemented the feature to be opt in. PTAL @LisaFC @deining @fekete-robert et al.

[chalin]

Thanks for the review and approval @fekete-robert.
@LisaFC approve this PR in today's PSC meeting.