tweaks & cleanup

gatsby-config.js

@@ -8,12 +8,9 @@ module.exports = {
   plugins: [
     'gatsby-plugin-react-next',
     'gatsby-plugin-react-helmet',
-    'gatsby-plugin-sitemap',
     'gatsby-transformer-json',
-    'gatsby-transformer-sharp',
-    'gatsby-plugin-sharp',
     'gatsby-plugin-offline',
-    'gatsby-plugin-sitemap',
+    'gatsby-plugin-remove-trailing-slashes',
     {
       resolve: 'gatsby-plugin-sass',
       options: {
@@ -30,13 +27,6 @@ module.exports = {
         path: `${__dirname}/data/`,
       }
     },
-    {
-      resolve: 'gatsby-source-filesystem',
-      options: {
-        name: 'images',
-        path: `${__dirname}/src/images`,
-      }
-    },
     {
       resolve: 'gatsby-plugin-google-analytics',
       options: {

gatsby-node.js

@@ -4,7 +4,7 @@ exports.createPages = ({ boundActionCreators, graphql }) => {
   const { createPage } = boundActionCreators
 
   return new Promise((resolve, reject) => {
-    const template = path.resolve('src/components/organisms/Project.js')
+    const template = path.resolve('src/templates/Project.js')
 
     resolve(graphql(`
         {
@@ -40,27 +40,14 @@ exports.createPages = ({ boundActionCreators, graphql }) => {
           reject(result.errors)
         }
 
-        result.data.allProjectsJson.edges.forEach(
+        result.data.allProjectsJson.edges.forEach(({ node, previous, next }) => {
-          ({ node, previous, next }) => {
             const slug = node.slug
-            const title = node.title
-            const img = node.img
-            const img_more = node.img_more
-            const description = node.description
-            const links = node.links
-            const techstack = node.techstack
 
             createPage({
-              path: slug,
+              path: `/${slug}/`,
               component: template,
               context: {
-                title,
                 slug,
-                img,
-                img_more,
-                description,
-                techstack,
-                links,
                 previous,
                 next,
               },
@@ -73,6 +60,20 @@ exports.createPages = ({ boundActionCreators, graphql }) => {
   })
 }
 
+// https://github.com/saschajullmann/gatsby-starter-gatsbythemes/blob/master/gatsby-node.js
+exports.modifyWebpackConfig = ({ config, stage }) => {
+  switch (stage) {
+    case 'develop':
+      config.preLoader('eslint-loader', {
+        test: /\.(js|jsx)$/,
+        exclude: /node_modules/,
+      })
+
+      break
+  }
+  return config
+}
+
 // https://github.com/gatsbyjs/gatsby/issues/2285#issuecomment-333343938
 exports.modifyWebpackConfig = ({ config, stage }) => {
   if (stage === 'build-html') {

package.json

@@ -4,18 +4,15 @@
   "private": true,
   "dependencies": {
     "gatsby": "^1.9.253",
-    "gatsby-image": "^1.0.47",
     "gatsby-link": "^1.6.41",
     "gatsby-plugin-google-analytics": "^1.0.31",
     "gatsby-plugin-offline": "^1.0.15",
     "gatsby-plugin-react-helmet": "^2.0.11",
     "gatsby-plugin-react-next": "^1.0.11",
+    "gatsby-plugin-remove-trailing-slashes": "^1.0.9",
     "gatsby-plugin-sass": "^1.0.26",
-    "gatsby-plugin-sharp": "^1.6.43",
-    "gatsby-plugin-sitemap": "^1.2.22",
     "gatsby-source-filesystem": "^1.5.33",
     "gatsby-transformer-json": "^1.0.16",
-    "gatsby-transformer-sharp": "^1.6.23",
     "react-helmet": "^5.2.0",
     "react-markdown": "^3.3.0",
     "react-transition-group": "^2.3.1",

src/components/atoms/Head.js

@@ -9,14 +9,13 @@ class Head extends React.Component {
   }
 
   render() {
-    const { title, tagline, description, url } = this.props.meta
+    const { title, tagline, description } = this.props.meta
 
     return (
       <Helmet
         defaultTitle={`${title.toLowerCase()} { ${tagline.toLowerCase()} }`}
         titleTemplate={`%s // ${title.toLowerCase()} { ${tagline.toLowerCase()} }`}
       >
-
         <meta name="description" content={description} />
 
         <meta content="noindex,nofollow" name="robots" />

src/components/molecules/Availability.js

@@ -6,18 +6,27 @@ import './Availability.scss'
 const Availability = ({ meta, hide }) => {
   const { availability, social } = meta
 
-  const available = `👔 Available for new projects. <a href="${social.Email}">Let’s talk</a>!`
+  const available = `👔 Available for new projects. <a href="${
+    social.Email
+  }">Let’s talk</a>!`
   const unavailable = 'Not available for new projects.'
 
   return (
     <Fragment>
       {!hide && (
         <FadeIn>
-          <aside className={availability ? 'availability available' : 'availability unavailable'}>
+          <aside
-              <p dangerouslySetInnerHTML={{
+            className={
-                  __html: availability ? available : unavailable
+              availability
-                }}
+                ? 'availability available'
-              />
+                : 'availability unavailable'
+            }
+          >
+            <p
+              dangerouslySetInnerHTML={{
+                __html: availability ? available : unavailable,
+              }}
+            />
           </aside>
         </FadeIn>
       )}

src/components/organisms/Footer.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Social from './Social'
+import Social from '../molecules/Social'
 import './Footer.scss'
 
 const Footer = ({ meta }) => {

src/components/organisms/Header.js

@@ -3,8 +3,8 @@ import Link from 'gatsby-link'
 import PropTypes from 'prop-types'
 import FadeIn from '../atoms/FadeIn'
 import { Logo } from '../atoms/Icons'
-import Social from './Social'
+import Social from '../molecules/Social'
-import Availability from './Availability'
+import Availability from '../molecules/Availability'
 import './Header.scss'
 
 const Header = ({ meta, isHomepage }) => {
@@ -17,8 +17,7 @@ const Header = ({ meta, isHomepage }) => {
           <Logo className="header__logo" />
           <h1 className="header__title">{meta.title.toLowerCase()}</h1>
           <p className="header__description">
-            <span>{'{ '}</span> {meta.tagline.toLowerCase()}{' '}
+            <span>{'{ '}</span> {meta.tagline.toLowerCase()} <span>{' }'}</span>
-            <span>{' }'}</span>
           </p>
         </Link>
       </FadeIn>

src/components/organisms/Project.js

@@ -1,73 +0,0 @@
-import React, { Fragment } from 'react'
-import PropTypes from 'prop-types'
-import Helmet from 'react-helmet'
-import ReactMarkdown from 'react-markdown'
-import Content from '../atoms/Content'
-import FullWidth from '../atoms/FullWidth'
-import ProjectImage from '../atoms/ProjectImage'
-import ProjectTechstack from '../molecules/ProjectTechstack'
-import ProjectLinks from '../molecules/ProjectLinks'
-import ProjectNav from '../molecules/ProjectNav'
-import images from '../../images'
-import './Project.scss'
-
-const Project = ({ pathContext }) => {
-  const project = pathContext
-  const {
-    title,
-    img,
-    img_more,
-    description,
-    links,
-    techstack,
-    next,
-    previous,
-  } = project
-
-  return (
-    <Fragment>
-      <Helmet>
-        <title>{title}</title>
-        <meta name="description" content={description} />
-      </Helmet>
-
-      <main className="screen screen--project">
-        <article className="project">
-          <Content>
-            <h1 className="project__title">{title}</h1>
-            <ReactMarkdown
-              source={description}
-              escapeHtml={false}
-              className="project__description"
-            />
-
-            <FullWidth>
-              <ProjectImage src={images[img]} alt={title} />
-            </FullWidth>
-
-            {!!img_more && (
-              <FullWidth>
-                {img_more.map(key => (
-                  <ProjectImage key={key} src={images[key]} alt={title} />
-                ))}
-              </FullWidth>
-            )}
-
-            <footer className="project__meta">
-              {!!techstack && <ProjectTechstack techstack={techstack} />}
-              {!!links && <ProjectLinks links={links} />}
-            </footer>
-          </Content>
-        </article>
-
-        <ProjectNav previous={previous} next={next} />
-      </main>
-    </Fragment>
-  )
-}
-
-Project.propTypes = {
-  pathContext: PropTypes.object,
-}
-
-export default Project

src/layouts/index.js

@@ -1,9 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import Head from '../components/atoms/Head'
-import FadeIn from '../components/atoms/FadeIn'
+import Header from '../components/organisms/Header'
-import Header from '../components/molecules/Header'
+import Footer from '../components/organisms/Footer'
-import Footer from '../components/molecules/Footer'
 import './index.scss'
 
 const TemplateWrapper = ({ data, location, children }) => {
@@ -14,14 +13,16 @@ const TemplateWrapper = ({ data, location, children }) => {
     <div className="app">
       <Head meta={meta} />
       <Header meta={meta} isHomepage={isHomepage} />
-      <FadeIn>{children()}</FadeIn>
+
+      {children()}
+
       <Footer meta={meta} />
     </div>
   )
 }
 
 TemplateWrapper.propTypes = {
-  children: PropTypes.func,
+  children: PropTypes.any,
   data: PropTypes.object,
   location: PropTypes.object,
 }

src/templates/Project.js

@@ -0,0 +1,92 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Helmet from 'react-helmet'
+import ReactMarkdown from 'react-markdown'
+import Content from '../components/atoms/Content'
+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 images from '../images'
+import './Project.scss'
+
+class Project extends React.Component {
+  constructor() {
+    super()
+  }
+
+  render() {
+    const {
+      title,
+      img,
+      img_more,
+      description,
+      links,
+      techstack,
+    } = this.props.data.projectsJson
+    const { next, previous } = this.props.pathContext
+
+    return (
+      <main className="screen screen--project">
+        <Helmet>
+          <title>{title}</title>
+          <meta name="description" content={description} />
+        </Helmet>
+
+        <article className="project">
+          <Content>
+            <h1 className="project__title">{title}</h1>
+            <ReactMarkdown
+              source={description}
+              escapeHtml={false}
+              className="project__description"
+            />
+
+            <FullWidth>
+              <ProjectImage src={images[img]} alt={title} />
+            </FullWidth>
+
+            {!!img_more && (
+              <FullWidth>
+                {img_more.map(key => (
+                  <ProjectImage key={key} src={images[key]} alt={title} />
+                ))}
+              </FullWidth>
+            )}
+
+            <footer className="project__meta">
+              {!!techstack && <ProjectTechstack techstack={techstack} />}
+              {!!links && <ProjectLinks links={links} />}
+            </footer>
+          </Content>
+        </article>
+
+        <ProjectNav previous={previous} next={next} />
+      </main>
+    )
+  }
+}
+
+Project.propTypes = {
+  data: PropTypes.object.isRequired,
+  pathContext: PropTypes.object.isRequired,
+}
+
+export default Project
+
+export const projectQuery = graphql`
+  query ProjectBySlug($slug: String!) {
+    projectsJson(slug: { eq: $slug }) {
+      title
+      img
+      img_more
+      description
+      links {
+        title
+        url
+      }
+      techstack
+    }
+  }
+`