Add roadmaps listing page

components/icon-row-block/index.js

@@ -0,0 +1,15 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+import RowBlock from 'components/row-block';
+import { SubmitText, SubmitWrap } from './style';
+
+const IconRowBlock = ({ url, icon, text, openExternal=false }) => (
+  <RowBlock url={ url } openExternal={openExternal}>
+    <SubmitWrap>
+      <FontAwesomeIcon icon={ icon } />
+      <SubmitText>{ text }</SubmitText>
+    </SubmitWrap>
+  </RowBlock>
+);
+
+export default IconRowBlock;

components/icon-row-block/style.js

@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+
+export const SubmitWrap = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    height: 25px;
+    color: dimgrey;
+  }
+`;
+
+export const SubmitText = styled.p`
+  margin-bottom: 0;
+  color: dimgrey;
+  margin-top: 8px;
+`;

components/page-header/index.js

@@ -0,0 +1,11 @@
+import { HeaderWrap, Subtitle, Title } from './style';
+
+const PageHeader = (props) => (
+  <HeaderWrap>
+    <Title>Developer Roadmaps</Title>
+    <Subtitle>We continue to improve these roadmaps and add new ones, subscribe to get occasional updates</Subtitle>
+    { props.children }
+  </HeaderWrap>
+);
+
+export default PageHeader;

components/page-header/style.js

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+
+export const HeaderWrap = styled.div`
+  text-align: center;
+  padding: 45px 30px;
+`;
+
+export const Title = styled.h1`
+  font-size: 48px;
+  font-weight: 700;
+`;
+
+export const Subtitle = styled.p`
+  font-size: 16px;
+  color: #444;
+`;

components/roadmap-summary/index.js

@@ -32,7 +32,7 @@ const RoadmapSummary = ({ roadmap }) => (
         )) }
       </VersionList>
     </Header>
-    <Summary className="border-bottom">
+    <Summary>
       <div className="container">
         <Image src={ roadmap.picture } />
         <SharePage title={ roadmap.description } url={ roadmap.url } />

components/row-block/index.js

@@ -0,0 +1,28 @@
+import { Badge, BlockItem, ItemSubtitle, ItemTitle, ItemWrap } from './style';
+
+const RowBlock = ({
+  title,
+  subtitle,
+  url,
+  badge,
+  openExternal = false,
+  disabled = false,
+  children = null
+}) => (
+  <ItemWrap className="col-md-6 col-lg-4 col-xl-4">
+    <BlockItem href={ url } disabled={ disabled } target={openExternal ? '_blank' : '_self'}>
+      { !children && (
+        <>
+          <ItemTitle>
+            { title }
+            { badge && <Badge>{ badge }</Badge>}
+          </ItemTitle>
+          <ItemSubtitle>{ subtitle }</ItemSubtitle>
+        </>
+      ) }
+      { children }
+    </BlockItem>
+  </ItemWrap>
+);
+
+export default RowBlock;

components/row-block/style.js

@@ -0,0 +1,62 @@
+import styled from 'styled-components';
+
+export const ItemWrap = styled.div`
+  padding: 0 10px 20px;
+`;
+
+export const BlockItem = styled.a`
+  height: 114px;
+  box-shadow: rgba(0, 0, 0, 0.12) 0 5px 10px;
+  transition: box-shadow 0.2s ease 0s;
+  align-items: stretch;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 1px;
+  max-width: 100%;
+  background: white;
+  padding: 20px;
+  border-radius: 10px;
+  justify-content: center;
+  text-decoration:none;
+  opacity: ${ props => props.disabled ? 0.5 : 1 };
+
+  &:hover {
+    text-decoration:none;
+    box-shadow: rgba(0, 0, 0, 0.12) 0 30px 60px;
+    z-index: 1;
+  }
+`;
+
+export const ItemTitle = styled.h3`
+  font-weight: 600;
+  font-size: 18px;
+  line-height: 24px;
+  color: #101010;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+`;
+
+export const Badge = styled.span`
+  font-size: 10px;
+  font-weight: 600;
+  background: #696969;
+  color: white;
+  padding: 0 8px;
+  border-radius: 4px;
+  text-transform: uppercase;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 10px;
+  height: 18px;
+`;
+
+export const ItemSubtitle = styled.p`
+  font-size: 14px;
+  color: rgb(102, 102, 102);
+  white-space: normal;
+  line-height: 1.5;
+  margin: 0;
+`;

