1
0
mirror of https://github.com/kremalicious/blog.git synced 2025-01-05 03:15:07 +01:00

slight refactor

This commit is contained in:
Matthias Kretschmann 2018-09-25 01:39:38 +02:00
parent 0c60576f26
commit 3aabf39c27
Signed by: m
GPG Key ID: 606EEEF3C479A91F

View File

@ -1,4 +1,4 @@
import React, { Component } from 'react'
import React from 'react'
import PropTypes from 'prop-types'
import { StaticQuery, graphql } from 'gatsby'
import Helmet from 'react-helmet'
@ -24,45 +24,15 @@ const query = graphql`
}
`
class SEO extends Component {
static propTypes = {
post: PropTypes.object,
slug: PropTypes.string,
postSEO: PropTypes.bool
}
render() {
return (
<StaticQuery
query={query}
render={data => {
const siteMeta = data.contentYaml
const { post, slug, postSEO } = this.props
let title
let description
let image
let postURL
if (postSEO) {
const postMeta = post.frontmatter
title = `${postMeta.title} ¦ ${siteMeta.tagline}`
description = postMeta.description
? postMeta.description
: post.excerpt
image = postMeta.image
? postMeta.image.childImageSharp.fluid.src
: siteMeta.author.avatar.childImageSharp.resize.src
postURL = `${siteMeta.url}${slug}`
} else {
title = `${siteMeta.title} ¦ ${siteMeta.tagline}`
description = siteMeta.tagline
image = siteMeta.author.avatar.childImageSharp.resize.src
}
image = `${siteMeta.url}${image}`
const blogURL = siteMeta.url
const url = postSEO ? postURL : blogURL
const createSchemaOrg = (
blogURL,
title,
siteMeta,
postSEO,
postURL,
image,
description
) => {
const schemaOrgJSONLD = [
{
'@context': 'http://schema.org',
@ -105,8 +75,18 @@ class SEO extends Component {
}
)
}
return schemaOrgJSONLD
}
return (
const MetaTags = ({
description,
image,
url,
schema,
postSEO,
title,
siteMeta
}) => (
<Helmet>
<html lang="en" />
@ -116,9 +96,7 @@ class SEO extends Component {
<link rel="canonical" href={url} />
{/* Schema.org tags */}
<script type="application/ld+json">
{JSON.stringify(schemaOrgJSONLD)}
</script>
<script type="application/ld+json">{schema}</script>
{/* OpenGraph tags */}
<meta property="og:url" content={url} />
@ -137,11 +115,76 @@ class SEO extends Component {
<meta name="twitter:description" content={description} />
<meta name="twitter:image" content={image} />
</Helmet>
)
MetaTags.propTypes = {
description: PropTypes.string,
image: PropTypes.string,
url: PropTypes.string,
schema: PropTypes.string,
postSEO: PropTypes.bool,
title: PropTypes.string,
siteMeta: PropTypes.object
}
const SEO = ({ post, slug, postSEO }) => (
<StaticQuery
query={query}
render={data => {
const siteMeta = data.contentYaml
let title
let description
let image
let postURL
if (postSEO) {
const postMeta = post.frontmatter
title = `${postMeta.title} ¦ ${siteMeta.tagline}`
description = postMeta.description ? postMeta.description : post.excerpt
image = postMeta.image
? postMeta.image.childImageSharp.fluid.src
: siteMeta.author.avatar.childImageSharp.resize.src
postURL = `${siteMeta.url}${slug}`
} else {
title = `${siteMeta.title} ¦ ${siteMeta.tagline}`
description = siteMeta.tagline
image = siteMeta.author.avatar.childImageSharp.resize.src
}
image = `${siteMeta.url}${image}`
const blogURL = siteMeta.url
const url = postSEO ? postURL : blogURL
let schema = createSchemaOrg(
blogURL,
title,
siteMeta,
postSEO,
postURL,
image,
description
)
schema = JSON.stringify(schema)
return (
<MetaTags
description={description}
image={image}
url={url}
schema={schema}
postSEO={postSEO}
title={title}
siteMeta={siteMeta}
/>
)
}}
/>
)
}
)
SEO.propTypes = {
post: PropTypes.object,
slug: PropTypes.string,
postSEO: PropTypes.bool
}
export default SEO