m/portfolio
1
0
Fork 0
mirror of https://github.com/kremalicious/portfolio.git synced 2024-06-28 00:27:40 +02: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 PropTypes from 'prop-types'
import { StaticQuery, graphql } from 'gatsby'
@ -43,59 +43,63 @@ const query = graphql`
}
`
const SEO = ({ project }) => (
<StaticQuery
query={query}
render={data => {
const meta = data.dataYaml
export default class SEO extends PureComponent {
static propTypes = {
project: PropTypes.object
}
const title = project.title || meta.title
const description = project.description
? 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
static defaultProps = {
project: {}
}
return (
<Helmet
defaultTitle={`${meta.title.toLowerCase()} { ${meta.tagline.toLowerCase()} }`}
titleTemplate={`%s // ${meta.title.toLowerCase()} { ${meta.tagline.toLowerCase()} }`}
>
<html lang="en" />
render() {
const { project } = this.props
<title>{title}</title>
return (
<StaticQuery
query={query}
render={data => {
const meta = data.dataYaml
{/* General tags */}
<meta name="description" content={description} />
<meta name="image" content={`${meta.url}${image}`} />
<link rel="canonical" href={url} />
const title = project.title || meta.title
const description = project.description
? 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
{/* 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}`} />
return (
<Helmet
defaultTitle={`${meta.title.toLowerCase()} { ${meta.tagline.toLowerCase()} }`}
titleTemplate={`%s // ${meta.title.toLowerCase()} { ${meta.tagline.toLowerCase()} }`}
>
<html lang="en" />
{/* 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>
)
}}
/>
)
<title>{title}</title>
SEO.propTypes = {
project: PropTypes.object
{/* General tags */}
<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 posed from 'react-pose'
import { moveInBottom } from '../atoms/Transitions'
import { ReactComponent as Logo } from '../../images/logo.svg'
import styles from './LogoUnit.module.scss'
@ -19,37 +18,21 @@ const query = graphql`
const Animation = posed.div(moveInBottom)
export default class LogoUnit extends PureComponent {
state = { isMinimal: false }
static propTypes = {
minimal: PropTypes.bool
}
checkMinimal = () => {
const { minimal } = this.props
this.setState({ isMinimal: minimal })
}
componentDidMount() {
this.checkMinimal()
}
componentDidUpdate() {
this.checkMinimal()
}
render() {
return (
<StaticQuery
query={query}
render={data => {
const { title, tagline } = data.dataYaml
const { isMinimal } = this.state
const { minimal } = this.props
return (
<Animation>
<div className={isMinimal ? styles.minimal : styles.logounit}>
<div className={minimal ? styles.minimal : styles.logounit}>
<Logo className={styles.logounit__logo} />
<h1 className={styles.logounit__title}>
{title.toLowerCase()}

37
src/templates/Project.jsx
View File

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