Add sponsor ad

* Fixing missing 'mailto:'

* Fixing broken link in Terms

.babelrc

@@ -0,0 +1,13 @@
+{
+  "presets": [
+    "next/babel"
+  ],
+  "plugins": [
+    [
+      "styled-components",
+      {
+        "ssr": true
+      }
+    ]
+  ]
+}

.editorconfig

@@ -0,0 +1,23 @@
+# EditorConfig for the node-soap library - head over to editorconfig.org to see if you editor supports this file.
+
+# this is the topmost .editorconfig file
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+
+[*.xml]
+insert_final_newline = false
+
+[*.js]
+indent_style = space
+indent_size = 2
+
+[*.json]
+indent_style = space
+indent_size = 2
+
+[{package.json, .travis.yml}]
+indent_style = space
+indent_size = 2

.github/FUNDING.yml

@@ -1,2 +1,3 @@
 # These are supported funding model platforms
+
 github: kamranahmedse

.github/ISSUE_TEMPLATE.md

@@ -0,0 +1,36 @@
+<!--
+Please do not remove anything written below.
+ 
+Fill the details and open the issue. Any issue that 
+doesn't have all of these filled in will be closed, 
+if yours is closed reopen with everything filled in.  
+-->
+
+#### What roadmap is this issue about?
+
+- [ ] Frontend Roadmap
+- [ ] Backend Roadmap
+- [ ] DevOps Roadmap
+- [ ] All Roadmaps
+
+#### What is this issue about?
+
+- [ ] Functionality of the website
+- [ ] Discussion for a pull request I would want to open.
+- [ ] Addition of a new item
+- [ ] Removal of some existing item
+- [ ] Changing in arrangement
+- [ ] General suggestion
+- [ ] Sharing an Idea
+- [ ] Something else
+
+#### Please acknowledge the below listed
+
+- [ ] This is not a duplicate issue. I have searched and there is no existing issue for this.
+- [ ] I understand that these roadmaps are highly opinionated. The purpose is to not to include everything out there in these roadmaps but to have everything that is most relevant today comparing to the other options listed.
+- [ ] I have read the [contribution docs](../contributing) before opening this issue.
+
+
+#### Enter the details about the issue here
+
+<!-- Please enter the issue details here -->

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,19 @@
+#### What roadmap does this PR target?
+
+- [ ] Code Change
+- [ ] Frontend Roadmap
+- [ ] Backend Roadmap
+- [ ] DevOps Roadmap
+- [ ] All Roadmaps
+- [ ] Guides
+
+#### Please acknowledge the items listed below
+
+- [ ] I have discussed this contribution and got a go-ahead in an issue before opening this pull request.
+- [ ] This is not a duplicate issue. I have searched and there is no existing issue for this.
+- [ ] I understand that these roadmaps are highly opinionated. The purpose is to not to include everything out there in these roadmaps but to have everything that is most relevant today comparing to the other options listed.
+- [ ] I have read the [contribution docs](../contributing) before opening this PR.
+
+#### Enter the details about the contribution
+
+<!-- Enter the details here -->

.github/workflows/deploy.yml

@@ -1,34 +1,29 @@
-name: Deployment to GH Pages
+name: Deployment to GitHub Pages
 on:
   push:
     branches: [ master ]
 env:
+  ROADMAP_GA_SECRET: ${{ secrets.GA_SECRET }}
   GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-  PAT: ${{ secrets.PAT }}
   CI: true
+  NEXT_TELEMETRY_DISABLED: 1
 jobs:
   build:
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v2
-      with:
-        persist-credentials: false
     - uses: actions/setup-node@v1
       with:
-        node-version: 18
-    - run: git config --global url."https://${{ secrets.PAT }}@github.com/".insteadOf ssh://git@github.com/
-    - uses: pnpm/action-setup@v2.2.2
-      with:
-        version: 7.13.4
+        node-version: 12
     - name: Setup Environment
       run: |
-        pnpm install
-    - name: Generate meta and build
+        npm install -g yarn
+        yarn install
+    - name: Generate meta and builld
       run: |
-        npm run build
-        touch ./dist/.nojekyll
-        echo 'roadmap.sh' > ./dist/CNAME
-    - name: Deploy to GH Pages
+        yarn meta
+        yarn build
+    - name: Deploy to GitHub Pages
       run: |
         git config user.email "kamranahmed.se@gmail.com"
         git config user.name "Kamran Ahmed"

.github/workflows/update-deps.yml

@@ -1,38 +0,0 @@
-name: Update dependencies
-
-on:
-  workflow_dispatch: # allow manual run
-  schedule:
-    - cron: '0 0 * * 0' # every sunday at midnight
-
-jobs:
-  upgrade-deps:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 18
-      - uses: pnpm/action-setup@v2.2.2
-        with:
-          version: 7.13.4
-      - name: Upgrade dependencies
-        run: |
-          pnpm install
-          npm run upgrade
-          pnpm install --lockfile-only
-      - name: Create PR
-        uses: peter-evans/create-pull-request@v4
-        with:
-          delete-branch: false
-          branch: "update-deps"
-          base: "master"
-          labels: |
-            dependencies
-            automated pr
-          reviewers: kamranahmedse
-          commit-message: "chore: update dependencies to latest"
-          title: "Upgrade dependencies to latest"
-          body: |
-            Updates all dependencies to latest versions.
-            Please review the changes and merge if everything looks good.

.gitignore

@@ -1,22 +1,14 @@
-# build output
-dist/
-.output/
-
-# dependencies
-node_modules/
-
-bin/developer-roadmap
-
-# logs
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-
-
-# environment variables
-.env
-.env.production
-
-# macOS-specific files
+_*
+Thumbs.db
 .DS_Store
+.idea
+.next
+out
+.env
+build
+node_modules
+yarn-error.log
+*.sublime-project
+*.sublime-workspace
+config/*.json
+!config/dev.json

.vscode/extensions.json

@@ -1,4 +0,0 @@
-{
-  "recommendations": ["astro-build.astro-vscode"],
-  "unwantedRecommendations": []
-}

.vscode/launch.json

@@ -1,11 +0,0 @@
-{
-  "version": "0.2.0",
-  "configurations": [
-    {
-      "command": "./node_modules/.bin/astro dev",
-      "name": "Development server",
-      "request": "launch",
-      "type": "node-terminal"
-    }
-  ]
-}

CODE_OF_CONDUCT.md

@@ -73,4 +73,4 @@ available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.ht
 [homepage]: https://www.contributor-covenant.org
 
 For answers to common questions about this code of conduct, see
-https://www.contributor-covenant.org/faq
+https://www.contributor-covenant.org/faq

LICENSE

@@ -1,3 +1,6 @@
+The codebase in this repository is covered under BSD 4-Clause license and
+the content with CC BY-NC-ND 3.0 with additional clauses
+
 Everything including text and images in this project are protected by the copyright laws.
 You are allowed to use this material for personal use but are not allowed to use it for
 any other purpose including publishing the images, the project files or the content in the
@@ -5,11 +8,9 @@ images in any form either digital, non-digital, textual, graphical or written fo
 You are allowed to share the links to the repository or the website roadmap.sh but not
 the content for any sort of usage that involves the content of this repository taken out
 of the repository and be shared from any other medium including but not limited to blog
-posts, articles, newsletters, you must get prior consent from the understated. These
-conditions do not apply to the readonly GitHub forks created using the Fork button on
-GitHub with the whole purpose of contributing to the project.
+posts, articles, newsletters, you must get prior consent from the understated.
 
-Copyright © 2023 Kamran Ahmed <kamranahmed.se@gmail.com>
+Copyright © 2021 Kamran Ahmed <kamranahmed.se@gmail.com>
 
 Please note that I am really flexible with allowing the usage of the content in this
 repository. If you reach out to me with a brief detail of why and how you would like

README.md

@@ -1,96 +0,0 @@
-<p align="center">
-  <img src="public/brand.png" height="128">
-  <h2 align="center"><a href="https://roadmap.sh">roadmap.sh</a></h2>
-  <p align="center">Community driven roadmaps, articles and resources for developers<p>
-  <p align="center">
-    <a href="https://roadmap.sh/roadmaps">
-    	<img src="https://img.shields.io/badge/-Roadmaps%20-0a0a0a.svg?style=flat&colorA=0a0a0a" alt="roadmaps" />
-    </a>
-    <a href="https://youtube.com/theroadmap?sub_confirmation=1">
-    	<img src="https://img.shields.io/badge/-Videos-0a0a0a.svg?style=flat&colorA=0a0a0a" alt="videos" />
-    </a>
-    <a href="https://github.com/kamranahmedse/developer-roadmap/tree/0471d44c8fae58b6a36a7c57bba12253916d0249/translations">
-    	<img src="https://img.shields.io/badge/-Translations-0a0a0a.svg?style=flat&colorA=0a0a0a" alt="videos" />
-    </a>
-    <a href="https://www.youtube.com/channel/UCA0H2KIWgWTwpTFjSxp0now?sub_confirmation=1">
-    	<img src="https://img.shields.io/badge/%E2%9D%A4-YouTube%20Channel-0a0a0a.svg?style=flat&colorA=0a0a0a" alt="roadmaps" />
-    </a>
-  </p>
-</p>
-
-<br>
-
-![](https://i.imgur.com/waxVImv.png)
-
-Roadmaps are now interactive, you can click the nodes to read more about the topics.
-
-### [View all Roadmaps](https://roadmap.sh)
-
-![](https://i.imgur.com/waxVImv.png)
-
-Here is the list of available roadmaps with more being actively worked upon.
-
-- [Frontend Roadmap](https://roadmap.sh/frontend)
-- [Backend Roadmap](https://roadmap.sh/backend)
-- [DevOps Roadmap](https://roadmap.sh/devops)
-- [Computer Science Roadmap](https://roadmap.sh/computer-science)
-- [QA Roadmap](https://roadmap.sh/qa)
-- [Software Architect Roadmap](https://roadmap.sh/software-architect)
-- [Software Design and Architecture Roadmap](https://roadmap.sh/software-design-architecture)
-- [JavaScript Roadmap](https://roadmap.sh/javascript)
-- [React Roadmap](https://roadmap.sh/react)
-- [Vue Roadmap](https://roadmap.sh/vue)
-- [Angular Roadmap](https://roadmap.sh/angular)
-- [Node.js Roadmap](https://roadmap.sh/nodejs)
-- [GraphQL Roadmap](https://roadmap.sh/graphql)
-- [Android Roadmap](https://roadmap.sh/android)
-- [Flutter Roadmap](https://roadmap.sh/flutter)
-- [Python Roadmap](https://roadmap.sh/python)
-- [Go Roadmap](https://roadmap.sh/golang)
-- [Java Roadmap](https://roadmap.sh/java)
-- [Design System Roadmap](https://roadmap.sh/design-system)
-- [DBA Roadmap](https://roadmap.sh/postgresql-dba)
-- [Blockchain Roadmap](https://roadmap.sh/blockchain)
-- [ASP.NET Core Roadmap](https://roadmap.sh/aspnet-core)
-
-![](https://i.imgur.com/waxVImv.png)
-
-## Share with the community
-
-Please consider sharing a post about [roadmap.sh](https://roadmap.sh) and the value it provides. It really does help!
-
-[![GitHub Repo stars](https://img.shields.io/badge/share%20on-reddit-red?logo=reddit)](https://reddit.com/submit?url=https://roadmap.sh&title=Interactive%20roadmaps,%20guides%20and%20other%20educational%20content%20for%20Developers)
-[![GitHub Repo stars](https://img.shields.io/badge/share%20on-hacker%20news-orange?logo=ycombinator)](https://news.ycombinator.com/submitlink?u=https://roadmap.sh)
-[![GitHub Repo stars](https://img.shields.io/badge/share%20on-twitter-03A9F4?logo=twitter)](https://twitter.com/share?url=https://roadmap.sh&text=Interactive%20roadmaps,%20guides%20and%20other%20educational%20content%20for%20Developers)
-[![GitHub Repo stars](https://img.shields.io/badge/share%20on-facebook-1976D2?logo=facebook)](https://www.facebook.com/sharer/sharer.php?u=https://roadmap.sh)
-[![GitHub Repo stars](https://img.shields.io/badge/share%20on-linkedin-3949AB?logo=linkedin)](https://www.linkedin.com/shareArticle?url=https://roadmap.sh&title=Interactive%20roadmaps,%20guides%20and%20other%20educational%20content%20for%20Developers)
-
-## Development
-
-Clone the repository, install the dependencies and start the application
-
-```bash
-git clone git@github.com:kamranahmedse/developer-roadmap.git
-npm install
-npm run dev
-```
-
-## Contribution
-
-> Have a look at [contribution docs](./contributing.md) for how to update any of the roadmaps
-
-- Add content to roadmaps
-- Add new roadmaps
-- Suggest changes to existing roadmaps
-- Discuss ideas in issues
-- Spread the word
-
-## Thanks to all contributors ❤
-
- <a href = "https://github.com/kamranahmedse/developer-roadmap/graphs/contributors">
-   <img src = "https://contrib.rocks/image?repo=kamranahmedse/developer-roadmap"/>
- </a>
-
-## License
-
-Have a look at the [license file](./license) for details

astro.config.mjs

@@ -1,36 +0,0 @@
-// https://astro.build/config
-import sitemap from '@astrojs/sitemap';
-import tailwind from '@astrojs/tailwind';
-import compress from 'astro-compress';
-import { defineConfig } from 'astro/config';
-import rehypeExternalLinks from 'rehype-external-links';
-import { serializeSitemap, shouldIndexPage } from './sitemap.mjs';
-
-export default defineConfig({
-  site: 'https://roadmap.sh',
-  markdown: {
-    rehypePlugins: [
-      [
-        rehypeExternalLinks,
-        {
-          target: '_blank',
-        },
-      ],
-    ],
-  },
-  integrations: [
-    tailwind({
-      config: {
-        applyBaseStyles: false,
-      },
-    }),
-    sitemap({
-      filter: shouldIndexPage,
-      serialize: serializeSitemap,
-    }),
-    compress({
-      css: false,
-      js: false,
-    }),
-  ],
-});

bin/compress-jsons.cjs

@@ -1,14 +0,0 @@
-const fs = require('node:fs');
-const path = require('node:path');
-
-const jsonsDir = path.join(process.cwd(), 'public/jsons');
-const jsonFiles = fs.readdirSync(jsonsDir);
-
-jsonFiles.forEach((jsonFileName) => {
-  console.log(`Compressing ${jsonFileName}...`);
-
-  const jsonFilePath = path.join(jsonsDir, jsonFileName);
-  const json = require(jsonFilePath);
-
-  fs.writeFileSync(jsonFilePath, JSON.stringify(json));
-});

bin/content-migrator.cjs

@@ -1,120 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-
-// 1 - Renames each readme.md to index.md
-//    e.g.
-//      before => roadmaps/frontend/content/internet/readme.md
-//      after  => roadmaps/frontend/content/internet/index.md
-//
-// 2 - Replaces the resource tags with short codes
-//    e.g.
-//      <ResourceGroupTitle>Free Content</ResourceGroupTitle>
-//      <BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.w3schools.com/css/'>W3Schools — Learn CSS</BadgeLink>
-//
-//      {% resources %}
-//        {% Blog "https://www.w3schools.com/css/", "W3Schools — Learn CSS" %}
-//      {% endresources %}
-//
-// 3 - Removes the index.md file from within the content dir i.e. to avoid `/frontend` permalink for `/frontend/index.md`
-//     Because we have the `/frontend` permalink serving the actual roadmap and not any content
-const roadmapsDir = path.join(__dirname, '../src/roadmaps');
-const roadmapDirs = fs.readdirSync(roadmapsDir);
-
-roadmapDirs.forEach((roadmapDirName) => {
-  const roadmapDirPath = path.join(roadmapsDir, roadmapDirName);
-  const contentDirPath = path.join(roadmapDirPath, 'content');
-
-  console.log(`[Start] == Migrating ${roadmapDirName}`);
-
-  if (!fs.existsSync(contentDirPath)) {
-    console.log(`Content dir not found ${roadmapDirName}/content`);
-    return;
-  }
-
-  function handleContentDir(parentDirPath) {
-    const dirChildrenNames = fs.readdirSync(parentDirPath);
-
-    dirChildrenNames.forEach((dirChildName) => {
-      let dirChildPath = path.join(parentDirPath, dirChildName);
-
-      // If directory, handle the children for it
-      if (fs.lstatSync(dirChildPath).isDirectory()) {
-        handleContentDir(dirChildPath);
-      }
-
-      //////////////////////////////////////////////////////////
-      // 1 - Rename directories to remove the numbers
-      //////////////////////////////////////////////////////////
-      // let newDirChildPath = path.join(
-      //   path.dirname(dirChildPath),
-      //   path.basename(dirChildPath).replace(/^\d+-/, '')
-      // );
-      // fs.renameSync(dirChildPath, dirChildPath);
-
-      //////////////////////////////////////////////////////////
-      // 1 - Rename readme.md to index.md
-      //////////////////////////////////////////////////////////
-      if (dirChildPath.endsWith('readme.md')) {
-        const newFilePath = path.join(path.dirname(dirChildPath), `index.md`);
-
-        fs.renameSync(dirChildPath, newFilePath);
-        dirChildPath = newFilePath;
-      }
-
-      //////////////////////////////////////////////////////////
-      // 2 - Replace the resource tags with short codes
-      //////////////////////////////////////////////////////////
-      if (fs.lstatSync(dirChildPath).isFile()) {
-        const fileContent = fs.readFileSync(dirChildPath, 'utf-8');
-
-        let resourceLinks = [...fileContent.matchAll(/<BadgeLink.+<\/BadgeLink>/g)].map(([fullMatch]) => {
-          // const resourceType = fullMatch.match(/badgeText=["'](.+?)["']/)[1];
-          const link = fullMatch.match(/href=["'](.+?)["']/)[1];
-          const text = fullMatch.match(/>([^<]+)<\/BadgeLink>$/)[1];
-
-          return `- [${text.replaceAll(/['"]/g, '')}](${link})`;
-        });
-
-        //////////////////////////////////////////////////////////////////////
-        // Replace the dedicated roadmap tag with the short code
-        //////////////////////////////////////////////////////////////////////
-        // prettier-ignore
-        const dedicatedRegex = /<DedicatedRoadmap\s*href=['"](.+?)['"]\s*title=['"](.+?)['"]\s*description=['"].+?['"]\s*\/>/;
-        const dedicatedMatches = fileContent.match(dedicatedRegex);
-
-        if (dedicatedMatches) {
-          const [, href, title] = dedicatedMatches;
-
-          resourceLinks = [`- [Visit Dedicated ${title}](${href})`, ...resourceLinks];
-        }
-
-        resourceLinks = ['Visit the following resources to learn more:\n', ...resourceLinks];
-        resourceLinks = resourceLinks.join('\n');
-
-        let newFileContent = fileContent.replace(
-          /<ResourceGroupTitle>([^<\/BadgeLink>]|\S|\s)+<\/BadgeLink>/,
-          resourceLinks
-        );
-
-        // In case if the resources were not wrapped in <ResourceGroupTitle>
-        newFileContent = newFileContent.replace(
-          /<BadgeLink([^<\/BadgeLink>]|\S|\s)+<\/BadgeLink>/,
-          resourceLinks
-        );
-
-        fs.writeFileSync(dirChildPath, newFileContent);
-      }
-    });
-  }
-
-  handleContentDir(contentDirPath);
-
-  // 3 - Removes the index.md file from within the content dir i.e. to avoid `/frontend` permalink for `/frontend/index.md`
-  //     Because we have the `/frontend` permalink serving the actual roadmap and not any content
-  const contentRootFile = path.join(contentDirPath, '/index.md');
-  if (fs.existsSync(contentRootFile)) {
-    fs.rmSync(contentRootFile);
-  }
-
-  console.log(`        == Migrated ${roadmapDirName}`);
-});

bin/guide-migrator.cjs

@@ -1,83 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-const yaml = require('json-to-pretty-yaml');
-
-const contentDirPath = path.join(__dirname, './developer-roadmap/content');
-const guides = require('./developer-roadmap/content/guides.json');
-const authors = require('./developer-roadmap/content/authors.json');
-
-const guideImagesDirPath = path.join(__dirname, './developer-roadmap/public/guides');
-const newGuideImagesDirPath = path.join(__dirname, '../public/guides');
-
-// Remove the guide images directory
-if (fs.existsSync(newGuideImagesDirPath)) {
-  fs.rmSync(newGuideImagesDirPath, { recursive: true });
-}
-
-fs.cpSync(guideImagesDirPath, newGuideImagesDirPath, { recursive: true });
-
-// Remove the old guides directory
-const newGuidesDirPath = path.join(__dirname, '../src/guides');
-if (fs.existsSync(newGuidesDirPath)) {
-  fs.rmSync(newGuidesDirPath, { recursive: true });
-}
-
-fs.mkdirSync(newGuidesDirPath);
-
-guides.forEach((guide) => {
-  const { id: guideId } = guide;
-
-  const originalGuidePath = path.join(contentDirPath, 'guides', `${guideId}.md`);
-  const newGuidePath = path.join(__dirname, `../src/guides/${guideId}.md`);
-
-  const guideWithoutFrontmatter = fs.readFileSync(originalGuidePath, 'utf8');
-  fs.copyFileSync(originalGuidePath, newGuidePath);
-
-  const guideAuthor = authors.find((author) => author.username === guide.authorUsername);
-
-  const guideFrontMatter = yaml
-    .stringify({
-      title: guide.title,
-      description: guide.description,
-      author: {
-        name: guideAuthor.name,
-        url: `https://twitter.com/${guideAuthor.twitter}`,
-        imageUrl: `${guideAuthor.picture}`,
-      },
-      seo: {
-        title: `${guide.title} - roadmap.sh`,
-        description: guide.description,
-      },
-      isNew: guide.isNew,
-      type: guide.type,
-      date: guide.createdAt.replace(/T.*/, ''),
-      sitemap: {
-        priority: 0.7,
-        changefreq: 'weekly',
-      },
-      tags: ['guide', `${guide.type}-guide`, `guide-sitemap`],
-    })
-    .replace(/date: "(.+?)"/, 'date: $1');
-
-  const guideWithUpdatedUrls = guideWithoutFrontmatter
-    .replace(/\[\!\[\]\((.+?\.png)\)\]\((.+?\.png)\)/g, '[![]($1)]($2)')
-    .replace(/\[\!\[\]\((.+?\.svg)\)\]\((.+?\.svg)\)/g, '[![]($1)]($2)')
-    .replace(/\/http/g, 'http')
-    .replace(/]\(\/guides\/(.+?)\.png\)/g, '](/guides/$1.png)')
-    .replace(/<iframe/g, '<iframe class="w-full aspect-video mb-5"')
-    .replace(/<iframe(.+?)\s?\/>/g, '<iframe$1></iframe>');
-
-  const guideWithFrontmatter = `---\n${guideFrontMatter}---\n\n${guideWithUpdatedUrls}`;
-
-  console.log(`Writing guide ${guideId} to disk`);
-  fs.writeFileSync(newGuidePath, guideWithFrontmatter);
-});
-
-const oldAuthorAssetsPath = path.join(__dirname, 'developer-roadmap/public/authors');
-const newAuthorAssetsPath = path.join(__dirname, '../public/authors');
-
-if (fs.existsSync(newAuthorAssetsPath)) {
-  fs.rmSync(newAuthorAssetsPath, { recursive: true });
-}
-
-fs.cpSync(oldAuthorAssetsPath, newAuthorAssetsPath, { recursive: true });

