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

.env.example

@@ -1,3 +0,0 @@
-PUBLIC_API_URL=https://api.roadmap.sh
-PUBLIC_AVATAR_BASE_URL=https://dodrc8eu8m09s.cloudfront.net/avatars
-PUBLIC_EDITOR_APP_URL=https://draw.roadmap.sh

.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/ISSUE_TEMPLATE/01-suggest-changes.yml

@@ -1,25 +0,0 @@
-name: "✍️ ​ ​Suggest Changes"
-description: Help us improve the roadmaps by suggesting changes
-labels: [suggestion]
-assignees: []
-body:
-  - type: markdown
-    attributes:
-      value: |
-        Thanks for taking the time to help us improve the roadmaps with your suggestions.
-  - type: input
-    id: url
-    attributes:
-      label: Roadmap URL
-      description: Please provide the URL of the roadmap you are suggesting changes to.
-      placeholder: https://roadmap.sh
-    validations:
-      required: true
-  - type: textarea
-    id: roadmap-suggestions
-    attributes:
-      label: Suggestions
-      description: What changes would you like to suggest?
-      placeholder: Enter your suggestions here.
-    validations:
-      required: true

.github/ISSUE_TEMPLATE/02-bug-report.yml

@@ -1,42 +0,0 @@
-name: "🐛 ​ ​Bug Report"
-description: Report an issue or possible bug
-labels: [bug]
-assignees: []
-body:
-  - type: input
-    id: url
-    attributes:
-      label: What is the URL where the issue is happening
-      placeholder: https://roadmap.sh
-    validations:
-      required: true
-  - type: dropdown
-    id: browsers
-    attributes:
-      label: What browsers are you seeing the problem on?
-      multiple: true
-      options:
-        - Firefox
-        - Chrome
-        - Safari
-        - Microsoft Edge
-        - Other
-  - type: textarea
-    id: bug-description
-    attributes:
-      label: Describe the Bug
-      description: A clear and concise description of what the bug is.
-    validations:
-      required: true
-  - type: textarea
-    id: logs
-    attributes:
-      label: Output from browser console (if any)
-      description: Please copy and paste any relevant log output.
-  - type: checkboxes
-    id: will-pr
-    attributes:
-      label: Participation
-      options:
-        - label:  I am willing to submit a pull request for this issue.
-          required: false

.github/ISSUE_TEMPLATE/03-feature-suggestion.yml

@@ -1,12 +0,0 @@
-name: "✨ ​ ​Feature Suggestion"
-description: Is there a feature you'd like to see on Roadmap.sh? Let us know!
-labels: [feature request]
-assignees: []
-body:
-  - type: textarea
-    id: feature-description
-    attributes:
-      label: Feature Description
-      description: Please provide a detailed description of the feature you are suggesting and how it would help you/others.
-    validations:
-      required: true

.github/ISSUE_TEMPLATE/04-roadmap-contribution.yml

@@ -1,25 +0,0 @@
-name: "🙏 ​ ​Submit a Roadmap"
-description: Help us launch a new roadmap with your expertise.
-labels: [roadmap contribution]
-assignees: []
-body:
-  - type: markdown
-    attributes:
-      value: |
-        Thanks for taking the time to submit a roadmap! Please fill out the information below and we'll get back to you as soon as we can.
-  - type: input
-    id: roadmap-title
-    attributes:
-      label: What is the title of the roadmap you are submitting?
-      placeholder: e.g. Roadmap to learn Data Science
-    validations:
-      required: true
-  - type: textarea
-    id: roadmap-description
-    attributes:
-      label: Roadmap Link
-      description: Please create the roadmap [using our roadmap editor](https://twitter.com/kamrify/status/1708293162693767426) and submit the roadmap link.
-      placeholder: |
-          https://roadmap.sh/xyz
-    validations:
-      required: true

.github/ISSUE_TEMPLATE/05-something-else.yml

@@ -1,12 +0,0 @@
-name: "🤷‍♂️ ​ ​Something else"
-description: If none of the above templates fit your needs, please use this template to submit your issue.
-labels: []
-assignees: []
-body:
-  - type: textarea
-    id: issue-description
-    attributes:
-      label: Detailed Description
-      description: Please provide a detailed description of the issue.
-    validations:
-      required: true

.github/ISSUE_TEMPLATE/config.yml

@@ -1,14 +0,0 @@
-blank_issues_enabled: false
-contact_links:
-  - name: ✋ ​ ​Roadmap Request
-    url: https://discord.gg/cJpEt5Qbwa
-    about: Please do not open issues with roadmap requests, hop onto the discord server for that.
-  - name: 📝 ​ ​Typo or Grammatical Mistake
-    url: https://github.com/kamranahmedse/developer-roadmap/tree/master/src/data
-    about: Please submit a pull request instead of reporting it as an issue.
-  - name: 💬 ​ ​Chat on Discord
-    url: https://discord.gg/cJpEt5Qbwa
-    about: Join the community on our Discord server.
-  - name: 🤝 ​ ​Guidance
-    url: https://discord.gg/cJpEt5Qbwa
-    about: Join the community in our Discord server.

.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/aws-costs.yml

@@ -1,21 +0,0 @@
-name: Sends Daily AWS Costs to Slack
-on:
-  # Allow manual Run
-  workflow_dispatch:
-  # Run at 7:00 UTC every day
-  schedule:
-    - cron: "0 7 * * *"
-jobs:
-  aws_costs:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Get Costs
-        env:
-          AWS_KEY: ${{ secrets.COST_AWS_ACCESS_KEY }}
-          AWS_SECRET: ${{ secrets.COST_AWS_SECRET_KEY }}
-          AWS_REGION: ${{ secrets.COST_AWS_REGION }}
-          SLACK_CHANNEL: ${{ secrets.SLACK_COST_CHANNEL }}
-          SLACK_TOKEN: ${{ secrets.SLACK_TOKEN }}
-        run: |
-          npm install -g aws-cost-cli
-          aws-cost -k $AWS_KEY -s $AWS_SECRET -r $AWS_REGION -S $SLACK_TOKEN -C $SLACK_CHANNEL

.github/workflows/deploy.yml

@@ -1,39 +1,29 @@
-name: Deployment to GH Pages
+name: Deployment to GitHub Pages
 on:
   push:
     branches: [ master ]
 env:
-  PUBLIC_API_URL: "https://api.roadmap.sh"
-  PUBLIC_EDITOR_APP_URL: "https://draw.roadmap.sh"
-  PUBLIC_AVATAR_BASE_URL: "https://dodrc8eu8m09s.cloudfront.net/avatars"
+  ROADMAP_GA_SECRET: ${{ secrets.GA_SECRET }}
   GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
   CI: true
+  NEXT_TELEMETRY_DISABLED: 1
 jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
-      with:
-        persist-credentials: false
+    - uses: actions/checkout@v2
     - uses: actions/setup-node@v1
       with:
-        node-version: 18
-    - name: Prepare Draw Repository
-      run: |
-        git clone https://${{ secrets.GH_PAT }}@github.com/roadmapsh/web-draw.git .temp/web-draw --depth 1
-    - 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 generate-renderer
-        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@v4
-      - 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,34 +1,14 @@
-.idea
-.temp
-
-# build output
-dist/
-.output/
-
-# dependencies
-node_modules/
-
-scripts/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
-/test-results/
-/playwright-report/
-/playwright/.cache/
-tests-examples
-*.csv
-
-/renderer/*
-!/renderer/index.tsx
-!/renderer/renderer.ts
+.idea
+.next
+out
+.env
+build
+node_modules
+yarn-error.log
+*.sublime-project
+*.sublime-workspace
+config/*.json
+!config/dev.json

.npmrc

@@ -1 +0,0 @@
-auto-install-peers=true

.prettierignore

@@ -1,7 +0,0 @@
-app-dist
-dist
-.idea
-.github
-public
-node_modules
-pnpm-lock.yaml

.prettierrc.cjs

@@ -1,18 +0,0 @@
-module.exports = {
-  semi: true,
-  singleQuote: true,
-  overrides: [
-    {
-      files: '*.astro',
-      options: {
-        parser: 'astro',
-        singleQuote: true,
-        jsxSingleQuote: true,
-      },
-    },
-  ],
-  plugins: [
-    require.resolve('prettier-plugin-astro'),
-    require('prettier-plugin-tailwindcss'),
-  ],
-};

.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"
-    }
-  ]
-}

.vscode/settings.json

@@ -1,6 +0,0 @@
-{
-  "prettier.documentSelectors": ["**/*.astro"],
-  "[astro]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  }
-}

CODE_OF_CONDUCT.md

@@ -14,21 +14,21 @@ appearance, race, religion, or sexual identity and orientation.
 Examples of behavior that contributes to creating a positive environment
 include:
 
-- Using welcoming and inclusive language
-- Being respectful of differing viewpoints and experiences
-- Gracefully accepting constructive criticism
-- Focusing on what is best for the community
-- Showing empathy towards other community members
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
 
 Examples of unacceptable behavior by participants include:
 
-- The use of sexualized language or imagery and unwelcome sexual attention or
+* The use of sexualized language or imagery and unwelcome sexual attention or
   advances
-- Trolling, insulting/derogatory comments, and personal or political attacks
-- Public or private harassment
-- Publishing others' private information, such as a physical or electronic
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic
   address, without explicit permission
-- Other conduct which could reasonably be considered inappropriate in a
+* Other conduct which could reasonably be considered inappropriate in a
   professional setting
 
 ## Our Responsibilities
@@ -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

astro.config.mjs

@@ -1,64 +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 { fileURLToPath } from 'node:url';
-import { serializeSitemap, shouldIndexPage } from './sitemap.mjs';
-
-import react from '@astrojs/react';
-
-// https://astro.build/config
-export default defineConfig({
-  site: 'https://roadmap.sh/',
-  markdown: {
-    shikiConfig: {
-      theme: 'dracula',
-    },
-    rehypePlugins: [
-      [
-        rehypeExternalLinks,
-        {
-          target: '_blank',
-          rel: function (element) {
-            const href = element.properties.href;
-            const whiteListedStarts = [
-              '/',
-              '#',
-              'mailto:',
-              'https://github.com/kamranahmedse',
-              'https://thenewstack.io',
-              'https://cs.fyi',
-              'https://roadmap.sh',
-            ];
-            if (whiteListedStarts.some((start) => href.startsWith(start))) {
-              return [];
-            }
-            return 'noopener noreferrer nofollow';
-          },
-        },
-      ],
-    ],
-  },
-  build: {
-    format: 'file',
-  },
-  integrations: [
-    tailwind({
-      config: {
-        applyBaseStyles: false,
-      },
-    }),
-    sitemap({
-      filter: shouldIndexPage,
-      serialize: serializeSitemap,
-    }),
-    compress({
-      HTML: false,
-      CSS: false,
-      JavaScript: false,
-    }),
-    react(),
-  ],
-});

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.