svg setup, style generic header

.editorconfig

@@ -7,3 +7,6 @@ end_of_line = lf
 indent_style = space
 insert_final_newline = true
 trim_trailing_whitespace = true
+
+[*.json]
+indent_size = 2

gatsby-config.js

@@ -1,7 +1,7 @@
 module.exports = {
     siteMetadata: {
-        title: 'Ocean Protocol Docs',
-        descritpion: '',
+        title: 'Ocean Protocol Documentation',
+        description: '',
         siteUrl: process.env.SITE_URL || 'https://docs.oceanprotocol.com'
     },
     plugins: [
@@ -40,7 +40,14 @@ module.exports = {
                 includePaths: [`${__dirname}/src/styles`]
             }
         },
-        'gatsby-plugin-react-svg',
+        {
+            resolve: 'gatsby-plugin-svgr',
+            options: {
+                icon: true,
+                viewBox: false
+                // see https://github.com/smooth-code/svgr for a list of all options
+            }
+        },
         'gatsby-plugin-catch-links',
         'gatsby-plugin-react-helmet',
         'gatsby-transformer-sharp',

package.json

@@ -4,15 +4,17 @@
   "version": "0.0.1",
   "author": "Ocean Protocol <devops@oceanprotocol.com>",
   "dependencies": {
+    "@oceanprotocol/art": "^1.0.2",
     "gatsby": "^2.0.19",
     "gatsby-image": "^2.0.15",
     "gatsby-plugin-catch-links": "^2.0.6",
     "gatsby-plugin-manifest": "^2.0.5",
     "gatsby-plugin-offline": "^2.0.11",
     "gatsby-plugin-react-helmet": "^3.0.0",
-    "gatsby-plugin-react-svg": "^2.0.0-beta1",
+    "gatsby-plugin-react-svg": "^2.0.0",
     "gatsby-plugin-sass": "^2.0.3",
     "gatsby-plugin-sharp": "^2.0.7",
+    "gatsby-plugin-svgr": "^2.0.0-alpha",
     "gatsby-remark-autolink-headers": "^2.0.10",
     "gatsby-remark-images": "^2.0.6",
     "gatsby-remark-prismjs": "^3.0.3",

src/components/Header.jsx

@@ -1,12 +1,17 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Link } from 'gatsby'
+import { ReactComponent as Logo } from '@oceanprotocol/art/logo/logo-white.svg'
+import styles from './Header.module.scss'
 
 const Header = ({ siteTitle }) => (
-    <header>
-        <h1 style={{ margin: 0 }}>
-            <Link to="/">{siteTitle}</Link>
-        </h1>
+    <header className={styles.header}>
+        <div className={styles.headerContent}>
+            <Link to={'/'} className={styles.headerLogo}>
+                <Logo className={styles.headerLogoImage} />
+                <h1 className={styles.headerTitle}>{siteTitle}</h1>
+            </Link>
+        </div>
     </header>
 )
 

src/components/Header.module.scss

@@ -0,0 +1,51 @@
+@import 'variables';
+
+.header {
+    background: $brand-black;
+    width: 100%;
+    padding: $spacer / 2;
+    padding-right: $spacer / 1.5;
+}
+
+.headerContent {
+    max-width: $break-point--huge;
+    margin-left: auto;
+    margin-right: auto;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.headerLogo {
+    display: flex;
+    align-items: center;
+    width: 50%;
+    cursor: pointer;
+
+    &:hover,
+    &:focus,
+    &:active {
+        transform: none;
+    }
+}
+
+.headerLogoImage {
+    width: 60px;
+    height: 60px;
+    fill: #fff;
+}
+
+.headerTitle {
+    font-size: $font-size-h4;
+    color: $brand-white;
+    margin-left: $spacer;
+    display: none;
+
+    @media (min-width: $break-point--small) {
+        display: inline-block;
+    }
+}
+
+.headerMenu {
+    justify-self: flex-end;
+}

src/pages/index.js

@@ -3,6 +3,19 @@ import PropTypes from 'prop-types'
 import { Link, graphql } from 'gatsby'
 import Layout from '../components/Layout'
 
+const SectionLink = ({ to, title, children }) => (
+    <Link to={to}>
+        <h3>{title}</h3>
+        <p>{children}</p>
+    </Link>
+)
+
+SectionLink.propTypes = {
+    to: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+    children: PropTypes.any
+}
+
 const IndexPage = ({ data, location }) => {
     const { edges } = data.allMarkdownRemark
 
@@ -20,6 +33,22 @@ const IndexPage = ({ data, location }) => {
     return (
         <Layout location={location}>
             <h1>Hi there</h1>
+
+            <SectionLink to="/concepts/introduction/" title="Core Concepts">
+                Understand the fundamentals of Ocean Protocol.
+            </SectionLink>
+
+            <SectionLink to="/setup/" title="Setup Guides">
+                Setting up the Ocean Protocol components.
+            </SectionLink>
+
+            <SectionLink to="/tutorials/" title="Tutorials">
+                Browse tutorials for most common setup and development
+                use-cases.
+            </SectionLink>
+
+            <h1>Docs list</h1>
+
             <ul>{DocsList}</ul>
         </Layout>
     )