bin/roadmap-metas.cjs

@@ -1,116 +0,0 @@
-module.exports = {
-  angular: {
-    dimensions: {
-      width: 968,
-      height: 2277.8,
-    },
-  },
-  'aspnet-core': {
-    dimensions: {
-      width: 968,
-      height: 2773.45,
-    },
-  },
-  backend: {
-    dimensions: {
-      width: 968,
-      height: 2840.4,
-    },
-  },
-  blockchain: {
-    dimensions: {
-      width: 968,
-      height: 2173.87,
-    },
-  },
-  'computer-science': {
-    dimensions: {
-      width: 968,
-      height: 3009.05,
-    },
-  },
-  'design-system': {
-    dimensions: {
-      width: 968,
-      height: 2309.7,
-    },
-  },
-  devops: {
-    dimensions: {
-      width: 968,
-      height: 2527.46,
-    },
-  },
-  flutter: {
-    dimensions: {
-      width: 968,
-      height: 2042.2,
-    },
-  },
-  frontend: {
-    dimensions: {
-      width: 968,
-      height: 2734.48,
-    },
-  },
-  golang: {
-    dimensions: {
-      width: 968,
-      height: 1495.21,
-    },
-  },
-  java: {
-    dimensions: {
-      width: 968,
-      height: 1167.29,
-    },
-  },
-  javascript: {
-    dimensions: {
-      width: 968,
-      height: 2438.9,
-    },
-  },
-  nodejs: {
-    dimensions: {
-      width: 968,
-      height: 2474.06,
-    },
-  },
-  python: {
-    dimensions: {
-      width: 992,
-      height: 1259.03,
-    },
-  },
-  qa: {
-    dimensions: {
-      width: 968,
-      height: 2107.75,
-    },
-  },
-  react: {
-    dimensions: {
-      width: 968,
-      height: 1570.26,
-    },
-  },
-  'software-architect': {
-    dimensions: {
-      width: 968,
-      height: 1882.18,
-    },
-  },
-  'software-design-architecture': {
-    dimensions: {
-      width: 968,
-      height: 1764.66,
-    },
-  },
-  vue: {
-    dimensions: {
-      width: 968,
-      height: 1657.07,
-    },
-  },
-};

bin/roadmap-migrator.cjs

@@ -1,132 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-const yaml = require('json-to-pretty-yaml');
-const roadmapMetas = require('./roadmap-metas.cjs');
-
-const oldAssetsPath = path.join(__dirname, 'developer-roadmap/public');
-const newAssetsPath = path.join(__dirname, '../public/');
-
-// Create JSONs dir
-const newJsonsPath = path.join(newAssetsPath, 'jsons');
-if (fs.existsSync(newJsonsPath)) {
-  fs.rmSync(newJsonsPath, { recursive: true });
-}
-
-fs.mkdirSync(newJsonsPath);
-
-// Create PDFs dir
-const newPdfsPath = path.join(newAssetsPath, 'pdfs');
-if (fs.existsSync(newPdfsPath)) {
-  fs.rmSync(newPdfsPath, { recursive: true });
-}
-
-fs.mkdirSync(newPdfsPath);
-
-const oldRoadmapsDirPath = path.join(__dirname, 'developer-roadmap/content/roadmaps');
-const newRoadmapsDirPath = path.join(__dirname, '../src/roadmaps');
-
-if (fs.existsSync(newRoadmapsDirPath)) {
-  fs.rmSync(newRoadmapsDirPath, { recursive: true });
-}
-
-fs.mkdirSync(newRoadmapsDirPath);
-
-const oldRoadmaps = fs
-  .readdirSync(oldRoadmapsDirPath)
-  .map((roadmapDirName) => path.join(oldRoadmapsDirPath, roadmapDirName));
-
-const orderInfo = {};
-const typeCounter = {
-  role: 1,
-  tool: 1,
-};
-
-// Calculate the sorting information for the roadmaps
-oldRoadmaps.forEach((oldRoadmapPath) => {
-  const roadmapId = path.basename(oldRoadmapPath).replace(/\d+-/g, '').toLowerCase();
-  const oldRoadmapMeta = require(path.join(oldRoadmapPath, 'meta.json'));
-
-  orderInfo[roadmapId] = typeCounter[oldRoadmapMeta.type];
-  typeCounter[oldRoadmapMeta.type] += 1;
-});
-
-// Iterate and create new roadmaps
-oldRoadmaps.forEach((oldRoadmapPath) => {
-  const roadmapId = path.basename(oldRoadmapPath).replace(/\d+-/g, '').toLowerCase();
-
-  const metaToMerge = roadmapMetas[roadmapId] ?? {};
-  const oldRoadmapMeta = require(path.join(oldRoadmapPath, 'meta.json'));
-  const isTextual = oldRoadmapMeta?.landingPath?.endsWith('.md');
-
-  const hasContentDir = fs.existsSync(path.join(oldRoadmapPath, 'content'));
-
-  const roadmapFileContent = isTextual
-    ? fs.readFileSync(path.join(oldRoadmapPath, oldRoadmapMeta.landingPath), 'utf8')
-    : '';
-
-  const roadmapFileContentWithUpdatedUrls = roadmapFileContent
-    .replace(/\[\!\[\]\((.+?\.png)\)\]\((.+?\.png)\)/g, '[![](/assets$1)](/assets$2)')
-    .replace(/\[\!\[\]\((.+?\.svg)\)\]\((.+?\.svg)\)/g, '[![](/assets$1)](/assets$2)')
-    .replace(/\[\!\[\]\((.+?\.svg)\)\]\((.+?\.png)\)/g, '[![](/assets$1)](/assets$2)')
-    .replace(/assetshttp\//g, 'http')
-    .replace(/assetshttps:\/\//g, 'https://')
-    .replace(/\/http/g, 'http')
-    .replace(/]\(\/roadmaps\/(.+?)\.png\)/g, '](/assets/roadmaps/$1.png)')
-    .replace(/]\(\/roadmaps\/(.+?)\.svg\)/g, '](/assets/roadmaps/$1.svg)')
-    .replace(/<iframe/g, '<iframe class="w-full aspect-video mb-5"')
-    .replace(/<iframe(.+?)\s?\/>/g, '<iframe$1></iframe>');
-
-  const hasJson = fs.existsSync(path.join(oldAssetsPath, `/project/${roadmapId}.json`));
-
-  const newRoadmapMeta = {
-    ...( hasJson ? { jsonUrl: `/jsons/${roadmapId}.json`} : {}),
-    pdfUrl: `/pdfs/${roadmapId}.pdf`,
-    order: orderInfo[roadmapId],
-    featuredTitle:
-      oldRoadmapMeta.featuredTitle === 'Software Design and Architecture'
-        ? 'Software Design'
-        : oldRoadmapMeta.featuredTitle,
-    featuredDescription: oldRoadmapMeta.featuredDescription,
-    title: oldRoadmapMeta.title,
-    description: oldRoadmapMeta.description,
-    isNew: oldRoadmapMeta.isNew,
-    hasTopics: hasContentDir,
-    ...metaToMerge,
-    seo: oldRoadmapMeta.seo,
-    relatedRoadmaps: oldRoadmapMeta.relatedRoadmaps,
-    sitemap: {
-      priority: 1,
-      changefreq: 'monthly',
-    },
-    tags: ['roadmap', 'main-sitemap', `${oldRoadmapMeta.type === 'tool' ? 'skill' : oldRoadmapMeta.type}-roadmap`],
-  };
-
-  const frontmatter = yaml.stringify(newRoadmapMeta);
-  const newRoadmapDirPath = path.join(newRoadmapsDirPath, roadmapId);
-  const newRoadmapFilePath = path.join(newRoadmapDirPath, `/${roadmapId}.md`);
-
-  fs.mkdirSync(newRoadmapDirPath);
-  fs.writeFileSync(newRoadmapFilePath, `---\n${frontmatter}---\n\n${roadmapFileContentWithUpdatedUrls}`);
-
-  const jsonFile = path.join(oldAssetsPath, oldRoadmapMeta.jsonUrl || '/unknown');
-  const pdfFile = path.join(oldAssetsPath, oldRoadmapMeta.pdfUrl || '/unknown');
-
-  if (fs.existsSync(jsonFile)) {
-    fs.copyFileSync(jsonFile, path.join(newJsonsPath, `${roadmapId}.json`));
-  }
-
-  if (fs.existsSync(pdfFile)) {
-    fs.copyFileSync(pdfFile, path.join(newPdfsPath, `${roadmapId}.pdf`));
-  }
-
-  // Copy the content directory
-  const oldRoadmapContentDir = path.join(oldRoadmapPath, 'content');
-  if (fs.existsSync(oldRoadmapContentDir)) {
-    fs.cpSync(oldRoadmapContentDir, path.join(newRoadmapDirPath, 'content'), { recursive: true });
-  }
-});
-
-const roadmapAssets = path.join(oldAssetsPath, 'roadmaps');
-if (fs.existsSync(roadmapAssets)) {
-  fs.cpSync(roadmapAssets, path.join(newAssetsPath, 'roadmaps'), { recursive: true });
-}

