m/portfolio
1
0
Fork 0
mirror of https://github.com/kremalicious/portfolio.git synced 2024-12-22 17:23:22 +01:00
Code Releases Activity

project description fix

Browse Source
This commit is contained in:
Matthias Kretschmann 2018-07-11 11:10:13 +02:00
parent ddc41c8466
commit fe700dcf5c
Signed by: m
GPG Key ID: 606EEEF3C479A91F
1 changed files with 35 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
src/templates/Project.jsx
View File

@ -1,4 +1,4 @@
import React, { Component } from 'react' import React from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import Helmet from 'react-helmet' import Helmet from 'react-helmet'
import ReactMarkdown from 'react-markdown' import ReactMarkdown from 'react-markdown'
@ -14,66 +14,52 @@ import SEO from '../components/atoms/SEO'
import styles from './Project.module.scss' import styles from './Project.module.scss'
const ProjectMeta = props => { const ProjectMeta = ({ links, techstack }) => (
const { links, techstack } = props <footer className={styles.project__meta}>
{!!links && <ProjectLinks links={links} />}
{!!techstack && <ProjectTechstack techstack={techstack} />}
</footer>
)
return ( const ProjectImages = ({ projectImages, title }) => (
<footer className={styles.project__meta}>
{!!links && <ProjectLinks links={links} />}
{!!techstack && <ProjectTechstack techstack={techstack} />}
</footer>
)
}
const ProjectImages = props => (
<FullWidth> <FullWidth>
{props.projectImages.map(({ node }) => ( {projectImages.map(({ node }) => (
<div className={styles.spacer} key={node.id}> <div className={styles.spacer} key={node.id}>
<ProjectImage fluid={node.fluid} alt={props.title} /> <ProjectImage fluid={node.fluid} alt={title} />
</div> </div>
))} ))}
</FullWidth> </FullWidth>
) )
class Project extends Component { const Project = ({ data, location }) => {
constructor(props) { const meta = data.dataYaml
super(props) const project = data.projectsYaml
const projectImages = data.projectImages.edges
const { title, links, techstack } = project
const description = data.projectsYaml.description
const descriptionWithLineBreaks = description.split('\n').join('\n\n')
const description = this.props.data.projectsYaml.description return (
<Layout location={location}>
<Helmet title={title} />
this.state = { <SEO project={project} meta={meta} />
descriptionWithLineBreaks: description.split('\n').join('\n\n')
}
}
render() { <article className={styles.project}>
const meta = this.props.data.dataYaml <Content>
const project = this.props.data.projectsYaml <h1 className={styles.project__title}>{title}</h1>
const projectImages = this.props.data.projectImages.edges <ReactMarkdown
const { title, links, techstack } = project source={descriptionWithLineBreaks}
className={styles.project__description}
/>
<ProjectImages projectImages={projectImages} title={title} />
<ProjectMeta links={links} techstack={techstack} />
</Content>
</article>
return ( <ProjectNav slug={project.slug} />
<Layout location={this.props.location}> </Layout>
<Helmet title={title} /> )
<SEO project={project} meta={meta} />
<article className={styles.project}>
<Content>
<h1 className={styles.project__title}>{title}</h1>
<ReactMarkdown
source={this.state.descriptionWithLineBreaks}
className={styles.project__description}
/>
<ProjectImages projectImages={projectImages} title={title} />
<ProjectMeta links={links} techstack={techstack} />
</Content>
</article>
<ProjectNav slug={project.slug} />
</Layout>
)
}
} }
ProjectMeta.propTypes = { ProjectMeta.propTypes = {