Merge branch 'feature/gatsby' into 'master'

Migrate to Gatsby.js

See merge request m/portfolio!1

.eslintrc

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

.gitignore

@@ -1,24 +1,12 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
+# Project dependencies
+.cache
+node_modules
+yarn-error.log
 
-# dependencies
+# Build directory
-/node_modules
+/public
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
 
 npm-debug.log*
 yarn-debug.log*
-yarn-error.log*
 yarn.lock
 package-lock.json
-src/**/*.css

.gitlab-ci.yml

@@ -7,7 +7,7 @@ cache:
 testing:
   stage: test
   script:
-    - npm install
+    - npm i gatsby-cli -g
+    - npm i
     - npm test
-    - npm run build-css
+    - npm run build
-    - npm run build-js

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "es5"
+}

data/meta.json

@@ -2,6 +2,7 @@
   "title": "Matthias Kretschmann",
   "tagline": "Designer & Developer",
   "description": "",
+  "url": "https://matthiaskretschmann.com",
   "social": {
     "Twitter": "https://twitter.com/kremalicious",
     "GitHub": "https://github.com/kremalicious",

gatsby-browser.js

@@ -0,0 +1,7 @@
+/**
+ * Implement Gatsby's Browser APIs in this file.
+ *
+ * See: https://www.gatsbyjs.org/docs/browser-apis/
+ */
+
+ // You can delete this file if you're not using it

gatsby-config.js

@@ -0,0 +1,29 @@
+const meta = require('./data/meta.json')
+
+module.exports = {
+  siteMetadata: {
+    siteUrl: `${meta.url}`,
+  },
+  plugins: [
+    'gatsby-plugin-react-next',
+    'gatsby-plugin-react-helmet',
+    'gatsby-transformer-json',
+    'gatsby-plugin-sitemap',
+    {
+      resolve: 'gatsby-source-filesystem',
+      options: {
+        name: 'data',
+        path: `${__dirname}/data/`,
+      },
+    },
+    {
+      resolve: 'gatsby-plugin-sass',
+      options: {
+        includePaths: [
+          `${__dirname}/node_modules`,
+          `${__dirname}/src/styles`
+        ],
+      },
+    }
+  ]
+}

gatsby-node.js

@@ -0,0 +1,52 @@
+const path = require('path')
+
+// 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()
+      }))
+  })
+}

gatsby-ssr.js

@@ -0,0 +1,7 @@
+/**
+ * Implement Gatsby's SSR (Server Side Rendering) APIs in this file.
+ *
+ * See: https://www.gatsbyjs.org/docs/ssr-apis/
+ */
+
+ // You can delete this file if you're not using it

package.json

@@ -3,38 +3,34 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "node-sass-chokidar": "^1.2.2",
+    "gatsby": "^1.9.241",
-    "npm-run-all": "^4.1.2",
+    "gatsby-link": "^1.6.39",
-    "react": "^16.3.0",
+    "gatsby-plugin-react-helmet": "^2.0.8",
-    "react-dom": "^16.3.0",
+    "gatsby-plugin-react-next": "^1.0.11",
+    "gatsby-plugin-sass": "latest",
+    "gatsby-plugin-sitemap": "^1.2.20",
+    "gatsby-source-filesystem": "^1.5.28",
+    "gatsby-transformer-json": "^1.0.16",
     "react-helmet": "^5.2.0",
-    "react-lazyload": "^2.3.0",
     "react-markdown": "^3.3.0",
-    "react-router-dom": "^4.2.2",
-    "react-scripts": "1.1.1",
     "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",
-    "jest-cli": "^22.4.3",
+    "prettier": "^1.11.1",
-    "react-snap": "^1.12.0",
     "stylelint": "^9.2.0",
     "stylelint-config-standard": "^18.2.0"
   },
   "scripts": {
-    "lint:js": "eslint ./{src,public}/**/*.js",
+    "lint:js": "eslint ./src/**/*.js",
     "lint:css": "stylelint ./src/**/*.scss",
     "lint": "npm run lint:js && npm run lint:css",
-    "build-css": "node-sass-chokidar --include-path src/stylesheets/ src/ -o src/",
+    "build": "gatsby build",
-    "watch-css": "npm run build-css && node-sass-chokidar --include-path src/stylesheets/ src/ -o src/ --watch --recursive",
+    "start": "gatsby develop",
-    "start-js": "react-scripts start",
+    "format": "prettier --write 'src/**/*.js'",
-    "start": "npm-run-all -p watch-css start-js",
+    "test": "npm run lint"
-    "build-js": "react-scripts build",
-    "build": "npm-run-all build-css build-js",
-    "test": "npm run lint && react-scripts test --env=jsdom",
-    "eject": "react-scripts eject",
-    "postbuild": "react-snap"
   }
 }

