handle meta title & descriptions, section color coding,

2018-11-10 02:42:27 +01:00 · 2018-11-10 02:42:27 +01:00 · 978aaa8342
parent 01f7c2b62a
commit 978aaa8342
12 changed files with 175 additions and 103 deletions
--- a/data/sections.yml
+++ b/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.
--- a/gatsby-config.js
+++ b/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: [
--- a/src/components/Header.jsx
+++ b/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 = () => (
-    <StaticQuery
-        query={graphql`
-            query {
-                site {
-                    siteMetadata {
-                        title
-                    }
-                }
+const query = graphql`
+    query {
+        site {
+            siteMetadata {
+                siteTitle
+            }
+        }

-                allSectionsYaml {
-                    edges {
-                        node {
-                            title
-                            description
-                            link
-                        }
-                    }
+        allSectionsYaml {
+            edges {
+                node {
+                    title
+                    description
+                    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}>
--- a/src/components/HeaderHome.jsx
+++ b/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>
--- a/src/components/HeaderHome.module.scss
+++ b/src/components/HeaderHome.module.scss
@ -17,7 +17,7 @@
 .headerLogo,
 .headerTitle,
 .headerDescription {
-    animation: fadeInUp .8s backwards;
+    animation: fadeInUp .6s ease-out backwards;
 }

 .headerLogo {
--- a/src/components/HeaderSection.module.scss
+++ b/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;
 }
--- a/src/components/Layout.jsx
+++ b/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 (
-        <>
-            {headerElement}
-            {children}
-            <Footer />
-        </>
+        <StaticQuery
+            query={query}
+            render={data => {
+                const siteMeta = data.site.siteMetadata
+
+                return (
+                    <>
+                        <Helmet
+                            defaultTitle={siteMeta.siteTitle}
+                            titleTemplate={`%s - ${siteMeta.siteTitle}`}
+                        />
+                        {headerElement}
+                        {children}
+                        <Footer />
+                    </>
+                )
+            }}
+        />
    )
 }

--- a/src/components/Sidebar.module.scss
+++ b/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;
+    }
 }
--- a/src/pages/index.js
+++ b/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>
-            <ul className={styles.sections}>
-                {data.allSectionsYaml.edges.map(({ node }) => (
-                    <li key={node.title} className={styles.section}>
-                        <SectionLink to={node.link} title={node.title}>
-                            {node.description}
-                        </SectionLink>
-                    </li>
-                ))}
-            </ul>
+    <>
+        <Helmet>
+            <meta
+                name="description"
+                content={data.site.siteMetadata.siteDescription}
+            />
+        </Helmet>
+        <Layout location={location} header={<HeaderHome />}>
+            <Content>
+                <ul className={styles.sections}>
+                    {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 />
-        </Content>
-    </Layout>
+                <Repositories />
+            </Content>
+        </Layout>
+    </>
 )

 IndexPage.propTypes = {
@ -51,6 +60,12 @@ export default IndexPage

 export const IndexQuery = graphql`
    query {
+        site {
+            siteMetadata {
+                siteDescription
+            }
+        }
+
        allSectionsYaml {
            edges {
                node {
--- a/src/pages/index.module.scss
+++ b/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;
--- a/src/styles/_variables.scss
+++ b/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;
--- a/src/templates/Doc.jsx
+++ b/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>
-                    {section ? (
-                        <main className={styles.wrapper}>
-                            <aside className={styles.sidebar}>
-                                <Sidebar
-                                    location={location}
-                                    sidebar={section}
-                                    isPlaceholder={!post.html}
-                                />
-                            </aside>
-                            <article className={styles.main}>
+                    <Content>
+                        {section ? (
+                            <main className={styles.wrapper}>
+                                <aside className={styles.sidebar}>
+                                    <Sidebar
+                                        location={location}
+                                        sidebar={section}
+                                        isPlaceholder={!post.html}
+                                    />
+                                </aside>
+                                <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>
-                    ) : (
-                        <article className={styles.mainSingle}>
-                            <DocHeader
-                                title={title}
-                                description={description}
-                            />
-                            <DocContent html={post.html} />
-                            <DocFooter post={post} />
-                        </article>
-                    )}
-                </Content>
-            </Layout>
+                        )}
+                    </Content>
+                </Layout>
+            </>
        )
    }
 }

 export const pageQuery = graphql`
    query DocBySlug($slug: String!) {
-        site {
-            siteMetadata {
-                title
-            }
-        }
-
        markdownRemark(fields: { slug: { eq: $slug } }) {
            id
            excerpt