m/portfolio
1
0
Fork 0
mirror of https://github.com/kremalicious/portfolio.git synced 2025-02-14 21:10:41 +01:00
Code Releases Activity

more PureComponent

Browse Source
This commit is contained in:
Matthias Kretschmann 2018-12-07 10:31:35 +01:00
parent 61ac372567
commit 0a17e42451
Signed by: m
GPG Key ID: 606EEEF3C479A91F
3 changed files with 76 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
src/components/atoms/SEO.jsx
View File

@ -1,4 +1,4 @@
import React from 'react' import React, { PureComponent } from 'react'
import Helmet from 'react-helmet' import Helmet from 'react-helmet'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { StaticQuery, graphql } from 'gatsby' import { StaticQuery, graphql } from 'gatsby'
@ -43,59 +43,63 @@ const query = graphql`
} }
` `
const SEO = ({ project }) => ( export default class SEO extends PureComponent {
<StaticQuery static propTypes = {
query={query} project: PropTypes.object
render={data => { }
const meta = data.dataYaml
const title = project.title || meta.title static defaultProps = {
const description = project.description project: {}
? truncate.apply(project.description, [320, true]) }
: truncate.apply(meta.description, [320, true])
const image = project.img
? project.img.childImageSharp.twitterImage.src
: meta.img.childImageSharp.resize.src
const url = project.slug ? `${meta.url}${project.slug}` : meta.url
return ( render() {
<Helmet const { project } = this.props
defaultTitle={`${meta.title.toLowerCase()} { ${meta.tagline.toLowerCase()} }`}
titleTemplate={`%s // ${meta.title.toLowerCase()} { ${meta.tagline.toLowerCase()} }`}
>
<html lang="en" />
<title>{title}</title> return (
<StaticQuery
query={query}
render={data => {
const meta = data.dataYaml
{/* General tags */} const title = project.title || meta.title
<meta name="description" content={description} /> const description = project.description
<meta name="image" content={`${meta.url}${image}`} /> ? truncate.apply(project.description, [320, true])
<link rel="canonical" href={url} /> : truncate.apply(meta.description, [320, true])
const image = project.img
? project.img.childImageSharp.twitterImage.src
: meta.img.childImageSharp.resize.src
const url = project.slug ? `${meta.url}${project.slug}` : meta.url
{/* OpenGraph tags */} return (
<meta property="og:url" content={url} /> <Helmet
<meta property="og:title" content={title} /> defaultTitle={`${meta.title.toLowerCase()} { ${meta.tagline.toLowerCase()} }`}
<meta property="og:description" content={description} /> titleTemplate={`%s // ${meta.title.toLowerCase()} { ${meta.tagline.toLowerCase()} }`}
<meta property="og:image" content={`${meta.url}${image}`} /> >
<html lang="en" />
{/* Twitter Card tags */} <title>{title}</title>
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:creator" content={meta.social.Twitter} />
<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={description} />
<meta name="twitter:image" content={`${meta.url}${image}`} />
</Helmet>
)
}}
/>
)
SEO.propTypes = { {/* General tags */}
project: PropTypes.object <meta name="description" content={description} />
<meta name="image" content={`${meta.url}${image}`} />
<link rel="canonical" href={url} />
{/* OpenGraph tags */}
<meta property="og:url" content={url} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={`${meta.url}${image}`} />
{/* Twitter Card tags */}
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:creator" content={meta.social.Twitter} />
<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={description} />
<meta name="twitter:image" content={`${meta.url}${image}`} />
</Helmet>
)
}}
/>
)
}
} }
SEO.defaultProps = {
project: {}
}
export default SEO

21
src/components/molecules/LogoUnit.jsx
View File

@ -3,7 +3,6 @@ import PropTypes from 'prop-types'
import { StaticQuery, graphql } from 'gatsby' import { StaticQuery, graphql } from 'gatsby'
import posed from 'react-pose' import posed from 'react-pose'
import { moveInBottom } from '../atoms/Transitions' import { moveInBottom } from '../atoms/Transitions'
import { ReactComponent as Logo } from '../../images/logo.svg' import { ReactComponent as Logo } from '../../images/logo.svg'
import styles from './LogoUnit.module.scss' import styles from './LogoUnit.module.scss'
@ -19,37 +18,21 @@ const query = graphql`
const Animation = posed.div(moveInBottom) const Animation = posed.div(moveInBottom)
export default class LogoUnit extends PureComponent { export default class LogoUnit extends PureComponent {
state = { isMinimal: false }
static propTypes = { static propTypes = {
minimal: PropTypes.bool minimal: PropTypes.bool
} }
checkMinimal = () => {
const { minimal } = this.props
this.setState({ isMinimal: minimal })
}
componentDidMount() {
this.checkMinimal()
}
componentDidUpdate() {
this.checkMinimal()
}
render() { render() {
return ( return (
<StaticQuery <StaticQuery
query={query} query={query}
render={data => { render={data => {
const { title, tagline } = data.dataYaml const { title, tagline } = data.dataYaml
const { isMinimal } = this.state const { minimal } = this.props
return ( return (
<Animation> <Animation>
<div className={isMinimal ? styles.minimal : styles.logounit}> <div className={minimal ? styles.minimal : styles.logounit}>
<Logo className={styles.logounit__logo} /> <Logo className={styles.logounit__logo} />
<h1 className={styles.logounit__title}> <h1 className={styles.logounit__title}>
{title.toLowerCase()} {title.toLowerCase()}

37
src/templates/Project.jsx
View File

@ -27,19 +27,23 @@ class ProjectMeta extends PureComponent {
} }
} }
const ProjectImages = ({ projectImages, title }) => ( class ProjectImages extends PureComponent {
<FullWidth> static propTypes = {
{projectImages.map(({ node }) => ( projectImages: PropTypes.array,
<div className={styles.imageWrap} key={node.id}> title: PropTypes.string
<ProjectImage fluid={node.fluid} alt={title} /> }
</div>
))}
</FullWidth>
)
ProjectImages.propTypes = { render() {
projectImages: PropTypes.array, return (
title: PropTypes.string <FullWidth>
{this.props.projectImages.map(({ node }) => (
<div className={styles.imageWrap} key={node.id}>
<ProjectImage fluid={node.fluid} alt={this.props.title} />
</div>
))}
</FullWidth>
)
}
} }
export default class Project extends PureComponent { export default class Project extends PureComponent {
@ -49,9 +53,10 @@ export default class Project extends PureComponent {
} }
render() { render() {
const project = this.props.data.projectsYaml const { data } = this.props
const projectImages = this.props.data.projectImages.edges const project = data.projectsYaml
const descriptionHtml = this.props.data.projectsYaml.fields.descriptionHtml const projectImages = data.projectImages.edges
const descriptionHtml = data.projectsYaml.fields.descriptionHtml
const { title, links, techstack } = project const { title, links, techstack } = project
return ( return (
@ -76,7 +81,7 @@ export default class Project extends PureComponent {
} }
} }
export const projectAndProjectsQuery = graphql` export const projectQuery = graphql`
query($slug: String!) { query($slug: String!) {
projectsYaml(slug: { eq: $slug }) { projectsYaml(slug: { eq: $slug }) {
title title