fix: replace gatsby-remark-auto-headers

gatsby-config.js

@@ -31,7 +31,7 @@ module.exports = {
     {
       resolve: `gatsby-transformer-remark`,
       options: {
-        plugins: [`gatsby-remark-auto-headers`],
+        plugins: [`gatsby-remark-auto-headers-improved`],
       },
     },
     {

plugins/gatsby-remark-auto-headers-improved/gatsby-browser.js

@@ -0,0 +1,43 @@
+var attr = "id"
+const getTargetOffset = (hash) => {
+  const id = window.decodeURI(hash.replace(`#`, ``))
+  if (id !== ``) {
+    const element = document.querySelector("[" + attr + "=" + id + "]")
+    if (element) {
+      return getElementTop(element)
+    }
+  }
+  return null
+}
+
+function getElementTop(el) {
+  let actualTop = el.offsetTop
+
+  let current = el.offsetParent
+
+  while (current !== null) {
+    actualTop += current.offsetTop
+
+    current = current.offsetParent
+  }
+
+  return actualTop
+}
+
+exports.onInitialClientRender = (_, pluginOptions) => {
+  if (pluginOptions.offsetY) {
+    attr = pluginOptions.attr
+  }
+
+  requestAnimationFrame(() => {
+    const offset = getTargetOffset(window.location.hash)
+    if (offset !== null) {
+      window.scrollTo(0, offset)
+    }
+  })
+}
+
+exports.shouldUpdateScroll = ({ routerProps: { location } }) => {
+  const offset = getTargetOffset(location.hash)
+  return offset !== null ? [0, offset] : true
+}

plugins/gatsby-remark-auto-headers-improved/gatsby-ssr.js

@@ -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 }}
+    />,
+  ])
+}

plugins/gatsby-remark-auto-headers-improved/index.js

@@ -0,0 +1,69 @@
+const visit = require(`unist-util-visit`)
+const slugs = require(`github-slugger`)()
+
+function toString(node) {
+  return (
+    valueOf(node) ||
+    (node.children && node.children.map(toString).join("")) ||
+    ""
+  )
+}
+function valueOf(node) {
+  return (
+    (node && node.value ? node.value : node.alt ? node.alt : node.title) || ""
+  )
+}
+
+function patch(context, key, value) {
+  if (!context[key]) {
+    context[key] = value
+  }
+  return context[key]
+}
+
+function stripLeadingNumber(value) {
+  return value.replace(/^(\d*\-)(.*)/, "$2")
+}
+
+const svgIcon = `<svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>`
+
+module.exports = (
+  { markdownAST },
+  { icon = svgIcon, attr = "id", className = "anchor", maintainCase = false }
+) => {
+  slugs.reset()
+  visit(markdownAST, `heading`, (node) => {
+    const id = slugs.slug(toString(node), maintainCase)
+    const strippedId = stripLeadingNumber(id)
+    const data = patch(node, `data`, {})
+
+    patch(data, attr, strippedId)
+    patch(data, `htmlAttributes`, {})
+    patch(data, `hProperties`, {})
+    patch(data.htmlAttributes, attr, strippedId)
+    patch(data.hProperties, attr, strippedId)
+
+    if (icon !== false) {
+      node.children.unshift({
+        type: `link`,
+        url: `#${strippedId}`,
+        title: null,
+        data: {
+          hProperties: {
+            "aria-hidden": true,
+            class: className,
+          },
+          hChildren: [
+            {
+              type: `raw`,
+              // The Octicon link icon is the default. But users can set their own icon via the "icon" option.
+              value: icon,
+            },
+          ],
+        },
+      })
+    }
+  })
+
+  return markdownAST
+}

plugins/gatsby-remark-auto-headers-improved/package-lock.json

@@ -0,0 +1,50 @@
+{
+  "name": "gatsby-remark-auto-headers-improved",
+  "version": "0.1.0",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "@types/unist": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.3.tgz",
+      "integrity": "sha512-FvUupuM3rlRsRtCN+fDudtmytGO6iHJuuRKS1Ss0pG5z8oX0diNEw94UEL7hgDbpN94rgaK5R7sWm6RrSkZuAQ=="
+    },
+    "emoji-regex": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-6.1.1.tgz",
+      "integrity": "sha1-xs0OwbBkLio8Z6ETfvxeeW2k+I4="
+    },
+    "github-slugger": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/github-slugger/-/github-slugger-1.3.0.tgz",
+      "integrity": "sha512-gwJScWVNhFYSRDvURk/8yhcFBee6aFjye2a7Lhb2bUyRulpIoek9p0I9Kt7PT67d/nUlZbFu8L9RLiA0woQN8Q==",
+      "requires": {
+        "emoji-regex": ">=6.0.0 <=6.1.1"
+      }
+    },
+    "unist-util-is": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-4.0.2.tgz",
+      "integrity": "sha512-Ofx8uf6haexJwI1gxWMGg6I/dLnF2yE+KibhD3/diOqY2TinLcqHXCV6OI5gFVn3xQqDH+u0M625pfKwIwgBKQ=="
+    },
+    "unist-util-visit": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-2.0.2.tgz",
+      "integrity": "sha512-HoHNhGnKj6y+Sq+7ASo2zpVdfdRifhTgX2KTU3B/sO/TTlZchp7E3S4vjRzDJ7L60KmrCPsQkVK3lEF3cz36XQ==",
+      "requires": {
+        "@types/unist": "^2.0.0",
+        "unist-util-is": "^4.0.0",
+        "unist-util-visit-parents": "^3.0.0"
+      }
+    },
+    "unist-util-visit-parents": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-3.0.2.tgz",
+      "integrity": "sha512-yJEfuZtzFpQmg1OSCyS9M5NJRrln/9FbYosH3iW0MG402QbdbaB8ZESwUv9RO6nRfLAKvWcMxCwdLWOov36x/g==",
+      "requires": {
+        "@types/unist": "^2.0.0",
+        "unist-util-is": "^4.0.0"
+      }
+    }
+  }
+}

plugins/gatsby-remark-auto-headers-improved/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "gatsby-remark-auto-headers-improved",
+  "version": "0.1.0",
+  "description": "Gatsby remark plugin to add headers to markdown, improved from gatsby-remark-auto-headers",
+  "main": "index.js",
+  "scripts": {},
+  "keywords": [],
+  "author": "Jean-Philippe Sirois <[email protected]>",
+  "license": "MIT",
+  "dependencies": {
+    "github-slugger": "^1.3.0",
+    "unist-util-visit": "^2.0.2"
+  }
+}