mirror of
https://github.com/oceanprotocol/docs.git
synced 2024-11-26 19:49:26 +01:00
Merge branch 'master' into fix/mobile
This commit is contained in:
commit
c750b2878f
@ -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: {
|
||||||
|
@ -75,7 +75,7 @@ module.exports = {
|
|||||||
maxWidth: 666,
|
maxWidth: 666,
|
||||||
quality: 80,
|
quality: 80,
|
||||||
withWebp: true,
|
withWebp: true,
|
||||||
linkImagesToOriginal: false,
|
linkImagesToOriginal: true,
|
||||||
showCaptions: true,
|
showCaptions: true,
|
||||||
sizeByPixelDensity: true
|
sizeByPixelDensity: true
|
||||||
}
|
}
|
||||||
|
@ -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",
|
||||||
|
@ -14,7 +14,9 @@ const DocHeader = ({ title, description }) => {
|
|||||||
return (
|
return (
|
||||||
<header className={styles.header}>
|
<header className={styles.header}>
|
||||||
<h1 className={styles.title}>{title}</h1>
|
<h1 className={styles.title}>{title}</h1>
|
||||||
{description && <p className={styles.lead}>{descriptionHtml}</p>}
|
{description && (
|
||||||
|
<div className={styles.lead}>{descriptionHtml}</div>
|
||||||
|
)}
|
||||||
</header>
|
</header>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -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 />
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
167
src/components/Seo.jsx
Normal file
167
src/components/Seo.jsx
Normal file
@ -0,0 +1,167 @@
|
|||||||
|
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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
shareImage: allFile(filter: { name: { eq: "share" } }) {
|
||||||
|
edges {
|
||||||
|
node {
|
||||||
|
childImageSharp {
|
||||||
|
original {
|
||||||
|
src
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
|
const createSchemaOrg = (title, description, image, url, siteMeta, article) => {
|
||||||
|
const schemaOrgJSONLD = [
|
||||||
|
{
|
||||||
|
'@context': 'http://schema.org',
|
||||||
|
'@type': 'WebSite',
|
||||||
|
url: siteMeta.siteUrl,
|
||||||
|
name: title
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
if (article) {
|
||||||
|
schemaOrgJSONLD.push(
|
||||||
|
{
|
||||||
|
'@context': 'http://schema.org',
|
||||||
|
'@type': 'BreadcrumbList',
|
||||||
|
itemListElement: [
|
||||||
|
{
|
||||||
|
'@type': 'ListItem',
|
||||||
|
position: 1,
|
||||||
|
item: { '@id': url, name: title, image }
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
// https://schema.org/TechArticle
|
||||||
|
'@context': 'http://schema.org',
|
||||||
|
'@type': 'TechArticle',
|
||||||
|
name: title,
|
||||||
|
headline: title,
|
||||||
|
description,
|
||||||
|
url,
|
||||||
|
image: { '@type': 'URL', url: image }
|
||||||
|
}
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return schemaOrgJSONLD
|
||||||
|
}
|
||||||
|
|
||||||
|
const MetaTags = ({
|
||||||
|
title,
|
||||||
|
description,
|
||||||
|
url,
|
||||||
|
image,
|
||||||
|
schema,
|
||||||
|
siteMeta,
|
||||||
|
article
|
||||||
|
}) => (
|
||||||
|
<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} />
|
||||||
|
{article && <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="@oceanprotocol" />
|
||||||
|
<meta name="twitter:title" content={title} />
|
||||||
|
<meta name="twitter:description" content={description} />
|
||||||
|
<meta name="twitter:image" content={image} />
|
||||||
|
</Helmet>
|
||||||
|
)
|
||||||
|
|
||||||
|
MetaTags.propTypes = {
|
||||||
|
title: PropTypes.string,
|
||||||
|
description: PropTypes.string,
|
||||||
|
url: PropTypes.string,
|
||||||
|
image: PropTypes.string,
|
||||||
|
schema: PropTypes.string,
|
||||||
|
siteMeta: PropTypes.object,
|
||||||
|
article: PropTypes.bool
|
||||||
|
}
|
||||||
|
|
||||||
|
const SEO = ({ title, description, slug, article }) => (
|
||||||
|
<StaticQuery
|
||||||
|
query={query}
|
||||||
|
render={data => {
|
||||||
|
const siteMeta = data.site.siteMetadata
|
||||||
|
const shareImage =
|
||||||
|
data.shareImage.edges[0].node.childImageSharp.original.src
|
||||||
|
|
||||||
|
title = title || siteMeta.siteTitle
|
||||||
|
description = description || siteMeta.siteDescription
|
||||||
|
let url = siteMeta.siteUrl || siteMeta.siteUrl + slug
|
||||||
|
let image = siteMeta.siteUrl + shareImage
|
||||||
|
|
||||||
|
let schema = createSchemaOrg(
|
||||||
|
title,
|
||||||
|
description,
|
||||||
|
image,
|
||||||
|
url,
|
||||||
|
siteMeta,
|
||||||
|
article
|
||||||
|
)
|
||||||
|
schema = JSON.stringify(schema)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<MetaTags
|
||||||
|
title={title}
|
||||||
|
description={description}
|
||||||
|
url={url}
|
||||||
|
image={image}
|
||||||
|
schema={schema}
|
||||||
|
siteMeta={siteMeta}
|
||||||
|
article={article}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
|
||||||
|
SEO.propTypes = {
|
||||||
|
title: PropTypes.string,
|
||||||
|
description: PropTypes.string,
|
||||||
|
slug: PropTypes.string,
|
||||||
|
article: PropTypes.bool
|
||||||
|
}
|
||||||
|
|
||||||
|
export default SEO
|
BIN
src/images/share.png
Normal file
BIN
src/images/share.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 87 KiB |
@ -6,7 +6,7 @@ import React, { Component } from 'react'
|
|||||||
import PropTypes from 'prop-types'
|
import PropTypes from 'prop-types'
|
||||||
import { Link } from 'gatsby'
|
import { Link } from 'gatsby'
|
||||||
import giphyAPI from 'giphy-js-sdk-core'
|
import giphyAPI from 'giphy-js-sdk-core'
|
||||||
import Helmet from 'react-helmet'
|
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 styles from './404.module.scss'
|
import styles from './404.module.scss'
|
||||||
@ -45,7 +45,7 @@ export default class NotFoundPage extends Component {
|
|||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Helmet title="404 - Not Found" />
|
<SEO title="404 - Not Found" />
|
||||||
<Layout location={this.props.location}>
|
<Layout location={this.props.location}>
|
||||||
<Content>
|
<Content>
|
||||||
<article className={styles.content}>
|
<article className={styles.content}>
|
||||||
|
@ -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}>
|
||||||
|
@ -10,8 +10,28 @@ 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'
|
||||||
|
|
||||||
|
const DocMain = ({ title, description, tableOfContents, post, single }) => (
|
||||||
|
<article className={single ? styles.mainSingle : styles.main}>
|
||||||
|
<DocHeader title={title} description={description} />
|
||||||
|
|
||||||
|
{tableOfContents && <DocToc tableOfContents={tableOfContents} />}
|
||||||
|
|
||||||
|
<DocContent html={post.html} htmlAst={post.htmlAst} />
|
||||||
|
<DocFooter post={post} />
|
||||||
|
</article>
|
||||||
|
)
|
||||||
|
|
||||||
|
DocMain.propTypes = {
|
||||||
|
title: PropTypes.string.isRequired,
|
||||||
|
description: PropTypes.string.isRequired,
|
||||||
|
tableOfContents: PropTypes.string.isRequired,
|
||||||
|
post: PropTypes.object.isRequired,
|
||||||
|
single: PropTypes.bool
|
||||||
|
}
|
||||||
|
|
||||||
export default class DocTemplate extends Component {
|
export default class DocTemplate extends Component {
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
data: PropTypes.object.isRequired,
|
data: PropTypes.object.isRequired,
|
||||||
@ -22,7 +42,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 +57,16 @@ 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}
|
||||||
|
article
|
||||||
|
/>
|
||||||
|
|
||||||
<Layout location={location}>
|
<Layout location={location}>
|
||||||
<HeaderSection title={section ? sectionTitle : title} />
|
<HeaderSection title={section ? sectionTitle : title} />
|
||||||
|
|
||||||
@ -53,42 +79,21 @@ export default class DocTemplate extends Component {
|
|||||||
sidebar={section}
|
sidebar={section}
|
||||||
/>
|
/>
|
||||||
</aside>
|
</aside>
|
||||||
<article className={styles.main}>
|
<DocMain
|
||||||
<DocHeader
|
|
||||||
title={title}
|
|
||||||
description={description}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{tableOfContents && (
|
|
||||||
<DocToc
|
|
||||||
tableOfContents={tableOfContents}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<DocContent
|
|
||||||
html={post.html}
|
|
||||||
htmlAst={post.htmlAst}
|
|
||||||
/>
|
|
||||||
<DocFooter post={post} />
|
|
||||||
</article>
|
|
||||||
</main>
|
|
||||||
) : (
|
|
||||||
<article className={styles.mainSingle}>
|
|
||||||
<DocHeader
|
|
||||||
title={title}
|
title={title}
|
||||||
description={description}
|
description={description}
|
||||||
|
tableOfContents={tableOfContents}
|
||||||
|
post={post}
|
||||||
/>
|
/>
|
||||||
|
</main>
|
||||||
{tableOfContents && (
|
) : (
|
||||||
<DocToc tableOfContents={tableOfContents} />
|
<DocMain
|
||||||
)}
|
title={title}
|
||||||
|
description={description}
|
||||||
<DocContent
|
tableOfContents={tableOfContents}
|
||||||
html={post.html}
|
post={post}
|
||||||
htmlAst={post.htmlAst}
|
single
|
||||||
/>
|
/>
|
||||||
<DocFooter post={post} />
|
|
||||||
</article>
|
|
||||||
)}
|
)}
|
||||||
</Content>
|
</Content>
|
||||||
</Layout>
|
</Layout>
|
||||||
@ -110,6 +115,7 @@ export const pageQuery = graphql`
|
|||||||
}
|
}
|
||||||
fields {
|
fields {
|
||||||
section
|
section
|
||||||
|
slug
|
||||||
}
|
}
|
||||||
...PageFooter
|
...PageFooter
|
||||||
}
|
}
|
||||||
|
Binary file not shown.
Before Width: | Height: | Size: 31 KiB |
Loading…
Reference in New Issue
Block a user