2018-06-13 20:46:36 +02:00
|
|
|
import React, { Component, Fragment } from 'react'
|
|
|
|
|
import PropTypes from 'prop-types'
|
|
|
|
|
import withRouter from 'react-router-dom/withRouter'
|
|
|
|
|
import TransitionGroup from 'react-transition-group/TransitionGroup'
|
2018-06-21 21:06:53 +02:00
|
|
|
import { StaticQuery, graphql } from 'gatsby'
|
2018-06-13 20:46:36 +02:00
|
|
|
import Head from './atoms/Head'
|
|
|
|
|
import Header from './organisms/Header'
|
|
|
|
|
import Footer from './organisms/Footer'
|
|
|
|
|
import { FadeIn } from './atoms/Animations'
|
|
|
|
|
|
|
|
|
|
class TransitionHandler extends Component {
|
|
|
|
|
shouldComponentUpdate() {
|
|
|
|
|
return this.props.location.pathname === window.location.pathname
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
render() {
|
|
|
|
|
const { children } = this.props
|
|
|
|
|
return <div className="transition-container">{children}</div>
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const Main = ({ children }) => <main className="screen">{children}</main>
|
|
|
|
|
|
|
|
|
|
const TemplateWrapper = ({ children, location }) => {
|
|
|
|
|
const isHomepage = location.pathname === '/'
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<StaticQuery
|
|
|
|
|
query={graphql`
|
|
|
|
|
query LayoutQuery {
|
|
|
|
|
# the data/meta.yml file
|
|
|
|
|
dataYaml {
|
|
|
|
|
title
|
|
|
|
|
tagline
|
|
|
|
|
description
|
|
|
|
|
url
|
|
|
|
|
email
|
|
|
|
|
avatar {
|
|
|
|
|
childImageSharp {
|
|
|
|
|
original: resize {
|
|
|
|
|
src
|
|
|
|
|
}
|
|
|
|
|
small: resize(width: 256) {
|
|
|
|
|
src
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
img {
|
|
|
|
|
childImageSharp {
|
|
|
|
|
resize(width: 980) {
|
|
|
|
|
src
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
social {
|
|
|
|
|
Email
|
|
|
|
|
Blog
|
|
|
|
|
Twitter
|
|
|
|
|
GitHub
|
|
|
|
|
Dribbble
|
|
|
|
|
}
|
|
|
|
|
availability {
|
|
|
|
|
status
|
|
|
|
|
}
|
|
|
|
|
gpg
|
|
|
|
|
addressbook
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
# the package.json file
|
|
|
|
|
portfolioJson {
|
|
|
|
|
name
|
|
|
|
|
homepage
|
|
|
|
|
repository
|
|
|
|
|
bugs
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
`}
|
|
|
|
|
render={data => {
|
|
|
|
|
const meta = data.dataYaml
|
|
|
|
|
const pkg = data.portfolioJson
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<Fragment>
|
|
|
|
|
<Head meta={meta} />
|
|
|
|
|
<Header meta={meta} isHomepage={isHomepage} />
|
|
|
|
|
|
|
|
|
|
<TransitionGroup component={Main} appear={true}>
|
|
|
|
|
<FadeIn
|
|
|
|
|
key={location.pathname}
|
|
|
|
|
timeout={{ enter: 200, exit: 150, appear: 200 }}
|
|
|
|
|
>
|
|
|
|
|
<TransitionHandler location={location}>
|
|
|
|
|
{children}
|
|
|
|
|
</TransitionHandler>
|
|
|
|
|
</FadeIn>
|
|
|
|
|
</TransitionGroup>
|
|
|
|
|
|
|
|
|
|
<Footer meta={meta} pkg={pkg} />
|
|
|
|
|
</Fragment>
|
|
|
|
|
)
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
TransitionHandler.propTypes = {
|
2018-06-21 21:06:53 +02:00
|
|
|
children: PropTypes.any.isRequired,
|
2018-06-13 20:46:36 +02:00
|
|
|
location: PropTypes.object.isRequired
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
Main.propTypes = {
|
2018-06-21 21:06:53 +02:00
|
|
|
children: PropTypes.any.isRequired
|
2018-06-13 20:46:36 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
TemplateWrapper.propTypes = {
|
2018-06-21 21:06:53 +02:00
|
|
|
children: PropTypes.any.isRequired,
|
2018-06-13 20:46:36 +02:00
|
|
|
location: PropTypes.object.isRequired
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export default withRouter(TemplateWrapper)
|
