404 page fixes

Author: markurtz

src/layouts/root.jsx

@@ -0,0 +1,131 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import { ThemeProvider, Global } from '@emotion/react';
+import Helmet from 'react-helmet';
+import { graphql } from 'gatsby';
+import { transitions, positions, Provider as AlertProvider } from 'react-alert'
+
+import lightTheme from '../themes';
+import styles from '../styles';
+
+import Header from '../components/header';
+
+
+const RootDiv = styled.div`
+  width: 100vw;
+  height: 100vh;
+`;
+
+
+const AlertContainer = styled.div`
+  border-radius: 32px;
+  overflow: hidden;
+  background-color: ${props => props.theme.notificationBackground};
+  color: ${props => props.theme.notificationTextPrimary};
+  padding: 16px 32px 16px 32px;
+  font-size: 1em;
+`;
+
+
+const AlertTemplate = ({ style, options, message, close }) => (
+  <AlertContainer style={style}>
+    {message}
+  </AlertContainer>
+)
+
+
+const alertOptions = {
+  position: positions.BOTTOM_CENTER,
+  timeout: 3000,
+  offset: '24px',
+  transition: transitions.FADE,
+};
+
+
+const Root = ({ data, pageContext }) => {
+  const isDocsPage = data && data.mdx;
+  const metaTitle = data && data.mdx ? data.mdx.frontmatter.metaTitle : null;
+  const metaDescription = data && data.mdx ? data.mdx.frontmatter.metaDescription : null;
+  console.log(pageContext);
+
+  return (
+    <RootDiv>
+      <Helmet>
+        {metaTitle ? <title>{metaTitle}</title> : null}
+        {metaTitle ? <meta name="title" content={metaTitle} /> : null}
+        {metaDescription ? <meta name="description" content={metaDescription} /> : null}
+        {metaTitle ? <meta property="og:title" content={metaTitle} /> : null}
+        {metaDescription ? <meta property="og:description" content={metaDescription} /> : null}
+        {metaTitle ? <meta property="twitter:title" content={metaTitle} /> : null}
+        {metaDescription ? (
+          <meta property="twitter:description" content={metaDescription} />
+        ) : null}
+      </Helmet>
+      <ThemeProvider theme={lightTheme}>
+        <AlertProvider template={AlertTemplate} {...alertOptions}>
+          <Global styles={styles} />
+          <Header />
+          {isDocsPage ?
+            <DocsLayout mdxFields={data.mdx.fields}
+                        mdxFrontMatter={data.mdx.frontmatter}
+                        mdxTOC={data.mdx.tableOfContents}
+                        allMdx={data.allMdx}>
+              {data.mdx.body}
+            </DocsLayout>: ""}
+        </AlertProvider>
+      </ThemeProvider>
+    </RootDiv>
+  );
+}
+
+export default Root;
+
+export const pageQuery = graphql`
+  query($id: String!) {
+    site {
+      siteMetadata {
+        title
+        docsLocation
+      }
+    }
+    mdx(fields: { id: { eq: $id } }) {
+      fields {
+        id
+        title
+        slug
+      }
+      body
+      tableOfContents
+      parent {
+        ... on File {
+          relativePath
+        }
+      }
+      frontmatter {
+        metaTitle
+        metaDescription
+        githubURL
+        index
+        skipToChild
+      }
+    }
+    allMdx {
+      edges {
+        node {
+          fields {
+            id
+            slug
+            title
+          }
+          frontmatter {
+            index
+            targetURL
+            skipToChild
+            metaTitle
+            metaDescription
+          }
+        }
+      }
+    }
+  }
+`;

src/root.jsx

@@ -44,9 +44,9 @@ const alertOptions = {
 
 
 const Root = ({ data, pageContext }) => {
-  // meta tags
-  const metaTitle = data.mdx.frontmatter.metaTitle;
-  const metaDescription = data.mdx.frontmatter.metaDescription;
+  const isDocsPage = data && data.mdx;
+  const metaTitle = data && data.mdx ? data.mdx.frontmatter.metaTitle : null;
+  const metaDescription = data && data.mdx ? data.mdx.frontmatter.metaDescription : null;
 
   return (
    <RootDiv>
@@ -65,12 +65,13 @@ const Root = ({ data, pageContext }) => {
        <AlertProvider template={AlertTemplate} {...alertOptions}>
          <Global styles={styles} />
          <Header />
-         <DocsLayout mdxFields={data.mdx.fields}
+         {isDocsPage ?
+           <DocsLayout mdxFields={data.mdx.fields}
                      mdxFrontMatter={data.mdx.frontmatter}
                      mdxTOC={data.mdx.tableOfContents}
                      allMdx={data.allMdx}>
-           {data.mdx.body}
-         </DocsLayout>
+            {data.mdx.body}
+           </DocsLayout>: ""}
        </AlertProvider>
      </ThemeProvider>
    </RootDiv>