From 51524e9bd94afd1095097aea6c7a70c9d8de75aa Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Sun, 8 Apr 2018 22:49:58 +0200 Subject: [PATCH] changes --- .eslintrc | 3 +- gatsby-config.js | 23 ++-- gatsby-node.js | 22 ++-- package.json | 3 +- src/components/atoms/FadeIn.js | 2 +- src/components/molecules/Footer.js | 8 +- src/components/molecules/Head.js | 20 ++++ src/components/molecules/Header.js | 33 +++--- src/components/molecules/Social.js | 30 +++--- src/components/organisms/Project.js | 87 +++++++++++++++ .../organisms}/Project.scss | 0 src/components/organisms/Projects.js | 4 +- src/components/organisms/Projects.scss | 1 - {data => src/data}/meta.json | 0 {data => src/data}/projects.json | 0 src/layouts/Project.js | 101 ------------------ src/layouts/index.js | 52 ++++++--- src/pages/index.js | 10 +- 18 files changed, 217 insertions(+), 182 deletions(-) create mode 100644 src/components/molecules/Head.js create mode 100644 src/components/organisms/Project.js rename src/{layouts => components/organisms}/Project.scss (100%) rename {data => src/data}/meta.json (100%) rename {data => src/data}/projects.json (100%) delete mode 100644 src/layouts/Project.js diff --git a/.eslintrc b/.eslintrc index 8cf65df..f77d508 100644 --- a/.eslintrc +++ b/.eslintrc @@ -9,7 +9,8 @@ }, "env": { "browser": true, - "node": true + "node": true, + "es6": true }, "globals": { "graphql": true diff --git a/gatsby-config.js b/gatsby-config.js index c7aea29..0971015 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -1,4 +1,4 @@ -const meta = require('./data/meta.json') +const meta = require('./src/data/meta.json') module.exports = { siteMetadata: { @@ -7,24 +7,21 @@ module.exports = { plugins: [ 'gatsby-plugin-react-next', 'gatsby-plugin-react-helmet', - 'gatsby-transformer-json', 'gatsby-plugin-sitemap', 'gatsby-plugin-offline', + { + resolve: 'gatsby-plugin-sass', + options: { + includePaths: [`${__dirname}/node_modules`, `${__dirname}/src/styles`], + }, + }, { resolve: 'gatsby-source-filesystem', options: { name: 'data', - path: `${__dirname}/data/`, + path: `${__dirname}/src/data/`, }, }, - { - resolve: 'gatsby-plugin-sass', - options: { - includePaths: [ - `${__dirname}/node_modules`, - `${__dirname}/src/styles` - ], - }, - } - ] + 'gatsby-transformer-json', + ], } diff --git a/gatsby-node.js b/gatsby-node.js index 99f1e2e..07fc952 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -1,12 +1,10 @@ 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') + const template = path.resolve('src/components/organisms/Project.js') resolve( graphql(` @@ -34,15 +32,27 @@ exports.createPages = ({ boundActionCreators, graphql }) => { reject(result.errors) } - console.log(result) - result.data.allProjectsJson.edges.forEach(({ node }) => { 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, component: template, - context: { slug: slug }, + context: { + title, + slug, + img, + img_more, + description, + techstack, + links + } }) }) diff --git a/package.json b/package.json index 7e6a1cd..eef7499 100644 --- a/package.json +++ b/package.json @@ -20,13 +20,14 @@ "babel-eslint": "^8.2.2", "eslint": "^4.19.1", "eslint-plugin-graphql": "^1.5.0", + "eslint-plugin-prettier": "^2.6.0", "eslint-plugin-react": "^7.7.0", "prettier": "^1.11.1", "stylelint": "^9.2.0", "stylelint-config-standard": "^18.2.0" }, "scripts": { - "lint:js": "eslint ./src/**/*.js", + "lint:js": "eslint ./gatsby-*.js && eslint ./src/**/*.js", "lint:css": "stylelint ./src/**/*.scss", "lint": "npm run lint:js && npm run lint:css", "build": "gatsby build", diff --git a/src/components/atoms/FadeIn.js b/src/components/atoms/FadeIn.js index bfdf5dc..e0e8e76 100644 --- a/src/components/atoms/FadeIn.js +++ b/src/components/atoms/FadeIn.js @@ -2,7 +2,7 @@ import React from 'react' import CSSTransition from 'react-transition-group/CSSTransition' import './FadeIn.scss' -const FadeIn = (props) => ( +const FadeIn = props => ( { +const Footer = ({ meta }) => { const year = new Date().getFullYear() return ( @@ -12,4 +12,8 @@ const Footer = () => { ) } +Footer.propTypes = { + meta: PropTypes.object, +} + export default Footer diff --git a/src/components/molecules/Head.js b/src/components/molecules/Head.js new file mode 100644 index 0000000..9b28afc --- /dev/null +++ b/src/components/molecules/Head.js @@ -0,0 +1,20 @@ +import React from 'react' +import PropTypes from 'prop-types' +import Helmet from 'react-helmet' + +const Head = ({ meta }) => { + return ( + + + + ) +} + +Head.propTypes = { + meta: PropTypes.object, +} + +export default Head diff --git a/src/components/molecules/Header.js b/src/components/molecules/Header.js index 0a6c8c4..14c75a4 100644 --- a/src/components/molecules/Header.js +++ b/src/components/molecules/Header.js @@ -1,31 +1,28 @@ -import React, { Component } from 'react' +import React from 'react' import Link from 'react-router-dom/Link' import PropTypes from 'prop-types' import Social from './Social' import './Header.scss' -import meta from '../../../data/meta.json' -class Header extends Component { - render() { - const minimal = this.props.minimal - const classes = (minimal ? 'header header--minimal' : 'header') +const Header = ({ meta, minimal }) => { + const classes = minimal ? 'header header--minimal' : 'header' - return ( -
- - ␥ -

{meta.title}

-

{meta.tagline}

- + return ( +
+ + ␥ +

{meta.title}

+

{meta.tagline}

+ - -
- ) - } + +
+ ) } Header.propTypes = { - minimal: PropTypes.bool + minimal: PropTypes.bool, + meta: PropTypes.object, } export default Header diff --git a/src/components/molecules/Social.js b/src/components/molecules/Social.js index b00a6f3..7d914cb 100644 --- a/src/components/molecules/Social.js +++ b/src/components/molecules/Social.js @@ -1,10 +1,8 @@ import React from 'react' +import PropTypes from 'prop-types' import { Twitter, GitHub, Facebook } from '../atoms/Icons' -import meta from '../../../data/meta.json' import './Social.scss' -const social = meta.social - const SocialIcon = ({ title }) => { if (title === 'Twitter') { return @@ -15,14 +13,22 @@ const SocialIcon = ({ title }) => { } } -const Social = () => ( - -) +const Social = ({ meta }) => { + const social = meta.social + + return ( + + ) +} + +Social.propTypes = { + meta: PropTypes.object, +} export default Social diff --git a/src/components/organisms/Project.js b/src/components/organisms/Project.js new file mode 100644 index 0000000..55829bd --- /dev/null +++ b/src/components/organisms/Project.js @@ -0,0 +1,87 @@ +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 images from '../../images' +import './Project.scss' + +const Project = props => { + const project = props.pathContext + const title = project.title + const img = project.img + const img_more = project.img_more + const description = project.description + const links = project.links + const techstack = project.techstack + + return ( + + + {title} + + +
+
+ +

{title}

+ + + + {title} + + + + {!!img_more && + img_more.map(key => ( + {title} + ))} + + +
+
+

+ Technologies The tech stack I was involved with. +

+
    + {!!techstack && + techstack.map(tech =>
  • {tech}
    • )} +
+
+ +
+

+ Links See the project live on the interwebz. +

+
    + {!!links && + Object.keys(links).map(key => ( +
  • + {key} +
    • + ))} +
+
+
+ +
+
+ + ) +} + +Project.propTypes = { + pathContext: PropTypes.object, +} + +export default Project diff --git a/src/layouts/Project.scss b/src/components/organisms/Project.scss similarity index 100% rename from src/layouts/Project.scss rename to src/components/organisms/Project.scss diff --git a/src/components/organisms/Projects.js b/src/components/organisms/Projects.js index 1fbbb8e..e851edd 100644 --- a/src/components/organisms/Projects.js +++ b/src/components/organisms/Projects.js @@ -6,10 +6,10 @@ import images from '../../images' import './Projects.scss' const Projects = ({ data }) => { - const projects = data.allProjectsJson + const projects = data.allProjectsJson.edges return
- {projects.edges.map(({ node }) => + {projects.map(({ node }) =>

{node.title}

diff --git a/src/components/organisms/Projects.scss b/src/components/organisms/Projects.scss index b815704..a4e1426 100644 --- a/src/components/organisms/Projects.scss +++ b/src/components/organisms/Projects.scss @@ -7,7 +7,6 @@ } .projects__project { - max-height: 100vh; position: relative; background-color: $brand-grey-light; margin-bottom: $spacer * 4; diff --git a/data/meta.json b/src/data/meta.json similarity index 100% rename from data/meta.json rename to src/data/meta.json diff --git a/data/projects.json b/src/data/projects.json similarity index 100% rename from data/projects.json rename to src/data/projects.json diff --git a/src/layouts/Project.js b/src/layouts/Project.js deleted file mode 100644 index bb6ccc1..0000000 --- a/src/layouts/Project.js +++ /dev/null @@ -1,101 +0,0 @@ -import React from 'react' -import PropTypes from 'prop-types' -import Helmet from 'react-helmet' -import ReactMarkdown from 'react-markdown' -import Header from '../components/molecules/Header' -import Content from '../components/atoms/Content' -import FullWidth from '../components/atoms/FullWidth' -import images from '../images' -import './Project.scss' - -const Project = ({ data }) => { - const project = data.allProjectsJson.edges[0].node - const title = project.title - const img = project.img - const img_more = project.img_more - const description = project.description - const links = project.links - const techstack = project.techstack - - return ( -
- - {title} - - -
- -
-
- -

{title}

- - - - {title} - - - - {!!img_more && img_more.map(key => ( - {title} - ))} - - -
-
-

Technologies The tech stack I was involved with.

-
    - {!!techstack && techstack.map(tech => ( -
  • - {tech} -
    • - ))} -
-
- -
-

Links See the project live on the interwebz.

-
    - {!!links && Object.keys(links).map(key => ( -
  • - {key} -
    • - ))} -
-
-
- - -
-
-
- ) -} - -Project.propTypes = { - 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 - } - } - } - } -` diff --git a/src/layouts/index.js b/src/layouts/index.js index 608bc66..5dae686 100644 --- a/src/layouts/index.js +++ b/src/layouts/index.js @@ -1,30 +1,48 @@ import React from 'react' import PropTypes from 'prop-types' -import Helmet from 'react-helmet' +import Head from '../components/molecules/Head' import FadeIn from '../components/atoms/FadeIn' +import Header from '../components/molecules/Header' import Footer from '../components/molecules/Footer' -import meta from '../../data/meta.json' import './index.scss' -const Head = () => ( - - - -) +const TemplateWrapper = props => { + const meta = props.data.allDataJson.edges[0].node -const TemplateWrapper = ({ children }) => ( -
- - {children()} -
-
-) + return
+ +
+ {props.children()} +
+
+} TemplateWrapper.propTypes = { children: PropTypes.func, + data: PropTypes.object, } export default TemplateWrapper + +export const query = graphql` + query pageLayoutQueryAndMetaQuery { + allDataJson { + edges { + node { + title + tagline + description + url + social { + Twitter + GitHub + Facebook + } + } + } + } + sitePage { + jsonName + } + } + ` diff --git a/src/pages/index.js b/src/pages/index.js index 8967e18..d5e34ad 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -1,15 +1,11 @@ import React from 'react' import PropTypes from 'prop-types' -import Header from '../components/molecules/Header' import Projects from '../components/organisms/Projects' const Home = ({ data }) => ( -
-
-
- -
-
+
+ +
) Home.propTypes = {