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

refactor for shorter render function

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

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

@ -26,58 +26,72 @@ const query = graphql`
} }
` `
const MetaTags = ({ title, description, url, image, meta }) => {
return (
<Helmet
defaultTitle={`${meta.title.toLowerCase()} { ${meta.tagline.toLowerCase()} }`}
titleTemplate={`%s // ${meta.title.toLowerCase()} { ${meta.tagline.toLowerCase()} }`}
title={title}
>
<html lang="en" />
{/* 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>
)
}
MetaTags.propTypes = {
title: PropTypes.string,
description: PropTypes.string,
url: PropTypes.string,
image: PropTypes.string,
meta: PropTypes.object
}
export default class SEO extends PureComponent { export default class SEO extends PureComponent {
static propTypes = { static propTypes = {
project: PropTypes.object project: PropTypes.object
} }
render() { render() {
const { project } = this.props
return ( return (
<StaticQuery <StaticQuery
query={query} query={query}
render={data => { render={data => {
const { project } = this.props
const meta = data.dataYaml const meta = data.dataYaml
const title = (project && project.title) || meta.title const title = (project && project.title) || meta.title
const description = const description =
project && project.fields.excerpt (project && project.fields.excerpt) || meta.description
? project.fields.excerpt
: meta.description
const image = const image =
project && project.img (project && project.img.childImageSharp.twitterImage.src) ||
? project.img.childImageSharp.twitterImage.src meta.img.childImageSharp.resize.src
: meta.img.childImageSharp.resize.src const url = (project && `${meta.url}${project.slug}`) || meta.url
const url =
project && project.slug ? `${meta.url}${project.slug}` : meta.url
return ( return (
<Helmet <MetaTags
defaultTitle={`${meta.title.toLowerCase()} { ${meta.tagline.toLowerCase()} }`}
titleTemplate={`%s // ${meta.title.toLowerCase()} { ${meta.tagline.toLowerCase()} }`}
title={title} title={title}
> description={description}
<html lang="en" /> url={url}
image={image}
{/* General tags */} meta={meta}
<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>
) )
}} }}
/> />