Update forkable roadmap

* Fix gtx-trans close sidepanel

* reset the package-lock.json file

.env.example

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

.eslintrc

@@ -1,18 +0,0 @@
-{
-  "extends": [
-    "next",
-    "next/core-web-vitals",
-    "prettier"
-  ],
-  "rules": {
-    "@next/next/no-img-element": [
-      "off"
-    ],
-    "react/display-name": [
-      "off"
-    ],
-    "react/jsx-no-target-blank": [
-      "off"
-    ]
-  }
-}

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

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

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

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

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

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

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

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

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

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

.github/ISSUE_TEMPLATE/config.yml

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

.github/PULL_REQUEST_TEMPLATE.md

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

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

.github/workflows/deploy.yml

@@ -1,29 +1,39 @@
-name: Deployment to GitHub Pages
+name: Deployment to GH Pages
 on:
   push:
     branches: [ master ]
 env:
-  ROADMAP_GA_SECRET: ${{ secrets.GA_SECRET }}
+  PUBLIC_API_URL: "https://api.roadmap.sh"
+  PUBLIC_EDITOR_APP_URL: "https://draw.roadmap.sh"
+  PUBLIC_AVATAR_BASE_URL: "https://dodrc8eu8m09s.cloudfront.net/avatars"
   GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
   CI: true
-  NEXT_TELEMETRY_DISABLED: 1
 jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v4
+      with:
+        persist-credentials: false
     - uses: actions/setup-node@v1
       with:
-        node-version: 12
+        node-version: 18
+    - name: Prepare Draw Repository
+      run: |
+        git clone https://${{ secrets.GH_PAT }}@github.com/roadmapsh/web-draw.git .temp/web-draw --depth 1
+    - uses: pnpm/action-setup@v2.2.2
+      with:
+        version: 7.13.4
     - 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 generate-renderer
+        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@v4
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      - uses: pnpm/action-setup@v2.2.2
+        with:
+          version: 7.13.4
+      - name: Upgrade dependencies
+        run: |
+          pnpm install
+          npm run upgrade
+          pnpm install --lockfile-only
+      - name: Create PR
+        uses: peter-evans/create-pull-request@v4
+        with:
+          delete-branch: false
+          branch: "update-deps"
+          base: "master"
+          labels: |
+            dependencies
+            automated pr
+          reviewers: kamranahmedse
+          commit-message: "chore: update dependencies to latest"
+          title: "Upgrade dependencies to latest"
+          body: |
+            Updates all dependencies to latest versions.
+            Please review the changes and merge if everything looks good.

.gitignore

@@ -1,36 +1,33 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-out
+.idea
+.temp
+
+# build output
+dist/
+.output/
 
 # dependencies
-/node_modules
-/.pnp
-.pnp.js
+node_modules/
 
-# testing
-/coverage
+scripts/developer-roadmap
 
-# next.js
-/.next/
-/out/
-
-# production
-/build
-
-# misc
-.idea
-.DS_Store
-*.pem
-
-# debug
+# logs
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
 
-# local env files
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
 
