2018-06-13 20:46:36 +02:00
|
|
|
import React, { Component } 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'
|
2018-06-21 21:06:53 +02:00
|
|
|
import { graphql } from 'gatsby'
|
2018-06-13 20:46:36 +02:00
|
|
|
import Layout from '../components/Layout'
|
2018-04-21 13:39:18 +02:00
|
|
|
import Content from '../components/atoms/Content'
|
|
|
|
import FullWidth from '../components/atoms/FullWidth'
|
2018-05-04 01:58:43 +02:00
|
|
|
import ProjectImage from '../components/atoms/ProjectImage'
|
2018-04-21 13:39:18 +02:00
|
|
|
import ProjectTechstack from '../components/molecules/ProjectTechstack'
|
|
|
|
import ProjectLinks from '../components/molecules/ProjectLinks'
|
2018-05-04 14:00:21 +02:00
|
|
|
import ProjectNav from '../components/molecules/ProjectNav'
|
2018-04-23 23:55:12 +02:00
|
|
|
import SEO from '../components/atoms/SEO'
|
2018-06-23 15:50:02 +02:00
|
|
|
|
|
|
|
import styles from './Project.module.scss'
|
2018-04-21 13:39:18 +02:00
|
|
|
|
2018-05-22 22:41:59 +02:00
|
|
|
const ProjectMeta = props => {
|
|
|
|
const { links, techstack } = props
|
|
|
|
|
|
|
|
return (
|
2018-06-23 15:50:02 +02:00
|
|
|
<footer className={styles.project__meta}>
|
2018-05-22 22:41:59 +02:00
|
|
|
{!!links && <ProjectLinks links={links} />}
|
|
|
|
{!!techstack && <ProjectTechstack techstack={techstack} />}
|
|
|
|
</footer>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2018-05-23 00:03:46 +02:00
|
|
|
const ProjectImages = props => (
|
|
|
|
<FullWidth>
|
|
|
|
{props.projectImages.map(({ node }) => (
|
2018-06-23 15:50:02 +02:00
|
|
|
<div className={styles.spacer} key={node.id}>
|
|
|
|
<ProjectImage fluid={node.fluid} alt={props.title} />
|
|
|
|
</div>
|
2018-05-23 00:03:46 +02:00
|
|
|
))}
|
|
|
|
</FullWidth>
|
|
|
|
)
|
|
|
|
|
2018-04-22 23:51:50 +02:00
|
|
|
class Project extends Component {
|
2018-05-11 21:44:34 +02:00
|
|
|
constructor(props) {
|
|
|
|
super(props)
|
|
|
|
|
|
|
|
const description = this.props.data.projectsYaml.description
|
|
|
|
|
|
|
|
this.state = {
|
2018-05-14 22:30:18 +02:00
|
|
|
descriptionWithLineBreaks: description.split('\n').join('\n\n')
|
2018-05-11 21:44:34 +02:00
|
|
|
}
|
2018-04-21 13:39:18 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
2018-05-05 00:17:26 +02:00
|
|
|
const meta = this.props.data.dataYaml
|
|
|
|
const project = this.props.data.projectsYaml
|
2018-05-04 01:58:43 +02:00
|
|
|
const projectImages = this.props.data.projectImages.edges
|
2018-05-11 21:44:34 +02:00
|
|
|
const { title, links, techstack } = project
|
2018-04-21 13:39:18 +02:00
|
|
|
|
2018-05-04 01:58:43 +02:00
|
|
|
return (
|
2018-06-23 00:54:45 +02:00
|
|
|
<Layout location={this.props.location}>
|
2018-05-23 00:03:46 +02:00
|
|
|
<Helmet title={title} />
|
2018-04-21 13:39:18 +02:00
|
|
|
|
2018-05-07 01:43:33 +02:00
|
|
|
<SEO project={project} meta={meta} />
|
2018-04-23 23:55:12 +02:00
|
|
|
|
2018-06-23 15:50:02 +02:00
|
|
|
<article className={styles.project}>
|
2018-04-21 13:39:18 +02:00
|
|
|
<Content>
|
2018-06-23 15:50:02 +02:00
|
|
|
<h1 className={styles.project__title}>{title}</h1>
|
2018-05-05 00:43:54 +02:00
|
|
|
<ReactMarkdown
|
2018-05-11 21:44:34 +02:00
|
|
|
source={this.state.descriptionWithLineBreaks}
|
2018-06-23 15:50:02 +02:00
|
|
|
className={styles.project__description}
|
2018-05-05 00:43:54 +02:00
|
|
|
/>
|
2018-05-23 00:03:46 +02:00
|
|
|
<ProjectImages projectImages={projectImages} title={title} />
|
2018-05-22 22:41:59 +02:00
|
|
|
<ProjectMeta links={links} techstack={techstack} />
|
2018-04-21 13:39:18 +02:00
|
|
|
</Content>
|
|
|
|
</article>
|
|
|
|
|
2018-06-22 18:54:29 +02:00
|
|
|
<ProjectNav slug={project.slug} />
|
2018-06-13 20:46:36 +02:00
|
|
|
</Layout>
|
2018-05-04 01:58:43 +02:00
|
|
|
)
|
2018-04-21 13:39:18 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-05-22 22:41:59 +02:00
|
|
|
ProjectMeta.propTypes = {
|
|
|
|
links: PropTypes.array,
|
|
|
|
techstack: PropTypes.array
|
|
|
|
}
|
|
|
|
|
2018-05-23 00:03:46 +02:00
|
|
|
ProjectImages.propTypes = {
|
|
|
|
projectImages: PropTypes.array,
|
|
|
|
title: PropTypes.string
|
|
|
|
}
|
|
|
|
|
2018-04-21 13:39:18 +02:00
|
|
|
Project.propTypes = {
|
2018-06-23 00:54:45 +02:00
|
|
|
data: PropTypes.object.isRequired,
|
|
|
|
location: PropTypes.object.isRequired
|
2018-04-21 13:39:18 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
export default Project
|
|
|
|
|
2018-06-11 21:11:18 +02:00
|
|
|
export const projectAndProjectsQuery = graphql`
|
2018-05-04 01:58:43 +02:00
|
|
|
query ProjectBySlug($slug: String!) {
|
2018-05-05 00:17:26 +02:00
|
|
|
projectsYaml(slug: { eq: $slug }) {
|
2018-05-04 14:00:21 +02:00
|
|
|
title
|
|
|
|
slug
|
|
|
|
description
|
|
|
|
links {
|
|
|
|
title
|
|
|
|
url
|
2018-04-21 13:39:18 +02:00
|
|
|
}
|
2018-05-04 14:00:21 +02:00
|
|
|
techstack
|
2018-05-07 01:43:33 +02:00
|
|
|
img {
|
|
|
|
childImageSharp {
|
|
|
|
twitterImage: resize(width: 980) {
|
|
|
|
src
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2018-04-21 13:39:18 +02:00
|
|
|
}
|
2018-05-14 20:10:59 +02:00
|
|
|
|
|
|
|
# the data/meta.yml file
|
2018-05-05 00:17:26 +02:00
|
|
|
dataYaml {
|
|
|
|
title
|
|
|
|
tagline
|
|
|
|
description
|
|
|
|
url
|
|
|
|
social {
|
|
|
|
Email
|
|
|
|
Blog
|
|
|
|
Twitter
|
|
|
|
GitHub
|
|
|
|
Dribbble
|
|
|
|
}
|
2018-05-07 01:43:33 +02:00
|
|
|
img {
|
|
|
|
childImageSharp {
|
|
|
|
resize(width: 980) {
|
|
|
|
src
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2018-05-05 00:17:26 +02:00
|
|
|
}
|
2018-06-11 21:11:18 +02:00
|
|
|
|
2018-05-04 16:54:08 +02:00
|
|
|
projectImages: allImageSharp(
|
2018-06-19 22:48:33 +02:00
|
|
|
filter: { fluid: { originalName: { regex: $slug } } }
|
2018-05-04 16:54:08 +02:00
|
|
|
sort: { fields: [id], order: ASC }
|
|
|
|
) {
|
2018-05-04 01:58:43 +02:00
|
|
|
edges {
|
|
|
|
node {
|
|
|
|
id
|
2018-06-19 22:48:33 +02:00
|
|
|
...ProjectImageFluid
|
2018-04-21 20:01:50 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2018-04-21 13:39:18 +02:00
|
|
|
}
|
|
|
|
`
|