Roadmap author and contributors page

components/detailed-roadmap/index.js

@@ -13,7 +13,8 @@ const DetailedRoadmap = ({ roadmap }) => {
   const [menuActive, setMenuState] = useState(false);
   const {
     sidebar = {},
-    page: currentPage = {}
+    page: currentPage = {},
+    author = {}
   } = roadmap;
 
   const roadmapPages = Object.keys(sidebar || {}).map(groupTitle => {
@@ -42,7 +43,9 @@ const DetailedRoadmap = ({ roadmap }) => {
         <div className="container d-flex align-items-center flex-column flex-md-row">
           <RoadmapMeta>
             <h3>{ roadmap.title }</h3>
-            <p>Roadmap contributed by <a href="#">Kamran Ahmed</a> and <a href="#">5 others</a></p>
+            <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>
           </RoadmapMeta>
           <ShareRoadmap className="mt-2 mt-md-0">
             <ShareIcon href={ siteConfig.url.repo } target="_blank">

scripts/roadmaps-meta.js

@@ -1,5 +1,6 @@
 const fs = require('fs');
 const path = require('path');
+const exec = require('child_process').execSync;
 
 const STORAGE_PATH = path.join(__dirname, '../storage');
 const ROADMAPS_PATH = path.join(__dirname, '../storage/roadmaps');
@@ -13,6 +14,13 @@ const roadmapsMeta = roadmapDirs.reduce((metaAcc, roadmapDirName) => {
   const roadmapDir = path.join(ROADMAPS_PATH, roadmapDirName);
   const roadmapMeta = require(path.join(roadmapDir, 'meta.json'));
 
+  const contributors = exec(`git log --pretty=format:"%an%x09" ${roadmapDir} | uniq`)
+    .toString()
+    .split('\n')
+    .map(contributor => contributor.replace(/[\s\t]/g, ' ').trim()) || [];
+  const contributorNames = contributors.filter(contributor => !!contributor);
+
+
   console.log(`----------------------------`);
   console.log(`[#] Roadmap: ${roadmapMeta.title}`);
   console.log(`[x] Generating sidebar`);
@@ -61,6 +69,8 @@ const roadmapsMeta = roadmapDirs.reduce((metaAcc, roadmapDirName) => {
     ...metaAcc,
     {
       ...roadmapMeta,
+      contributorsCount: contributorNames.length,
+      contributorsUrl: `/${roadmapSlug}/contributors`,
       url: `/${roadmapSlug}`,
       path: path.join(roadmapDir.replace(STORAGE_PATH, ''), '/summary.md'),
       sidebar,

storage/roadmaps.json

@@ -1,8 +1,12 @@
 [
   {
     "title": "Frontend Developer",
-    "description": "Roadmap to becoming a modern frontend developer",
+    "description": "Step by step guide to becoming a modern frontend developer",
     "featuredDescription": "Step by step guide to becoming a modern frontend developer in 2019",
+    "author": {
+      "name": "Kamran Ahmed",
+      "url": "https://twitter.com/kamranahmedse"
+    },
     "featured": true,
     "detailed": true,
     "versions": [
@@ -10,9 +14,18 @@
       "2018",
       "2017"
     ],
+    "contributorsCount": 1,
+    "contributorsUrl": "/frontend/contributors",
     "url": "/frontend",
     "path": "/roadmaps/1-frontend/summary.md",
     "sidebar": {
+      "_others": [
+        {
+          "url": "/frontend/contributors",
+          "title": "contributors",
+          "path": "/roadmaps/1-frontend/_others/contributors.md"
+        }
+      ],
       "landscape": [
         {
           "url": "/frontend/junior",
@@ -79,6 +92,12 @@
     "description": "Step by step guide to becoming a modern backend developer",
     "featuredDescription": "Step by step guide to becoming a modern backend developer in 2019",
     "featured": true,
+    "author": {
+      "name": "Kamran Ahmed",
+      "url": "https://twitter.com/kamranahmedse"
+    },
+    "contributorsCount": 1,
+    "contributorsUrl": "/backend/contributors",
     "url": "/backend",
     "path": "/roadmaps/2-backend/summary.md",
     "sidebar": {
@@ -111,6 +130,12 @@
       "2018",
       "2017"
     ],
+    "author": {
+      "name": "Kamran Ahmed",
+      "url": "https://twitter.com/kamranahmedse"
+    },
+    "contributorsCount": 1,
+    "contributorsUrl": "/devops/contributors",
     "url": "/devops",
     "path": "/roadmaps/3-devops/summary.md",
     "sidebar": {
@@ -138,6 +163,12 @@
     "description": "Step by step guide to becoming a modern fullstack developer in 2019",
     "featuredDescription": "Step by step guide to becoming a modern fullstack developer in 2019",
     "upcoming": true,
+    "author": {
+      "name": "Kamran Ahmed",
+      "url": "https://twitter.com/kamranahmedse"
+    },
+    "contributorsCount": 1,
+    "contributorsUrl": "/fullstack/contributors",
     "url": "/fullstack",
     "path": "/roadmaps/4-fullstack/summary.md",
     "sidebar": {}
@@ -147,6 +178,12 @@
     "description": "Steps to follow in order to become a modern QA Engineer in 2019",
     "featuredDescription": "Step by step guide to becoming a modern QA Engineer in 2019",
     "upcoming": true,
+    "author": {
+      "name": "Anas Fitiani",
+      "url": "https://github.com/anas-qa"
+    },
+    "contributorsCount": 1,
+    "contributorsUrl": "/qa/contributors",
     "url": "/qa",
     "path": "/roadmaps/5-qa/summary.md",
     "sidebar": {}

storage/roadmaps/1-frontend/meta.json

@@ -2,6 +2,10 @@
   "title": "Frontend Developer",
   "description": "Step by step guide to becoming a modern frontend developer",
   "featuredDescription": "Step by step guide to becoming a modern frontend developer in 2019",
+  "author": {
+    "name": "Kamran Ahmed",
+    "url": "https://twitter.com/kamranahmedse"
+  },
   "featured": true,
   "detailed": true,
   "versions": [

storage/roadmaps/2-backend/meta.json

@@ -2,5 +2,9 @@
   "title": "Backend Developer",
   "description": "Step by step guide to becoming a modern backend developer",
   "featuredDescription": "Step by step guide to becoming a modern backend developer in 2019",
-  "featured": true
+  "featured": true,
+  "author": {
+    "name": "Kamran Ahmed",
+    "url": "https://twitter.com/kamranahmedse"
+  }
 }

storage/roadmaps/3-devops/meta.json

@@ -7,5 +7,9 @@
     "latest",
     "2018",
     "2017"
-  ]
+  ],
+  "author": {
+    "name": "Kamran Ahmed",
+    "url": "https://twitter.com/kamranahmedse"
+  }
 }

storage/roadmaps/4-fullstack/meta.json

@@ -2,5 +2,9 @@
   "title": "Full Stack Developer",
   "description": "Step by step guide to becoming a modern fullstack developer in 2019",
   "featuredDescription": "Step by step guide to becoming a modern fullstack developer in 2019",
-  "upcoming": true
+  "upcoming": true,
+  "author": {
+    "name": "Kamran Ahmed",
+    "url": "https://twitter.com/kamranahmedse"
+  }
 }

storage/roadmaps/5-qa/meta.json

@@ -2,5 +2,9 @@
   "title": "QA Engineer",
   "description": "Steps to follow in order to become a modern QA Engineer in 2019",
   "featuredDescription": "Step by step guide to becoming a modern QA Engineer in 2019",
-  "upcoming": true
+  "upcoming": true,
+  "author": {
+    "name": "Anas Fitiani",
+    "url": "https://github.com/anas-qa"
+  }
 }