import React, { Component } from 'react'
import PropTypes from 'prop-types'
import Helmet from 'react-helmet'
import ReactMarkdown from 'react-markdown'
import Layout from '../components/Layout'
import Content from '../components/atoms/Content'
import FullWidth from '../components/atoms/FullWidth'
import ProjectImage from '../components/atoms/ProjectImage'
import ProjectTechstack from '../components/molecules/ProjectTechstack'
import ProjectLinks from '../components/molecules/ProjectLinks'
import ProjectNav from '../components/molecules/ProjectNav'
import SEO from '../components/atoms/SEO'
import './Project.scss'
const ProjectMeta = props => {
const { links, techstack } = props
return (
)
}
const ProjectImages = props => (
{props.projectImages.map(({ node }) => (
))}
)
class Project extends Component {
constructor(props) {
super(props)
const description = this.props.data.projectsYaml.description
this.state = {
descriptionWithLineBreaks: description.split('\n').join('\n\n')
}
}
render() {
const meta = this.props.data.dataYaml
const projects = this.props.data.allProjectsYaml.edges
const project = this.props.data.projectsYaml
const projectImages = this.props.data.projectImages.edges
const { title, links, techstack } = project
return (
{title}
)
}
}
ProjectMeta.propTypes = {
links: PropTypes.array,
techstack: PropTypes.array
}
ProjectImages.propTypes = {
projectImages: PropTypes.array,
title: PropTypes.string
}
Project.propTypes = {
data: PropTypes.object.isRequired
}
export default Project
export const projectAndProjectsQuery = graphql`
query ProjectBySlug($slug: String!) {
projectsYaml(slug: { eq: $slug }) {
title
slug
description
links {
title
url
}
techstack
img {
childImageSharp {
twitterImage: resize(width: 980) {
src
}
}
}
}
# the data/meta.yml file
dataYaml {
title
tagline
description
url
social {
Email
Blog
Twitter
GitHub
Dribbble
}
availability {
status
available
unavailable
}
img {
childImageSharp {
resize(width: 980) {
src
}
}
}
}
projectImages: allImageSharp(
filter: { fluid: { originalName: { regex: $slug } } }
sort: { fields: [id], order: ASC }
) {
edges {
node {
id
...ProjectImageFluid
}
}
}
allProjectsYaml {
edges {
node {
title
slug
img {
childImageSharp {
fluid(maxWidth: 500, quality: 85) {
...GatsbyImageSharpFluid_noBase64
}
}
}
}
}
}
}
`