bin/sync-content.sh

@@ -1,30 +0,0 @@
-#!/usr/bin/env bash
-
-set -e
-
-# Change working directory to the directory of this script
-cd "$(dirname "$0")"
-
-if [ ! -d "./developer-roadmap" ]; then
-  git clone --depth 1 -b master git@github.com:kamranahmedse/developer-roadmap.git
-fi
-
-echo "Removing old directories"
-rm -rf ../src/videos
-rm -rf ../src/guides
-rm -rf ../src/roadmaps
-
-rm -rf ../public/jsons
-rm -rf ../public/pdfs
-
-echo "=== Migrating Roadmaps ==="
-node roadmap-migrator.cjs
-
-echo "=== Migrating Content ==="
-node content-migrator.cjs
-
-echo "=== Migrating Guides ==="
-node guide-migrator.cjs
-
-echo "=== Migrating Videos ==="
-node video-migrator.cjs

bin/video-migrator.cjs

@@ -1,58 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-const yaml = require('json-to-pretty-yaml');
-
-const contentDirPath = path.join(__dirname, './developer-roadmap/content');
-const videos = require('./developer-roadmap/content/videos.json');
-
-// Remove the old videos directory
-const newVideosDirPath = path.join(__dirname, '../src/videos');
-if (fs.existsSync(newVideosDirPath)) {
-  fs.rmSync(newVideosDirPath, { recursive: true });
-}
-
-fs.mkdirSync(newVideosDirPath);
-
-videos.forEach((video) => {
-  const { id: videoId } = video;
-
-  const originalVideoPath = path.join(
-    contentDirPath,
-    'videos',
-    `${videoId}.md`
-  );
-
-  const newVideoPath = path.join(__dirname, `../src/videos/${videoId}.md`);
-
-  const videoWithoutFrontmatter = fs.readFileSync(originalVideoPath, 'utf8');
-  fs.copyFileSync(originalVideoPath, newVideoPath);
-
-  const videoFrontMatter = yaml
-    .stringify({
-      title: video.title,
-      description: video.description,
-      duration: video.duration,
-      isNew: video.isNew,
-      date: video.createdAt.replace(/T.*/, ''),
-      author: {
-        name: 'Kamran Ahmed',
-        url: `https://twitter.com/kamranahmedse`,
-        imageUrl: `/authors/kamranahmedse.jpeg`,
-      },
-      sitemap: {
-        priority: 0.7,
-        changefreq: 'weekly',
-      },
-      tags: ['video', `video-sitemap`],
-    })
-    .replace(/date: "(.+?)"/, 'date: $1');
-
-  const videoWithIframeClass = videoWithoutFrontmatter
-    .replace(/<iframe/g, '<iframe class="w-full aspect-video mb-5"')
-    .replace(/<iframe(.+?)\s?\/>/g, '<iframe$1></iframe>');
-
-  const videoWithFrontmatter = `---\n${videoFrontMatter}---\n\n${videoWithIframeClass}`;
-
-  console.log(`Writing video ${videoId} to disk`);
-  fs.writeFileSync(newVideoPath, videoWithFrontmatter);
-});

components/about-header/index.js

@@ -0,0 +1,22 @@
+import { AboutHeaderWrap } from './style';
+import siteConfig from "content/site";
+
+const AboutHeader = () => (
+  <AboutHeaderWrap>
+    <div className="container container-small">
+      <div className="author-info">
+        <img className='author-img d-none d-sm-none d-md-block d-lg-block d-xl-block' src="/kamran.jpeg" />
+        <div className="author-msg">
+          <h1>Hello, I'm Kamran Ahmed.</h1>
+          <p>I created <span className='flow-black'>roadmap.sh</span> to help developers find their path if they are confused and help them grow in their career.</p>
+          <div className="author-links">
+            <a href={`https://twitter.com/${siteConfig.twitter}`} target="_blank">@kamranahmedse</a>
+            <a href="mailto:kamran@roadmap.sh">kamran@roadmap.sh</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </AboutHeaderWrap>
+);
+
+export default AboutHeader;

components/about-header/style.js

@@ -0,0 +1,49 @@
+import styled from 'styled-components';
+
+export const AboutHeaderWrap = styled.div`
+  text-align: left;
+  padding: 70px 0;
+  margin: 0 auto;
+  
+  .author-info {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+  }
+  
+  h1 {
+    font-weight: 700;
+  }
+  
+  p {
+    font-size: 20px;
+    color: #333;
+    font-weight: 400;
+    margin-bottom: 0;
+    line-height: 35px;
+  }
+  
+  a {
+    font-weight: 700;
+    color: #000;
+  }
+  
+  .author-img {
+    height: 160px;
+    margin-right: 25px;
+    margin-top: 8px;
+    border-radius: 9px;
+  }
+  
+  .author-links a {
+    display: inline-block;
+    margin-right: 5px;
+    background: #2d2d2d;
+    color: white;
+    padding: 5px 10px;
+    font-weight: 500;
+    margin-top: 12px;
+    border-radius: 5px;
+    text-decoration: none;
+  }
+`;

components/badges/index.js

@@ -0,0 +1,54 @@
+import styled from 'styled-components';
+
+export const BadgesList = styled.p`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 0;
+`;
+
+export const PrimaryBadge = styled.span`
+  font-size: 11px;
+  font-weight: 600;
+  background: #2929ff;
+  color: white;
+  padding: 2px 8px;
+  border-radius: 4px;
+  text-transform: uppercase;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 10px;
+  
+  svg {
+    height: 11px !important;
+    margin-right: 5px;
+    
+    &.fa-clock {
+      height: 10px !important;
+    }
+  }
+`;
+
+export const SecondaryBadge = styled(PrimaryBadge)`
+  background: #696969;
+  color: white;
+`;
+
+export const InfoBadge = styled(PrimaryBadge)`
+  background: #039640;
+  color: white;
+`;
+
+export const DarkBadge = styled(PrimaryBadge)`
+  background: #101010;
+  color: white;
+`;
+
+export const BadgeLink = styled.a`
+  text-decoration: none;
+  
+  &:hover {
+    text-decoration:none;
+  }
+`;

components/detailed-roadmap/index.js

