Add roadmaps meta generator

5 years ago · 998ddbe7ec
parent 9b5f23f6f7
commit 998ddbe7ec
39 changed files with 469 additions and 129 deletions
--- a/components/roadmap-summary/index.js
+++ b/components/roadmap-summary/index.js
@ -1,93 +1,71 @@
-import Link from 'next/link';
-import classNames from 'classnames';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faEnvelope, faClock, faHandshake, faArrowLeft } from '@fortawesome/free-solid-svg-icons';
-import {
-  SummaryContainer,
-  Title,
-  Description,
-  Image,
-  Header,
-  Summary,
-  VersionLink,
-  VersionList,
-} from './style';
+import { faArrowLeft, faClock, faEnvelope, faHandshake } from '@fortawesome/free-solid-svg-icons';
+import { Description, Header, Summary, SummaryContainer, Title, VersionList } from './style';
 import SharePage from 'components/share-page';
-import { BadgeLink, BadgesList, PrimaryBadge, SecondaryBadge, DarkBadge } from 'components/badges';
+import { BadgeLink, BadgesList, DarkBadge, PrimaryBadge, SecondaryBadge } from 'components/badges';
 import GuideBody from 'components/guide-body';
 import siteConfig from "storage/site";

-const isActiveRoadmap = (loadedVersion, roadmapVersion) => (
-  (loadedVersion === roadmapVersion) ||
-  (loadedVersion === 'latest' && parseInt(roadmapVersion, 10) === (new Date()).getFullYear())
-);
-
 const UpcomingGuide = require(`../../storage/guides/upcoming.md`).default;

-const RoadmapSummary = ({ roadmap }) => (
-  <SummaryContainer>
-    <Header>
-      <Title>{ roadmap.title }</Title>
-      <Description>{ roadmap.description }</Description>
+const RoadmapSummary = ({ roadmap }) => {
+  return (
+    <SummaryContainer>
+      <Header>
+        <Title>{ roadmap.title }</Title>
+        <Description>{ roadmap.description }</Description>

-      <BadgesList className="mt-4">
-        <BadgeLink href="/roadmaps">
-          <DarkBadge>
-            <FontAwesomeIcon icon={faArrowLeft}/>
-            Other Roadmaps
-          </DarkBadge>
-        </BadgeLink>
-        { roadmap.upcoming && (
-          <SecondaryBadge>
-            <FontAwesomeIcon icon={faClock}/>
-            Upcoming Roadmap
-          </SecondaryBadge>
-        ) }
-        { !roadmap.upcoming && (
-          <BadgeLink href={`${siteConfig.url.issue}?title=[${roadmap.title}] - Title Here`} target="_blank">
+        <BadgesList className="mt-4">
+          <BadgeLink href="/roadmaps">
+            <DarkBadge>
+              <FontAwesomeIcon icon={ faArrowLeft } />
+              Other Roadmaps
+            </DarkBadge>
+          </BadgeLink>
+          { roadmap.upcoming && (
            <SecondaryBadge>
-              <FontAwesomeIcon icon={faHandshake}/>
-              Suggest Changes
+              <FontAwesomeIcon icon={ faClock } />
+              Upcoming Roadmap
            </SecondaryBadge>
-          </BadgeLink>
-        ) }
+          ) }
+          { !roadmap.upcoming && (
+            <BadgeLink href={ `${siteConfig.url.issue}?title=[${roadmap.title}] - Title Here` } target="_blank">
+              <SecondaryBadge>
+                <FontAwesomeIcon icon={ faHandshake } />
+                Suggest Changes
+              </SecondaryBadge>
+            </BadgeLink>
+          ) }

-        <BadgeLink href="/signup">
-          <PrimaryBadge>
-            <FontAwesomeIcon icon={faEnvelope}/>
-            Send me Updates
-          </PrimaryBadge>
-        </BadgeLink>
-      </BadgesList>
+          <BadgeLink href="/signup">
+            <PrimaryBadge>
+              <FontAwesomeIcon icon={ faEnvelope } />
+              Send me Updates
+            </PrimaryBadge>
+          </BadgeLink>
+        </BadgesList>

-      <VersionList className="border-bottom">
-        { (roadmap.versions || []).map(versionItem => (
-          <Link href={ `${roadmap.url}/${versionItem}` } passHref key={ versionItem }>
-            <VersionLink className={ classNames({
-              active: isActiveRoadmap(versionItem, roadmap.version),
-            }) }>{ versionItem } Version</VersionLink>
-          </Link>
-        )) }
-      </VersionList>
-    </Header>
-    <Summary>
-      {
-        roadmap.upcoming && (
-          <GuideBody>
-            <UpcomingGuide />
-          </GuideBody>
-        )
-      }
-      {
-        !roadmap.upcoming && (
-          <div className="container">
-            <Image src={ roadmap.picture } />
-            <SharePage title={ roadmap.description } url={ roadmap.url } />
-          </div>
-        )
-      }
-    </Summary>
-  </SummaryContainer>
-);
+        <VersionList className="border-bottom" />
+      </Header>
+      <Summary>
+        {
+          roadmap.upcoming && (
+            <GuideBody>
+              <UpcomingGuide />
+            </GuideBody>
+          )
+        }
+        {
+          !roadmap.upcoming && (
+            <div className="container">
+              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut beatae blanditiis commodi, consequatur, dicta distinctio esse et id, ipsa labore libero nisi odit placeat possimus saepe sed vel vitae voluptate?</p>
+              <SharePage title={ roadmap.description } url={ roadmap.url } />
+            </div>
+          )
+        }
+      </Summary>
+    </SummaryContainer>
+  )
+};

 export default RoadmapSummary;