public/index.html

@@ -1,20 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta name="theme-color" content="#000000">
-
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-    <link rel="stylesheet" href="https://use.typekit.net/dtg3zui.css">
-
-    <title>matthias kretschmann { designer & developer }</title>
-  </head>
-  <body>
-    <noscript>
-      You need to enable JavaScript to run this app.
-    </noscript>
-    <div id="root"></div>
-  </body>
-</html>

public/manifest.json

@@ -1,15 +0,0 @@
-{
-  "short_name": "Matthias Kretschmann",
-  "name": "Portfolio of Designer & Developer Matthias Kretschmann",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    }
-  ],
-  "start_url": "./index.html",
-  "display": "standalone",
-  "theme_color": "#015565",
-  "background_color": "#e7eef4"
-}

src/App.js

@@ -1,27 +0,0 @@
-import React, { Fragment } from 'react'
-import Helmet from 'react-helmet/es/Helmet'
-import Routes from './Routes'
-import FadeIn from './components/atoms/FadeIn'
-import Footer from './components/molecules/Footer'
-import meta from './data/meta.json'
-
-const Head = () => (
-  <Helmet
-    defaultTitle={`${meta.title.toLowerCase()} { ${meta.tagline.toLowerCase()} }`}
-    titleTemplate={`%s // ${meta.title.toLowerCase()} { ${meta.tagline.toLowerCase()} }`}
-  />
-)
-
-const App = () => (
-  <Fragment>
-    <Head />
-    <FadeIn>
-      <div className="app">
-        <Routes />
-        <Footer />
-      </div>
-    </FadeIn>
-  </Fragment>
-)
-
-export default App

src/App.test.js

@@ -1,11 +0,0 @@
-/* global it */
-
-import React from 'react'
-import ReactDOM from 'react-dom'
-import App from './App'
-
-it('renders without crashing', () => {
-  const div = document.createElement('div')
-  ReactDOM.render(<App />, div)
-  ReactDOM.unmountComponentAtNode(div)
-})

src/Routes.js