contributing/guide.md

@@ -0,0 +1,2 @@
+## Submitting a Guide
+

data/roadmaps.json

@@ -39,14 +39,15 @@
     ]
   },
   {
-    "title": "React Developer Roadmap",
-    "description": "Step by step guide for DevOps or any other Operations Role",
-    "featuredDescription": "Step by step guide to become an SRE or for any operations role in 2019",
+    "title": "Full Stack Developer",
+    "description": "Step by step guide to becoming a modern full stack developer in 2019",
     "url": "/signup",
-    "versions": [
-      "latest",
-      "2018",
-      "2017"
-    ]
+    "upcoming": true
+  },
+  {
+    "title": "QA Engineer",
+    "description": "Steps to follow in order to become a modern QA Engineer in 2019",
+    "url": "/signup",
+    "upcoming": true
   }
 ]

data/site.json

@@ -5,10 +5,14 @@
   "description": "Roadmaps, articles and resources to help you choose your path, learn and improve.",
   "twitter": "kamranahmedse",
   "facebook": "kamranahmedse",
-  "url": "https://roadmap.sh",
   "logo": "/static/brand.png",
-  "repoUrl": "https://github.com/kamranahmedse/roadmap-next",
-  "dataUrl": "/tree/master/data",
+  "url": {
+    "web": "https://roadmap.sh",
+    "repo": "https://github.com/kamranahmedse/roadmap-next",
+    "repoData": "https://github.com/kamranahmedse/roadmap-next/tree/master/data",
+    "addGuide": "https://github.com/kamranahmedse/roadmap-next/tree/master/contributing/guide.md",
+    "addRoadmap": "https://github.com/kamranahmedse/roadmap-next/tree/master/contributing/roadmap.md"
+  },
   "keywords": [
     "roadmap",
     "developer roadmaps",

lib/guide.js

@@ -21,5 +21,5 @@ export const getRequestedGuide = req => {
 };
 
 export const getContributionUrl = (guide) => {
-  return `${siteConfig.repoUrl}${siteConfig.dataUrl}${guide.url}.md`
+  return `${siteConfig.url.repoData}${guide.url}.md`
 };

pages/roadmaps.js

@@ -1,11 +1,43 @@
+import { faPlus } from '@fortawesome/free-solid-svg-icons';
+
 import DefaultLayout from 'layouts/default/index';
 import SiteNav from 'components/site-nav';
+import PageFooter from 'components/page-footer';
+import PageHeader from 'components/page-header';
+import roadmaps from "data/roadmaps";
+import RowBlock from 'components/row-block';
+import IconRowBlock from 'components/icon-row-block';
+import siteConfig from "data/site";
 
 const RoadmapsList = () => (
   <DefaultLayout>
     <SiteNav />
     <div className="container">
+      <PageHeader />
+    </div>
+    <div className="pt-5 pb-5 bg-light border-top">
+      <div className="container">
+        <div className="row">
+          { roadmaps.map(roadmap => (
+            <RowBlock
+              title={ roadmap.title.replace(/roadmap|developer/i, '') }
+              subtitle={ roadmap.featuredDescription || roadmap.description }
+              url={ roadmap.url }
+              disabled={ roadmap.upcoming }
+              badge={ roadmap.upcoming ? 'upcoming' : '' }
+            />
+          )) }
+
+          <IconRowBlock
+            url={ siteConfig.url.addRoadmap }
+            icon={ faPlus }
+            openExternal={true}
+            text="Submit a Roadmap"
+          />
+        </div>
+      </div>
     </div>
+    <PageFooter />
   </DefaultLayout>
 );