gatsby-image is fully operational

gatsby-node.js

@@ -30,10 +30,44 @@ exports.createPages = ({ boundActionCreators, graphql }) => {
               previous {
                 title
                 slug
+                img {
+                  id
+                  childImageSharp {
+                    sizes(maxWidth: 500) {
+                      base64
+                      tracedSVG
+                      aspectRatio
+                      src
+                      srcSet
+                      srcWebp
+                      srcSetWebp
+                      sizes
+                      originalImg
+                      originalName
+                    }
+                  }
+                }
               }
               next {
                 title
                 slug
+                img {
+                  id
+                  childImageSharp {
+                    sizes(maxWidth: 500) {
+                      base64
+                      tracedSVG
+                      aspectRatio
+                      src
+                      srcSet
+                      srcWebp
+                      srcSetWebp
+                      sizes
+                      originalImg
+                      originalName
+                    }
+                  }
+                }
               }
             }
           }

src/components/atoms/ProjectImage.jsx

@@ -19,4 +19,12 @@ ProjectImage.propTypes = {
   alt: PropTypes.string,
 }
 
+export const projectImage = graphql`
+  fragment ProjectImageSizes on ImageSharp {
+    sizes(maxWidth: 1200) {
+      ...GatsbyImageSharpSizes
+    }
+  }
+`
+
 export default ProjectImage

src/components/atoms/ProjectImage.scss

@@ -7,8 +7,10 @@
     display: block;
     box-shadow: 0 3px 5px rgba($brand-main, .2), 0 5px 16px rgba($brand-main, .2);
 
-    @media (min-width: 1440px) {
+    @media (min-width: $projectImageMaxWidth) {
-        max-width: 1440px;
+        max-width: $projectImageMaxWidth;
+        border-radius: .25rem;
+        overflow: hidden;
     }
 }
 

src/components/molecules/ProjectNav.jsx

