Update website for v2

README.md

@@ -77,7 +77,7 @@ Since we work with various different tools, it is even more important to keep a
 
 ### Adding a scanner or persistence provider
 
-Scanner and persistence provider are referred as integrations. Scanner, which are integrated into our secureCodeBox project have their own repository in which the main documentation must be written in the README.md. Persistence provider documentation is located at `/src/pages/integrations/persistence-provider/`.
+Scanners and persistence providers are referred to as integrations. Scanners, which are integrated into our [secureCodeBox-v2-alpha](https://github.com/secureCodeBox/secureCodeBox-v2-alpha) repository have their own directories (located at [/scanners/](https://github.com/secureCodeBox/secureCodeBox-v2-alpha/tree/master/scanners)) in which the main documentation must be written in a `README.md` file. Persistence provider documentation is located at `/src/pages/integrations/persistence-provider/`.
 
 #### Scanner
 
@@ -86,7 +86,7 @@ To add a scanner documentation you need to extend the `scannerRepos` Array in th
 ```bash
   {
     name: 'scanner name',
-    url: 'https://github.com/secureCodeBox/scanner_repository',
+    directory: 'directoryName' # in /scanners/
   }
 ```
 
@@ -98,11 +98,11 @@ Additionally you can and (for the sake of aesthetics) should provide an icon in
 <pre>
 
         ---
+
         title: "Scame"
         path: "scanner/Scame"
         category: "scanner"
         usecase: "general use of this scanner"
-        release: "url to the release badge"
 
         ---
 

gatsby-config.js

@@ -4,45 +4,6 @@
  * See: https://www.gatsbyjs.org/docs/gatsby-config/
  */
 
-const scannerRepos = [
-  {
-    name: 'Amass',
-    url: 'https://github.com/secureCodeBox/scanner-infrastructure-amass',
-  },
-  {
-    name: 'Arachni',
-    url: 'https://github.com/secureCodeBox/scanner-webapplication-arachni',
-  },
-  {
-    name: 'Nikto',
-    url: 'https://github.com/secureCodeBox/scanner-webserver-nikto',
-  },
-  {
-    name: 'Nmap',
-    url: 'https://github.com/secureCodeBox/scanner-infrastructure-nmap',
-  },
-  {
-    name: 'SSH',
-    url: 'https://github.com/secureCodeBox/scanner-infrastructure-ssh',
-  },
-  {
-    name: 'SSLyze',
-    url: 'https://github.com/secureCodeBox/scanner-infrastructure-sslyze',
-  },
-  {
-    name: 'Zap',
-    url: 'https://github.com/secureCodeBox/scanner-webapplication-zap',
-  },
-  {
-    name: 'WPScan',
-    url: 'https://github.com/secureCodeBox/scanner-cms-wpscan',
-  },
-  {
-    name: 'Ncrack',
-    url: 'https://github.com/secureCodeBox/scanner-infrastructure-ncrack',
-  },
-];
-
 module.exports = {
   siteMetadata: {
     title: `secureCodeBox`,
@@ -59,14 +20,14 @@ module.exports = {
         name: 'Get Started',
         external: true,
         // link: '/getStarted',
-        link: 'https://github.com/secureCodeBox/secureCodeBox',
+        link: 'https://github.com/secureCodeBox/secureCodeBox-v2-alpha',
       },
       {
         name: 'Docs',
         external: true,
         // link: '/docs',
         link:
-          'https://github.com/secureCodeBox/secureCodeBox/tree/master/docs/index.md',
+          'https://github.com/secureCodeBox/secureCodeBox-v2-alpha/blob/master/docs/index.md',
       },
       {
         name: 'Integrations',
@@ -133,16 +94,28 @@ module.exports = {
         name: 'images',
       },
     },
-    ...scannerRepos.map(({ name, url }) => {
-      return {
-        resolve: `gatsby-source-git`,
-        options: {
-          name: name,
-          remote: url,
-          branch: `master`,
-          patterns: `README.md`,
-        },
-      };
-    }),
+    {
+      resolve: `gatsby-source-git`,
+      options: {
+        name: `secureCodeBox-v2-alpha`,
+        remote: `https://github.com/secureCodeBox/secureCodeBox-v2-alpha`,
+        branch: `master`,
+        patterns: [`scanners`, `hooks`, `docs`],
+      },
+    },
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        name: `scanners`,
+        path: `${__dirname}/.cache/gatsby-source-git/secureCodeBox-v2-alpha/scanners`,
+      }
+    },
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        name: `hooks`,
+        path: `${__dirname}/.cache/gatsby-source-git/secureCodeBox-v2-alpha/hooks`,
+      }
+    }
   ],
 };

gatsby-node.js

@@ -1,4 +1,5 @@
 const path = require("path");
+const fs = require("fs");
 
 // Create pages from markdown files
 exports.createPages = ({ graphql, actions }) => {
@@ -113,3 +114,15 @@ exports.createPages = ({ graphql, actions }) => {
     );
   });
 };
+
+exports.onCreateNode = ({ node, actions }) => {
+  const { createNodeField } = actions;
+
+  if (node.internal.type === `File` && (node.base === `scan.yaml` || node.base === `findings.yaml`)) {
+    fs.readFile(node.absolutePath, undefined, (_err, buf) => {
+      createNodeField({ node, name: `content`, value: buf.toString() });
+    });
+    createNodeField({ node, name: `fileName`, value: node.base });
+    createNodeField({ node, name: `scanTarget`, value: node.relativeDirectory.split('/examples/')[1] });
+  }
+}

