Subheading Jump-To Links

subheading-links.css

a.jump-to-anchor {
    opacity: 0.5;
    position: absolute;
    margin-left: -24px;
    display: none;
}

.ArticlePage-articleBody > h2:hover .jump-to-anchor {
    display: block;
}

.feather-icon {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

subheading-links.js

const linkIcon = `
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" class="feather-icon">
  <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
  <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
</svg>`

const slug = string => string
  .replace(/\W+/g, '_') // replace non-word characters with underscores
  .replace(/(^_|_$)/g, '') // trim leading/trailing underscores
  
const subheadings = document.querySelectorAll('.ArticlePage-articleBody > h2')

for (const heading of subheadings) {
  const headingSlug = slug(heading.textContent)

  heading.id = headingSlug
  heading.insertAdjacentHTML('afterbegin', `
    <a href="#${headingSlug}" class="jump-to-anchor">${linkIcon}</a>`
  )
}