Remove gatsby-plugin-json

Author: J12934

package-lock.json

@@ -22,7 +22,6 @@
     "gatsby-plugin-sass": "^2.1.8",
     "gatsby-source-filesystem": "^2.1.7",
     "gatsby-source-git": "github:stevetweeddale/gatsby-source-git",
-    "gatsby-transformer-json": "^2.2.2",
     "gatsby-transformer-remark": "^2.6.10",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",

package.json

@@ -1,22 +1,24 @@
 import React from 'react';
 import { graphql, StaticQuery, Link } from 'gatsby';
-import { node } from 'prop-types';
 
-const Menu = (props) => {
+import socialChannels from '../data/social.json';
+
+const Menu = props => {
   const { menuLinks } = props.data.site.siteMetadata;
-  const json = props.data.allFeaturesJson.edges;
   return (
     <div id="main-menu" className="main-menu">
       <ul>
         {menuLinks.map(link => (
           <li key={link.name}>
             {/* <Link to={link.link}>{link.name}</Link> */}
-           <a href={link.link}>{link.name}</a>
+            <a href={link.link}>{link.name}</a>
           </li>
         ))}
-        {json.map(edge =>(
-          <li key={edge.node.title}>
-            <a href={edge.node.link} target="_blank"><img src={edge.node.image} /></a>
+        {socialChannels.map(socialChannel => (
+          <li key={socialChannel.title}>
+            <a href={socialChannel.link} target="_blank">
+              <img src={socialChannel.image} />
+            </a>
           </li>
         ))}
       </ul>
@@ -36,17 +38,6 @@ export default props => (
             }
           }
         }
-        allFeaturesJson (filter: {tag: {eq: "social"}}){
-          edges {
-            node {
-              id
-              title
-              link
-              image
-              tag
-            }
-          }
-        }
       }
     `}
     render={data => <Menu data={data} />}

src/components/Menu.js

@@ -22,23 +22,5 @@
     "description": "Our Scans can dig deeply into your Network",
     "image": "/features/firewall.svg",
     "tag": "provision"
-  },
-  {
-    "title": "Github",
-    "image": "/features/GitHub-Mark.svg",
-    "link": "https://github.com/secureCodeBox",
-    "tag": "social"
-  },
-  {
-    "title": "Twitter",
-    "image": "/features/Twitter_Social_Icon_Circle_White.svg",
-    "link": "https://twitter.com/securecodebox",
-    "tag": "social"
-  },
-  {
-    "title": "Slack",
-    "image": "/features/Slack_Mark_Monochrome_White.svg",
-    "link": "https://join.slack.com/t/securecodebox/shared_invite/enQtNDU3MTUyOTM0NTMwLTJiNzg3MmU2ZDY2NDFiMGI0Y2FkM2I5Mzc2ZmEzYTcyN2FlN2Y2NDFiZDE5NjAxMjg1M2IxNDViNzE3OTIxMGU",
-    "tag": "social"
   }
 ]

src/data/features.json

@@ -0,0 +1,20 @@
+[
+  {
+    "title": "Github",
+    "image": "/features/GitHub-Mark.svg",
+    "link": "https://github.com/secureCodeBox",
+    "tag": "social"
+  },
+  {
+    "title": "Twitter",
+    "image": "/features/Twitter_Social_Icon_Circle_White.svg",
+    "link": "https://twitter.com/securecodebox",
+    "tag": "social"
+  },
+  {
+    "title": "Slack",
+    "image": "/features/Slack_Mark_Monochrome_White.svg",
+    "link": "https://join.slack.com/t/securecodebox/shared_invite/enQtNDU3MTUyOTM0NTMwLTJiNzg3MmU2ZDY2NDFiMGI0Y2FkM2I5Mzc2ZmEzYTcyN2FlN2Y2NDFiZDE5NjAxMjg1M2IxNDViNzE3OTIxMGU",
+    "tag": "social"
+  }
+]

src/data/social.json

@@ -1,13 +1,14 @@
 import React from 'react';
-import { graphql, withPrefix } from 'gatsby';
+import { withPrefix } from 'gatsby';
 import Helmet from 'react-helmet';
 import SEO from '../components/SEO';
 import Layout from '../components/Layout';
 import approved from '../images/approved.svg';
 import notApproved from '../images/not approved.svg';
 
-const Home = props => {
-  const json = props.data.allFeaturesJson.edges;
+import features from '../data/features.json';
+
+const Home = () => {
   return (
     <Layout bodyClass="page-home">
       <SEO title="Home" />
@@ -37,15 +38,15 @@ const Home = props => {
               What the secureCodeBox provides:
             </h2>
           </div>
-          {json.map(edge => (
-            <div key={edge.node.id} className="col-12 col-md-3 col-lg-3 mb-2">
+          {features.map(feature => (
+            <div key={feature.id} className="col-12 col-md-3 col-lg-3 mb-2">
               <div className="feature hoverable">
-                {edge.node.image && (
+                {feature.image && (
                   <div className="feature-image">
-                    <img src={withPrefix(edge.node.image)} />
+                    <img src={withPrefix(feature.image)} />
                   </div>
                 )}
-                <h2 className="feature-title">{edge.node.title}</h2>
+                <h2 className="feature-title">{feature.title}</h2>
                 {/* TODO add link to corresponding pages */}
               </div>
             </div>
@@ -94,19 +95,4 @@ const Home = props => {
   );
 };
 
-export const query = graphql`
-  query {
-    allFeaturesJson(filter: { tag: { eq: "provision" } }) {
-      edges {
-        node {
-          id
-          title
-          image
-          tag
-        }
-      }
-    }
-  }
-`;
-
 export default Home;