add persistence provider to Integrations page

Author: dpatanin

gatsby-node.js

@@ -38,7 +38,7 @@ exports.createPages = ({ graphql, actions }) => {
             }
           }
           scanner: allMarkdownRemark(
-            filter: {fileAbsolutePath: { regex: "/gatsby-source-git/"} }
+            filter: { fileAbsolutePath: { regex: "/gatsby-source-git/" } }
           ) {
             edges {
               node {
@@ -52,6 +52,20 @@ exports.createPages = ({ graphql, actions }) => {
               }
             }
           }
+          persistenceProvider: allMarkdownRemark(
+            filter: { fileAbsolutePath: { regex: "/integrations/persistence-provider/" } }
+          ) {
+            edges {
+              node {
+                frontmatter {
+                  title
+                  path
+                  category
+                }
+                id
+              }
+            }
+          }
         }
       `).then(result => {
         result.data.getStarted.edges.forEach(({ node }) => {
@@ -84,6 +98,16 @@ exports.createPages = ({ graphql, actions }) => {
             }
           });
         });
+        result.data.persistenceProvider.edges.forEach(({ node }) => {
+          const component = path.resolve("src/templates/integration.js");
+          createPage({
+            path: node.frontmatter.path,
+            component,
+            context: {
+              id: node.id
+            }
+          });
+        });
         resolve();
       })
     );

src/pages/contact/index.js

@@ -122,7 +122,7 @@ class ContactPage extends React.Component {
 
                 <div class="form-group">
                   <label for="mce-MESSAGE" className="col-form-label">
-                    Interessted in &hellip;
+                    Interested in &hellip;
                   </label>
                   <input
                     type="text"

src/pages/integrations/index.js

@@ -4,7 +4,8 @@ import SEO from "../../components/SEO";
 import Layout from "../../components/Layout";
 
 const Integrations = props => {
-  const scanner = props.data.allMarkdownRemark.edges;
+  const scanner = props.data.scanner.edges;
+  const persistenceProvider = props.data.persistenceProvider.edges;
 
   return (
     <Layout bodyClass="page-integrations">
@@ -28,9 +29,7 @@ const Integrations = props => {
       <div className="container  pb-2  pb-md-3">
         <div className="row justify-content-center">
           <div className="col-12">
-            <h2 className="title-3 text-dark mb-2">
-              Scanner
-            </h2>
+            <h2 className="title-3 text-dark mb-2">Scanner</h2>
           </div>
           {scanner.map(edge => (
             <div
@@ -66,13 +65,48 @@ const Integrations = props => {
           ))}
         </div>
       </div>
+      <div className="container  pb-2  pb-md-3">
+        <div className="row justify-content-center">
+          <div className="col-12">
+            <h2 className="title-3 text-dark mb-2">Persistence provider</h2>
+          </div>
+          {persistenceProvider.map(edge => (
+            <div
+              key={edge.node.id}
+              className="col-12 col-md-6 col-lg-6 col-sm-12 mb-2 no-highlight"
+            >
+              <Link to={edge.node.frontmatter.path}>
+                <div className="feature hoverable">
+                  <div className="feature-scanner-icon">
+                    {/* <img
+                      className="scanner-icon"
+                      src={withPrefix(
+                        "/scannerIcons/" + edge.node.frontmatter.title + ".svg"
+                      )}
+                      alt="scanner icon"
+                    ></img> */}
+                    
+                  </div>
+                  <h2 className="feature-title">
+                    {edge.node.frontmatter.title}
+                  </h2>
+                  <div className="feature-content">
+                    <p>{edge.node.frontmatter.usecase}</p>
+                  </div>
+                  <div className="feature-scanner-icon-right-gap"></div>
+                </div>
+              </Link>
+            </div>
+          ))}
+        </div>
+      </div>
     </Layout>
   );
 };
 
 export const query = graphql`
-  query ScannerQuery {
-    allMarkdownRemark(
+  query {
+    scanner: allMarkdownRemark(
       filter: { frontmatter: { category: { eq: "scanner" } } }
       sort: { fields: [frontmatter___title], order: ASC }
     ) {
@@ -89,6 +123,23 @@ export const query = graphql`
         }
       }
     }
+    persistenceProvider: allMarkdownRemark(
+      filter: {
+        fileAbsolutePath: { regex: "/integrations/persistence-provider/" }
+      }
+    ) {
+      edges {
+        node {
+          frontmatter {
+            title
+            path
+            category
+          }
+          id
+          html
+        }
+      }
+    }
   }
 `;
 

src/pages/integrations/persistence-provider/defectDojo.md

@@ -5,8 +5,6 @@ category: "presistence provider"
 
 ---
 
-# Defect Dojo
-
 ## About
 
 DefectDojo is a OpenSource Tools for importing and managing findings of security scanners. The DefectDojo Persistence Provider can be used to create new Engagment for SecurityTest run via the secureCodeBox and import all findings which were identified.

src/pages/integrations/persistence-provider/elasticsearch.md

@@ -4,8 +4,6 @@ path: "persistence-provider/elasticsearch"
 category: "persistence provider"
 ---
 
-# Elasticsearch
-
 ## About
 
 The ElasticSearch PersistenceProvider saves all findings and reports into the configured ElasticSearch index. This allows for some easy searching and visualisation of the findings. To learn more about Elasticsearch visit [elastic.io].