--- a/package.json
+++ b/package.json
@ -6,11 +6,12 @@
  "scripts": {
    "dev": "NODE_ENV=dev next",
    "serve:out": "serve out",
-    "sitemap": "node scripts/sitemap.js",
    "build": "./scripts/build.sh",
    "deploy": "NODE_DEBUG=gh-pages gh-pages -d out -t",
    "test": "jest",
-    "test:watch": "jest --watch"
+    "test:watch": "jest --watch",
+    "meta:sitemap": "node scripts/sitemap.js",
+    "meta:roadmaps": "node scripts/roadmaps-meta.js"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.22",
--- a/scripts/path-map.js
+++ b/scripts/path-map.js
@ -3,7 +3,6 @@ const glob = require('glob');
 const fs = require('fs');

 const guides = require('../storage/guides.json');
-const roadmaps = require('../storage/roadmaps');

 const PAGES_PATH = path.join(__dirname, '../pages');
 const ROADMAPS_PATH =  path.join(__dirname, '../storage/roadmaps');
--- a/scripts/roadmaps-meta.js
+++ b/scripts/roadmaps-meta.js
@ -0,0 +1,76 @@
+const fs = require('fs');
+const path = require('path');
+
+const STORAGE_PATH = path.join(__dirname, '../storage');
+const ROADMAPS_PATH = path.join(__dirname, '../storage/roadmaps');
+const META_FILE_PATH = path.join(__dirname, '../storage/roadmaps.json');
+
+const roadmapDirs = fs.readdirSync(ROADMAPS_PATH);
+console.log(`[x] ${roadmapDirs.length} roadmaps found`);
+
+const roadmapsMeta = roadmapDirs.reduce((metaAcc, roadmapDirName) => {
+  const roadmapSlug = roadmapDirName.replace(/^\d+-/, '');
+  const roadmapDir = path.join(ROADMAPS_PATH, roadmapDirName);
+  const roadmapMeta = require(path.join(roadmapDir, 'meta.json'));
+
+  console.log(`----------------------------`);
+  console.log(`[#] Roadmap: ${roadmapMeta.title}`);
+  console.log(`[x] Generating sidebar`);
+
+  // Get all the directories in the roadmap dir
+  // these are going to be the parent menu items
+  const menuDirs = fs.readdirSync(roadmapDir)
+    .map(dirPath => path.join(roadmapDir, dirPath))
+    .filter(dirPath => fs.lstatSync(dirPath).isDirectory());
+
+  // Read the files inside each of the menu dirs and prepare menu items
+  // for the sidebar i.e. of the format below
+  // {
+  //    landscape: [{ title: "Junior", path: "/path/to/file.md"}, ...],
+  //    learn: [{ title: "Job Ready", path: "/path/to/file.md"}, ...],
+  // }
+  const sidebar = menuDirs.reduce((menus, menuDir) => {
+    const menuItemName = path.basename(menuDir);
+    const pageFiles = fs.readdirSync(menuDir)
+      .filter(pageFileName => pageFileName.endsWith('.md'))
+      // Sort by the titles `1-something.md, 2-another.md`
+      .sort((a, b) => parseInt(a, 10) - parseInt(b, 10));
+
+    return {
+      ...menus,
+      [menuItemName]: [
+        ...(menus[menuItemName] || []),
+        ...pageFiles.map(pageFile => {
+          const pageFileName = path.basename(pageFile, '.md');
+          const pageSlug = pageFileName.replace(/^\d+-/, '').toLowerCase();
+
+          return {
+            // Use the filename and remove the number from the beginning to generate slug
+            url: `/${roadmapSlug}/${pageSlug}`,
+            // Remove the number and replace the dashes to generate title
+            title: pageFileName.replace(/^\d+-/, '').replace(/-/g, ' '),
+            // Remove "STORAGE_PATH" because we don't want to push the absolute path while development
+            path: path.join(menuDir, pageFile).replace(STORAGE_PATH, ''),
+          }
+        }),
+      ],
+    };
+  }, {});
+
+  return [
+    ...metaAcc,
+    {
+      ...roadmapMeta,
+      url: `/${roadmapSlug}`,
+      path: path.join(roadmapDir.replace(STORAGE_PATH, ''), '/summary.md'),
+      sidebar,
+    },
+  ];
+}, []);
+
+console.log(`----------------------------`);
+console.log(`[x] Meta generated for ${roadmapsMeta.length} roadmaps`);
+console.log(`[x] Writing file ${META_FILE_PATH}`);
+fs.writeFileSync(META_FILE_PATH, JSON.stringify(roadmapsMeta, null, 2));
+console.log(`[x] Wrote file with content`);
+console.log(JSON.stringify(roadmapsMeta, null, 2));
--- a/static/sitemap.xml
+++ b/static/sitemap.xml
@ -1,87 +1,201 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
 <url>
-              <loc>https://roadmap.sh/frontend</loc>
+              <loc>https://roadmap.sh/1-frontend</loc>
              <changefreq>monthly</changefreq>
-              <lastmod>2019-11-16T09:32:19.372Z</lastmod>
+              <lastmod>2019-11-27T20:16:53.144Z</lastmod>
              <priority>1.0</priority>
          </url>
 <url>
-              <loc>https://roadmap.sh/frontend/latest</loc>
+              <loc>https://roadmap.sh/1-frontend/junior</loc>
              <changefreq>monthly</changefreq>
-              <lastmod>2019-11-16T09:32:19.372Z</lastmod>
+              <lastmod>2019-11-27T20:16:53.144Z</lastmod>
              <priority>1.0</priority>
          </url>
 <url>
-              <loc>https://roadmap.sh/frontend/2018</loc>
+              <loc>https://roadmap.sh/1-frontend/intermediate</loc>
              <changefreq>monthly</changefreq>
-              <lastmod>2019-11-16T09:32:19.349Z</lastmod>
+              <lastmod>2019-11-27T20:16:53.145Z</lastmod>
              <priority>1.0</priority>
          </url>
 <url>
-              <loc>https://roadmap.sh/frontend/2017</loc>
+              <loc>https://roadmap.sh/1-frontend/senior</loc>
              <changefreq>monthly</changefreq>
-              <lastmod>2019-11-16T09:32:19.335Z</lastmod>
+              <lastmod>2019-11-27T20:16:53.145Z</lastmod>
              <priority>1.0</priority>
          </url>
 <url>
-              <loc>https://roadmap.sh/backend</loc>
+              <loc>https://roadmap.sh/1-frontend/job-ready</loc>
              <changefreq>monthly</changefreq>
-              <lastmod>2019-11-16T09:32:19.367Z</lastmod>
+              <lastmod>2019-11-27T20:16:53.145Z</lastmod>
              <priority>1.0</priority>
          </url>
 <url>
-              <loc>https://roadmap.sh/backend/latest</loc>
+              <loc>https://roadmap.sh/1-frontend/write-better-css</loc>
              <changefreq>monthly</changefreq>
-              <lastmod>2019-11-16T09:32:19.367Z</lastmod>
+              <lastmod>2019-11-27T20:16:53.145Z</lastmod>
              <priority>1.0</priority>
          </url>
 <url>
-              <loc>https://roadmap.sh/backend/2018</loc>
+              <loc>https://roadmap.sh/1-frontend/build-tools</loc>
              <changefreq>monthly</changefreq>
-              <lastmod>2019-11-16T09:32:19.341Z</lastmod>
+              <lastmod>2019-11-27T20:16:53.145Z</lastmod>
              <priority>1.0</priority>
          </url>
 <url>
-              <loc>https://roadmap.sh/backend/2017</loc>
+              <loc>https://roadmap.sh/1-frontend/modern-frontend-applications</loc>
              <changefreq>monthly</changefreq>
-              <lastmod>2019-11-16T09:32:19.331Z</lastmod>
+              <lastmod>2019-11-27T20:16:53.145Z</lastmod>
              <priority>1.0</priority>
          </url>
 <url>
-              <loc>https://roadmap.sh/devops</loc>
+              <loc>https://roadmap.sh/1-frontend/automated-testing</loc>
              <changefreq>monthly</changefreq>
-              <lastmod>2019-11-16T09:32:19.369Z</lastmod>
+              <lastmod>2019-11-27T20:16:53.145Z</lastmod>
              <priority>1.0</priority>
          </url>
 <url>
-              <loc>https://roadmap.sh/devops/latest</loc>
+              <loc>https://roadmap.sh/1-frontend/static-type-checkers</loc>
              <changefreq>monthly</changefreq>
-              <lastmod>2019-11-16T09:32:19.369Z</lastmod>
+              <lastmod>2019-11-27T20:16:53.146Z</lastmod>
              <priority>1.0</priority>
          </url>
 <url>
-              <loc>https://roadmap.sh/devops/2018</loc>
+              <loc>https://roadmap.sh/1-frontend/server-side-rendering</loc>
              <changefreq>monthly</changefreq>
-              <lastmod>2019-11-16T09:32:19.343Z</lastmod>
+              <lastmod>2019-11-27T20:16:53.146Z</lastmod>
              <priority>1.0</priority>
          </url>
 <url>
-              <loc>https://roadmap.sh/devops/2017</loc>
+              <loc>https://roadmap.sh/1-frontend/go-beyond</loc>
              <changefreq>monthly</changefreq>
-              <lastmod>2019-11-16T09:32:19.333Z</lastmod>
+              <lastmod>2019-11-27T20:16:53.146Z</lastmod>
              <priority>1.0</priority>
          </url>
 <url>
-              <loc>https://roadmap.sh/fullstack</loc>
+              <loc>https://roadmap.sh/1-frontend/summary</loc>
              <changefreq>monthly</changefreq>
-              <lastmod>2019-11-16T12:14:26.816Z</lastmod>
+              <lastmod>2019-11-27T20:16:53.146Z</lastmod>
              <priority>1.0</priority>
          </url>
 <url>
-              <loc>https://roadmap.sh/qa-engineer</loc>
+              <loc>https://roadmap.sh/2-backend</loc>
              <changefreq>monthly</changefreq>
-              <lastmod>2019-11-16T12:14:26.817Z</lastmod>
+              <lastmod>2019-11-27T20:16:53.146Z</lastmod>
+              <priority>1.0</priority>
+          </url>
+<url>
+              <loc>https://roadmap.sh/2-backend/junior</loc>
+              <changefreq>monthly</changefreq>
+              <lastmod>2019-11-27T20:16:53.148Z</lastmod>
+              <priority>1.0</priority>
+          </url>
+<url>
+              <loc>https://roadmap.sh/2-backend/intermediate</loc>
+              <changefreq>monthly</changefreq>
+              <lastmod>2019-11-27T20:16:53.148Z</lastmod>
+              <priority>1.0</priority>
+          </url>
+<url>
+              <loc>https://roadmap.sh/2-backend/senior</loc>
+              <changefreq>monthly</changefreq>
+              <lastmod>2019-11-27T20:16:53.148Z</lastmod>
+              <priority>1.0</priority>
+          </url>
+<url>
+              <loc>https://roadmap.sh/2-backend/summary</loc>
+              <changefreq>monthly</changefreq>
+              <lastmod>2019-11-27T20:16:53.148Z</lastmod>
+              <priority>1.0</priority>
+          </url>
+<url>
+              <loc>https://roadmap.sh/3-devops</loc>
+              <changefreq>monthly</changefreq>
+              <lastmod>2019-11-27T20:16:53.148Z</lastmod>
+              <priority>1.0</priority>
+          </url>
+<url>
+              <loc>https://roadmap.sh/3-devops/junior</loc>
+              <changefreq>monthly</changefreq>
+              <lastmod>2019-11-27T20:16:53.148Z</lastmod>
+              <priority>1.0</priority>
+          </url>
+<url>
+              <loc>https://roadmap.sh/3-devops/intermediate</loc>
+              <changefreq>monthly</changefreq>
+              <lastmod>2019-11-27T20:16:53.148Z</lastmod>
+              <priority>1.0</priority>
+          </url>
+<url>
+              <loc>https://roadmap.sh/3-devops/senior</loc>
+              <changefreq>monthly</changefreq>
+              <lastmod>2019-11-27T20:16:53.148Z</lastmod>
+              <priority>1.0</priority>
+          </url>
+<url>
+              <loc>https://roadmap.sh/3-devops/summary</loc>
+              <changefreq>monthly</changefreq>
+              <lastmod>2019-11-27T20:16:53.148Z</lastmod>
+              <priority>1.0</priority>
+          </url>
+<url>
+              <loc>https://roadmap.sh/4-fullstack</loc>
+              <changefreq>monthly</changefreq>
+              <lastmod>2019-11-27T20:16:53.149Z</lastmod>
+              <priority>1.0</priority>
+          </url>
+<url>
+              <loc>https://roadmap.sh/4-fullstack/junior</loc>
+              <changefreq>monthly</changefreq>
+              <lastmod>2019-11-27T20:16:53.149Z</lastmod>
+              <priority>1.0</priority>
+          </url>
+<url>
+              <loc>https://roadmap.sh/4-fullstack/intermediate</loc>
+              <changefreq>monthly</changefreq>
+              <lastmod>2019-11-27T20:16:53.149Z</lastmod>
+              <priority>1.0</priority>
+          </url>
+<url>
+              <loc>https://roadmap.sh/4-fullstack/senior</loc>
+              <changefreq>monthly</changefreq>
+              <lastmod>2019-11-27T20:16:53.149Z</lastmod>
+              <priority>1.0</priority>
+          </url>
+<url>
+              <loc>https://roadmap.sh/4-fullstack/summary</loc>
+              <changefreq>monthly</changefreq>
+              <lastmod>2019-11-27T20:16:53.149Z</lastmod>
+              <priority>1.0</priority>
+          </url>
+<url>
+              <loc>https://roadmap.sh/5-qa</loc>
+              <changefreq>monthly</changefreq>
+              <lastmod>2019-11-27T20:16:53.149Z</lastmod>
+              <priority>1.0</priority>
+          </url>
+<url>
+              <loc>https://roadmap.sh/5-qa/junior</loc>
+              <changefreq>monthly</changefreq>
+              <lastmod>2019-11-27T20:16:53.149Z</lastmod>
+              <priority>1.0</priority>
+          </url>
+<url>
+              <loc>https://roadmap.sh/5-qa/intermediate</loc>
+              <changefreq>monthly</changefreq>
+              <lastmod>2019-11-27T20:16:53.149Z</lastmod>
+              <priority>1.0</priority>
+          </url>
+<url>
+              <loc>https://roadmap.sh/5-qa/senior</loc>
+              <changefreq>monthly</changefreq>
+              <lastmod>2019-11-27T20:16:53.149Z</lastmod>
+              <priority>1.0</priority>
+          </url>
+<url>
+              <loc>https://roadmap.sh/5-qa/summary</loc>
+              <changefreq>monthly</changefreq>
+              <lastmod>2019-11-27T20:16:53.149Z</lastmod>
              <priority>1.0</priority>
          </url>
 <url>
--- a/storage/roadmaps.json
+++ b/storage/roadmaps.json
@ -3,51 +3,187 @@
    "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",
-    "url": "/frontend",
-    "picture": "/static/roadmaps/{version}/frontend.png",
    "featured": true,
    "versions": [
      "latest",
      "2018",
      "2017"
-    ]
+    ],
+    "url": "/frontend",
+    "path": "/roadmaps/1-frontend/summary.md",
+    "sidebar": {
+      "landscape": [
+        {
+          "url": "/frontend/junior",
+          "title": "Junior",
+          "path": "/roadmaps/1-frontend/landscape/1-Junior.md"
+        },
+        {
+          "url": "/frontend/intermediate",
+          "title": "Intermediate",
+          "path": "/roadmaps/1-frontend/landscape/2-Intermediate.md"
+        },
+        {
+          "url": "/frontend/senior",
+          "title": "Senior",
+          "path": "/roadmaps/1-frontend/landscape/3-Senior.md"
+        }
+      ],
+      "learn": [
+        {
+          "url": "/frontend/job-ready",
+          "title": "Job Ready",
+          "path": "/roadmaps/1-frontend/learn/1-Job-Ready.md"
+        },
+        {
+          "url": "/frontend/write-better-css",
+          "title": "Write Better CSS",
+          "path": "/roadmaps/1-frontend/learn/2-Write-Better-CSS.md"
+        },
+        {
+          "url": "/frontend/build-tools",
+          "title": "Build Tools",
+          "path": "/roadmaps/1-frontend/learn/3-Build-Tools.md"
+        },
+        {
+          "url": "/frontend/modern-frontend-applications",
+          "title": "Modern Frontend Applications",
+          "path": "/roadmaps/1-frontend/learn/4-Modern-Frontend-Applications.md"
+        },
+        {
+          "url": "/frontend/automated-testing",
+          "title": "Automated Testing",
+          "path": "/roadmaps/1-frontend/learn/5-Automated-Testing.md"
+        },
+        {
+          "url": "/frontend/static-type-checkers",
+          "title": "Static Type Checkers",
+          "path": "/roadmaps/1-frontend/learn/6-Static-Type-Checkers.md"
+        },
+        {
+          "url": "/frontend/server-side-rendering",
+          "title": "Server Side Rendering",
+          "path": "/roadmaps/1-frontend/learn/7-Server-Side-Rendering.md"
+        },
+        {
+          "url": "/frontend/go-beyond",
+          "title": "Go Beyond",
+          "path": "/roadmaps/1-frontend/learn/8-Go-Beyond.md"
+        }
+      ]
+    }
  },
  {
    "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",
-    "url": "/backend",
-    "picture": "/static/roadmaps/{version}/backend.png",
    "featured": true,
-    "versions": [
-      "latest",
-      "2018",
-      "2017"
-    ]
+    "url": "/backend",
+    "path": "/roadmaps/2-backend/summary.md",
+    "sidebar": {
+      "landscape": [
+        {
+          "url": "/backend/junior",
+          "title": "Junior",
+          "path": "/roadmaps/2-backend/landscape/1-Junior.md"
+        },
+        {
+          "url": "/backend/intermediate",
+          "title": "Intermediate",
+          "path": "/roadmaps/2-backend/landscape/2-Intermediate.md"
+        },
+        {
+          "url": "/backend/senior",
+          "title": "Senior",
+          "path": "/roadmaps/2-backend/landscape/3-Senior.md"
+        }
+      ]
+    }
  },
  {
    "title": "DevOps Roadmap",
    "description": "Step by step guide for DevOps or any other Operations Role",
    "featuredDescription": "Step by step guide to become an SRE or for any operations role in 2019",
-    "url": "/devops",
-    "picture": "/static/roadmaps/{version}/devops.png",
    "featured": true,
    "versions": [
      "latest",
      "2018",
      "2017"
-    ]
+    ],
+    "url": "/devops",
+    "path": "/roadmaps/3-devops/summary.md",
+    "sidebar": {
+      "landscape": [
+        {
+          "url": "/devops/junior",
+          "title": "Junior",
+          "path": "/roadmaps/3-devops/landscape/1-Junior.md"
+        },
+        {
+          "url": "/devops/intermediate",
+          "title": "Intermediate",
+          "path": "/roadmaps/3-devops/landscape/2-Intermediate.md"
+        },
+        {
+          "url": "/devops/senior",
+          "title": "Senior",
+          "path": "/roadmaps/3-devops/landscape/3-Senior.md"
+        }
+      ]
+    }
  },
  {
    "title": "Full Stack Developer",
-    "description": "Step by step guide to becoming a modern full stack developer in 2019",
+    "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,
    "url": "/fullstack",
-    "upcoming": true
+    "path": "/roadmaps/4-fullstack/summary.md",
+    "sidebar": {
+      "landscape": [
+        {
+          "url": "/fullstack/junior",
+          "title": "Junior",
+          "path": "/roadmaps/4-fullstack/landscape/1-Junior.md"
+        },
+        {
+          "url": "/fullstack/intermediate",
+          "title": "Intermediate",
+          "path": "/roadmaps/4-fullstack/landscape/2-Intermediate.md"
+        },
+        {
+          "url": "/fullstack/senior",
+          "title": "Senior",
+          "path": "/roadmaps/4-fullstack/landscape/3-Senior.md"
+        }
+      ]
+    }
  },
  {
    "title": "QA Engineer",
    "description": "Steps to follow in order to become a modern QA Engineer in 2019",
-    "url": "/qa-engineer",
-    "upcoming": true
+    "featuredDescription": "Step by step guide to becoming a modern QA Engineer in 2019",
+    "upcoming": true,
+    "url": "/qa",
+    "path": "/roadmaps/5-qa/summary.md",
+    "sidebar": {
+      "landscape": [
+        {
+          "url": "/qa/junior",
+          "title": "Junior",
+          "path": "/roadmaps/5-qa/landscape/1-Junior.md"
+        },
+        {
+          "url": "/qa/intermediate",
+          "title": "Intermediate",
+          "path": "/roadmaps/5-qa/landscape/2-Intermediate.md"
+        },
+        {
+          "url": "/qa/senior",
+          "title": "Senior",
+          "path": "/roadmaps/5-qa/landscape/3-Senior.md"
+        }
+      ]
+    }
  }
