handle meta title & descriptions, section color coding,

data/sections.yml

@@ -1,6 +1,7 @@
 - title: Core Concepts
   description: Understand the fundamentals of Ocean Protocol.
   link: /concepts/introduction/
+  color: $brand-purple
 
 - title: Setup Guides
   description: Setting up the Ocean Protocol components.

gatsby-config.js

@@ -1,14 +1,15 @@
 const config = {
     title: 'Ocean Protocol Documentation',
-    description: 'Learn everything about how to develop with Ocean Prototocol',
+    description:
+        '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'
 }
 
 module.exports = {
     siteMetadata: {
-        title: config.title,
-        description: config.description,
+        siteTitle: config.title,
+        siteDescription: config.description,
         siteUrl: config.siteUrl
     },
     plugins: [

src/components/Header.jsx

@@ -3,13 +3,11 @@ import { Link, StaticQuery, graphql } from 'gatsby'
 import { ReactComponent as Logo } from '@oceanprotocol/art/logo/logo-white.svg'
 import styles from './Header.module.scss'
 
-const Header = () => (
-    <StaticQuery
-        query={graphql`
+const query = graphql`
     query {
         site {
             siteMetadata {
-                        title
+                siteTitle
             }
         }
 
@@ -23,9 +21,12 @@ const Header = () => (
             }
         }
     }
-        `}
+`
+const Header = () => (
+    <StaticQuery
+        query={query}
         render={data => {
-            const { title } = data.site.siteMetadata
+            const { siteTitle } = data.site.siteMetadata
             const sections = data.allSectionsYaml.edges
 
             return (
@@ -33,7 +34,7 @@ const Header = () => (
                     <div className={styles.headerContent}>
                         <Link to={'/'} className={styles.headerLogo}>
                             <Logo className={styles.headerLogoImage} />
-                            <h1 className={styles.headerTitle}>{title}</h1>
+                            <h1 className={styles.headerTitle}>{siteTitle}</h1>
                         </Link>
 
                         <nav className={styles.headerMenu}>

src/components/HeaderHome.jsx

@@ -10,22 +10,22 @@ const HeaderHome = () => (
             query {
                 site {
                     siteMetadata {
-                        title
-                        description
+                        siteTitle
+                        siteDescription
                     }
                 }
             }
         `}
         render={data => {
-            const { title, description } = data.site.siteMetadata
+            const { siteTitle, siteDescription } = data.site.siteMetadata
 
             return (
                 <header className={styles.header}>
                     <Content>
                         <Logo className={styles.headerLogo} />
-                        <h1 className={styles.headerTitle}>{title}</h1>
+                        <h1 className={styles.headerTitle}>{siteTitle}</h1>
                         <p className={styles.headerDescription}>
-                            {description}
+                            {siteDescription}
                         </p>
                     </Content>
                 </header>

src/components/HeaderHome.module.scss

@@ -17,7 +17,7 @@
 .headerLogo,
 .headerTitle,
 .headerDescription {
-    animation: fadeInUp .8s backwards;
+    animation: fadeInUp .6s ease-out backwards;
 }
 
 .headerLogo {

src/components/HeaderSection.module.scss

@@ -1,17 +1,31 @@
 @import 'variables';
 
 .headerSection {
-    padding: $spacer / $line-height 0;
     border-bottom: .1rem solid $brand-grey-lighter;
 }
 
 .headerSectionTitle {
+    display: inline-block;
     margin: 0;
+    padding: $spacer / $line-height 0;
     font-size: $font-size-h3;
     color: $brand-grey-light;
+
+    :global(.concepts) & {
+        color: $brand-purple;
+    }
+
+    :global(.setup) & {
+        color: $brand-blue;
+    }
+
+    :global(.tutorials) & {
+        color: $orange;
+    }
 }
 
 .rootLink {
     display: inline-block;
     margin-right: $spacer / 4;
+    color: inherit;
 }

src/components/Layout.jsx

@@ -1,18 +1,44 @@
 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 || <Header />
 
+    return (
+        <StaticQuery
+            query={query}
+            render={data => {
+                const siteMeta = data.site.siteMetadata
+
                 return (
                     <>
+                        <Helmet
+                            defaultTitle={siteMeta.siteTitle}
+                            titleTemplate={`%s - ${siteMeta.siteTitle}`}
+                        />
                         {headerElement}
                         {children}
                         <Footer />
                     </>
                 )
+            }}
+        />
+    )
 }
 
 Layout.propTypes = {

src/components/Sidebar.module.scss

@@ -79,4 +79,14 @@
     composes: link;
     color: $brand-purple;
     border-left-color: $brand-purple;
+
+    :global(.setup) & {
+        color: $brand-blue;
+        border-left-color: $brand-blue;
+    }
+
+    :global(.tutorials) & {
+        color: $orange;
+        border-left-color: $orange;
+    }
 }

src/pages/index.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Link, graphql } from 'gatsby'
+import Helmet from 'react-helmet'
 import Layout from '../components/Layout'
 import Content from '../components/Content'
 import HeaderHome from '../components/HeaderHome'
@@ -9,7 +10,7 @@ import { ReactComponent as Arrow } from '../images/arrow.svg'
 import styles from './index.module.scss'
 
 const SectionLink = ({ to, title, children }) => (
-    <Link to={to}>
+    <Link to={to} className={styles.link}>
         <h3 className={styles.sectionTitle}>{title}</h3>
         <p className={styles.sectionText}>{children}</p>
         <span className={styles.sectionMore}>
@@ -25,6 +26,13 @@ SectionLink.propTypes = {
 }
 
 const IndexPage = ({ data, location }) => (
+    <>
+        <Helmet>
+            <meta
+                name="description"
+                content={data.site.siteMetadata.siteDescription}
+            />
+        </Helmet>
         <Layout location={location} header={<HeaderHome />}>
             <Content>
                 <ul className={styles.sections}>
@@ -40,6 +48,7 @@ const IndexPage = ({ data, location }) => (
                 <Repositories />
             </Content>
         </Layout>
+    </>
 )
 
 IndexPage.propTypes = {
@@ -51,6 +60,12 @@ export default IndexPage
 
 export const IndexQuery = graphql`
     query {
+        site {
+            siteMetadata {
+                siteDescription
+            }
+        }
+
         allSectionsYaml {
             edges {
                 node {

src/pages/index.module.scss

@@ -15,7 +15,7 @@
 
 .section {
     margin-top: $spacer;
-    animation: fadeInUp .8s backwards;
+    animation: fadeInUp .6s ease-out backwards;
 
     &:before { display: none; }
 
@@ -23,7 +23,18 @@
         flex: 0 0 31%;
     }
 
-    a {
+    animation-delay: .4s;
+
+    &:nth-child(2) {
+        animation-delay: .6s;
+    }
+
+    &:nth-child(3) {
+        animation-delay: .8s;
+    }
+}
+
+.link {
     display: flex;
     flex-wrap: wrap;
     padding: $spacer $spacer * $line-height;
@@ -35,23 +46,13 @@
 
     &:hover,
     &:focus {
+        color: $brand-grey;
         box-shadow: rgba($brand-black, .1) 0px 12px 20px;
 
         svg {
             transform: translate3d(.2rem, 0, 0);
         }
     }
-    }
-
-    animation-delay: .4s;
-
-    &:nth-child(2) {
-        animation-delay: .6s;
-    }
-
-    &:nth-child(3) {
-        animation-delay: .8s;
-    }
 }
 
 .sectionTitle {

src/styles/_variables.scss

@@ -4,6 +4,7 @@ $brand-black:         #141414;
 $brand-pink:          #ff4092;
 $brand-purple:        #7b1173;
 $brand-violet:        #e000cf;
+$brand-blue:          #11597b;
 
 $brand-grey:          #41474e;
 $brand-grey-light:    #8b98a9;

src/templates/Doc.jsx

@@ -1,6 +1,7 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { graphql } from 'gatsby'
+import Helmet from 'react-helmet'
 import Layout from '../components/Layout'
 import Content from '../components/Content'
 import HeaderSection from '../components/HeaderSection'
@@ -32,6 +33,12 @@ export default class DocTemplate extends Component {
         })
 
         return (
+            <>
+                <Helmet>
+                    <title>{title}</title>
+                    <meta name="description" content={description} />
+                    <body className={section} />
+                </Helmet>
                 <Layout location={location}>
                     <HeaderSection title={section ? sectionTitle : title} />
 
@@ -66,18 +73,13 @@ export default class DocTemplate extends Component {
                         )}
                     </Content>
                 </Layout>
+            </>
         )
     }
 }
 
 export const pageQuery = graphql`
     query DocBySlug($slug: String!) {
-        site {
-            siteMetadata {
-                title
-            }
-        }
-
         markdownRemark(fields: { slug: { eq: $slug } }) {
             id
             excerpt