Header IDs, smooth scrolling, smaller code font

gatsby-browser.js

@@ -12,4 +12,26 @@ if (typeof window !== "undefined") {
 
 exports.wrapPageElement = ({ element, props }) => {
     return <Layout {...props}>{element}</Layout>
-};
+};
+
+exports.onRouteUpdate = ({location}) => {
+  anchorScroll(location);
+  return true;
+};
+exports.shouldUpdateScroll = ({
+  routerProps: { location },
+}) => {
+  anchorScroll(location);
+  return true;
+}
+
+const anchorScroll = location => {
+  // Check for location so build does not fail
+  if (location && location.hash) {
+    setTimeout(() => {
+      const item = document.querySelector(`${location.hash}`).offsetTop;
+      const mainNavHeight = document.querySelector(`header`).offsetHeight;
+      window.scrollTo({top: item - mainNavHeight, left: 0, behavior: 'smooth'});
+    }, 0);
+  }
+}

src/theme/assets/scss/ss-docs.scss

@@ -205,6 +205,10 @@ h1, h2, h3 {
     }
 }
 
+code[class*="language-"], pre[class*="language-"] {
+    font-size: 0.8rem;
+}
+
 :not(pre) > code[class*="language-"] {
     background: #f5f6f8;
     color: #5d6778;

src/utils/rewriteHeader.ts

@@ -1,6 +1,16 @@
 import { createElement, ReactElement } from "react";
 import { DomElement } from 'html-react-parser';
 
+const generateID = (title: string): string => {
+    return title
+        .replace('&', '-and-')
+        .replace('&', '-and-')
+        .replace(/[^A-Za-z0-9]/g, '-')
+        .replace(/-+/g, '-')
+        .replace(/^-/g, '')
+        .replace(/-$/g, '')
+        .toLowerCase();
+}
 /**
  * If a header has a {#explicit-id}, add it as an attribute
  * @param domNode 
@@ -13,18 +23,26 @@ const rewriteHeaders = (domNode: DomElement): ReactElement | false => {
     if (firstChild && firstChild.type === 'text') {
         const { data } = firstChild;
         const matches = data.match(/^(.*?){#([A-Za-z0-9_-]+)\}$/);
+        let header;
+        let id;
         if (matches) {
-            const header = matches[1]
+            header = matches[1];
-            const id = matches[2];
+            id = matches[2];
-            return createElement(
+        } else {
-                domNode.name,
+            header = data;
-                { id },
+            id = generateID(data);
-                header
-            );
         }
+
+        return createElement(
+            domNode.name,
+            { id },
+            header
+        );
+
     }
 
     return false;
 }
 
+
 export default rewriteHeaders;