Announcement Banner Fixes

gatsby-node.js

@@ -11,7 +11,10 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
 
   const result = await graphql(`
     {
-      allMdx(limit: 1000) {
+      allMdx(
+        limit: 1000
+        filter: { fileAbsolutePath: { regex: "/src/markdown-pages/" } }
+      ) {
         edges {
           node {
             fileAbsolutePath

package.json

@@ -7,7 +7,7 @@
     "@emotion/styled": "^10.0.27",
     "@mdx-js/mdx": "^1.6.16",
     "@mdx-js/react": "^1.6.16",
-    "@newrelic/gatsby-theme-newrelic": "^1.9.1",
+    "@newrelic/gatsby-theme-newrelic": "^1.9.2",
     "@splitsoftware/splitio-react": "^1.2.0",
     "classnames": "^2.2.6",
     "date-fns": "^2.15.0",

src/hooks/useResizeObserver.js

@@ -0,0 +1,23 @@
+import { useLayoutEffect, useState, useRef } from 'react';
+
+const useResizeObserver = () => {
+  const ref = useRef(null);
+  const [height, setHeight] = useState(0);
+
+  // ResizeObserver is not available at build time
+  const ResizeObserver = global.ResizeObserver || class ResizeObserver {};
+
+  const resizeObserver = new ResizeObserver((entries) => {
+    entries.forEach((entry) => {
+      setHeight(entry.contentBoxSize.blockSize);
+    });
+  });
+
+  useLayoutEffect(() => {
+    resizeObserver.observe(ref.current);
+  }, [resizeObserver]);
+
+  return [ref, height];
+};
+
+export default useResizeObserver;

src/layouts/MainLayout.js

@@ -12,6 +12,7 @@ import Sidebar from '../components/Sidebar';
 import CookieApprovalDialog from '../components/CookieApprovalDialog';
 import '../components/styles.scss';
 import usePageContext from '../hooks/usePageContext';
+import useResizeObserver from '../hooks/useResizeObserver';
 import { useLocation } from '@reach/router';
 
 const gaTrackingId = 'UA-3047412-33';
@@ -36,6 +37,7 @@ const MainLayout = ({ children }) => {
 
   const location = useLocation();
   const { fileRelativePath } = usePageContext();
+  const [headerRef, headerHeight] = useResizeObserver();
   const [cookieConsent, setCookieConsent] = useState(false);
   const [isMobileNavOpen, setIsMobileNavOpen] = useState(false);
   const isComponentDoc = fileRelativePath.includes(
@@ -57,7 +59,7 @@ const MainLayout = ({ children }) => {
   return (
     <div
       css={css`
-        --global-header-height: 30px;
+        --global-header-height: ${headerHeight}px;
         --sidebar-width: 300px;
 
         min-height: 100vh;
@@ -79,7 +81,16 @@ const MainLayout = ({ children }) => {
           </script>
         ) : null}
       </Helmet>
-      <GlobalHeader editUrl={editUrl} />
+      <div
+        ref={headerRef}
+        css={css`
+          position: sticky;
+          z-index: 99;
+          top: 0;
+        `}
+      >
+        <GlobalHeader editUrl={editUrl} />
+      </div>
       <MobileHeader
         css={css`
           @media (min-width: 761px) {