Port closed-source landing page over to gatsby + github pages
1import React from "react"
2import PropTypes from "prop-types"
3import Helmet from "react-helmet"
4import { useStaticQuery, graphql } from "gatsby"
5import banner from "../images/banner.png"
6
7function SEO({ description, lang, meta, keywords, title }) {
8 const { site } = useStaticQuery(
9 graphql`
10 query {
11 site {
12 siteMetadata {
13 title
14 description
15 author
16 }
17 }
18 }
19 `
20 )
21
22 const metaDescription = description || site.siteMetadata.description
23
24 return (
25 <Helmet
26 htmlAttributes={{
27 lang,
28 }}
29 title={title}
30 titleTemplate={`%s | ${site.siteMetadata.title}`}
31 meta={[
32 {
33 name: `description`,
34 content: metaDescription,
35 },
36 {
37 property: `og:title`,
38 content: title,
39 },
40 {
41 property: `og:description`,
42 content: metaDescription,
43 },
44 {
45 property: `og:type`,
46 content: `website`,
47 },
48 {
49 name: `twitter:card`,
50 content: `summary_large_image`,
51 },
52 {
53 name: `twitter:creator`,
54 content: site.siteMetadata.author,
55 },
56 {
57 name: `twitter:title`,
58 content: title,
59 },
60 {
61 name: `twitter:description`,
62 content: metaDescription,
63 },
64 {
65 name: `og:image`,
66 content: banner,
67 },
68 ]
69 .concat(
70 keywords.length > 0
71 ? {
72 name: `keywords`,
73 content: keywords.join(`, `),
74 }
75 : []
76 )
77 .concat(meta)}
78 />
79 )
80}
81
82SEO.defaultProps = {
83 lang: `en`,
84 meta: [],
85 keywords: [],
86 description: ``,
87}
88
89SEO.propTypes = {
90 description: PropTypes.string,
91 lang: PropTypes.string,
92 meta: PropTypes.arrayOf(PropTypes.object),
93 keywords: PropTypes.arrayOf(PropTypes.string),
94 title: PropTypes.string.isRequired,
95}
96
97export default SEO