portfolio/src/pages/{ProjectsYaml.slug}.jsx

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 {
  meta,
  imageWrap,
  headerTitle,
  description
} from './{ProjectsYaml.slug}.module.css'

class ProjectMeta extends PureComponent {
  static propTypes = {
    links: PropTypes.array,
    techstack: PropTypes.array
  }

  render() {
    const { links, techstack } = this.props

    return (
      <footer className={meta}>
        {!!links && <ProjectLinks links={links} />}
        {!!techstack && <ProjectTechstack techstack={techstack} />}
      </footer>
    )
  }
}

class ProjectImages extends PureComponent {
  static propTypes = {
    projectImages: PropTypes.array,
    title: PropTypes.string
  }

  render() {
    return (
      <FullWidth>
        {this.props.projectImages.map(({ node }) => (
          <div className={imageWrap} key={node.id}>
            <ProjectImage fluid={node.fluid} alt={this.props.title} />
          </div>
        ))}
      </FullWidth>
    )
  }
}

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 (
      <>
        <SEO project={project} />

        <article>
          <header>
            <h1 className={headerTitle}>{title}</h1>
          </header>
          <div
            className={description}
            dangerouslySetInnerHTML={{ __html: descriptionHtml }}
          />
          <ProjectImages projectImages={projectImages} title={title} />
          <ProjectMeta links={links} techstack={techstack} />
        </article>

        <ProjectNav currentSlug={project.slug} />
      </>
    )
  }
}

export const projectQuery = graphql`
  query($slug: String!, $imageRegex: String!) {
    projectsYaml(slug: { eq: $slug }) {
      title
      slug
      fields {
        descriptionHtml
        excerpt
      }
      links {
        title
        url
        icon
      }
      techstack
      img {
        childImageSharp {
          twitterImage: resize(width: 980) {
            src
          }
        }
      }
    }

    projectImages: allImageSharp(
      filter: { fluid: { originalName: { regex: $imageRegex } } }
      sort: { fields: [fluid___originalName], order: ASC }
    ) {
      edges {
        node {
          id
          ...ProjectImageFluid
        }
      }
    }
  }
`