Add detailed version for frontend roadmap

components/detailed-roadmap/index.js

@@ -32,19 +32,25 @@ const DetailedRoadmap = ({ roadmap }) => {
     author = {}
   } = roadmap;
 
-  const roadmapPages = Object.keys(sidebar || {}).map(groupTitle => {
+  const roadmapPages = Object.keys(sidebar || {}).map((groupTitle, groupCounter) => {
     if (groupTitle.startsWith('_')) {
       return;
     }
 
+    // @todo remove it after completing the frontend roadmap
+    const isInProgress = groupCounter !== 0;
+
     return (
-      <div className='links-group' key={groupTitle}>
+      <div className={`links-group ${isInProgress ? 'in-progress' : ''}`} key={groupTitle}>
-        <h3>{ groupTitle }</h3>
+        <h3>
+          { groupTitle }
+          { isInProgress && <span className='badge badge-warning progress-badge'>In Progress</span> }
+        </h3>
         <ul>
           { sidebar[groupTitle].map(page => {
             const isActivePage = page.url === currentPage.url;
             // e.g. /frontend should mark `/frontend/landscape` as active
-            const isSummaryPage = page.url === `${currentPage.url}/landscape`;
+            const isSummaryPage = page.url === `${currentPage.url}/summary`;
 
             return (
               <li className={classNames({ active: isActivePage || isSummaryPage })} key={page.url}>
@@ -71,7 +77,8 @@ const DetailedRoadmap = ({ roadmap }) => {
             <h3>{ roadmap.title }</h3>
             <p>
               Roadmap contributed by <a href={ author.url } target="_blank">{ author.name }</a>
-              { roadmap.contributorsCount > 1 && ` and <a href="${roadmap.contributorsUrl}">${roadmap.contributorsCount} others</a>`}</p>
+              { roadmap.contributorsCount > 1 && ` and <a href="${roadmap.contributorsUrl}">${roadmap.contributorsCount} others</a>`}
+            </p>
           </RoadmapMeta>
           <ShareRoadmap className="mt-2 mt-md-0">
             <ShareIcon href={ siteConfig.url.repo } target="_blank">

components/detailed-roadmap/style.js

@@ -113,6 +113,16 @@ export const Sidebar = styled.div`
     }
   }
   
+  .progress-badge {
+    position: relative;
+    top: -2px;
+    margin-left: 5px;
+  }
+  
+  .links-group.in-progress {
+    opacity: 0.3;  
+  }
+
   .links-group li {
     list-style: none;
     margin: 7px 0;
@@ -180,4 +190,10 @@ export const MobileSidebar = styled(Sidebar)`
   .links-group {
     width: auto;  
   }
+  
+  .progress-badge {
+    position: relative;
+    top: -2px;
+    margin-left: 5px;
+  }
 `;

content/roadmaps.json

@@ -35,7 +35,7 @@
       "url": "https://twitter.com/kamranahmedse"
     },
     "featured": true,
-    "path": "/roadmaps/1-frontend/0-About/0-Landscape.md",
+    "path": "/roadmaps/1-frontend/0-About/0-Summary.md",
     "detailed": true,
     "versions": [
       "latest",
@@ -47,20 +47,20 @@
     "url": "/frontend",
     "sidebar": {
       "About": [
-        {
-          "url": "/frontend/landscape",
-          "title": "Landscape",
-          "path": "/roadmaps/1-frontend/0-About/0-Landscape.md"
-        },
         {
           "url": "/frontend/summary",
           "title": "Summary",
-          "path": "/roadmaps/1-frontend/0-About/1-Summary.md"
+          "path": "/roadmaps/1-frontend/0-About/0-Summary.md"
         },
         {
           "url": "/frontend/basic-skills",
           "title": "Basic Skills",
-          "path": "/roadmaps/1-frontend/0-About/2-Basic-Skills.md"
+          "path": "/roadmaps/1-frontend/0-About/1-Basic-Skills.md"
+        },
+        {
+          "url": "/frontend/landscape",
+          "title": "Landscape",
+          "path": "/roadmaps/1-frontend/0-About/2-Landscape.md"
         },
         {
           "url": "/frontend/job-titles",
@@ -72,42 +72,42 @@
         {
           "url": "/frontend/job-ready",
           "title": "Job Ready",
-          "path": "/roadmaps/1-frontend/2-Learn/1-Job-Ready.md"
+          "path": "/roadmaps/1-frontend/1-Learn/1-Job-Ready.md"
         },
         {
           "url": "/frontend/write-better-css",
           "title": "Write Better CSS",
-          "path": "/roadmaps/1-frontend/2-Learn/2-Write-Better-CSS.md"
+          "path": "/roadmaps/1-frontend/1-Learn/2-Write-Better-CSS.md"
         },
         {
           "url": "/frontend/build-tools",
           "title": "Build Tools",
-          "path": "/roadmaps/1-frontend/2-Learn/3-Build-Tools.md"
+          "path": "/roadmaps/1-frontend/1-Learn/3-Build-Tools.md"
         },
         {
           "url": "/frontend/modern-applications",
           "title": "Modern Applications",
-          "path": "/roadmaps/1-frontend/2-Learn/4-Modern-Applications.md"
+          "path": "/roadmaps/1-frontend/1-Learn/4-Modern-Applications.md"
         },
         {
           "url": "/frontend/automated-testing",
           "title": "Automated Testing",
-          "path": "/roadmaps/1-frontend/2-Learn/5-Automated-Testing.md"
+          "path": "/roadmaps/1-frontend/1-Learn/5-Automated-Testing.md"
         },
         {
           "url": "/frontend/static-type-checkers",
           "title": "Static Type Checkers",
-          "path": "/roadmaps/1-frontend/2-Learn/6-Static-Type-Checkers.md"
+          "path": "/roadmaps/1-frontend/1-Learn/6-Static-Type-Checkers.md"
         },
         {
           "url": "/frontend/server-side-rendering",
           "title": "Server Side Rendering",
-          "path": "/roadmaps/1-frontend/2-Learn/7-Server-Side-Rendering.md"
+          "path": "/roadmaps/1-frontend/1-Learn/7-Server-Side-Rendering.md"
         },
         {
           "url": "/frontend/go-beyond",
           "title": "Go Beyond",
-          "path": "/roadmaps/1-frontend/2-Learn/8-Go-Beyond.md"
+          "path": "/roadmaps/1-frontend/1-Learn/8-Go-Beyond.md"
         }
       ]
     }

content/roadmaps/1-frontend/0-About/1-Basic-Skills.md

@@ -10,12 +10,11 @@ Before we jump on to the technical skills there are few non-technical or soft sk
 
 ## Technical Skills
 In order to be a frontend developer, all you need is to learn HTML, CSS and JavaScript. Just learn these and you should be employable. I know a lot of developers who just know these and are working as frontend developers and are making decent money
+
 * HTML
 * CSS
 * JavaScript 
 
-Frontend development is broad and there are further skills that are in play but those can be gained over time. All you need is to learn the above three and start making projects ...lots of them. This is how you will hone your skillset and continue to grow. Having said that, the skills and the relevant expertise in those skills varies from the job level, follow the links below to get an idea of the skills required for each of the role levels.
+Frontend development is broad and there are further skills that are in play but those can be gained over time. All you need is to learn the above three and start making projects ..lots of them. This is how you will hone your skillset and continue to grow. 
 
-* [Entry Level Developer](/frontend/junior-developer)
+Having said that, the skills and the relevant expertise in those skills varies from the job level, have a look at the landscape to get an idea about everything that is there in Frontend Development.
-* [Mid Level Developer](/frontend/mid-level-developer)
-* [Senior Developer](/frontend/senior-developer)

content/roadmaps/1-frontend/1-Learn/1-Job-Ready.md

@@ -13,6 +13,3 @@ Learn the below listed in the order given below
 * What is DNS? How a website is found on the internet?
 * What's in a domain name? What is an IP Address?
 * What is Web Hosting?
-
-## Writing Some Code
-Now that you understand how things work, next step is getting your hands dirty and start actual coding

content/roadmaps/1-frontend/meta.json

@@ -34,7 +34,7 @@
     "url": "https://twitter.com/kamranahmedse"
   },
   "featured": true,
-  "path": "./0-About/0-Landscape.md",
+  "path": "./0-About/0-Summary.md",
   "detailed": true,
   "versions": [
     "latest",

public/sitemap.xml

@@ -3,23 +3,23 @@
 <url>
               <loc>https://roadmap.sh/frontend</loc>
               <changefreq>monthly</changefreq>
-              <lastmod>2020-01-20T07:22:49.852Z</lastmod>
+              <lastmod>2020-01-29T06:08:22.238Z</lastmod>
               <priority>1.0</priority>
           </url>
 <url>
-              <loc>https://roadmap.sh/frontend/landscape</loc>
+              <loc>https://roadmap.sh/frontend/summary</loc>
               <changefreq>monthly</changefreq>
-              <lastmod>2020-01-20T07:22:49.852Z</lastmod>
+              <lastmod>2020-01-29T06:08:22.238Z</lastmod>
               <priority>1.0</priority>
           </url>
 <url>
-              <loc>https://roadmap.sh/frontend/summary</loc>
+              <loc>https://roadmap.sh/frontend/basic-skills</loc>
               <changefreq>monthly</changefreq>
-              <lastmod>2020-01-20T07:22:49.852Z</lastmod>
+              <lastmod>2020-01-29T07:33:57.619Z</lastmod>
               <priority>1.0</priority>
           </url>
 <url>
-              <loc>https://roadmap.sh/frontend/basic-skills</loc>
+              <loc>https://roadmap.sh/frontend/landscape</loc>
               <changefreq>monthly</changefreq>
               <lastmod>2020-01-20T07:22:49.852Z</lastmod>
               <priority>1.0</priority>
@@ -27,55 +27,55 @@
 <url>
               <loc>https://roadmap.sh/frontend/job-titles</loc>
               <changefreq>monthly</changefreq>
-              <lastmod>2020-01-20T07:22:49.852Z</lastmod>
+              <lastmod>2020-01-29T07:30:19.876Z</lastmod>
               <priority>1.0</priority>
           </url>
 <url>
               <loc>https://roadmap.sh/frontend/job-ready</loc>
               <changefreq>monthly</changefreq>
-              <lastmod>2020-01-28T12:31:18.160Z</lastmod>
+              <lastmod>2020-01-29T07:27:26.467Z</lastmod>
               <priority>1.0</priority>
           </url>
 <url>
               <loc>https://roadmap.sh/frontend/write-better-css</loc>
               <changefreq>monthly</changefreq>
-              <lastmod>2020-01-20T07:22:49.853Z</lastmod>
+              <lastmod>2020-01-29T07:27:26.467Z</lastmod>
               <priority>1.0</priority>
           </url>
 <url>
               <loc>https://roadmap.sh/frontend/build-tools</loc>
               <changefreq>monthly</changefreq>
-              <lastmod>2020-01-20T07:22:49.853Z</lastmod>
+              <lastmod>2020-01-29T07:27:26.467Z</lastmod>
               <priority>1.0</priority>
           </url>
 <url>
               <loc>https://roadmap.sh/frontend/modern-applications</loc>
               <changefreq>monthly</changefreq>
-              <lastmod>2020-01-20T07:22:49.853Z</lastmod>
+              <lastmod>2020-01-29T07:27:26.467Z</lastmod>
               <priority>1.0</priority>
           </url>
 <url>
               <loc>https://roadmap.sh/frontend/automated-testing</loc>
               <changefreq>monthly</changefreq>
-              <lastmod>2020-01-20T07:22:49.853Z</lastmod>
+              <lastmod>2020-01-29T07:27:26.467Z</lastmod>
               <priority>1.0</priority>
           </url>
 <url>
               <loc>https://roadmap.sh/frontend/static-type-checkers</loc>
               <changefreq>monthly</changefreq>
-              <lastmod>2020-01-20T07:22:49.853Z</lastmod>
+              <lastmod>2020-01-29T07:27:26.467Z</lastmod>
               <priority>1.0</priority>
           </url>
 <url>
               <loc>https://roadmap.sh/frontend/server-side-rendering</loc>
               <changefreq>monthly</changefreq>
-              <lastmod>2020-01-20T07:22:49.853Z</lastmod>
+              <lastmod>2020-01-29T07:27:26.467Z</lastmod>
               <priority>1.0</priority>
           </url>
 <url>
               <loc>https://roadmap.sh/frontend/go-beyond</loc>
               <changefreq>monthly</changefreq>
-              <lastmod>2020-01-20T07:22:49.854Z</lastmod>
+              <lastmod>2020-01-29T07:27:26.467Z</lastmod>
               <priority>1.0</priority>
           </url>
 <url>
@@ -231,7 +231,7 @@
 <url>
               <loc>https://roadmap.sh/roadmaps</loc>
               <changefreq>monthly</changefreq>
-              <lastmod>2020-01-28T12:48:07.715Z</lastmod>
+              <lastmod>2020-01-29T07:15:48.617Z</lastmod>
               <priority>1.0</priority>
           </url>
 <url>