add excerpts to scanner and link pages

Author: dpatanin

README.md

@@ -2,8 +2,6 @@
 
 This repository sources the [secureCodeBox landing page][prod-website].
 
-The actual content of the static site is in `src/www/`. 
-
 ## Build and Run
 
 For development: 

gatsby-config.js

@@ -60,11 +60,11 @@ module.exports = {
         name: "Docs",
         // link: '/docs',
         link: "https://github.com/secureCodeBox/secureCodeBox/tree/master/docs"
-      }
-      // {
-      //   name: 'Scanner',
-      //   link: '/scanner',
-      // },
+      },
+      {
+        name: 'Scanner',
+        link: '/scanner',
+      },
     ]
   },
 

gatsby-node.js

@@ -44,8 +44,11 @@ exports.createPages = ({ graphql, actions }) => {
               node {
                 frontmatter {
                   title
+                  path
+                  category
                 }
                 id
+                excerpt
               }
             }
           }
@@ -74,7 +77,7 @@ exports.createPages = ({ graphql, actions }) => {
         result.data.scanner.edges.forEach(({ node }) => {
           const component = path.resolve("src/templates/scanner.js");
           createPage({
-            path: "/scanner/" + node.frontmatter.title,
+            path: node.frontmatter.path,
             component,
             context: {
               id: node.id

src/components/Menu.js

@@ -11,7 +11,7 @@ const Menu = (props) => {
         {menuLinks.map(link => (
           <li key={link.name}>
             {/* <Link to={link.link}>{link.name}</Link> */}
-           <a href={link.link} target="_blank">{link.name}</a>
+           <a href={link.link}>{link.name}</a>
           </li>
         ))}
         {json.map(edge =>(

src/components/SEO.js

@@ -3,7 +3,6 @@ import Helmet from 'react-helmet';
 import { StaticQuery, graphql } from 'gatsby';
 import favicon from '../../static/Favicon@1x.svg';
 
-// TODO: Fix favicon
 const SEO = props => (
   <StaticQuery
     query={detailsQuery}

src/pages/scanner/index.js

@@ -1,9 +1,10 @@
-import React from 'react';
-import { graphql } from 'gatsby';
-import SEO from '../../components/SEO';
-import Layout from '../../components/Layout';
+import React from "react";
+import { graphql } from "gatsby";
+import { Link } from "gatsby";
+import SEO from "../../components/SEO";
+import Layout from "../../components/Layout";
 
-const Scanner = (props) => {
+const Scanner = props => {
   const scanner = props.data.allMarkdownRemark.edges;
   return (
     <Layout bodyClass="page-scanner">
@@ -13,47 +14,67 @@ const Scanner = (props) => {
           <div className="row">
             <div className="col-12">
               <h1>Scanner</h1>
+              <h2>Out of the Box</h2>
+              <p>
+                Each Scanner is an individual tool. We took no part in building
+                them and did not adjust them for our purposes, which is great,
+                because, like so we can provide them as they are and ready for
+                use.
+              </p>
             </div>
           </div>
         </div>
       </div>
 
-      <div className="container pb-6">
-        {/* <div className="row">
-          {testimonials.map(edge => (
-            <div key={edge.node.frontmatter.path} className="col-12 col-md-6 mb-1">
-              <div className="testimonial">
-                <div className="testimonials-meta">
-                  <h2 className="testimonials-title">{edge.node.frontmatter.title}</h2>
-                  <p className="testimonials-name">{edge.node.frontmatter.name}</p>
-                  <p className="testimonials-jobtitle">{edge.node.frontmatter.jobtitle}</p>
+      <div className="container  pb-2  pb-md-3">
+        <div className="row justify-content-center">
+          {scanner.map(edge => (
+            <div
+              key={edge.node.id}
+              className="col-12 col-md-6 col-lg-6 col-sm-12 mb-2"
+            >
+              <div className="feature">
+                {/* TODO add images 
+                    {edge.node.image && (
+                      <div className="feature-image">
+                        <img src={withPrefix(edge.node.image)} />
+                      </div>
+                    )} */}
+                <Link
+                  to={edge.node.frontmatter.path}
+                  
+                >
+                  <h2 className="feature-title">
+                    {edge.node.frontmatter.title}
+                  </h2>
+                </Link>
+                <div className="feature-content">
+                  <p>{edge.node.excerpt}</p>
                 </div>
-                <div
-                  className="testimonials-content"
-                  dangerouslySetInnerHTML={{ __html: edge.node.html }}
-                />
               </div>
             </div>
           ))}
-        </div> */}
+        </div>
       </div>
     </Layout>
   );
 };
 
 export const query = graphql`
-  query TestimonialsQuery {
+  query ScannerQuery {
     allMarkdownRemark(
-      filter: { fileAbsolutePath: { regex: "/scanner/" } }
-      sort: { fields: [frontmatter___title], order: DESC }
+      filter: { frontmatter: { category: { eq: "scanner" } } }
+      sort: { fields: [frontmatter___title], order: ASC }
     ) {
       edges {
         node {
           html
           frontmatter {
             title
             path
+            category
           }
+          excerpt
         }
       }
     }

src/pages/scanner/placeholder.md

@@ -19,18 +19,19 @@
     height: auto;
   }
   .feature-title {
+    color: $secondary;
     font-size: 1.4rem;
     font-weight: 300;
     line-height: 1.2;
     margin-top: 10px;
   }
   .feature-content {
     margin-bottom: 0;
-    margin-top: auto;
     p {
       margin: 0;
+      text-align: left;
+      color: $secondary;
       strong {
-        color: $secondary;
         text-transform: uppercase;
         font-size: 0.8rem;
         font-weight: 700;

src/scss/components/_feature.scss

@@ -6,6 +6,7 @@ import Layout from '../components/Layout';
 const getStarted = ({ data }) => {
   const { title } = data.markdownRemark.frontmatter;
   const { html } = data.markdownRemark;
+  const { excerpt } = data.markdownRemark;
   return (
     <Layout bodyClass="page-getStarted">
       <SEO title={title} />
@@ -16,6 +17,7 @@ const getStarted = ({ data }) => {
               <div className="service service-single">
                 <h1 className="title">{title}</h1>
                 <div className="content" dangerouslySetInnerHTML={{ __html: html }} />
+                <p>{excerpt}</p>
               </div>
             </div>
           </div>
@@ -32,6 +34,7 @@ export const query = graphql`
         title
       }
       html
+      excerpt
     }
   }
 `;

src/templates/getStarted.js

@@ -7,18 +7,14 @@ const Scanner = ({ data }) => {
   const { html } = data.markdownRemark;
   return (
     <Layout bodyClass="page-scanners">
-      <div className="strip strip-white strip-diagonal">
-        <div className="container pt-4 pt-md-10">
-          <div className="row justify-content-start">
-            <div className="col-12 col-md-8">
-              <div className="testimonial testimonial-single">
-                <h1 className="title">{title}</h1>
-                <div
-                  className="content"
-                  dangerouslySetInnerHTML={{ __html: html }}
-                />
-              </div>
-            </div>
+      <div className="container pt-4 pt-md-10">
+        <div className="row justify-content-start">
+          <div className="col-12 col-md-8">
+            <h1 className="title">{title}</h1>
+            <div
+              className="content"
+              dangerouslySetInnerHTML={{ __html: html }}
+            />
           </div>
         </div>
       </div>