import React, { PureComponent } from 'react' import PropTypes from 'prop-types' import { graphql } from 'gatsby' 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 styles from './Project.module.scss' class ProjectMeta extends PureComponent { static propTypes = { links: PropTypes.array, techstack: PropTypes.array } render() { const { links, techstack } = this.props return ( ) } } class ProjectImages extends PureComponent { static propTypes = { projectImages: PropTypes.array, title: PropTypes.string } render() { return ( {this.props.projectImages.map(({ node }) => (
))}
) } } export default class Project extends PureComponent { static propTypes = { data: PropTypes.object.isRequired, location: PropTypes.object.isRequired } render() { const { data } = this.props const project = data.projectsYaml const projectImages = data.projectImages.edges const descriptionHtml = data.projectsYaml.fields.descriptionHtml const { title, links, techstack } = project return ( <>

{title}

) } } export const projectQuery = graphql` query($slug: String!) { projectsYaml(slug: { eq: $slug }) { title slug fields { descriptionHtml excerpt } links { title url type } techstack img { childImageSharp { twitterImage: resize(width: 980) { src } } } } projectImages: allImageSharp( filter: { fluid: { originalName: { regex: $slug } } } sort: { fields: [fluid___originalName], order: ASC } ) { edges { node { id ...ProjectImageFluid } } } } `