@@ -0,0 +1,133 @@
+import { useState } from 'react';
+import classNames from 'classnames';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faFacebookSquare, faTwitterSquare, faRedditSquare, faGithubSquare } from '@fortawesome/free-brands-svg-icons'
+import {
+  PageHeader,
+  RoadmapMeta,
+  ShareRoadmap,
+  Sidebar,
+  Summary,
+  SummaryContainer,
+  MobileNavHeader,
+  SidebarButton,
+  MobileSidebar,
+  MobileSidebarWrap,
+  DesktopSidebarWrap,
+  PageTitle,
+  PageDetail
+} from './style';
+import { faBars } from '@fortawesome/free-solid-svg-icons'
+import { getFacebookShareUrl } from 'lib/url';
+import { ShareIcon } from 'components/share-icon';
+import { getRedditShareUrl, getTwitterShareUrl } from 'lib/url';
+import siteConfig from "content/site";
+import MdRenderer from 'components/md-renderer';
+
+const DetailedRoadmap = ({ roadmap }) => {
+  const [menuActive, setMenuState] = useState(false);
+  const {
+    sidebar = {},
+    page: currentPage = {},
+    author = {}
+  } = roadmap;
+
+  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 ${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}/summary`;
+
+            return (
+              <li className={classNames({ active: isActivePage || isSummaryPage })} key={page.url}>
+                <a href={ page.url }>
+                  <span className="bullet"></span>
+                  { page.title }
+                </a>
+              </li>
+            );
+          }) }
+        </ul>
+      </div>
+    );
+  });
+
+  const filePath = currentPage.path.replace(/^\//, '');
+  const RoadmapContent = require(`../../content/${filePath}`).default;
+
+  return (
+    <SummaryContainer>
+      <PageHeader className="border-top border-bottom text-center text-md-left">
+        <div className="container d-flex align-items-center flex-column flex-md-row">
+          <RoadmapMeta>
+            <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>
+          </RoadmapMeta>
+          <ShareRoadmap className="mt-2 mt-md-0">
+            <ShareIcon href={ siteConfig.url.repo } target="_blank">
+              <FontAwesomeIcon icon={ faGithubSquare } />
+            </ShareIcon>
+            <ShareIcon href={ getFacebookShareUrl({ text: roadmap.title, url: roadmap.url }) } target="_blank">
+              <FontAwesomeIcon icon={ faFacebookSquare } />
+            </ShareIcon>
+            <ShareIcon href={ getTwitterShareUrl({ text: roadmap.title, url: roadmap.url }) } target="_blank">
+              <FontAwesomeIcon icon={ faTwitterSquare } />
+            </ShareIcon>
+            <ShareIcon href={ getRedditShareUrl({ text: roadmap.title, url: roadmap.url }) } target="_blank">
+              <FontAwesomeIcon icon={ faRedditSquare } />
+            </ShareIcon>
+          </ShareRoadmap>
+        </div>
+      </PageHeader>
+
+      <MobileNavHeader className="border-bottom d-block d-md-none">
+        <div className="container">
+          <SidebarButton onClick={() => setMenuState((prevMenuActive) => !prevMenuActive)}>
+            <FontAwesomeIcon icon={ faBars } />
+            { currentPage.title }
+          </SidebarButton>
+        </div>
+        <MobileSidebarWrap className={classNames({ visible: menuActive })}>
+          <div className="container">
+            <MobileSidebar>
+              { roadmapPages }
+            </MobileSidebar>
+          </div>
+        </MobileSidebarWrap>
+      </MobileNavHeader>
+
+      <Summary className="container">
+        <DesktopSidebarWrap className="d-none d-md-block">
+          <Sidebar>
+            { roadmapPages }
+          </Sidebar>
+        </DesktopSidebarWrap>
+        <PageDetail>
+          <PageTitle>{ currentPage.title }</PageTitle>
+          <MdRenderer>
+            <RoadmapContent />
+          </MdRenderer>
+        </PageDetail>
+      </Summary>
+    </SummaryContainer>
+  )
+};
+
+export default DetailedRoadmap;

components/detailed-roadmap/style.js

@@ -0,0 +1,199 @@
+import styled from 'styled-components';
+
+export const SummaryContainer = styled.div``;
+
+export const Summary = styled.div`
+  text-align: left;
+  min-height: 400px;
+  display: flex;
+
+  .container {
+    position: relative;
+  }
+`;
+
+export const PageHeader = styled.div`
+  padding-top: 20px;
+  padding-bottom: 20px;
+
+  h3 {
+    margin-bottom: 4px;
+    font-weight: 600;
+    font-size: 21px;
+  }
+
+  p {
+    margin-bottom: 0;
+    font-size: 14px;
+    color: #696969;
+    
+    a {
+      color: #101010;
+    }
+  }
+`;
+
+export const RoadmapMeta = styled.div`
+  flex: 1;
+`;
+
+export const ShareRoadmap = styled.div`
+  display: flex;
+  align-items: center;
+
+  a {
+    margin-bottom: 0;
+    & + a {
+      margin-left: 5px;
+    }
+  }
+`;
+
+export const MobileNavHeader = styled.div`
+  padding: 10px 0;
+  display: flex;
+  align-items: center;
+  position: relative;
+`;
+
+export const SidebarButton = styled.button`
+  background: transparent;
+  border: none !important;
+  box-shadow: none !important;
+  outline: none !important;
+  -webkit-appearance: none;
+  display: flex;
+  align-items: center;
+  
+  svg {
+    margin-right: 10px;
+  }
+`;
+
+export const PageDetail = styled.div`
+  padding: 25px 0 100px;
+`;
+
+export const PageTitle = styled.h1`
+  font-size: 40px;
+  font-weight: 700;
+`;
+
+export const Sidebar = styled.div`
+  padding-bottom: 150px;
+
+  ul {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+  }
+  
+  .bullet {
+    display: inline-block;
+    margin-right: 7px;
+    width: 7px;
+    height: 7px;
+    min-width: 7px;
+    border-radius: 100%;
+    background: #efefef;
+    transform: translateX(-4px);
+    transition: background 0.5s ease;
+  }
+
+  
+  .links-group {
+    padding: 30px 0 10px;
+    width: 260px;
+
+    h3 {
+      font-size: 12px;
+      font-weight: 600;
+      text-transform: uppercase;
+      padding-left: 20px;
+    }
+  }
+  
+  .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;
+
+    a {
+      font-size: 14px;
+      font-weight: normal;
+      color: #696969;
+    }
+    
+    .bullet {
+      display: inline-block;
+      margin-right: 12px;
+      width: 7px;
+      height: 7px;
+      min-width: 7px;
+      border-radius: 100%;
+      background: #efefef;
+      transform: translateX(-4px);
+      transition: background 0.5s ease;
+    }
+    
+    &.active a {
+      color: #101010;
+    }
+    
+    &.active .bullet {
+      background: #101010;
+    }
+  }
+`;
+
+export const DesktopSidebarWrap = styled.div`
+  border-left: 1px solid #efefef;
+  
+  ${Sidebar} {
+    position: sticky;
+    top: 0;
+    background: white;
+  }
+`;
+
+export const MobileSidebarWrap = styled.div`
+  position: absolute;
+  z-index: 999;
+  background: white;
+  width: 100%;
+  left: 0;
+  bottom: 100%;
+  overflow-y: scroll;
+  box-shadow: rgba(0, 0, 0, 0.1) 0 10px 20px;
+  top: calc(100% + 1px);
+  transition: bottom 0.5s ease 0s;
+
+  &.visible {
+    bottom: -50vh;
+  }
+`;
+
+export const MobileSidebar = styled(Sidebar)`
+  border-left: 1px solid #efefef;
+  margin-left: 12px;
+  padding-bottom: 20px;
+
+  .links-group {
+    width: auto;  
+  }
+  
+  .progress-badge {
+    position: relative;
+    top: -2px;
+    margin-left: 5px;
+  }
+`;

components/faq-list/index.js

@@ -0,0 +1,16 @@
+import { FaqContainer } from './style';
+import MdRenderer from 'components/md-renderer';
+
+const AboutPage = require(`../../content/pages/about.md`).default;
+
+const FaqList = () => (
+  <FaqContainer className='border-top bg-light'>
+    <div className="container container-small">
+      <MdRenderer>
+        <AboutPage />
+      </MdRenderer>
+    </div>
+  </FaqContainer>
+);
+
+export default FaqList;

components/faq-list/style.js

@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+
+export const FaqContainer = styled.div`
+  padding: 40px 0;
+  
+  h4 {
+    margin-top: 30px;
+    font-weight: 700;
+  }
+  
+  h4:first-child {
+    margin-top: 0;  
+  }
+
+  p {
+    color: #333;
+  }
+
+  p:last-child {
+    margin-bottom: 0;
+  }
+
+  .container {
+  }
+`;

components/featured-content/guides.js

@@ -0,0 +1,25 @@
+import Link from 'next/link';
+import { FeaturedContentWrap } from './style';
+import FeaturedGuide from 'components/featured-guide';
+import { getFeaturedGuides } from 'lib/guide';
+
+const FeaturedGuides = () => (
+  <FeaturedContentWrap className="featured-content-wrap">
+    <div className="container">
+      <p className='border-through featured-separator'>
+          <span>
+            Guides mostly visited by the community&nbsp;
+            <a href="/guides" className="dark-link d-none d-sm-none d-md-inline d-xl-inline">View all Guides &rarr;</a>
+          </span>
+      </p>
+      <div className="swim-lane row">
+        { getFeaturedGuides()
+          .map(guide => (
+            <FeaturedGuide guide={ guide } key={ guide.url } />
+          )) }
+      </div>
+    </div>
+  </FeaturedContentWrap>
+);
+
+export default FeaturedGuides;

components/featured-content/index.js

@@ -0,0 +1,16 @@
+import { FeaturedWrap } from './style';
+import FeaturedGuides from './guides';
+import FeaturedRoadmaps from './roadmaps';
+
+const FeaturedContent = (props) => (
+  <FeaturedWrap className="border-top bg-light">
+    <FeaturedRoadmaps />
+    <FeaturedGuides />
+  </FeaturedWrap>
+);
+
+FeaturedContent.defaultProps = {
+  className: '',
+};
+
+export default FeaturedContent;

components/featured-content/roadmaps.js

@@ -0,0 +1,27 @@
+import { FeaturedContentWrap } from './style';
+import roadmaps from 'content/roadmaps';
+import FeaturedRoadmap from 'components/featured-roadmap';
+
+const FeaturedRoadmaps = () => (
+  <FeaturedContentWrap className="featured-content-wrap">
+    <div className="container">
+      <div className="featured-head">
+        <p className="border-through featured-separator">
+            <span>
+              Roadmaps mostly visited by the community&nbsp;
+              <a href='/roadmaps' className="dark-link d-none d-sm-none d-md-inline d-xl-inline">View all Roadmaps &rarr;</a>
+            </span>
+        </p>
+      </div>
+      <div className="swim-lane row">
+        { roadmaps
+          .filter(({ featured }) => featured)
+          .map(roadmap => (
+            <FeaturedRoadmap roadmap={ roadmap } key={ roadmap.url } />
+          )) }
+      </div>
+    </div>
+  </FeaturedContentWrap>
+);
+
+export default FeaturedRoadmaps;

components/featured-content/style.js

@@ -0,0 +1,110 @@
+import styled from 'styled-components';
+
+export const FeaturedWrap = styled.div`
+  padding: 30px 0 50px;
+`;
+
+export const FeaturedContentWrap = styled.div`
+  .featured-head {
+    text-align: center;
+    display: block;
+
+    h3 {
+      font-weight: 700;
+      font-size: 35px;
+      margin-bottom: 30px;
+    }
+  }
+
+  .featured-separator {
+    font-size: 16px;
+    margin-bottom: 40px;
+    margin-top: 25px;
+    color: #999;
+
+    span {
+      background: #f8f9fa;
+    }
+
+    a {
+      background: black;
+      color: white;
+      padding: 3px 8px;
+      border-radius: 6px;
+      font-size: 14px;
+      text-decoration: none;
+      margin-left: 5px;
+    }
+  }
+
+  .swim-lane {
+    .featured-block {
+    }
+  }
+
+  .guide-item {
+    border-bottom: 1px solid #dee2e6;
+    padding: 15px 10px;
+
+    p {
+      margin-bottom: 0;
+      font-size: 15px;
+      color: #999;
+    }
+
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  .journey-block {
+    a {
+      border: 1px solid #f7f7f7;
+      display: block;
+      text-decoration: none;
+      color: #000000;
+      background: #ffffff;
+      box-shadow: rgba(0, 0, 0, 0.12) 0 5px 10px;
+      transition: box-shadow 0.2s ease 0s;
+      cursor: pointer;
+      margin-bottom: 32px;
+      border-radius: 0 0 10px 10px;
+
+      &:hover {
+        box-shadow: rgba(0, 0, 0, 0.12) 0 30px 60px;
+
+        img {
+          filter: grayscale(0);
+        }
+      }
+    }
+
+    .journey-meta {
+      padding: 18px 25px 20px;
+
+      h4 {
+        line-height: 27px;
+        font-weight: 600;
+        margin-bottom: 0;
+        font-size: 18px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        flex: 0 0 auto;
+        overflow: hidden;
+      }
+
+      p {
+        font-size: 15px;
+        line-height: 25px;
+        color: #999999;
+        margin-bottom: 0;
+      }
+    }
+
+    img {
+      width: 100%;
+      filter: grayscale(1);
+      border-radius: 10px 10px 0 0;
+    }
+  }
+`;

components/featured-guide/index.js

@@ -0,0 +1,25 @@
+import formatDate from 'date-fns/format';
+
+import { Author, AuthorImage, AuthorName, BlockLink, BlockMeta, BlockSubtitle, BlockTitle, PublishDate } from './style';
+import { findByUsername } from 'lib/author';
+
+const FeaturedGuide = ({ guide }) => {
+  const author = findByUsername(guide.author) || {};
+  return (
+    <div className='col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 grid-item-container'>
+      <BlockLink href={guide.url}>
+        <BlockTitle>{guide.title}</BlockTitle>
+        <BlockSubtitle>{guide.featuredDescription || guide.description}</BlockSubtitle>
+        <BlockMeta>
+          <Author>
+            <AuthorImage src={author.picture} />
+            <AuthorName>{author.name}</AuthorName>
+          </Author>
+          <PublishDate>{formatDate(new Date(guide.createdAt), 'MMMM d, yyyy')}</PublishDate>
+        </BlockMeta>
+      </BlockLink>
+    </div>
+  );
+};
+
+export default FeaturedGuide;

components/featured-guide/style.js

@@ -0,0 +1,65 @@
+import styled from 'styled-components';
+
+export const BlockLink = styled.a`
+  border: 1px solid #f7f7f7;
+  display: block;
+  text-decoration: none;
+  color: #000000;
+  background: #ffffff;
+  padding: 25px 25px 22px;
+  border-radius: 10px;
+  box-shadow: rgba(0, 0, 0, 0.12) 0 5px 10px;
+  transition: box-shadow 0.2s ease 0s;
+  cursor: pointer;
+  margin-bottom: 32px;
+  
+  &:hover {
+    text-decoration: none;
+    color: #000000;
+    box-shadow: rgba(0, 0, 0, 0.12) 0 30px 60px;
+  }
+`;
+
+export const BlockTitle = styled.h4`
+  line-height: 27px;
+  font-weight: 600;
+  font-size: 22px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  flex: 0 0 auto;
+  overflow: hidden;
+`;
+
+export const BlockSubtitle = styled.p`
+  font-size: 15px;
+  line-height: 25px;
+  color: #999999;
+  margin-bottom: 0;
+`;
+
+export const BlockMeta = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 19px;
+`;
+
+export const PublishDate = styled.time`
+  font-size: 13px;
+  color: #999;
+`;
+
+export const Author = styled.div`
+  display: flex;
+  align-items: center;
+  font-size: 15px;
+  color: #999;
+`;
+
+export const AuthorImage = styled.img`
+  height: 22px;
+  width: 22px;
+  border-radius: 100%;
+  margin-right: 10px;
+`;
+export const AuthorName = styled.div``;

components/featured-roadmap/index.js

@@ -0,0 +1,12 @@
+import { BlockLink, BlockSubtitle, BlockTitle } from './style';
+
+const FeaturedRoadmap = ({ roadmap }) => (
+  <div className='col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 grid-item-container'>
+    <BlockLink href={roadmap.url}>
+      <BlockTitle>{roadmap.title}</BlockTitle>
+      <BlockSubtitle>{roadmap.featuredDescription || roadmap.description}</BlockSubtitle>
+    </BlockLink>
+  </div>
+);
+
+export default FeaturedRoadmap;

components/featured-roadmap/style.js

@@ -0,0 +1,38 @@
+import styled from 'styled-components';
+
+export const BlockLink = styled.a`
+  border: 1px solid #f7f7f7;
+  display: block;
+  text-decoration: none;
+  color: #000000;
+  background: #ffffff;
+  padding: 26px 25px 25px;
+  border-radius: 10px;
+  box-shadow: rgba(0, 0, 0, 0.12) 0 5px 10px;
+  transition: box-shadow 0.2s ease 0s;
+  cursor: pointer;
+  margin-bottom: 32px;
+  
+  &:hover {
+    text-decoration: none;
+    color: #000000;
+    box-shadow: rgba(0, 0, 0, 0.12) 0 30px 60px;
+  }
+`;
+
+export const BlockTitle = styled.h4`
+  line-height: 27px;
+  font-weight: 600;
+  font-size: 22px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  flex: 0 0 auto;
+  overflow: hidden;
+`;
+
+export const BlockSubtitle = styled.p`
+  font-size: 15px;
+  line-height: 25px;
+  color: #999999;
+  margin-bottom: 0;
+`;

components/guide-body/index.js

@@ -0,0 +1,23 @@
+import MdRenderer from 'components/md-renderer'
+import SharePage from 'components/share-page';
+import { GuideBodyWrap } from './style';
+
+const GuideBody = ({ guide }) => {
+  const GuideContent = require(`../../content/guides/${guide.fileName}.md`).default;
+  return (
+    <GuideBodyWrap>
+      <MdRenderer>
+        <GuideContent />
+        {
+          guide.author && <SharePage
+            title={ guide.title }
+            url={ guide.url }
+            twitterUsername={ guide.author.twitter }
+          />
+        }
+      </MdRenderer>
+    </GuideBodyWrap>
+  );
+};
+
+export default GuideBody;

components/guide-body/style.js

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+export const GuideBodyWrap = styled.div`
+  position: relative;
+  max-width: 750px;
+  margin: 0 auto;
+  padding: 0 20px;
+  min-height: 300px;
+  
+  p:first-child, h1, h2, h3, h4, h5, h6, img, blockquote {
+    margin-top: 0;
+  }
+`;

components/guide-footer/index.js

@@ -0,0 +1,83 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faFacebookSquare, faGithub, faHackerNewsSquare, faRedditSquare, faTwitter, faTwitterSquare } from '@fortawesome/free-brands-svg-icons'
+import { getContributionUrl } from "lib/guide";
+import {
+  getTwitterUrl,
+  getTwitterShareUrl,
+  getFacebookShareUrl,
+  getRedditShareUrl,
+  getHnShareUrl
+} from "lib/url";
+import {
+  AuthorBio,
+  AuthorImg,
+  AuthorInfoWrap,
+  AuthorMeta,
+  ContributeIcon,
+  FooterBg,
+  FooterContainer,
+  FooterWrap,
+  ShareIcons,
+  ShareWrap
+} from './style';
+
+
+const GuideFooter = ({
+  guide,
+  guide: {
+    author = {}
+  } = {}
+}) => (
+  <FooterWrap>
+    <FooterBg className="border-top">
+      <FooterContainer>
+        <ShareWrap>
+          <ContributeIcon>
+            <a href={ getContributionUrl(guide) } target="_blank">
+              <span className="d-none d-sm-none d-md-inline d-lg-inline d-xl-inline">Improve this Guide </span>
+              <span className="d-inline d-sm-inline d-md-none d-lg-none d-xl-none">Contribute </span>
+              <FontAwesomeIcon icon={faGithub}/>
+            </a>
+          </ContributeIcon>
+          <ContributeIcon hasMargins>
+            <a href={ getTwitterUrl(author.twitter) } target="_blank">
+              <span className="d-none d-sm-none d-md-inline d-lg-inline d-xl-inline">Follow the author </span>
+              <span className="d-inline d-sm-inline d-md-none d-lg-none d-xl-none">Author </span>
+              <FontAwesomeIcon icon={faTwitter}/>
+            </a>
+          </ContributeIcon>
+          <ShareIcons>
+            <span className="d-none d-sm-none d-md-none d-lg-inline d-xl-inline">Help spread the word</span>
+            <span className="d-inline d-sm-inline d-md-inline d-lg-none d-xl-none">Share</span>
+            <a href={ getTwitterShareUrl({ text: `${guide.title} by @${author.twitter}`, url: guide.url })} target="_blank">
+              <FontAwesomeIcon icon={faTwitterSquare}/>
+            </a>
+            <a href={ getFacebookShareUrl({ text: guide.title, url: guide.url }) } target="_blank">
+              <FontAwesomeIcon icon={faFacebookSquare}/>
+            </a>
+            <a href={ getRedditShareUrl({ text: guide.title, url: guide.url })} target="_blank">
+              <FontAwesomeIcon icon={faRedditSquare}/>
+            </a>
+            <a href={ getHnShareUrl({ text: guide.title, url: guide.url })} target="_blank">
+              <FontAwesomeIcon icon={faHackerNewsSquare}/>
+            </a>
+          </ShareIcons>
+        </ShareWrap>
+      </FooterContainer>
+    </FooterBg>
+
+    <FooterBg className="border-top">
+      <FooterContainer>
+        <AuthorInfoWrap>
+          <AuthorImg src={ author.picture } alt={ author.name }/>
+          <AuthorMeta>
+            <h4><a href={ getTwitterUrl(author.twitter) } target="_blank">{ author.name }</a></h4>
+            <AuthorBio>{ author.bio }</AuthorBio>
+          </AuthorMeta>
+        </AuthorInfoWrap>
+      </FooterContainer>
+    </FooterBg>
+  </FooterWrap>
+);
+
+export default GuideFooter;

components/guide-footer/style.js

@@ -0,0 +1,123 @@
+import styled from 'styled-components';
+
+export const FooterWrap = styled.div`
+  display: block;
+  margin-top: 50px;
+`;
+
+export const FooterContainer = styled.div`
+  max-width: 750px;
+  margin: 0 auto;
+  padding: 0 20px;
+`;
+
+export const FooterBg = styled.div`
+`;
+
+export const ShareWrap = styled.div`
+  padding: 17px 0px;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+
+  a {
+    display: flex;  
+    align-items: center;
+    color: #101010;
+
+    svg {
+      height: 18px !important;
+      width: 18px !important;
+      color: #757575;
+      margin-left: 7px;
+      transition: all 0.2s ease;
+    }
+
+    &:hover {
+      svg {
+        color: #101010;
+      }
+    }
+  }
+`;
+
+
+export const ContributeIcon = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: ${props => props.hasMargins ? '0 30px' : '0'};
+  
+  span {
+    margin-right: 4px;
+  }
+  
+  a {
+    color: #757575;
+    font-size: 14px;
+    transition: all 0.2s ease;
+      
+    &:hover {
+      color: #101010;
+    }
+  }
+`;
+
+export const ShareIcons = styled.div`
+  display: flex;
+  align-items: center;
+  color: #757575;
+  font-size: 14px;
+
+  span {
+    margin-right: 4px;
+  }
+`;
+
+export const AuthorInfoWrap = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 40px 0;
+
+  h4 {
+    position: relative;
+    font-size: 22px;
+    margin: 10px 0;
+    line-height: 17px;
+
+    a {
+      font-weight: 700;
+      color: #101010;
+    }
+  }
+  
+  .author-description {
+    margin-bottom: 14px;
+  }
+`;
+
+export const AuthorBio = styled.p`
+  font-size: 15px;
+  line-height: 24px;
+  color: #757575;
+  margin-bottom: 0;
+  
+  a {
+    font-weight: 500;
+  }
+`;
+
+export const AuthorImg = styled.img`
+  border-radius: 100%;
+  height: 100px !important;
+  width: 100px !important;
+  margin-right: 22px;
+  display: block;
+`;
+
+export const AuthorMeta = styled.div`
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  flex: 1;
+`;

components/guide-header/index.js

@@ -0,0 +1,57 @@
+import formatDate from 'date-fns/format'
+import {
+  ActionItems,
+  AuthorImage,
+  EditGuide,
+  GuideAuthor,
+  GuideDate,
+  GuideMeta,
+  GuideSubtitle,
+  GuideTitle,
+  HeaderWrap,
+} from './style';
+import { getContributionUrl } from "lib/guide";
+import { getTwitterUrl } from "lib/url";
+import { faClock, faEnvelope, faArrowLeft } from '@fortawesome/free-solid-svg-icons';
+import { BadgeLink, BadgesList, PrimaryBadge, SecondaryBadge, DarkBadge } from 'components/badges';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+const GuideHeader = ({
+ guide,
+ guide: {
+   author = {}
+ } = {}
+}) => (
+  <HeaderWrap className="border-bottom">
+    <GuideMeta>
+      <GuideAuthor href={ getTwitterUrl(author.twitter) } target="_blank">
+        <AuthorImage src={ author.picture } />
+        { author.name }
+      </GuideAuthor>
+      &middot;
+      <GuideDate>{ formatDate(new Date(guide.createdAt), 'EEEE, MMMM d yyyy') }</GuideDate>
+      &middot;
+      <EditGuide href={ getContributionUrl(guide) } target="_blank">Improve this Guide</EditGuide>
+    </GuideMeta>
+    <GuideTitle>{ guide.title }</GuideTitle>
+    <GuideSubtitle>{ guide.description }</GuideSubtitle>
+    <ActionItems>
+      <BadgesList className="mt-4">
+        <BadgeLink href="/guides">
+          <SecondaryBadge>
+            <FontAwesomeIcon icon={faArrowLeft}/>
+            Other Guides
+          </SecondaryBadge>
+        </BadgeLink>
+        <BadgeLink href="/signup">
+          <PrimaryBadge>
+            <FontAwesomeIcon icon={faEnvelope}/>
+            Send me Updates
+          </PrimaryBadge>
+        </BadgeLink>
+      </BadgesList>
+    </ActionItems>
+  </HeaderWrap>
+);
+
+export default GuideHeader;

components/guide-header/style.js

@@ -0,0 +1,54 @@
+import styled from 'styled-components';
+
+export const HeaderWrap = styled.div`
+  padding: 80px 15px 45px;
+  text-align: center;
+  margin-bottom: 35px;
+`;
+
+export const GuideTitle = styled.h1`
+  font-weight: 700;
+  font-size: 46px;
+  margin: 12px 0;
+`;
+
+export const GuideSubtitle = styled.p`
+  margin-bottom: 0;
+  font-size: 16px;
+  color: #444;
+`;
+
+export const GuideMeta = styled.p`
+  margin-bottom: 0;
+  color: #757575;
+  font-size: 13px;
+  font-weight: 400;
+`;
+
+export const GuideDate = styled.span`
+  margin-left: 7px;
+  margin-right: 7px;
+`;
+
+export const GuideAuthor = styled.a`
+  margin-right: 7px;
+  font-weight: 500;
+  color: #101010;
+  
+  &:hover {
+    color: #101010;
+  }
+`;
+
+export const AuthorImage = styled.img`
+  width: 22px;
+  height: 22px;
+  border-radius: 100%;
+  margin-right: 10px;
+`;
+
+export const EditGuide = styled.a`
+  margin-left: 7px;
+`;
+
+export const ActionItems = styled.div``;

components/helmet/index.js

@@ -0,0 +1,74 @@
+import NextHead from 'next/head';
+import siteConfig from 'content/site';
+
+const prepareTitle = (givenTitle) => {
+  return givenTitle || siteConfig.title;
+};
+
+const prepareDescription = (givenDescription) => {
+  return givenDescription || siteConfig.description;
+};
+
+// noinspection JSUnresolvedLibraryURL
+const Helmet = (props) => (
+  <NextHead>
+    <meta charSet='UTF-8' />
+
+    <title>{ prepareTitle(props.title) }</title>
+    <meta name='description' content={ prepareDescription(props.description) } />
+
+    <meta name="author" content={ siteConfig.author } />
+    <meta name="keywords" content={ props.keywords ? props.keywords.join(',') : siteConfig.keywords.join(',') } />
+
+    <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0, maximum-scale=3.0, minimum-scale=1.0" />
+    { props.canonical && <link rel="canonical" href={ props.canonical } /> }
+    <meta httpEquiv="Content-Language" content="en" />
+
+    <meta property="og:title" content={ prepareTitle(props.title) } />
+    <meta property="og:description" content={ prepareDescription(props.description) } />
+    <meta property="og:image" content={ `${siteConfig.url.web}${siteConfig.logoSquare}` } />
+    <meta property="og:url" content={ siteConfig.url.web } />
+    <meta property="og:type" content="website" />
+    <meta property="article:publisher" content={ `https://facebook.com/${siteConfig.facebook}` } />
+    <meta property="og:site_name" content={ siteConfig.name } />
+    <meta property="article:author" content={ siteConfig.author } />
+
+    <meta name="twitter:card" content="summary" />
+    <meta name="twitter:site" content={ `@${siteConfig.twitter}` } />
+    <meta name="twitter:title" content={ prepareTitle(props.title) } />
+    <meta name="twitter:description" content={ prepareDescription(props.description) } />
+    <meta name="twitter:image" content={ `${siteConfig.url.web}${siteConfig.logoSquare}` } />
+    <meta name="twitter:image:alt" content="roadmap.sh" />
+
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/manifest/apple-touch-icon.png" />
+    <meta name="msapplication-TileColor" content="#101010" />
+    <meta name="theme-color" content="#848a9a" />
+
+    <link rel="manifest" href="/manifest/manifest.json" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/manifest/icon32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/manifest/icon16.png" />
+    <link rel="shortcut icon" href="/manifest/favicon.ico" type="image/x-icon" />
+    <link rel="icon" href="/manifest/favicon.ico" type="image/x-icon" />
+
+    { /* Global Site Tag (gtag.js) - Google Analytics */ }
+    { process.env.GA_SECRET && (
+      <>
+        <script async src={ `https://www.googletagmanager.com/gtag/js?id=${process.env.GA_SECRET}` } />
+        <script dangerouslySetInnerHTML={{
+          __html: `
+            window.dataLayer = window.dataLayer || [];
+            function gtag(){dataLayer.push(arguments);}
+            gtag('js', new Date());
+            gtag('config', '${process.env.GA_SECRET}');
+          `,
+        }} />
+      </>
+    )}
+
+  </NextHead>
+);
+
+export default Helmet;

components/hero-section/index.js

@@ -0,0 +1,13 @@
+import Link from 'next/link';
+import { HeroSectionWrap } from './style';
+
+const HeroSection = () => (
+  <HeroSectionWrap>
+    <div className="container">
+      <h1>Developer Roadmaps</h1>
+      <p>Community driven roadmaps, articles and resources for developers. <Link href="/signup"><a>Sign up</a></Link> for occasional updates on new roadmaps, updates and guides</p>
+    </div>
+  </HeroSectionWrap>
+);
+
+export default HeroSection;

components/hero-section/style.js

@@ -0,0 +1,30 @@
+import styled from 'styled-components';
+
+export const HeroSectionWrap = styled.div`
+  text-align: center;
+  padding: 70px 20px;
+  margin: 0 auto;
+
+  .container {
+    max-width: 800px;
+  }
+
+  h1 {
+    font-size: 70px;
+    font-weight: 700;
+    margin-bottom: 25px;
+  }
+
+  p {
+    font-size: 20px;
+    color: #333;
+    font-weight: 400;
+    margin-bottom: 0;
+    line-height: 35px;
+  }
+
+  a {
+    font-weight: 700;
+    color: #000;
+  }
+`;

components/icon-row-block/index.js

@@ -0,0 +1,15 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+import RowBlock from 'components/row-block';
+import { SubmitText, SubmitWrap } from './style';
+
+const IconRowBlock = ({ url, icon, text, openExternal=false }) => (
+  <RowBlock url={ url } openExternal={openExternal}>
+    <SubmitWrap>
+      <FontAwesomeIcon icon={ icon } />
+      <SubmitText>{ text }</SubmitText>
+    </SubmitWrap>
+  </RowBlock>
+);
+
+export default IconRowBlock;

components/icon-row-block/style.js

@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+
+export const SubmitWrap = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    height: 25px;
+    color: #d6d6d6;
+  }
+`;
+
+export const SubmitText = styled.p`
+  margin-bottom: 0;
+  color: dimgrey;
+  margin-top: 8px;
+`;

components/icons/facebook.svg

@@ -0,0 +1,3 @@
+<svg width="29" height="29">
+    <path d="M23.2 5H5.8a.8.8 0 0 0-.8.8V23.2c0 .44.35.8.8.8h9.3v-7.13h-2.38V13.9h2.38v-2.38c0-2.45 1.55-3.66 3.74-3.66 1.05 0 1.95.08 2.2.11v2.57h-1.5c-1.2 0-1.48.57-1.48 1.4v1.96h2.97l-.6 2.97h-2.37l.05 7.12h5.1a.8.8 0 0 0 .79-.8V5.8a.8.8 0 0 0-.8-.79"></path>
+</svg>

components/icons/github.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" aria-label="GitHub" role="img" viewBox="0 0 512 512" width="22px" height="20px">
+    <rect width="512" height="512" rx="15%"/>
+    <path fill="#fff" d="M335 499c14 0 12 17 12 17H165s-2-17 12-17c13 0 16-6 16-12l-1-50c-71 16-86-28-86-28-12-30-28-37-28-37-24-16 1-16 1-16 26 2 40 26 40 26 22 39 59 28 74 22 2-17 9-28 16-35-57-6-116-28-116-126 0-28 10-51 26-69-3-6-11-32 3-67 0 0 21-7 70 26 42-12 86-12 128 0 49-33 70-26 70-26 14 35 6 61 3 67 16 18 26 41 26 69 0 98-60 120-117 126 10 8 18 24 18 48l-1 70c0 6 3 12 16 12z"/>
+</svg>

components/icons/link.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true">
+    <path fill-rule="evenodd"
+          d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path>
+</svg>

components/icons/twitter.svg

@@ -0,0 +1,3 @@
+<svg width="29" height="29">
+    <path d="M22.05 7.54a4.47 4.47 0 0 0-3.3-1.46 4.53 4.53 0 0 0-4.53 4.53c0 .35.04.7.08 1.05A12.9 12.9 0 0 1 5 6.89a5.1 5.1 0 0 0-.65 2.26c.03 1.6.83 2.99 2.02 3.79a4.3 4.3 0 0 1-2.02-.57v.08a4.55 4.55 0 0 0 3.63 4.44c-.4.08-.8.13-1.21.16l-.81-.08a4.54 4.54 0 0 0 4.2 3.15 9.56 9.56 0 0 1-5.66 1.94l-1.05-.08c2 1.27 4.38 2.02 6.94 2.02 8.3 0 12.86-6.9 12.84-12.85.02-.24 0-.43 0-.65a8.68 8.68 0 0 0 2.26-2.34c-.82.38-1.7.62-2.6.72a4.37 4.37 0 0 0 1.95-2.51c-.84.53-1.81.9-2.83 1.13z"></path>
+</svg>

components/link/badge-link.js

@@ -0,0 +1,9 @@
+export function BadgeLink({ target='_blank', variant ='success', badgeText, href, children }) {
+  return (
+    <p className='mb-0'>
+      <a href={href} target={ target }>
+        <span style={{ position: 'relative', top: '-2px'}} className={`badge badge-${variant}`}>{badgeText}</span> { children }
+      </a>
+    </p>
+  );
+}

components/link/index.js

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+export const StrongLink  = styled.a`
+  border-bottom: 2px solid currentColor;
+  position: relative;
+  transition: background-color 120ms;
+  text-decoration: none;
+  font-weight: 600;
+  
+  &:hover {
+    text-decoration: none;
+  }
+`;

components/mark/index.js

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+export const Mark = styled.span`
+  background: #1b1e21;
+  color: #fff;
+  display: inline-block;
+  font-size: 18px;
+  font-weight: 600;
+  margin: 0 4px;
+  padding: 0 6px 0 7px;
+`;

components/md-renderer/index.js

@@ -0,0 +1,10 @@
+import { MDXProvider } from '@mdx-js/react';
+import MdxComponents from './mdx-components';
+
+const MdRenderer = (props) => (
+  <MDXProvider components={ MdxComponents }>
+    { props.children }
+  </MDXProvider>
+);
+
+export default MdRenderer;

components/md-renderer/mdx-components/a.js

@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+
+const Link = styled.a`
+  font-weight: 600;
+`;
+
+const EnrichedLink = props => {
+  // Is external URL or is a media URL
+  const isExternalUrl = /(^http(s)?:\/\/)|(\.(png|svg|jpeg|jpg)$)/.test(props.href);
+
+  return (
+    <Link href={ props.href } target={ isExternalUrl ? '_blank' : '_self' }>
+      { props.children }
+    </Link>
+  );
+};
+
+export default EnrichedLink;

components/md-renderer/mdx-components/blockquote.js

@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+
+const BlockQuote = styled.blockquote`
+  padding: 16px 20px;
+  position: relative;
+  background: #e8e8e8;
+  border-radius: 5px;
+
+  h1, h2, h3, h4, h5, h6 {
+    margin-top: 0;
+  }
+  
+  p + h4 {
+    margin-top: 15px;
+  }
+
+  p {
+    margin: 0;
+    
+    & + p {
+    margin-top: 10px;
+    }
+  }
+`;
+
+export default BlockQuote;

components/md-renderer/mdx-components/heading.js

@@ -0,0 +1,77 @@
+import styled from 'styled-components';
+import Link from 'components/icons/link.svg';
+
+const linkify = (Component) => {
+  return (props) => {
+    const text = props.children;
+    const id = text.toLowerCase && text
+      .toLowerCase()
+      .replace(/[^\x00-\x7F]/g, '')
+      .replace(/\s+/g, '-')
+      .replace(/[?!]/g, '');
+
+    return (
+      <Component id={ id }>
+        <HeaderLink href={ `#${id}` }>
+          <Link />
+        </HeaderLink>
+        { props.children }
+      </Component>
+    );
+  };
+};
+
+const HeaderLink = styled.a`
+  position: absolute;
+  top: 0;
+  left: -25px;
+  width: 25px;
+  display: none;
+  height: 100%;
+  align-items: center;
+  justify-content: flex-start;
+`;
+
+const H1 = styled.h1`
+  position: relative;
+  font-size: 42px;
+  font-weight: 700;
+  margin: 32px 0 10px !important;
+  
+  &:hover ${HeaderLink} {
+    display: flex;
+  }
+`;
+
+const H2 = styled(H1).attrs({ as: 'h2' })`
+  font-size: 32px;
+`;
+
+const H3 = styled(H1).attrs({ as: 'h3' })`
+  margin: 22px 0 8px;
+  font-size: 30px;
+`;
+
+const H4 = styled(H1).attrs({ as: 'h4' })`
+  margin: 18px 0 8px;
+  font-size: 24px;
+`;
+
+const H5 = styled(H1).attrs({ as: 'h5' })`
+  margin: 14px 0 8px;
+  font-size: 18px;
+`;
+
+const H6 = styled(H1).attrs({ as: 'h6' })`
+  margin: 12px 0 8px;
+  font-size: 18px;
+`;
+
+export const Headings = {
+  h1: linkify(H1),
+  h2: linkify(H2),
+  h3: linkify(H3),
+  h4: linkify(H4),
+  h5: linkify(H5),
+  h6: linkify(H6),
+};

components/md-renderer/mdx-components/iframe.js

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+export const IFrame = styled.iframe`
+  display: block;
+  width: 100%;
+  border: none;
+  margin: 30px auto;
+`;

components/md-renderer/mdx-components/img.js

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+export const Img = styled.img`
+  max-width: 100%;
+  margin: 25px auto;
+  display: block;
+`;

components/md-renderer/mdx-components/index.js

@@ -0,0 +1,23 @@
+import P from './p';
+import { Headings } from './heading';
+import { Pre } from './pre';
+import BlockQuote from './blockquote';
+import { Table } from './table';
+import { IFrame } from './iframe';
+import { Img } from './img';
+import EnrichedLink from './a';
+import { BadgeLink } from '../../link/badge-link';
+
+const MdxComponents = {
+  p: P,
+  ...Headings,
+  pre: Pre,
+  blockquote: BlockQuote,
+  a: EnrichedLink,
+  table: Table,
+  iframe: IFrame,
+  img: Img,
+  BadgeLink: BadgeLink
+};
+
+export default MdxComponents;

components/md-renderer/mdx-components/p.js

@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+
+const P = styled.p`
+  color: inherit;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 26px;
+  margin: 0 0 12px;
+  
+  img + em { 
+    text-align: center;
+    color: #666666;
+    font-style: normal;
+    font-size: 14px;
+    margin: 5px 0 10px;
+    display: block;
+  } 
+`;
+
+export default P;

components/md-renderer/mdx-components/pre.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+export const Pre = styled.pre`
+  margin: 25px -25px 25px -25px !important;
+  padding: 20px 25px !important;
+  border-radius: 10px;
+  line-height: 1.5 !important;
+  
+  code {
+    background: transparent;
+  }
+`;

components/md-renderer/mdx-components/table.js

@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+
+export const Table = styled.table`
+  border-collapse: separate;
+  width: 100%;
+  border-spacing: 0;
+  margin: 20px 0;
+  
+  th {
+    color: #666;
+    font-size: 12px;
+    font-weight: 400;
+    background: #FAFAFA;
+    text-transform: uppercase;
+    height: 40px;
+    vertical-align: middle;
+    padding: 5px 10px;
+  }
+  
+  td {
+    font-size: 14px;
+    padding: 10px;
+    border-bottom: 1px solid #EAEAEA;
+  }
+`;

components/page-footer/carbon.scss

@@ -0,0 +1,62 @@
+#carbonads {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu,
+  Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  position: fixed;
+  bottom: 15px;
+  right: 20px;
+}
+
+#carbonads {
+  display: flex;
+  max-width: 330px;
+  background-color: hsl(0, 0%, 98%);
+  box-shadow: 0 1px 4px 1px hsla(0, 0%, 0%, .1);
+}
+
+#carbonads a {
+  color: inherit;
+  text-decoration: none;
+}
+
+#carbonads a:hover {
+  color: inherit;
+}
+
+#carbonads span {
+  position: relative;
+  display: block;
+  overflow: hidden;
+}
+
+#carbonads .carbon-wrap {
+  display: flex;
+}
+
+.carbon-img {
+  display: block;
+  margin: 0;
+  line-height: 1;
+}
+
+.carbon-img img {
+  display: block;
+}
+
+.carbon-text {
+  font-size: 13px;
+  padding: 10px;
+  line-height: 1.5;
+  text-align: left;
+}
+
+.carbon-poweredby {
+  display: block;
+  padding: 8px 10px;
+  background: repeating-linear-gradient(-45deg, transparent, transparent 5px, hsla(0, 0%, 0%, .025) 5px, hsla(0, 0%, 0%, .025) 10px) hsla(203, 11%, 95%, .4);
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: .5px;
+  font-weight: 600;
+  font-size: 9px;
+  line-height: 1;
+}

components/page-footer/custom-ad.jsx

@@ -0,0 +1,41 @@
+export const CustomAd = () => {
+  return (
+    <div id="carbonads">
+      <span>
+        <span className="carbon-wrap">
+          <a
+            href="https://freemote.com/strategy?sl=roadmap"
+            className="carbon-img"
+            target="_blank"
+            rel="noopener sponsored"
+          >
+            <img
+              src="/fm-img.png"
+              alt="FM Logo"
+              border="0"
+              height="100"
+              width="130"
+              style={{ maxWidth: "130px" }}
+            />
+          </a>
+          <a
+            href="https://freemote.com/strategy?sl=roadmap"
+            className="carbon-text"
+            target="_blank"
+            rel="noopener sponsored"
+          >
+            He Went from ZERO TO $74,000 as a Full Time Developer in 7 Weeks
+          </a>
+        </span>
+        <a
+          href="https://github.com/sponsors/kamranahmedse"
+          className="carbon-poweredby"
+          target="_blank"
+          rel="noopener sponsored"
+        >
+          Sponsored by
+        </a>
+      </span>
+    </div>
+  );
+};

components/page-footer/index.js

@@ -0,0 +1,71 @@
+import siteConfig from 'content/site';
+import { FooterWrap } from './style.js';
+import './carbon.scss';
+import { CustomAd } from "./custom-ad";
+
+const PageFooter = () => (
+  <FooterWrap className="border-top">
+    <div className="container">
+      <div className="foot-cols-wrap row">
+        <div className="site-meta-wrap col-12 col-sm-12 col-lg col-xl col-md-12">
+          <div className="site-meta">
+            <div className="brand-detail">
+              <a href="/" className='brand'><img src="/brand.png" alt="" /> roadmap.sh</a>
+              <span className="preposition">by</span>
+              <a href="https://twitter.com/kamranahmedse" target="_blank" className='follow-author'>@kamranahmedse</a>
+            </div>
+            <div className="brand-explanation">
+              <p>Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.</p>
+            </div>
+            <p className='meta-links'>
+              &copy; roadmap.sh &middot;
+              &nbsp; <a href="/about">FAQ</a> &middot;
+              &nbsp; <a href="/terms">Terms</a> &middot;
+              &nbsp; <a href="/privacy">Privacy</a>
+            </p>
+          </div>
+        </div>
+        <div className="site-contribute foot-col col-12 col-sm-4 col-lg-2">
+          <ul>
+            <li className='foot-header'>Contribute</li>
+            <li><a href='https://gum.co/roadmap-sh'  target="_blank">Sponsor us</a></li>
+            <li><a href={ siteConfig.url.addGuide } target="_blank">Write a Guide</a></li>
+            <li><a href={ siteConfig.url.addRoadmap } target="_blank">Submit a Roadmap</a></li>
+            <li><a href='/about'>About this Site</a></li>
+          </ul>
+        </div>
+        <div className="site-learn foot-col col-12 col-sm-4 col-lg-2">
+          <ul>
+            <li className="foot-header">Learn</li>
+            <li><a href="/guides">Read Guides</a></li>
+            <li><a href="/watch">Watch Videos</a></li>
+            <li><a href="/podcasts">Podcasts</a></li>
+            <li><a href="https://www.youtube.com/channel/UCA0H2KIWgWTwpTFjSxp0now?sub_confirmation=1" target="_blank">YouTube</a></li>
+          </ul>
+        </div>
+        <div className="site-learn foot-col col-12 col-sm-4 col-lg-2">
+          <ul>
+            <li className="foot-header">Most Visited</li>
+            <li><a href="/frontend">Frontend Roadmap</a></li>
+            <li><a href="/backend">Backend Roadmap</a></li>
+            <li><a href="/devops">DevOps Roadmap</a></li>
+            <li><a href="/roadmaps">Upcoming</a></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+
+    <CustomAd />
+
+    {/* Do not show on local */}
+    { process.env.GA_SECRET && false && (
+      <>
+        <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CE7DLK3Y&placement=roadmapsh" id="_carbonads_js"></script>
+        {/*<div id="codefund"></div>*/}
+        {/*<script src="https://app.codefund.io/properties/681/funder.js" async></script>*/}
+      </>
+    ) }
+  </FooterWrap>
+);
+
+export default PageFooter;

components/page-footer/style.js

@@ -0,0 +1,94 @@
+import styled from 'styled-components';
+
+export const FooterWrap = styled.div`
+  padding: 65px 0;
+
+  .site-meta {
+    margin-bottom: 30px;
+    width: 350px;
+
+    .brand-detail {
+      display: flex;
+      align-items: center;
+    }
+
+    .brand {
+      display: flex;
+      align-items: center;
+      font-weight: 600;
+      color: #000;
+      text-decoration: none;
+
+      img {
+        height: 25px;
+        width: 25px;
+        margin-right: 8px;
+      }
+    }
+
+    .preposition {
+      margin: 0 7px;
+    }
+
+    .follow-author {
+      background-color: #1e99e6;
+      border-radius: 3px;
+      color: #fff;
+      cursor: pointer;
+      font-size: 12px;
+      font-weight: 600;
+      line-height: 20px;
+      padding: 0 6px;
+      white-space: nowrap;
+      text-decoration: none;
+
+      &:hover {
+        background: #43aaea;
+      }
+    }
+
+    .brand-explanation {
+      color: #999;
+
+      p {
+        font-size: 15px;
+        line-height: 24px;
+        margin: 15px 0;
+      }
+    }
+
+    .meta-links {
+      color: #a3a3a3;
+      font-size: 15px;
+
+      a {
+        color: #000;
+        text-decoration: none;
+      }
+    }
+  }
+
+  .foot-col {
+    margin-bottom: 20px;
+    a {
+      color: #999;
+    }
+
+    .foot-header {
+      font-weight: 500;
+      margin-bottom: 7px;
+    }
+
+    ul {
+      margin: 0;
+      padding: 0;
+
+      li {
+        margin-bottom: 2px;
+        font-size: 15px;
+        list-style: none;
+        margin-left: 0;
+      }
+    }
+  }
+`;

components/page-header/index.js

@@ -0,0 +1,16 @@
+import { HeaderWrap, Subtitle, Title } from './style';
+
+const PageHeader = ({
+  title,
+  subtitle,
+  children,
+}) => (
+  <HeaderWrap>
+    <Title>{ title }</Title>
+    <Subtitle dangerouslySetInnerHTML={{ __html: subtitle }} />
+
+    { children }
+  </HeaderWrap>
+);
+
+export default PageHeader;

components/page-header/style.js

@@ -0,0 +1,22 @@
+import styled from 'styled-components';
+
+export const HeaderWrap = styled.div`
+  text-align: center;
+  padding: 45px 30px;
+`;
+
+export const Title = styled.h1`
+  font-size: 48px;
+  font-weight: 700;
+  margin-bottom: 12px;
+`;
+
+export const Subtitle = styled.p`
+  font-size: 16px;
+  color: #444;
+  
+  a {
+    color: inherit;
+    font-weight: 700;
+  }
+`;

components/page-logo-header/index.js

@@ -0,0 +1,13 @@
+import { HeaderWrap, Subtitle, Title, Logo } from './style';
+
+const PageLogoHeader = ({ title, subtitle, children, }) => (
+  <HeaderWrap>
+    <Logo src='/brand.png' alt='' />
+    <Title>{ title }</Title>
+    <Subtitle dangerouslySetInnerHTML={{ __html: subtitle }} />
+
+    { children }
+  </HeaderWrap>
+);
+
+export default PageLogoHeader;

components/page-logo-header/style.js

@@ -0,0 +1,30 @@
+import styled from 'styled-components';
+
+export const HeaderWrap = styled.div`
+  text-align: center;
+  padding: 45px 30px;
+`;
+
+export const Title = styled.h1`
+  font-size: 40px;
+  font-weight: 700;
+  margin-bottom: 12px;
+`;
+
+export const Subtitle = styled.p`
+  font-size: 16px;
+  color: #444;
+  margin-bottom: 0;
+  
+  a {
+    color: inherit;
+    font-weight: 700;
+  }
+`;
+
+
+export const Logo = styled.img`
+  width: 75px;
+  height: 75px;
+  margin-bottom: 26px;
+`;

components/roadmap-header/index.js

@@ -0,0 +1,62 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faArrowLeft, faClock, faEnvelope, faHandshake } from '@fortawesome/free-solid-svg-icons';
+import { BadgeLink, BadgesList, DarkBadge, PrimaryBadge, SecondaryBadge } from 'components/badges';
+import siteConfig from "content/site";
+import { Description, Header, Title, MenuItemLink, MenuItems } from './style';
+import Link from 'next/link';
+import classNames from 'classnames';
+
+const RoadmapHeader = ({ roadmap, page = 'landscape' }) => (
+  <Header>
+    <Title>{ roadmap.title }</Title>
+    <Description>{ roadmap.description }</Description>
+    <BadgesList className="mt-4">
+      <BadgeLink href="/roadmaps">
+        <DarkBadge>
+          <FontAwesomeIcon className='d-none d-md-block' icon={ faArrowLeft } />
+          Other Roadmaps
+        </DarkBadge>
+      </BadgeLink>
+      { roadmap.upcoming && (
+        <BadgeLink href="/signup">
+          <SecondaryBadge>
+            <FontAwesomeIcon className='d-none d-md-block' icon={ faClock } />
+            Upcoming Roadmap
+          </SecondaryBadge>
+        </BadgeLink>
+      ) }
+      { !roadmap.upcoming && (
+        <BadgeLink href={ `${siteConfig.url.issue}?title=[${roadmap.title}] - Title Here` } target="_blank" className='d-none d-md-block' >
+          <SecondaryBadge>
+            <FontAwesomeIcon icon={ faHandshake } />
+            Suggest Changes
+          </SecondaryBadge>
+        </BadgeLink>
+      ) }
+
+      <BadgeLink href="/signup">
+        <PrimaryBadge>
+          <FontAwesomeIcon className='d-none d-md-block' icon={ faEnvelope } />
+          Send me Updates
+        </PrimaryBadge>
+      </BadgeLink>
+    </BadgesList>
+
+    <MenuItems className="border-bottom">
+      <div className={ classNames({ 'd-none': roadmap.title.toLowerCase() !== 'frontend developer' })}>
+        <Link href={ `${roadmap.url}` } passHref>
+          <MenuItemLink className={ classNames({ active: page === 'landscape', }) }>Landscape</MenuItemLink>
+        </Link>
+        <Link href={ `${roadmap.url}/resources` } passHref>
+          <MenuItemLink className={ classNames({ active: page === 'resources', }) }>Resources</MenuItemLink>
+        </Link>
+        {/*<Link href={ `${roadmap.url}/resources` } passHref>*/}
+        {/*  <MenuItemLink className={ classNames({ active: false, }) }>Project Ideas</MenuItemLink>*/}
+        {/*</Link>*/}
+      </div>
+    </MenuItems>
+
+  </Header>
+);
+
+export default RoadmapHeader;

components/roadmap-header/style.js

@@ -0,0 +1,50 @@
+import styled from 'styled-components';
+
+export const Header = styled.div`
+  text-align: center;
+  padding: 45px 30px 10px;
+`;
+
+export const Title = styled.h1`
+  font-weight: 700;
+  margin-bottom: 12px;
+  font-size: 48px;
+`;
+
+export const Description = styled.p`
+  font-size: 16px;
+  color: #444444;
+`;
+
+export const MenuItems = styled.div`
+  margin: 35px 0 15px;
+`;
+
+export const MenuItemLink = styled.a`
+  display: inline-block;
+  position: relative;
+  padding: 5px 10px 8px;
+  text-decoration: none;
+  color: rgb(102, 102, 102);
+  font-size: 14px;
+  font-weight: 400;
+  &.active, &.active:hover {
+    color: #2d2d2d;
+    
+    &:after {
+      position: absolute;
+      content: "";
+      display: block;
+      height: 0;
+      left: 9px;
+      right: 9px;
+      bottom: -1px;
+      border-bottom: 2px solid currentColor;
+    }
+  }
+  
+  &:hover {
+    text-decoration: none;
+    color: #111111;
+  }
+`;

components/roadmap-resources/index.js

