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,
+        siteTitle: config.title,
-        description: config.description,
+        siteDescription: config.description,
         siteUrl: config.siteUrl
     },
     plugins: [

src/components/Header.jsx

@@ -3,29 +3,30 @@ 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 = () => (
+const query = graphql`
-    <StaticQuery
+    query {
-        query={graphql`
+        site {
-            query {
+            siteMetadata {
-                site {
+                siteTitle
-                    siteMetadata {
+            }
-                        title
+        }
-                    }
-                }
 
-                allSectionsYaml {
+        allSectionsYaml {
-                    edges {
+            edges {
-                        node {
+                node {
-                            title
+                    title
-                            description
+                    description
-                            link
+                    link
-                        }
-                    }
                 }
             }
-        `}
+        }
+    }
+`
+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
+                        siteTitle
-                        description
+                        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,17 +1,43 @@
 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
-            {headerElement}
+            query={query}
-            {children}
+            render={data => {
-            <Footer />
+                const siteMeta = data.site.siteMetadata
-        </>
+
+                return (
+                    <>
+                        <Helmet
+                            defaultTitle={siteMeta.siteTitle}
+                            titleTemplate={`%s - ${siteMeta.siteTitle}`}
+                        />
+                        {headerElement}
+                        {children}
+                        <Footer />
+                    </>
+                )
+            }}
+        />
     )
 }
 

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,21 +26,29 @@ SectionLink.propTypes = {
 }
 
 const IndexPage = ({ data, location }) => (
-    <Layout location={location} header={<HeaderHome />}>
+    <>
-        <Content>
+        <Helmet>
-            <ul className={styles.sections}>
+            <meta
-                {data.allSectionsYaml.edges.map(({ node }) => (
+                name="description"
-                    <li key={node.title} className={styles.section}>
+                content={data.site.siteMetadata.siteDescription}
-                        <SectionLink to={node.link} title={node.title}>
+            />
-                            {node.description}
+        </Helmet>
-                        </SectionLink>
+        <Layout location={location} header={<HeaderHome />}>
-                    </li>
+            <Content>
-                ))}
+                <ul className={styles.sections}>
-            </ul>
+                    {data.allSectionsYaml.edges.map(({ node }) => (
+                        <li key={node.title} className={styles.section}>
+                            <SectionLink to={node.link} title={node.title}>
+                                {node.description}
+                            </SectionLink>
+                        </li>
+                    ))}
+                </ul>
 
-            <Repositories />
+                <Repositories />
-        </Content>
+            </Content>
-    </Layout>
+        </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,26 +23,6 @@
         flex: 0 0 31%;
     }
 
-    a {
-        display: flex;
-        flex-wrap: wrap;
-        padding: $spacer $spacer * $line-height;
-        border-radius: $border-radius;
-        box-shadow: rgba($brand-black, .1) 0px 9px 18px;
-        color: $brand-grey;
-        background: $brand-white;
-        height: 100%;
-
-        &:hover,
-        &:focus {
-            box-shadow: rgba($brand-black, .1) 0px 12px 20px;
-
-            svg {
-                transform: translate3d(.2rem, 0, 0);
-            }
-        }
-    }
-
     animation-delay: .4s;
 
     &:nth-child(2) {
@@ -54,6 +34,27 @@
     }
 }
 
+.link {
+    display: flex;
+    flex-wrap: wrap;
+    padding: $spacer $spacer * $line-height;
+    border-radius: $border-radius;
+    box-shadow: rgba($brand-black, .1) 0px 9px 18px;
+    color: $brand-grey;
+    background: $brand-white;
+    height: 100%;
+
+    &:hover,
+    &:focus {
+        color: $brand-grey;
+        box-shadow: rgba($brand-black, .1) 0px 12px 20px;
+
+        svg {
+            transform: translate3d(.2rem, 0, 0);
+        }
+    }
+}
+
 .sectionTitle {
     margin-top: 0;
     margin-bottom: $spacer / $line-height;

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,20 +33,36 @@ export default class DocTemplate extends Component {
         })
 
         return (
-            <Layout location={location}>
+            <>
-                <HeaderSection title={section ? sectionTitle : title} />
+                <Helmet>
+                    <title>{title}</title>
+                    <meta name="description" content={description} />
+                    <body className={section} />
+                </Helmet>
+                <Layout location={location}>
+                    <HeaderSection title={section ? sectionTitle : title} />
 
-                <Content>
+                    <Content>
-                    {section ? (
+                        {section ? (
-                        <main className={styles.wrapper}>
+                            <main className={styles.wrapper}>
-                            <aside className={styles.sidebar}>
+                                <aside className={styles.sidebar}>
-                                <Sidebar
+                                    <Sidebar
-                                    location={location}
+                                        location={location}
-                                    sidebar={section}
+                                        sidebar={section}
-                                    isPlaceholder={!post.html}
+                                        isPlaceholder={!post.html}
-                                />
+                                    />
-                            </aside>
+                                </aside>
-                            <article className={styles.main}>
+                                <article className={styles.main}>
+                                    <DocHeader
+                                        title={title}
+                                        description={description}
+                                    />
+                                    <DocContent html={post.html} />
+                                    <DocFooter post={post} />
+                                </article>
+                            </main>
+                        ) : (
+                            <article className={styles.mainSingle}>
                                 <DocHeader
                                     title={title}
                                     description={description}
@@ -53,31 +70,16 @@ export default class DocTemplate extends Component {
                                 <DocContent html={post.html} />
                                 <DocFooter post={post} />
                             </article>
-                        </main>
+                        )}
-                    ) : (
+                    </Content>
-                        <article className={styles.mainSingle}>
+                </Layout>
-                            <DocHeader
+            </>
-                                title={title}
-                                description={description}
-                            />
-                            <DocContent html={post.html} />
-                            <DocFooter post={post} />
-                        </article>
-                    )}
-                </Content>
-            </Layout>
         )
     }
 }
 
 export const pageQuery = graphql`
     query DocBySlug($slug: String!) {
-        site {
-            siteMetadata {
-                title
-            }
-        }
-
         markdownRemark(fields: { slug: { eq: $slug } }) {
             id
             excerpt