@@ -11,7 +11,7 @@ const ProjectNav = ({ previous, next }) => (
   <nav className="project__nav full-width">
     {previous && (
       <div className="project__nav__item">
-        <Link className="project__nav__link prev" to={`/${previous.slug}`}>
+        <Link className="project__nav__link prev" to={previous.slug}>
           <Img
             className="project__nav__image"
             sizes={previous.img.childImageSharp.sizes}
@@ -30,7 +30,7 @@ const ProjectNav = ({ previous, next }) => (
     </Link>
     {next && (
       <div className="project__nav__item">
-        <Link className="project__nav__link next" to={`/${next.slug}`}>
+        <Link className="project__nav__link next" to={next.slug}>
           <Img
             className="project__nav__image"
             sizes={next.img.childImageSharp.sizes}

src/components/molecules/ProjectNav.scss

@@ -14,6 +14,7 @@
     flex: 0 0 48%;
     position: relative;
     transition: .2s ease-out;
+    max-width: 500px;
 
     &:first-child {
         text-align: left;

src/pages/index.jsx

@@ -2,28 +2,27 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import Link from 'gatsby-link'
 import ProjectImage from '../components/atoms/ProjectImage'
+import FullWidth from '../components/atoms/FullWidth'
 import './index.scss'
 
 const Home = ({ data }) => {
   const projects = data.allProjectsJson.edges
 
   return (
-    <div className="projects full-width" id="projects">
+    <FullWidth id="projects" className="projects">
       {projects.map(({ node }) => {
         const { slug, title, img } = node
 
         return (
-          <Link
+          <article className="projects__project" key={slug}>
-            key={slug}
+            <Link to={slug}>
-            to={slug}
+              <h1 className="projects__project__title">{title}</h1>
-            className="projects__project"
+              <ProjectImage sizes={img.childImageSharp.sizes} alt={title} />
-          >
+            </Link>
-            <h1 className="projects__project__title">{title}</h1>
+          </article>
-            <ProjectImage sizes={img.childImageSharp.sizes} alt={title} />
-          </Link>
         )
       })}
-    </div>
+    </FullWidth>
   )
 }
 
@@ -42,9 +41,7 @@ export const IndexQuery = graphql`
           slug
           img {
             childImageSharp {
-              sizes(maxWidth: 1440) {
+              ...ProjectImageSizes
-                ...GatsbyImageSharpSizes
-              }
             }
           }
         }

src/pages/index.scss

@@ -1,38 +1,39 @@
 @import 'variables';
 
-.projects {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-}
-
 .projects__project {
-    width: 100%;
+    text-align: center;
-    display: block;
+    margin-bottom: $spacer * 4;
-    position: relative;
-    background-color: $brand-grey-light;
-    margin: 0 auto $spacer * 4 auto;
 
     @media (min-width: 30rem) {
         margin-bottom: $spacer * 8;
     }
 
-    &::after {
+    a {
-        content: '';
+        display: block;
-        position: absolute;
+        position: relative;
-        left: 0;
+        margin: 0 auto;
-        right: 0;
+
-        top: 0;
+        @media (min-width: $projectImageMaxWidth) {
-        bottom: 0;
+            max-width: $projectImageMaxWidth;
-        z-index: 1;
+        }
-        background: transparent;
-        transition: background .2s ease-out;
-    }
 
-    &:hover,
-    &:focus {
         &::after {
-            background: rgba($brand-cyan, .05);
+            content: '';
+            position: absolute;
+            left: 0;
+            right: 0;
+            top: 0;
+            bottom: 0;
+            z-index: 1;
+            background: transparent;
+            transition: background .2s ease-out;
+        }
+
+        &:hover,
+        &:focus {
+            &::after {
+                background: rgba($brand-cyan, .05);
+            }
         }
     }
 }

src/styles/_variables.scss

@@ -1,4 +1,5 @@
 $typekit:               'dtg3zui';
+$projectImageMaxWidth:  1200px;
 
 // Colors
 /////////////////////////////////////

src/templates/Project.jsx

@@ -7,7 +7,7 @@ import FullWidth from '../components/atoms/FullWidth'
 import ProjectImage from '../components/atoms/ProjectImage'
 import ProjectTechstack from '../components/molecules/ProjectTechstack'
 import ProjectLinks from '../components/molecules/ProjectLinks'
-// import ProjectNav from '../components/molecules/ProjectNav'
+import ProjectNav from '../components/molecules/ProjectNav'
 import SEO from '../components/atoms/SEO'
 import './Project.scss'
 
@@ -17,12 +17,12 @@ class Project extends Component {
   }
 
   render() {
-    const project = this.props.data.allProjectsJson.edges[0]
+    const project = this.props.data.projectsJson
     const projectImages = this.props.data.projectImages.edges
-    // const pathContext = this.props.pathContext
+    const pathContext = this.props.pathContext
 
-    const { title, description, links, techstack } = project.node
+    const { title, description, links, techstack } = project
-    // const { next, previous } = pathContext
+    const { next, previous } = pathContext
 
     return (
       <Fragment>
@@ -30,7 +30,7 @@ class Project extends Component {
           <title>{title}</title>
         </Helmet>
 
-        <SEO postMeta={project.node} />
+        <SEO postMeta={project} />
 
         <article className="project">
           <Content>
@@ -58,7 +58,7 @@ class Project extends Component {
           </Content>
         </article>
 
-        {/* <ProjectNav previous={previous} next={next} /> */}
+        <ProjectNav previous={previous} next={next} />
       </Fragment>
     )
   }
@@ -66,34 +66,28 @@ class Project extends Component {
 
 Project.propTypes = {
   data: PropTypes.object.isRequired,
-  // pathContext: PropTypes.object.isRequired,
+  pathContext: PropTypes.object.isRequired,
 }
 
 export default Project
 
 export const projectQuery = graphql`
   query ProjectBySlug($slug: String!) {
-    allProjectsJson(filter: { slug: { eq: $slug } }) {
+    projectsJson(slug: { eq: $slug }) {
-      edges {
+      title
-        node {
+      slug
-          title
+      description
-          slug
+      links {
-          description
+        title
-          links {
+        url
-            title
-            url
-          }
-          techstack
-        }
       }
+      techstack
     }
     projectImages: allImageSharp(filter: { id: { regex: $slug } }, sort: { fields: [id], order: ASC }) {
       edges {
         node {
           id
-          sizes(maxWidth: 1440) {
+          ...ProjectImageSizes
-            ...GatsbyImageSharpSizes
-          }
         }
       }
     }