@@ -1,27 +0,0 @@
-import React from 'react'
-import Switch from 'react-router-dom/Switch'
-import Route from 'react-router-dom/Route'
-import Home from './components/pages/Home'
-import Project from './components/templates/Project'
-import NotFound from './components/pages/NotFound'
-import projects from './data/projects.json'
-
-const Routes = () => (
-  <Switch>
-    <Route exact path="/" component={Home} />
-    {projects.map(project => (
-      <Route
-        key={project.slug}
-        path={`/${project.slug}`}
-        render={(props) =>
-          <Project
-            {...props}
-            project={project} />
-        }
-      />
-    ))}
-    <Route component={NotFound} />
-  </Switch>
-)
-
-export default Routes

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/atoms/FadeIn.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import CSSTransition from 'react-transition-group/CSSTransition'
-import './FadeIn.css'
+import './FadeIn.scss'
 
 const FadeIn = (props) => (
   <CSSTransition

src/components/atoms/FullWidth.js

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

src/components/atoms/Icons.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import './Icons.css'
+import './Icons.scss'
 
 export const Facebook = props => (
   <svg className="icon" viewBox="0 0 20 20" width="20" height="20" {...props}>

src/components/molecules/Footer.js

@@ -1,6 +1,6 @@
 import React from 'react'
-import meta from '../../data/meta.json'
+import meta from '../../../data/meta.json'
-import './Footer.css'
+import './Footer.scss'
 
 const Footer = () => {
   const year = new Date().getFullYear()

src/components/molecules/Header.js

@@ -2,8 +2,8 @@ import React, { Component } from 'react'
 import Link from 'react-router-dom/Link'
 import PropTypes from 'prop-types'
 import Social from './Social'
-import './Header.css'
+import './Header.scss'
-import meta from '../../data/meta.json'
+import meta from '../../../data/meta.json'
 
 class Header extends Component {
   render() {

src/components/molecules/Social.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Twitter, GitHub, Facebook } from '../atoms/Icons'
-import meta from '../../data/meta.json'
+import meta from '../../../data/meta.json'
-import './Social.css'
+import './Social.scss'
 
 const social = meta.social
 

src/components/organisms/Projects.js

@@ -1,29 +1,26 @@
 import React from 'react'
-import Link from 'react-router-dom/Link'
+import PropTypes from 'prop-types'
-import LazyLoad from 'react-lazyload'
+import Link from 'gatsby-link'
 import FadeIn from '../atoms/FadeIn'
-import projects from '../../data/projects.json'
 import images from '../../images'
-import './Projects.css'
+import './Projects.scss'
 
-const Projects = () => (
+const Projects = ({ data }) => {
-  <div className="projects full-width">
+  const projects = data.allProjectsJson
-    {projects.map(project => (
-      <LazyLoad key={project.slug} height={700} offset={200} once>
-        <FadeIn>
-          <Link
-            key={project.slug}
-            to={{ pathname: `/${project.slug}` }}
-            className="projects__project"
-          >
-            <h1 className="projects__project__title">{project.title}</h1>
 
-            <img className="projects__project__image" src={images[project.img]} alt={project.title} />
+  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>
+        </FadeIn>)}
-      </LazyLoad>
+    </div>
-    ))}
+}
-  </div>
+
-)
+Projects.propTypes = {
+  data: PropTypes.object,
+}
 
 export default Projects

src/components/pages/Home.js

@@ -1,18 +0,0 @@
-import React, { Component, Fragment } from 'react'
-import Header from '../molecules/Header'
-import Projects from '../organisms/Projects'
-
-class Home extends Component {
-  render() {
-    return (
-      <Fragment>
-        <Header />
-        <main className="screen screen--home">
-          <Projects />
-        </main>
-      </Fragment>
-    )
-  }
-}
-
-export default Home

src/index.js

@@ -1,16 +0,0 @@
-import React from 'react'
-import { hydrate, render } from 'react-dom'
-import Router from 'react-router-dom/BrowserRouter'
-import './index.css'
-import App from './App'
-import registerServiceWorker from './registerServiceWorker'
-
-const rootElement = document.getElementById('root')
-
-if (rootElement.hasChildNodes()) {
-  hydrate(<Router><App /></Router>, rootElement)
-} else {
-  render(<Router><App /></Router>, rootElement)
-}
-
-registerServiceWorker()

src/layouts/Project.js

@@ -1,14 +1,15 @@
-import React, { Fragment } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
-import Helmet from 'react-helmet/es/Helmet'
+import Helmet from 'react-helmet'
 import ReactMarkdown from 'react-markdown'
-import Header from '../molecules/Header'
+import Header from '../components/molecules/Header'
-import Content from '../atoms/Content'
+import Content from '../components/atoms/Content'
-import FullWidth from '../atoms/FullWidth'
+import FullWidth from '../components/atoms/FullWidth'
-import images from '../../images'
+import images from '../images'
-import './Project.css'
+import './Project.scss'
 
-const Project = ({ project }) => {
+const Project = ({ data }) => {
+  const project = data.allProjectsJson.edges[0].node
   const title = project.title
   const img = project.img
   const img_more = project.img_more
@@ -17,7 +18,7 @@ const Project = ({ project }) => {
   const techstack = project.techstack
 
   return (
-    <Fragment>
+    <div>
       <Helmet>
         <title>{title}</title>
       </Helmet>
@@ -67,12 +68,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(filter: { slug: { eq: $slug } }) {
+      edges {
+        node {
+          title
+          slug
+          img
+          img_more
+          links {
+            Link
+            GitHub
+            Info
+          }
+          description
+          techstack
+        }
+      }
+    }
+  }
+`

src/layouts/index.js

@@ -0,0 +1,30 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Helmet from 'react-helmet'
+import FadeIn from '../components/atoms/FadeIn'
+import Footer from '../components/molecules/Footer'
+import meta from '../../data/meta.json'
+import './index.scss'
+
+const Head = () => (
+  <Helmet
+    defaultTitle={`${meta.title.toLowerCase()} { ${meta.tagline.toLowerCase()} }`}
+    titleTemplate={`%s // ${meta.title.toLowerCase()} { ${meta.tagline.toLowerCase()} }`}
+  >
+    <link rel="stylesheet" href="https://use.typekit.net/dtg3zui.css" />
+  </Helmet>
+)
+
+const TemplateWrapper = ({ children }) => (
+  <div className="app">
+    <Head />
+    <FadeIn>{children()}</FadeIn>
+    <Footer />
+  </div>
+)
+
+TemplateWrapper.propTypes = {
+  children: PropTypes.func,
+}
+
+export default TemplateWrapper

src/pages/index.js

@@ -0,0 +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 = ({ data }) => (
+  <div>
+    <Header />
+    <main className="screen screen--home">
+      <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
+        }
+      }
+    }
+  }
+`

src/registerServiceWorker.js

@@ -1,112 +0,0 @@
-// In production, we register a service worker to serve assets from local cache.
-
-// This lets the app load faster on subsequent visits in production, and gives
-// it offline capabilities. However, it also means that developers (and users)
-// will only see deployed updates on the "N+1" visit to a page, since previously
-// cached resources are updated in the background.
-
-// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
-// This link also includes instructions on opting out of this behavior.
-
-const isLocalhost = Boolean(
-  window.location.hostname === 'localhost' ||
-    // [::1] is the IPv6 localhost address.
-    window.location.hostname === '[::1]' ||
-    // 127.0.0.1/8 is considered localhost for IPv4.
-    window.location.hostname.match(
-      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
-    )
-)
-
-export default function register() {
-  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
-    // The URL constructor is available in all browsers that support SW.
-    const publicUrl = new URL(process.env.PUBLIC_URL, window.location)
-    if (publicUrl.origin !== window.location.origin) {
-      // Our service worker won't work if PUBLIC_URL is on a different origin
-      // from what our page is served on. This might happen if a CDN is used to
-      // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
-      return
-    }
-
-    window.addEventListener('load', () => {
-      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`
-
-      if (isLocalhost) {
-        // This is running on localhost. Lets check if a service worker still exists or not.
-        checkValidServiceWorker(swUrl)
-
-        // Add some additional logging to localhost, pointing developers to the
-        // service worker/PWA documentation.
-        navigator.serviceWorker.ready.then(() => {
-          console.log('This web app is being served cache-first by a service worker. To learn more, visit https://goo.gl/SC7cgQ') // eslint-disable-line no-console
-        })
-      } else {
-        // Is not local host. Just register service worker
-        registerValidSW(swUrl)
-      }
-    })
-  }
-}
-
-function registerValidSW(swUrl) {
-  navigator.serviceWorker
-    .register(swUrl)
-    .then(registration => {
-      registration.onupdatefound = () => {
-        const installingWorker = registration.installing
-        installingWorker.onstatechange = () => {
-          if (installingWorker.state === 'installed') {
-            if (navigator.serviceWorker.controller) {
-              // At this point, the old content will have been purged and
-              // the fresh content will have been added to the cache.
-              // It's the perfect time to display a "New content is
-              // available; please refresh." message in your web app.
-              console.log('New content is available; please refresh.') // eslint-disable-line no-console
-            } else {
-              // At this point, everything has been precached.
-              // It's the perfect time to display a
-              // "Content is cached for offline use." message.
-              console.log('Content is cached for offline use.') // eslint-disable-line no-console
-            }
-          }
-        }
-      }
-    })
-    .catch(error => {
-      console.error('Error during service worker registration:', error) // eslint-disable-line no-console
-    })
-}
-
-function checkValidServiceWorker(swUrl) {
-  // Check if the service worker can be found. If it can't reload the page.
-  fetch(swUrl)
-    .then(response => {
-      // Ensure service worker exists, and that we really are getting a JS file.
-      if (
-        response.status === 404 ||
-        response.headers.get('content-type').indexOf('javascript') === -1
-      ) {
-        // No service worker found. Probably a different app. Reload the page.
-        navigator.serviceWorker.ready.then(registration => {
-          registration.unregister().then(() => {
-            window.location.reload()
-          })
-        })
-      } else {
-        // Service worker found. Proceed as normal.
-        registerValidSW(swUrl)
-      }
-    })
-    .catch(() => {
-      console.log('No internet connection found. App is running in offline mode.') // eslint-disable-line no-console
-    })
-}
-
-export function unregister() {
-  if ('serviceWorker' in navigator) {
-    navigator.serviceWorker.ready.then(registration => {
-      registration.unregister()
-    })
-  }
-}