migrate to Gatsby.js

.eslintrc

@@ -1,24 +0,0 @@
-{
-    "plugins": [
-        "react"
-    ],
-    "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" ]
-    }
-}

.gitignore

@@ -1,24 +1,13 @@
-# 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

@@ -9,5 +9,4 @@ testing:
   script:
     - npm install
     - npm test
-    - npm run build-css
+    - npm run build
-    - npm run build-js

.prettierrc

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

.stylelintrc

@@ -1,10 +0,0 @@
-{
-  "extends": [
-    "stylelint-config-standard"
-  ],
-  "syntax": "scss",
-  "rules": {
-      "indentation": 4,
-      "number-leading-zero": "never"
-  }
-}

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,17 @@
+module.exports = {
+  siteMetadata: {
+    title: 'Gatsby Default Starter',
+  },
+  plugins: [
+    'gatsby-plugin-react-helmet',
+    {
+      resolve: 'gatsby-plugin-sass',
+      options: {
+        includePaths: [
+          './node_modules',
+          './src/stylesheets',
+        ],
+      },
+    },
+  ],
+}

gatsby-node.js

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

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,21 @@
   "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-sass": "latest",
     "react-helmet": "^5.2.0",
-    "react-lazyload": "^2.3.0",
+    "react-markdown": "3.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",
+    "prettier": "^1.11.1"
-    "eslint": "^4.19.1",
-    "eslint-plugin-react": "^7.7.0",
-    "jest-cli": "^22.4.3",
-    "react-snap": "^1.12.0",
-    "stylelint": "^9.2.0",
-    "stylelint-config-standard": "^18.2.0"
   },
   "scripts": {
-    "lint:js": "eslint ./{src,public}/**/*.js",
+    "build": "gatsby build",
-    "lint:css": "stylelint ./src/**/*.scss",
+    "start": "gatsby develop",
-    "lint": "npm run lint:js && npm run lint:css",
+    "format": "prettier --write 'src/**/*.js'",
-    "build-css": "node-sass-chokidar --include-path src/stylesheets/ src/ -o src/",
+    "test": "echo \"Error: no test specified\" && exit 1"
-    "watch-css": "npm run build-css && node-sass-chokidar --include-path src/stylesheets/ src/ -o src/ --watch --recursive",
-    "start-js": "react-scripts start",
-    "start": "npm-run-all -p watch-css start-js",
-    "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 +1 @@
-<!DOCTYPE html>
+<!DOCTYPE html><html><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><title data-react-helmet="true"></title><script src="/socket.io/socket.io.js"></script></head><body><div id="___gatsby"></div><script src="/commons.js"></script></body></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/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 './Footer.css'
+import './Footer.scss'
 
 const Footer = () => {
   const year = new Date().getFullYear()

src/components/molecules/Header.js

@@ -2,7 +2,7 @@ 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'
 
 class Header extends Component {

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 './Social.css'
+import './Social.scss'
 
 const social = meta.social
 

src/components/organisms/Projects.js

@@ -1,27 +1,28 @@
 import React from 'react'
 import Link from 'react-router-dom/Link'
-import LazyLoad from 'react-lazyload'
 import FadeIn from '../atoms/FadeIn'
 import projects from '../../data/projects.json'
 import images from '../../images'
-import './Projects.css'
+import './Projects.scss'
 
 const Projects = () => (
   <div className="projects full-width">
     {projects.map(project => (
-      <LazyLoad key={project.slug} height={700} offset={200} once>
+      <FadeIn key={project.slug}>
-        <FadeIn>
+        <Link
-          <Link
+          key={project.slug}
-            key={project.slug}
+          to={{ pathname: `/${project.slug}` }}
-            to={{ pathname: `/${project.slug}` }}
+          className="projects__project"
-            className="projects__project"
+        >
-          >
+          <h1 className="projects__project__title">{project.title}</h1>
-            <h1 className="projects__project__title">{project.title}</h1>
 
-            <img className="projects__project__image" src={images[project.img]} alt={project.title} />
+          <img
-          </Link>
+            className="projects__project__image"
-        </FadeIn>
+            src={images[project.img]}
-      </LazyLoad>
+            alt={project.title}
+          />
+        </Link>
+      </FadeIn>
     ))}
   </div>
 )

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,11 +1,11 @@
 import React, { Fragment } 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'
 
 const Project = ({ project }) => {

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,14 @@
+import React from 'react'
+import Header from '../components/molecules/Header'
+import Projects from '../components/organisms/Projects'
+
+const Home = () => (
+  <div>
+    <Header />
+    <main className="screen screen--home">
+      <Projects />
+    </main>
+  </div>
+)
+
+export default Home

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()
-    })
-  }
-}