Fix typo in SignalR (#3309)

* 'singalr' typo to 'signalr' 'singlar-core'
typo to 'signalr-core'
Renamed content file 'signlar-core' to 'signalr-core'

* Update aspnet-core.json

Co-authored-by: Jay <jhbird.dev>
Co-authored-by: Kamran Ahmed <kamranahmed.se@gmail.com>

.babelrc

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

.editorconfig

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

.github/FUNDING.yml

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

.github/ISSUE_TEMPLATE.md

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

.github/PULL_REQUEST_TEMPLATE.md

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

.github/workflows/deploy.yml

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

.github/workflows/update-deps.yml

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

.gitignore

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

.vscode/extensions.json

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

.vscode/launch.json

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

astro.config.mjs

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

bin/compress-jsons.cjs

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

bin/roadmap-content.cjs

@@ -0,0 +1,163 @@
+const fs = require('fs');
+const path = require('path');
+
+const CONTENT_DIR = path.join(__dirname, '../content');
+// Directory containing the roadmaps
+const ROADMAP_CONTENT_DIR = path.join(__dirname, '../src/roadmaps');
+const roadmapId = process.argv[2];
+
+const allowedRoadmapIds = fs.readdirSync(ROADMAP_CONTENT_DIR);
+if (!roadmapId) {
+  console.error('roadmapId is required');
+  process.exit(1);
+}
+
+if (!allowedRoadmapIds.includes(roadmapId)) {
+  console.error(`Invalid roadmap key ${roadmapId}`);
+  console.error(`Allowed keys are ${allowedRoadmapIds.join(', ')}`);
+  process.exit(1);
+}
+
+// Directory holding the roadmap content files
+const roadmapDirName = fs
+  .readdirSync(ROADMAP_CONTENT_DIR)
+  .find((dirName) => dirName.replace(/\d+-/, '') === roadmapId);
+
+if (!roadmapDirName) {
+  console.error('Roadmap directory not found');
+  process.exit(1);
+}
+
+const roadmapDirPath = path.join(ROADMAP_CONTENT_DIR, roadmapDirName);
+const roadmapContentDirPath = path.join(
+  ROADMAP_CONTENT_DIR,
+  roadmapDirName,
+  'content'
+);
+
+// If roadmap content already exists do not proceed as it would override the files
+if (fs.existsSync(roadmapContentDirPath)) {
+  console.error(`Roadmap content already exists @ ${roadmapContentDirPath}`);
+  process.exit(1);
+}
+
+function prepareDirTree(control, dirTree, dirSortOrders) {
+  // Directories are only created for groups
+  if (control.typeID !== '__group__') {
+    return;
+  }
+
+  // e.g. 104-testing-your-apps:other-options
+  const controlName = control?.properties?.controlName || '';
+  // e.g. 104
+  const sortOrder = controlName.match(/^\d+/)?.[0];
+
+  // No directory for a group without control name
+  if (!controlName || !sortOrder) {
+    return;
+  }
+
+  // e.g. testing-your-apps:other-options
+  const controlNameWithoutSortOrder = controlName.replace(/^\d+-/, '');
+  // e.g. ['testing-your-apps', 'other-options']
+  const dirParts = controlNameWithoutSortOrder.split(':');
+
+  // Nest the dir path in the dirTree
+  let currDirTree = dirTree;
+  dirParts.forEach((dirPart) => {
+    currDirTree[dirPart] = currDirTree[dirPart] || {};
+    currDirTree = currDirTree[dirPart];
+  });
+
+  dirSortOrders[controlNameWithoutSortOrder] = Number(sortOrder);
+
+  const childrenControls = control.children.controls.control;
+  // No more children
+  if (childrenControls.length) {
+    childrenControls.forEach((childControl) => {
+      prepareDirTree(childControl, dirTree, dirSortOrders);
+    });
+  }
+
+  return { dirTree, dirSortOrders };
+}
+
+const roadmap = require(path.join(__dirname, `../public/jsons/${roadmapId}`));
+const controls = roadmap.mockup.controls.control;
+
+// Prepare the dir tree that we will be creating and also calculate the sort orders
+const dirTree = {};
+const dirSortOrders = {};
+
+controls.forEach((control) => {
+  prepareDirTree(control, dirTree, dirSortOrders);
+});
+
+/**
+ * @param parentDir Parent directory in which directory is to be created
+ * @param dirTree Nested dir tree to be created
+ * @param sortOrders Mapping from groupName to sort order
+ * @param filePaths The mapping from groupName to file path
+ */
+function createDirTree(parentDir, dirTree, sortOrders, filePaths = {}) {
+  const childrenDirNames = Object.keys(dirTree);
+  const hasChildren = childrenDirNames.length !== 0;
+
+  // @todo write test for this, yolo for now
+  const groupName = parentDir
+    .replace(roadmapContentDirPath, '') // Remove base dir path
+    .replace(/(^\/)|(\/$)/g, '') // Remove trailing slashes
+    .replace(/(^\d+?-)/g, '') // Remove sorting information
+    .replaceAll('/', ':') // Replace slashes with `:`
+    .replace(/:\d+-/, ':');
+
+  const humanizedGroupName = groupName
+    .split(':')
+    .pop()
+    ?.replaceAll('-', ' ')
+    .replace(/^\w/, ($0) => $0.toUpperCase());
+
+  const sortOrder = sortOrders[groupName] || '';
+
+  // Attach sorting information to dirname
+  // e.g. /roadmaps/100-frontend/content/internet
+  // ———> /roadmaps/100-frontend/content/103-internet
+  if (sortOrder) {
+    parentDir = parentDir.replace(/(.+?)([^\/]+)?$/, `$1${sortOrder}-$2`);
+  }
+
+  // If no children, create a file for this under the parent directory
+  if (!hasChildren) {
+    let fileName = `${parentDir}.md`;
+    fs.writeFileSync(fileName, `# ${humanizedGroupName}`);
+
+    filePaths[groupName || 'home'] = fileName.replace(CONTENT_DIR, '');
+    return filePaths;
+  }
+
+  // There *are* children, so create the parent as a directory
+  // and create `index.md` as the content file for this
+  fs.mkdirSync(parentDir);
+
+  let readmeFilePath = path.join(parentDir, 'index.md');
+  fs.writeFileSync(readmeFilePath, `# ${humanizedGroupName}`);
+
+  filePaths[groupName || 'home'] = readmeFilePath.replace(CONTENT_DIR, '');
+
+  // For each of the directory names, create a
+  // directory inside the given directory
+  childrenDirNames.forEach((dirName) => {
+    createDirTree(
+      path.join(parentDir, dirName),
+      dirTree[dirName],
+      dirSortOrders,
+      filePaths
+    );
+  });
+
+  return filePaths;
+}
+
+// Create directories and get back the paths for created directories
+createDirTree(roadmapContentDirPath, dirTree, dirSortOrders);
+console.log('Created roadmap content directory structure');

bin/roadmap-links.cjs

@@ -0,0 +1,44 @@
+const fs = require('fs');
+const path = require('path');
+
+const roadmapId = process.argv[2];
+if (!roadmapId) {
+  console.error('Error: roadmapId is required');
+}
+
+const fullPath = path.join(__dirname, `../src/roadmaps/${roadmapId}`);
+if (!fs.existsSync(fullPath)) {
+  console.error(`Error: path not found: ${fullPath}!`);
+  process.exit(1);
+}
+
+function readFiles(folderPath) {
+  const stats = fs.lstatSync(folderPath);
+
+  if (stats.isFile()) {
+    return [folderPath];
+  }
+
+  const folderContent = fs.readdirSync(folderPath);
+  let files = [];
+
+  for (const file of folderContent) {
+    const filePath = path.join(folderPath, file);
+
+    files = [...files, ...readFiles(filePath)];
+  }
+
+  return files;
+}
+
+const files = readFiles(fullPath);
+let allLinks = [];
+
+files.forEach((file) => {
+  const fileContent = fs.readFileSync(file, 'utf-8');
+  const matches = [...fileContent.matchAll(/\[[^\]]+]\((https?:\/\/[^)]+)\)/g)];
+
+  allLinks = [...allLinks, ...matches.map((match) => match[1])];
+});
+
+allLinks.map((link) => console.log(link));

