link to remote docs

Author: dpatanin

gatsby-config.js

@@ -110,13 +110,12 @@ module.exports = {
         path: `${__dirname}/.cache/gatsby-source-git/secureCodeBox-v2-alpha/hooks`,
       },
     },
-    // TODO: when #76 merged
-    // {
-    //   resolve: `gatsby-source-filesystem`,
-    //   options: {
-    //     name: `docs`,
-    //     path: `${__dirname}/.cache/gatsby-source-git/secureCodeBox-v2-alpha/docs`,
-    //   },
-    // },
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        name: `docs`,
+        path: `${__dirname}/.cache/gatsby-source-git/secureCodeBox-v2-alpha/docs`,
+      },
+    },
   ],
 };

gatsby-node.js

@@ -1,30 +1,14 @@
-const path = require("path");
-const fs = require("fs");
+const path = require('path');
+const fs = require('fs');
 
 // Create pages from markdown files
 exports.createPages = ({ graphql, actions }) => {
   const { createPage } = actions;
-  // TODO: Remove docs when #76 was merged & use docs template for git remote docs
   return new Promise((resolve, reject) => {
     resolve(
       graphql(`
         {
-          docs: allMarkdownRemark(
-            filter: { fileAbsolutePath: { regex: "/docs/" } }
-            sort: { fields: [frontmatter___date], order: DESC }
-          ) {
-            edges {
-              node {
-                id
-                frontmatter {
-                  path
-                  title
-                }
-                excerpt
-              }
-            }
-          }
-          scanner: allMarkdownRemark(
+          git: allMarkdownRemark(
             filter: { fileAbsolutePath: { regex: "/gatsby-source-git/" } }
           ) {
             edges {
@@ -40,25 +24,25 @@ exports.createPages = ({ graphql, actions }) => {
             }
           }
         }
-      `).then(result => {
-        result.data.docs.edges.forEach(({ node }) => {
-          const component = path.resolve("src/templates/doc.js");
+      `).then((result) => {
+        result.data.git.edges.forEach(({ node }) => {
+          const component = path.resolve('src/templates/doc.js');
           createPage({
-            path: node.frontmatter.path,
+            path: `getStarted/${node.frontmatter.path}`,
             component,
             context: {
-              id: node.id
-            }
+              id: node.id,
+            },
           });
         });
-        result.data.scanner.edges.forEach(({ node }) => {
-          const component = path.resolve("src/templates/integration.js");
+        result.data.git.edges.forEach(({ node }) => {
+          const component = path.resolve('src/templates/integration.js');
           createPage({
             path: `integrations/${node.frontmatter.path}`,
             component,
             context: {
-              id: node.id
-            }
+              id: node.id,
+            },
           });
         });
         resolve();
@@ -70,11 +54,18 @@ exports.createPages = ({ graphql, actions }) => {
 exports.onCreateNode = ({ node, actions }) => {
   const { createNodeField } = actions;
 
-  if (node.internal.type === `File` && (node.base === `scan.yaml` || node.base === `findings.yaml`)) {
+  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] });
+    createNodeField({
+      node,
+      name: `scanTarget`,
+      value: node.relativeDirectory.split('/examples/')[1],
+    });
   }
-}
+};

src/pages/docs/devGuide.md

@@ -1,11 +1,13 @@
 import React from 'react';
-import { graphql, Link } from 'gatsby';
+import { graphql, Link, withPrefix } from 'gatsby';
 import SEO from '../../components/SEO';
 import Layout from '../../components/Layout';
 import Img from 'gatsby-image';
 
 const GetStarted = (props) => {
-  const docs = props.data.ServicesQuery.edges;
+  const docs = props.data.ServicesQuery.edges.filter(function(doc) {
+    return doc.node.frontmatter.path !== null;
+  });
   return (
     <Layout bodyClass="page-getStarted">
       <SEO title="Services" />
@@ -46,7 +48,17 @@ const GetStarted = (props) => {
                 {docs.map((doc, index) => (
                   <Link key={index} to={doc.node.frontmatter.path}>
                     <div className="feature hoverable">
-                      <h1>{doc.node.frontmatter.title}</h1>
+                      <div className="feature-image">
+                        <img
+                          src={withPrefix(
+                            `/features/${doc.node.frontmatter.title}.svg`
+                          )}
+                          alt={doc.node.frontmatter.title}
+                        />
+                      </div>
+                      <h2 className="feature-title">
+                        {doc.node.frontmatter.title}
+                      </h2>
                     </div>
                   </Link>
                 ))}