package.json

@@ -28,7 +28,8 @@
     "react": "^16.13.1",
     "react-burger-menu": "^2.7.0",
     "react-dom": "^16.13.1",
-    "react-helmet": "^6.1.0"
+    "react-helmet": "^6.1.0",
+    "react-tabs": "^3.1.1"
   },
   "devDependencies": {
     "node-sass": "^4.14.1",

src/components/BetaAlert.js

@@ -0,0 +1,15 @@
+import React from 'react';
+
+const BetaAlert = () => (
+    <div className="alert alert-warning beta-alert" role="alert">
+        You are looking at preliminary documentation for secureCodeBox v2 beta. Not what you want? See <a
+            href="https://github.com/secureCodeBox/secureCodeBox/blob/master/README.md"
+            className="alert-link"
+            rel="noreferrer"
+            target="_blank">
+                latest stable release documentation
+        </a>.
+    </div>
+);
+
+export default BetaAlert;

src/components/Footer.js

@@ -23,8 +23,10 @@ const Footer = props => (
                 </a>
               </li>
               <li className="copyright">
-                © {new Date().getFullYear()}{' '}
-                {props.data.site.siteMetadata.company}
+                <a href="https://www.iteratec.de">
+                  © {new Date().getFullYear()}{' '}
+                  {props.data.site.siteMetadata.company}
+                </a>
               </li>
             </ul>
           </div>

src/components/IntegrationCard.js

@@ -0,0 +1,88 @@
+import React from 'react';
+import { withPrefix } from 'gatsby';
+
+const IntegrationCard = (props) => {
+  return (
+    <div className="row integration-card hoverable">
+      <div className="col-xl-2 col-lg-3 col-md-4 col-sm-4 col-4 integration-card-scanner-icon my-auto">
+        <img
+          className="scanner-icon"
+          src={withPrefix(
+            '/integrationIcons/' + props.frontmatter.title + '.svg'
+          )}
+          alt="persistence provider icon"
+        ></img>
+      </div>
+      <div className="col-xl-8 col-lg-6 col-md-8 col-sm-8 col-8">
+        <h2 className="integration-card-title">
+          {props.frontmatter.title}
+          {props.frontmatter.category === 'scanner'
+            ? props.frontmatter.type.length > 0 && (
+                <strong> ({props.frontmatter.type}) </strong>
+              )
+            : ''}
+        </h2>
+        <div className="integration-card-content">
+          <p>{props.frontmatter.usecase}</p>
+        </div>
+      </div>
+      <div className="col-xl-2 col-lg-3 col-md-12 col-sm-12 col-12 integration-card-scanner-icon my-auto">
+        <div className="row">
+          <div className="col-lg-12 col-md-6 col-sm-6 col-6">
+            {props.frontmatter.state.length > 0 &&
+              props.frontmatter.state === 'released' && (
+                <img
+                  className="release"
+                  src={withPrefix(
+                    'https://img.shields.io/badge/State-' +
+                      props.frontmatter.state +
+                      '-green'
+                  )}
+                  alt="release version"
+                ></img>
+              )}
+            {props.frontmatter.state.length > 0 &&
+              props.frontmatter.state === 'developing' && (
+                <img
+                  className="release"
+                  src={withPrefix(
+                    'https://img.shields.io/badge/State-' +
+                      props.frontmatter.state +
+                      '-yellow'
+                  )}
+                  alt="release version"
+                ></img>
+              )}
+            {props.frontmatter.state.length > 0 &&
+              props.frontmatter.state === 'roadmap' && (
+                <img
+                  className="release"
+                  src={withPrefix(
+                    'https://img.shields.io/badge/State-' +
+                      props.frontmatter.state +
+                      '-lightgray'
+                  )}
+                  alt="release version"
+                ></img>
+              )}
+          </div>
+          <div className="col-lg-12 col-md-6 col-sm-6 col-6">
+            {props.frontmatter.appVersion && (
+              <img
+                className="release"
+                src={withPrefix(
+                  'https://img.shields.io/badge/App_Version-' +
+                    props.frontmatter.appVersion +
+                    '-blue'
+                )}
+                alt="release version"
+              ></img>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default IntegrationCard;

src/components/Layout.js

@@ -2,15 +2,17 @@ import React from 'react';
 import SEO from './SEO';
 import Header from './Header';
 import Footer from './Footer';
+import BetaAlert from './BetaAlert';
 import '../scss/style.scss';
-import MenuMobile from "../components/MenuMobile"; 
+import MenuMobile from "../components/MenuMobile";
 
 const Layout = props => {
   return (
     <React.Fragment>
       <SEO />
       <div className={`page${props.bodyClass ? ` ${props.bodyClass}` : ""}`}>
         <div id="wrapper" className="wrapper">
+          <BetaAlert />
           <Header />
           <MenuMobile />
           {props.children}

src/components/MenuMobile.js

@@ -19,7 +19,7 @@ const MenuMobile = props => {
       }}
     >
       {menuLinks.map(link => (
-        <Link to={link.link}>{link.name}</Link>
+        <Link to={link.link} key={link.name}>{link.name}</Link>
       ))}
     </Menu>
   );