upgrade gatsby to 2.0

package.json

@@ -9,13 +9,16 @@
   },
   "dependencies": {
     "babel-plugin-transform-regenerator": "^6.26.0",
-    "gatsby": "^1.9.250",
-    "gatsby-link": "^1.6.40",
-    "gatsby-plugin-typography": "^1.7.18",
+    "gatsby": "^2.0.0",
+    "gatsby-link": "^2.0.4",
+    "gatsby-plugin-typography": "^2.2.0",
     "gatsby-source-youtube": "^1.0.1",
-    "react": "^16.4.1",
-    "react-spring": "3.2.0-beta.12",
+    "react": "^16.5.2",
+    "react-dom": "^16.5.2",
+    "react-spring": "^5.9.2",
+    "react-typography": "^0.16.13",
     "styled-components": "^3.3.3",
+    "typography": "^0.16.17",
     "typography-theme-fairy-gates": "^0.15.11"
   }
 }

src/layouts/index.js → src/components/layout.js

@@ -99,7 +99,7 @@ export default ({ children }) => (
       </SidebarBg>
     </Sidebar>
     <Content>
-      {children()}
+      {children}
     </Content>
   </div>
 );

src/pages/contact.js

@@ -1,14 +1,15 @@
 import React from "react"
 import Link from "gatsby-link"
 import styled from 'styled-components'
+import Layout from "../components/layout"
 
 const Page = styled.div`
 padding: 1.25rem 1rem;
 `
 
-export default () => <Page>
+export default () => <Layout><Page>
     <h1>Contact</h1>
     <a href="mailto:josh.ribakoff@gmail.com">josh.ribakoff@gmail.com</a>
     <br />
     <a href="tel:1-619-248-8183">619-248-8183</a>
-</Page>
+</Page></Layout>

src/pages/famefitness.js

@@ -1,6 +1,7 @@
 import React from "react";
 import Link from "gatsby-link";
 import styled from 'styled-components'
+import Layout from "../components/layout"
 
 import bookingsCalendar from './famefitness/bookings-calendar.png'
 import classSchedule from './famefitness/class-schedule.png'
@@ -32,6 +33,7 @@ border:1px black solid;
 `
 
 export default () => (
+  <Layout>
   <div>
     <a href="{bookingsCalendar}" target="_blank"><Img src={bookingsCalendar} /></a>
     <a href="{classSchedule}" target="_blank"><Img src={classSchedule} /></a>
@@ -53,4 +55,5 @@ export default () => (
     <a href="{training}" target="_blank"><Img src={training} /></a>
     <a href="{weekView}" target="_blank"><Img src={weekView} /></a>
   </div>
+  </Layout>
 );

src/pages/index.js

@@ -1,6 +1,7 @@
 import React from "react"
 import Link from "gatsby-link"
 import styled from 'styled-components'
+import Layout from "../components/layout"
 
 import nasa from './nasa.jpg'
 
@@ -32,9 +33,9 @@ margin-right: 1em;
 margin-bottom: 1em;
 `
 
-export default () => <Page>
+export default () => <Layout><Page>
     <h2 style={{color: 'white', textShadow: '2px 2px 4px rgba(0, 0, 0, .8)', margin: 0, marginBottom: 45}}>Hi, I'm Josh.</h2>
     <h3 style={{color: 'white', textShadow: '2px 2px 4px rgba(0, 0, 0, .8)', lineHeight: 1.5, margin: 0, marginBottom: 65, fontWeight: 200}}>I am a software engineer specialised in both <strong style={{fontWeight: 500}}>front-end and back-end web development</strong>.</h3>
     <Button to='/portfolio/'>Portfolio</Button>
     <Button to='/videos/'>Videos</Button>
-</Page>
+</Page></Layout>

src/pages/isite.js

@@ -1,8 +1,9 @@
 import React from "react";
 import Link from "gatsby-link";
 import styled from 'styled-components'
+import Layout from "../components/layout"
 
-export default () => <div>
+export default () => <Layout><div>
     <iframe width="560" height="315" src="https://www.youtube.com/embed/TQfICz8VlP0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
     <iframe width="560" height="315" src="https://www.youtube.com/embed/gL9bcDHn2Rk" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
-</div>
+</div></Layout>

src/pages/marinas.js

@@ -1,6 +1,7 @@
 import React from "react";
 import Link from "gatsby-link";
 import styled from 'styled-components'
+import Layout from "../components/layout"
 
 import Gallery from "../components/Gallery";
 import GalleryItem from "../components/GalleryItem";
@@ -18,6 +19,7 @@ padding: 1.25rem 1rem;
 `
 
 export default ({ src }) => (
+<Layout>
   <Page>
     <h1>Marinas.com</h1>
     <p>
@@ -114,4 +116,5 @@ export default ({ src }) => (
     </blockquote>
     <p>When the client later re-evaluated the software offerings for maps, they decided Google Maps was just too compelling compared to re-inventing that wheel. In the longer run I helped switch the maps back to Google Maps because it offered more detailed maps, a richer ecosystem of integrations, and it became obvious Google was going to be very reasonable of a partner. Steve Jobs also eventually killed Flash so we would have had to re-do the UI client anyways.</p>
   </Page>
+</Layout>
 );

src/pages/portfolio.js

@@ -1,6 +1,8 @@
 import React from "react";
 import Link from "gatsby-link";
 import styled from 'styled-components'
+import Layout from "../components/layout"
+
 
 import marinas from './marinas/page3.jpg'
 import fame from './famefitness/famefit-cal.png'
@@ -112,6 +114,7 @@ margin-bottom: 5px;
 `
 
 export default ({ src }) => (
+  <Layout>
   <Page>
     <h1>Portfolio</h1>
     <Timeline>
@@ -350,4 +353,5 @@ export default ({ src }) => (
 
     </Timeline>
   </Page>
+  </Layout>
 );

src/pages/videos.js

@@ -1,11 +1,13 @@
 import React from "react";
 import styled from 'styled-components'
+import Layout from "../components/layout"
 
 const Page = styled.div`
 padding: 1.25rem 1rem;
 `
 
 export default ({ data: {allYoutubeVideo} }) =>
+<Layout>
   <Page>
     {allYoutubeVideo.edges.map(({node: {title, description, publishedAt, id, videoId}}) => (
         <div>
@@ -15,6 +17,7 @@ export default ({ data: {allYoutubeVideo} }) =>
         </div>
     ))}
   </Page>
+</Layout>
 
 export const query = graphql`
  query myVideos {