migrate to Gatsby.js
This commit is contained in:
parent
78bdfcca02
commit
4f6158518b
GPG Key ID:
606EEEF3C479A91F
24
.eslintrc
24
.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" ]
|
||||
}
|
||||
}
|
||||
|
|
@ -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
|
||||
/node_modules
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
# Build directory
|
||||
/public
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
yarn.lock
|
||||
package-lock.json
|
||||
src/**/*.css
|
||||
|
|
|
|||
|
|
@ -9,5 +9,4 @@ testing:
|
|||
script:
|
||||
- npm install
|
||||
- npm test
|
||||
- npm run build-css
|
||||
- npm run build-js
|
||||
- npm run build
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"semi": false,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "es5"
|
||||
}
|
||||
10
.stylelintrc
10
.stylelintrc
|
|
@ -1,10 +0,0 @@
|
|||
{
|
||||
"extends": [
|
||||
"stylelint-config-standard"
|
||||
],
|
||||
"syntax": "scss",
|
||||
"rules": {
|
||||
"indentation": 4,
|
||||
"number-leading-zero": "never"
|
||||
}
|
||||
}
|
||||
|
|
@ -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
|
||||
|
|
@ -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',
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
37
package.json
37
package.json
|
|
@ -3,38 +3,21 @@
|
|||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"node-sass-chokidar": "^1.2.2",
|
||||
"npm-run-all": "^4.1.2",
|
||||
"react": "^16.3.0",
|
||||
"react-dom": "^16.3.0",
|
||||
"gatsby": "^1.9.241",
|
||||
"gatsby-link": "^1.6.39",
|
||||
"gatsby-plugin-react-helmet": "^2.0.8",
|
||||
"gatsby-plugin-sass": "latest",
|
||||
"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-markdown": "3.3.0",
|
||||
"react-transition-group": "^2.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-eslint": "^8.2.2",
|
||||
"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"
|
||||
"prettier": "^1.11.1"
|
||||
},
|
||||
"scripts": {
|
||||
"lint:js": "eslint ./{src,public}/**/*.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/",
|
||||
"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"
|
||||
"build": "gatsby build",
|
||||
"start": "gatsby develop",
|
||||
"format": "prettier --write 'src/**/*.js'",
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,20 +1 @@
|
|||
<!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>
|
||||
<!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>
|
||||
|
|
@ -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"
|
||||
}
|
||||
27
src/App.js
27
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
|
||||
|
|
@ -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)
|
||||
})
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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}>
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<Link
|
||||
key={project.slug}
|
||||
to={{ pathname: `/${project.slug}` }}
|
||||
className="projects__project"
|
||||
>
|
||||
<h1 className="projects__project__title">{project.title}</h1>
|
||||
<FadeIn key={project.slug}>
|
||||
<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} />
|
||||
</Link>
|
||||
</FadeIn>
|
||||
</LazyLoad>
|
||||
<img
|
||||
className="projects__project__image"
|
||||
src={images[project.img]}
|
||||
alt={project.title}
|
||||
/>
|
||||
</Link>
|
||||
</FadeIn>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -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
|
||||
16
src/index.js
16
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()
|
||||
|
|
@ -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 Content from '../atoms/Content'
|
||||
import FullWidth from '../atoms/FullWidth'
|
||||
import images from '../../images'
|
||||
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'
|
||||
|
||||
const Project = ({ project }) => {
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -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()
|
||||
})
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue