more nav tweaks, test content images

content/concepts/architecture.md

@@ -1,3 +1,6 @@
 ---
 title: Architecture
+description: The architecture of Ocean Protocol with all its components and how they work together.
 ---
+
+![Ocean Protocol Components](../images/components.png 'Ocean Protocol Components')

content/concepts/ecosystem.md

@@ -1,3 +1,12 @@
 ---
 title: Ecosystem
+description: The Ocean Protocol network consists of various components.
 ---
+
+Learn about all of them here.
+
+-   💧 keeper
+-   🐋 aquarius
+-   brizo
+-   🦄 pleuston
+-   🦑 squid

content/concepts/introduction.md

@@ -1,5 +1,6 @@
 ---
 title: Introduction
+description: Get up to speed with Ocean Protocol
 ---
 
 What is Ocean Protocol?

content/concepts/terminology.md

@@ -1,9 +1,8 @@
 ---
 title: Terminology
+description: Terminology specific to Ocean Protocol.
 ---
 
-There is terminology specific to Ocean Protocol.
-
 ## Asset
 
 A data set or data service.

gatsby-config.js

@@ -26,9 +26,14 @@ module.exports = {
                     {
                         resolve: 'gatsby-remark-images',
                         options: {
-                            maxWidth: 600
+                            maxWidth: 756,
+                            quality: 80,
+                            withWebp: true,
+                            linkImagesToOriginal: false,
+                            showCaptions: true
                         }
                     },
+                    'gatsby-remark-smartypants',
                     'gatsby-remark-prismjs',
                     'gatsby-remark-autolink-headers'
                 ]

package.json

@@ -17,6 +17,7 @@
     "gatsby-remark-autolink-headers": "^2.0.10",
     "gatsby-remark-images": "^2.0.6",
     "gatsby-remark-prismjs": "^3.0.3",
+    "gatsby-remark-smartypants": "^2.0.6",
     "gatsby-source-filesystem": "^2.0.7",
     "gatsby-transformer-remark": "^2.1.11",
     "gatsby-transformer-sharp": "^2.1.8",

src/components/HeaderSection.module.scss

@@ -7,6 +7,6 @@
 
 .headerSectionTitle {
     margin: 0;
-    font-size: $font-size-h4;
+    font-size: $font-size-large;
     color: $brand-grey-light;
 }

src/components/Sidebar.jsx

@@ -3,25 +3,6 @@ import PropTypes from 'prop-types'
 import { Link } from 'gatsby'
 import styles from './Sidebar.module.scss'
 
-function groupExpanded(items, pathname) {
-    var breakException = {}
-
-    try {
-        items.forEach(item => {
-            if (item.link === pathname) {
-                throw breakException
-            }
-        })
-    } catch (e) {
-        if (e !== breakException) {
-            throw e
-        } else {
-            return true
-        }
-    }
-    return false
-}
-
 const SidebarLink = ({ link, title, linkClasses }) => {
     if (link) {
         if (link.match(/^\s?http(s?)/gi)) {
@@ -82,41 +63,25 @@ export default class Sidebar extends Component {
         }
 
         return (
-            <nav>
+            <nav className={styles.sidebar}>
                 {sidebarfile.map((group, i) => (
                     <div key={i}>
-                        {groupExpanded(group.items, location.pathname) ? (
-                            <>
-                                <h4 className={styles.groupTitle}>
-                                    {group.items[0].link ? (
-                                        <SidebarLink
-                                            link={group.items[0].link}
-                                            title={group.group}
-                                            linkClasses={styles.groupTitleLink}
-                                        />
-                                    ) : (
-                                        group.group
-                                    )}
-                                </h4>
-                                <SidebarList
-                                    key={i}
-                                    items={group.items}
-                                    location={location}
+                        <h4 className={styles.groupTitle}>
+                            {group.items[0].link ? (
+                                <SidebarLink
+                                    link={group.items[0].link}
+                                    title={group.group}
+                                    linkClasses={styles.groupTitleLink}
                                 />
-                            </>
-                        ) : (
-                            <h4 className={styles.groupTitle}>
-                                {group.items[0].link ? (
-                                    <SidebarLink
-                                        link={group.items[0].link}
-                                        title={group.group}
-                                        linkClasses={styles.groupTitleLink}
-                                    />
-                                ) : (
-                                    group.group
-                                )}
-                            </h4>
-                        )}
+                            ) : (
+                                group.group
+                            )}
+                        </h4>
+                        <SidebarList
+                            key={i}
+                            items={group.items}
+                            location={location}
+                        />
                     </div>
                 ))}
             </nav>

src/components/Sidebar.module.scss

@@ -1,18 +1,33 @@
 @import 'variables';
 
+.sidebar {
+    padding-top: $spacer / 2;
+}
+
 .groupTitle {
-    font-size: $font-size-large;
-    margin-bottom: $spacer / 2;
+    font-size: $font-size-small;
+    font-family: $font-family-button;
+    text-transform: uppercase;
+    margin-top: $spacer;
+    margin-bottom: $spacer / 4;
 }
 
 .groupTitleLink {
     color: $brand-grey-light;
+
+    &:hover,
+    &:focus {
+        transform: none;
+        color: $brand-grey-light;
+    }
 }
 
 .list {
     list-style: none;
     margin: 0;
     padding: 0;
+    border-left: 1px solid $brand-grey-lighter;
+    margin-left: $spacer / 2;
 
     li {
         display: block;
@@ -20,12 +35,21 @@
 }
 
 .link {
-    color: $brand-grey-light;
+    color: $brand-grey;
     display: inline-block;
     padding: $spacer / 6 $spacer / 2;
+    border-left: .1rem solid transparent;
+    margin-left: -.05rem;
+
+    &:hover,
+    &:focus {
+        transform: none;
+        color: $brand-purple;
+    }
 }
 
 .active {
     composes: link;
-    color: $brand-grey;
+    color: $brand-purple;
+    border-left-color: $brand-purple;
 }

src/data/sidebars/concepts.yml

@@ -2,10 +2,10 @@
   items:
     - title: What is Ocean Protocol?
       link: /concepts/introduction/
-    - title: Terminology
-      link: /concepts/terminology/
     - title: Ecosystem overview
       link: /concepts/ecosystem/
+    - title: Terminology
+      link: /concepts/terminology/
 
 - group: Architecture
   items:

src/pages/index.js

@@ -25,11 +25,11 @@ const IndexPage = ({ location }) => (
                 Understand the fundamentals of Ocean Protocol.
             </SectionLink>
 
-            <SectionLink to="/setup/" title="Setup Guides">
+            <SectionLink to="/setup/keeper/" title="Setup Guides">
                 Setting up the Ocean Protocol components.
             </SectionLink>
 
-            <SectionLink to="/tutorials/" title="Tutorials">
+            <SectionLink to="/tutorials/jupyter/" title="Tutorials">
                 Browse tutorials for most common setup and development
                 use-cases.
             </SectionLink>

src/styles/_variables.scss

@@ -30,9 +30,9 @@ $font-size-mini:        .65rem;
 $font-size-text:        $font-size-base;
 $font-size-label:       $font-size-base;
 $font-size-title:       1.4rem;
-$font-size-h1:          3.4rem;
-$font-size-h2:          2.7rem;
-$font-size-h3:          2rem;
+$font-size-h1:          3rem;
+$font-size-h2:          2rem;
+$font-size-h3:          1.7rem;
 $font-size-h4:          1.5rem;
 $font-size-h5:          1.125rem;
 

src/templates/Doc.jsx

@@ -17,23 +17,31 @@ export default class DocTemplate extends Component {
         const { location } = this.props
         const post = this.props.data.markdownRemark
         const { section } = post.fields
+        const { title, description } = post.frontmatter
 
         return (
             <Layout location={location}>
                 <HeaderSection title={section} />
                 <Content>
-                    <div className={styles.wrapper}>
+                    <main className={styles.wrapper}>
                         <aside className={styles.sidebar}>
                             <Sidebar location={location} sidebar={section} />
                         </aside>
 
-                        <main className={styles.main}>
-                            <h1>{post.frontmatter.title}</h1>
+                        <article className={styles.main}>
+                            <header className={styles.header}>
+                                <h1 className={styles.title}>{title}</h1>
+                                {description && (
+                                    <p className={styles.lead}>{description}</p>
+                                )}
+                            </header>
+
                             <div
+                                className={styles.docContent}
                                 dangerouslySetInnerHTML={{ __html: post.html }}
                             />
-                        </main>
-                    </div>
+                        </article>
+                    </main>
                 </Content>
             </Layout>
         )
@@ -53,6 +61,7 @@ export const pageQuery = graphql`
             html
             frontmatter {
                 title
+                description
             }
             fields {
                 section

src/templates/Doc.module.scss

@@ -1,7 +1,7 @@
 @import 'variables';
 
 .wrapper {
-    @media (min-width: $break-point--small) {
+    @media (min-width: $break-point--medium) {
         display: flex;
         justify-content: space-between;
     }
@@ -14,3 +14,27 @@
 .main {
     flex: 0 0 70%;
 }
+
+.header {
+    margin-top: $spacer;
+    margin-bottom: $spacer * $line-height;
+}
+
+.title {
+    font-size: $font-size-h1;
+    margin-top: 0;
+    margin-bottom: $spacer / $line-height;
+}
+
+.lead {
+    font-size: $font-size-large;
+}
+
+.docContent {
+    figcaption {
+        font-size: $font-size-small;
+        text-align: center;
+        color: $brand-grey-light;
+        margin-top: $spacer / 2;
+    }
+}