Add badges to roadmap listing

components/badges/index.js

@@ -21,9 +21,12 @@ export const PrimaryBadge = styled.span`
   margin-left: 10px;
   
   svg {
-    height: 11px;
+    height: 11px !important;
-    width: 11px;
     margin-right: 5px;
+    
+    &.fa-clock {
+      height: 10px !important;
+    }
   }
 `;
 

components/roadmap-summary/index.js

@@ -13,7 +13,7 @@ import {
 import SharePage from 'components/share-page';
 import { BadgeLink, BadgesList, PrimaryBadge, SecondaryBadge } from 'components/badges';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faEnvelope } from '@fortawesome/free-solid-svg-icons';
+import { faEnvelope, faClock, faHandshake } from '@fortawesome/free-solid-svg-icons';
 import GuideBody from 'components/guide-body';
 import siteConfig from "data/site";
 
@@ -31,10 +31,18 @@ const RoadmapSummary = ({ roadmap }) => (
       <Description>{ roadmap.description }</Description>
 
       <BadgesList className="mt-4">
-        { roadmap.upcoming && <SecondaryBadge>Upcoming Roadmap</SecondaryBadge> }
+        { roadmap.upcoming && (
+          <SecondaryBadge>
+            <FontAwesomeIcon icon={faClock}/>
+            Upcoming Roadmap
+          </SecondaryBadge>
+        ) }
         { !roadmap.upcoming && (
           <BadgeLink href={`${siteConfig.url.issue}?title=[${roadmap.title}] - Title Here`} target="_blank">
-            <SecondaryBadge>Suggest Improvements</SecondaryBadge>
+            <SecondaryBadge>
+              <FontAwesomeIcon icon={faHandshake}/>
+              Suggest Improvements
+            </SecondaryBadge>
           </BadgeLink>
         ) }
 

pages/[roadmap]/index.js

@@ -6,48 +6,12 @@ import RoadmapSummary from 'components/roadmap-summary';
 import { serverOnlyProps } from 'lib/server';
 import { getRequestedRoadmap } from 'lib/roadmap';
 import Helmet from 'components/helmet';
-import PageHeader from 'components/page-header';
-import GuideBody from 'components/guide-body';
-
-import { BadgesList, PrimaryBadge, SecondaryBadge } from 'components/badges';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faEnvelope } from '@fortawesome/free-solid-svg-icons';
 
 const Roadmap = ({ roadmap }) => {
   if (!roadmap) {
     return <Error statusCode={ 404 } />
   }
 
-  if (false && roadmap.upcoming) {
-    const GuideContent = require(`../../data/roadmaps/upcoming.md`).default;
-
-    return (
-      <DefaultLayout>
-        <Helmet title={ roadmap.title } description={ roadmap.description } />
-        <SiteNav />
-          <PageHeader
-            title={ roadmap.title}
-            subtitle={roadmap.description}>
-            <BadgesList className="mt-4">
-              <SecondaryBadge>Upcoming Roadmap</SecondaryBadge>
-              <a href="/signup">
-                <PrimaryBadge>
-                  <FontAwesomeIcon icon={faEnvelope}/>
-                  Notify Me
-                </PrimaryBadge>
-              </a>
-            </BadgesList>
-          </PageHeader>
-          <div className="border-top pt-5">
-            <GuideBody >
-              <GuideContent />
-            </GuideBody>
-          </div>
-        <PageFooter />
-      </DefaultLayout>
-    );
-  }
-
   return (
     <DefaultLayout>
       <Helmet title={ roadmap.title } description={ roadmap.description } />

pages/roadmaps.js

@@ -8,6 +8,9 @@ import roadmaps from "data/roadmaps";
 import RowBlock from 'components/row-block';
 import IconRowBlock from 'components/icon-row-block';
 import siteConfig from "data/site";
+import { BadgeLink, BadgesList, PrimaryBadge, SecondaryBadge } from '../components/badges';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faEnvelope, faCodeBranch } from '@fortawesome/free-solid-svg-icons';
 
 const RoadmapsList = () => (
   <DefaultLayout>
@@ -15,8 +18,22 @@ const RoadmapsList = () => (
     <div className="container">
       <PageHeader
         title="Developer Roadmaps"
-        subtitle="Step by step guides and paths to learn different tools or technologies"
+        subtitle="Step by step guides and paths to learn different tools or technologies">
-      />
+        <BadgesList className="mt-4">
+          <BadgeLink href={`${siteConfig.url.issue}?title=[RequestRoadmap] - Title Here`} target="_blank">
+            <SecondaryBadge>
+              <FontAwesomeIcon icon={faCodeBranch}/>
+              Request a Roadmap
+            </SecondaryBadge>
+          </BadgeLink>
+          <BadgeLink href="/signup">
+            <PrimaryBadge>
+              <FontAwesomeIcon icon={faEnvelope}/>
+              Send me Updates
+            </PrimaryBadge>
+          </BadgeLink>
+        </BadgesList>
+      </PageHeader>
     </div>
     <div className="pt-5 pb-5 bg-light border-top">
       <div className="container">