From 499b98f1b0f51e7887bdf51858bdc7b444eb6c1e Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Thu, 8 Nov 2018 14:49:09 +0100
Subject: [PATCH] frontpage sections sourced from data

---
 content/concepts/architecture.md             |   2 +-
 content/{ => concepts}/images/components.png | Bin
 gatsby-config.js                             |   7 +++
 src/data/sections.yml                        |  11 +++++
 src/pages/index.js                           |  46 ++++++++++++-------
 src/pages/index.module.scss                  |  37 +++++++++++++++
 6 files changed, 85 insertions(+), 18 deletions(-)
 rename content/{ => concepts}/images/components.png (100%)
 create mode 100644 src/data/sections.yml

diff --git a/content/concepts/architecture.md b/content/concepts/architecture.md
index 21252d12..1b05e447 100644
--- a/content/concepts/architecture.md
+++ b/content/concepts/architecture.md
@@ -3,4 +3,4 @@ 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')
+![Ocean Protocol Components](images/components.png 'Ocean Protocol Components')
diff --git a/content/images/components.png b/content/concepts/images/components.png
similarity index 100%
rename from content/images/components.png
rename to content/concepts/images/components.png
diff --git a/gatsby-config.js b/gatsby-config.js
index fcfe2ae7..2c2e0255 100755
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -19,6 +19,13 @@ module.exports = {
                 path: `${__dirname}/content`
             }
         },
+        {
+            resolve: 'gatsby-source-filesystem',
+            options: {
+                name: 'data',
+                path: `${__dirname}/src/data`
+            }
+        },
         {
             resolve: 'gatsby-transformer-remark',
             options: {
diff --git a/src/data/sections.yml b/src/data/sections.yml
new file mode 100644
index 00000000..e25ea5f4
--- /dev/null
+++ b/src/data/sections.yml
@@ -0,0 +1,11 @@
+- title: Core Concepts
+  description: Understand the fundamentals of Ocean Protocol.
+  link: /concepts/introduction/
+
+- title: Setup Guides
+  description: Setting up the Ocean Protocol components.
+  link: /setup/keeper/
+
+- title: Tutorials
+  description: Browse tutorials for most common setup and development use-cases.
+  link: /tutorials/jupyter/
diff --git a/src/pages/index.js b/src/pages/index.js
index 00eaa03e..da48b74f 100755
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -1,14 +1,14 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Link } from 'gatsby'
+import { Link, graphql } from 'gatsby'
 import Layout from '../components/Layout'
 import Content from '../components/Content'
-// import styles from './index.module.scss'
+import styles from './index.module.scss'
 
 const SectionLink = ({ to, title, children }) => (
     <Link to={to}>
-        <h3>{title}</h3>
-        <p>{children}</p>
+        <h3 className={styles.sectionTitle}>{title}</h3>
+        <p className={styles.sectionText}>{children}</p>
     </Link>
 )
 
@@ -18,27 +18,39 @@ SectionLink.propTypes = {
     children: PropTypes.any
 }
 
-const IndexPage = ({ location }) => (
+const IndexPage = ({ data, location }) => (
     <Layout location={location}>
         <Content>
-            <SectionLink to="/concepts/introduction/" title="Core Concepts">
-                Understand the fundamentals of Ocean Protocol.
-            </SectionLink>
-
-            <SectionLink to="/setup/keeper/" title="Setup Guides">
-                Setting up the Ocean Protocol components.
-            </SectionLink>
-
-            <SectionLink to="/tutorials/jupyter/" title="Tutorials">
-                Browse tutorials for most common setup and development
-                use-cases.
-            </SectionLink>
+            <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>
         </Content>
     </Layout>
 )
 
 IndexPage.propTypes = {
+    data: PropTypes.object.isRequired,
     location: PropTypes.object.isRequired
 }
 
 export default IndexPage
+
+export const IndexQuery = graphql`
+    query {
+        allSectionsYaml {
+            edges {
+                node {
+                    title
+                    description
+                    link
+                }
+            }
+        }
+    }
+`
diff --git a/src/pages/index.module.scss b/src/pages/index.module.scss
index 878d9373..20ade0aa 100644
--- a/src/pages/index.module.scss
+++ b/src/pages/index.module.scss
@@ -1,2 +1,39 @@
 @import 'variables';
 
+.sections {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    margin-top: $spacer * 2;
+
+    @media (min-width: $break-point--medium) {
+        display: flex;
+        justify-content: space-between;
+    }
+}
+
+.section {
+    margin-bottom: $spacer;
+
+    @media (min-width: $break-point--medium) {
+        flex: 0 0 30%;
+        margin-bottom: 0;
+    }
+
+    a {
+        display: block;
+        padding: $spacer * $line-height;
+        border-radius: $border-radius;
+        box-shadow: rgba($brand-black, .1) 0px 9px 18px;
+        color: $brand-grey;
+        height: 100%;
+    }
+}
+
+.sectionTitle {
+    margin-top: 0;
+}
+
+.sectionText {
+    margin-bottom: 0;
+}