FOUC Fix?? Maybe?? (ricokahler#67)

* Export props and component for use in ErrorLayout

* Created Layout for Error pages

* Created 404 and 500 pages

* Changed contact us slug

* Injects styled component styles into header for SSR

web/components/Layout/ErrorLayout.tsx

@@ -0,0 +1,51 @@
+import {ThemeProvider} from 'styled-components';
+import theme from '../../themes';
+import React from 'react';
+import styled from 'styled-components';
+import {color, fontSize, fontFamily, space, query} from '@theme/fn';
+import {Container, LayoutProps} from './Layout';
+
+const ErrorContainer = styled(Container)`
+  background: ${color('cream')};
+  text-align: left;
+`;
+
+export const Header = styled.h1`
+  ${fontSize('x8')};
+  ${fontFamily('headline')};
+`;
+
+export const Text = styled.p`
+  ${fontSize('xl')};
+  ${fontFamily('body')};
+  margin: ${space('md')} 0 ${space('x12')};
+  max-width: 681px;
+`;
+
+export const ButtonWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  > div {
+    margin-bottom: ${space('md')};
+  }
+
+  @media screen and (${query.atLeast('tablet')}) {
+    flex-direction: row;
+
+    > div {
+      margin-right: ${space('md')};
+      margin-bottom: 0;
+    }
+  }
+`;
+
+const ErrorLayout: React.FC<LayoutProps> = (props) => {
+  const _theme = props.theme || theme;
+  return (
+    <ThemeProvider theme={_theme}>
+      <ErrorContainer {...props} />
+    </ThemeProvider>
+  );
+};
+export default ErrorLayout;

web/components/Layout/Layout.tsx

@@ -3,7 +3,7 @@ import theme, {Theme} from '../../themes';
 import React from 'react';
 import styled from 'styled-components';
 
-const Container = styled.div`
+export const Container = styled.div`
   display: flex;
   flex-flow: column nowrap;
   justify-content: flex-start;
@@ -15,7 +15,7 @@ const Container = styled.div`
   left: 0;
 `;
 
-interface LayoutProps {
+export interface LayoutProps {
   theme?: Theme;
 }
 

web/pages/404.tsx

@@ -0,0 +1,47 @@
+import getSiteConfig from '../data/siteConfig';
+import ErrorLayout, {Header, Text} from '../components/Layout/ErrorLayout';
+import {Block} from '@components/Layout';
+import Stretch from '../components/Layout/Stretch';
+import Page from '../components/Page';
+import {Footer} from '../components/FooterComponent';
+import {Button} from '@components/Button';
+import {SiteConfig} from '@data/types';
+
+export const getStaticProps = async ({params}: {params: {slug: string}}) => {
+  const siteConfig = await getSiteConfig();
+  return {
+    props: {
+      siteConfig: siteConfig,
+    },
+  };
+};
+
+const Error404Page = (props) => {
+  return (
+    <Page>
+      <ErrorLayout>
+        <Block>
+          {/* <MapComponents blocks={props.page.blocks as AnyBlockData[]} /> */}
+          <Stretch />
+          <Header>404: Page Not Found</Header>
+          <Text>
+            We couldn’t find the page you requested. It might have been moved,
+            renamed, or deleted. Please check your spelling and try your search
+            again.
+          </Text>
+          <Button
+            url="/"
+            label="Go Back Home"
+            arrow={true}
+            size="medium"
+            variant="solid"
+            arrowColor="#fff"
+          />
+        </Block>
+        <Footer siteConfig={props.siteConfig as SiteConfig} />
+      </ErrorLayout>
+    </Page>
+  );
+};
+
+export default Error404Page;

web/pages/500.tsx

@@ -0,0 +1,60 @@
+import getSiteConfig from '../data/siteConfig';
+import ErrorLayout, {
+  Header,
+  Text,
+  ButtonWrapper,
+} from '../components/Layout/ErrorLayout';
+import {Block} from '@components/Layout';
+import Stretch from '../components/Layout/Stretch';
+import Page from '../components/Page';
+import {Footer} from '../components/FooterComponent';
+import {Button} from '@components/Button';
+import {SiteConfig} from '@data/types';
+
+export const getStaticProps = async ({params}: {params: {slug: string}}) => {
+  const siteConfig = await getSiteConfig();
+  return {
+    props: {
+      siteConfig: siteConfig,
+    },
+  };
+};
+
+const Error500Page = (props) => {
+  return (
+    <Page>
+      <ErrorLayout>
+        <Block>
+          {/* <MapComponents blocks={props.page.blocks as AnyBlockData[]} /> */}
+          <Stretch />
+          <Header>500: Internal Server Error</Header>
+          <Text>
+            Sorry, our internal server encountered a problem. We’re working to
+            correct it. Please come back soon.
+          </Text>
+          <ButtonWrapper>
+            <Button
+              url="/"
+              label="Go Back Home"
+              arrow={true}
+              size="medium"
+              variant="solid"
+              arrowColor="#fff"
+            />
+            <Button
+              url="/contact-us"
+              label="Contact Us"
+              arrow={true}
+              size="medium"
+              variant="solid"
+              arrowColor="#fff"
+            />
+          </ButtonWrapper>
+        </Block>
+        <Footer siteConfig={props.siteConfig as SiteConfig} />
+      </ErrorLayout>
+    </Page>
+  );
+};
+
+export default Error500Page;

web/pages/_document.js

@@ -0,0 +1,30 @@
+import Document from 'next/document';
+import {ServerStyleSheet} from 'styled-components';
+
+export default class MyDocument extends Document {
+  static async getInitialProps(ctx) {
+    const sheet = new ServerStyleSheet();
+    const originalRenderPage = ctx.renderPage;
+
+    try {
+      ctx.renderPage = () =>
+        originalRenderPage({
+          enhanceApp: (App) => (props) =>
+            sheet.collectStyles(<App {...props} />),
+        });
+
+      const initialProps = await Document.getInitialProps(ctx);
+      return {
+        ...initialProps,
+        styles: (
+          <>
+            {initialProps.styles}
+            {sheet.getStyleElement()}
+          </>
+        ),
+      };
+    } finally {
+      sheet.seal();
+    }
+  }
+}