@@ -0,0 +1,35 @@
+import { Summary, SummaryContainer, UpcomingContainer } from './style';
+import GuideBody from 'components/guide-body';
+import RoadmapHeader from 'components/roadmap-header';
+import SharePage from 'components/share-page';
+import MdRenderer from 'components/md-renderer';
+
+const RoadmapResources = ({ roadmap }) => {
+  if (roadmap.upcoming) {
+    return (
+      <>
+        <RoadmapHeader roadmap={ roadmap } />
+        <UpcomingContainer>
+          <GuideBody guide={{ fileName: 'upcoming' }} />
+        </UpcomingContainer>
+      </>
+    );
+  }
+
+  const filePath = roadmap.resources.replace(/^\//, '');
+  const ResourcesContent = require(`../../content/${filePath}`).default;
+
+  return (
+    <SummaryContainer>
+      <RoadmapHeader roadmap={ roadmap } page='resources' />
+      <Summary className="container">
+        <MdRenderer>
+          <ResourcesContent />
+        </MdRenderer>
+        <SharePage title={ roadmap.description } url={ roadmap.url } />
+      </Summary>
+    </SummaryContainer>
+  )
+};
+
+export default RoadmapResources;

components/roadmap-resources/style.js

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+
+export const SummaryContainer = styled.div``;
+
+export const UpcomingContainer = styled.div`
+  text-align: center;
+  padding: 40px 0 50px;
+
+  .container {
+    position: relative;
+  }
+`;
+
+export const Summary = styled.div`
+  margin-top: 35px;
+  min-height: 400px;
+  max-width: 1000px;
+  display: block;
+  position: relative;
+  text-align: left;
+`;

components/roadmap-summary/index.js

@@ -0,0 +1,36 @@
+import { Summary, SummaryContainer, UpcomingContainer } from './style';
+import classNames from 'classnames';
+import GuideBody from 'components/guide-body';
+import RoadmapHeader from 'components/roadmap-header';
+import SharePage from 'components/share-page';
+import MdRenderer from 'components/md-renderer';
+
+const RoadmapSummary = ({ roadmap }) => {
+  if (roadmap.upcoming) {
+    return (
+      <>
+        <RoadmapHeader roadmap={ roadmap } />
+        <UpcomingContainer>
+          <GuideBody guide={{ fileName: 'upcoming' }} />
+        </UpcomingContainer>
+      </>
+    );
+  }
+
+  const filePath = roadmap.path.replace(/^\//, '');
+  const RoadmapContent = require(`../../content/${filePath}`).default;
+
+  return (
+    <SummaryContainer>
+      <RoadmapHeader roadmap={ roadmap } />
+      <Summary className={classNames("container", { "container-small": roadmap.isTextHeavy })}>
+        <MdRenderer>
+          <RoadmapContent />
+        </MdRenderer>
+        <SharePage title={ roadmap.description } url={ roadmap.url } />
+      </Summary>
+    </SummaryContainer>
+  )
+};
+
+export default RoadmapSummary;

components/roadmap-summary/style.js

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+
+export const SummaryContainer = styled.div``;
+
+export const UpcomingContainer = styled.div`
+  text-align: center;
+  padding: 40px 0 50px;
+
+  .container {
+    position: relative;
+  }
+`;
+
+export const Summary = styled.div`
+  margin-top: 35px;
+  min-height: 400px;
+  max-width: 1000px;
+  display: block;
+  position: relative;
+  text-align: left;
+`;

components/row-block/index.js

@@ -0,0 +1,28 @@
+import { Badge, BlockItem, ItemSubtitle, ItemTitle, ItemWrap } from './style';
+
+const RowBlock = ({
+  title,
+  subtitle,
+  url,
+  badge,
+  openExternal = false,
+  disabled = false,
+  children = null
+}) => (
+  <ItemWrap className="col-md-6 col-lg-4 col-xl-4">
+    <BlockItem href={ url } disabled={ disabled } target={openExternal ? '_blank' : '_self'}>
+      { !children && (
+        <>
+          <ItemTitle>
+            { title }
+            { badge && <Badge>{ badge }</Badge>}
+          </ItemTitle>
+          <ItemSubtitle>{ subtitle }</ItemSubtitle>
+        </>
+      ) }
+      { children }
+    </BlockItem>
+  </ItemWrap>
+);
+
+export default RowBlock;

components/row-block/style.js

@@ -0,0 +1,62 @@
+import styled from 'styled-components';
+
+export const ItemWrap = styled.div`
+  padding: 0 10px 20px;
+`;
+
+export const BlockItem = styled.a`
+  min-height: 114px;
+  box-shadow: rgba(0, 0, 0, 0.12) 0 5px 10px;
+  transition: box-shadow 0.2s ease 0s;
+  align-items: stretch;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 1px;
+  max-width: 100%;
+  background: white;
+  padding: 20px;
+  border-radius: 10px;
+  justify-content: center;
+  text-decoration:none;
+  opacity: ${ props => props.disabled ? 0.5 : 1 };
+
+  &:hover {
+    text-decoration:none;
+    box-shadow: rgba(0, 0, 0, 0.12) 0 30px 60px;
+    z-index: 1;
+  }
+`;
+
+export const ItemTitle = styled.h3`
+  font-weight: 600;
+  font-size: 18px;
+  line-height: 24px;
+  color: #101010;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+`;
+
+export const Badge = styled.span`
+  font-size: 10px;
+  font-weight: 600;
+  background: #8a8a8a;
+  color: white;
+  padding: 0 8px;
+  border-radius: 4px;
+  text-transform: uppercase;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 10px;
+  height: 18px;
+`;
+
+export const ItemSubtitle = styled.p`
+  font-size: 14px;
+  color: rgb(102, 102, 102);
+  white-space: normal;
+  line-height: 1.5;
+  margin: 0;
+`;

components/share-icon/index.js

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+
+export const ShareIcon = styled.a`
+  display: block;
+  width: 22px;
+  height: 22px;
+  margin-bottom: 8px;
+  text-align: center;
+
+  svg {
+    height: 22px !important;
+    width: 22px !important;
+    color: #757575;
+    transition: all 0.2s;
+    vertical-align: top;
+  }
+  
+  &:hover svg {
+    color: #000000
+  }
+`;

components/share-page/index.js

@@ -0,0 +1,37 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faFacebookSquare, faHackerNewsSquare, faRedditSquare, faTwitterSquare } from '@fortawesome/free-brands-svg-icons';
+
+import { getFacebookShareUrl, getHnShareUrl, getRedditShareUrl, getTwitterShareUrl } from 'lib/url';
+import { ShareIconsList, ShareWrap } from './style';
+import { ShareIcon } from 'components/share-icon';
+
+const SharePage = ({
+  url,
+  title,
+  twitterUsername,
+}) => (
+  <ShareWrap>
+    <ShareIconsList className="d-none d-sm-flex">
+      <ShareIcon
+        href={ getTwitterShareUrl({
+          text: `${title} ${twitterUsername ? `by @${twitterUsername}` : ''}`,
+          url: url
+        })}
+        target="_blank"
+      >
+        <FontAwesomeIcon icon={ faTwitterSquare } />
+      </ShareIcon>
+      <ShareIcon href={ getFacebookShareUrl({ text: title, url: url }) } target="_blank">
+        <FontAwesomeIcon icon={ faFacebookSquare } />
+      </ShareIcon>
+      <ShareIcon href={ getHnShareUrl({ text: title, url: url })} target="_blank">
+        <FontAwesomeIcon icon={faHackerNewsSquare}/>
+      </ShareIcon>
+      <ShareIcon href={ getRedditShareUrl({ text: title, url: url })} target="_blank">
+        <FontAwesomeIcon icon={ faRedditSquare } />
+      </ShareIcon>
+    </ShareIconsList>
+  </ShareWrap>
+);
+
+export default SharePage;

components/share-page/style.js

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+
+export const ShareIconsList = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: sticky;
+  top: 65px;
+`;
+
+export const ShareWrap = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  position: absolute;
+  padding: 0 0;
+  top: 0;
+  left: -40px;
+  min-height: 100%;
+`;

components/signup-form/index.js

@@ -0,0 +1,17 @@
+import { SignUpWrap, Title, Subtitle, Textbox, Button } from './style';
+
+const SignUpForm = () => (
+  <SignUpWrap>
+    <Title>Subscribe</Title>
+    <Subtitle>Enter your email below to get notified about the new roadmaps, guides and updates</Subtitle>
+    <form action="https://kamranahmed.us9.list-manage.com/subscribe/post?u=6f57b741a6a939744f1f203a0&amp;id=f9ca4d6aee" target="_blank" method="post">
+      <Textbox type="email" name="EMAIL" required placeholder="Your email" />
+      <div style={{position: 'absolute', left: '-5000px'}}>
+        <input type="text" name="b_6f57b741a6a939744f1f203a0_f9ca4d6aee" tabIndex="-1" />
+      </div>
+      <Button type="submit">Subscribe</Button>
+    </form>
+  </SignUpWrap>
+);
+
+export default SignUpForm;

components/signup-form/style.js

@@ -0,0 +1,57 @@
+import styled from 'styled-components';
+
+export const SignUpWrap = styled.div`
+  max-width: 400px;
+  margin: 200px auto;
+  text-align: center;
+`;
+
+export const Title = styled.h1`
+  font-size: 48px;
+  font-weight: 700;
+  margin-bottom: 17px;
+`;
+
+export const Subtitle = styled.p`
+  font-size: 16px;
+`;
+
+export const Textbox = styled.input`
+  display: block;
+  width: 100%;
+  padding: 10px 15px;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #495057;
+  height: auto;
+  outline: none;
+  background-color: #fff;
+  border: 1px solid #ced4da;
+  border-radius: 5px;
+  
+  &:focus {
+    border: 1px solid #101010;
+  }
+`;
+
+export const Button = styled.button`
+  -webkit-appearance: none;
+  border: none;
+  outline: none;
+  box-shadow: none;
+  display: block;
+  text-align: center;
+  width: 100%;
+  padding: 10px 15px;
+  margin-top: 10px;
+  background: #333;
+  color: white;
+  border-radius: 5px;
+  
+  &:hover, &:active, &:focus {
+    background: #000000;
+    box-shadow: none;
+    outline: none;
+  }
+`;

components/site-nav/index.js

@@ -0,0 +1,26 @@
+import { HeaderWrap } from './style';
+
+const SiteNav = () => (
+  <HeaderWrap>
+    <div className='top-row container'>
+      <div className='flex-grow-1 brand'>
+        <a href='/'>
+          <img src='/brand.png' alt='' />
+        </a>
+      </div>
+      <div className='nav-links'>
+        <a href='/guides'>Read</a>
+        <a href='/watch'>
+          Watch
+          <span className='new-item' />
+        </a>
+      </div>
+
+      <div className='ml-3 align-items-center d-none d-md-flex'>
+        <iframe src="https://ghbtns.com/github-btn.html?user=kamranahmedse&repo=developer-roadmap&type=star&count=true&size=large" frameBorder="0" scrolling="0" width="190px" height="30px"></iframe>
+      </div>
+    </div>
+  </HeaderWrap>
+);
+
+export default SiteNav;

components/site-nav/style.js

@@ -0,0 +1,61 @@
+import styled from 'styled-components';
+
+export const HeaderWrap = styled.div`
+  padding: 15px 0;
+  font-size: 18px;
+
+  .top-row {
+    display: flex;
+    align-items: center;
+    
+    > span {
+      display: flex;
+      margin-left: 12px;
+    }
+    
+    .github-button {
+      font-size: 16px;
+      color: #666;
+      padding-left: 10px;
+    }
+  }
+
+  .brand img {
+    padding: 5px 0;
+    height: 50px;
+    text-decoration: none;
+    border-radius: 2px;
+  }
+
+  .nav-links {
+    a {
+      position: relative;
+      padding: 0 10px;
+      text-decoration: none;
+      font-size: 16px;
+      color: #666;
+    }
+
+    .signup {
+      background: #101010;
+      border-radius: 5px;
+      color: #ffffff;
+      padding: 7px 10px;
+      margin-left: 15px;
+
+      &:hover {
+        background: #2d2d2d;
+      }
+    }
+
+    .new-item {
+      position: absolute;
+      top: 0;
+      right: 0;
+      display: inline-block;
+      padding: 3px;
+      background: #e25712;
+      border-radius: 100%;
+    }
+  }
+`;

components/sponsor-banner/index.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { BannerWrap, CloseSponsor, SponsorLogo } from './style';
+
+export function SponsorBanner({ onCloseBanner = () => null }) {
+  return (
+    <div className='row'>
+      <div className='col p-0'>
+        <BannerWrap
+          href={`https://www.youtube.com/channel/UCA0H2KIWgWTwpTFjSxp0now?sub_confirmation=1`}
+          target='_blank'
+          className='alert alert-info'
+        >
+          <SponsorLogo src='/sponsors/youtube.svg' />
+          We now have a youtube channel. <span className='d-none d-sm-inline-block'>Subscribe for the video content.</span>
+          
+          <CloseSponsor
+            onClick={(e) => {
+              e.preventDefault();
+              onCloseBanner();
+            }}
+            className='close'>&times;</CloseSponsor>
+        </BannerWrap>
+      </div>
+    </div>
+  );
+}

components/sponsor-banner/style.js

@@ -0,0 +1,49 @@
+import styled from 'styled-components';
+
+export const BannerWrap = styled.a`
+  margin-bottom: 0;
+  //background: #101010;
+  //color: white;
+  background: #ffe0b2;
+  color: #d8362a;
+  font-weight: 600;
+  border: 0;
+  border-radius: 0;
+  padding: 10px 15px;
+  display: block;
+  text-align: center;
+  transition: all 200ms;
+  
+  &:hover {
+    background: #ffd698;
+    color: #bd2015;
+    text-decoration: none;
+  }
+`;
+
+export const SponsorLogo = styled.img`
+  height: 20px;
+  margin-right: 10px;
+  position: relative;
+  top: -2px;
+`;
+
+export const EmojiWrap = styled.img`
+  height: 18px;
+  position: relative;
+  top: -1px;
+  margin: 0 6px 0 6px;
+`;
+
+export const CloseSponsor = styled.span`
+  text-shadow: none;
+  margin-right: 15px;
+  position: relative;
+  top: -2px;
+  color: #101010;
+  
+  &:hover {
+    opacity: 1;
+    color: #101010;
+  }
+`;

components/tos-page/index.js

@@ -0,0 +1,22 @@
+import styled from 'styled-components';
+
+export const TosPage = styled.div`
+  h2 {
+    font-weight: 700;
+    margin-bottom: 16px;
+  }
+
+  h4 {
+    margin-top: 25px;
+    margin-bottom: 10px;
+    font-weight: 600;
+  }
+  
+  p {
+    color: #999;
+  }
+  
+  a {
+    color: #333;
+  }
+`;

content/authors.json

@@ -0,0 +1,42 @@
+[
+  {
+    "username": "kamranahmedse",
+    "name": "Kamran Ahmed",
+    "twitter": "kamranahmedse",
+    "picture": "/authors/kamranahmedse.jpeg",
+    "bio": "Lead engineer at Tajawal. Lover of all things web and opensource. Created roadmap.sh to help the confused ones."
+  },
+  {
+    "username": "jesse",
+    "name": "Jesse Li",
+    "twitter": "__jesse_li",
+    "picture": "/authors/jesse.png",
+    "bio": "Software engineer."
+  },
+  {
+    "username": "dmytrobol",
+    "name": "Dmytro Bolkachov",
+    "twitter": "dmytrobol",
+    "picture": "/authors/dmytrobol.png",
+    "bio": "JavaScript Lad, Movie buff and coder interested in everything web related"
+  },
+  {
+    "username": "spekulatius",
+    "name": "Peter Thaleikis",
+    "twitter": "spekulatius1984",
+    "picture": "/authors/spekulatius.jpg",
+    "bio": "Developer building side-projects for fun, lover of the web and open source"
+  },
+  {
+    "username": "ebrahimbharmal007",
+    "name": "Ebrahim Bharmal",
+    "twitter": "BharmalEbrahim",
+    "picture": "/authors/ebrahimbharmal007.png",
+    "bio": "Love building projects using tools completely new to me. Python forever. Senior at University of Texas at Arlington (2021)"
+  },
+  {
+    "username": "lesovsky",
+    "name": "Alexey Lesovsky",
+    "bio": "Linux system administrator and PostgreSQL DBA at DataEgret."
+  }
+]

content/guides.json

@@ -0,0 +1,264 @@
+[
+  {
+    "title": "WebStorm — Project History",
+    "description": "Learn how to peek through the history of any git repository to learn how it grew.",
+    "url": "/guides/project-history",
+    "fileName": "project-history",
+    "featured": true,
+    "author": "kamranahmedse",
+    "updatedAt": "2020-07-16T19:59:14.191Z",
+    "createdAt": "2020-07-16T19:59:14.191Z"
+  },
+  {
+    "title": "CI and CD",
+    "description": "Learn the basics of CI/CD and how to implement that with GitHub Actions.",
+    "url": "/guides/ci-cd",
+    "fileName": "ci-cd",
+    "featured": true,
+    "author": "kamranahmedse",
+    "updatedAt": "2020-07-09T19:59:14.191Z",
+    "createdAt": "2020-07-09T19:59:14.191Z"
+  },
+  {
+    "title": "SSO — Single Sign On",
+    "description": "Learn the basics of SAML and understand how does Single Sign On work.",
+    "url": "/guides/sso",
+    "fileName": "sso",
+    "featured": true,
+    "author": "kamranahmedse",
+    "updatedAt": "2020-07-01T19:59:14.191Z",
+    "createdAt": "2020-07-01T19:59:14.191Z"
+  },
+  {
+    "title": "OAuth — Open Authorization",
+    "description": "Learn and understand what is OAuth and how it works",
+    "url": "/guides/oauth",
+    "fileName": "oauth",
+    "featured": true,
+    "author": "kamranahmedse",
+    "updatedAt": "2020-06-28T19:59:14.191Z",
+    "createdAt": "2020-06-28T19:59:14.191Z"
+  },
+  {
+    "title": "JWT Authentication",
+    "description": "Understand what is JWT authentication and how is it implemented",
+    "url": "/guides/jwt-authentication",
+    "fileName": "jwt-authentication",
+    "featured": true,
+    "author": "kamranahmedse",
+    "updatedAt": "2020-06-20T19:59:14.191Z",
+    "createdAt": "2020-06-20T19:59:14.191Z"
+  },
+  {
+    "title": "Token Based Authentication",
+    "description": "Understand what is token based authentication and how it is implemented",
+    "url": "/guides/token-authentication",
+    "fileName": "token-authentication",
+    "featured": true,
+    "author": "kamranahmedse",
+    "updatedAt": "2020-06-02T20:59:14.191Z",
+    "createdAt": "2020-06-02T20:59:14.191Z"
+  },
+  {
+    "title": "Session Based Authentication",
+    "description": "Understand what is session based authentication and how it is implemented",
+    "url": "/guides/session-authentication",
+    "fileName": "session-authentication",
+    "featured": true,
+    "author": "kamranahmedse",
+    "updatedAt": "2020-05-26T20:59:14.191Z",
+    "createdAt": "2020-05-26T20:59:14.191Z"
+  },
+  {
+    "title": "Basic Authentication",
+    "description": "Understand what is basic authentication and how it is implemented",
+    "url": "/guides/basic-authentication",
+    "fileName": "basic-authentication",
+    "featured": true,
+    "author": "kamranahmedse",
+    "updatedAt": "2020-05-19T20:59:14.191Z",
+    "createdAt": "2020-05-19T20:59:14.191Z"
+  },
+  {
+    "title": "Character Encodings",
+    "description": "Covers the basics of character encodings and explains ASCII vs Unicode",
+    "url": "/guides/character-encodings",
+    "fileName": "character-encodings",
+    "featured": true,
+    "author": "kamranahmedse",
+    "updatedAt": "2020-05-14T20:59:14.191Z",
+    "createdAt": "2020-05-14T20:59:14.191Z"
+  },
+  {
+    "title": "Unfamiliar Codebase",
+    "description": "Tips on getting getting familiar with an unfamiliar codebase",
+    "url": "/guides/unfamiliar-codebase",
+    "fileName": "unfamiliar-codebase",
+    "featured": true,
+    "author": "kamranahmedse",
+    "updatedAt": "2020-05-04T20:59:14.191Z",
+    "createdAt": "2020-05-04T20:59:14.191Z"
+  },
+  {
+    "title": "Build it and they will come?",
+    "description": "Why “build it and they will come” alone won’t work anymore",
+    "url": "/guides/why-build-it-and-they-will-come-wont-work-anymore",
+    "fileName": "why-build-it-and-they-will-come-wont-work-anymore",
+    "featured": true,
+    "author": "spekulatius",
+    "updatedAt": "2020-05-04T12:59:14.191Z",
+    "createdAt": "2020-05-04T12:59:14.191Z"
+  },
+  {
+    "title": "DHCP in One Picture",
+    "description": "Here is what happens when a new device joins the network.",
+    "url": "/guides/dhcp-in-one-picture",
+    "fileName": "dhcp-in-one-picture",
+    "featured": true,
+    "author": "kamranahmedse",
+    "updatedAt": "2020-04-28T15:48:21.191Z",
+    "createdAt": "2020-04-28T15:48:21.191Z"
+  },
+  {
+    "title": "SSL vs TLS vs SSH",
+    "description": "Quick tidbit on the differences between SSL, TLS, HTTPS and SSH",
+    "url": "/guides/ssl-tls-https-ssh",
+    "fileName": "ssl-tls-https-ssh",
+    "featured": true,
+    "author": "kamranahmedse",
+    "updatedAt": "2020-04-22T15:48:21.191Z",
+    "createdAt": "2020-04-22T15:48:21.191Z"
+  },
+  {
+    "title": "Asymptotic Notation",
+    "description": "Learn the basics of measuring the time and space complexity of algorithms",
+    "url": "/guides/asymptotic-notation",
+    "fileName": "asymptotic-notation",
+    "featured": true,
+    "author": "kamranahmedse",
+    "updatedAt": "2020-04-03T15:48:21.191Z",
+    "createdAt": "2020-04-03T15:48:21.191Z"
+  },
+  {
+    "title": "Big-O Notation",
+    "description": "Easy to understand explanation of Big-O notation without any fancy terms",
+    "url": "/guides/big-o-notation",
+    "fileName": "big-o-notation",
+    "featured": true,
+    "author": "kamranahmedse",
+    "updatedAt": "2020-03-15T15:48:21.191Z",
+    "createdAt": "2020-03-15T15:48:21.191Z"
+  },
+  {
+    "title": "Random Numbers: Are they?",
+    "description": "Learn how they are generated and why they may not be truly random.",
+    "url": "/guides/random-numbers",
+    "fileName": "random-numbers",
+    "featured": true,
+    "author": "kamranahmedse",
+    "updatedAt": "2020-03-14T15:48:21.191Z",
+    "createdAt": "2020-03-14T15:48:21.191Z"
+  },
+  {
+    "title": "Scaling Databases",
+    "description": "Learn the ups and downs of different database scaling strategies",
+    "url": "/guides/scaling-databases",
+    "fileName": "scaling-databases",
+    "featured": true,
+    "author": "kamranahmedse",
+    "updatedAt": "2020-02-18T15:48:21.191Z",
+    "createdAt": "2020-02-18T15:48:21.191Z"
+  },
+  {
+    "title": "How does the internet work?",
+    "description": "Learn the basics of internet and everything involved with this short video series",
+    "url": "/guides/what-is-internet",
+    "fileName": "what-is-internet",
+    "featured": true,
+    "author": "dmytrobol",
+    "updatedAt": "2020-02-29T15:48:21.191Z",
+    "createdAt": "2020-02-29T15:48:21.191Z"
+  },
+  {
+    "title": "Building a BitTorrent Client",
+    "description": "Learn everything you need to know about BitTorrent by writing a client in Go",
+    "url": "/guides/torrent-client",
+    "fileName": "torrent-client",
+    "featured": true,
+    "author": "jesse",
+    "updatedAt": "2020-01-17T15:48:21.191Z",
+    "createdAt": "2020-01-17T15:48:21.191Z",
+    "canonical": "https://blog.jse.li/posts/torrent/"
+  },
+  {
+    "title": "Levels of Seniority",
+    "description": "How to Step Up as a Junior, Mid Level or a Senior Developer?",
+    "url": "/guides/levels-of-seniority",
+    "fileName": "levels-of-seniority",
+    "featured": true,
+    "author": "kamranahmedse",
+    "updatedAt": "2019-12-03T12:13:00.860Z",
+    "createdAt": "2019-12-03T12:13:00.860Z"
+  },
+  {
+    "title": "Design Patterns for Humans",
+    "description": "A language agnostic, ultra-simplified explanation to design patterns",
+    "url": "/guides/design-patterns-for-humans",
+    "fileName": "design-patterns-for-humans",
+    "featured": true,
+    "author": "kamranahmedse",
+    "updatedAt": "2019-10-09T12:00:00.860Z",
+    "createdAt": "2019-01-23T17:00:00.860Z"
+  },
+  {
+    "title": "Journey to HTTP/2",
+    "description": "The evolution of HTTP. How it all started and where we stand today",
+    "url": "/guides/journey-to-http2",
+    "fileName": "journey-to-http2",
+    "featured": true,
+    "author": "kamranahmedse",
+    "createdAt": "2018-12-04T12:00:00.860Z",
+    "updatedAt": "2018-12-04T12:00:00.860Z",
+    "draft": true
+  },
+  {
+    "title": "DNS in One Picture",
+    "description": "Quick illustrative guide on how a website is found on the internet.",
+    "url": "/guides/dns-in-one-picture",
+    "fileName": "dns-in-one-picture",
+    "featured": true,
+    "author": "kamranahmedse",
+    "updatedAt": "2018-12-04T12:00:00.860Z",
+    "createdAt": "2018-12-04T17:00:00.860Z"
+  },
+  {
+    "title": "HTTP Caching",
+    "description": "Everything you need to know about web caching",
+    "url": "/guides/http-caching",
+    "fileName": "http-caching",
+    "featured": true,
+    "author": "kamranahmedse",
+    "createdAt": "2018-11-29T17:00:00.860Z",
+    "updatedAt": "2018-11-29T17:00:00.860Z"
+  },
+  {
+    "title": "Brief History of JavaScript",
+    "description": "How JavaScript was introduced and evolved over the years",
+    "url": "/guides/history-of-javascript",
+    "fileName": "history-of-javascript",
+    "featured": true,
+    "author": "kamranahmedse",
+    "createdAt": "2017-10-28T17:00:00.860Z",
+    "updatedAt": "2017-10-28T17:00:00.860Z"
+  },
+  {
+    "title": "Proxy Servers",
+    "description": "How do proxy servers work and what are forward and reverse proxies?",
+    "url": "/guides/proxy-servers",
+    "fileName": "proxy-servers",
+    "featured": true,
+    "author": "ebrahimbharmal007",
+    "createdAt": "2020-07-24T12:40:18",
+    "updatedAt": "2020-07-24T12:40:18"
+  }
+]

content/guides/asymptotic-notation.md

@@ -0,0 +1,5 @@
+Asymptotic notation is the standard way of measuring the time and space that an algorithm will consume as the input grows. In one of my last guides, I covered "Big-O notation" and a lot of you asked for a similar one for Asymptotic notation. You can find the [previous guide here](/guides/big-o-notation).
+
+[![](/guides/asymptotic-notation.png)](/guides/asymptotic-notation.png)
+
+Here is the [original tweet](https://twitter.com/kamranahmedse/status/1243861514907418624) where this image was posted.

content/guides/basic-authentication.md

@@ -0,0 +1,3 @@
+[![](/guides/basic-authentication.png)](/guides/basic-authentication.png)
+
+Here is the [original tweet](https://twitter.com/kamranahmedse/status/1261783266044063748) where this image was posted.

content/guides/big-o-notation.md

@@ -0,0 +1,5 @@
+Big-O notation is the mathematical notation that helps analyse the algorithms to get an idea about how they might perform as the input grows. The image below explains Big-O in a simple way without using any fancy terminology. 
+
+[![](/guides/big-o-notation.png)](/guides/big-o-notation.png)
+
+Here is the [original tweet](https://twitter.com/kamranahmedse/status/1235708842610212864) where this image was posted.

content/guides/character-encodings.md

@@ -0,0 +1,3 @@
+[![](/guides/character-encodings.png)](/guides/character-encodings.png)
+
+Here is the [original tweet](https://twitter.com/kamranahmedse/status/1259631582362689537) where this image was posted.

content/guides/ci-cd.md

@@ -0,0 +1,5 @@
+The image below details the differences between the continuous integration and continuous delivery. Also, here is the [accompanying video on implementing that with GitHub actions](https://www.youtube.com/watch?v=nyKZTKQS_EQ).
+
+[![](/guides/ci-cd.png)](/guides/ci-cd.png)
+
+Here is the [original tweet](https://twitter.com/kamranahmedse/status/1282806173939511298) where this image was posted.

content/guides/design-patterns-for-humans.md

@@ -1,25 +1,3 @@
----
-title: "Design Patterns for Humans"
-description: "A language agnostic, ultra-simplified explanation to design patterns"
-author:
-  name: "Kamran Ahmed"
-  url: "https://twitter.com/kamranahmedse"
-  imageUrl: "/authors/kamranahmedse.jpeg"
-seo:
-  title: "Design Patterns for Humans - roadmap.sh"
-  description: "A language agnostic, ultra-simplified explanation to design patterns"
-isNew: false
-type: "textual"
-date: 2019-01-23
-sitemap:
-  priority: 0.7
-  changefreq: "weekly"
-tags:
-  - "guide"
-  - "textual-guide"
-  - "guide-sitemap"
----
-
 Design patterns are solutions to recurring problems; **guidelines on how to tackle certain problems**. They are not classes, packages or libraries that you can plug into your application and wait for the magic to happen. These are, rather, guidelines on how to tackle certain problems in certain situations.
 
 > Design patterns are solutions to recurring problems; guidelines on how to tackle certain problems

content/guides/dhcp-in-one-picture.md

@@ -0,0 +1,3 @@
+[![](/guides/dhcp.png)](/guides/dhcp.png)
+
+Here is the [original tweet](https://twitter.com/kamranahmedse/status/1254142557417857025) where this image was posted.

content/guides/dns-in-one-picture.md

@@ -1,25 +1,3 @@
----
-title: "DNS in One Picture"
-description: "Quick illustrative guide on how a website is found on the internet."
-author:
-  name: "Kamran Ahmed"
-  url: "https://twitter.com/kamranahmedse"
-  imageUrl: "/authors/kamranahmedse.jpeg"
-seo:
-  title: "DNS in One Picture - roadmap.sh"
-  description: "Quick illustrative guide on how a website is found on the internet."
-isNew: false
-type: "visual"
-date: 2018-12-04
-sitemap:
-  priority: 0.7
-  changefreq: "weekly"
-tags:
-  - "guide"
-  - "visual-guide"
-  - "guide-sitemap"
----
-
 DNS or Domain Name System is one of the fundamental blocks of the internet. As a developer, you should have at-least the basic understanding of how it works. This article is a brief introduction to what is DNS and how it works.
 
 DNS at its simplest is like a phonebook on your mobile phone. Whenever you have to call one of your contacts, you can either dial their number from your memory or use their name which will then be used by your mobile phone to search their number in your phone book to call them. Every time you make a new friend, or your existing friend gets a mobile phone, you have to memorize their phone number or save it in your phonebook to be able to call them later on. DNS or Domain Name System, in a similar fashion, is a mechanism that allows you to browse websites on the internet. Just like your mobile phone does not know how to call without knowing the phone number, your browser does not know how to open a website just by the domain name; it needs to know the IP Address for the website to open. You can either type the IP Address to open, or provide the domain name and press enter which will then be used by your browser to find the IP address by going through several hoops. The picture below is the illustration of how your browser finds a website on the internet.