diff --git a/config.js b/config.js
index 0b586a03..469a07bb 100644
--- a/config.js
+++ b/config.js
@@ -4,7 +4,7 @@ module.exports = {
siteDescription:
'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',
- siteIcon: 'src/images/profile.png',
+ siteIcon: 'node_modules/@oceanprotocol/art/logo/favicon-black.png',
siteCompany: 'Ocean Protocol Foundation Ltd.',
analyticsId: 'UA-60614729-11',
social: {
diff --git a/gatsby-config.js b/gatsby-config.js
index 09013e69..6464be02 100755
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -75,7 +75,7 @@ module.exports = {
maxWidth: 666,
quality: 80,
withWebp: true,
- linkImagesToOriginal: false,
+ linkImagesToOriginal: true,
showCaptions: true,
sizeByPixelDensity: true
}
diff --git a/package.json b/package.json
index f865cf19..5f69a61f 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
"deploy": "./scripts/deploy.sh"
},
"dependencies": {
- "@oceanprotocol/art": "^2.0.0",
+ "@oceanprotocol/art": "^2.1.0",
"axios": "^0.18.0",
"classnames": "^2.2.6",
"gatsby": "^2.0.52",
diff --git a/src/components/DocHeader.jsx b/src/components/DocHeader.jsx
index 7b804d9a..f9ebca13 100644
--- a/src/components/DocHeader.jsx
+++ b/src/components/DocHeader.jsx
@@ -14,7 +14,9 @@ const DocHeader = ({ title, description }) => {
return (
{title}
- {description && {descriptionHtml}
}
+ {description && (
+ {descriptionHtml}
+ )}
)
}
diff --git a/src/components/Layout.jsx b/src/components/Layout.jsx
index e0e14205..27e9646e 100755
--- a/src/components/Layout.jsx
+++ b/src/components/Layout.jsx
@@ -1,45 +1,17 @@
import React from 'react'
import PropTypes from 'prop-types'
-import Helmet from 'react-helmet'
-import { graphql, StaticQuery } from 'gatsby'
import Header from './Header'
import Footer from './Footer'
-const query = graphql`
- query {
- site {
- siteMetadata {
- siteTitle
- siteDescription
- }
- }
- }
-`
-
const Layout = ({ children, header }) => {
const headerElement = header ||
return (
- {
- const siteMeta = data.site.siteMetadata
-
- return (
- <>
-
-
-
- {headerElement}
- {children}
-
- >
- )
- }}
- />
+ <>
+ {headerElement}
+ {children}
+
+ >
)
}
diff --git a/src/components/Seo.jsx b/src/components/Seo.jsx
new file mode 100644
index 00000000..f39a235f
--- /dev/null
+++ b/src/components/Seo.jsx
@@ -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
+}) => (
+
+
+
+ {title && {title}}
+
+
+
+ {/* General tags */}
+
+
+
+
+ {/* Schema.org tags */}
+
+
+ {/* OpenGraph tags */}
+
+ {article && }
+
+
+
+
+ {/* Twitter Card tags */}
+
+
+
+
+
+
+)
+
+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 }) => (
+ {
+ 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 (
+
+ )
+ }}
+ />
+)
+
+SEO.propTypes = {
+ title: PropTypes.string,
+ description: PropTypes.string,
+ slug: PropTypes.string,
+ article: PropTypes.bool
+}
+
+export default SEO
diff --git a/src/images/share.png b/src/images/share.png
new file mode 100644
index 00000000..cd20a973
Binary files /dev/null and b/src/images/share.png differ
diff --git a/src/pages/404.jsx b/src/pages/404.jsx
index d6f3b96b..77c36fd8 100755
--- a/src/pages/404.jsx
+++ b/src/pages/404.jsx
@@ -6,7 +6,7 @@ import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Link } from 'gatsby'
import giphyAPI from 'giphy-js-sdk-core'
-import Helmet from 'react-helmet'
+import SEO from '../components/Seo'
import Layout from '../components/Layout'
import Content from '../components/Content'
import styles from './404.module.scss'
@@ -45,7 +45,7 @@ export default class NotFoundPage extends Component {
render() {
return (
<>
-
+
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index 69b76e9f..d8fa51a9 100755
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -1,8 +1,8 @@
import React from 'react'
import PropTypes from 'prop-types'
import { Link, graphql } from 'gatsby'
-import Helmet from 'react-helmet'
import classnames from 'classnames'
+import SEO from '../components/Seo'
import Layout from '../components/Layout'
import Content from '../components/Content'
import HeaderHome from '../components/HeaderHome'
@@ -38,12 +38,8 @@ SectionLink.propTypes = {
const IndexPage = ({ data, location }) => (
<>
-
-
-
+
+
}>
diff --git a/src/templates/Doc.jsx b/src/templates/Doc.jsx
index 4ab5513b..cf8d6005 100644
--- a/src/templates/Doc.jsx
+++ b/src/templates/Doc.jsx
@@ -10,8 +10,28 @@ import DocToc from '../components/DocToc'
import DocContent from '../components/DocContent'
import DocHeader from '../components/DocHeader'
import DocFooter from '../components/DocFooter'
+import SEO from '../components/Seo'
import styles from './Doc.module.scss'
+const DocMain = ({ title, description, tableOfContents, post, single }) => (
+
+
+
+ {tableOfContents && }
+
+
+
+
+)
+
+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 {
static propTypes = {
data: PropTypes.object.isRequired,
@@ -22,7 +42,7 @@ export default class DocTemplate extends Component {
const { location } = this.props
const post = this.props.data.markdownRemark
const sections = this.props.data.allSectionsYaml.edges
- const { section } = post.fields
+ const { section, slug } = post.fields
const { title, description } = post.frontmatter
const { tableOfContents } = post
@@ -37,10 +57,16 @@ export default class DocTemplate extends Component {
return (
<>
- {title}
-
+
+
+
@@ -53,42 +79,21 @@ export default class DocTemplate extends Component {
sidebar={section}
/>
-
-
-
- {tableOfContents && (
-
- )}
-
-
-
-
-
- ) : (
-
-
-
- {tableOfContents && (
-
- )}
-
-
-
-
+
+ ) : (
+
)}
@@ -110,6 +115,7 @@ export const pageQuery = graphql`
}
fields {
section
+ slug
}
...PageFooter
}
diff --git a/static/favicon.ico b/static/favicon.ico
deleted file mode 100644
index 7db1da34..00000000
Binary files a/static/favicon.ico and /dev/null differ