feat: use GlobalHeader from theme on 404 page

newrelic · Jul 22, 2020 · 1c1a581 · 1c1a581
1 parent 5b084cc
commit 1c1a581
Showing 1 changed file with 37 additions and 21 deletions.
diff --git a/src/pages/404.js b/src/pages/404.js
@@ -1,34 +1,50 @@
 import React from 'react';
 import cx from 'classnames';
-import { Link } from 'gatsby';
+import { Link, useStaticQuery, graphql } from 'gatsby';
 import SEO from '../components/Seo';
 import SkewedContainer from '../components/SkewedContainer';
-import GlobalHeader from '../components/GlobalHeader';
+import { GlobalHeader } from '@newrelic/gatsby-theme-newrelic';
 import Footer from '../components/Footer';
 import { PageContext } from '../components/PageContext';
 import { pageContext } from '../types';
 import styles from './404.module.scss';
 
-const NotFoundPage = ({ pageContext }) => (
-  <PageContext.Provider value={pageContext}>
-    <SEO title="404: Not found" />
-    <div className={styles.layout}>
-      <GlobalHeader />
-      <div className={styles.contentContainer}>
-        <SkewedContainer className={styles.content}>
-          <h1 className={styles.header}>404</h1>
-          <p>
-            The URL you entered may be broken, or the page has been removed.{' '}
-            <Link to="/">Go back to the home page</Link>.
-          </p>
-        </SkewedContainer>
-      </div>
-      <div className={styles.footerContainer}>
-        <Footer className={cx(styles.footer, 'site-container')} />
+const NotFoundPage = ({ pageContext }) => {
+  const {
+    site: { siteMetadata },
+  } = useStaticQuery(graphql`
+    query {
+      site {
+        siteMetadata {
+          repository
+        }
+      }
+    }
+  `);
+
+  return (
+    <PageContext.Provider value={pageContext}>
+      <SEO title="404: Not found" />
+      <div className={styles.layout}>
+        <GlobalHeader
+          editUrl={`${siteMetadata.repository}/blob/main/${pageContext.fileRelativePath}`}
+        />
+        <div className={styles.contentContainer}>
+          <SkewedContainer className={styles.content}>
+            <h1 className={styles.header}>404</h1>
+            <p>
+              The URL you entered may be broken, or the page has been removed.{' '}
+              <Link to="/">Go back to the home page</Link>.
+            </p>
+          </SkewedContainer>
+        </div>
+        <div className={styles.footerContainer}>
+          <Footer className={cx(styles.footer, 'site-container')} />
+        </div>
       </div>
-    </div>
-  </PageContext.Provider>
-);
+    </PageContext.Provider>
+  );
+};
 
 NotFoundPage.propTypes = {
   pageContext,