code_of_conduct.md

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

components/about-header/index.js

@@ -1,22 +0,0 @@
-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

@@ -1,49 +0,0 @@
-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

@@ -1,54 +0,0 @@
-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

@@ -1,133 +0,0 @@
-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

@@ -1,199 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,110 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,65 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,83 +0,0 @@
-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

@@ -1,123 +0,0 @@
-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

@@ -1,57 +0,0 @@
-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

@@ -1,54 +0,0 @@
-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

@@ -1,74 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,3 +0,0 @@
-<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

@@ -1,4 +0,0 @@
-<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

@@ -1,4 +0,0 @@
-<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

@@ -1,3 +0,0 @@
-<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

@@ -1,9 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,77 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,62 +0,0 @@
-#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

@@ -1,41 +0,0 @@
-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

@@ -1,71 +0,0 @@
-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

@@ -1,94 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

@@ -1,62 +0,0 @@
-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

@@ -1,50 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,62 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,57 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,61 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,49 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,42 +0,0 @@
-[
-  {
-    "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

@@ -1,264 +0,0 @@
-[
-  {
-    "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

@@ -1,5 +0,0 @@
-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

@@ -1,3 +0,0 @@
-[![](/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

@@ -1,5 +0,0 @@
-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

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

content/guides/ci-cd.md

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

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

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

content/guides/jwt-authentication.md

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

content/guides/oauth.md

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

content/guides/project-history.md

@@ -1,5 +0,0 @@
-One of my favorite pastimes is going through the history of my favorite projects to learn how they grew over time or how certain features were implemented.
-
-The image below describes how I do that in WebStorm.
-
-[![](/guides/project-history.png)](/guides/project-history.png)

content/guides/proxy-servers.md

@@ -1,47 +0,0 @@
-Internet has connected people across the world using social media and audio/video calling features along with providing an overabundance of knowledge and tools. All this comes with an inherent danger of security and privacy breaches. In this guide we will talk about **proxies** which play a vital role in mitigating these risks. We will cover the following topics in this guide:    
-
-- [Proxy Server](#proxy-server)
-- [Forward Proxy Server](#forward-proxy-server)
-- [Reverse Proxy Server](#reverse-proxy-server)
-- [Summary](#summary)
-
-## Proxy Server  
-
-***Every web request which is sent from the client to a web server goes through some type of proxy server.*** A proxy server acts as a gateway between client *(you)* and the internet and  separates end-users from the websites you browse. It replaces the source IP address of the web request with the proxy server's IP address and then forwards it to the web server. The web server is unaware of the client, it only sees the proxy server.    
-
-![Proxy Server Description](/guides/proxy/proxy-example.png)    
-> NOTE: This is not an accurate description rather just an illustration.    
-
-Proxy servers serve as a single point of control making it easier to enforce security policies. It also provides caching mechanism which stores the requested web pages on the proxy server to improve performance. If the requested web-page is available in cache memory then instead of forwarding the request to the web-server it will send the cached webpage back to the client. This **saves big companies thousands of dollars** by reducing load on their servers as their website is visited by millions of users every day.
-     
-## Forward Proxy Server    
-
-A forward proxy is generally implemented on the client side and **sits in front of multiple clients** or client sources. Forward proxy servers are mainly used by companies to **manage internet usage** of their employees and **restrict content**. It is also used as a **firewall** to secure company's network by blocking any request which would pose threat to the companies's network. Proxy servers are also used to **bypass geo-restriction** and browse content which might be blocked in user's country. It enables users to **browse anonymously**, as the proxy server masks their details from the website's servers. 
-
-![Forward Proxy Description](/guides/proxy/forward-proxy.png)    
-> NOTE: This is not an accurate description rather just an illustration
-
-## Reverse Proxy Server    
-
-Reverse proxy servers are implemented on the **server side** instead of the client side. It **sits in front of multiple webservers** and manages the incoming requests by forwarding them to the web servers. It provides anonymity for the **back-end web servers and not the client**. Reverse proxy servers are generally used to perform tasks such as **authentication, content caching, and encryption/decryption** on behalf of the web server. These tasks would **hog CPU cycles** on the web server and degrade performance of the website by introducing high amount of delay in loading the webpage. Reverse proxies are also used as **load balancers** to distribute the incoming traffic efficiently among the web servers but it is **not optimized** for this task. In essence, reverse proxy server is a gateway to a web-server or group of web-servers. 
-
-![Reverse Proxy Description](/guides/proxy/reverse-proxy.png)    
-> NOTE: This is not an accurate description rather just an illustration. Red lines represent server's response and black lines represent initial request from client(s).    
-
-## Summary   
-
-A proxy server acts as a gateway between client *(you)* and the internet and  separates end-users from the websites you browse. ***The position of the proxy server on the network determines whether it is a forward or a reverse proxy server***.    Forward proxy is implemented on the client side and **sits in front of multiple clients** or client sources and forwards requests to the web server. Reverse proxy servers are implemented on the **server side** it **sits in front of multiple webservers** and manages the incoming requests by forwarding them to the web servers. 
-
-If all this was too much to take in, I have a simple analogy for you.    
-
-At a restaurant the waiter/waitress takes your order and gives it to the kitchen head chef. The head chef then calls out the order and assigns tasks to everyone in the kitchen.    
-
-In this analogy: 
-
-* You are the client
-* Your order is the web request
-* Waiter/Waitress is your forward proxy server
-* Kitchen head chef is the reverse proxy server
-* Other chefs working in the kitchen are the web servers
-
-With that said our guide comes to an end. Thank you for reading and feel free to submit any updates to the guide using the links below.

content/guides/random-numbers.md

@@ -1,5 +0,0 @@
-Random numbers are everywhere from computer games to lottery systems, graphics software, statistical sampling, computer simulation and cryptography. Graphic below is a quick explanation to how the random numbers are generated and why they may not be truly random. 
-
-[![](/guides/random-numbers.png)](/guides/random-numbers.png)
-
-Here is the [original tweet](https://twitter.com/kamranahmedse/status/1237851549302312962) where this image was posted.

content/guides/scaling-databases.md

@@ -1,5 +0,0 @@
-The chart below aims to give you a really basic understanding of how the capability of a DBMS is increased to handle a growing amount of load.
-
-[![](/guides/scaling-databases.svg)](/guides/scaling-databases.svg)
-
-Here is the [original tweet](https://twitter.com/kamranahmedse/status/1234209674003611650) where this image was posted.

content/guides/session-authentication.md

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

content/guides/ssl-tls-https-ssh.md

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