NEW Add anchor links to headings

src/theme/assets/scss/theme/_docs.scss

@@ -269,6 +269,28 @@
 		}
 		
 	}
+
+	.anchor {
+		color: $theme-text-color-light;
+		margin-left: 1rem;
+		opacity: 0;
+		transition: opacity .2s;
+
+		/* Force anchor link to offset header */
+		margin-top: -90px;
+		padding-top: 90px;
+
+		&:focus {
+			opacity: 1;
+
+			/* Outline behaves incorrectly due to offset, use underline instead */
+			outline: none;
+			text-decoration: underline;
+		}
+	}
+	:hover > .anchor {
+		opacity: 1;
+	}
 	
 	.section-heading {
 		font-size: 1.875rem;

src/utils/rewriteHeader.ts

@@ -33,10 +33,22 @@ const rewriteHeaders = (domNode: DomElement): ReactElement | false => {
             id = generateID(data);
         }
 
+        const anchor = createElement(
+          'a',
+          {
+              "aria-hidden": true,
+              className: 'anchor',
+              href: `#${id}`,
+              id,
+              key: id,
+          },
+          '#'
+        );
+
         return createElement(
             domNode.name,
-            { id },
-            header
+            {},
+            [ header, anchor ]
         );
 
     }