make it work with Gatsby v2-beta

.travis.yml

@@ -7,10 +7,6 @@ cache:
     - public
 
 install:
-  - pip install --user awscli
-  - export PATH=$PATH:$HOME/.local/bin
-  - npm i -g gatsby-cli
-  - export PATH="$PATH:/usr/local/bin/gatsby"
   - npm i
 
 script:
@@ -18,9 +14,9 @@ script:
   - npm run build
 
 after_success:
+  - pip install --user awscli
+  - export PATH=$PATH:$HOME/.local/bin
   - npm run deploy
 
 notifications:
   email: false
-  slack:
-    secure: v/sqm2fgXTi7RJIjVsaJz1i3bV/WNFyTkLLto2p/fXjoWHVWJBdodANTTH+9lgkbft6JdBcU4WDLDkLP8VKlR9JffFc1DvbxGmF3VTfP2kJcnCbo+koLHBtzR1oRwDB1aulp6+II0ROPS9OyOv+Xx45bj4jOt9y/r0Qcp2V5fKvSUEwEecxaTmvBEn3fvZ9COSgL8ufq9hCCT/6r3Bxl0Pp28Fj23pLwuM6tCKjriM4w5WY0xY2Sv4unz6u7LNec5DZH3QZPH4/pdRVBmC3rxt3quw8IMt6NNXG3ODUPRqS7GB44Q+k8L+15Dn5Cx22o92wULpXKTDvHmLLj2lej50V0cyoj7U4SbDkVOohUG23fn10/AzvZogYA2ugf3YXKJCBbyyloJV6jFnZAAvKRSD8B5PFnuhf+uLEAfX9Of1FLNO2c7XIQa86ht5xrpsRFCzNCFhtyHNc8pXwSv7EUv7K2bccCGKv0a7DxYquP0OB3OSkI6tvRc3mvYpe5k2WKNHFRByud14ywGxMn0FYBwtsHbW3QJ/z/WaFYS2hJXjtpjHQW1wNDy+67UTiZFi1anovUHoZvkrIKtRqY1eyXPJB31TqPHWSX0er0IfdhfE3o9mMuoSVUip6S29eY7hhVk5S3IsK1YlPAFW8pa9OPiUBt8z+gbf8WN23qi61Bn7g=

gatsby-config.js

@@ -2,14 +2,13 @@ const path = require('path')
 const fs = require('fs')
 const yaml = require('js-yaml')
 const meta = yaml.load(fs.readFileSync('./data/meta.yml', 'utf8'))
-const { url, matomoUrl, matomoSite } = meta
+const { url, matomoSite, matomoUrl } = meta
 
 module.exports = {
   siteMetadata: {
     siteUrl: `${url}`
   },
   plugins: [
-    'gatsby-plugin-react-next',
     'gatsby-plugin-react-helmet',
     'gatsby-transformer-yaml',
     'gatsby-transformer-sharp',

gatsby-node.js

@@ -1,5 +1,28 @@
 const path = require('path')
 
+// Intersection Observer polyfill
+// requires `npm install intersection-observer`
+// https://github.com/gatsbyjs/gatsby/issues/2288#issuecomment-334467821
+exports.onCreateWebpackConfig = ({ actions, loaders, stage }) => {
+  const { setWebpackConfig } = actions
+
+  if (stage === 'build-html') {
+    const nullRule = {
+      test: /intersection-observer/,
+      use: [loaders.null()]
+    }
+
+    setWebpackConfig({
+      module: {
+        rules: [nullRule]
+      }
+    })
+  }
+}
+
+//
+// Create project pages from projects.yml
+//
 exports.createPages = ({ actions, graphql }) => {
   const { createPage } = actions
 
@@ -14,44 +37,6 @@ exports.createPages = ({ actions, graphql }) => {
               node {
                 slug
               }
-              previous {
-                title
-                slug
-                img {
-                  id
-                  childImageSharp {
-                    fluid(maxWidth: 500, quality: 80) {
-                      aspectRatio
-                      src
-                      srcSet
-                      srcWebp
-                      srcSetWebp
-                      sizes
-                      originalImg
-                      originalName
-                    }
-                  }
-                }
-              }
-              next {
-                title
-                slug
-                img {
-                  id
-                  childImageSharp {
-                    fluid(maxWidth: 500, quality: 80) {
-                      aspectRatio
-                      src
-                      srcSet
-                      srcWebp
-                      srcSetWebp
-                      sizes
-                      originalImg
-                      originalName
-                    }
-                  }
-                }
-              }
             }
           }
         }
@@ -60,21 +45,17 @@ exports.createPages = ({ actions, graphql }) => {
           reject(result.errors)
         }
 
-        result.data.allProjectsYaml.edges.forEach(
-          ({ node, previous, next }) => {
-            const slug = node.slug
+        result.data.allProjectsYaml.edges.forEach(({ node }) => {
+          const slug = node.slug
 
-            createPage({
-              path: slug,
-              component: template,
-              context: {
-                slug,
-                previous,
-                next
-              }
-            })
-          }
-        )
+          createPage({
+            path: slug,
+            component: template,
+            context: {
+              slug
+            }
+          })
+        })
 
         resolve()
       })