-]
+]
--- a/storage/roadmaps/1-frontend/landscape/1-Junior.md
+++ b/storage/roadmaps/1-frontend/landscape/1-Junior.md
--- a/storage/roadmaps/1-frontend/landscape/2-Intermediate.md
+++ b/storage/roadmaps/1-frontend/landscape/2-Intermediate.md
--- a/storage/roadmaps/1-frontend/landscape/3-Senior.md
+++ b/storage/roadmaps/1-frontend/landscape/3-Senior.md
--- a/storage/roadmaps/1-frontend/learn/1-Job-Ready.md
+++ b/storage/roadmaps/1-frontend/learn/1-Job-Ready.md
--- a/storage/roadmaps/1-frontend/learn/2-Write-Better-CSS.md
+++ b/storage/roadmaps/1-frontend/learn/2-Write-Better-CSS.md
--- a/storage/roadmaps/1-frontend/learn/3-Build-Tools.md
+++ b/storage/roadmaps/1-frontend/learn/3-Build-Tools.md
--- a/storage/roadmaps/1-frontend/learn/4-Modern-Frontend-Applications.md
+++ b/storage/roadmaps/1-frontend/learn/4-Modern-Frontend-Applications.md
--- a/storage/roadmaps/1-frontend/learn/5-Automated-Testing.md
+++ b/storage/roadmaps/1-frontend/learn/5-Automated-Testing.md
--- a/storage/roadmaps/1-frontend/learn/6-Static-Type-Checkers.md
+++ b/storage/roadmaps/1-frontend/learn/6-Static-Type-Checkers.md
--- a/storage/roadmaps/1-frontend/learn/7-Server-Side-Rendering.md
+++ b/storage/roadmaps/1-frontend/learn/7-Server-Side-Rendering.md
--- a/storage/roadmaps/1-frontend/learn/8-Go-Beyond.md
+++ b/storage/roadmaps/1-frontend/learn/8-Go-Beyond.md
--- a/storage/roadmaps/1-frontend/meta.json
+++ b/storage/roadmaps/1-frontend/meta.json
@ -2,7 +2,6 @@
  "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",
