fix: replace gatsby-remark-auto-headers

2026-09-09 23:44:08 +02:00 · 2020-05-22 00:57:06 -04:00
parent 92c3fe086f
commit 82ac9f0bae
6 changed files with 262 additions and 1 deletions
@@ -0,0 +1,85 @@
+const React = require("react")
+
+const pluginDefaults = {
+  className: `anchor`,
+  icon: true,
+  offsetY: 0,
+  attr: "id",
+}
+
+exports.onRenderBody = ({ setHeadComponents }, pluginOptions) => {
+  const { className, icon, attr } = Object.assign(pluginDefaults, pluginOptions)
+  const styles = `
+    .${className} {
+      float: left;
+      padding-right: 4px;
+      margin-left: -20px;
+    }
+    h1 .${className} svg,
+    h2 .${className} svg,
+    h3 .${className} svg,
+    h4 .${className} svg,
+    h5 .${className} svg,
+    h6 .${className} svg {
+      visibility: hidden;
+    }
+    h1:hover .${className} svg,
+    h2:hover .${className} svg,
+    h3:hover .${className} svg,
+    h4:hover .${className} svg,
+    h5:hover .${className} svg,
+    h6:hover .${className} svg,
+    h1 .${className}:focus svg,
+    h2 .${className}:focus svg,
+    h3 .${className}:focus svg,
+    h4 .${className}:focus svg,
+    h5 .${className}:focus svg,
+    h6 .${className}:focus svg {
+      visibility: visible;
+    }
+  `
+
+  const script = `
+    function getElementTop(el) {
+      var actualTop = el.offsetTop
+
+      var current = el.offsetParent
+
+      while (current !== null) {
+        actualTop += current.offsetTop
+
+        current = current.offsetParent
+      }
+    
+      return actualTop
+    }
+
+    document.addEventListener("DOMContentLoaded", function(event) {
+      var hash = window.decodeURI(location.hash.replace('#', ''))
+      if (hash !== '') {
+        var element = document.querySelector('[${attr}=' + hash + ']')
+        if (element) {
+          var offset = getElementTop(element)
+          // Wait for the browser to finish rendering before scrolling.
+          setTimeout((function() {
+            window.scrollTo(0, offset)
+          }), 0)
+        }
+      }
+    })
+  `
+
+  const style = icon ? (
+    <style key={`gatsby-remark-autolink-headers-style`} type="text/css">
+      {styles}
+    </style>
+  ) : undefined
+
+  return setHeadComponents([
+    style,
+    <script
+      key={`gatsby-remark-autolink-headers-script`}
+      dangerouslySetInnerHTML={{ __html: script }}
+    />,
+  ])
+}