2018-04-24 22:56:19 +02:00
|
|
|
import React, { Component, Fragment } from 'react'
|
2018-04-21 13:39:18 +02:00
|
|
|
import PropTypes from 'prop-types'
|
|
|
|
import Helmet from 'react-helmet'
|
|
|
|
import ReactMarkdown from 'react-markdown'
|
|
|
|
import Content from '../components/atoms/Content'
|
|
|
|
import FullWidth from '../components/atoms/FullWidth'
|
2018-04-30 01:18:54 +02:00
|
|
|
// import ProjectImage from '../components/atoms/ProjectImage'
|
|
|
|
import Img from 'gatsby-image'
|
2018-04-21 13:39:18 +02:00
|
|
|
import ProjectTechstack from '../components/molecules/ProjectTechstack'
|
|
|
|
import ProjectLinks from '../components/molecules/ProjectLinks'
|
|
|
|
import ProjectNav from '../components/molecules/ProjectNav'
|
2018-04-23 23:55:12 +02:00
|
|
|
import SEO from '../components/atoms/SEO'
|
2018-04-21 13:39:18 +02:00
|
|
|
import './Project.scss'
|
|
|
|
|
2018-04-22 23:51:50 +02:00
|
|
|
class Project extends Component {
|
2018-04-21 13:39:18 +02:00
|
|
|
constructor() {
|
|
|
|
super()
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
2018-04-23 23:55:12 +02:00
|
|
|
const postMeta = this.props.data.projectsJson
|
|
|
|
const pathContext = this.props.pathContext
|
|
|
|
|
2018-04-30 01:18:54 +02:00
|
|
|
const { title, description, links, techstack } = postMeta
|
2018-04-23 23:55:12 +02:00
|
|
|
const { next, previous } = pathContext
|
2018-04-21 13:39:18 +02:00
|
|
|
|
2018-04-30 01:18:54 +02:00
|
|
|
return <Fragment>
|
2018-04-21 13:39:18 +02:00
|
|
|
<Helmet>
|
|
|
|
<title>{title}</title>
|
|
|
|
</Helmet>
|
|
|
|
|
2018-04-23 23:55:12 +02:00
|
|
|
<SEO postMeta={postMeta} />
|
|
|
|
|
2018-04-21 13:39:18 +02:00
|
|
|
<article className="project">
|
|
|
|
<Content>
|
|
|
|
<h1 className="project__title">{title}</h1>
|
2018-04-30 01:18:54 +02:00
|
|
|
<ReactMarkdown source={description} escapeHtml={false} className="project__description" />
|
2018-04-21 13:39:18 +02:00
|
|
|
|
2018-04-30 01:18:54 +02:00
|
|
|
<FullWidth>
|
|
|
|
<Img sizes={this.props.data.mainImage.childImageSharp.sizes} alt={title} />
|
2018-04-21 13:39:18 +02:00
|
|
|
</FullWidth>
|
|
|
|
|
2018-04-30 01:18:54 +02:00
|
|
|
{/* {!!this.props.data.additionalImage && <FullWidth>
|
|
|
|
{this.props.data.additionalImage.map(image => (
|
|
|
|
<Img
|
|
|
|
key={image}
|
|
|
|
sizes={this.props.data.additionalImage.childImageSharp.sizes}
|
|
|
|
alt={title}
|
|
|
|
/>
|
2018-04-21 13:39:18 +02:00
|
|
|
))}
|
2018-04-30 01:18:54 +02:00
|
|
|
</FullWidth>} */}
|
2018-04-21 13:39:18 +02:00
|
|
|
|
|
|
|
<footer className="project__meta">
|
|
|
|
{!!techstack && <ProjectTechstack techstack={techstack} />}
|
|
|
|
{!!links && <ProjectLinks links={links} />}
|
|
|
|
</footer>
|
|
|
|
</Content>
|
|
|
|
</article>
|
|
|
|
|
|
|
|
<ProjectNav previous={previous} next={next} />
|
2018-04-24 22:56:19 +02:00
|
|
|
</Fragment>
|
2018-04-21 13:39:18 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
Project.propTypes = {
|
|
|
|
data: PropTypes.object.isRequired,
|
|
|
|
pathContext: PropTypes.object.isRequired,
|
|
|
|
}
|
|
|
|
|
|
|
|
export default Project
|
|
|
|
|
|
|
|
export const projectQuery = graphql`
|
2018-04-21 20:01:50 +02:00
|
|
|
query ProjectBySlug($slug: String!, $img: String!) {
|
2018-04-21 13:39:18 +02:00
|
|
|
projectsJson(slug: { eq: $slug }) {
|
|
|
|
title
|
2018-04-21 15:46:04 +02:00
|
|
|
slug
|
2018-04-21 13:39:18 +02:00
|
|
|
img
|
|
|
|
img_more
|
|
|
|
description
|
|
|
|
links {
|
|
|
|
title
|
|
|
|
url
|
|
|
|
}
|
|
|
|
techstack
|
|
|
|
}
|
2018-04-21 20:01:50 +02:00
|
|
|
mainImage: file(relativePath: { eq: $img }) {
|
|
|
|
childImageSharp {
|
|
|
|
sizes(maxWidth: 1440) {
|
|
|
|
...GatsbyImageSharpSizes
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2018-04-21 13:39:18 +02:00
|
|
|
}
|
|
|
|
`
|