Files
30-seconds-of-code/src/docs/components/Meta.js
2019-08-23 11:02:57 +03:00

79 lines
1.8 KiB
JavaScript

import React from 'react';
import Helmet from 'react-helmet';
import { useStaticQuery, graphql } from 'gatsby';
require('../styles/index.scss'); // Do not change this to `import`, it's not going to work, no clue why
// ===================================================
// Page metadata (using Helmet)
// ===================================================
const Meta = ({ description = '', lang = 'en', meta = [], title }) => {
const { site, file } = useStaticQuery(
graphql`
query {
site {
siteMetadata {
title
description
author
}
}
file(relativePath: { eq: "logo.png" }) {
id
childImageSharp {
fluid(maxHeight: 400) {
src
}
}
}
}
`,
);
const metaDescription = description || site.siteMetadata.description;
return (
<Helmet
htmlAttributes={{
lang,
}}
title={title ? title : site.siteMetadata.title}
titleTemplate={title ? `%s - ${site.siteMetadata.title}` : '%s'}
meta={[
{
name: `description`,
content: metaDescription,
},
{
name: `author`,
content: site.siteMetadata.author,
},
{
name: `viewport`,
content: `width=device-width, initial-scale=1`,
},
{
name: `og:title`,
content: site.siteMetadata.title,
},
{
name: `og:description`,
content: metaDescription,
},
{
name: `og:type`,
content: `website`,
},
{
name: `og:image`,
content: file.childImageSharp.fluid.src,
},
].concat(meta)}
bodyAttributes={{
class: 'card-page',
}}
/>
);
};
export default Meta;