Featured pages

components/featured-content/journeys.js

@@ -30,7 +30,7 @@ const FeaturedJourneys = () => (
         </div>
         <div className="col-xl-3 col-lg-3 col-md-4 col-sm-12 col-12 grid-item-container journey-block">
           <a href="#">
-            <img src="/static/dan-abramove.jpeg" alt="" />
+            <img src="/static/dan-abramov.jpeg" alt="" />
             <div className="journey-meta">
               <h4>Dan Abramov</h4>
               <p>Co-founder and CTO at Blink</p>

data/roadmaps.json

@@ -2,16 +2,19 @@
   {
     "title": "Frontend Developer",
     "description": "Roadmap to becoming a frontend developer",
-    "slug": "frontend"
+    "slug": "frontend",
+    "picture": "/static/roadmaps/frontend.png"
   },
   {
     "title": "Backend Developer",
     "description": "Roadmap to becoming a backend developer",
-    "slug": "backend"
+    "slug": "backend",
+    "picture": "/static/roadmaps/backend.png"
   },
   {
     "title": "DevOps",
     "description": "Roadmap for DevOps or any other Operations Role",
-    "slug": "devops"
+    "slug": "devops",
+    "picture": "/static/roadmaps/devops.png"
   }
 ]

next.config.js

@@ -8,6 +8,12 @@ module.exports = withCSS(withSass({
       '/about': { page: '/about' },
       '/privacy': { page: '/privacy' },
       '/terms': { page: '/terms' },
+      '/frontend': { page: '/frontend' },
+      '/backend': { page: '/backend' },
+      '/devops': { page: '/devops' },
+      '/roadmaps/frontend': { page: '/roadmaps/frontend' },
+      '/roadmaps/backend': { page: '/roadmaps/backend' },
+      '/roadmaps/devops': { page: '/roadmaps/devops' },
     };
   },
 

pages/roadmaps/[roadmap].js

@@ -1,17 +1,25 @@
 import { useRouter } from 'next/router';
 import DefaultLayout from '../../layouts/default/index';
 import PageHeader from '../../components/page-header/index';
+// import roadmaps from "../../data/roadmaps";
 
 const Roadmap = (props) => {
   const router = useRouter();
   const {
-    roadmap = props.roadmap,
+    roadmap: slug,
   } = router.query;
 
+  console.log(router);
+
+  // @todo handle 404
+  // const roadmap = roadmaps.find(roadmap => roadmap.slug === slug);
+
   return (
     <DefaultLayout>
       <PageHeader />
-      <p>Show roadmap for { roadmap } here</p>
+      <div className="container">
+        {/*<img src={ roadmap.picture } alt="" />*/}
+      </div>
     </DefaultLayout>
   );
 };