simplify layout
This commit is contained in:
parent
db6addcbe2
commit
ee8c5fb67a
GPG Key ID:
606EEEF3C479A91F
|
|
@ -14,7 +14,7 @@ module.exports = {
|
|||
'gatsby-transformer-sharp',
|
||||
'gatsby-plugin-sharp',
|
||||
'gatsby-plugin-sitemap',
|
||||
'gatsby-plugin-offline',
|
||||
// 'gatsby-plugin-offline',
|
||||
{
|
||||
resolve: 'gatsby-transformer-json',
|
||||
options: {
|
||||
|
|
|
|||
|
|
@ -1,28 +1,12 @@
|
|||
import React, { Component, Fragment } from 'react'
|
||||
import React, { Fragment } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import withRouter from 'react-router-dom/withRouter'
|
||||
import TransitionGroup from 'react-transition-group/TransitionGroup'
|
||||
import { StaticQuery, graphql } from 'gatsby'
|
||||
import Head from './atoms/Head'
|
||||
import Header from './organisms/Header'
|
||||
import Footer from './organisms/Footer'
|
||||
import { FadeIn } from './atoms/Animations'
|
||||
import styles from './Layout.module.scss'
|
||||
|
||||
class TransitionHandler extends Component {
|
||||
shouldComponentUpdate() {
|
||||
return this.props.location.pathname === window.location.pathname
|
||||
}
|
||||
|
||||
render() {
|
||||
const { children } = this.props
|
||||
return <div className={styles.transitionContainer}>{children}</div>
|
||||
}
|
||||
}
|
||||
|
||||
const Main = ({ children }) => <main className={styles.screen}>{children}</main>
|
||||
|
||||
const TemplateWrapper = ({ children, location }) => {
|
||||
const Layout = ({ children, location }) => {
|
||||
const isHomepage = location.pathname === '/'
|
||||
|
||||
return (
|
||||
|
|
@ -66,41 +50,21 @@ const TemplateWrapper = ({ children, location }) => {
|
|||
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
|
||||
className={styles.TransitionGroup}
|
||||
component={Main}
|
||||
appear={true}
|
||||
>
|
||||
<FadeIn
|
||||
key={location.pathname}
|
||||
timeout={{ enter: 200, exit: 150, appear: 200 }}
|
||||
>
|
||||
<TransitionHandler location={location}>
|
||||
{children}
|
||||
</TransitionHandler>
|
||||
</FadeIn>
|
||||
</TransitionGroup>
|
||||
<main className={styles.screen} location={location}>
|
||||
{children}
|
||||
</main>
|
||||
|
||||
<Footer meta={meta} pkg={pkg} />
|
||||
<Footer meta={meta} />
|
||||
</Fragment>
|
||||
)
|
||||
}}
|
||||
|
|
@ -108,18 +72,9 @@ const TemplateWrapper = ({ children, location }) => {
|
|||
)
|
||||
}
|
||||
|
||||
TransitionHandler.propTypes = {
|
||||
Layout.propTypes = {
|
||||
children: PropTypes.any.isRequired,
|
||||
location: PropTypes.object.isRequired
|
||||
}
|
||||
|
||||
Main.propTypes = {
|
||||
children: PropTypes.any.isRequired
|
||||
}
|
||||
|
||||
TemplateWrapper.propTypes = {
|
||||
children: PropTypes.any.isRequired,
|
||||
location: PropTypes.object.isRequired
|
||||
}
|
||||
|
||||
export default withRouter(TemplateWrapper)
|
||||
export default Layout
|
||||
|
|
|
|||
|
|
@ -4,12 +4,3 @@
|
|||
flex: 1;
|
||||
padding: $spacer;
|
||||
}
|
||||
|
||||
.transitionGroup {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.transitionContainer {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import React, { PureComponent } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { StaticQuery, graphql } from 'gatsby'
|
||||
import Vcard from '../atoms/Vcard'
|
||||
import LogoUnit from '../atoms/LogoUnit'
|
||||
import Networks from '../molecules/Networks'
|
||||
|
|
@ -14,24 +15,43 @@ class Footer extends PureComponent {
|
|||
|
||||
render() {
|
||||
const meta = this.props.meta
|
||||
const pkg = this.props.pkg
|
||||
|
||||
return (
|
||||
<footer className={styles.footer}>
|
||||
<LogoUnit meta={meta} minimal />
|
||||
<Networks meta={meta} minimal />
|
||||
<StaticQuery
|
||||
query={graphql`
|
||||
query FooterQuery {
|
||||
# the package.json file
|
||||
portfolioJson {
|
||||
name
|
||||
homepage
|
||||
repository
|
||||
bugs
|
||||
}
|
||||
}
|
||||
`}
|
||||
render={data => {
|
||||
const pkg = data.portfolioJson
|
||||
|
||||
<p className={styles.footer__actions}>
|
||||
<Vcard meta={meta} />
|
||||
<a href={meta.gpg}>PGP/GPG key</a>
|
||||
<a href={pkg.bugs}>Found a bug?</a>
|
||||
</p>
|
||||
<p className={styles.footer__copyright}>
|
||||
<small>
|
||||
© {this.state.year} {meta.title} — All Rights Reserved
|
||||
</small>
|
||||
</p>
|
||||
</footer>
|
||||
return (
|
||||
<footer className={styles.footer}>
|
||||
<LogoUnit meta={meta} minimal />
|
||||
<Networks meta={meta} minimal />
|
||||
|
||||
<p className={styles.footer__actions}>
|
||||
<Vcard meta={meta} />
|
||||
<a href={meta.gpg}>PGP/GPG key</a>
|
||||
<a href={pkg.bugs}>Found a bug?</a>
|
||||
</p>
|
||||
<p className={styles.footer__copyright}>
|
||||
<small>
|
||||
© {this.state.year} {meta.title} — All Rights
|
||||
Reserved
|
||||
</small>
|
||||
</p>
|
||||
</footer>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -38,5 +38,5 @@
|
|||
}
|
||||
|
||||
.footer__copyright {
|
||||
opacity: .6;
|
||||
opacity: .7;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ body {
|
|||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
min-height: 100vh;
|
||||
background-color: $body-background-color;
|
||||
background: $body-background-color;
|
||||
transition: background .6s $easing;
|
||||
|
||||
&.dark {
|
||||
|
|
|
|||
Loading…
Reference in New Issue