config tweaks

gatsby-config.js

@@ -9,10 +9,15 @@ module.exports = {
     'gatsby-plugin-react-helmet',
     'gatsby-plugin-sitemap',
     'gatsby-transformer-json',
+    'gatsby-transformer-sharp',
+    'gatsby-plugin-sharp',
     {
       resolve: 'gatsby-plugin-sass',
       options: {
-        includePaths: [`${__dirname}/node_modules`, `${__dirname}/src/styles`],
+        includePaths: [
+          `${__dirname}/node_modules`,
+          `${__dirname}/src/styles`
+        ],
       },
     },
     {
@@ -22,6 +27,13 @@ module.exports = {
         path: `${__dirname}/data/`,
       },
     },
+    {
+      resolve: 'gatsby-source-filesystem',
+      options: {
+        name: 'images',
+        path: `${__dirname}/src/images`,
+      },
+    },
     {
       resolve: 'gatsby-plugin-google-analytics',
       options: {

package.json

@@ -3,15 +3,18 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "gatsby": "^1.9.251",
+    "gatsby": "^1.9.252",
+    "gatsby-image": "^1.0.46",
     "gatsby-link": "^1.6.39",
     "gatsby-plugin-google-analytics": "^1.0.30",
     "gatsby-plugin-react-helmet": "^2.0.8",
     "gatsby-plugin-react-next": "^1.0.11",
     "gatsby-plugin-sass": "^1.0.25",
+    "gatsby-plugin-sharp": "^1.6.42",
     "gatsby-plugin-sitemap": "^1.2.21",
-    "gatsby-source-filesystem": "^1.5.32",
+    "gatsby-source-filesystem": "^1.5.33",
     "gatsby-transformer-json": "^1.0.16",
+    "gatsby-transformer-sharp": "^1.6.22",
     "react-helmet": "^5.2.0",
     "react-markdown": "^3.3.0",
     "react-transition-group": "^2.3.1"
@@ -23,7 +26,7 @@
     "eslint-plugin-graphql": "^1.5.0",
     "eslint-plugin-prettier": "^2.6.0",
     "eslint-plugin-react": "^7.7.0",
-    "prettier": "^1.12.0",
+    "prettier": "^1.12.1",
     "stylelint": "^9.2.0",
     "stylelint-config-standard": "^18.2.0"
   },

src/components/organisms/Project.js

@@ -23,7 +23,8 @@ const Project = ({ pathContext }) => {
     previous,
   } = project
 
-  return <Fragment>
+  return (
+    <Fragment>
       <Helmet>
         <title>{title}</title>
         <meta name="description" content={description} />
@@ -39,7 +40,8 @@ const Project = ({ pathContext }) => {
               <img className="project__image" src={images[img]} alt={title} />
             </FullWidth>
 
-            {!!img_more && <FullWidth>
+            {!!img_more &&
+              <FullWidth>
                 {img_more.map(key => (
                   <img
                     key={key}
@@ -48,7 +50,8 @@ const Project = ({ pathContext }) => {
                     alt={title}
                   />
                 ))}
-              </FullWidth>}
+              </FullWidth>
+            }
 
             <footer className="project__meta">
               {!!techstack && <ProjectTechstack techstack={techstack} />}
@@ -60,6 +63,7 @@ const Project = ({ pathContext }) => {
         <ProjectNav previous={previous} next={next} />
       </main>
     </Fragment>
+  )
 }
 
 Project.propTypes = {