Add roadmap page

components/featured-content/index.js

@@ -7,7 +7,6 @@ const FeaturedContent = (props) => (
   <FeaturedWrap className="border-top border-bottom bg-light">
     <FeaturedRoadmaps />
     <FeaturedGuides />
-    { /*<FeaturedJourneys />*/ }
   </FeaturedWrap>
 );
 

components/page-header/index.js

@@ -11,7 +11,6 @@ const PageHeader = () => (
       <div className="nav-links">
         <a href="#">Roadmaps</a>
         <a href="#">Guides</a>
-        <a href="#">Journeys</a>
         <a href="#">FAQs</a>
         <a href="#" className='signup'>Sign Up</a>
       </div>

data/roadmaps.json

@@ -0,0 +1,17 @@
+[
+  {
+    "title": "Frontend Developer",
+    "description": "Roadmap to becoming a frontend developer",
+    "slug": "frontend"
+  },
+  {
+    "title": "Backend Developer",
+    "description": "Roadmap to becoming a backend developer",
+    "slug": "backend"
+  },
+  {
+    "title": "DevOps",
+    "description": "Roadmap for DevOps or any other Operations Role",
+    "slug": "devops"
+  }
+]

pages/[fallback].js

@@ -1,16 +1,19 @@
-import { useRouter } from 'next/router'
+import { useRouter } from 'next/router';
+import Roadmap from './roadmaps/[roadmap]';
+import roadmapsList from "../data/roadmaps.json";
 
-// Fallback page to handle the routing for the old roadmap pages
-const Fallback = () => {
+// Fallback page to handle the old roadmap pages implementation
+const OldRoadmap = () => {
   const router = useRouter();
   const { fallback } = router.query;
 
-  return (
-    <div>
-      <h1>{ fallback }</h1>
-      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi dolorum ea earum exercitationem fuga magnam nihil nostrum numquam optio provident quaerat repellendus, repudiandae vitae voluptas, voluptatibus. Consequuntur doloremque maxime perferendis!</p>
-    </div>
-  );
+  // Render the roadmap if it exists, otherwise 404
+  const roadmapExists = !!roadmapsList.find(roadmap => roadmap.slug === fallback);
+  if (roadmapExists) {
+    return <Roadmap roadmap={ fallback } />
+  }
+
+  return <h1>404</h1>;
 };
 
-export default Fallback;
+export default OldRoadmap;

pages/roadmaps/[roadmap].js

@@ -0,0 +1,19 @@
+import { useRouter } from 'next/router';
+import DefaultLayout from '../../layouts/default/index';
+import PageHeader from '../../components/page-header/index';
+
+const Roadmap = (props) => {
+  const router = useRouter();
+  const {
+    roadmap = props.roadmap,
+  } = router.query;
+
+  return (
+    <DefaultLayout>
+      <PageHeader />
+      <p>Show roadmap for { roadmap } here</p>
+    </DefaultLayout>
+  );
+};
+
+export default Roadmap;

pages/roadmaps/index.js

@@ -0,0 +1,11 @@
+import DefaultLayout from '../../layouts/default/index';
+import PageHeader from '../../components/page-header/index';
+
+const Roadmap = () => (
+  <DefaultLayout>
+    <PageHeader />
+    <p>Show all roadmaps here</p>
+  </DefaultLayout>
+);
+
+export default Roadmap;