Swap to use IdAttributePlugin instead of markdown-it-anchor

public/css/index.css

@@ -257,25 +257,25 @@ header {
 }
 
 /* Direct Links / Markdown Headers */
-.header-anchor {
+.heading-anchor {
 	text-decoration: none;
 	font-style: normal;
 	font-size: 1em;
 	margin-left: .1em;
 }
-a[href].header-anchor,
-a[href].header-anchor:visited {
+a[href].heading-anchor,
+a[href].heading-anchor:visited {
 	color: transparent;
 }
-a[href].header-anchor:focus,
-a[href].header-anchor:hover {
+a[href].heading-anchor:focus,
+a[href].heading-anchor:hover {
 	text-decoration: underline;
 }
-a[href].header-anchor:focus,
-:hover > a[href].header-anchor {
+a[href].heading-anchor:focus,
+:hover > a[href].heading-anchor {
 	color: #aaa;
 }
 
-h2 + .header-anchor {
+h2 + .heading-anchor {
 	font-size: 1.5em;
 }

public/js/heading-anchors.js

@@ -0,0 +1,37 @@
+// Thank you to https://github.com/daviddarnes/heading-anchors
+
+class HeadingAnchors extends HTMLElement {
+	static register(tagName) {
+		if ("customElements" in window) {
+			customElements.define(tagName || "heading-anchors", HeadingAnchors);
+		}
+	}
+
+	connectedCallback() {
+		this.headings.forEach((heading) => {
+			if(!heading.querySelector("a.direct-link") || heading.hasAttribute("data-heading-anchors-optout")) {
+				heading.append(this.anchor(heading));
+			}
+		});
+	}
+
+	anchor(heading) {
+		// TODO this would be good use case for shadow dom
+		let anchor = document.createElement("a");
+		anchor.setAttribute("data-pagefind-ignore", "");
+		anchor.href = `#${heading.id}`;
+		anchor.classList.add("heading-anchor");
+		anchor.innerHTML = `<span class="visually-hidden">Jump to heading</span><span aria-hidden="true">#</span>`;
+		return anchor;
+	}
+
+	get headings() {
+		return this.querySelectorAll(this.selector.split(",").map(entry => `${entry.trim()}[id]`));
+	}
+
+	get selector() {
+		return this.getAttribute("selector") || "h1,h2,h3,h4"
+	}
+}
+
+HeadingAnchors.register();