Add badges to guide page

components/guide-header/index.js

@@ -12,6 +12,9 @@ import {
 } from './style';
 import { getContributionUrl } from "lib/guide";
 import { getTwitterUrl } from "lib/url";
+import { faClock, faEnvelope, faArrowLeft } from '@fortawesome/free-solid-svg-icons';
+import { BadgeLink, BadgesList, PrimaryBadge, SecondaryBadge, DarkBadge } from 'components/badges';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 const GuideHeader = ({
  guide,
@@ -33,6 +36,20 @@ const GuideHeader = ({
     <GuideTitle>{ guide.title }</GuideTitle>
     <GuideSubtitle>{ guide.description }</GuideSubtitle>
     <ActionItems>
+      <BadgesList className="mt-4">
+        <BadgeLink href="/guides">
+          <SecondaryBadge>
+            <FontAwesomeIcon icon={faArrowLeft}/>
+            Other Guides
+          </SecondaryBadge>
+        </BadgeLink>
+        <BadgeLink href="/signup">
+          <PrimaryBadge>
+            <FontAwesomeIcon icon={faEnvelope}/>
+            Send me Updates
+          </PrimaryBadge>
+        </BadgeLink>
+      </BadgesList>
     </ActionItems>
   </HeaderWrap>
 );

components/roadmap-summary/index.js

@@ -31,6 +31,12 @@ const RoadmapSummary = ({ roadmap }) => (
       <Description>{ roadmap.description }</Description>
 
       <BadgesList className="mt-4">
+        <BadgeLink href="/roadmaps">
+          <DarkBadge>
+            <FontAwesomeIcon icon={faArrowLeft}/>
+            Other Roadmaps
+          </DarkBadge>
+        </BadgeLink>
         { roadmap.upcoming && (
           <SecondaryBadge>
             <FontAwesomeIcon icon={faClock}/>

data/guides.json

@@ -39,16 +39,6 @@
     "createdAt": "2019-11-01T12:00:00.860Z",
     "updatedAt": "2019-11-01T12:00:00.860Z"
   },
-  {
-    "title": "Using React Hooks",
-    "description": "Start using React hooks in your react applications today with this guide.",
-    "url": "/guides/using-react-hooks",
-    "fileName": "using-react-hooks",
-    "featured": true,
-    "author": "kamranahmedse",
-    "createdAt": "2019-01-23T17:00:00.860Z",
-    "updatedAt": "2019-01-23T17:00:00.860Z"
-  },
   {
     "title": "HTTP Caching",
     "description": "Everything you need to know about web caching",

path-map.js

@@ -67,7 +67,7 @@ const getRoadmapRoutes = () => {
       },
       // Route for each of the versions of this roadmap i.e.
       // `{ '/frontend/2019': { page: '/[roadmap]/[version]', query: 'frontend/2019' } }`
-      ...(roadmap.versions.reduce((versionRoutes, version) => {
+      ...((roadmap.versions || []).reduce((versionRoutes, version) => {
         return {
           ...versionRoutes,
           [`${roadmap.url}/${version}`]: {