fix: following whole sections instead of just headers

gatsby-config.js

@@ -66,6 +66,9 @@ const plugins = [
         {
           resolve: 'gatsby-remark-jargon',
           options: { jargon: require('./jargon-config.js') }
+        },
+        {
+          resolve: 'gatsby-remark-sectionize'
         }
       ],
       extensions: [".mdx", ".md"]

package.json

@@ -36,6 +36,7 @@
     "gatsby-remark-copy-linked-files": "2.3.3",
     "gatsby-remark-images": "3.3.8",
     "gatsby-remark-jargon": "2.6.0",
+    "gatsby-remark-sectionize": "1.0.0",
     "gatsby-source-filesystem": "2.3.8",
     "gatsby-source-local-git": "1.0.0",
     "gatsby-transformer-gitinfo": "1.1.0",

src/components/mdxComponents/index.js

@@ -10,22 +10,37 @@ import Jargon from "./jargon";
 import {blockquote} from "../../styles/base";
 import {useTheme} from "emotion-theming";
 
-const Header = (level, props) => {
+const idFromHeader = (props) => {
   let name = props.children;
   if (Array.isArray(name)) {
     name = props.children[0]
   }
-  name = name.replace(/\s+/g, '').toLowerCase();
-  return React.createElement("h" + level, { className: "heading" + level, id: name, ...props});
+  return name.replace(/\s+/g, '').toLowerCase();
+}
+const Header = (level, props) => {
+  let name = idFromHeader(props)
+  return React.createElement("h" + level, { className: "heading" + level, id: "h-" + name, ...props});
 };
 
+const Section = (props) => {
+  let header = '';
+  if (Array.isArray(props.children)) {
+    header = props.children[0].props
+  } else {
+    header = props.children.props
+  }
+  const name = idFromHeader(header)
+  return <section id={name} {...props} />
+}
+
 export default {
   h1: props => Header(1, props),
   h2: props => Header(2, props),
   h3: props => Header(3, props),
   h4: props => Header(4, props),
   h5: props => Header(5, props),
   h6: props => Header(6, props),
+  section: props => Section(props),
   blockquote: props => <blockquote css={blockquote(useTheme())} {...props} />,
   p: props => <p className='paragraph' {...props} />,
   pre: props => <pre className='pre' {...props} />,