generate pages

.eslintrc

@@ -0,0 +1,19 @@
+{
+  "plugins": ["react", "graphql"],
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true,
+      "modules": true
+    }
+  },
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  "extends": ["eslint:recommended", "plugin:react/recommended"],
+  "rules": {
+    "quotes": ["error", "single"],
+    "semi": ["error", "never"]
+  }
+}

gatsby-config.js

@@ -4,12 +4,20 @@ module.exports = {
   },
   plugins: [
     'gatsby-plugin-react-helmet',
+    'gatsby-transformer-json',
+    {
+      resolve: 'gatsby-source-filesystem',
+      options: {
+        name: 'data',
+        path: `${__dirname}/data/`,
+      },
+    },
     {
       resolve: 'gatsby-plugin-sass',
       options: {
         includePaths: [
-          './node_modules',
-          './src/stylesheets',
+          `${__dirname}/node_modules`,
+          `${__dirname}/src/styles`,
         ],
       },
     },

gatsby-node.js

@@ -1,7 +1,52 @@
-/**
- * Implement Gatsby's Node APIs in this file.
- *
- * See: https://www.gatsbyjs.org/docs/node-apis/
- */
+const path = require('path')
 
- // You can delete this file if you're not using it
+// Implement the Gatsby API “createPages”. This is called once the
+// data layer is bootstrapped to let plugins create pages from data.
+exports.createPages = ({ boundActionCreators, graphql }) => {
+  const { createPage } = boundActionCreators
+
+  return new Promise((resolve, reject) => {
+    const template = path.resolve('src/layouts/Project.js')
+
+    resolve(
+      graphql(`
+        {
+          allProjectsJson {
+            edges {
+              node {
+                title
+                slug
+                img
+                img_more
+                links {
+                  Link
+                  GitHub
+                  Info
+                }
+                description
+                techstack
+              }
+            }
+          }
+        }
+      `).then(result => {
+        if (result.errors) {
+          reject(result.errors)
+        }
+
+        console.log(result)
+
+        result.data.allProjectsJson.edges.forEach(({ node }) => {
+          const slug = node.slug
+
+          createPage({
+            path: slug,
+            component: template,
+            context: { slug: slug },
+          })
+        })
+
+        resolve()
+      }))
+  })
+}

package.json

@@ -7,11 +7,17 @@
     "gatsby-link": "^1.6.39",
     "gatsby-plugin-react-helmet": "^2.0.8",
     "gatsby-plugin-sass": "latest",
+    "gatsby-source-filesystem": "^1.5.28",
+    "gatsby-transformer-json": "^1.0.16",
     "react-helmet": "^5.2.0",
-    "react-markdown": "3.3.0",
+    "react-markdown": "^3.3.0",
     "react-transition-group": "^2.3.0"
   },
   "devDependencies": {
+    "babel-eslint": "^8.2.2",
+    "eslint": "^4.19.1",
+    "eslint-plugin-graphql": "^1.5.0",
+    "eslint-plugin-react": "^7.7.0",
     "prettier": "^1.11.1"
   },
   "scripts": {

src/components/atoms/Content.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import './Content.css'
+import './Content.scss'
 
 const Content = ({children}) => (
   <div className="content">

src/components/organisms/Projects.js

@@ -1,30 +1,27 @@
 import React from 'react'
-import Link from 'react-router-dom/Link'
+import PropTypes from 'prop-types'
+import Link from 'gatsby-link'
 import FadeIn from '../atoms/FadeIn'
-import projects from '../../data/projects.json'
 import images from '../../images'
 import './Projects.scss'
 
-const Projects = () => (
-  <div className="projects full-width">
-    {projects.map(project => (
-      <FadeIn key={project.slug}>
-        <Link
-          key={project.slug}
-          to={{ pathname: `/${project.slug}` }}
-          className="projects__project"
-        >
-          <h1 className="projects__project__title">{project.title}</h1>
+const Projects = ({ data }) => {
+  console.log(data)
+  const projects = data.allProjectsJson
 
-          <img
-            className="projects__project__image"
-            src={images[project.img]}
-            alt={project.title}
-          />
-        </Link>
-      </FadeIn>
-    ))}
-  </div>
-)
+  return <div className="projects full-width">
+      {projects.edges.map(({ node }) => <FadeIn key={node.slug}>
+          <Link key={node.slug} to={`/${node.slug}`} className="projects__project">
+            <h1 className="projects__project__title">{node.title}</h1>
+
+            <img className="projects__project__image" src={images[node.img]} alt={node.title} />
+          </Link>
+        </FadeIn>)}
+    </div>
+}
+
+Projects.propTypes = {
+  data: PropTypes.object,
+}
 
 export default Projects

src/layouts/Project.js

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import Helmet from 'react-helmet'
 import ReactMarkdown from 'react-markdown'
@@ -6,9 +6,13 @@ import Header from '../components/molecules/Header'
 import Content from '../components/atoms/Content'
 import FullWidth from '../components/atoms/FullWidth'
 import images from '../images'
-import './Project.css'
+import './Project.scss'
+
+const Project = ({ data }) => {
+  const project = data.allProjectsJson
+
+  console.log(project)
 
-const Project = ({ project }) => {
   const title = project.title
   const img = project.img
   const img_more = project.img_more
@@ -17,7 +21,7 @@ const Project = ({ project }) => {
   const techstack = project.techstack
 
   return (
-    <Fragment>
+    <div>
       <Helmet>
         <title>{title}</title>
       </Helmet>
@@ -67,12 +71,34 @@ const Project = ({ project }) => {
           </Content>
         </article>
       </main>
-    </Fragment>
+    </div>
   )
 }
 
 Project.propTypes = {
-  project: PropTypes.object
+  data: PropTypes.object
 }
 
 export default Project
+
+export const query = graphql`
+  query ProjectQuery($slug: String!) {
+    allProjectsJson(slug: { eq: $slug }) {
+      edges {
+        node {
+          title
+          slug
+          img
+          img_more
+          links {
+            Link
+            GitHub
+            Info
+          }
+          description
+          techstack
+        }
+      }
+    }
+  }
+`

src/pages/index.js

@@ -1,14 +1,34 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import Header from '../components/molecules/Header'
 import Projects from '../components/organisms/Projects'
 
-const Home = () => (
+const Home = ({ data }) => (
   <div>
     <Header />
     <main className="screen screen--home">
-      <Projects />
+      <Projects data={data} />
     </main>
   </div>
 )
 
+Home.propTypes = {
+  data: PropTypes.object,
+}
+
 export default Home
+
+export const query = graphql`
+  query IndexQuery {
+    allProjectsJson {
+      totalCount
+      edges {
+        node {
+          title
+          slug
+          img
+        }
+      }
+    }
+  }
+`