oceanprotocol/docs
1
0
Fork 0
mirror of https://github.com/oceanprotocol/docs.git synced 2024-11-26 19:49:26 +01:00
Code Releases Activity

basic setup fo a SEO component

Browse Source
This commit is contained in:
Matthias Kretschmann 2018-11-22 15:46:38 +01:00
parent 8e45f78d46
commit 22ba5c0e7e
Signed by: m
GPG Key ID: 606EEEF3C479A91F
6 changed files with 110 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
config.js
View File

@ -4,7 +4,7 @@ module.exports = {
siteDescription: siteDescription:
'Learn about the components of the Ocean Protocol software stack, and how to run or use the components relevant to you.', 'Learn about the components of the Ocean Protocol software stack, and how to run or use the components relevant to you.',
siteUrl: process.env.SITE_URL || 'https://docs.oceanprotocol.com', siteUrl: process.env.SITE_URL || 'https://docs.oceanprotocol.com',
siteIcon: 'src/images/profile.png', siteIcon: 'node_modules/@oceanprotocol/art/logo/favicon-black.png',
siteCompany: 'Ocean Protocol Foundation Ltd.', siteCompany: 'Ocean Protocol Foundation Ltd.',
analyticsId: 'UA-60614729-11', analyticsId: 'UA-60614729-11',
social: { social: {

2
package.json
View File

@ -22,7 +22,7 @@
"deploy": "./scripts/deploy.sh" "deploy": "./scripts/deploy.sh"
}, },
"dependencies": { "dependencies": {
"@oceanprotocol/art": "^2.0.0", "@oceanprotocol/art": "^2.1.0",
"axios": "^0.18.0", "axios": "^0.18.0",
"classnames": "^2.2.6", "classnames": "^2.2.6",
"gatsby": "^2.0.52", "gatsby": "^2.0.52",

38
src/components/Layout.jsx
View File

@ -1,45 +1,17 @@
import React from 'react' import React from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import Helmet from 'react-helmet'
import { graphql, StaticQuery } from 'gatsby'
import Header from './Header' import Header from './Header'
import Footer from './Footer' import Footer from './Footer'
const query = graphql`
query {
site {
siteMetadata {
siteTitle
siteDescription
}
}
}
`
const Layout = ({ children, header }) => { const Layout = ({ children, header }) => {
const headerElement = header || <Header /> const headerElement = header || <Header />
return ( return (
<StaticQuery <>
query={query} {headerElement}
render={data => { {children}
const siteMeta = data.site.siteMetadata <Footer />
</>
return (
<>
<Helmet
defaultTitle={siteMeta.siteTitle}
titleTemplate={`%s - ${siteMeta.siteTitle}`}
>
<meta name="robots" content="noindex, nofollow" />
</Helmet>
{headerElement}
{children}
<Footer />
</>
)
}}
/>
) )
} }

95
src/components/Seo.jsx Normal file
View File

@ -0,0 +1,95 @@
import React from 'react'
import PropTypes from 'prop-types'
import { StaticQuery, graphql } from 'gatsby'
import Helmet from 'react-helmet'
const query = graphql`
query {
site {
siteMetadata {
siteTitle
siteDescription
siteUrl
siteIcon
siteCompany
social {
twitter
}
}
}
}
`
const MetaTags = ({ title, description, url, image, schema, siteMeta }) => (
<Helmet
defaultTitle={siteMeta.siteTitle}
titleTemplate={`%s - ${siteMeta.siteTitle}`}
>
<html lang="en" />
{title && <title>{title}</title>}
<meta name="robots" content="noindex, nofollow" />
{/* General tags */}
<meta name="description" content={description} />
<meta name="image" content={image} />
<link rel="canonical" href={url} />
{/* Schema.org tags */}
<script type="application/ld+json">{schema}</script>
{/* OpenGraph tags */}
<meta property="og:url" content={url} />
{documentSEO && <meta property="og:type" content="article" />}
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={image} />
{/* Twitter Card tags */}
<meta name="twitter:card" content="summary_large_image" />
<meta
name="twitter:creator"
content={siteMeta.social.twitter ? siteMeta.social.twitter : ''}
/>
<meta name="twitter:title" content={title} />
<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,
title: PropTypes.string,
siteMeta: PropTypes.object
}
const SEO = ({ title, description, slug }) => (
<StaticQuery
query={query}
render={data => {
const siteMeta = data.site.siteMetadata
return (
<MetaTags
description={description}
// image={image}
url={url}
title={title}
siteMeta={siteMeta}
/>
)
}}
/>
)
SEO.propTypes = {
title: PropTypes.string,
description: PropTypes.string,
slug: PropTypes.string
}
export default SEO

10
src/pages/index.jsx
View File

@ -1,8 +1,8 @@
import React from 'react' import React from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { Link, graphql } from 'gatsby' import { Link, graphql } from 'gatsby'
import Helmet from 'react-helmet'
import classnames from 'classnames' import classnames from 'classnames'
import SEO from '../components/Seo'
import Layout from '../components/Layout' import Layout from '../components/Layout'
import Content from '../components/Content' import Content from '../components/Content'
import HeaderHome from '../components/HeaderHome' import HeaderHome from '../components/HeaderHome'
@ -38,12 +38,8 @@ SectionLink.propTypes = {
const IndexPage = ({ data, location }) => ( const IndexPage = ({ data, location }) => (
<> <>
<Helmet> <SEO />
<meta
name="description"
content={data.site.siteMetadata.siteDescription}
/>
</Helmet>
<Layout location={location} header={<HeaderHome />}> <Layout location={location} header={<HeaderHome />}>
<Content> <Content>
<ul className={styles.sections}> <ul className={styles.sections}>

8
src/templates/Doc.jsx
View File

@ -10,6 +10,7 @@ import DocToc from '../components/DocToc'
import DocContent from '../components/DocContent' import DocContent from '../components/DocContent'
import DocHeader from '../components/DocHeader' import DocHeader from '../components/DocHeader'
import DocFooter from '../components/DocFooter' import DocFooter from '../components/DocFooter'
import SEO from '../components/Seo'
import styles from './Doc.module.scss' import styles from './Doc.module.scss'
export default class DocTemplate extends Component { export default class DocTemplate extends Component {
@ -22,7 +23,7 @@ export default class DocTemplate extends Component {
const { location } = this.props const { location } = this.props
const post = this.props.data.markdownRemark const post = this.props.data.markdownRemark
const sections = this.props.data.allSectionsYaml.edges const sections = this.props.data.allSectionsYaml.edges
const { section } = post.fields const { section, slug } = post.fields
const { title, description } = post.frontmatter const { title, description } = post.frontmatter
const { tableOfContents } = post const { tableOfContents } = post
@ -37,10 +38,11 @@ export default class DocTemplate extends Component {
return ( return (
<> <>
<Helmet> <Helmet>
<title>{title}</title>
<meta name="description" content={description} />
<body className={section} /> <body className={section} />
</Helmet> </Helmet>
<SEO title={title} description={description} slug={slug} />
<Layout location={location}> <Layout location={location}>
<HeaderSection title={section ? sectionTitle : title} /> <HeaderSection title={section ? sectionTitle : title} />