feat: add icon for headers to make it easy to link to them

newrelic · Jan 15, 2021 · a254146 · a254146
1 parent 29c47cf
commit a254146
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 7 deletions.
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -148,8 +148,8 @@ module.exports = {
           {
             resolve: `gatsby-remark-autolink-headers`,
             options: {
-              enableCustomId: true,
-              icon: false,
+              icon:
+                '<svg xmlns="http://www.w3.org/2000/svg" focusable="false" width="1rem" height="1rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3"></path><line x1="8" y1="12" x2="16" y2="12"></line></svg>',
             },
           },
         ],

diff --git a/gatsby/wrap-page-element.js b/gatsby/wrap-page-element.js
@@ -2,6 +2,7 @@
 import React from 'react';
 import { BreadcrumbContext } from '../src/components/BreadcrumbContext';
 import { PageContext } from '../src/components/PageContext';
+import { Global, css } from '@emotion/core';
 
 import createBreadcrumbs from '../src/utils/create-breadcrumbs';
 import pages from '../src/data/sidenav.json';
@@ -10,11 +11,43 @@ const wrapPageElement = ({ element, props }) => {
   const crumbs = createBreadcrumbs(props.path ?? '/404', pages);
 
   return (
-    <PageContext.Provider value={props.pageContext}>
-      <BreadcrumbContext.Provider value={crumbs}>
-        {element}
-      </BreadcrumbContext.Provider>
-    </PageContext.Provider>
+    <>
+      <Global
+        styles={css`
+          // add additional styles needed for gatsby-remark-autolink-headers
+          h1,
+          h2,
+          h3,
+          h4,
+          h5,
+          h6 {
+            scroll-margin-top: calc(var(--global-header-height) + 2rem);
+
+            .anchor.before {
+              position: absolute;
+              top: 0;
+              left: 0;
+              transform: translateX(-100%);
+              padding-right: 4px;
+            }
+            .anchor svg {
+              opacity: 0;
+              transition: opacity 0.2s ease-out;
+            }
+
+            &:hover .anchor svg,
+            .anchor:focus svg {
+              opacity: 1;
+            }
+          }
+        `}
+      />
+      <PageContext.Provider value={props.pageContext}>
+        <BreadcrumbContext.Provider value={crumbs}>
+          {element}
+        </BreadcrumbContext.Provider>
+      </PageContext.Provider>
+    </>
   );
 };