-  "picture": "/static/roadmaps/{version}/frontend.png",
  "featured": true,
  "versions": [
    "latest",
--- a/storage/roadmaps/1-frontend/summary.md
+++ b/storage/roadmaps/1-frontend/summary.md
--- a/storage/roadmaps/2-backend/landscape/1-Junior.md
+++ b/storage/roadmaps/2-backend/landscape/1-Junior.md
--- a/storage/roadmaps/2-backend/landscape/2-Intermediate.md
+++ b/storage/roadmaps/2-backend/landscape/2-Intermediate.md
--- a/storage/roadmaps/2-backend/landscape/3-Senior.md
+++ b/storage/roadmaps/2-backend/landscape/3-Senior.md
--- a/storage/roadmaps/2-backend/meta.json
+++ b/storage/roadmaps/2-backend/meta.json
@ -0,0 +1,6 @@
+{
+  "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
+}
--- a/storage/roadmaps/2-backend/summary.md
+++ b/storage/roadmaps/2-backend/summary.md
@ -0,0 +1,2 @@
+## Backend Developer
+How to become a backend frontend developer
--- a/storage/roadmaps/3-devops/landscape/1-Junior.md
+++ b/storage/roadmaps/3-devops/landscape/1-Junior.md
--- a/storage/roadmaps/3-devops/landscape/2-Intermediate.md
+++ b/storage/roadmaps/3-devops/landscape/2-Intermediate.md
--- a/storage/roadmaps/3-devops/landscape/3-Senior.md
+++ b/storage/roadmaps/3-devops/landscape/3-Senior.md
--- a/storage/roadmaps/3-devops/meta.json
+++ b/storage/roadmaps/3-devops/meta.json
@ -0,0 +1,11 @@
+{
+  "title": "DevOps Roadmap",
+  "description": "Step by step guide for DevOps or any other Operations Role",
+  "featuredDescription": "Step by step guide to become an SRE or for any operations role in 2019",
+  "featured": true,
+  "versions": [
+    "latest",
+    "2018",
+    "2017"
+  ]
+}
--- a/storage/roadmaps/3-devops/summary.md
+++ b/storage/roadmaps/3-devops/summary.md
@ -0,0 +1,2 @@
+## DevOps Roadmap
+Roadmap for any operations role
--- a/storage/roadmaps/4-fullstack/landscape/1-Junior.md
+++ b/storage/roadmaps/4-fullstack/landscape/1-Junior.md
--- a/storage/roadmaps/4-fullstack/landscape/2-Intermediate.md
+++ b/storage/roadmaps/4-fullstack/landscape/2-Intermediate.md
--- a/storage/roadmaps/4-fullstack/landscape/3-Senior.md
+++ b/storage/roadmaps/4-fullstack/landscape/3-Senior.md
--- a/storage/roadmaps/4-fullstack/meta.json
+++ b/storage/roadmaps/4-fullstack/meta.json
@ -0,0 +1,6 @@
+{
+  "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
+}
--- a/storage/roadmaps/4-fullstack/summary.md
+++ b/storage/roadmaps/4-fullstack/summary.md
@ -0,0 +1,2 @@
+## Fullstack Roadmap
+Roadmap to becoming a fullstack developer
--- a/storage/roadmaps/5-qa/landscape/1-Junior.md
+++ b/storage/roadmaps/5-qa/landscape/1-Junior.md
--- a/storage/roadmaps/5-qa/landscape/2-Intermediate.md
+++ b/storage/roadmaps/5-qa/landscape/2-Intermediate.md
--- a/storage/roadmaps/5-qa/landscape/3-Senior.md
+++ b/storage/roadmaps/5-qa/landscape/3-Senior.md
--- a/storage/roadmaps/5-qa/meta.json
+++ b/storage/roadmaps/5-qa/meta.json
@ -0,0 +1,6 @@
+{
+  "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
+}
--- a/storage/roadmaps/5-qa/summary.md
+++ b/storage/roadmaps/5-qa/summary.md
@ -0,0 +1,2 @@
+## QA Roadmap
+Roadmap to becoming a QA Engineer