From 597d27d6f7fd30c0679c15a5d4a6423df9c010b9 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Wed, 29 Jan 2020 12:48:18 +0500
Subject: [PATCH] Add detailed version for frontend roadmap

---
 components/detailed-roadmap/index.js          | 17 +++++++---
 components/detailed-roadmap/style.js          | 16 ++++++++++
 content/roadmaps.json                         | 32 +++++++++----------
 .../0-About/{1-Summary.md => 0-Summary.md}    |  0
 .../{2-Basic-Skills.md => 1-Basic-Skills.md}  |  7 ++--
 .../{0-Landscape.md => 2-Landscape.md}        |  0
 .../{2-Learn => 1-Learn}/1-Job-Ready.md       |  3 --
 .../2-Write-Better-CSS.md                     |  0
 .../{2-Learn => 1-Learn}/3-Build-Tools.md     |  0
 .../4-Modern-Applications.md                  |  0
 .../5-Automated-Testing.md                    |  0
 .../6-Static-Type-Checkers.md                 |  0
 .../7-Server-Side-Rendering.md                |  0
 .../{2-Learn => 1-Learn}/8-Go-Beyond.md       |  0
 content/roadmaps/1-frontend/meta.json         |  2 +-
 public/sitemap.xml                            | 32 +++++++++----------
 16 files changed, 64 insertions(+), 45 deletions(-)
 rename content/roadmaps/1-frontend/0-About/{1-Summary.md => 0-Summary.md} (100%)
 rename content/roadmaps/1-frontend/0-About/{2-Basic-Skills.md => 1-Basic-Skills.md} (75%)
 rename content/roadmaps/1-frontend/0-About/{0-Landscape.md => 2-Landscape.md} (100%)
 rename content/roadmaps/1-frontend/{2-Learn => 1-Learn}/1-Job-Ready.md (83%)
 rename content/roadmaps/1-frontend/{2-Learn => 1-Learn}/2-Write-Better-CSS.md (100%)
 rename content/roadmaps/1-frontend/{2-Learn => 1-Learn}/3-Build-Tools.md (100%)
 rename content/roadmaps/1-frontend/{2-Learn => 1-Learn}/4-Modern-Applications.md (100%)
 rename content/roadmaps/1-frontend/{2-Learn => 1-Learn}/5-Automated-Testing.md (100%)
 rename content/roadmaps/1-frontend/{2-Learn => 1-Learn}/6-Static-Type-Checkers.md (100%)
 rename content/roadmaps/1-frontend/{2-Learn => 1-Learn}/7-Server-Side-Rendering.md (100%)
 rename content/roadmaps/1-frontend/{2-Learn => 1-Learn}/8-Go-Beyond.md (100%)

