diff --git a/README.md b/README.md index 482151de..f5b6f9ae 100644 --- a/README.md +++ b/README.md @@ -34,6 +34,8 @@ The final navigational organisation of the content is driven through the sidebar Have a look at [docs.oceanprotocol.com/test/](https://docs.oceanprotocol.com/test/) to see what content elements can be used in the docs. +Some global values used throughout the site can be set in [`config.js`](config.js). + ### Sections The documentation is split in multiple sections whose content lives in this repo: diff --git a/config.js b/config.js index 630f7d21..61dd01a0 100644 --- a/config.js +++ b/config.js @@ -1,7 +1,18 @@ module.exports = { siteTitle: 'Ocean Protocol Documentation', + siteShortTitle: 'Docs', siteDescription: 'Learn everything you need to know to develop with Ocean Protocol. This should be a bit longer cause it is also the meta description so why not write some more.', siteUrl: process.env.SITE_URL || 'https://docs.oceanprotocol.com', - analyticsId: 'UA-60614729-11' + siteIcon: 'src/images/profile.png', + siteCompany: 'Ocean Protocol Foundation Ltd.', + analyticsId: 'UA-60614729-11', + social: { + site: 'https://oceanprotocol.com', + blog: 'https://blog.oceanprotocol.com', + github: 'https://github.com/oceanprotocol', + twitter: 'https://twitter.com/oceanprotocol', + gitter: 'https://gitter.im/oceanprotocol/Lobby', + telegram: 'https://t.me/joinchat/GUyxrE0Hi154D0NrlOqLFg' + } } diff --git a/gatsby-config.js b/gatsby-config.js index 0d7fdb6f..770c8454 100755 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -2,9 +2,9 @@ const config = require('./config.js') module.exports = { siteMetadata: { - siteTitle: config.siteTitle, - siteDescription: config.siteDescription, - siteUrl: config.siteUrl + // spread all of our config values here + // so they can easily be queried with GraphQL + ...config }, plugins: [ { @@ -85,14 +85,14 @@ module.exports = { { resolve: 'gatsby-plugin-manifest', options: { - name: config.title, - short_name: 'Docs', - description: config.description, + name: config.siteTitle, + short_name: config.siteShortTitle, + description: config.siteDescription, start_url: '/', background_color: '#e2e2e2', theme_color: '#141414', display: 'minimal-ui', - icon: 'src/images/profile.png' + icon: config.siteIcon } }, 'gatsby-plugin-offline', diff --git a/src/components/DocHeader.module.scss b/src/components/DocHeader.module.scss index 3616b942..6f981bc8 100644 --- a/src/components/DocHeader.module.scss +++ b/src/components/DocHeader.module.scss @@ -1,7 +1,7 @@ @import 'variables'; .header { - margin-top: $spacer * $line-height; + padding-top: $spacer * $line-height; margin-bottom: $spacer * $line-height; } diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx index fa3c7b48..d484bdbd 100644 --- a/src/components/Footer.jsx +++ b/src/components/Footer.jsx @@ -1,25 +1,62 @@ import React from 'react' +import PropTypes from 'prop-types' +import { StaticQuery, graphql } from 'gatsby' import Content from '../components/Content' import styles from './Footer.module.scss' -const Footer = () => ( - +const FooterSocial = ({ social }) => ( + +) + +FooterSocial.propTypes = { + social: PropTypes.object +} + +const Footer = () => ( + { + const { siteCompany, social } = data.site.siteMetadata + + return ( + + ) + }} + /> ) export default Footer diff --git a/src/components/Footer.module.scss b/src/components/Footer.module.scss index 6d648065..f3393590 100644 --- a/src/components/Footer.module.scss +++ b/src/components/Footer.module.scss @@ -31,6 +31,12 @@ color: $brand-grey; } } + + svg { + display: inline-block; + width: $font-size-large; + height: $font-size-large; + } } .links { @@ -42,10 +48,10 @@ } a { - padding: 0 $spacer / 4; + margin: 0 $spacer / 2; &:last-child { - padding-right: 0; + margin-right: 0; } } } diff --git a/src/components/Header.jsx b/src/components/Header.jsx index 74705154..fb1f5561 100755 --- a/src/components/Header.jsx +++ b/src/components/Header.jsx @@ -22,6 +22,7 @@ const query = graphql` } } ` + const Header = () => ( + + + + + diff --git a/src/images/gitter.svg b/src/images/gitter.svg new file mode 100644 index 00000000..ea0d4139 --- /dev/null +++ b/src/images/gitter.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/medium.svg b/src/images/medium.svg new file mode 100644 index 00000000..7d5f40cd --- /dev/null +++ b/src/images/medium.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/images/telegram.svg b/src/images/telegram.svg new file mode 100644 index 00000000..bea5e77b --- /dev/null +++ b/src/images/telegram.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/twitter.svg b/src/images/twitter.svg new file mode 100644 index 00000000..6dcb86a1 --- /dev/null +++ b/src/images/twitter.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/website.svg b/src/images/website.svg new file mode 100644 index 00000000..76a25b3a --- /dev/null +++ b/src/images/website.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index 94f77211..97bdd80c 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -31,7 +31,7 @@ $font-family-monospace: 'Fira Code', 'Fira Mono', Menlo, Monaco, Consolas, $font-size-root: 15px; $font-size-base: 1rem; $font-size-large: 1.2rem; -$font-size-small: .85rem; +$font-size-small: .8rem; $font-size-mini: .65rem; $font-size-text: $font-size-base; $font-size-label: $font-size-base; diff --git a/src/templates/Doc.module.scss b/src/templates/Doc.module.scss index 1ad7b9d7..f4f6f398 100644 --- a/src/templates/Doc.module.scss +++ b/src/templates/Doc.module.scss @@ -29,6 +29,6 @@ .mainSingle { composes: main; - max-width: $break-point--small; + max-width: 73%; margin: auto; }