package.json

@@ -10,8 +10,8 @@
     "lint:js": "eslint ./gatsby-*.{js,jsx} && eslint ./src/**/*.{js,jsx}",
     "lint:css": "stylelint ./src/**/*.{css,scss}",
     "lint": "npm run lint:js && npm run lint:css",
-    "build": "gatsby build",
-    "start": "docker-compose up",
+    "build": "./node_modules/gatsby/dist/bin/gatsby.js build",
+    "start": "./node_modules/gatsby/dist/bin/gatsby.js develop",
     "format": "prettier --write 'src/**/*.{js,jsx}'",
     "format:css": "prettier-stylelint --write --quiet 'src/**/*.{css,scss}'",
     "test": "npm run lint",
@@ -21,24 +21,26 @@
   "dependencies": {
     "camel-case": "^3.0.0",
     "file-saver": "^1.3.8",
-    "gatsby": "next",
+    "gatsby": "^2.0.0-beta.3",
     "gatsby-image": "next",
-    "gatsby-link": "^1.6.44",
+    "gatsby-link": "next",
     "gatsby-plugin-favicon": "^2.1.1",
     "gatsby-plugin-matomo": "^0.4.0",
-    "gatsby-plugin-offline": "^1.0.18",
-    "gatsby-plugin-react-helmet": "^2.0.11",
-    "gatsby-plugin-react-next": "^1.0.11",
-    "gatsby-plugin-sass": "^1.0.26",
+    "gatsby-plugin-offline": "next",
+    "gatsby-plugin-react-helmet": "next",
+    "gatsby-plugin-sass": "next",
     "gatsby-plugin-sharp": "next",
-    "gatsby-plugin-sitemap": "^1.2.25",
-    "gatsby-plugin-svgr": "^1.0.1",
-    "gatsby-source-filesystem": "^1.5.38",
-    "gatsby-transformer-sharp": "^1.6.26",
-    "gatsby-transformer-yaml": "^1.5.17",
+    "gatsby-plugin-sitemap": "next",
+    "gatsby-plugin-svgr": "github:plag/gatsby-plugin-svgr#gatsby2-compatibility",
+    "gatsby-source-filesystem": "next",
+    "gatsby-transformer-json": "next",
+    "gatsby-transformer-sharp": "next",
+    "gatsby-transformer-yaml": "next",
     "giphy-js-sdk-core": "^1.0.3",
+    "graphql": "^0.13.2",
     "intersection-observer": "^0.5.0",
     "js-yaml": "^3.12.0",
+    "node-sass": "^4.9.0",
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
     "react-helmet": "^5.2.0",
@@ -47,6 +49,7 @@
     "vcf": "^2.0.1"
   },
   "devDependencies": {
+    "@types/prop-types": "^15.5.3",
     "babel-eslint": "^8.2.3",
     "eslint": "^5.0.0",
     "eslint-config-prettier": "^2.9.0",
@@ -54,7 +57,6 @@
     "eslint-plugin-graphql": "^2.1.1",
     "eslint-plugin-prettier": "^2.6.0",
     "eslint-plugin-react": "^7.9.1",
-    "gatsby-transformer-json": "^1.0.19",
     "ora": "^2.1.0",
     "prepend": "^1.0.2",
     "prettier": "^1.13.5",

src/components/Layout.jsx

@@ -2,6 +2,7 @@ import React, { Component, Fragment } from 'react'
 import PropTypes from 'prop-types'
 import withRouter from 'react-router-dom/withRouter'
 import TransitionGroup from 'react-transition-group/TransitionGroup'
+import { StaticQuery } from 'gatsby'
 import Head from './atoms/Head'
 import Header from './organisms/Header'
 import Footer from './organisms/Footer'
@@ -116,8 +117,7 @@ Main.propTypes = {
 }
 
 TemplateWrapper.propTypes = {
-  children: PropTypes.func,
-  data: PropTypes.object.isRequired,
+  children: PropTypes.any,
   location: PropTypes.object.isRequired
 }
 

src/components/atoms/LogoUnit.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { ReactComponent as Logo } from '../../images/logo.svg'
+// import { ReactComponent as Logo } from '../../images/logo.svg'
 import styles from './LogoUnit.module.scss'
 
 const LogoUnit = ({ meta, minimal }) => {
@@ -10,7 +10,7 @@ const LogoUnit = ({ meta, minimal }) => {
 
   return (
     <div className={classes}>
-      <Logo className={styles.logounit__logo} />
+      {/* <Logo className={styles.logounit__logo} /> */}
       <h1 className={styles.logounit__title}>{meta.title.toLowerCase()}</h1>
       <p className={styles.logounit__description}>
         <span>{'{ '}</span> {meta.tagline.toLowerCase()} <span>{' }'}</span>

src/components/atoms/ProjectImage.jsx

@@ -1,28 +1,27 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import Img from 'gatsby-image'
-import 'intersection-observer'
 import './ProjectImage.scss'
 
-const ProjectImage = ({ sizes, alt }) => (
+const ProjectImage = ({ fluid, alt }) => (
   <Img
     className="project__image"
     outerWrapperClassName="project__image-wrap"
     backgroundColor="#6b7f88"
-    fluid={sizes}
+    fluid={fluid}
     alt={alt}
   />
 )
 
 ProjectImage.propTypes = {
-  sizes: PropTypes.object.isRequired,
+  fluid: PropTypes.object.isRequired,
   alt: PropTypes.string
 }
 
 export const projectImage = graphql`
-  fragment ProjectImageSizes on ImageSharp {
+  fragment ProjectImageFluid on ImageSharp {
     fluid(maxWidth: 1200, quality: 85) {
-      ...GatsbyImageSharpSizes_noBase64
+      ...GatsbyImageSharpFluid_noBase64
     }
   }
 `

src/components/molecules/Networks.jsx

@@ -2,31 +2,31 @@ import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import { FadeIn } from '../atoms/Animations'
 
-import { ReactComponent as Email } from '../../images/email.svg'
-import { ReactComponent as Blog } from '../../images/blog.svg'
-import { ReactComponent as Twitter } from '../../images/twitter.svg'
-import { ReactComponent as GitHub } from '../../images/github.svg'
-import { ReactComponent as Dribbble } from '../../images/dribbble.svg'
+// import { ReactComponent as Email } from '../../images/email.svg'
+// import { ReactComponent as Blog } from '../../images/blog.svg'
+// import { ReactComponent as Twitter } from '../../images/twitter.svg'
+// import { ReactComponent as GitHub } from '../../images/github.svg'
+// import { ReactComponent as Dribbble } from '../../images/dribbble.svg'
 
-import icons from '../atoms/Icons.module.scss'
+// import icons from '../atoms/Icons.module.scss'
 import styles from './Networks.module.scss'
 
-const NetworkIcon = props => {
-  switch (props.title) {
-    case 'Email':
-      return <Email {...props} />
-    case 'Blog':
-      return <Blog {...props} />
-    case 'Twitter':
-      return <Twitter {...props} />
-    case 'GitHub':
-      return <GitHub {...props} />
-    case 'Dribbble':
-      return <Dribbble {...props} />
-    default:
-      return null
-  }
-}
+// const NetworkIcon = props => {
+//   switch (props.title) {
+//     case 'Email':
+//       return <Email {...props} />
+//     case 'Blog':
+//       return <Blog {...props} />
+//     case 'Twitter':
+//       return <Twitter {...props} />
+//     case 'GitHub':
+//       return <GitHub {...props} />
+//     case 'Dribbble':
+//       return <Dribbble {...props} />
+//     default:
+//       return null
+//   }
+// }
 
 class Network extends PureComponent {
   constructor(props) {
@@ -64,7 +64,7 @@ class Network extends PureComponent {
                 href={this.props.meta.social[key]}
                 key={i}
               >
-                <NetworkIcon title={key} className={icons.icon} />
+                {/* <NetworkIcon title={key} className={icons.icon} /> */}
                 <span className={styles.title}>{key}</span>
               </a>
             ))}

src/components/molecules/ProjectLinks.jsx

@@ -1,34 +1,34 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import { ReactComponent as Link } from '../../images/link.svg'
-import { ReactComponent as Download } from '../../images/download.svg'
-import { ReactComponent as Info } from '../../images/info.svg'
-import { ReactComponent as Styleguide } from '../../images/styleguide.svg'
-import { ReactComponent as GitHub } from '../../images/github.svg'
-import { ReactComponent as Dribbble } from '../../images/dribbble.svg'
+// import { ReactComponent as Link } from '../../images/link.svg'
+// import { ReactComponent as Download } from '../../images/download.svg'
+// import { ReactComponent as Info } from '../../images/info.svg'
+// import { ReactComponent as Styleguide } from '../../images/styleguide.svg'
+// import { ReactComponent as GitHub } from '../../images/github.svg'
+// import { ReactComponent as Dribbble } from '../../images/dribbble.svg'
 
-import icons from '../atoms/Icons.module.scss'
+// import icons from '../atoms/Icons.module.scss'
 import styles from './ProjectLinks.module.scss'
 
-const LinkIcon = props => {
-  switch (props.title) {
-    case 'Link':
-      return <Link {...props} />
-    case 'GitHub':
-      return <GitHub {...props} />
-    case 'Dribbble':
-      return <Dribbble {...props} />
-    case 'Info':
-      return <Info {...props} />
-    case 'Download':
-      return <Download {...props} />
-    case 'Styleguide':
-      return <Styleguide {...props} />
-    default:
-      return null
-  }
-}
+// const LinkIcon = props => {
+//   switch (props.title) {
+//     case 'Link':
+//       return <Link {...props} />
+//     case 'GitHub':
+//       return <GitHub {...props} />
+//     case 'Dribbble':
+//       return <Dribbble {...props} />
+//     case 'Info':
+//       return <Info {...props} />
+//     case 'Download':
+//       return <Download {...props} />
+//     case 'Styleguide':
+//       return <Styleguide {...props} />
+//     default:
+//       return null
+//   }
+// }
 
 const ProjectLinks = ({ links }) => (
   <div className={styles.projectLinks}>
@@ -43,7 +43,7 @@ const ProjectLinks = ({ links }) => (
         return (
           <li key={title}>
             <a href={url}>
-              <LinkIcon title={title} className={icons.icon} />
+              {/* <LinkIcon title={title} className={icons.icon} /> */}
               {title}
             </a>
           </li>

src/components/molecules/ProjectNav.jsx

@@ -8,7 +8,7 @@ const ProjectLink = ({ node }) => (
   <Link className={styles.link} to={node.slug}>
     <Img
       className={styles.image}
-      fluid={node.img.childImageSharp.sizes}
+      fluid={node.img.childImageSharp.fluid}
       alt={node.title}
     />
     <h1 className={styles.title}>{node.title}</h1>

src/components/molecules/ThemeSwitch.jsx

@@ -2,20 +2,20 @@ import React, { PureComponent, Fragment } from 'react'
 import PropTypes from 'prop-types'
 import Helmet from 'react-helmet'
 import { FadeIn } from '../atoms/Animations'
-import { ReactComponent as Day } from '../../images/day.svg'
-import { ReactComponent as Night } from '../../images/night.svg'
+// import { ReactComponent as Day } from '../../images/day.svg'
+// import { ReactComponent as Night } from '../../images/night.svg'
 import styles from './ThemeSwitch.module.scss'
 
-const ThemeToggle = props => {
+const ThemeToggle = () => {
   return (
     <span
       id="toggle"
       className={styles.checkboxContainer}
       aria-live="assertive"
     >
-      <Day className={props.dark ? null : 'active'} />
+      {/* <Day className={props.dark ? null : 'active'} /> */}
       <span className={styles.checkboxFake} />
-      <Night className={props.dark ? 'active' : null} />
+      {/* <Night className={props.dark ? 'active' : null} /> */}
     </span>
   )
 }

src/pages/404.jsx

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import Link from 'gatsby-link'
+import Link from 'gatsby'
 import giphyAPI from 'giphy-js-sdk-core'
 import Layout from '../components/Layout'
 import Content from '../components/atoms/Content'

src/pages/index.jsx

@@ -19,7 +19,7 @@ const Home = ({ data }) => {
             <article className={styles.project} key={slug}>
               <Link to={slug}>
                 <h1 className={styles.title}>{title}</h1>
-                <ProjectImage fluid={img.childImageSharp.sizes} alt={title} />
+                <ProjectImage fluid={img.childImageSharp.fluid} alt={title} />
               </Link>
             </article>
           )
@@ -44,7 +44,7 @@ export const IndexQuery = graphql`
           slug
           img {
             childImageSharp {
-              ...ProjectImageSizes
+              ...ProjectImageFluid
             }
           }
         }

src/templates/Project.jsx

@@ -26,7 +26,7 @@ const ProjectMeta = props => {
 const ProjectImages = props => (
   <FullWidth>
     {props.projectImages.map(({ node }) => (
-      <ProjectImage key={node.id} fluid={node.sizes} alt={props.title} />
+      <ProjectImage key={node.id} fluid={node.fluid} alt={props.title} />
     ))}
   </FullWidth>
 )
@@ -137,13 +137,13 @@ export const projectAndProjectsQuery = graphql`
     }
 
     projectImages: allImageSharp(
-      filter: { id: { regex: $slug } }
+      filter: { fluid: { originalName: { regex: $slug } } }
       sort: { fields: [id], order: ASC }
     ) {
       edges {
         node {
           id
-          ...ProjectImageSizes
+          ...ProjectImageFluid
         }
       }
     }
@@ -155,8 +155,8 @@ export const projectAndProjectsQuery = graphql`
           slug
           img {
             childImageSharp {
-              sizes(maxWidth: 500, quality: 85) {
-                ...GatsbyImageSharpSizes_noBase64
+              fluid(maxWidth: 500, quality: 85) {
+                ...GatsbyImageSharpFluid_noBase64
               }
             }
           }