feat: generate dynamic docs header links

css/style.css

@@ -1121,6 +1121,27 @@ h2 a {
   font-size: 16px;
 }
 
+/* h2 -> h3 header links */
+.heading-link::after {
+  content: '#';
+}
+
+.heading-link {
+  padding-inline: 0.3em;
+  font-size: inherit;
+  text-decoration: none;
+  color: inherit;
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
+}
+
+h2:hover .heading-link,
+h3:hover .heading-link,
+:target .heading-link,
+.heading-link:is(:hover, :focus, :focus-visible) {
+  opacity: 1;
+}
+
 /* search-bar desktop re-sizing */
 @media all and (min-width: 950px) {
   .algolia-autocomplete {
@@ -1762,4 +1783,3 @@ blockquote {
   }
 }
 
-

js/copycode.js

@@ -1,4 +1,5 @@
 const codeBlocks = document.querySelectorAll("pre:has(code)");
+const headers = document.querySelectorAll('main :is(h2,h3)[id]');
 
 codeBlocks.forEach((block) => {
   // Only add button if browser supports Clipboard API
@@ -13,6 +14,16 @@ codeBlocks.forEach((block) => {
   });
 });
 
+// add heading links
+for (const heading of headers) {
+    if (heading.querySelector('.heading-link')) continue;
+    const linkIcon = document.createElement('a');
+    linkIcon.setAttribute('href', `#${heading.id}`);
+    linkIcon.classList.add('heading-link');
+    linkIcon.setAttribute("aria-label", `to section ${heading.textContent.trim()}`);
+    heading.appendChild(linkIcon);
+}
+
 function createCopyButton() {
   const button = document.createElement("button");
   setButtonAttributes(button, {
@@ -57,3 +68,4 @@ function updateButtonState(button, statusClass, ariaLabel) {
 
   button.dataset.timerId = timer;
 }
+