add bottom table and fix query bug

Author: dpatanin

gatsby-config.js

@@ -52,6 +52,10 @@ module.exports = {
     {
       "resolve": `gatsby-transformer-remark`,
       "options": {
+        "tableOfContents": {
+          "heading": null,
+          "maxDepth": 6,
+        },
         "excerpt_separator": `<!-- end -->`
       }
     },

gatsby-node.js

@@ -6,23 +6,6 @@ exports.createPages = ({ graphql, actions }) => {
   return new Promise((resolve, reject) => {
     resolve(
       graphql(`
-            {
-            provisions: allMarkdownRemark(
-              filter: { fileAbsolutePath: { regex: "/provisions/" } }
-              sort: { fields: [frontmatter___date], order: DESC }
-            ) {
-              edges {
-                node {
-                  id
-                  frontmatter {
-                    path
-                    title
-                    date(formatString: "DD MMMM YYYY")
-                  }
-                  excerpt
-                }
-              }
-            }
            {
             getStarted: allMarkdownRemark(
               filter: { fileAbsolutePath: { regex: "/getStarted/" } }
@@ -75,16 +58,6 @@ exports.createPages = ({ graphql, actions }) => {
           }
         `,
       ).then(result => {
-        result.data.provisions.edges.forEach(({ node }) => {
-          const component = path.resolve('src/templates/provision.js');
-          createPage({
-            path: node.frontmatter.path,
-            component,
-            context: {
-              id: node.id,
-            },
-          });
-        });
         result.data.getStarted.edges.forEach(({ node }) => {
           const component = path.resolve('src/templates/getStarted.js');
           createPage({

src/data/features.json

@@ -2,21 +2,25 @@
   {
     "title": "Cloud Ready",
     "description": "Ready to be deployed on a Cloud Server",
-    "image": "/features/cloud.svg"
+    "image": "/features/cloud.svg",
+    "tag": "provision"
   },
   {
     "title": "Open Source",
     "description": "We are an Open Scource project and happy about your contribution",
-    "image": "/features/Open Source.svg"
+    "image": "/features/Open Source.svg",
+    "tag": "provision"
   },
   {
     "title": "Scanner out of the box",
     "description": "We integrate Open Source Scanner ready to use",
-    "image": "/features/scan.svg"
+    "image": "/features/scan.svg",
+    "tag": "provision"
   },
   {
     "title": "Scans behind the firewall",
     "description": "Our Scans can dig deeply in your Network",
-    "image": "/features/firewall.svg"
+    "image": "/features/firewall.svg",
+    "tag": "provision"
   }
 ]

src/pages/index.js

@@ -6,6 +6,7 @@ import Layout from "../components/Layout";
 
 const Home = (props) => {
   const json = props.data.allFeaturesJson.edges;
+  const markdownRemark = props.data.markdownRemark;
     return(
         <Layout bodyClass="page-home">
           <SEO title="Home" />
@@ -25,7 +26,7 @@ const Home = (props) => {
             </div>
           </div>
 
-        <div className="container pt-5 pb-5 pt-md-7 pb-md-7">
+        <div className="container pt-5 pb-2 pt-md-7 pb-md-3">
           <div className="row justify-content-center">
             <div className="col-12">
               <h2 className="title-3 text-dark mb-4">What the secureCodeBox provides</h2>
@@ -47,8 +48,9 @@ const Home = (props) => {
         </div>
 
         <div className="container pb-5 pb-md-7">
-          <div className="col-12">
-            <h2 className="title-3 text-dark mb-4">When is the secureCodeBox right for your team?</h2>
+          <div className="feature">
+            <h2 className="feature-title">{markdownRemark.frontmatter.title}</h2>
+            <div className="feature-table" dangerouslySetInnerHTML={{ __html: markdownRemark.html }}></div>
           </div>
         </div>
         </Layout>
@@ -57,13 +59,21 @@ const Home = (props) => {
 
 export const query = graphql`
    query {
-    allFeaturesJson {
+    markdownRemark (frontmatter: {title: {eq: "When is the secureCodeBox right for your team?"}}){
+      frontmatter{
+        title
+        date
+      }
+      html
+    }
+    allFeaturesJson (filter: {tag: {eq: "provision"}}){
       edges {
         node {
           id
           title
           description
           image
+          tag
         }
       }
     }

src/pages/rightForYourTeam.md

@@ -0,0 +1,12 @@
+---
+title: 'When is the secureCodeBox right for your team?'
+date: 2019-08-19T13:06:03+02:00
+path: '/rightForYourTeam.md'
+---
+
+| The secureCodeBox is intended for:               |    The secureCodeBox might not be right for:    |
+| ------------------------------------------------ | :---------------------------------------------: |
+| Teams with a medium to advanced security program |   Teams just starting with a security program   |
+| Multi-team setups                                | Teams with separate dev, ops and security teams |
+| Integration into fast moving teams               |
+

src/scss/components/_feature.scss

@@ -41,4 +41,24 @@
       }
     }
   }
+  .feature-table {
+    table-layout: auto;
+    table {
+      thead {
+        tr {
+          th{
+            color: $secondary;
+          }
+        }
+      }
+      tbody { 
+        tr { 
+          td {
+            color: $secondary;
+            font-size: 0.75rem;
+          }
+        }
+      }
+    }
+  }
 }