1
0
mirror of https://github.com/kremalicious/portfolio.git synced 2024-10-31 23:35:29 +01:00
portfolio/src/templates/Project.jsx

121 lines
2.9 KiB
React
Raw Normal View History

2018-11-25 01:52:31 +01:00
import React, { PureComponent } from 'react'
2018-04-21 13:39:18 +02:00
import PropTypes from 'prop-types'
2018-06-21 21:06:53 +02:00
import { graphql } from 'gatsby'
2018-04-21 13:39:18 +02:00
import FullWidth from '../components/atoms/FullWidth'
2019-11-07 23:54:33 +01: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-11-25 01:52:31 +01:00
class ProjectMeta extends PureComponent {
static propTypes = {
links: PropTypes.array,
techstack: PropTypes.array
}
render() {
const { links, techstack } = this.props
return (
<footer className={styles.meta}>
{!!links && <ProjectLinks links={links} />}
{!!techstack && <ProjectTechstack techstack={techstack} />}
</footer>
)
}
}
2018-05-22 22:41:59 +02:00
2018-12-07 10:31:35 +01:00
class ProjectImages extends PureComponent {
static propTypes = {
projectImages: PropTypes.array,
title: PropTypes.string
}
2018-05-23 00:03:46 +02:00
2018-12-07 10:31:35 +01:00
render() {
return (
<FullWidth>
{this.props.projectImages.map(({ node }) => (
<div className={styles.imageWrap} key={node.id}>
<ProjectImage fluid={node.fluid} alt={this.props.title} />
</div>
))}
</FullWidth>
)
}
2018-05-23 00:03:46 +02:00
}
2018-11-25 01:52:31 +01:00
export default class Project extends PureComponent {
static propTypes = {
data: PropTypes.object.isRequired,
location: PropTypes.object.isRequired
}
render() {
2018-12-07 10:31:35 +01:00
const { data } = this.props
const project = data.projectsYaml
const projectImages = data.projectImages.edges
const descriptionHtml = data.projectsYaml.fields.descriptionHtml
2018-11-25 01:52:31 +01:00
const { title, links, techstack } = project
return (
<>
<SEO project={project} />
2018-04-21 13:39:18 +02:00
2018-11-25 01:52:31 +01:00
<article>
<header>
<h1 className={styles.title}>{title}</h1>
</header>
<div
className={styles.description}
dangerouslySetInnerHTML={{ __html: descriptionHtml }}
/>
<ProjectImages projectImages={projectImages} title={title} />
<ProjectMeta links={links} techstack={techstack} />
</article>
<ProjectNav currentSlug={project.slug} />
2018-11-25 01:52:31 +01:00
</>
)
}
}
2018-04-21 13:39:18 +02:00
2018-12-07 10:31:35 +01:00
export const projectQuery = graphql`
2018-07-11 15:54:32 +02:00
query($slug: String!) {
2018-05-05 00:17:26 +02:00
projectsYaml(slug: { eq: $slug }) {
2018-05-04 14:00:21 +02:00
title
slug
2018-11-25 01:52:31 +01:00
fields {
descriptionHtml
excerpt
2018-11-25 01:52:31 +01:00
}
2018-05-04 14:00:21 +02:00
links {
title
url
2018-11-24 15:02:32 +01:00
type
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-04 16:54:08 +02:00
projectImages: allImageSharp(
2018-06-19 22:48:33 +02:00
filter: { fluid: { originalName: { regex: $slug } } }
2018-07-14 02:18:22 +02:00
sort: { fields: [fluid___originalName], order: ASC }
2018-05-04 16:54:08 +02:00
) {
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
}
`