diff --git a/components/detailed-roadmap/index.js b/components/detailed-roadmap/index.js
index f5f341c81..cd3dfc566 100644
--- a/components/detailed-roadmap/index.js
+++ b/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}>
-        <h3>{ groupTitle }</h3>
+      <div className={`links-group ${isInProgress ? 'in-progress' : ''}`} key={groupTitle}>
+        <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">
diff --git a/components/detailed-roadmap/style.js b/components/detailed-roadmap/style.js
index b68e6ffb5..2d1b66aef 100644
--- a/components/detailed-roadmap/style.js
+++ b/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;
+  }
 `;
diff --git a/content/roadmaps.json b/content/roadmaps.json
index 89503e9c4..2e3f0d5d5 100644
--- a/content/roadmaps.json
+++ b/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"
         }
       ]
     }
diff --git a/content/roadmaps/1-frontend/0-About/1-Summary.md b/content/roadmaps/1-frontend/0-About/0-Summary.md
similarity index 100%
rename from content/roadmaps/1-frontend/0-About/1-Summary.md
rename to content/roadmaps/1-frontend/0-About/0-Summary.md
diff --git a/content/roadmaps/1-frontend/0-About/2-Basic-Skills.md b/content/roadmaps/1-frontend/0-About/1-Basic-Skills.md
similarity index 75%
rename from content/roadmaps/1-frontend/0-About/2-Basic-Skills.md
rename to content/roadmaps/1-frontend/0-About/1-Basic-Skills.md
index 01e031918..6ca3feacc 100644
--- a/content/roadmaps/1-frontend/0-About/2-Basic-Skills.md
+++ b/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)
-* [Mid Level Developer](/frontend/mid-level-developer)
-* [Senior Developer](/frontend/senior-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.
diff --git a/content/roadmaps/1-frontend/0-About/0-Landscape.md b/content/roadmaps/1-frontend/0-About/2-Landscape.md
similarity index 100%
rename from content/roadmaps/1-frontend/0-About/0-Landscape.md
rename to content/roadmaps/1-frontend/0-About/2-Landscape.md
diff --git a/content/roadmaps/1-frontend/2-Learn/1-Job-Ready.md b/content/roadmaps/1-frontend/1-Learn/1-Job-Ready.md
similarity index 83%
rename from content/roadmaps/1-frontend/2-Learn/1-Job-Ready.md
rename to content/roadmaps/1-frontend/1-Learn/1-Job-Ready.md
index 885594503..de0f77e1f 100644
--- a/content/roadmaps/1-frontend/2-Learn/1-Job-Ready.md
+++ b/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
diff --git a/content/roadmaps/1-frontend/2-Learn/2-Write-Better-CSS.md b/content/roadmaps/1-frontend/1-Learn/2-Write-Better-CSS.md
similarity index 100%
rename from content/roadmaps/1-frontend/2-Learn/2-Write-Better-CSS.md
rename to content/roadmaps/1-frontend/1-Learn/2-Write-Better-CSS.md
diff --git a/content/roadmaps/1-frontend/2-Learn/3-Build-Tools.md b/content/roadmaps/1-frontend/1-Learn/3-Build-Tools.md
similarity index 100%
rename from content/roadmaps/1-frontend/2-Learn/3-Build-Tools.md
rename to content/roadmaps/1-frontend/1-Learn/3-Build-Tools.md
diff --git a/content/roadmaps/1-frontend/2-Learn/4-Modern-Applications.md b/content/roadmaps/1-frontend/1-Learn/4-Modern-Applications.md
similarity index 100%
rename from content/roadmaps/1-frontend/2-Learn/4-Modern-Applications.md
rename to content/roadmaps/1-frontend/1-Learn/4-Modern-Applications.md
diff --git a/content/roadmaps/1-frontend/2-Learn/5-Automated-Testing.md b/content/roadmaps/1-frontend/1-Learn/5-Automated-Testing.md
similarity index 100%
rename from content/roadmaps/1-frontend/2-Learn/5-Automated-Testing.md
rename to content/roadmaps/1-frontend/1-Learn/5-Automated-Testing.md
diff --git a/content/roadmaps/1-frontend/2-Learn/6-Static-Type-Checkers.md b/content/roadmaps/1-frontend/1-Learn/6-Static-Type-Checkers.md
similarity index 100%
rename from content/roadmaps/1-frontend/2-Learn/6-Static-Type-Checkers.md
rename to content/roadmaps/1-frontend/1-Learn/6-Static-Type-Checkers.md
diff --git a/content/roadmaps/1-frontend/2-Learn/7-Server-Side-Rendering.md b/content/roadmaps/1-frontend/1-Learn/7-Server-Side-Rendering.md
similarity index 100%
rename from content/roadmaps/1-frontend/2-Learn/7-Server-Side-Rendering.md
rename to content/roadmaps/1-frontend/1-Learn/7-Server-Side-Rendering.md
diff --git a/content/roadmaps/1-frontend/2-Learn/8-Go-Beyond.md b/content/roadmaps/1-frontend/1-Learn/8-Go-Beyond.md
similarity index 100%
rename from content/roadmaps/1-frontend/2-Learn/8-Go-Beyond.md
rename to content/roadmaps/1-frontend/1-Learn/8-Go-Beyond.md
diff --git a/content/roadmaps/1-frontend/meta.json b/content/roadmaps/1-frontend/meta.json
index 3c662dc96..665938838 100644
--- a/content/roadmaps/1-frontend/meta.json
+++ b/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",
diff --git a/public/sitemap.xml b/public/sitemap.xml
index 0e7088abc..e2224eb27 100644
--- a/public/sitemap.xml
+++ b/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>