-# vercel
-.vercel
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
+/test-results/
+/playwright-report/
+/playwright/.cache/
+tests-examples
+*.csv
+
+/editor/*
+!/editor/readonly-editor.tsx

.npmrc

@@ -0,0 +1,2 @@
+auto-install-peers=true
+strict-peer-dependencies=false

.prettierignore

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

.prettierrc

@@ -1,5 +0,0 @@
-{
-  "semi": true,
-  "singleQuote": true,
-  "tabWidth": 2
-}

.prettierrc.cjs

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

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

.vscode/settings.json

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

README.md

@@ -1,39 +0,0 @@
-<p align="center">
-  <img src="public/brand.png" height="128">
-  <h2 align="center">roadmap.sh</h2>
-  <p align="center">Community driven roadmaps, articles and resources for developers<p>
-  <p align="center">
-    <a href="https://roadmap.sh/guides">
-    	<img src="https://img.shields.io/badge/-Guides-0a0a0a.svg?style=flat&colorA=0a0a0a" alt="roadmaps" />
-    </a>
-    <a href="https://roadmap.sh/roadmaps">
-    	<img src="https://img.shields.io/badge/-Roadmaps-0a0a0a.svg?style=flat&colorA=0a0a0a" alt="roadmaps" />
-    </a>
-    <a href="./contributing/guide.md">
-    	<img src="https://img.shields.io/badge/%E2%9D%A4-Contribute-0a0a0a.svg?style=flat&colorA=0a0a0a" alt="roadmaps" />
-    </a>
-  </p>
-</p>
-
-[roadmap.sh](https://roadmap.sh) is the community effort to create knowledge that is approachable for the developers.
-
-The website is built with Next.js, contains roadmaps which are the step by step guides for developers, guides which are the easier to understand explanations on the complex topics. Anyone can contribute to the website by suggesting changes to existing paths, adding learning resources, becoming an author by adding new guides, updating the existing guides.
-
-## Development
-
-Clone the repository, install the dependencies and start the application
-
-```bash
-git clone https://github.com/kamranahmedse/roadmap.sh
-yarn install
-yarn dev
-```
-
-## Contributions
-
-* Add new Roadmap
-* Suggest changes to existing roadmap
-* Write an article
-* Improve the site's codebase
-* Write tests
-

astro.config.mjs

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

code_of_conduct.md

@@ -0,0 +1,76 @@
+# Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as
+contributors and maintainers pledge to make participation in our project and
+our community a harassment-free experience for everyone, regardless of age, body
+size, disability, ethnicity, sex characteristics, gender identity and expression,
+level of experience, education, socio-economic status, nationality, personal
+appearance, race, religion, or sexual identity and orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment
+include:
+
+- Using welcoming and inclusive language
+- Being respectful of differing viewpoints and experiences
+- Gracefully accepting constructive criticism
+- Focusing on what is best for the community
+- Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+- The use of sexualized language or imagery and unwelcome sexual attention or
+  advances
+- Trolling, insulting/derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or electronic
+  address, without explicit permission
+- Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable
+behavior and are expected to take appropriate and fair corrective action in
+response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies within all project spaces, and it also applies when
+an individual is representing the project or its community in public spaces.
+Examples of representing a project or community include using an official
+project e-mail address, posting via an official social media account, or acting
+as an appointed representative at an online or offline event. Representation of
+a project may be further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting the project team at <kamranahmed.se@gmail.com>. All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. The project team is
+obligated to maintain confidentiality with regard to the reporter of an incident.
+Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good
+faith may face temporary or permanent repercussions as determined by other
+members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
+available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see
+https://www.contributor-covenant.org/faq

components/content-page-header.tsx

@@ -1,60 +0,0 @@
-import { Box, Container, Flex, Heading, Image, Link, Text } from '@chakra-ui/react';
-import React from 'react';
-
-type ContentPageHeaderProps = {
-  formattedDate: string;
-  title: string;
-  subtitle: string;
-  author?: {
-    name: string;
-    twitter: string;
-    picture: string;
-  },
-  subLink?: {
-    text: string;
-    url: string;
-  }
-};
-
-export function ContentPageHeader(props: ContentPageHeaderProps) {
-  const { title, subtitle, author = null, formattedDate, subLink = null } = props;
-
-  return (
-    <Box pt={['35px', '35px', '70px']} pb={['35px', '35px', '55px']} borderBottomWidth={1} mb='30px'>
-      <Container maxW='container.md' position='relative' textAlign={['left', 'left', 'center']}>
-        <Flex alignItems='center' justifyContent={['flex-start', 'flex-start', 'center']}
-              fontSize={['12px', '12px', '14px']}>
-
-          {author?.name && (
-            <>
-              <Link
-                d={['none', 'flex', 'flex']}
-                target='_blank'
-                href={`https://twitter.com/${author.twitter}`}
-                alignItems='center'
-                fontWeight={600}
-                color='gray.500'
-              >
-                <Image alt={''} rounded={'full'} mr='7px' w='22px' src={author.picture} />
-                {author.name}
-              </Link>
-              <Text d={['none', 'inline', 'inline']} mx='7px' color='gray.500' as='span'>&middot;</Text>
-            </>
-          )}
-
-          <Text color='gray.500' as='span'>{formattedDate}</Text>
-          {subLink?.text && (
-            <>
-              <Text d={['none', 'none', 'inline']} mx='7px' color='gray.500' as='span'>&middot;</Text>
-              <Link d={['none', 'none', 'inline']} color='blue.500' fontWeight={500}
-                    href={subLink.url} target={'_blank'}>{subLink.text}</Link>
-            </>
-          )}
-        </Flex>
-        <Heading as='h1' color='black' fontSize={['30px', '30px', '45px']} lineHeight={['40px', '40px', '53px']}
-                 fontWeight={700} my={['5px', '5px', '10px']}>{title}</Heading>
-        <Text fontSize={['14px', '14px', '16px']} color='gray.700'>{subtitle}</Text>
-      </Container>
-    </Box>
-  );
-}

components/custom-ad.tsx

@@ -1,37 +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'
-          >
-            <img
-              src='/fm-img.png'
-              alt='FM Logo'
-              height='100'
-              width='130'
-              style={{ maxWidth: '130px', border: 'none' }}
-            />
-          </a>
-          <a
-            href='https://freemote.com/strategy?sl=roadmap'
-            className='carbon-text'
-            target='_blank'
-          >
-            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'
-        >
-          Sponsored by
-        </a>
-      </span>
-    </div>
-  );
-};

components/dimmed-more.tsx

@@ -1,46 +0,0 @@
-import { Box, Link, Text } from '@chakra-ui/react';
-
-type DimmedMoreProps = {
-  text: string;
-  href: string;
-};
-
-export function DimmedMore(props: DimmedMoreProps) {
-  const { text, href } = props;
-
-  return (
-    <Box position='relative' textAlign='center' bottom='20px'>
-      <Box
-        opacity={1}
-        pointerEvents='none'
-        position='absolute'
-        bottom={0}
-        height='200px'
-        width='100%'
-        background='linear-gradient(180deg, transparent, white)'
-      />
-
-      <Link
-        rounded='20px'
-        display='inline'
-        bg='green.600'
-        color='white'
-        p='7px 20px'
-        href={href}
-        fontWeight={800}
-        fontSize='11px'
-        textTransform='uppercase'
-        my='25px'
-        position='relative'
-        _hover={{
-          textDecoration: 'none',
-          '& .forward-arrow': {
-            transform: 'translateX(3px)'
-          }
-        }}>
-        {text}
-        <Text d='inline-block' as='span' transition='200ms' ml='4px' className='forward-arrow'>&rarr;</Text>
-      </Link>
-    </Box>
-  );
-}

components/footer.tsx

@@ -1,79 +0,0 @@
-import { Box, Container, Flex, Image, Link, Stack, Text } from '@chakra-ui/react';
-import siteConfig from '../content/site.json';
-import { CustomAd } from './custom-ad';
-
-function NavigationLinks() {
-  return (
-    <>
-      <Stack isInline d={['none', 'none', 'flex']} color='gray.400' fontWeight={600} spacing='30px'>
-        <Link _hover={{ color: 'white' }} href='/roadmaps'>Roadmaps</Link>
-        <Link _hover={{ color: 'white' }} href='/guides'>Guides</Link>
-        <Link _hover={{ color: 'white' }} href='/watch'>Videos</Link>
-        <Link _hover={{ color: 'white' }} href='/about'>About</Link>
-        <Link _hover={{ color: 'white' }} href={siteConfig.url.youtube} target='_blank'>YouTube</Link>
-      </Stack>
-
-      <Stack d={['flex', 'flex', 'none']} color='gray.400' fontWeight={600} spacing={0}>
-        <Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }}
-              href='/roadmaps'>Roadmaps</Link>
-        <Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }}
-              href='/guides'>Guides</Link>
-        <Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }}
-              href='/watch'>Videos</Link>
-        <Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }}
-              href='/thanks'>Thanks</Link>
-        <Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }}
-              href='/about'>About</Link>
-        <Link py='7px' _hover={{ color: 'white' }} target='_blank'
-              href={siteConfig.url.youtube}>YouTube</Link>
-      </Stack>
-    </>
-  );
-}
-
-export function Footer() {
-  return (
-    <Box bg='gray.900' p={['25px 0', '25px 0', '40px 0']}>
-      <Container maxW='container.md'>
-        <NavigationLinks />
-
-        <Box mt={['40px', '40px', '50px']} mb='40px' maxW='500px'>
-          <Flex spacing={0} alignItems='center' color='gray.400'>
-            <Link d='flex' alignItems='center' fontWeight={600} _hover={{ textDecoration: 'none', color: 'white' }}
-                  href='/'>
-              <Image alt='' h='25px' w='25px' src='/logo.svg' mr='6px' />
-              roadmap.sh
-            </Link>
-            <Text as='span' mx='7px'>by</Text>
-            <Link bg='blue.500' px='6px' py='2px' rounded='4px' color='white' fontWeight={600} fontSize='13px'
-                  _hover={{ textDecoration: 'none', bg: 'blue.600' }} href={siteConfig.url.twitter}
-                  target='_blank'>@kamranahmedse</Link>
-          </Flex>
-
-          <Text my='15px' fontSize='14px' color='gray.500'>Community created roadmaps, articles, resources and
-            journeys to help you choose your path and grow in your career.</Text>
-
-          <Text fontSize='14px' color='gray.500'>
-            <Text as='span' mr='10px'>&copy; roadmap.sh</Text>&middot;
-            <Link href='/about' _hover={{ textDecoration: 'none', color: 'white' }} color='gray.400'
-                  mx='10px'>FAQs</Link>&middot;
-            <Link href='/terms' _hover={{ textDecoration: 'none', color: 'white' }} color='gray.400'
-                  mx='10px'>Terms</Link>&middot;
-            <Link href='/privacy' _hover={{ textDecoration: 'none', color: 'white' }} color='gray.400'
-                  mx='10px'>Privacy</Link>
-          </Text>
-        </Box>
-      </Container>
-
-      <CustomAd />
-      {process.env.GA_SECRET && false && (
-        <script
-          async
-          type='text/javascript'
-          src='//cdn.carbonads.com/carbon.js?serve=CE7DLK3Y&placement=roadmapsh'
-          id='_carbonads_js'
-        />
-      )}
-    </Box>
-  );
-}

components/global-header.tsx

@@ -1,111 +0,0 @@
-import { Box, CloseButton, Container, Flex, IconButton, Image, Link, Stack, Text } from '@chakra-ui/react';
-import { HamburgerIcon } from '@chakra-ui/icons';
-import { useState } from 'react';
-import siteConfig from '../content/site.json';
-
-type MenuLinkProps = {
-  text: string;
-  link: string;
-};
-
-function MenuLink(props: MenuLinkProps) {
-  const { text, link } = props;
-
-  return <Link
-    borderBottomWidth={0}
-    borderBottomColor='gray.500'
-    _hover={{ textDecoration: 'none', borderBottomColor: 'white' }}
-    fontWeight={500}
-    href={link}
-  >
-    {text}
-  </Link>;
-}
-
-function DesktopMenuLinks() {
-  return (
-    <Stack d={['none', 'flex', 'flex']} shouldWrapChildren isInline spacing='15px' alignItems='center' color='gray.50'
-           fontSize='15px'>
-      <MenuLink text={'Roadmaps'} link={'/roadmaps'} />
-      <MenuLink text={'Guides'} link={'/guides'} />
-      <MenuLink text={'Videos'} link={'/watch'} />
-
-      <Link ml='10px' bgGradient='linear(to-l, yellow.700, red.600)' p='7px 10px' rounded='4px'
-            _hover={{ textDecoration: 'none', bgGradient: 'linear(to-l, red.800, yellow.700)' }}
-            fontWeight={500} href={'/signup'}>Subscribe</Link>
-    </Stack>
-  );
-}
-
-function MobileMenuLinks() {
-  const [isOpen, setIsOpen] = useState(false);
-
-  return (
-    <>
-      <IconButton
-        rounded='5px'
-        padding={0}
-        aria-label={'Menu'}
-        d={['block', 'none', 'none']}
-        icon={<HamburgerIcon color='white' w='25px' height='25px' />}
-        color='white'
-        cursor='pointer'
-        h='auto'
-        bg='transparent'
-        _hover={{ bg: 'transparent' }}
-        _active={{ bg: 'transparent' }}
-        _focus={{ bg: 'transparent' }}
-        onClick={() => setIsOpen(true)}
-      />
-
-      {isOpen && (
-        <Stack color='gray.100'
-               fontSize={['22px', '22px', '22px', '32px']}
-               alignItems='center'
-               justifyContent='center'
-               pos='fixed'
-               left={0}
-               right={0}
-               bottom={0}
-               top={0}
-               bg='gray.900'
-               spacing='12px'
-               zIndex={1}
-        >
-          <Link href='/roadmaps'>Roadmaps</Link>
-          <Link href='/guides'>Guides</Link>
-          <Link href='/watch'>Videos</Link>
-          <Link target='_blank' href={siteConfig.url.youtube}>YouTube</Link>
-          <Link href='/signup'>Subscribe</Link>
-          <CloseButton onClick={() => setIsOpen(false)} pos='fixed' top='3px' right='15px' size='lg' />
-        </Stack>
-      )}
-    </>
-  );
-}
-
-export function GlobalHeader() {
-  return (
-    <Box bg='gray.900' p='20px 0'>
-      <Container maxW='container.md'>
-        <Flex justifyContent='space-between' alignItems='center'>
-          <Box>
-            <Link w='100%'
-                  d='flex'
-                  href='/'
-                  alignItems='center'
-                  color='white'
-                  fontWeight={600}
-                  _hover={{ textDecoration: 'none' }}
-                  fontSize='18px'>
-              <Image alt='' h='30px' w='30px' src='/logo.svg' mr='10px' />
-              <Text d={['block', 'none', 'block']} as='span'>roadmap.sh</Text>
-            </Link>
-          </Box>
-          <DesktopMenuLinks />
-          <MobileMenuLinks />
-        </Flex>
-      </Container>
-    </Box>
-  );
-}

components/guide/guide-grid-item.tsx

@@ -1,31 +0,0 @@
-import { Badge, Box, Heading, Link, Text } from '@chakra-ui/react';
-
-type GuideGridItemProps = {
-  title: string;
-  href: string;
-  subtitle: string;
-  date: string;
-  isNew?: boolean;
-  colorIndex?: number;
-};
-
-const bgColorList = [
-  'gray.700',
-  'purple.800'
-];
-
-export function GuideGridItem(props: GuideGridItemProps) {
-  const { title, subtitle, date, isNew = false, colorIndex = 0, href } = props;
-
-  return (
-    <Box _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }} as={Link} href={href} shadow='xl' p='20px'
-         rounded='10px' bg={bgColorList[colorIndex] ?? bgColorList[0]} flex={1}>
-      <Text mb='10px' fontSize='13px' color='gray.400'>
-        {isNew && <Badge colorScheme={'yellow'} mr='10px'>New</Badge>}
-        {date}
-      </Text>
-      <Heading color='white' mb={'6px'} fontSize='20px'>{title}</Heading>
-      <Text color='gray.300' fontSize='14px'>{subtitle}</Text>
-    </Box>
-  );
-}

components/helmet.tsx

@@ -1,73 +0,0 @@
-import NextHead from 'next/head';
-import siteConfig from '../content/site.json';
-
-type HelmetProps = {
-  title?: string;
-  keywords?: string[];
-  canonical?: string;
-  description?: string;
-};
-
-const Helmet = (props: HelmetProps) => (
-  <NextHead>
-    <meta charSet='UTF-8' />
-
-    <title>{props.title || siteConfig.title}</title>
-    <meta name='description' content={props.description || siteConfig.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={props.title || siteConfig.title} />
-    <meta property='og:description' content={props.description || siteConfig.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={props.title || siteConfig.title} />
-    <meta name='twitter:description' content={props.description || siteConfig.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/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,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
-    <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-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" fill="currentColor">
-    <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/icons/video-icon.tsx

@@ -1,21 +0,0 @@
-export function VideoIcon(props: any) {
-  return (
-    <svg
-      stroke='currentColor'
-      fill='currentColor'
-      strokeWidth='0'
-      viewBox='0 0 24 24'
-      height='1em'
-      width='1em'
-      xmlns='http://www.w3.org/2000/svg'
-      {...props}
-    >
-      <g>
-        <path fill='none' d='M0 0h24v24H0z' />
-        <path
-          d='M3 3.993C3 3.445 3.445 3 3.993 3h16.014c.548 0 .993.445.993.993v16.014a.994.994 0 0 1-.993.993H3.993A.994.994 0 0 1 3 20.007V3.993zm7.622 4.422a.4.4 0 0 0-.622.332v6.506a.4.4 0 0 0 .622.332l4.879-3.252a.4.4 0 0 0 0-.666l-4.88-3.252z'
-        />
-      </g>
-    </svg>
-  );
-}

components/links-list-item.tsx

@@ -1,47 +0,0 @@
-import React from 'react';
-import { Badge, Flex, Link, Text } from '@chakra-ui/react';
-
-type LinksListItemProps = {
-  href: string;
-  title: string;
-  subtitle: string;
-  badgeText?: string;
-  icon?: React.ReactChild;
-  hideSubtitleOnMobile?: boolean;
-};
-
-export function LinksListItem(props: LinksListItemProps) {
-  const { title, subtitle, badgeText, icon, hideSubtitleOnMobile = false, href } = props;
-
-  return (
-    <Link
-      href={href}
-      fontSize={['14px', '14px', '15px']}
-      py='9px'
-      d='flex'
-      flexDirection={['column', 'row', 'row']}
-      fontWeight={500}
-      color='gray.600'
-      alignItems={['flex-start', 'center']}
-      justifyContent={'space-between'}
-      _hover={{
-        textDecoration: 'none',
-        color: 'blue.400',
-        '& .list-item-title': {
-          transform: 'translateX(10px)'
-        }
-      }}
-      isTruncated
-      maxWidth='100%'
-    >
-      <Flex alignItems='center' className='list-item-title' transition={'200ms'}>
-        {icon}
-        <Text maxWidth={'345px'} isTruncated as='span'>{title}</Text>
-        {badgeText &&
-        <Badge pos='relative' top='1px' variant='subtle' colorScheme='purple' ml='10px'>{badgeText}</Badge>}
-      </Flex>
-      <Text d={[hideSubtitleOnMobile ? 'none' : 'inline', 'inline']} mt={['3px', 0]} as='span'
-            fontSize={['11px', '11px', '12px']} color='gray.500'>{subtitle}</Text>
-    </Link>
-  );
-}

components/links-list.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import { StackDivider, VStack } from '@chakra-ui/react';
-
-type LinksListProps = {
-  children: React.ReactNode
-};
-
-export function LinksList(props: LinksListProps) {
-  const { children } = props;
-
-  return (
-    <VStack
-      rounded='5px'
-      divider={<StackDivider borderColor='gray.200' />}
-      spacing={0}
-      align='stretch'
-    >
-      {children}
-    </VStack>
-  );
-}

components/md-renderer/index.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-// @ts-ignore
-import { MDXProvider } from '@mdx-js/react';
-import { ChakraProvider } from '@chakra-ui/react';
-import MdxComponents from './mdx-components';
-import { roadmapTheme } from '../../styles/theme';
-
-type MdRendererType = {
-  children: React.ReactNode
-};
-
-export default function MdRenderer(props: MdRendererType) {
-  return (
-    <ChakraProvider theme={roadmapTheme} resetCSS>
-      <MDXProvider components={MdxComponents}>
-        {props.children}
-      </MDXProvider>
-    </ChakraProvider>
-  );
-};

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

@@ -1,26 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-type EnrichedLinkProps = {
-  href: string;
-  children: React.ReactNode
-}
-
-const Link = styled.a`
-  font-weight: 600;
-  text-decoration: underline;
-`;
-
-const EnrichedLink = (props: EnrichedLinkProps) => {
-  // 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/badge-link.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-
-type BadgeLinkType = {
-  target: string;
-  variant: string;
-  badgeText: string;
-  href: string;
-  children: React.ReactNode
-};
-
-export function BadgeLink(props: BadgeLinkType) {
-  const { target = '_blank', variant = 'success', badgeText, href, children } = props;
-
-  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/md-renderer/mdx-components/blockquote.tsx

@@ -1,27 +0,0 @@
-import styled from 'styled-components';
-
-const BlockQuote = styled.blockquote`
-  padding: 16px 20px;
-  position: relative;
-  background: #e8e8e8;
-  border-radius: 5px;
-  margin-bottom: 18px;
-
-  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/code.tsx

@@ -1,10 +0,0 @@
-import React from 'react';
-import { Code as ChakraCode } from '@chakra-ui/react';
-
-type CodeType = {
-  children: React.ReactNode;
-}
-
-export default function Code(props: CodeType) {
-  return <ChakraCode bg='blue.500'>{props.children}</ChakraCode>;
-}

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

@@ -1,81 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import LinkIcon from 'components/icons/link.svg';
-
-const linkify = (Component: React.FunctionComponent<any>) => {
-  return function EnrichedHeading(props: { children: string }): React.ReactNode {
-    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}`}>
-          <LinkIcon />
-        </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;
-  line-height: 40px;
-  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;
-`;
-
-const Headings = {
-  h1: linkify(H1),
-  h2: linkify(H2),
-  h3: linkify(H3),
-  h4: linkify(H4),
-  h5: linkify(H5),
-  h6: linkify(H6)
-};
-
-export default Headings;

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

@@ -1,47 +0,0 @@
-import styled from 'styled-components';
-
-type IFrameProps = {
-  title: string;
-  src: string;
-};
-
-const AspectRatioBox = styled.div`
-  position: relative;
-  max-width: 100%;
-  margin-bottom: 18px;
-
-  &:before {
-    height: 0;
-    content: "";
-    display: block;
-    padding-bottom: 50%;
-  }
-
-  & > iframe {
-    overflow: hidden;
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    height: 100%;
-  }
-`;
-
-export default function IFrame(props: IFrameProps) {
-  return (
-    <AspectRatioBox>
-      <iframe
-        frameBorder={0}
-        title={props.title}
-        src={props.src}
-        allow={'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture'}
-        allowFullScreen
-      />
-    </AspectRatioBox>
-  );
-}

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

@@ -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.tsx

@@ -1,30 +0,0 @@
-import { Code } from '@chakra-ui/react';
-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 './badge-link';
-import { Li, Ul } from './ul';
-import PremiumBlock from './premium-block';
-
-const MdxComponents = {
-  p: P,
-  ...Headings,
-  pre: Pre,
-  blockquote: BlockQuote,
-  a: EnrichedLink,
-  table: Table,
-  iframe: IFrame,
-  img: Img,
-  code: Code,
-  BadgeLink: BadgeLink,
-  PremiumBlock: PremiumBlock,
-  ul: Ul,
-  li: Li
-};
-
-export default MdxComponents;

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

@@ -1,14 +0,0 @@
-import React from 'react';
-import { Text } from '@chakra-ui/react';
-import styled from 'styled-components';
-
-type EnrichedTextType = {
-  children: React.ReactNode;
-}
-
-export const P = styled.p`
-  line-height: 27px;
-  font-size: 16px;
-  color: black;
-  margin-bottom: 18px;
-`;

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/premium-block.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-import { Box, Button, Heading, Text } from '@chakra-ui/react';
-import { LockIcon } from '@chakra-ui/icons';
-
-type PremiumBlockProps = {
-  title: string;
-  description: string;
-};
-
-export default function PremiumBlock(props: PremiumBlockProps) {
-  return (
-    <Box p='40px' textAlign='center' rounded='5px' mb='18px' bg='gray.50' borderWidth={1}>
-      <LockIcon color='gray.300' height='45px' w='45px' mb='18px' />
-      <Heading as='h3' fontSize='30px' mb='10px'>{props.title}</Heading>
-      <Text mb='18px'>{props.description}</Text>
-      <Button colorScheme='green'>Become a Member</Button>
-    </Box>
-  );
-}

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/md-renderer/mdx-components/ul.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-import { UnorderedList } from '@chakra-ui/react';
-import styled from 'styled-components';
-
-export const Ul = styled.ul`
-  margin-left: 40px;
-  margin-bottom: 18px;
-`;
-
-export const Li = styled.li`
-  margin-bottom: 7px;
-`;

components/opensource-banner.tsx

@@ -1,46 +0,0 @@
-import { Box, Container, Heading, Link, Text } from '@chakra-ui/react';
-
-export function OpensourceBanner() {
-  return (
-    <Box borderTopWidth={1} pt={['45px', '45px', '70px']} pb={['20px', '20px', '30px']} textAlign='center'>
-      <Container maxW='container.md'>
-        <Heading fontSize={['25px', '25px', '35px']} mb={['10px', '10px', '20px']}>Open Source</Heading>
-        <Text lineHeight='26px' fontSize={['15px', '15px', '16px']} mb='20px'>The project is OpenSource,&nbsp;
-          <Link
-            _hover={{ textDecoration: 'none' }}
-            href='https://github.com/search?o=desc&q=stars%3A%3E100000&s=stars&type=Repositories'
-            target='_blank'
-            borderBottomWidth={1}
-            fontWeight={600}
-          >7th most starred project on GitHub</Link> and is visited by hundreds of thousands of
-          developers every month.</Text>
-        <iframe
-          src='https://ghbtns.com/github-btn.html?user=kamranahmedse&repo=developer-roadmap&type=star&count=true&size=large'
-          frameBorder='0'
-          scrolling='0'
-          width='170'
-          height='30'
-          style={{ margin: 'auto', marginBottom: '30px' }}
-          title='GitHub'
-        />
-
-        <Text lineHeight={['25px', '25px', '26px']} fontSize={['15px', '15px', '16px']} mb='15px'>A considerable amount of my time is spent doing unpaid
-          community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to
-          produce more open-source and free educational material consumed by hundreds of thousands of developers every
-          month.</Text>
-
-        <Box>
-          <iframe
-            src='https://ghbtns.com/github-btn.html?user=kamranahmedse&type=sponsor&size=large'
-            frameBorder='0'
-            scrolling='0'
-            width='260'
-            height='30'
-            title='GitHub'
-            style={{ margin: 'auto' }}
-          />
-        </Box>
-      </Container>
-    </Box>
-  );
-}

components/page-header.tsx

@@ -1,35 +0,0 @@
-import { Box, Container, Heading, Text } from '@chakra-ui/react';
-import React from 'react';
-
-type PageHeaderProps = {
-  title: string;
-  subtitle: string;
-  children?: React.ReactNode;
-};
-
-export function PageHeader(props: PageHeaderProps) {
-  const { title, subtitle, children } = props;
-
-  return (
-    <Box pt={['25px', '20px', '45px']} pb={['20px', '15px', '30px']} borderBottomWidth={1} mb='30px'>
-      <Container maxW='container.md' position='relative'>
-        <Heading
-          as='h1'
-          color='black'
-          fontSize={['33px', '33px', '40px']}
-          fontWeight={700}
-          mb={['2px', '2px', '5px']}
-        >
-          {title}
-        </Heading>
-        <Text fontSize={['14px', '14px', '15px']}>{subtitle}</Text>
-      </Container>
-
-      {children && (
-        <Container maxW='container.md'>
-          {children}
-        </Container>
-      )}
-    </Box>
-  );
-}

components/roadmap/home-roadmap-item.tsx

@@ -1,47 +0,0 @@
-import { Box, Heading, Link, Text, Tooltip } from '@chakra-ui/react';
-import { InfoIcon } from '@chakra-ui/icons';
-
-type RoadmapGridItemProps = {
-  title: string;
-  subtitle: string;
-  isCommunity?: boolean;
-  colorIndex?: number;
-  url: string;
-};
-
-const bgColorList = [
-  'blue.900',
-  'red.800',
-  'green.800',
-  'teal.800',
-  'gray.800',
-  'red.900'
-];
-
-export function HomeRoadmapItem(props: RoadmapGridItemProps) {
-  const { title, subtitle, isCommunity, colorIndex = 0, url } = props;
-
-  return (
-    <Box
-      as={Link}
-      href={url}
-      _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }}
-      flex={1}
-      shadow='2xl'
-      bg={bgColorList[colorIndex] ?? bgColorList[0]}
-      color='white'
-      p='15px'
-      rounded='10px'
-      pos='relative'
-    >
-      {isCommunity && (
-        <Tooltip label={'Community contribution'} hasArrow placement='top'>
-          <InfoIcon opacity={0.5} position='absolute' top='10px' right='10px' />
-        </Tooltip>
-      )}
-
-      <Heading fontSize={['17px', '17px', '22px']} mb='5px'>{title}</Heading>
-      <Text color='gray.200' fontSize={['13px']}>{subtitle}</Text>
-    </Box>
-  );
-}

components/roadmap/roadmap-grid-item.tsx

@@ -1,89 +0,0 @@
-import { Badge, Box, Flex, Heading, Link, Text, Tooltip } from '@chakra-ui/react';
-import { InfoIcon } from '@chakra-ui/icons';
-
-type RoadmapGridItemProps = {
-  title: string;
-  subtitle: string;
-  href: string;
-  isCommunity?: boolean;
-  isUpcoming?: boolean;
-  colorIndex?: number;
-};
-
-const bgColorList = [
-  'gray.900',
-  'purple.900',
-  'blue.900',
-  'red.900',
-  'green.900',
-  'teal.900',
-  'yellow.900',
-  'cyan.900',
-  'pink.900',
-
-  'gray.800',
-  'purple.800',
-  'blue.800',
-  'red.800',
-  'green.800',
-  'teal.800',
-  'yellow.800',
-  'cyan.800',
-  'pink.800',
-
-  'gray.700',
-  'purple.700',
-  'blue.700',
-  'red.700',
-  'green.700',
-  'teal.700',
-  'yellow.700',
-  'cyan.700',
-  'pink.700',
-
-  'gray.600',
-  'purple.600',
-  'blue.600',
-  'red.600',
-  'green.600',
-  'teal.600',
-  'yellow.600',
-  'cyan.600',
-  'pink.600'
-];
-
-export function RoadmapGridItem(props: RoadmapGridItemProps) {
-  const { title, subtitle, isCommunity = false, isUpcoming = false, colorIndex = 0, href = '/' } = props;
-
-  return (
-    <Box _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }} as={Link} href={href} shadow='xl' p='20px'
-          rounded='10px' bg={bgColorList[colorIndex] ?? bgColorList[0]} flex={1} pos='relative'>
-
-      {isCommunity && (
-        <Tooltip label={'Community contribution'} hasArrow placement='top'>
-          <InfoIcon opacity={0.5} color='gray.100' position='absolute' top='10px' right='10px' />
-        </Tooltip>
-      )}
-
-      <Heading color='white' mb={'6px'} fontSize='20px'>{title}</Heading>
-      <Text color='gray.300' fontSize='14px'>{subtitle}</Text>
-
-      {isUpcoming && (
-        <Flex
-          alignItems='center'
-          justifyContent='center'
-          pos='absolute'
-          left={0}
-          right={0}
-          top={0}
-          bottom={0}
-          rounded='10px'
-        >
-          <Text color='white' bg='yellow.900' zIndex={1} fontWeight={600} p={'5px 10px'}
-                rounded='10px'>Upcoming</Text>
-          <Box bg={'black'} pos='absolute' top={0} left={0} right={0} bottom={0} rounded={'10px'} opacity={0.5} />
-        </Flex>
-      )}
-    </Box>
-  );
-}

components/updates-banner.tsx

@@ -1,40 +0,0 @@
-import { Box, Button, Container, Flex, Heading, Link, Text } from '@chakra-ui/react';
-import siteConfig from '../content/site.json';
-
-export function UpdatesBanner() {
-  return (
-    <Box borderTopWidth={1} mt='60px' pt={['40px', '40px', '70px']} pb={['40px', '45px', '80px']} textAlign='left'
-         bg='gray.800'>
-      <Container maxW='container.md'>
-        <Heading color={'gray.100'} fontSize={['25px', '25px', '35px']} mb={['5px', '5px', '15px']}>Stay
-          Informed</Heading>
-        <Text color='gray.400' lineHeight='26px' fontSize={['15px', '15px', '16px']} mb='20px'>Subscribe yourself to get
-          updates, new
-          guides, videos and roadmaps in your inbox.</Text>
-
-        <Flex flexDirection={['column', 'column', 'row']}>
-          <Box mr={['0', '0', '20px']} mb={['15px', '15px', 0]}>
-            <Button as={Link} href='/signup' width={['full', 'auto']} fontSize={['14px', '14px', '16px']}
-                    variant='outline' borderWidth={2}
-                    colorScheme='green' _hover={{ color: 'green.200', textDecoration: 'none' }}>
-              Subscribe to Updates
-            </Button>
-            <Text color='gray.500' fontSize='13px' mt='5px'>Free subscription for updates</Text>
-          </Box>
-          <Box>
-            <Button as={Link}
-                    href={siteConfig.url.sponsor}
-                    target='_blank'
-                    width={['full', 'auto']}
-                    fontSize={['14px', '14px', '16px']}
-                    _hover={{ textDecoration: 'none', bg: 'yellow.500' }}
-                    colorScheme='yellow'>Updates & Paid Content</Button>
-            <Text color='gray.500' fontSize='13px' mt='5px'>Support the project by paying as little as <Text as='span'
-                                                                                                             fontWeight={600}>5$
-              per month</Text></Text>
-          </Box>
-        </Flex>
-      </Container>
-    </Box>
-  );
-}

components/watch/video-grid-item.tsx

@@ -1,70 +0,0 @@
-import { Badge, Box, Heading, Link, Text } from '@chakra-ui/react';
-
-type VideoGridItemProps = {
-  href: string;
-  title: string;
-  subtitle: string;
-  date: string;
-  isNew?: boolean;
-  isPro?: boolean;
-  colorIndex?: number;
-};
-
-const bgColorList = [
-  'gray.900',
-  'purple.900',
-  'blue.900',
-  'red.900',
-  'green.900',
-  'teal.900',
-  'yellow.900',
-  'cyan.900',
-  'pink.900',
-
-  'gray.800',
-  'purple.800',
-  'blue.800',
-  'red.800',
-  'green.800',
-  'teal.800',
-  'yellow.800',
-  'cyan.800',
-  'pink.800',
-
-  'gray.700',
-  'purple.700',
-  'blue.700',
-  'red.700',
-  'green.700',
-  'teal.700',
-  'yellow.700',
-  'cyan.700',
-  'pink.700',
-
-  'gray.600',
-  'purple.600',
-  'blue.600',
-  'red.600',
-  'green.600',
-  'teal.600',
-  'yellow.600',
-  'cyan.600',
-  'pink.600'
-];
-
-export function VideoGridItem(props: VideoGridItemProps) {
-  const { title, subtitle, date, isNew = false, isPro = false, colorIndex = 0, href } = props;
-
-  return (
-    <Box _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }} as={Link} href={ href } shadow='xl' p='20px'
-          rounded='10px' bg={bgColorList[colorIndex] ?? bgColorList[0]} flex={1}>
-      <Text mb='7px' fontSize='12px' color='gray.400'>
-        {isNew && <Badge colorScheme={'yellow'} mr='10px'>New</Badge>}
-        {isPro && <Badge colorScheme={'blue'} mr='10px'>PRO</Badge>}
-        {date}
-      </Text>
-      <Heading color='white' mb={'6px'} fontSize='20px' lineHeight={'28px'}>{title}</Heading>
-      <Text color='gray.300' fontSize='14px'>{subtitle}</Text>
-    </Box>
-  );
-}

content/authors.json

@@ -1,43 +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.",
-    "picture": "/authors/lesovsky.jpeg"
-  }
-]

content/guides.json

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

content/guides/asymptotic-notation.md

@@ -1,16 +0,0 @@
-export const guideMeta = {
-    "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"
-};
-
-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.

content/guides/sso.md

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

content/guides/token-authentication.md

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

content/guides/unfamiliar-codebase.md

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

content/guides/upcoming.md

@@ -1,11 +0,0 @@
-> **Roadmap is not ready yet**. Please check back later or [subscribe to get notified](/signup).
-
-While we prepare the roadmap, follow this simple advice to learn anything
- 
-> Just **pick a project and start working on it**, you will learn all that you need along the way.
-
-**→**   [All Roadmaps](/roadmaps)  •  [Programming guides](/guides)  •  [Subscribe](/signup) 
-
-
-
- 

content/guides/what-is-internet.md

@@ -1,62 +0,0 @@
-Since the explosive growth of web-based applications, every developer could stand to benefit from understanding how the Internet works. In this article, accompanied with an introductory series of short videos about the Internet from [code.org](https://code.org), you will learn the basics of the Internet and how it works. After going through this article, you will be able to answer the below questions:
-
-* What is the Internet?
-* How does the information move on the internet?
-* How do the networks talk to each other and the protocols involved?
-* What's the relationship between packets, routers, and reliability? 
-* HTTP and the HTML – How are you viewing this webpage in your browser?
-* How is the information transfer on the internet made secure?
-* What is cybersecurity and what are some common internet crimes?
-
-## What is the Internet?
-
-The Internet is a global network of computers connected to each other which communicate through a standardized set of protocols. 
-
-In the video below, Vint Cerf, one of the "fathers of the internet," explains the history of how the Internet works and how no one person or organization is really in charge of it.  
-
-<iframe width="100%" height="400" src="https://www.youtube.com/embed/Dxcc6ycZ73M" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-
-
-## Wires, Cables, and Wi-Fi
-
-Information on the Internet moves from computer to another in the form of bits over various mediums, including Ethernet cables, fiber optic cables, and wireless signals (i.e., radio waves).
-
-In the video linked below, you will learn about the different mediums for data transfer on the Internet and the pros and cons for each. 
-
-<iframe width="100%" height="400" src="https://www.youtube.com/embed/ZhEf7e4kopM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-
-## IP Addresses and DNS
-
-Now that you know about the physical medium for the data transfer over the internet, it's time to learn about the protocols involved. How does the information traverse from one computer to another in this massive global network of computers? 
-
-In the video below, you will get a brief introduction to IP, DNS, and how these protocols make the Internet work. 
-
-<iframe width="100%" height="400" src="https://www.youtube.com/embed/5o8CwafCxnU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-
-## Packets, Routing, and Reliability
-
-Information transfer on the Internet from one computer to another does not need to follow a fixed path; in fact, it may change paths during the transfer. This information transfer is done in the form of packets and these packets may follow different routes depending on certain factors.
-
-In this video, you will learn about how the packets of information are routed from one computer to another to reach the destination.  
-
-<iframe width="100%" height="400" src="https://www.youtube.com/embed/AYdF7b3nMto" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-
-## HTTP and HTML
-
-HTTP is the standard protocol by which webpages are transferred over the Internet. The video below is a brief introduction to HTTP and how web browsers load websites for you.
-
-<iframe width="100%" height="400" src="https://www.youtube.com/embed/kBXQZMmiA4s" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-
-## Encryption and Public Keys
-
-Cryptography is what keeps our communication secure on the Internet. In this short video, you will learn the basics of cryptograpy, SSL/TLS, and how they help make the communication on the Internet secure.
-
-<iframe width="100%" height="400" src="https://www.youtube.com/embed/ZghMPWGXexs" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-
-## Cybersecurity and Crime
-
-In this video, you will learn about the basics of cybersecurity and common cybercrimes
-
-<iframe width="100%" height="400" src="https://www.youtube.com/embed/AuYNXgO_f3Y" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-
-And that wraps it up for this article. To learn more about the Internet, [Kamran Ahmed](https://twitter.com/kamranahmedse) has a nice little guide on [DNS: How a website is found on the Internet](/guides/dns-in-one-picture). Also, go through the episodes of [howdns.works](https://howdns.works/) and read this [cartoon intro to DNS over HTTPS](https://hacks.mozilla.org/2018/05/a-cartoon-intro-to-dns-over-https/).

content/guides/why-build-it-and-they-will-come-wont-work-anymore.md

@@ -1,69 +0,0 @@
-We all have heard the mantra *"build it and they will come"* many times. Stories of people building a startup or project and seemingly stumbling upon a goldmine aren't few, but they aren't the rule. These stories are still the exception in the mass of launched projects and startups.
-
-Before the [Wright brothers](https://en.wikipedia.org/wiki/Wright_brothers) built their Kitty Hawk, people generally believed heavy objects could not fly - physics simply forbade it. The idea to regularly board airplanes as we do it these days was unthinkable. It was considered an unrealistic daydream for humans to ever claim the sky. When the first airplanes took off, people were fascinated, of course. It was a topic people continued to talk about for ages. Technology had made something impossible possible. While the wording "build it and they will come" originated from the movie [Field of Dreams](https://en.wikipedia.org/wiki/Field_of_Dreams), this and similar historic events gave birth to the idea behind it.
-
-The engineers' and inventors' dreams came true: spend time doing what you love while the success follows magically. The internet and web-standards democratized access to this dream. But with it, the idea behind it faded and became less and less powerful. In 2020, there are very strong signs the popular saying isn't correct anymore.
-
-
-Why doesn't "build it and they will come" work anymore?
--------------------------------------------------------
-
-There are a few reasons working hard to make "build it and they will come" a thing of the past. This being said, it doesn't mean you can't succeed building a side-project anymore. You've just got to adjust the way you are building it.
-
-### Building got much easier
-
-As a software engineer, some websites are a blessing. Most of us couldn't work without GitHub, Stackoverflow and of course Google, ahem, DuckDuckGo. These powerful sites help us to solve problems, learn new techniques and find the right libraries to make building projects easier. If any of these sites are down, most engineers take a break and go for a coffee instead of trying to continue working. Combine this with more sophisticated web-standards and easier access to tooling, and you arrive at a world where building projects isn't just a job for highly specialist developers anymore. Powerful frameworks such as [Laravel](https://laravel.com/) and [Quasar Framework](https://quasar.dev/) are available for anyone to build projects on - for free.
-
-In fact, building projects got to a point where some people simply build them as an exercise or hobby. If you spend some time browsing GitHub you will be surprised by the open source projects people built without any commercial goals. "Low code" and "No code" are the next wave of people building projects with less technological background.
-
-### Too much going on: information overload
-
-We are living in a world with information overload. In the online sphere, you can find a lot of useful information. But there is also a lot of noise. For each piece of information or advice you can find a number of opposing statements. This is partly due to the fact that the internet made it much easier to publish and share information. Everyone has been given a voice - for good or bad. This makes it much harder to reach potential users. Your new project probably just drowns amongst kitten videos, opinions, and news. Never has the average lifetime of published content been so low. You've got to come up with a marketing plan before setting out on the journey.
-
-### Smaller Problems
-
-Besides building being easier than ever before and attention being in short supply, there is another issue making the life of makers, inventors and engineers harder: today's problems are much smaller. Back when the previously mentioned Wright Brothers set out, they fascinated people with the problem they were aiming to address: flying. Unless your name is Elon, your problem is unlikely to attract many people naturally. As a solo developer or indie hacker, the chances are higher for having a much smaller problem in a niche (of a niche). With the information overload mentioned before, niches are pretty much the only way to build a side-project or startup and succeed.
-
-Does sound pretty grim for inventors, developers and engineers? Well, yes and no. We've got to tweak the approach to get in front of the eye of potential users and customers.
-
-
-How to market your project nowadays?
-------------------------------------
-
-The very first step to improving the odds of success is [idea validation](https://peterthaleikis.com/business-idea-validation/). While this sounds fairly obvious, many engineers and developers still don't validate their ideas before starting to build the MVP. The result is another stale project and wasted effort. To succeed you need to work on marketing before you start building anything. In the link mentioned before, I describe my approach to validation and collecting useful marketing information at the same time.
-
-### Build your Audience first and the project after.
-
-Build your audience before you build your project. Spend your time connecting with potential users, learn from their needs and talk about their problems. This will help you market your project later on. Audience first, project second. There are numerous ways to build an audience. One of the simplest and easiest is to start with a personal or [project blog](https://startupnamecheck.com/blog/how-to-start-a-small-business-blog).
-
-Don't use Medium or a similar service - opt for a self-hosted blog as it allows you to build the blog freely to your needs and have decent links back to your project later on. Don't forget to add a newsletter. Newsletters are a key to reconnect in our world of short attention spans.
-
-### Tool by Tool
-
-Another approach is the "Tool by Tool" approach. I've first noticed this approach being used by Shopify. The team at Shopify are providing little tools such as a [logo generator](https://hatchful.shopify.com/) and release these tools free for anyone to use. This not just builds goodwill with people; it also allows Shopify to attract powerful backlinks to their projects. As developers we are in the perfect position to build such mini-tools. It boosts morale and drives attention at the same time.
-
-Spend some time evaluating where your project or product will deliver value to the end-user. Look at options to split off small, independent tools. Build these and launch them before launching the whole product. This allows you to practice launching and promoting your part-projects at the same time. With each backlink to your part-projects you will enhance your ranking in Google. An example for a maker following this approach is [Kamban](https://kambanthemaker.com/) with [FlatGA](https://flatga.io/). He built FlatGA as phase one of a bigger project currently in development.
-
-### Join a Maker community
-
-While you are building your part-projects, don't forget to discuss the progress publicly. This helps to attract an audience around your work and makes the launches easier. You can use Twitter threads and Reddit posts to share updates. A maker community such as [makerlog](https://getmakerlog.com/) or [WIP.chat](https://wip.chat) can also extend your reach. These allow you to get instant feedback, keep yourself accountable and they will enhance your reach at the same time.
-
-### Getting ready to Launch
-
-Launching seems like this special moment when you release your project into the wide world. Often this moment is combined with high expectations and developers consider launching their project the key - if not only - part of their approach to marketing. While launching can help to attract some initial customers, it shouldn't be your only idea when it comes to marketing. You should also know that launching isn't a single event. You can (and should) launch again and again. Every time you launch you are increasing the chance to reach more and new customers. After the launch is before the launch.
-
-### Marketing Is an On-going Fight
-
-Many developers plan to launch their product on a few sites and see where it takes their project from there on. This works well, if your product goes viral by luck. A much more sustainable approach is constantly working a little on it. Marketing is most effective, if done consistently. That holds true for blogging as well as most other forms of marketing. A simple approach to keep you on the path to market your project regularly is subscribing to a free [newsletter with small marketing opportunities](https://wheretopost.email). This way, you are regularly reminded and given bite-sized tasks to complete.
-
-
-Closing Words
--------------
-
-I hope the article helped you to wrap your head around the idea that building side-projects alone doesn't solve any issues anymore. If you like what you've just read and want to read more, please consider subscribing to [my newsletter](https://peterthaleikis.com/newsletter). I'll send out the occasional email about interesting new articles or side-projects.
-
-
-About the author
-----------------
-
-[Peter Thaleikis](https://peterthaleikis.com/) a software engineer and business owner. He has been developing web applications since around 2000. Before he started his own software development company [Bring Your Own Ideas Ltd.](https://bringyourownideas.com/), he has been Lead Developer for multiple organisations.

content/pages/about.md

@@ -1,67 +0,0 @@
-## What is roadmap.sh?
-
-Roadmap.sh is the place containing community curated roadmaps, study plans, paths and resources for the budding
-developers. It started as a [set of charts to guide the developers](https://github.com/kamranahmedse/developer-roadmap)
-who are confused about what should they learn next but that alone wasn't enough so I expanded it into the website to get
-more contributors involved.
-
-## What are the plans for roadmap.sh?
-
-The website started off as
-a [simple repository containing a few charts](https://github.com/kamranahmedse/developer-roadmap) for developers and
-based on my personal opinions but it could have been much more than that so I decided to expand it to a website where
-people can contribute to study plans with their areas of expertise as well, add more roadmaps, write guides etc.
-
-We haven't opened up the sign ups for now but we will be doing. My long term plans for this website are to turn it into
-a goto place for the developers to seek guidance about their careers, help others, share their journeys, incentivize the
-learnings, get feedbacks on their projects etc.
-
-## How did you build roadmap.sh?
-
-The basic version of the website has been built with [Next.js](https://github.com/zeit/next.js/), is opensource and can
-be found on [github](https://github.com/kamranahmedse/roadmap.sh). It was hastily done to get it out in front of the
-people and get people to start contributing so it might be rough on the edges, but that is where we need your help.
-
-## How does it make money?
-
-It doesn't make any money. I have been using my personal time and budget to build it. I did not create this website with
-any intentions of monetization but as a good will, to help the people get out of the frustration that I was once in.
-
-Having said that, I love teaching and my future plans are to be able to work full-time on roadmap.sh for which it has to
-make enough money to pay for my rent, groceries, bills, travel expenses, etc but even if it doesn't it's likely I'll
-continue growing the site however I can. My focus at the moment is not making money from it and just add content that
-creates value for the people.
-
-> Sponsor the efforts by [paying as little as 5$ per month](https://github.com/sponsors/kamranahmedse) or with [one time payment via paypal](https://paypal.me/kamranahmedse). Alternatively, reach out to me at [kamranahmed.se@gmail.com](mailto:kamranahmed.se@gmail.com).
-
-## Can I contribute?
-
-You definitely can, infact you are encouraged to do that. Even your minor contributions such as typo fixes count. The
-source code of the website can be [found on Github](https://github.com/kamranahmedse/roadmap.sh). Your contributions can
-be:
-
-* Adding a new roadmap
-* Updating existing roadmap
-* Suggesting changes to the existing roadmaps
-* Writing a Guide
-* Updating an existing guide
-* Fixing grammar mistakes, typos on the website or the content
-* Updating the UI of the website
-* Refactoring the codebase
-* Becoming a sponsor
-
-Just make sure
-to [follow the contribution guidelines](https://github.com/kamranahmedse/roadmap.sh/tree/master/contributing) when you
-decide to contribute.
-
-## Can I redistribute the content?
-
-No, the license of the content on this website does not allow you to redistribute any of the content on this website
-anywhere. You can use it for personal use or share the link to the content if you have to but redistribution is not
-allowed.
-
-## What is the best way to contact you?
-
-Tweet or send me a message [@kamranahmedse](https://twitter.com/kamranahmedse) or email me
-at [kamranahmed.se@gmail.com](mailto:kamranahmed.se@gmail.com). I get lots of messages so apologies in advance if you don't hear back
-from me soon but I do reply to everyone.

content/roadmaps.json

@@ -1,284 +0,0 @@
-[
-  {
-    "seo": {
-      "title": "Learn to become a modern frontend developer",
-      "description": "Community driven, articles, resources, guides, interview questions, quizzes for modern frontend development. Learn to become a modern frontend developer by following the steps, skills, resources and guides listed in this roadmap.",
-      "keywords": [
-        "guide to becoming a developer",
-        "guide to becoming a frontend developer",
-        "frontend developer",
-        "frontend engineer",
-        "frontend skills",
-        "frontend development",
-        "javascript developer",
-        "frontend development skills",
-        "frontend development skills test",
-        "frontend engineer roadmap",
-        "frontend developer roadmap",
-        "become a frontend developer",
-        "frontend developer career path",
-        "javascript developer",
-        "modern javascript developer",
-        "node developer",
-        "skills for frontend development",
-        "learn frontend development",
-        "what is frontend development",
-        "frontend developer quiz",
-        "frontend developer interview questions"
-      ]
-    },
-    "title": "Frontend Developer",
-    "description": "Step by step guide to becoming a modern frontend developer in 2021",
-    "featuredTitle": "Frontend",
-    "featuredDescription": "Step by step guide to becoming a frontend developer in 2021",
-    "author": {
-      "name": "Kamran Ahmed",
-      "url": "https://twitter.com/kamranahmedse"
-    },
-    "featured": true,
-    "imagePath": "/roadmaps/frontend.png",
-    "resourcesPath": "/roadmaps/1-frontend/resources.md",
-    "pdfUrl": "https://kamranahmedse.gumroad.com/l/frontend-roadmap",
-    "id": "frontend",
-    "isUpcoming": false
-  },
-  {
-    "seo": {
-      "title": "Learn to become a modern backend developer",
-      "description": "Community driven, articles, resources, guides, interview questions, quizzes for modern backend development. Learn to become a modern backend developer by following the steps, skills, resources and guides listed in this roadmap.",
-      "keywords": [
-        "guide to becoming a developer",
-        "guide to becoming a backend developer",
-        "backend developer",
-        "backend engineer",
-        "backend skills",
-        "backend development",
-        "javascript developer",
-        "backend development skills",
-        "backend development skills test",
-        "backend engineer roadmap",
-        "backend developer roadmap",
-        "become a backend developer",
-        "backend developer career path",
-        "javascript developer",
-        "modern javascript developer",
-        "node developer",
-        "skills for backend development",
-        "learn backend development",
-        "what is backend development",
-        "backend developer quiz",
-        "backend developer interview questions"
-      ]
-    },
-    "title": "Backend Developer",
-    "description": "Step by step guide to becoming a modern backend developer in 2021",
-    "featuredTitle": "Backend",
-    "featuredDescription": "Step by step guide to becoming a backend developer in 2021",
-    "featured": true,
-    "imagePath": "/roadmaps/backend.png",
-    "resourcesPath": "/roadmaps/2-backend/resources.md",
-    "author": {
-      "name": "Kamran Ahmed",
-      "url": "https://twitter.com/kamranahmedse"
-    },
-    "pdfUrl": "https://kamranahmedse.gumroad.com/l/backend-roadmap",
-    "id": "backend",
-    "isUpcoming": false
-  },
-  {
-    "seo": {
-      "title": "DevOps Roadmap: Learn to become a DevOps Engineer or SRE",
-      "description": "Community driven, articles, resources, guides, interview questions, quizzes for DevOps. Learn to become a modern DevOps engineer by following the steps, skills, resources and guides listed in this roadmap.",
-      "keywords": [
-        "guide to becoming a devops enginer",
-        "devops roadmap",
-        "sre roadmap",
-        "site reliability engineer roadmap",
-        "operations roles",
-        "become devops",
-        "devops skills",
-        "modern devops skills",
-        "devops skills test",
-        "skills for devops",
-        "learn devops",
-        "what is devops",
-        "what is sre",
-        "devops quiz",
-        "devops interview questions"
-      ]
-    },
-    "title": "DevOps Roadmap",
-    "description": "Step by step guide for DevOps, SRE or any other Operations Role in 2021",
-    "featuredTitle": "DevOps",
-    "featuredDescription": "Step by step guide for DevOps or operations role in 2021",
-    "featured": true,
-    "imagePath": "/roadmaps/devops.png",
-    "resourcesPath": "/roadmaps/3-devops/resources.md",
-    "versions": [
-      "latest",
-      "2018",
-      "2017"
-    ],
-    "author": {
-      "name": "Kamran Ahmed",
-      "url": "https://twitter.com/kamranahmedse"
-    },
-    "pdfUrl": "https://kamranahmedse.gumroad.com/l/devops-roadmap",
-    "id": "devops",
-    "isUpcoming": false
-  },
-  {
-    "seo": {
-      "title": "React Developer Roadmap: Learn to become a React developer",
-      "description": "Community driven, articles, resources, guides, interview questions, quizzes for react development. Learn to become a modern React developer by following the steps, skills, resources and guides listed in this roadmap.",
-      "keywords": [
-        "guide to becoming a react developer",
-        "react developer roadmap",
-        "react roadmap",
-        "become react developer",
-        "react developer skills",
-        "react skills test",
-        "skills for react development",
-        "learn react development",
-        "what is react",
-        "react quiz",
-        "react interview questions"
-      ]
-    },
-    "title": "React Developer",
-    "description": "Everything that is there to learn about React and the ecosystem in 2021.",
-    "featuredTitle": "React",
-    "featuredDescription": "Step by step guide to become a React Developer in 2021",
-    "isTextHeavy": false,
-    "isCommunity": false,
-    "featured": true,
-    "contentPath": "/roadmaps/4-react/landscape.md",
-    "resourcesPath": "/roadmaps/4-react/resources.md",
-    "versions": [
-      "latest",
-      "2018",
-      "2017"
-    ],
-    "author": {
-      "name": "Kamran Ahmed",
-      "url": "https://twitter.com/kamranahmedse"
-    },
-    "pdfUrl": "https://kamranahmedse.gumroad.com/l/react-roadmap",
-    "id": "react",
-    "isUpcoming": false
-  },
-  {
-    "seo": {
-      "title": "DBA Roadmap: Learn to become a database administrator with PostgreSQL",
-      "description": "Community driven, articles, resources, guides, interview questions, quizzes for DevOps. Learn to become a modern DevOps engineer by following the steps, skills, resources and guides listed in this roadmap.",
-      "keywords": [
-        "guide to becoming a database administrator",
-        "guide to becoming a DBA",
-        "dba roadmap",
-        "db administrator roadmap",
-        "database administrator roadmap",
-        "postgresql roadmap",
-        "dba skills",
-        "db administrator skills",
-        "become dba",
-        "postgresql skills",
-        "modern dba skills",
-        "dba skills test",
-        "skills for dba",
-        "skills for database administrator",
-        "learn dba",
-        "what is dba",
-        "database administrator quiz",
-        "dba interview questions"
-      ]
-    },
-    "title": "PostgreSQL DBA",
-    "description": "Step by step guide to becoming a modern PostgreSQL DB Administrator in 2021",
-    "featuredTitle": "DBA",
-    "featuredDescription": "Step by step guide to become a PostgreSQL DBA in 2021",
-    "contentPath": "/roadmaps/5-postgresql-dba/landscape.md",
-    "resourcesPath": "/roadmaps/5-postgresql-dba/resources.md",
-    "author": {
-      "name": "Alexey Lesovsky",
-      "url": "https://github.com/lesovsky"
-    },
-    "isCommunity": true,
-    "isTextHeavy": true,
-    "featured": true,
-    "detailed": false,
-    "versions": [],
-    "id": "postgresql-dba",
-    "isUpcoming": false
-  },
-  {
-    "seo": {
-      "title": "Android Developer Roadmap: Learn to become an Android developer",
-      "description": "Community driven, articles, resources, guides, interview questions, quizzes for android development. Learn to become a modern Android developer by following the steps, skills, resources and guides listed in this roadmap.",
-      "keywords": [
-        "guide to becoming an android developer",
-        "android developer roadmap",
-        "android roadmap",
-        "become android developer",
-        "android developer skills",
-        "android skills test",
-        "skills for android development",
-        "learn android development",
-        "what is android",
-        "android quiz",
-        "android interview questions"
-      ]
-    },
-    "title": "Android Developer",
-    "description": "Step by step guide to becoming an Android developer in 2021",
-    "featuredTitle": "Android",
-    "featuredDescription": "Step by step guide to becoming an Android Developer in 2021",
-    "isTextHeavy": true,
-    "isCommunity": true,
-    "featured": true,
-    "contentPath": "/roadmaps/6-android/landscape.md",
-    "resourcesPath": "/roadmaps/6-android/resources.md",
-    "versions": [
-      "latest",
-      "2018",
-      "2017"
-    ],
-    "author": {
-      "name": "Kamran Ahmed",
-      "url": "https://twitter.com/kamranahmedse"
-    },
-    "id": "android",
-    "isUpcoming": false
-  },
-  {
-    "seo": {
-      "title": "QA Roadmap: Learn to become a modern QA engineer",
-      "description": "Community driven, articles, resources, guides, interview questions, quizzes for modern QA development. Learn to become a modern QA engineer by following the steps, skills, resources and guides listed in this roadmap.",
-      "keywords": [
-        "guide to becoming a QA engineer",
-        "QA engineer",
-        "QA skills",
-        "QA development skills",
-        "QA development skills test",
-        "QA engineer roadmap",
-        "become a QA engineer",
-        "QA engineer career path",
-        "skills for QA development",
-        "what is QA engineer",
-        "QA engineer quiz",
-        "QA engineer interview questions"
-      ]
-    },
-    "title": "QA Engineer",
-    "description": "Steps to follow in order to become a modern QA Engineer in 2021",
-    "featuredTitle": "QA",
-    "featuredDescription": "Step by step guide to becoming a modern QA Engineer in 2021",
-    "isUpcoming": true,
-    "contentPath": "/roadmaps/7-qa/landscape.md",
-    "resourcesPath": "/roadmaps/7-qa/resources.md",
-    "author": {
-      "name": "Anas Fitiani",
-      "url": "https://github.com/anas-qa"
-    },
-    "id": "qa"
-  }
-]

content/roadmaps/1-frontend/meta.json

@@ -1,41 +0,0 @@
-{
-  "seo": {
-    "title": "Learn to become a modern frontend developer",
-    "description": "Community driven, articles, resources, guides, interview questions, quizzes for modern frontend development. Learn to become a modern frontend developer by following the steps, skills, resources and guides listed in this roadmap.",
-    "keywords": [
-      "guide to becoming a developer",
-      "guide to becoming a frontend developer",
-      "frontend developer",
-      "frontend engineer",
-      "frontend skills",
-      "frontend development",
-      "javascript developer",
-      "frontend development skills",
-      "frontend development skills test",
-      "frontend engineer roadmap",
-      "frontend developer roadmap",
-      "become a frontend developer",
-      "frontend developer career path",
-      "javascript developer",
-      "modern javascript developer",
-      "node developer",
-      "skills for frontend development",
-      "learn frontend development",
-      "what is frontend development",
-      "frontend developer quiz",
-      "frontend developer interview questions"
-    ]
-  },
-  "title": "Frontend Developer",
-  "description": "Step by step guide to becoming a modern frontend developer in 2021",
-  "featuredTitle": "Frontend",
-  "featuredDescription": "Step by step guide to becoming a frontend developer in 2021",
-  "author": {
-    "name": "Kamran Ahmed",
-    "url": "https://twitter.com/kamranahmedse"
-  },
-  "featured": true,
-  "imagePath": "/roadmaps/frontend.png",
-  "resourcesPath": "./resources.md",
-  "pdfUrl": "https://kamranahmedse.gumroad.com/l/frontend-roadmap"
-}

content/roadmaps/1-frontend/resources.md

@@ -1,76 +0,0 @@
-<div className='alert alert-primary' style={{ marginBottom: '-10px'}}>
-  This page is incomplete and is being worked upon. Please check back later or <a href='/signup'>subscribe</a> / <a href='https://twitter.com/kamranahmedse'>follow me on twitter</a> to get notified. Also, feel free to contribute by suggesting the resources in <a href='https://github.com/kamranahmedse/developer-roadmap'>the issues</a>.
-</div>
-
-# Become a Frontend Developer
-Before I go ahead and list down the resources, please know that the roadmap and the list below is exhaustive and you don't need to know it all from the get go. For frontend development, all you need to get started with is learn some basic HTML, CSS and JavaScript and start working on projects; everything else you will learn along the way. 
-
-## Internet and how it works?
-
-Get the basic understanding of internet, browsers, networks and other relevant knowledge. 
-
-* <BadgeLink badgeText='Read' href='/guides/what-is-internet'>What is Internet?</BadgeLink>
-* <BadgeLink variant='primary' badgeText='Watch' href='https://www.youtube.com/watch?v=7_LPdttKXPc'>How the internet works in 5 minutes</BadgeLink>
-* <BadgeLink badgeText='Read' href='https://kamranahmed.info/blog/2016/08/13/http-in-depth/'>What is HTTP and how it evolved?</BadgeLink>
-* <BadgeLink badgeText='Read' href='https://blog.cloudflare.com/http3-the-past-present-and-future/'>HTTP/3: the past, the present, and the future</BadgeLink>
-* <BadgeLink badgeText='Read' href='https://kinsta.com/blog/http3/'>What Is HTTP/3 – Lowdown on the Fast New UDP-Based Protocol</BadgeLink>
-* <BadgeLink badgeText='Read' href='https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/'>How Browsers Work: Behind the scenes of modern web browsers</BadgeLink>
-* <BadgeLink variant='primary' badgeText='Watch' href='https://www.youtube.com/watch?v=Rck3BALhI5c'>DNS as Fast As Possible</BadgeLink>
-* <BadgeLink badgeText='Read' href='https://howdns.works/'>How DNS works?</BadgeLink>
-* <BadgeLink badgeText='Read' href='/guides/dns-in-one-picture'>DNS in One Picture</BadgeLink>
-
-## Learn HTML
-HTML provides the skeleton of a webpage. Learn the basics of HTML; learn the basic tags, learn how to write semantic HTML, understand basic SEO, learn how to divide your pages into sections that will help you style them. 
-
-Please know that I have put multiple links for each resource. While you may pick something new while going through each, you don't need to go through all of them - if you feel like you have understood the concepts and are just repeating what you learnt, you may skip the resource and move to exercises section.
- 
-
-* <BadgeLink variant='primary' badgeText='Watch' href='https://www.youtube.com/watch?v=UB1O30fR-EE'>HTML Crash Course For Absolute Beginners</BadgeLink>
-* <BadgeLink badgeText='Read' href='https://www.w3schools.com/html/default.asp'>W3Schools – HTML Tutorial</BadgeLink>
-* <BadgeLink variant='primary' badgeText='Watch' href='https://www.youtube.com/watch?v=pQN-pnXPaVg'>HTML Full Course - Build a Website Tutorial</BadgeLink>
-* <BadgeLink badgeText='Read' href='https://hacks.mozilla.org/2016/08/a-few-html-tips/'>A few HTML tips</BadgeLink>
-* <BadgeLink badgeText='Read' href='https://hackernoon.com/six-tips-to-set-up-a-better-html-document-ud1033z3z'>Six tips to set up a better HTML document</BadgeLink>
-* <BadgeLink badgeText='Read' href='https://www.w3schools.com/html/html5_semantic_elements.asp'>HTML Semantic Elements</BadgeLink> 
-* <BadgeLink badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/HTML/Element'>HTML elements reference</BadgeLink> 
-
-## Style your pages with CSS
-With the help of HTML, you create structure for your pages. CSS allows you to style your pages and make them pretty. If you take the analogy of human body, the skeleton would be the HTML, skin would be the CSS and muscles that help us move would be JavaScript - we will learn more about JavaScript in the coming sections.
-
-* <BadgeLink badgeText='Read' href='https://www.w3schools.com/css/'>W3Schools – CSS Tutorial</BadgeLink>
-* <BadgeLink variant='primary' badgeText='Watch' href='https://www.youtube.com/watch?v=yfoY53QXEnI'>CSS Crash Course For Absolute Beginners</BadgeLink>
-* <BadgeLink variant='primary' badgeText='Watch' href='https://www.youtube.com/watch?v=Wm6CUkswsNw'>Build An HTML5 Website With A Responsive Layout</BadgeLink>
-* <BadgeLink variant='primary' badgeText='Watch' href='https://youtu.be/JJSoEo8JSnc?t=46'>Flexbox CSS In 20 Minutes</BadgeLink>
-
-## Basics of JavaScript
-JavaScript allows you to add interactivity to your pages. Common examples that you may have seen on the websites are sliders, click interactions, popups and so on. In this section, you will learn the basics of JavaScript.
-
-* <BadgeLink badgeText='Read' href='https://www.w3schools.com/js/'>W3Schools – JavaScript Tutorial</BadgeLink>
-* <BadgeLink variant='primary' badgeText='Watch' href='https://youtu.be/hdI2bqOjy3c?t=2'>JavaScript Crash Course for Beginners</BadgeLink>
-* <BadgeLink variant='primary' badgeText='Watch' href='https://youtu.be/P7t13SGytRk?t=22'>Build a Netflix Landing Page Clone with HTML, CSS & JS</BadgeLink>
-
-## Version Control Systems and Git
-
-Version control systems allow you to track changes to your codebase/files over time. They allow you to go back to some previous version of the codebase without any issues. Also, they help in collaborating with people working on the same code – if you’ve ever collaborated with other people on a project, you might already know the frustration of copying and merging the changes from someone else into your codebase; version control systems allow you to get rid of this issue.
-
-In this section, you will learn what version control systems are and understand how to use Git which is the de facto VCS.  
-
-* <BadgeLink variant='primary' badgeText='Watch' href='https://www.youtube.com/watch?v=zbKdDsNNOhg'>Version Control System Introduction</BadgeLink>
-* <BadgeLink variant='primary' badgeText='Watch' href='https://www.youtube.com/watch?v=SWYqp7iY_Tc'>Git & GitHub Crash Course For Beginners</BadgeLink>
-* <BadgeLink variant='primary' badgeText='Watch' href='https://youtu.be/Y9XZQO1n_7c?t=21'>Learn Git in 20 Minutes</BadgeLink>
-
-Now that you know what git is go ahead and create an account on [GitHub](https://github.com) and push everything that you do from now on to GitHub so that you can get the practice and get it reviewed from the other people in the community.
-
-## Modern JavaScript
-
-In this section you will learn how to use package managers and get started with the "modern JavaScript".
-
-* <BadgeLink badgeText='Read' href='https://medium.com/the-node-js-collection/modern-javascript-explained-for-dinosaurs-f695e9747b70'>Modern JavaScript for Dinosaurs (Don't worry if you don't understand some parts of it)</BadgeLink>
-* <BadgeLink variant='primary' badgeText='Watch' href='https://www.youtube.com/watch?v=8Rmj5UY5mJk'>What is NPM and how to use it</BadgeLink>
-* <BadgeLink variant='primary' badgeText='Watch' href='https://www.youtube.com/watch?v=jHDhaSSKmB0'>NPM Crash Course</BadgeLink>
-
-<br />
-<br />
-<br />
-<br />
-<br />
-<br />

content/roadmaps/2-backend/meta.json

@@ -1,41 +0,0 @@
-{
-  "seo": {
-    "title": "Learn to become a modern backend developer",
-    "description": "Community driven, articles, resources, guides, interview questions, quizzes for modern backend development. Learn to become a modern backend developer by following the steps, skills, resources and guides listed in this roadmap.",
-    "keywords": [
-      "guide to becoming a developer",
-      "guide to becoming a backend developer",
-      "backend developer",
-      "backend engineer",
-      "backend skills",
-      "backend development",
-      "javascript developer",
-      "backend development skills",
-      "backend development skills test",
-      "backend engineer roadmap",
-      "backend developer roadmap",
-      "become a backend developer",
-      "backend developer career path",
-      "javascript developer",
-      "modern javascript developer",
-      "node developer",
-      "skills for backend development",
-      "learn backend development",
-      "what is backend development",
-      "backend developer quiz",
-      "backend developer interview questions"
-    ]
-  },
-  "title": "Backend Developer",
-  "description": "Step by step guide to becoming a modern backend developer in 2021",
-  "featuredTitle": "Backend",
-  "featuredDescription": "Step by step guide to becoming a backend developer in 2021",
-  "featured": true,
-  "imagePath": "/roadmaps/backend.png",
-  "resourcesPath": "./resources.md",
-  "author": {
-    "name": "Kamran Ahmed",
-    "url": "https://twitter.com/kamranahmedse"
-  },
-  "pdfUrl": "https://kamranahmedse.gumroad.com/l/backend-roadmap"
-}

content/roadmaps/2-backend/resources.md

@@ -1,7 +0,0 @@
-> **We are still preparing the resources**. Please check back later or [subscribe to get notified](/signup).
-
-While we prepare the list, follow this simple advice to learn anything
- 
-> Just **pick a project and start working on it**, you will learn all that you need along the way.
-
-**→**   [All Roadmaps](/roadmaps)  •  [Programming guides](/guides)  •  [Subscribe](/signup)

content/roadmaps/3-devops/meta.json

@@ -1,40 +0,0 @@
-{
-  "seo": {
-    "title": "DevOps Roadmap: Learn to become a DevOps Engineer or SRE",
-    "description": "Community driven, articles, resources, guides, interview questions, quizzes for DevOps. Learn to become a modern DevOps engineer by following the steps, skills, resources and guides listed in this roadmap.",
-    "keywords": [
-      "guide to becoming a devops enginer",
-      "devops roadmap",
-      "sre roadmap",
-      "site reliability engineer roadmap",
-      "operations roles",
-      "become devops",
-      "devops skills",
-      "modern devops skills",
-      "devops skills test",
-      "skills for devops",
-      "learn devops",
-      "what is devops",
-      "what is sre",
-      "devops quiz",
-      "devops interview questions"
-    ]
-  },
-  "title": "DevOps Roadmap",
-  "description": "Step by step guide for DevOps, SRE or any other Operations Role in 2021",
-  "featuredTitle": "DevOps",
-  "featuredDescription": "Step by step guide for DevOps or operations role in 2021",
-  "featured": true,
-  "imagePath": "/roadmaps/devops.png",
-  "resourcesPath": "./resources.md",
-  "versions": [
-    "latest",
-    "2018",
-    "2017"
-  ],
-  "author": {
-    "name": "Kamran Ahmed",
-    "url": "https://twitter.com/kamranahmedse"
-  },
-  "pdfUrl": "https://kamranahmedse.gumroad.com/l/devops-roadmap"
-}

content/roadmaps/3-devops/resources.md

@@ -1,7 +0,0 @@
-> **We are still preparing the resources**. Please check back later or [subscribe to get notified](/signup).
-
-While we prepare the list, follow this simple advice to learn anything
- 
-> Just **pick a project and start working on it**, you will learn all that you need along the way.
-
-**→**   [All Roadmaps](/roadmaps)  •  [Programming guides](/guides)  •  [Subscribe](/signup)

content/roadmaps/4-react/landscape.md

@@ -1,7 +0,0 @@
-The intent of this guide is to give you an idea about the React ecosystem and to help guide your learning if you are confused. We have another [roadmap on the Frontend Development](/frontend) that focuses on the frontend development if you are interested in that.
-
-Also, please note that the list below is exhaustive, and the items are listed in no particular order. You don't need to learn everything listed in the picture, however knowing what you don't know is as important as knowing things.
-
-![](/roadmaps/react.png)
-
-Please note that the list is opinionated, and you might have different opinions than those of the author. Having said that, [we would love to hear your opinions](https://github.com/kamranahmedse/roadmap.sh/issues/new) and incorporate them in the picture if suitable.

content/roadmaps/4-react/meta.json

@@ -1,38 +0,0 @@
-{
-  "seo": {
-    "title": "React Developer Roadmap: Learn to become a React developer",
-    "description": "Community driven, articles, resources, guides, interview questions, quizzes for react development. Learn to become a modern React developer by following the steps, skills, resources and guides listed in this roadmap.",
-    "keywords": [
-      "guide to becoming a react developer",
-      "react developer roadmap",
-      "react roadmap",
-      "become react developer",
-      "react developer skills",
-      "react skills test",
-      "skills for react development",
-      "learn react development",
-      "what is react",
-      "react quiz",
-      "react interview questions"
-    ]
-  },
-  "title": "React Developer",
-  "description": "Everything that is there to learn about React and the ecosystem in 2021.",
-  "featuredTitle": "React",
-  "featuredDescription": "Step by step guide to become a React Developer in 2021",
-  "isTextHeavy": false,
-  "isCommunity": false,
-  "featured": true,
-  "contentPath": "./landscape.md",
-  "resourcesPath": "./resources.md",
-  "versions": [
-    "latest",
-    "2018",
-    "2017"
-  ],
-  "author": {
-    "name": "Kamran Ahmed",
-    "url": "https://twitter.com/kamranahmedse"
-  },
-  "pdfUrl": "https://kamranahmedse.gumroad.com/l/react-roadmap"
-}

content/roadmaps/4-react/resources.md

@@ -1,7 +0,0 @@
-> **We are still preparing the resources**. Please check back later or [subscribe to get notified](/signup).
-
-While we prepare the list, follow this simple advice to learn anything
- 
-> Just **pick a project and start working on it**, you will learn all that you need along the way.
-
-**→**   [All Roadmaps](/roadmaps)  •  [Programming guides](/guides)  •  [Subscribe](/signup)

content/roadmaps/5-postgresql-dba/meta.json

@@ -1,41 +0,0 @@
-{
-  "seo": {
-    "title": "DBA Roadmap: Learn to become a database administrator with PostgreSQL",
-    "description": "Community driven, articles, resources, guides, interview questions, quizzes for DevOps. Learn to become a modern DevOps engineer by following the steps, skills, resources and guides listed in this roadmap.",
-    "keywords": [
-      "guide to becoming a database administrator",
-      "guide to becoming a DBA",
-      "dba roadmap",
-      "db administrator roadmap",
-      "database administrator roadmap",
-      "postgresql roadmap",
-      "dba skills",
-      "db administrator skills",
-      "become dba",
-      "postgresql skills",
-      "modern dba skills",
-      "dba skills test",
-      "skills for dba",
-      "skills for database administrator",
-      "learn dba",
-      "what is dba",
-      "database administrator quiz",
-      "dba interview questions"
-    ]
-  },
-  "title": "PostgreSQL DBA",
-  "description": "Step by step guide to becoming a modern PostgreSQL DB Administrator in 2021",
-  "featuredTitle": "DBA",
-  "featuredDescription": "Step by step guide to become a PostgreSQL DBA in 2021",
-  "contentPath": "./landscape.md",
-  "resourcesPath": "./resources.md",
-  "author": {
-    "name": "Alexey Lesovsky",
-    "url": "https://github.com/lesovsky"
-  },
-  "isCommunity": true,
-  "isTextHeavy": true,
-  "featured": true,
-  "detailed": false,
-  "versions": []
-}

content/roadmaps/5-postgresql-dba/resources.md

@@ -1,7 +0,0 @@
-> **We are still preparing the resources**. Please check back later or [subscribe to get notified](/signup).
-
-While we prepare the list, follow this simple advice to learn anything
- 
-> Just **pick a project and start working on it**, you will learn all that you need along the way.
-
-**→**   [All Roadmaps](/roadmaps)  •  [Programming guides](/guides)  •  [Subscribe](/signup)

content/roadmaps/6-android/landscape.md

@@ -1,82 +0,0 @@
-The intent of this guide is to give you an idea about the Android development landscape and to help guide your learning if you are confused. Before we start, please note that the roadmap is opinionated, and you might have different opinions than those of the author. Having said that, [we would love to hear your opinions](https://github.com/kamranahmedse/roadmap.sh/issues/new) and incorporate them in the roadmap if suitable.
-
-There are multiple ways to develop applications for the android; you can go down the path of hybrid application development where [flutter](https://flutter.dev/), [react-native](https://reactnative.dev/), or [NativeScript](https://www.nativescript.org/) are the most common contenders. Flutter uses Dart, whereas React Native and Native Script rely on JavaScript. Answering the question of hybrid vs native is out of the scope of this roadmap. This roadmap is focused on the native Android apps development but if you are interested in learning any hybrid framework, my personal preference is [react-native](https://reactnative.dev) and I would recommend you to checkout the [Frontend Developer Roadmap](/frontend).
-
-## Complete Roadmap
-
-Here is the full version of the roadmap in a single image and after that we have the broken down version with the resources and links to learn more about each of the boxes.
-
-[![](/roadmaps/android/roadmap.svg)](/roadmaps/android/roadmap.png)
-
-## Broken Down Version
-Below is the broken down version of the roadmap with links and resources to learn more about each of the items listed in the complete roadmap above.
-
-## Pick a Language
-For the languages, you can develop android apps either by using Kotlin or Java.
-
-[![](/roadmaps/android/pick-language.svg)](/roadmaps/android/pick-language.svg)
-
-Although, you can use both [Kotlin](https://en.wikipedia.org/wiki/Kotlin_(programming_language)) and [Java](https://en.wikipedia.org/wiki/Java_(programming_language)) to develop native android apps, [Google announced in 2019](https://android-developers.googleblog.com/2019/05/google-io-2019-empowering-developers-to-build-experiences-on-Android-Play.html) to make Kotlin the preferred way of developing android applications. If you were to start learning android development today, Kotlin should be your language of choice.
-
-## The Fundamentals
-Install the [Android Studio](https://developer.android.com/studio) and learn the basics of Kotlin to get started. 
-
-[![](/roadmaps/android/the-fundamentals.png)](/roadmaps/android/the-fundamentals.png)
-
-We have also listed down some free resources which you can use for the items listed in the image above. If you have some better ones, please do suggest. Also, you don't need to go through all of them, just go through them and pick what you like.
-
-* [Learn the basics of Kotlin](https://blog.teamtreehouse.com/absolute-beginners-guide-kotlin)
-* [Kotlin Docs](https://kotlinlang.org/docs/reference/basic-syntax.html) and [Official Kotlin Tutorials](https://kotlinlang.org/docs/tutorials/)
-* [Data Structures and Algorithms](https://www.studytonight.com/data-structures/introduction-to-data-structures). Also [check this](https://www.tutorialspoint.com/data_structures_algorithms/index.htm).
-* [Kotlin DataStructures](https://kotlinlang.org/docs/reference/collections-overview.html)
-* [Algorithms and DataStructures in Kotlin](https://github.com/bmaslakov/kotlin-algorithm-club)
-
-## Version Control Systems
-Version control systems record your changes to the codebase and allow you to recall specific versions later. There are multiple Version Control Systems available but [Git](https://git-scm.com/) is the most common one these days.
-
-[![](/roadmaps/android/git-github.png)](/roadmaps/android/git-github.png)
-
-Here are some of the resources to get you started. Feel free to google and find something else that you find easier.
-
-* [Udacity — Version Control with Git](https://www.udacity.com/course/version-control-with-git--ud123)
-* [GitHub Hello World](https://guides.github.com/activities/hello-world/)
-
-## Building an Application
-
-Here is the list of items that you are going to need when developing Android applications. Please note that, this is an exhaustive list, and you don't need to know it all from the get-go. Get an idea of the items listed, and just start building some apps and keep the items listed in the back of your mind and have a deep dive when using them. 
-
-[![](/roadmaps/android/build-an-application.png)](/roadmaps/android/build-an-application.png)
-
-To learn more about the items listed in the image above, here are the links to the relevant docs
-
-* [Using Activities and Activity Life Cycles](https://developer.android.com/guide/components/activities/intro-activities)
-* Building Flexible Interfaces using [Fragments](https://developer.android.com/guide/components/fragments)
-* [Debugging using Android Studio Debugger](https://developer.android.com/studio/debug)
-* [Handling App Configurations](https://developer.android.com/work/managed-configurations)
-* [Using Intents and Intent Filters](https://developer.android.com/guide/components/intents-filters)
-* [Understand Context](https://guides.codepath.com/android/Using-Context)
-* [Learn about Multithreading](https://developer.android.com/training/multiple-threads)
-* [Data Privacy](https://www.raywenderlich.com/6901838-data-privacy-for-android)
-* [Securing Network Data](https://www.raywenderlich.com/5634-securing-network-data-tutorial-for-android)
-* [Dependency Injection](https://developer.android.com/training/dependency-injection)
-* [Content Providers](https://developer.android.com/guide/topics/providers/content-providers)
-* [Glide](https://github.com/bumptech/glide), [Retrofit](https://square.github.io/retrofit/), [Crashlytics](https://firebase.google.com/docs/crashlytics/get-started), [GSON](https://github.com/google/gson)
-* [Room](https://developer.android.com/topic/libraries/architecture/room), [Navigation](https://developer.android.com/guide/navigation/navigation-getting-started), [Work Manager](https://developer.android.com/topic/libraries/architecture/workmanager), [LiveData](https://developer.android.com/topic/libraries/architecture/livedata), [Data Binding](https://developer.android.com/topic/libraries/data-binding)
-* [RxJava](https://github.com/ReactiveX/RxJava), [RxKotlin](https://github.com/ReactiveX/RxKotlin)
-* [Memory Management Overview](https://developer.android.com/topic/performance/memory-overview)
-* [Diving deeper into context-oriented programming in Kotlin](https://proandroiddev.com/diving-deeper-into-context-oriented-programming-in-kotlin-3ecb4ec38814)  
-
-I would highly recommend watching [this free course](https://www.udacity.com/course/developing-android-apps-with-kotlin--ud9012) from google on Developing Android Apps with Kotlin. Also, here are some of the resources to learn more about the topics listed above.
-
-* [Developing Android Apps with Kotlin](https://www.udacity.com/course/developing-android-apps-with-kotlin--ud9012)
-* [Android Developer Guides](https://developer.android.com/guide)
-* [Raywenderlich](https://www.raywenderlich.com)
-
-## Wrap Up
-
-That wraps it up for the android developer roadmap. Again, remember to not be exhausted by the list; just learn the basics and start working on some project, rest of the learnings will come along the way. Good luck!
- 
-For any suggestions, improvements and feedback, feel free to [submit an issue](https://github.com/kamranahmedse/roadmap.sh) or reach out to me on twitter [@kamranahmedse](https://twitter.com/kamranahmedse).
-
-<!-- @fixme add padding to the container -->
-<br /><br /><br />

content/roadmaps/6-android/meta.json

@@ -1,37 +0,0 @@
-{
-  "seo": {
-    "title": "Android Developer Roadmap: Learn to become an Android developer",
-    "description": "Community driven, articles, resources, guides, interview questions, quizzes for android development. Learn to become a modern Android developer by following the steps, skills, resources and guides listed in this roadmap.",
-    "keywords": [
-      "guide to becoming an android developer",
-      "android developer roadmap",
-      "android roadmap",
-      "become android developer",
-      "android developer skills",
-      "android skills test",
-      "skills for android development",
-      "learn android development",
-      "what is android",
-      "android quiz",
-      "android interview questions"
-    ]
-  },
-  "title": "Android Developer",
-  "description": "Step by step guide to becoming an Android developer in 2021",
-  "featuredTitle": "Android",
-  "featuredDescription": "Step by step guide to becoming an Android Developer in 2021",
-  "isTextHeavy": true,
-  "isCommunity": true,
-  "featured": true,
-  "contentPath": "./landscape.md",
-  "resourcesPath": "./resources.md",
-  "versions": [
-    "latest",
-    "2018",
-    "2017"
-  ],
-  "author": {
-    "name": "Kamran Ahmed",
-    "url": "https://twitter.com/kamranahmedse"
-  }
-}

content/roadmaps/6-android/resources.md

@@ -1,7 +0,0 @@
-> **We are still preparing the resources**. Please check back later or [subscribe to get notified](/signup).
-
-While we prepare the list, follow this simple advice to learn anything
- 
-> Just **pick a project and start working on it**, you will learn all that you need along the way.
-
-**→**   [All Roadmaps](/roadmaps)  •  [Programming guides](/guides)  •  [Subscribe](/signup)

content/roadmaps/7-qa/landscape.md

@@ -1,11 +0,0 @@
-> **Roadmap is not ready yet**. Please check back later or [subscribe to get notified](/signup).
-
-While we prepare the roadmap, follow this simple advice to learn anything
-
-> Just **pick a project and start working on it**, you will learn all that you need along the way.
-
-**→**   [All Roadmaps](/roadmaps)  •  [Programming guides](/guides)  •  [Subscribe](/signup) 
-
-
-
- 

content/roadmaps/7-qa/meta.json

@@ -1,31 +0,0 @@
-{
-  "seo": {
-    "title": "QA Roadmap: Learn to become a modern QA engineer",
-    "description": "Community driven, articles, resources, guides, interview questions, quizzes for modern QA development. Learn to become a modern QA engineer by following the steps, skills, resources and guides listed in this roadmap.",
-    "keywords": [
-      "guide to becoming a QA engineer",
-      "QA engineer",
-      "QA skills",
-      "QA development skills",
-      "QA development skills test",
-      "QA engineer roadmap",
-      "become a QA engineer",
-      "QA engineer career path",
-      "skills for QA development",
-      "what is QA engineer",
-      "QA engineer quiz",
-      "QA engineer interview questions"
-    ]
-  },
-  "title": "QA Engineer",
-  "description": "Steps to follow in order to become a modern QA Engineer in 2021",
-  "featuredTitle": "QA",
-  "featuredDescription": "Step by step guide to becoming a modern QA Engineer in 2021",
-  "isUpcoming": true,
-  "contentPath": "./landscape.md",
-  "resourcesPath": "./resources.md",
-  "author": {
-    "name": "Anas Fitiani",
-    "url": "https://github.com/anas-qa"
-  }
-}

content/roadmaps/7-qa/resources.md

@@ -1,7 +0,0 @@
-> **We are still preparing the resources**. Please check back later or [subscribe to get notified](/signup).
-
-While we prepare the list, follow this simple advice to learn anything
- 
-> Just **pick a project and start working on it**, you will learn all that you need along the way.
-
-**→**   [All Roadmaps](/roadmaps)  •  [Programming guides](/guides)  •  [Subscribe](/signup)

content/site.json

@@ -1,49 +0,0 @@
-{
-  "author": "Kamran Ahmed",
-  "title": "Roadmaps to becoming a modern developer",
-  "name": "roadmap.sh",
-  "description": "Community driven roadmaps, articles, guides, quizzes, tips and resources for developers to learn from, identify their career paths, know what they don't know, find out the knowledge gaps, learn and improve.",
-  "twitter": "kamranahmedse",
-  "facebook": "kamranahmedse",
-  "logo": "/brand.png",
-  "logoSquare": "/brand-square.png",
-  "url": {
-    "web": "https://roadmap.sh",
-    "twitter": "https://twitter.com/kamranahmedse",
-    "youtube": "https://youtube.com/theroadmap?sub_confirmation=1",
-    "repo": "https://github.com/kamranahmedse/roadmap.sh",
-    "sponsor": "https://github.com/sponsors/kamranahmedse",
-    "repoData": "https://github.com/kamranahmedse/roadmap.sh/tree/master/content",
-    "addGuide": "https://github.com/kamranahmedse/roadmap.sh/tree/master/contributing/guide.md",
-    "addRoadmap": "https://github.com/kamranahmedse/roadmap.sh/tree/master/contributing/roadmap.md",
-    "addResources": "https://github.com/kamranahmedse/roadmap.sh/tree/master/contributing/resources.md",
-    "contribute": "https://github.com/kamranahmedse/roadmap.sh/tree/master/contributing",
-    "issue": "https://github.com/kamranahmedse/roadmap.sh/issues/new"
-  },
-  "keywords": [
-    "roadmap",
-    "developer roadmaps",
-    "developer roadmap",
-    "frontend developer",
-    "frontend developer roadmap",
-    "frontend",
-    "frontend roadmap",
-    "backend",
-    "backend developer",
-    "backend developer roadmap",
-    "devops",
-    "devops roadmap",
-    "fullstack developer roadmap",
-    "guide to becoming a developer",
-    "sre roadmap",
-    "sre",
-    "operations roadmap",
-    "qa roadmap",
-    "android roadmap",
-    "android developer roadmap",
-    "react roadmap",
-    "react developer roadmap",
-    "dba roadmap",
-    "postgresql dba roadmap"
-  ]
-}