Added 404 page

src/public/gatsby-config.js

@@ -37,6 +37,13 @@ module.exports = {
         ],
         display: 'swap'
       }
+    },
+
+    {
+      resolve: `gatsby-plugin-layout`,
+      options: {
+        component: require.resolve(`./src/layouts/main.tsx`),
+      },
     }
   ]
 }

src/public/package.json

@@ -33,6 +33,7 @@
     "gatsby-image": "^2.2.39",
     "gatsby-plugin-alias-imports": "^1.0.5",
     "gatsby-plugin-google-fonts": "^1.0.1",
+    "gatsby-plugin-layout": "^1.1.22",
     "gatsby-plugin-react-helmet": "^3.1.21",
     "gatsby-plugin-sharp": "^2.4.3",
     "gatsby-plugin-styled-components": "^3.1.18",
@@ -44,19 +45,22 @@
     "react-dom": "^16.12.0",
     "react-helmet": "^5.2.1",
     "react-hook-form": "^4.8.0",
+    "react-syntax-highlighter": "^12.2.1",
+    "react-transition-group": "^4.3.0",
     "styled-components": "^5.0.0",
     "yup": "^0.28.1"
   },
   "devDependencies": {
-    "serverless": "^1.63.0",
-    "serverless-finch": "^2.5.2",
-    "serverless-plugin-include-dependencies": "^4.0.1",
     "@types/node": "^13.5.0",
     "@types/react": "^16.9.19",
     "@types/react-dom": "^16.9.5",
     "@types/react-helmet": "^5.0.15",
+    "@types/react-transition-group": "^4.2.3",
     "@types/styled-components": "^4.4.2",
-    "@types/yup": "^0.26.29"
+    "@types/yup": "^0.26.29",
+    "serverless": "^1.63.0",
+    "serverless-finch": "^2.5.2",
+    "serverless-plugin-include-dependencies": "^4.0.1"
   },
   "browserslist": [
     ">0.2%",

src/public/src/api/APIRequest.tsx

@@ -2,6 +2,7 @@ export const APIRequest = (url:string, body?:object) => {
   return fetch(`https://api.domsplace.com/v1/${url}`, {
     method: body ? 'POST' : 'GET',
     body: body ? JSON.stringify(body) : null,
+    mode: 'no-cors',
     headers: {
       'Content-Type': 'application/json',
       'Accept': 'application/json'

src/public/src/components/Layout.tsx

@@ -1,31 +0,0 @@
-import * as React from 'react';
-import { Header } from '@components/navigation/Header';
-import { Background } from './layout/Background';
-import { Footer } from './navigation/Footer';
-import styled, { createGlobalStyle } from 'styled-components';
-import { Colors, Fonts, FontWeights, FontSizes, Gutters } from '@settings/all';
-import { graphql } from 'gatsby';
-import { BodyStyles, AllElementStyles } from '@styles';
-import { AnchorStyles } from '@styles/anchor';
-
-const GlobalStyles = createGlobalStyle`
-  ${AllElementStyles}
-  ${BodyStyles}
-  ${AnchorStyles}
-`;
-
-const LayoutMain = styled.main`
-  margin-top: ${Gutters.extraExtraLarge};
-`;
-
-export const Layout = (props:{children:React.ReactNode}) => (
-  <div {...props}>
-    <GlobalStyles />
-    <Background />
-    <Header />
-    <LayoutMain>
-      { props.children }
-    </LayoutMain>
-    <Footer />
-  </div>
-);

src/public/src/components/navigation/Header.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import { ZIndex, Gutters } from '@settings/all';
+import { ZIndex, Gutters, MediaQueries, Colors } from '@settings/all';
 import { Boundary } from '../layout/Boundary';
 import { Logo } from '../../objects/branding/Logo';
 
@@ -8,8 +8,8 @@ const HeaderWrapper = styled.header`
   position: fixed;
   z-index: ${ZIndex.header};
   width: 100%;
-  top: 0;
   pointer-events: none;
+  top: 0;
 `;
 
 const HeaderInner = styled(Boundary)`

src/public/src/components/page/PageWrapper.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import Helmet from 'react-helmet';
+
+export interface PageWrapperProps {
+  children:React.ReactNode;
+  title:string|null;
+}
+
+export const PageWrapper = ({ title, children }:PageWrapperProps) => {
+  if(!title) {
+    title = 'domsPlace | Dominic Masters\' Personal Website';
+  } else {
+    title = `${title} | domsPlace`
+  }
+
+  return  <>
+    <Helmet>
+      <meta charSet="utf-8" />
+      <title>{ title }</title>
+    </Helmet>
+    {children}
+  </>;
+}

src/public/src/components/sections/SplitFrames.tsx

@@ -83,7 +83,7 @@ export const SplitFrames = (props:SplitFramesProps) => {
   }
 
   return (
-    <Boundary as={SplitFramesContainer}>
+    <Boundary {...props} as={SplitFramesContainer}>
       { header }
 
       <LeftSplit {...(props.leftOptions||{})}>

src/public/src/layouts/main.tsx

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { Header } from '@components/navigation/Header';
+import { Background } from '../components/layout/Background';
+import { Footer } from '../components/navigation/Footer';
+import styled, { createGlobalStyle } from 'styled-components';
+import { Gutters, Easings, Durations } from '@settings/all';
+import { BodyStyles, AllElementStyles, AnchorStyles } from '@styles/index';
+import { TransitionGroup, Transition } from "react-transition-group"
+import { TransitionStatus } from 'react-transition-group/Transition';
+
+//Load Global Styles
+const GlobalStyles = createGlobalStyle`
+  ${AllElementStyles}
+  ${BodyStyles}
+  ${AnchorStyles}
+`;
+
+//Transition
+const Timeouts = { enter: Durations.timeMedium * 1000, exit: Durations.timeMedium * 1000 };
+const LayoutTransition = styled.div(({ status }:{ status:TransitionStatus }) => {
+  return `
+    transition: transform ${Timeouts.enter}ms ${Easings.easeOut};
+    ${ status == 'entering' ? `
+      position: absolute;
+      opacity: 0;
+      transform: translateY(-${Gutters.extraExtraLarge});
+    `: status == 'entered' ? `
+      opacity: 1;
+      transform: translateY(0em);
+    `: status == 'exiting' ? `
+      opacity: 0;
+      transform: translateY(${Gutters.extraExtraLarge});
+    `:''}
+  `;
+});
+
+
+//Main area
+const LayoutMain = styled.main`
+  margin-top: ${Gutters.extraExtraLarge};
+`;
+
+export interface LayoutProps {
+  children:React.ReactNode;
+  location:any;
+};
+export const Layout = ({ location, children, ...props }:LayoutProps) => (
+  <div {...props}>
+    <GlobalStyles />
+    <Background />
+    <Header />
+    <LayoutMain>
+      <TransitionGroup>
+        <Transition key={location.pathname} timeout={Timeouts}>
+          {status => <LayoutTransition status={status}>
+            { children }
+          </LayoutTransition>}
+        </Transition>
+      </TransitionGroup>
+    </LayoutMain>
+    <Footer />
+  </div>
+);
+
+export default Layout;

src/public/src/objects/code/CodeBlock.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import SyntaxHighlighter, { SyntaxHighlighterProps } from 'react-syntax-highlighter';
+import test from 'react-syntax-highlighter/dist/esm/styles/hljs/tomorrow-night-eighties';
+import styled from 'styled-components';
+
+export type CodeBlockProps = SyntaxHighlighterProps;
+
+export const CodeBlock = styled((props:CodeBlockProps) => {
+  return <SyntaxHighlighter {...props} style={test} />
+})`
+  font-size: 12px;
+`

src/public/src/pages/404.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { PageWrapper } from '@components/page/PageWrapper';
+import { Title, Subtitle } from '@objects/typography/Title';
+import { SplitFrames } from '@components/sections/SplitFrames';
+import { CodeBlock } from '@objects/code/CodeBlock';
+import { Heading3 } from '@objects/typography/Heading';
+import { Button } from '@objects/interactive/Button';
+import { Link } from 'gatsby';
+ 
+const FAKE_CODE = `import { usePageData } from '@data/page';
+
+const thisPage = usePageData(data => {
+  if(!data) return <MyCool404Page />
+  return <BoringExpectedPage {...data} />
+});
+
+const MyCool404Page = () => <>
+  <Title>404 - Not Found</Title>
+  <Subtitle>
+    The error... not the internet
+    joke about the error.
+  </Subtitle>
+  <Split>
+    <CodeBlock>
+      \${require(__filename).toString()}
+    </CodeBlock>
+  </Split>
+</>;
+`
+
+export default () => {
+  return <PageWrapper title="Not Found">
+    <SplitFrames
+      size="medium"
+      title={() => <Title large>404 - Not Found</Title>}
+      subtitle={() => <Subtitle>The error... Not the joke about the error.</Subtitle>}
+      left={() => <CodeBlock language="typescript">
+        {FAKE_CODE}
+      </CodeBlock>}
+      leftOptions={{ padded: true }}
+
+      right={() => <>
+        <Heading3>Have no fear</Heading3>
+        <p>
+          Just because we don't have what you're looking for this time, doesn't
+          mean we don't offer other cool things.
+        </p>
+        <Button theme="primary" to="/">Continue Browsing</Button>
+      </>}
+      rightOptions={{ padded: false }}
+    />
+  </PageWrapper>
+}

src/public/src/pages/contact.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
-import { Layout } from '@components/Layout';
+import { PageWrapper } from '@components/page/PageWrapper';
 import { Title } from '@objects/typography/Title';
 import { SplitFrames } from '@components/sections/SplitFrames';
 import { Heading2 } from '@objects/typography/Heading';
 import { ContactForm } from '@components/forms/ContactForm';
 
 export default () => (
-  <Layout>
+  <PageWrapper title="Contact">
     <SplitFrames size="large"
       title={() => <Title large>Contact Me</Title>}
 
@@ -33,5 +33,5 @@ export default () => (
       rightOptions={{padded: true}}
       right={() => <ContactForm />}
     />
-  </Layout>
+  </PageWrapper>
 );

src/public/src/pages/index.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
-import { Layout } from '@components/Layout';
+import { PageWrapper } from '@components/page/PageWrapper';
 import { BannerImageSection } from '@components/sections/BannerImage';
 import { Title, Subtitle } from '@objects/typography/Title';
 import { SplitFrames } from '@components/sections/SplitFrames';
 import { Heading1, Heading2 } from '@objects/typography/Heading';
 import { Mosaic } from '@components/sections/Mosaic';
-import { graphql, Link } from 'gatsby';
+import { graphql } from 'gatsby';
-import { FluidImage, fluidImage } from '@objects/media/Image';
+import { FluidImage } from '@objects/media/Image';
 import { StackedMosaic } from '@components/sections/StackedMosaic';
 import { IconGrid } from '@components/sections/IconGrid';
 import { ButtonTitle } from '@components/sections/ButtonTitle';
@@ -36,9 +36,9 @@ export interface IndexPageProps {
 }
  
 export default ({ data }:IndexPageProps) => {
-  return <Layout>
+  return <PageWrapper title={null}>
     <BannerImageSection
-      title={() => <Title large="true">Dominic Masters</Title>}
+      title={() => <Title large>Dominic Masters</Title>}
       subtitle={() => <Subtitle>Developer, nerd, occasionally funny.</Subtitle>}
       body={() => <p>
         I'm just a nerd with a passion for coding, coffee, and video games.
@@ -103,7 +103,7 @@ export default ({ data }:IndexPageProps) => {
       images={[
         { to: "//www.kopalife.com/products/kube-customise", image: data.kopaImage.childImageSharp, delay: 'short' },
         { to: "//earjobs.com.au", image: data.earjobsImage.childImageSharp, delay: 'medium' },
-        { to: "//sol-invictus.com", image: data.solImage.childImageSharp, delay: 'long' }
+        { to: "//www.solinvictus.com.au", image: data.solImage.childImageSharp, delay: 'long' }
       ]}
       title={() => <Heading2>Full-Stack Web Dev</Heading2>}
       body={() => <>
@@ -121,6 +121,7 @@ export default ({ data }:IndexPageProps) => {
     } />
 
     <IconGrid
+      size="small"
       title={p => <Heading2 {...p}>Platforms I work with</Heading2>}
       icons={[
         /* First Row */
@@ -170,5 +171,5 @@ export default ({ data }:IndexPageProps) => {
       </p>}
       buttons={() => <Button to="/contact" theme="primary">Contact Me</Button> }
     />
-  </Layout>
+  </PageWrapper>
 }

src/public/src/pages/legal/privacy.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
-import { Layout } from '@components/Layout';
+import { PageWrapper } from '@components/page/PageWrapper';
 import { Boundary } from '@components/layout/Boundary';
 import { Title } from '@objects/typography/Title';
 import { Heading4, Heading3, Heading2 } from '@objects/typography/Heading';
 
 export default () => (
-  <Layout>
+  <PageWrapper title="Privacy Policy">
     <Boundary size="medium">
       <Title>Privacy Policy</Title>
       <p>Effective date: June 27, 2018</p>
@@ -160,5 +160,5 @@ export default () => (
         website: <a href="/contact">https://domsplace.com/contact</a>
       </p>
     </Boundary>
-  </Layout>
+  </PageWrapper>
-)
+);

src/public/src/styles/index.tsx

@@ -1,2 +1,3 @@
 export * from './all';
-export * from './body';
+export * from './body';
+export * from './anchor';

yarn.lock

@@ -0,0 +1,28 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@types/prop-types@*":
+  version "15.7.3"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7"
+  integrity sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==
+
+"@types/react-syntax-highlighter@^11.0.4":
+  version "11.0.4"
+  resolved "https://registry.yarnpkg.com/@types/react-syntax-highlighter/-/react-syntax-highlighter-11.0.4.tgz#d86d17697db62f98046874f62fdb3e53a0bbc4cd"
+  integrity sha512-9GfTo3a0PHwQeTVoqs0g5bS28KkSY48pp5659wA+Dp4MqceDEa8EHBqrllJvvtyusszyJhViUEap0FDvlk/9Zg==
+  dependencies:
+    "@types/react" "*"
+
+"@types/react@*":
+  version "16.9.19"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.19.tgz#c842aa83ea490007d29938146ff2e4d9e4360c40"
+  integrity sha512-LJV97//H+zqKWMms0kvxaKYJDG05U2TtQB3chRLF8MPNs+MQh/H1aGlyDUxjaHvu08EAGerdX2z4LTBc7ns77A==
+  dependencies:
+    "@types/prop-types" "*"
+    csstype "^2.2.0"
+
+csstype@^2.2.0:
+  version "2.6.8"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.8.tgz#0fb6fc2417ffd2816a418c9336da74d7f07db431"
+  integrity sha512-msVS9qTuMT5zwAGCVm4mxfrZ18BNc6Csd0oJAtiFMZ1FAx1CCvy2+5MDmYoix63LM/6NDbNtodCiGYGmFgO0dA==