major refactoring of preact components 🧩 (#689)

assets/js/src/anchor.js

@@ -1,7 +1,7 @@
-// Heavily inspired by AnchorJS:
-// https://github.com/bryanbraun/anchorjs
+import { h, render } from "preact";
 
-import isTouchDevice from "is-touch-device";
+// react components:
+import Anchor from "./components/Anchor.js";
 
 // loop through each h2, h3, h4 in this page's content area
 // prettier-ignore
@@ -9,24 +9,15 @@ document.querySelectorAll([
   "div#content h2",
   "div#content h3",
   "div#content h4",
-]).forEach((h) => {
+]).forEach((heading) => {
   // don't add to elements without a pre-existing ID (e.g. `<h2 id="...">`)
-  if (!h.hasAttribute("id")) {
+  if (!heading.hasAttribute("id")) {
     return;
   }
 
-  // build the anchor link (the "#" icon is added via CSS)
-  const anchor = document.createElement("a");
-  anchor.className = "anchorjs-link";
-  anchor.href = `#${h.getAttribute("id")}`;
-  anchor.ariaLabel = "Anchor";
+  // TODO: little hacky hack to make the anchor appear AFTER the existing h tag
+  const linkTarget = document.createElement("a");
+  heading.appendChild(linkTarget);
 
-  // if this is a touchscreen, always show the "#" icon instead waiting for hover
-  // NOTE: this is notoriously unreliable; see https://github.com/Modernizr/Modernizr/pull/2432
-  if (isTouchDevice()) {
-    anchor.style.opacity = "1";
-  }
-
-  // add anchor link to the right of the heading
-  h.appendChild(anchor);
+  render(<Anchor id={heading.getAttribute("id")} title={heading.textContent.trim()} />, heading, linkTarget);
 });