wip: add more questions

* Add more questions

* wip: add lazy, conditional questions

* wip: Add RSC questions

* wip: add component's lifecycle

* wip: add dependency array question

* wip: add comment and state

* chore: add more questions

* wip: add list question

* wip: add directive questions

* fix: conventions and examples

* wip: add custom hook question

* wip: add hydration question

* wip: add error boundary example

* wip: add strict mode question

* wip: investigating slow react app

* Update src/data/question-groups/react/react.md

* Update src/data/question-groups/react/react.md

---------

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

.env.example

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

.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/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,37 @@
+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: dropdown
+    id: browsers
+    attributes:
+      label: Is this roadmap prepared by you or someone else?
+      options:
+        - I prepared this roadmap
+        - I found this roadmap online (please provide a link below)
+  - type: textarea
+    id: roadmap-description
+    attributes:
+      label: Roadmap Items
+      description: Please submit a nested list of items which we can convert into the visual. Here is an [example of roadmap items list.](https://gist.github.com/kamranahmedse/98758d2c73799b3a6ce17385e4c548a5).
+      placeholder: |
+          - Item 1
+            - Subitem 1
+            - Subitem 2
+          - Item 2
+            - Subitem 1
+            - Subitem 2
+    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/sponsors/doppler-logo.svg

@@ -1 +0,0 @@
-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 3473 1069"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:#111;}.cls-3{fill-rule:evenodd;fill:url(#linear-gradient);}</style><linearGradient id="linear-gradient" x1="658.73" y1="777.7" x2="341.45" y2="352.06" gradientTransform="matrix(1, 0, 0, -1, 0, 1070)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#33a9ff"/><stop offset="1" stop-color="#1673ff"/></linearGradient></defs><rect class="cls-1" width="3473" height="1069"/><path class="cls-2" d="M1054.06,633.32q4.93.45,11.23.9H1081q52.55,0,77.7-26.5,25.59-26.49,25.59-73.18,0-48.94-24.25-74.09t-76.79-25.14q-7.18,0-14.82.45-5.78,0-11,.51a3.73,3.73,0,0,0-3.33,3.74Zm202.54-98.78Q1256.6,575,1244,605t-35.92,49.84q-22.9,19.75-56.14,29.63t-74.55,9.88q-18.86,0-44-1.79A338.32,338.32,0,0,1,984,686.3V386.41a3.8,3.8,0,0,1,3.13-3.75,386.34,386.34,0,0,1,47.17-5.27q26.49-1.8,45.36-1.8,40,0,72.3,9,32.79,9,56.14,28.29T1244,462.25Q1256.61,492.33,1256.6,534.54Z"/><path class="cls-2" d="M1397.52,534.54q0,22.89,5.39,41.31a103.13,103.13,0,0,0,16.17,31.87,74.66,74.66,0,0,0,26.05,20.21q15.27,7.19,35,7.18,19.3,0,34.58-7.18a69.47,69.47,0,0,0,26-20.21A91.41,91.41,0,0,0,1557,575.85q5.83-18.42,5.84-41.31T1557,493.23q-5.39-18.86-16.17-31.88a67.73,67.73,0,0,0-26-20.65q-15.27-7.18-34.58-7.19-19.77,0-35,7.64a72.5,72.5,0,0,0-26.05,20.65q-10.33,13-16.17,31.88A145.23,145.23,0,0,0,1397.52,534.54Zm237.57,0q0,40-12.12,70.49-11.68,30.09-32.34,50.74a134.89,134.89,0,0,1-49.4,30.53,176.88,176.88,0,0,1-61.07,10.33A174.23,174.23,0,0,1,1420,686.3a140,140,0,0,1-49.4-30.53q-21.11-20.65-33.23-50.74-12.13-30.53-12.13-70.49t12.58-70q12.57-30.53,33.68-51.18a142,142,0,0,1,49.4-31A171.39,171.39,0,0,1,1480.16,372a174.08,174.08,0,0,1,60.18,10.33,136.87,136.87,0,0,1,49.4,31q21.1,20.65,33.23,51.18Q1635.09,494.58,1635.09,534.54Z"/><path class="cls-2" d="M1810.48,375.59q69.62,0,106.88,24.7,37.28,24.24,37.28,79.92,0,56.13-37.72,81.27-37.73,24.69-107.79,24.69H1791a3.83,3.83,0,0,0-3.83,3.83v96.51a3.83,3.83,0,0,1-3.83,3.83h-66.23V386.83a3.81,3.81,0,0,1,3.1-3.75,400.76,400.76,0,0,1,45.4-5.69Q1791.18,375.59,1810.48,375.59Zm4.49,59.72q-7.63,0-15.27.45-5,.3-9.06.62a3.8,3.8,0,0,0-3.51,3.8v86.28h22q36.38,0,54.79-9.88t18.42-36.82q0-13-4.94-21.55a32.47,32.47,0,0,0-13.48-13.47q-8.54-5.39-21.1-7.19A159.75,159.75,0,0,0,1815,435.31Z"/><path class="cls-2" d="M2123.07,375.59q69.61,0,106.89,24.7,37.27,24.24,37.27,79.92,0,56.13-37.72,81.27-37.73,24.69-107.78,24.69h-18.18a3.83,3.83,0,0,0-3.83,3.83v96.51a3.83,3.83,0,0,1-3.83,3.83h-66.23V386.82a3.8,3.8,0,0,1,3.1-3.74,400.76,400.76,0,0,1,45.4-5.69Q2103.77,375.59,2123.07,375.59Zm4.49,59.72q-7.64,0-15.27.45-5,.3-9.06.62a3.81,3.81,0,0,0-3.51,3.8v86.28h22q36.38,0,54.78-9.88t18.42-36.82q0-13-4.94-21.55a32.47,32.47,0,0,0-13.48-13.47q-8.52-5.39-21.1-7.19A159.75,159.75,0,0,0,2127.56,435.31Z"/><path class="cls-2" d="M2540.5,630.17a1.29,1.29,0,0,1,1.28,1.28v57.62a1.28,1.28,0,0,1-1.28,1.27H2342.25V401.41a3.83,3.83,0,0,1,2.81-3.69l67.25-18.54v251Z"/><path class="cls-2" d="M2618.88,690.34V383a3.84,3.84,0,0,1,3.83-3.83h215a1.28,1.28,0,0,1,1.23,1.64l-16.44,56.26a1.26,1.26,0,0,1-1.22.92H2692.77a3.83,3.83,0,0,0-3.83,3.83v57.24H2803.1a1.27,1.27,0,0,1,1.23,1.63l-16,54.92a1.28,1.28,0,0,1-1.22.92h-94.34a3.82,3.82,0,0,0-3.83,3.83v71.15h154.72a1.28,1.28,0,0,1,1.23,1.63l-16.34,56.27a1.27,1.27,0,0,1-1.22.92Z"/><path class="cls-2" d="M3006,375.59q70.07,0,107.34,25.15,37.28,24.69,37.27,77.22,0,32.79-15.27,53.44-14.82,20.19-43.11,31.87,9.43,11.68,19.76,26.94,10.34,14.82,20.21,31.43,10.32,16.17,19.76,34.13,8.93,16.58,16.65,32.75a1.28,1.28,0,0,1-1.16,1.82H3091.6a1.27,1.27,0,0,1-1.11-.65q-8.37-15-17.15-30.33-8.53-15.72-18-30.53-9-14.82-18-27.84a286.92,286.92,0,0,0-18-24.25h-30.76a3.83,3.83,0,0,0-3.82,3.83V686.51a3.83,3.83,0,0,1-3.83,3.83h-66.23V386.82a3.8,3.8,0,0,1,3.09-3.74,400,400,0,0,1,44.06-5.69Q2986.67,375.59,3006,375.59Zm4.05,59.72q-7.64,0-13.93.45-4,.3-7.71.61a3.82,3.82,0,0,0-3.51,3.81v80.89h19.76q39.51,0,56.58-9.88t17.07-33.67q0-22.9-17.52-32.33Q3043.71,435.31,3010,435.31Z"/><path class="cls-3" d="M307.26,310a1.79,1.79,0,0,0-1.5,2.75l89.7,140.38a14.19,14.19,0,0,0,12,6.58H528.38c39.92,0,64.87,35.28,64.72,74.79s-26.74,74.44-64.72,74.44H404.77a4.71,4.71,0,0,0-4.71,4.75V754.25a4.72,4.72,0,0,0,4.72,4.75H560.62C689.12,759,753,637.1,753.09,534.5S690,310,560.62,310ZM367,609.29H336.16C318.4,609.29,304,626,304,646.71V757.66a1.28,1.28,0,0,0,1.28,1.28h30.88c17.76,0,32.15-16.75,32.15-37.41v-111A1.27,1.27,0,0,0,367,609.29Z"/></svg>

.github/sponsors/oss-logo.svg

@@ -1,59 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 25.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 646.6 105.7" style="enable-background:new 0 0 646.6 105.7;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#104366;}
-	.st1{fill:#4086C6;}
-</style>
-<g>
-	<path class="st0" d="M21.1,79.8c-6.6-3.5-11.7-8.4-15.5-14.6C1.9,59,0,52,0,44.3c0-7.8,1.9-14.7,5.6-20.9
-		c3.7-6.2,8.9-11.1,15.5-14.6c6.6-3.5,14-5.3,22.2-5.3c8.2,0,15.6,1.8,22.1,5.3c6.6,3.5,11.7,8.4,15.5,14.6
-		c3.8,6.2,5.6,13.2,5.6,20.9c0,7.8-1.9,14.7-5.6,20.9c-3.8,6.2-8.9,11.1-15.5,14.6c-6.5,3.5-13.9,5.3-22.1,5.3
-		C35,85.1,27.6,83.4,21.1,79.8z M55.9,66.3c3.8-2.1,6.7-5.1,8.9-9c2.1-3.8,3.2-8.2,3.2-13.1c0-4.9-1.1-9.3-3.2-13.1
-		c-2.1-3.8-5.1-6.8-8.9-9c-3.8-2.1-8-3.2-12.6-3.2c-4.7,0-8.9,1.1-12.6,3.2s-6.7,5.1-8.9,9c-2.1,3.8-3.2,8.2-3.2,13.1
-		c0,4.9,1.1,9.3,3.2,13.1c2.1,3.8,5.1,6.8,8.9,9c3.8,2.1,8,3.2,12.6,3.2C47.9,69.5,52.1,68.5,55.9,66.3z"/>
-	<path class="st0" d="M108.1,82.6c-5.8-1.7-10.5-3.9-14.1-6.6l6.2-13.8c3.4,2.5,7.4,4.5,12.1,6c4.7,1.5,9.3,2.3,14,2.3
-		c5.2,0,9-0.8,11.5-2.3c2.5-1.5,3.7-3.6,3.7-6.2c0-1.9-0.7-3.4-2.2-4.7c-1.5-1.2-3.3-2.2-5.6-3c-2.3-0.8-5.4-1.6-9.3-2.5
-		c-6-1.4-11-2.9-14.8-4.3c-3.8-1.4-7.1-3.7-9.9-6.9c-2.7-3.2-4.1-7.4-4.1-12.6c0-4.6,1.2-8.7,3.7-12.5c2.5-3.7,6.2-6.7,11.2-8.9
-		c5-2.2,11.1-3.3,18.3-3.3c5,0,10,0.6,14.8,1.8c4.8,1.2,9,2.9,12.6,5.2l-5.6,13.9c-7.3-4.1-14.6-6.2-21.9-6.2
-		c-5.1,0-8.9,0.8-11.3,2.5c-2.4,1.7-3.7,3.8-3.7,6.5c0,2.7,1.4,4.7,4.2,6c2.8,1.3,7.1,2.6,12.9,3.9c6,1.4,11,2.9,14.8,4.3
-		c3.8,1.4,7.1,3.7,9.9,6.8c2.7,3.1,4.1,7.3,4.1,12.5c0,4.5-1.3,8.6-3.8,12.4c-2.5,3.7-6.3,6.7-11.3,8.9c-5,2.2-11.2,3.3-18.4,3.3
-		C120,85.1,113.9,84.3,108.1,82.6z"/>
-	<path class="st0" d="M180.1,82.6c-5.8-1.7-10.5-3.9-14.1-6.6l6.2-13.8c3.4,2.5,7.4,4.5,12.1,6c4.7,1.5,9.3,2.3,14,2.3
-		c5.2,0,9-0.8,11.5-2.3c2.5-1.5,3.7-3.6,3.7-6.2c0-1.9-0.7-3.4-2.2-4.7c-1.5-1.2-3.3-2.2-5.6-3c-2.3-0.8-5.4-1.6-9.3-2.5
-		c-6-1.4-10.9-2.9-14.8-4.3c-3.8-1.4-7.1-3.7-9.9-6.9c-2.7-3.2-4.1-7.4-4.1-12.6c0-4.6,1.2-8.7,3.7-12.5c2.5-3.7,6.2-6.7,11.2-8.9
-		s11.1-3.3,18.3-3.3c5,0,10,0.6,14.8,1.8c4.8,1.2,9,2.9,12.6,5.2l-5.6,13.9c-7.3-4.1-14.6-6.2-21.9-6.2c-5.1,0-8.9,0.8-11.3,2.5
-		c-2.4,1.7-3.7,3.8-3.7,6.5c0,2.7,1.4,4.7,4.2,6c2.8,1.3,7.1,2.6,12.9,3.9c6,1.4,10.9,2.9,14.8,4.3s7.1,3.7,9.9,6.8
-		c2.7,3.1,4.1,7.3,4.1,12.5c0,4.5-1.3,8.6-3.8,12.4c-2.5,3.7-6.3,6.7-11.3,8.9c-5,2.2-11.2,3.3-18.4,3.3
-		C192,85.1,186,84.3,180.1,82.6z"/>
-	<path class="st1" d="M293.2,79.1c-6.2-3.5-11.1-8.2-14.7-14.3c-3.6-6.1-5.4-12.9-5.4-20.5c0-7.6,1.8-14.5,5.4-20.5
-		c3.6-6.1,8.5-10.9,14.7-14.3c6.2-3.5,13.2-5.2,20.9-5.2c5.7,0,11,0.9,15.8,2.8c4.8,1.8,8.9,4.6,12.3,8.2l-3.6,3.7
-		c-6.3-6.2-14.4-9.4-24.3-9.4c-6.6,0-12.6,1.5-18.1,4.5c-5.4,3-9.7,7.2-12.8,12.5s-4.6,11.2-4.6,17.8s1.5,12.5,4.6,17.8
-		c3.1,5.3,7.3,9.5,12.8,12.5c5.4,3,11.4,4.5,18.1,4.5c9.8,0,17.9-3.2,24.3-9.5l3.6,3.7c-3.4,3.6-7.5,6.4-12.4,8.2
-		c-4.9,1.9-10.1,2.8-15.7,2.8C306.3,84.3,299.4,82.6,293.2,79.1z"/>
-	<path class="st1" d="M395.4,30c3.9,3.7,5.9,9.2,5.9,16.4v37.4h-5.4V73.3c-1.9,3.5-4.6,6.2-8.2,8.1c-3.6,1.9-7.9,2.9-13,2.9
-		c-6.5,0-11.7-1.5-15.5-4.6c-3.8-3.1-5.7-7.1-5.7-12.2c0-4.9,1.8-8.9,5.2-11.9c3.5-3,9.1-4.6,16.8-4.6h20.2v-4.7
-		c0-5.5-1.5-9.7-4.5-12.5c-3-2.9-7.3-4.3-13-4.3c-3.9,0-7.7,0.7-11.2,2c-3.6,1.4-6.6,3.2-9.1,5.4l-2.8-4.1c2.9-2.6,6.5-4.7,10.6-6.2
-		c4.1-1.5,8.5-2.2,13-2.2C385.9,24.4,391.5,26.3,395.4,30z M387.9,76.2c3.4-2.3,6-5.5,7.7-9.8V55.3h-20.1c-5.8,0-10,1.1-12.6,3.2
-		c-2.6,2.1-3.9,5-3.9,8.7c0,3.8,1.4,6.9,4.3,9.1c2.9,2.2,6.9,3.3,12.1,3.3C380.3,79.6,384.5,78.5,387.9,76.2z"/>
-	<path class="st1" d="M469,28.2c4.4,2.6,7.9,6.1,10.4,10.6c2.5,4.5,3.8,9.7,3.8,15.5c0,5.8-1.3,11-3.8,15.5
-		c-2.5,4.6-6,8.1-10.4,10.6c-4.4,2.5-9.4,3.8-14.9,3.8c-5.2,0-9.9-1.2-14.1-3.7c-4.2-2.4-7.5-5.9-9.8-10.2v35.3h-5.6V24.8h5.4v13.9
-		c2.3-4.5,5.6-8,9.9-10.6c4.2-2.5,9-3.8,14.3-3.8C459.6,24.4,464.6,25.7,469,28.2z M465.9,76c3.6-2.1,6.5-5,8.5-8.8
-		c2.1-3.8,3.1-8.1,3.1-12.9c0-4.8-1-9.1-3.1-12.9c-2.1-3.8-4.9-6.7-8.5-8.8c-3.6-2.1-7.7-3.2-12.2-3.2c-4.5,0-8.6,1.1-12.1,3.2
-		c-3.6,2.1-6.4,5-8.5,8.8c-2.1,3.8-3.1,8.1-3.1,12.9c0,4.8,1,9.1,3.1,12.9c2.1,3.8,4.9,6.7,8.5,8.8c3.6,2.1,7.6,3.2,12.1,3.2
-		C458.3,79.1,462.3,78.1,465.9,76z"/>
-	<path class="st1" d="M500.3,9.2c-0.9-0.9-1.4-1.9-1.4-3.2c0-1.3,0.5-2.4,1.4-3.3c0.9-0.9,2-1.4,3.3-1.4c1.3,0,2.4,0.4,3.3,1.3
-		c0.9,0.9,1.4,1.9,1.4,3.2c0,1.3-0.5,2.4-1.4,3.3c-0.9,0.9-2,1.4-3.3,1.4C502.3,10.5,501.2,10.1,500.3,9.2z M500.7,24.8h5.6v58.9
-		h-5.6V24.8z"/>
-	<path class="st1" d="M559.4,80c-1.4,1.4-3.2,2.4-5.4,3.1c-2.1,0.7-4.4,1.1-6.7,1.1c-5.1,0-9.1-1.4-11.9-4.2
-		c-2.8-2.8-4.2-6.8-4.2-11.8V29.7h-10.8v-4.9h10.8V12h5.6v12.9h18.7v4.9H537v37.9c0,3.8,0.9,6.8,2.8,8.8c1.8,2,4.6,3,8.2,3
-		c3.7,0,6.7-1.1,9.1-3.3L559.4,80z"/>
-	<path class="st1" d="M611.8,30c3.9,3.7,5.9,9.2,5.9,16.4v37.4h-5.4V73.3c-1.9,3.5-4.6,6.2-8.2,8.1c-3.6,1.9-7.9,2.9-13,2.9
-		c-6.5,0-11.7-1.5-15.5-4.6c-3.8-3.1-5.7-7.1-5.7-12.2c0-4.9,1.8-8.9,5.2-11.9c3.5-3,9.1-4.6,16.8-4.6H612v-4.7
-		c0-5.5-1.5-9.7-4.5-12.5c-3-2.9-7.3-4.3-13-4.3c-3.9,0-7.7,0.7-11.2,2c-3.6,1.4-6.6,3.2-9.1,5.4l-2.8-4.1c2.9-2.6,6.5-4.7,10.6-6.2
-		c4.1-1.5,8.5-2.2,13-2.2C602.3,24.4,607.9,26.3,611.8,30z M604.3,76.2c3.4-2.3,6-5.5,7.7-9.8V55.3h-20.1c-5.8,0-10,1.1-12.6,3.2
-		c-2.6,2.1-3.9,5-3.9,8.7c0,3.8,1.4,6.9,4.3,9.1c2.9,2.2,6.9,3.3,12.1,3.3C596.7,79.6,600.9,78.5,604.3,76.2z"/>
-	<path class="st1" d="M640.9,0h5.6v83.8h-5.6V0z"/>
-</g>
-</svg>

.github/sponsors/workos-logo-white-bg.svg

@@ -1,11 +0,0 @@
-<svg width="1354" height="420" viewBox="0 0 1354 420" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="1354" height="420" rx="20" fill="white"/>
-<path d="M434.751 133.122H466.637L489.595 227.729C493.852 245.585 494.697 256.219 494.697 256.219H495.128C495.128 256.219 496.61 245.808 500.867 227.729L522.757 133.122H558.9L582.066 227.729C586.53 246.223 587.598 256.219 587.598 256.219H588.236C588.236 256.219 588.666 246.223 592.907 227.729L615.02 133.122H646.907L606.523 288.313H571.017L546.576 194.344C541.474 173.936 541.044 164.801 541.044 164.801H540.614C540.614 164.801 540.183 173.936 535.512 194.344L512.553 288.313H475.996L434.751 133.122Z" fill="black"/>
-<path d="M641.583 231.934C641.583 196.428 664.541 173.47 699.202 173.47C733.639 173.47 756.597 196.428 756.597 231.934C756.597 267.647 733.639 290.828 699.202 290.828C664.557 290.812 641.583 267.647 641.583 231.934ZM726.832 231.934C726.832 208.976 715.783 195.998 699.202 195.998C681.346 195.998 671.349 210.458 671.349 231.934C671.349 255.323 682.398 268.284 699.202 268.284C717.058 268.284 726.832 253.824 726.832 231.934Z" fill="black"/>
-<path d="M770.836 175.21H799.103V196.048H799.741C804.635 185.207 816.322 174.365 836.299 174.365C839.695 174.365 841.831 174.796 843.314 175.21V203.478H842.469C842.469 203.478 839.918 202.633 832.903 202.633C811.013 202.633 799.103 215.594 799.103 239.828V288.295H770.836V175.21Z" fill="black"/>
-<path d="M856.5 133.122H884.767V182.865C884.767 212.2 884.336 217.509 884.336 217.509H884.767L926.857 175.212H962.139L912.843 224.11L970.031 288.313H936.646L895.401 241.536L884.767 251.946V288.297H856.5V133.122Z" fill="black"/>
-<path d="M970.444 211.285C970.444 163.455 1000.21 131.569 1044.85 131.569C1089.49 131.569 1119.26 163.455 1119.26 211.285C1119.26 259.114 1089.49 291.001 1044.85 291.001C1000.21 291.001 970.444 259.114 970.444 211.285ZM1088.42 211.285C1088.42 178.761 1071 156.855 1044.84 156.855C1018.67 156.855 1001.26 178.761 1001.26 211.285C1001.26 243.809 1018.69 265.715 1044.84 265.715C1070.98 265.715 1088.42 243.809 1088.42 211.285Z" fill="black"/>
-<path d="M1130.08 236.656H1162.4C1162.4 254.943 1174.95 265.146 1194.08 265.146C1210.23 265.146 1221.29 257.063 1221.29 245.584C1221.29 232.622 1212.79 229.21 1185.79 223.901C1161.12 219.007 1134.98 210.716 1134.98 178.399C1134.98 151.408 1157.93 131 1193.01 131C1229.57 131 1252.11 150.132 1252.11 179.037H1219.79C1219.79 165.007 1208.95 156.286 1193.01 156.286C1176.86 156.286 1166.86 164.146 1166.86 175.625C1166.86 187.742 1173.88 192.413 1195.56 196.878C1227.65 203.685 1254.02 207.288 1254.02 243.001C1254.02 271.3 1229.36 290.432 1193.01 290.432C1156.02 290.432 1130.08 268.957 1130.08 236.656Z" fill="black"/>
-<path d="M100 210C100 214.824 101.269 219.647 103.723 223.793L148.231 300.878C152.8 308.747 159.739 315.178 168.369 318.055C185.377 323.724 202.977 316.447 211.354 301.893L222.1 283.278L179.708 210L224.47 132.408L235.216 113.792C238.431 108.208 242.747 103.638 247.824 100H243.17H178.777C166.677 100 155.508 106.431 149.5 116.923L103.723 196.208C101.269 200.354 100 205.177 100 210Z" fill="#6363F1"/>
-<path d="M353.847 210C353.847 205.177 352.578 200.353 350.124 196.207L305.024 118.107C296.647 103.638 279.047 96.3608 262.039 101.945C253.409 104.822 246.47 111.253 241.901 119.122L231.747 136.638L274.139 210L229.378 287.592L218.632 306.208C215.416 311.708 211.101 316.362 206.024 320H210.678H275.07C287.17 320 298.34 313.569 304.347 303.077L350.124 223.792C352.578 219.646 353.847 214.823 353.847 210Z" fill="#6363F1"/>
-</svg>

.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

@@ -3,25 +3,33 @@ on:
   push:
     branches: [ master ]
 env:
-  ROADMAP_GA_SECRET: ${{ secrets.GA_SECRET }}
+  PUBLIC_API_URL: "https://api.roadmap.sh"
+  PUBLIC_AVATAR_BASE_URL: "https://dodrc8eu8m09s.cloudfront.net/avatars"
   GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+  PAT: ${{ secrets.PAT }}
   CI: true
-  NEXT_TELEMETRY_DISABLED: 1
 jobs:
   build:
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v2
+      with:
+        persist-credentials: false
     - uses: actions/setup-node@v1
       with:
-        node-version: 14
+        node-version: 18
+    - run: git config --global url."https://${{ secrets.PAT }}@github.com/".insteadOf ssh://git@github.com/
+    - uses: pnpm/action-setup@v2.2.2
+      with:
+        version: 7.13.4
     - name: Setup Environment
       run: |
-        npm install
+        pnpm install
     - name: Generate meta and build
       run: |
-        npm run meta
         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"

.github/workflows/update-deps.yml

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

.gitignore

@@ -1,36 +1,29 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-out
+.idea
+
+# 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

.npmrc

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

.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'),
+    require('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"
+  }
+}

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

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

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='Custom 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, rgb(255 255 255 / 40%), 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,67 +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='/about'>About</Link>
-        <Link py='7px' _hover={{ color: 'white' }} target='_blank'
-              href={siteConfig.url.youtube}>YouTube</Link>
-      </Stack>
-    </>
-  );
-}
-
-export function Footer() {
-  return (
-    <Box bg='brand.hero' 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>
-    </Box>
-  );
-}

components/global-header.tsx

@@ -1,117 +0,0 @@
-import { useState } from 'react';
-import { HamburgerIcon } from '@chakra-ui/icons';
-import { Box, CloseButton, Container, Flex, IconButton, Image, Link, Stack, Text } from '@chakra-ui/react';
-import RoadmapLogo from '../components/icons/roadmap.svg';
-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={999}
-        >
-          <Link href='/roadmaps'>Roadmaps</Link>
-          <Link href='/guides'>Guides</Link>
-          <Link href='/watch'>Videos</Link>
-          <Link href='/signup'>Subscribe</Link>
-          <CloseButton onClick={() => setIsOpen(false)} pos='fixed' top='40px' right='15px' size='lg' />
-        </Stack>
-      )}
-    </>
-  );
-}
-
-type GlobalHeaderProps = {
-  variant?: 'transparent' | 'solid'
-};
-
-export function GlobalHeader(props: GlobalHeaderProps) {
-  const { variant = 'solid' } = props;
-
-  return (
-    <Box bg={variant === 'solid' ? 'gray.900' : 'transparent'} 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'>
-              <RoadmapLogo style={{ height: '30px', width: '30px', marginRight: '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={'green'} 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,165 +0,0 @@
-import NextHead from 'next/head';
-import siteConfig from '../content/site.json';
-import { RoadmapType } from '../lib/roadmap';
-import { roadmapTheme } from '../styles/theme';
-
-type HelmetProps = {
-  title?: string;
-  keywords?: string[];
-  canonical?: string;
-  description?: string;
-  roadmap?: RoadmapType;
-};
-
-function getRichSnippetJson(roadmap: RoadmapType) {
-  return {
-    '@context': 'https://schema.org',
-    '@type': 'Article',
-    mainEntityOfPage: {
-      '@type': 'WebPage',
-      '@id': `https://roadmap.sh/${roadmap.id}`,
-    },
-    headline: roadmap.seo.title,
-    description: roadmap.seo.description,
-    image: roadmap.jsonUrl
-      ? `https://roadmap.sh/roadmaps/${roadmap.id}.png`
-      : undefined,
-    author: {
-      '@type': 'Person',
-      name: 'Kamran Ahmed',
-      url: 'https://twitter.com/kamranahmedse',
-    },
-    publisher: {
-      '@type': 'Organization',
-      name: 'roadmap.sh',
-      logo: {
-        '@type': 'ImageObject',
-        url: 'https://roadmap.sh/brand-square.png',
-      },
-    },
-  };
-}
-
-const Helmet = (props: HelmetProps) => {
-  const { roadmap, title, canonical, description, keywords } = props;
-
-  return (
-    <NextHead>
-      <meta charSet="UTF-8" />
-
-      <title>{title || siteConfig.title}</title>
-      <meta
-        name="description"
-        content={description || siteConfig.description}
-      />
-
-      <meta name="author" content={siteConfig.author} />
-      <meta
-        name="keywords"
-        content={keywords ? 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"
-      />
-      {canonical && <link rel="canonical" href={canonical} />}
-      <meta httpEquiv="Content-Language" content="en" />
-      <meta property="og:title" content={title || siteConfig.title} />
-      <meta
-        property="og:description"
-        content={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={title || siteConfig.title} />
-      <meta
-        name="twitter:description"
-        content={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" />
-
-      {roadmap?.id && (
-        <script
-          type="application/ld+json"
-          dangerouslySetInnerHTML={{
-            __html: JSON.stringify(getRichSnippetJson(roadmap)),
-          }}
-        />
-      )}
-
-      {/* 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/roadmap.svg

@@ -1,4 +0,0 @@
-<svg width="30" height="30" viewBox="0 0 283 283" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M0 39C0 17.4609 17.4609 0 39 0H244C265.539 0 283 17.4609 283 39V244C283 265.539 265.539 283 244 283H39C17.4609 283 0 265.539 0 244V39Z" fill="black"></path>
-    <path d="M121.215 210.72C119.348 211.28 116.361 211.84 112.255 212.4C108.335 212.96 104.228 213.24 99.9347 213.24C95.828 213.24 92.0947 212.96 88.7347 212.4C85.5614 211.84 82.8547 210.72 80.6147 209.04C78.3747 207.36 76.6014 205.12 75.2947 202.32C74.1747 199.333 73.6147 195.507 73.6147 190.84V106.84C73.6147 102.547 74.3614 98.9067 75.8547 95.92C77.5347 92.7467 79.868 89.9467 82.8547 87.52C85.8414 85.0933 89.4814 82.9467 93.7747 81.08C98.2547 79.0267 103.015 77.2533 108.055 75.76C113.095 74.2667 118.321 73.1467 123.735 72.4C129.148 71.4667 134.561 71 139.975 71C148.935 71 156.028 72.7733 161.255 76.32C166.481 79.68 169.095 85.28 169.095 93.12C169.095 95.7333 168.721 98.3467 167.975 100.96C167.228 103.387 166.295 105.627 165.175 107.68C161.255 107.68 157.241 107.867 153.135 108.24C149.028 108.613 145.015 109.173 141.095 109.92C137.175 110.667 133.441 111.507 129.895 112.44C126.535 113.187 123.641 114.12 121.215 115.24V210.72ZM166.387 188.32C166.387 180.48 168.813 173.947 173.667 168.72C178.52 163.493 185.147 160.88 193.547 160.88C201.947 160.88 208.573 163.493 213.427 168.72C218.28 173.947 220.707 180.48 220.707 188.32C220.707 196.16 218.28 202.693 213.427 207.92C208.573 213.147 201.947 215.76 193.547 215.76C185.147 215.76 178.52 213.147 173.667 207.92C168.813 202.693 166.387 196.16 166.387 188.32Z" fill="white"></path>
-</svg>

components/icons/tree.svg

@@ -1 +0,0 @@
-<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22 18v-7h-9v-5h3v-6h-8v6h3v5h-9v7h-2v6h6v-6h-2v-5h7v5h-2v6h6v-6h-2v-5h7v5h-2v6h6v-6z"/></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/icons/youtube.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill='currentColor'>
-    <path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"/>
-</svg>

components/links-list-item.tsx

@@ -1,58 +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;
-  target?: string;
-  icon?: React.ReactChild;
-  hideSubtitleOnMobile?: boolean;
-};
-
-export function LinksListItem(props: LinksListItemProps) {
-  const { title, subtitle, badgeText, icon, hideSubtitleOnMobile = false, href, target } = props;
-
-  return (
-    <Link
-      target={target || '_self'}
-      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'}
-      sx={{
-        '@media (hover: none)': {
-          '&:hover': {
-            '& .list-item-title': {
-              transform: 'none'
-            }
-          }
-        }
-      }}
-      _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='green' 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,37 +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
-  );
-
-  const linkProps: Record<string, string> = {
-    target: '_self',
-    ...(isExternalUrl
-      ? {
-          rel: 'nofollow',
-          target: '_blank',
-        }
-      : {}),
-  };
-
-  return (
-    <Link href={props.href} {...linkProps}>
-      {props.children}
-    </Link>
-  );
-};
-
-export default EnrichedLink;

components/md-renderer/mdx-components/badge-link.tsx

@@ -1,53 +0,0 @@
-import React from 'react';
-import { Link, Text, Badge } from '@chakra-ui/react';
-
-type BadgeLinkType = {
-  target: string;
-  badgeText: string;
-  href: string;
-  colorScheme?: string;
-  children: React.ReactNode;
-};
-
-export function BadgeLink(props: BadgeLinkType) {
-  const {
-    target = '_blank',
-    colorScheme = 'purple',
-    badgeText,
-    href,
-    children,
-  } = props;
-
-  // Is external URL or is a media URL
-  const isExternalUrl = /(^http(s)?:\/\/)|(\.(png|svg|jpeg|jpg)$)/.test(
-    props.href
-  );
-
-  const linkProps: Record<string, string> = {
-    ...(isExternalUrl
-      ? {
-          rel: 'nofollow',
-        }
-      : {}),
-  };
-
-  return (
-    <Text mb={'0px'}>
-      <Link
-        fontSize="14px"
-        color="blue.700"
-        fontWeight={500}
-        textDecoration="none"
-        href={href}
-        target={target}
-        _hover={{ textDecoration: 'none', color: 'purple.400' }}
-        {...linkProps}
-      >
-        <Badge fontSize="11px" mr="7px" colorScheme={colorScheme}>
-          {badgeText}
-        </Badge>
-        {children}
-      </Link>
-    </Text>
-  );
-}

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/dedicated-roadmap.tsx

@@ -1,22 +0,0 @@
-import { Box, Flex, Heading, Text } from '@chakra-ui/react';
-import TreeIcon from '../../icons/tree.svg';
-
-type DedicatedRoadmapProps = {
-  href: string;
-  title: string;
-  description: string;
-};
-
-export function DedicatedRoadmap(props: DedicatedRoadmapProps) {
-  const { href, title, description } = props;
-
-  return (
-    <Flex as={'a'} target='_blank' href={ href } p={5} px={5} mt={6} rounded='md' alignItems='center'  _hover={{ bg: 'yellow.400'}} bg='yellow.300'>
-      <Box d={['none', 'none', 'none', 'block', 'block']} mr={4} height='32px' w='32px' as={TreeIcon} color='gray.900' />
-      <Box as='span'>
-        <Heading fontSize='lg' as={'h4'} mb='2px' color='gray.900'>{ title }</Heading>
-        <Text color='gray.700' as='span' fontSize='md'>{ description }</Text>
-      </Box>
-    </Flex>
-  );
-}

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: 32px;
-  line-height: 40px;
-  font-weight: 700;
-  margin: 20px 0 10px !important;
-
-  &:hover ${HeaderLink} {
-    display: flex;
-  }
-`;
-
-const H2 = styled(H1).attrs({ as: 'h2' })`
-  font-size: 30px;
-`;
-
-const H3 = styled(H1).attrs({ as: 'h3' })`
-  margin: 22px 0 8px;
-  font-size: 28px;
-`;
-
-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: H1,
-  h2: H2,
-  h3: H3,
-  h4: H4,
-  h5: H5,
-  h6: 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,34 +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';
-import { ResourceGroupTitle } from './resource-group-title';
-import { DedicatedRoadmap } from './dedicated-roadmap';
-
-const MdxComponents = {
-  p: P,
-  ...Headings,
-  pre: Pre,
-  blockquote: BlockQuote,
-  a: EnrichedLink,
-  DedicatedRoadmap,
-  table: Table,
-  iframe: IFrame,
-  img: Img,
-  code: Code,
-  BadgeLink: BadgeLink,
-  ResourceGroupTitle: ResourceGroupTitle,
-  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/resource-group-title.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-import { Heading } from '@chakra-ui/react';
-
-type ResourceGroupTitleProps = {
-  children: React.ReactNode;
-};
-
-export function ResourceGroupTitle(props: ResourceGroupTitleProps) {
-  const { children } = props;
-
-  return <Heading mt='20px' color='gray.800' fontSize='14px' pb='5px' borderBottomWidth={1} textTransform='uppercase' as="h2" mb={'10px'}>{children}</Heading>;
-}

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,16 +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;
-  
-  ul {
-    margin-top: 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 bg='white' borderTopWidth={1} pt={['45px', '45px', '70px']} pb={['60px', '60px', '90px']} 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}
-          >6th 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,38 +0,0 @@
-import { Badge, Box, Container, Heading, Link, Text } from '@chakra-ui/react';
-import React from 'react';
-import siteConfig from '../content/site.json';
-
-type PageHeaderProps = {
-  title: string;
-  subtitle: string;
-  children?: React.ReactNode;
-  beforeTitle?: React.ReactNode;
-};
-
-export function PageHeader(props: PageHeaderProps) {
-  const { title, subtitle, children, beforeTitle = null } = props;
-
-  return (
-    <Box pt={['25px', '20px', '45px']} pb={['20px', '15px', '30px']} borderBottomWidth={1} mb='30px'>
-      <Container maxW='container.md' position='relative'>
-        {beforeTitle}
-        <Heading
-          as='h1'
-          color='black'
-          fontSize={['28px', '33px', '40px']}
-          fontWeight={700}
-          mb={['2px', '2px', '5px']}
-        >
-          {title}
-        </Heading>
-        <Text fontSize={['13px', '14px', '15px']}>{subtitle}</Text>
-      </Container>
-
-      {children && (
-        <Container maxW='container.md'>
-          {children}
-        </Container>
-      )}
-    </Box>
-  );
-}

components/page-wrapper.tsx

@@ -1,16 +0,0 @@
-import React from 'react';
-import { Box } from '@chakra-ui/react';
-
-type PageWrapperProps = {
-  children: React.ReactNode;
-}
-
-export function PageWrapper(props: PageWrapperProps) {
-  const { children } = props;
-
-  return (
-    <Box bgColor='brand.bg' bgImage='url(/bg.jpg)' bgRepeat='no-repeat' bgSize='100%' w='100%' minH='100vh'>
-      { children }
-    </Box>
-  );
-}

components/roadmap/content-drawer.tsx

@@ -1,117 +0,0 @@
-import { Box, Button, Flex, Text } from '@chakra-ui/react';
-import { RemoveScroll } from 'react-remove-scroll';
-import { RoadmapType } from '../../lib/roadmap';
-import RoadmapGroup from '../../pages/[roadmap]/[group]';
-import { CheckIcon, CloseIcon, RepeatIcon } from '@chakra-ui/icons';
-import { queryGroupElementsById } from '../../lib/renderer/utils';
-
-type ContentDrawerProps = {
-  roadmap: RoadmapType;
-  groupId: string;
-  onClose?: () => void;
-};
-
-export function ContentDrawer(props: ContentDrawerProps) {
-  const { roadmap, groupId, onClose = () => null } = props;
-  if (!groupId) {
-    return null;
-  }
-
-  const isDone = localStorage.getItem(groupId) === 'done';
-
-  return (
-    <Box zIndex={99999} pos="relative">
-      <Box
-        onClick={onClose}
-        pos="fixed"
-        top={0}
-        left={0}
-        right={0}
-        bottom={0}
-        bg="black"
-        opacity={0.4}
-      />
-      <RemoveScroll allowPinchZoom>
-        <Box
-          p="0px 30px 30px"
-          position="fixed"
-          w={['100%', '60%', '40%']}
-          bg="white"
-          top={0}
-          right={0}
-          bottom={0}
-          borderLeftWidth={'1px'}
-          overflowY="scroll"
-        >
-          <Flex
-            mt="20px"
-            justifyContent="space-between"
-            alignItems="center"
-            zIndex={1}
-          >
-            {!isDone && (
-              <Button
-                onClick={() => {
-                  localStorage.setItem(groupId, 'done');
-                  queryGroupElementsById(groupId).forEach((item) =>
-                    item?.classList?.add('done')
-                  );
-                  onClose();
-                }}
-                colorScheme="green"
-                leftIcon={<CheckIcon />}
-                size="xs"
-                iconSpacing={0}
-              >
-                <Text
-                  as="span"
-                  d={['block', 'none', 'none', 'block']}
-                  ml="10px"
-                >
-                  Mark as Done
-                </Text>
-              </Button>
-            )}
-            {isDone && (
-              <Button
-                onClick={() => {
-                  localStorage.removeItem(groupId);
-                  queryGroupElementsById(groupId).forEach((item) =>
-                    item?.classList?.remove('done')
-                  );
-                  onClose();
-                }}
-                colorScheme="red"
-                leftIcon={<RepeatIcon />}
-                size="xs"
-                iconSpacing={0}
-              >
-                <Text
-                  as="span"
-                  d={['block', 'none', 'none', 'block']}
-                  ml="10px"
-                >
-                  Mark as Pending
-                </Text>
-              </Button>
-            )}
-            <Button
-              onClick={onClose}
-              colorScheme="yellow"
-              ml="5px"
-              leftIcon={<CloseIcon width="8px" />}
-              iconSpacing={0}
-              size="xs"
-            >
-              <Text as="span" d={['none', 'none', 'none', 'block']} ml="10px">
-                Close
-              </Text>
-            </Button>
-          </Flex>
-
-          <RoadmapGroup isOutlet roadmap={roadmap} group={groupId} />
-        </Box>
-      </RemoveScroll>
-    </Box>
-  );
-}

components/roadmap/edit-content-page-link.tsx

@@ -1,39 +0,0 @@
-import React from 'react';
-import { Box, Button, Divider, Link, Text } from '@chakra-ui/react';
-
-type EditContentPageLinkProps = {
-  href: string;
-};
-
-export function EditContentPageLink(props: EditContentPageLinkProps) {
-  const { href } = props;
-
-  return (
-    <Box my='30px'>
-      <Divider mb="15px" orientation="horizontal" />
-      <Text
-        lineHeight="23px"
-        fontWeight={500}
-        fontSize="14px"
-        color="gray.500"
-        mb="10px"
-      >
-        This page is a work in progress. Help us by writing a small
-        introduction to the topic and suggesting a few links to read more
-        about this topic.
-      </Text>
-      <Button
-        size="sm"
-        py="20px"
-        as={Link}
-        href={href}
-        target="_blank"
-        isFullWidth
-        colorScheme={'gray'}
-        _hover={{ textDecoration: 'none', bg: 'gray.200' }}
-      >
-        Edit this Page
-      </Button>
-    </Box>
-  );
-}

components/roadmap/home-roadmap-item.tsx

@@ -1,114 +0,0 @@
-import { Box, Flex, Heading, Link, Text, Tooltip } from '@chakra-ui/react';
-import { InfoIcon } from '@chakra-ui/icons';
-
-type RoadmapGridItemProps = {
-  title: string;
-  subtitle: string;
-  isCommunity?: boolean;
-  isUpcoming?: boolean;
-  colorIndex?: number;
-  url: string;
-};
-
-const bgColorList = [
-  'red.100',
-  'yellow.100',
-  'green.200',
-  'teal.200',
-  'blue.200',
-  'red.200',
-  'gray.200',
-  'teal.200',
-  'yellow.100',
-  'green.200',
-  'red.200',
-];
-
-export function HomeRoadmapItem(props: RoadmapGridItemProps) {
-  const {
-    title,
-    subtitle,
-    isCommunity,
-    colorIndex = 0,
-    url,
-    isUpcoming,
-  } = props;
-
-  return (
-    <Box
-      as={Link}
-      href={url}
-      _hover={{
-        textDecoration: 'none',
-        bg: 'rgba(255,255,255,.10)',
-      }}
-      sx={{
-        // On mobile devices, don't change the scale
-        '@media (hover: none)': {
-          '&:hover': {
-            bg: 'rgba(255,255,255,.05)',
-          },
-        },
-      }}
-      flex={1}
-      shadow="2xl"
-      className={'home-roadmap-item'}
-      bg={'rgba(255,255,255,.05)'}
-      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']}
-        color={bgColorList[colorIndex]}
-        mb="5px"
-      >
-        {title}
-      </Heading>
-      <Text color="gray.200" fontSize={['13px']}>
-        {subtitle}
-      </Text>
-
-      {isUpcoming && (
-        <Flex
-          alignItems="center"
-          justifyContent="center"
-          pos="absolute"
-          left={0}
-          right={0}
-          top={0}
-          bottom={0}
-          rounded="10px"
-        >
-          <Text
-            color="white"
-            bg="gray.600"
-            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/roadmap/new-alert-banner.tsx

@@ -1,50 +0,0 @@
-import { Badge, Link, Text } from '@chakra-ui/react';
-import siteConfig from '../../content/site.json';
-import { event } from '../../lib/gtag';
-import React from 'react';
-
-export function NewAlertBanner() {
-  return (
-    <Text
-      _hover={{
-        textDecoration: 'none',
-        color: 'blue.700',
-        '& .new-badge': { bg: 'blue.700' },
-      }}
-      as={Link}
-      href={siteConfig.url.youtube}
-      d="block"
-      target="_blank"
-      color="red.700"
-      fontSize="sm"
-      mb="10px"
-      fontWeight={500}
-      onClick={() =>
-        event({
-          category: 'Subscription',
-          action: 'Clicked the YouTube banner',
-          label: 'YouTube Alert on Roadmap',
-        })
-      }
-    >
-      <Badge
-        transition={'all 300ms'}
-        className="new-badge"
-        mr="7px"
-        colorScheme="red"
-        variant="solid"
-      >
-        New
-      </Badge>
-      <Text textDecoration="underline" as="span" d={['none', 'inline']}>
-        Roadmap topics to be covered on our YouTube Channel
-      </Text>
-      <Text textDecoration="underline" as="span" d={['inline', 'none']}>
-        Topic videos being made on YouTube
-      </Text>
-      <Text as="span" ml="5px">
-        &raquo;
-      </Text>
-    </Text>
-  );
-}

components/roadmap/roadmap-error.tsx

@@ -1,26 +0,0 @@
-import { RoadmapType } from '../../lib/roadmap';
-import { Container, Heading, Link, Text } from '@chakra-ui/react';
-import siteConfig from '../../content/site.json';
-
-type RoadmapProps = {
-  roadmap: RoadmapType;
-};
-
-export function RoadmapError(props: RoadmapProps) {
-  const { roadmap } = props;
-
-  return (
-    <Container
-      bg={'red.600'}
-      maxW={'container.md'}
-      position="relative"
-      mt="50px"
-      p='20px'
-      rounded='5px'
-      color='white'
-    >
-      <Heading mb='4px' size='md'>Oops! There&apos;s an error</Heading>
-      <Text>Try refreshing or <Link target='_blank' fontWeight={700} textDecoration={'underline'} fontSize='14px' href={siteConfig.url.issue}>report a bug</Link> and use the <Link fontWeight={700} textDecoration={'underline'} href={`/roadmaps/${roadmap.id}.png`}>non-interactive version</Link></Text>
-    </Container>
-  );
-}

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/roadmap/roadmap-loader.tsx

@@ -1,20 +0,0 @@
-import { Container, Spinner } from '@chakra-ui/react';
-
-export function RoadmapLoader() {
-  return (
-    <Container
-      maxW={'container.md'}
-      position="relative"
-      mt="60px"
-      textAlign="center"
-    >
-      <Spinner
-        thickness="7px"
-        speed="0.65s"
-        emptyColor="gray.200"
-        color="gray.500"
-        size="xl"
-      />
-    </Container>
-  );
-}

components/roadmap/roadmap-page-header.tsx

@@ -1,130 +0,0 @@
-import siteConfig from '../../content/site.json';
-import { isInteractiveRoadmap, RoadmapType } from '../../lib/roadmap';
-import { NewAlertBanner } from './new-alert-banner';
-import {
-  Badge,
-  Box,
-  Button,
-  Container,
-  Flex,
-  Heading,
-  Link,
-  Stack,
-  Text,
-} from '@chakra-ui/react';
-import { ChatIcon, AtSignIcon, DownloadIcon } from '@chakra-ui/icons';
-import React from 'react';
-
-type RoadmapPageHeaderType = {
-  roadmap: RoadmapType;
-};
-
-export function RoadmapPageHeader(props: RoadmapPageHeaderType) {
-  const { roadmap } = props;
-
-  return (
-    <Box
-      pt={['25px', '20px', '45px']}
-      pb={['20px', '15px', '30px']}
-      borderBottomWidth={1}
-      mb="30px"
-    >
-      <Container maxW="container.md" position="relative">
-        <NewAlertBanner />
-        <Heading
-          as="h1"
-          color="black"
-          fontSize={['28px', '33px', '40px']}
-          fontWeight={700}
-          mb={['2px', '2px', '5px']}
-        >
-          {roadmap.title}
-        </Heading>
-        <Text fontSize={['13px', '14px', '15px']}>{roadmap.description}</Text>
-        <Flex justifyContent="space-between" alignItems={'center'} mt="20px">
-          <Stack isInline flex={1}>
-            <Button
-              d={['flex', 'flex']}
-              as={Link}
-              href={'/roadmaps'}
-              size="xs"
-              py="14px"
-              px="10px"
-              colorScheme="teal"
-              variant="solid"
-              _hover={{ textDecoration: 'none' }}
-            >
-              &larr;
-              <Text as="span" d={['none', 'inline']} ml="5px">
-                All Roadmaps
-              </Text>
-            </Button>
-
-            {roadmap.pdfUrl && (
-              <Button
-                as={Link}
-                href={roadmap.pdfUrl}
-                target="_blank"
-                size="xs"
-                py="14px"
-                px="10px"
-                leftIcon={<DownloadIcon />}
-                d={['none', 'flex']}
-                colorScheme="yellow"
-                variant="solid"
-                _hover={{ textDecoration: 'none' }}
-              >
-                Download
-              </Button>
-            )}
-            <Button
-              as={Link}
-              href={'/signup'}
-              size="xs"
-              py="14px"
-              px="10px"
-              variant="solid"
-              colorScheme="yellow"
-              leftIcon={<AtSignIcon />}
-              _hover={{ textDecoration: 'none' }}
-            >
-              Subscribe
-            </Button>
-            <Box flex={1} justifyContent='flex-end' d='flex'>
-              <Button
-                as={Link}
-                href={`${siteConfig.url.issue}?title=[Suggestion] ${roadmap.title}`}
-                target='_blank'
-                size="xs"
-                py="14px"
-                px="10px"
-                colorScheme="green"
-                leftIcon={<ChatIcon />}
-                _hover={{ textDecoration: 'none' }}
-              >
-                Suggest Changes
-              </Button>
-            </Box>
-          </Stack>
-        </Flex>
-        {isInteractiveRoadmap(roadmap.id) && (
-          <Text
-            mt="30px"
-            mb={['-37px', '-32px', '-47px']}
-            fontWeight={500}
-            fontSize="14px"
-            bg="white"
-            borderWidth={1}
-            p="5px 7px"
-            rounded="3px"
-          >
-            <Badge pos="relative" top={'-1px'} mr="6px" colorScheme="yellow">
-              New
-            </Badge>
-            Resources are here, try clicking any nodes.
-          </Text>
-        )}
-      </Container>
-    </Box>
-  );
-}

components/sticky-banner.tsx

@@ -1,33 +0,0 @@
-import { Flex, Link, Text } from '@chakra-ui/react';
-import YouTubeLogo from '../components/icons/youtube.svg';
-import siteConfig from '../content/site.json';
-import { event } from '../lib/gtag';
-
-export function StickyBanner() {
-  return (
-    <Flex as={Link}
-          href={siteConfig.url.youtube}
-          bg={'yellow.200'}
-          color='gray.900'
-          alignItems='center'
-          position='sticky'
-          top={0}
-          zIndex={999}
-          justifyContent='center'
-          py='8px'
-          _hover={{ textDecoration: 'none', bg: 'yellow.400' }}
-          target='_blank'
-          onClick={() => event({
-            category: 'Subscription',
-            action: 'Clicked the YouTube banner',
-            label: 'Sticky YouTube banner on Top'
-          })}
-    >
-      <YouTubeLogo style={{ height: '20px', display: 'inline-block', marginRight: '7px' }} />
-      <Text as='span' fontWeight={500} fontSize='14px'>
-        <Text as='span'>We now have a YouTube Channel. <Text as='span' d={['none', 'inline']}>Subscribe for the video
-          content.</Text></Text>
-      </Text>
-    </Flex>
-  );
-}

components/watch/video-grid-item.tsx

@@ -1,69 +0,0 @@
-import { Badge, Box, Heading, Link, Text } from '@chakra-ui/react';
-
-type VideoGridItemProps = {
-  href: string;
-  title: string;
-  subtitle: string;
-  date: string;
-  target?: string;
-  isNew?: 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, colorIndex = 0, href, target } = props;
-
-  return (
-    <Box _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }} as={Link} href={ href } target={target || '_self'} shadow='xl' p='20px'
-          rounded='10px' bg={bgColorList[colorIndex] ?? bgColorList[0]} flex={1}>
-      <Text mb='7px' fontSize='12px' color='gray.400'>
-        {isNew && <Badge colorScheme={'green'} mr='10px'>New</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,49 +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"
-  },
-  {
-    "username": "danielgruesso",
-    "name": "Daniel Gruesso",
-    "bio": "Product manager working on blockchain and smart contracts developer tools",
-    "picture": "/authors/danielgruesso.jpg"
-  }
-]

content/guides.json

@@ -1,256 +0,0 @@
-[
-  {
-    "id": "avoid-render-blocking-javascript-with-async-defer",
-    "title": "Async and Defer Script Loading",
-    "description": "Learn how to avoid render blocking JavaScript using async and defer scripts.",
-    "isNew": false,
-    "authorUsername": "kamranahmedse",
-    "updatedAt": "2021-09-10T19:59:14.191Z",
-    "createdAt": "2021-09-10T19:59:14.191Z"
-  },
-  {
-    "id": "what-are-web-vitals",
-    "title": "What are Web Vitals?",
-    "description": "Learn what are the core web vitals and how to measure them.",
-    "isNew": false,
-    "authorUsername": "kamranahmedse",
-    "updatedAt": "2021-09-05T19:59:14.191Z",
-    "createdAt": "2021-09-05T19:59:14.191Z"
-  },
-  {
-    "id": "what-is-sli-slo-sla",
-    "title": "SLIs, SLOs and SLAs",
-    "description": "Learn what are different indicators for performance identification of any service.",
-    "isNew": false,
-    "authorUsername": "kamranahmedse",
-    "updatedAt": "2021-08-31T19:59:14.191Z",
-    "createdAt": "2021-08-31T19:59:14.191Z"
-  },
-  {
-    "id": "ci-cd",
-    "title": "What is CI and CD?",
-    "description": "Learn the basics of CI/CD and how to implement that with GitHub Actions.",
-    "isNew": false,
-    "authorUsername": "kamranahmedse",
-    "updatedAt": "2021-07-09T19:59:14.191Z",
-    "createdAt": "2021-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.",
-    "isNew": false,
-    "authorUsername": "kamranahmedse",
-    "updatedAt": "2021-07-01T19:59:14.191Z",
-    "createdAt": "2021-07-01T19:59:14.191Z"
-  },
-  {
-    "id": "oauth",
-    "title": "OAuth — Open Authorization",
-    "description": "Learn and understand what is OAuth and how it works",
-    "isNew": false,
-    "authorUsername": "kamranahmedse",
-    "updatedAt": "2021-06-28T19:59:14.191Z",
-    "createdAt": "2021-06-28T19:59:14.191Z"
-  },
-  {
-    "id": "jwt-authentication",
-    "title": "JWT Authentication",
-    "description": "Understand what is JWT authentication and how is it implemented",
-    "isNew": false,
-    "authorUsername": "kamranahmedse",
-    "updatedAt": "2021-06-20T19:59:14.191Z",
-    "createdAt": "2021-06-20T19:59:14.191Z"
-  },
-  {
-    "id": "token-authentication",
-    "title": "Token Based Authentication",
-    "description": "Understand what is token based authentication and how it is implemented",
-    "isNew": false,
-    "authorUsername": "kamranahmedse",
-    "updatedAt": "2021-06-02T20:59:14.191Z",
-    "createdAt": "2021-06-02T20:59:14.191Z"
-  },
-  {
-    "id": "session-authentication",
-    "title": "Session Based Authentication",
-    "description": "Understand what is session based authentication and how it is implemented",
-    "isNew": false,
-    "authorUsername": "kamranahmedse",
-    "updatedAt": "2021-05-26T20:59:14.191Z",
-    "createdAt": "2021-05-26T20:59:14.191Z"
-  },
-  {
-    "id": "basic-authentication",
-    "title": "Basic Authentication",
-    "description": "Understand what is basic authentication and how it is implemented",
-    "isNew": false,
-    "authorUsername": "kamranahmedse",
-    "updatedAt": "2021-05-19T20:59:14.191Z",
-    "createdAt": "2021-05-19T20:59:14.191Z"
-  },
-  {
-    "id": "character-encodings",
-    "title": "Character Encodings",
-    "description": "Covers the basics of character encodings and explains ASCII vs Unicode",
-    "isNew": false,
-    "authorUsername": "kamranahmedse",
-    "updatedAt": "2021-05-14T20:59:14.191Z",
-    "createdAt": "2021-05-14T20:59:14.191Z"
-  },
-  {
-    "id": "unfamiliar-codebase",
-    "title": "Unfamiliar Codebase",
-    "description": "Tips on getting getting familiar with an unfamiliar codebase",
-    "isNew": false,
-    "authorUsername": "kamranahmedse",
-    "updatedAt": "2021-05-04T20:59:14.191Z",
-    "createdAt": "2021-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",
-    "isNew": false,
-    "authorUsername": "spekulatius",
-    "updatedAt": "2021-05-04T12:59:14.191Z",
-    "createdAt": "2021-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.",
-    "isNew": false,
-    "authorUsername": "kamranahmedse",
-    "updatedAt": "2021-04-28T15:48:21.191Z",
-    "createdAt": "2021-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",
-    "isNew": false,
-    "authorUsername": "kamranahmedse",
-    "updatedAt": "2021-04-22T15:48:21.191Z",
-    "createdAt": "2021-04-22T15:48:21.191Z"
-  },
-  {
-    "id": "asymptotic-notation",
-    "title": "Asymptotic Notation",
-    "description": "Learn the basics of measuring the time and space complexity of algorithms",
-    "isNew": false,
-    "authorUsername": "kamranahmedse",
-    "updatedAt": "2021-04-03T15:48:21.191Z",
-    "createdAt": "2021-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",
-    "isNew": false,
-    "authorUsername": "kamranahmedse",
-    "updatedAt": "2021-03-15T15:48:21.191Z",
-    "createdAt": "2021-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.",
-    "isNew": false,
-    "authorUsername": "kamranahmedse",
-    "updatedAt": "2021-03-14T15:48:21.191Z",
-    "createdAt": "2021-03-14T15:48:21.191Z"
-  },
-  {
-    "id": "scaling-databases",
-    "title": "Scaling Databases",
-    "description": "Learn the ups and downs of different database scaling strategies",
-    "isNew": false,
-    "authorUsername": "kamranahmedse",
-    "updatedAt": "2021-02-18T15:48:21.191Z",
-    "createdAt": "2021-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",
-    "isNew": false,
-    "authorUsername": "dmytrobol",
-    "updatedAt": "2021-02-29T15:48:21.191Z",
-    "createdAt": "2021-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",
-    "isNew": false,
-    "authorUsername": "jesse",
-    "updatedAt": "2021-01-17T15:48:21.191Z",
-    "createdAt": "2021-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?",
-    "isNew": false,
-    "authorUsername": "kamranahmedse",
-    "updatedAt": "2020-12-03T12:13:00.860Z",
-    "createdAt": "2020-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",
-    "isNew": 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",
-    "isNew": 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.",
-    "isNew": 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",
-    "isNew": 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",
-    "isNew": 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?",
-    "isNew": false,
-    "authorUsername": "ebrahimbharmal007",
-    "createdAt": "2017-10-24T17:00:00.860Z",
-    "updatedAt": "2017-10-24T17:00:00.860Z"
-  }
-]

content/guides/asymptotic-notation.md

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

content/guides/avoid-render-blocking-javascript-with-async-defer.md

@@ -1,2 +0,0 @@
-[![](/guides/avoid-render-blocking-javascript-with-async-defer.png)](/guides/avoid-render-blocking-javascript-with-async-defer.png)
-

content/guides/basic-authentication.md

@@ -1,2 +0,0 @@
-[![](/guides/basic-authentication.png)](/guides/basic-authentication.png)
-

content/guides/big-o-notation.md

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

content/guides/character-encodings.md

@@ -1,2 +0,0 @@
-[![](/guides/character-encodings.png)](/guides/character-encodings.png)
-

content/guides/ci-cd.md

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

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

@@ -1,2 +0,0 @@
-[![](/guides/dhcp.png)](/guides/dhcp.png)
-

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

@@ -1,5 +0,0 @@
-DNS or Domain Name System is one of the fundamental blocks of the internet. As a developer, you should have at-least the basic understanding of how it works. This article is a brief introduction to what is DNS and how it works.
-
-DNS at its simplest is like a phonebook on your mobile phone. Whenever you have to call one of your contacts, you can either dial their number from your memory or use their name which will then be used by your mobile phone to search their number in your phone book to call them. Every time you make a new friend, or your existing friend gets a mobile phone, you have to memorize their phone number or save it in your phonebook to be able to call them later on. DNS or Domain Name System, in a similar fashion, is a mechanism that allows you to browse websites on the internet. Just like your mobile phone does not know how to call without knowing the phone number, your browser does not know how to open a website just by the domain name; it needs to know the IP Address for the website to open. You can either type the IP Address to open, or provide the domain name and press enter which will then be used by your browser to find the IP address by going through several hoops. The picture below is the illustration of how your browser finds a website on the internet.
-
-[![](https://i.imgur.com/z9rwm5A.png)](https://i.imgur.com/z9rwm5A.png)

content/guides/history-of-javascript.md

@@ -1,41 +0,0 @@
-Around 10 years ago, Jeff Atwood (the founder of stackoverflow) made a case that JavaScript is going to be the future and he coined the “Atwood Law” which states that *Any application that can be written in JavaScript will eventually be written in JavaScript*. Fast-forward to today, 10 years later, if you look at it it rings truer than ever. JavaScript is continuing to gain more and more adoption.
-
-### JavaScript is announced
-JavaScript was initially created by [Brendan Eich](https://twitter.com/BrendanEich) of NetScape and was first announced in a press release by Netscape in 1995. It has a bizarre history of naming; initally it was named `Mocha` by the creator, which was later renamed to `LiveScript`.  In 1996, about a year later after the release, NetScape decided to rename it to be `JavaScript` with hopes of capitalizing on the Java community (although JavaScript did not have any relationship with Java) and released Netscape 2.0 with the official support of JavaScript.
-
-### ES1, ES2 and ES3
-In 1996, Netscape decided to submit it to [ECMA International](https://en.wikipedia.org/wiki/Ecma_International) with the hopes of getting it standardized. First edition of the standard specification was released in 1997 and the language was standardized. After the initial release, `ECMAScript` was continued to be worked upon and in no-time two more versions were released ECMAScript 2 in 1998 and ECMAScript 3 in 1999.
-
-### Decade of Silence and ES4
-After the release of ES3 in 1999, there was a complete silence for a decade and no changes were made to the official standard. There was some work on the fourth edition in the initial days; some of the features that were being discussed included classes, modules, static typings, destructuring etc. It was being targeted to be released by 2008 but was abandoned due to political differences concerning language complexity. However, the vendors kept introducing the extensions to the language and the developers were left scratching their heads — adding polyfills to battle compatibility issues between different browsers.
-
-### From silence to ES5
-Google, Microsoft, Yahoo and other disputers of ES4 came together and decided to work on a less ambitious update to ES3 tentatively named ES3.1. But the teams were still fighting about what to include from ES4 and what not. Finally, in 2009 ES5 was released mainly focusing on fixing the compatibility and security issues etc. But there wasn’t much of a splash in the water — it took ages for the vendors to incorporate the standards and many developers were still using ES3 without being aware of the “modern” standards.
-
-### Release of ES6 — ECMAScript 2015
-After a few years of the release of ES5, things started to change, TC39 (the committee under ECMA international responsible for ECMAScript standardization) kept working on the next version of ECMAScript (ES6) which was originally named ES Harmony, before being eventually released with the name ES2015. ES2015 adds significant features and syntactic sugar to allow writing complex applications. Some of the features that ES6 has to offer, include Classes, Modules, Arrows, Enhanced object literals, Template strings, Destructuring, Default param values + rest + spread, Let and Const, Iterators + for..of, Generators, Maps + Sets, Proxies, Symbols, Promises, math + number + string + array + object APIs [etc](http://es6-features.org/#Constants)
-
-Browser support for ES6 is still scarce but everything that ES6 has to offer is still available to developers by transpiling the ES6 code to ES5. With the release of 6th version of ECMAScript, TC39 decided to move to yearly model of releasing updates to ECMAScript so to make sure that the new features are added as soon as they are approved and we don’t have to wait for the full specification to be drafted and approved — thus 6th version of ECMAScript was renamed as ECMAScript 2015 or ES2015 before the release in June 2015. And the next versions of ECMAScript were decided to published in June of every year.
-
-### Release of ES7 — ECMAScript 2016
-In June 2016, seventh version of ECMAScript was released. As ECMAScript has been moved to an yearly release model, ECMAScript 2016 (ES2016) comparatively did not have much to offer. ES2016 includes just two new features
-
-* Exponentiation operator `**`
-* `Array.prototype.includes`
-
-### Release of ES8 — ECMAScript 2017
-The eighth version of ECMAScript was released in June 2017. The key highlight of ES8 was the addition of async functions. Here is the list of new features in ES8
-
-* `Object.values()` and `Object.entries()`
-* String padding i.e. `String.prototype.padEnd()` and `String.prototype.padStart()`
-* `Object.getOwnPropertyDescriptors`
-* Trailing commas in function parameter lists and calls
-* Async functions
-
-### What is ESNext then?
-ESNext is a dynamic name that refers to whatever the current version of ECMAScript is at the given time. For example, at the time of this writing `ES2017` or `ES8` is `ESNext`.
-
-### What does the future hold?
-Since the release of ES6, [TC39](https://github.com/tc39) has quite streamlined their process. TC39 operates through a Github organization now and there are [several proposals](https://github.com/tc39/proposals) for new features or syntax to be added to the next versions of ECMAScript. Any one can go ahead and [submit a proposal](https://github.com/tc39/proposals) thus resulting in increasing the participation from the community. Every proposal goes through [four stages of maturity](https://tc39.github.io/process-document/) before it makes it into the specification.
-
-And that about wraps it up. Feel free to leave your feedback in the comments section below. Also here are the links to original language specifications [ES6](https://www.ecma-international.org/ecma-262/6.0/), [ES7](https://www.ecma-international.org/ecma-262/7.0/) and [ES8](https://www.ecma-international.org/ecma-262/8.0/).

content/guides/http-caching.md

@@ -1,251 +0,0 @@
-As users, we easily get frustrated by the buffering videos, the images that take seconds to load, pages that got stuck because the content is being loaded. Loading the resources from some cache is much faster than fetching the same from the originating server. It reduces latency, speeds up the loading of resources, decreases the load on server, cuts down the bandwidth costs etc. 
-
-### Introduction
-
-What is web cache? It is something that sits somewhere between the client and the server, continuously looking at the requests and their responses, looking for any responses that can be cached. So that there is less time consumed when the same request is made again. 
-
-![Web Cache](https://i.imgur.com/mJYVvTh.png)
-
-> Note that this image is just to give you an idea. Depending upon the type of cache, the place where it is implemented could vary. More on this later.
-
-Before we get into further details, let me give you an overview of the terms that will be used, further in the article
-
-- **Client** could be your browser or any application requesting the server for some resource
-- **Origin Server**, the source of truth, houses all the content required by the client and is responsible for fulfilling the client requests.
-- **Stale Content** is the cached but expired content
-- **Fresh Content** is the content available in cache that hasn't expired yet
-- **Cache Validation** is the process of contacting the server to check the validity of the cached content and get it updated for when it is going to expire
-- **Cache Invalidation** is the process of removing any stale content available in the cache
-
-![](https://i.imgur.com/9MjlzvW.png)
-
-### Caching Locations
-
-Web cache can be shared or private depending upon the location where it exists. Here is the list of different caching locations
-
-- [Browser Cache](#browser-cache)
-- [Proxy Cache](#proxy-cache)
-- [Reverse Proxy Cache](#reverse-proxy-cache)
-
-#### Browser Cache
-
-You might have noticed that when you click the back button in your browser it takes less time to load the page than the time that it took during the first load; this is the browser cache in play. Browser cache is the most common location for caching and browsers usually reserve some space for it.
-
-![Web Cache](https://i.imgur.com/mJYVvTh.png)
-
-A browser cache is limited to just one user and unlike other caches, it can store the "private" responses. More on it later.
-
-#### Proxy Cache
-
-Unlike browser cache which serves a single user, proxy caches may serve hundreds of different users accessing the same content. They are usually implemented on a broader level by ISPs or any other independent entities for example.
-
-![Proxy Cache](https://i.imgur.com/3mj6e1O.png)
-
-#### Reverse Proxy Cache
-
-Reverse proxy cache or surrogate cache is implemented close to the origin servers in order to reduce the load on server. Unlike proxy caches which are implemented by ISPs etc to reduce the bandwidth usage in a network, surrogates or reverse proxy caches are implemented near to the origin servers by the server administrators to reduce the load on server.
-
-![Reverse Proxy Cache](http://i.imgur.com/Eg4Cru3.png)
- 
-Although you can control the reverse proxy caches (since it is implemented by you on your server) you can not avoid or control browser and proxy caches. And if your website is not configured to use these caches properly, it will still be cached using whatever the defaults are set on these caches.
-
-### Caching Headers
-
-So, how do we control the web cache? Whenever the server emits some response, it is accompanied with some HTTP headers to guide the caches whether and how to cache this response. Content provider is the one that has to make sure to return proper HTTP headers to force the caches on how to cache the content.
-
-- [Expires](#expires)
-- [Pragma](#pragma)
-- [Cache-Control](#cache-control)
-  - [private](#private)
-  - [public](#public)
-  - [no-store](#no-store)
-  - [no-cache](#no-cache)
-  - [max-age: seconds](#max-age)
-  - [s-maxage: seconds](#s-maxage)
-  - [must-revalidate](#must-revalidate)
-  - [proxy-revalidate](#proxy-revalidate)
-  - [Mixing Values](#mixing-values)
-- [Validators](#validators)
-  - [ETag](#etag)
-  - [Last-Modified](#last-modified)
-
-#### Expires
-
-Before HTTP/1.1 and introduction of `Cache-Control`, there was `Expires` header which is simply a timestamp telling the caches how long should some content be considered fresh. Possible value to this header is absolute expiry date; where date has to be in GMT. Below is the sample header
-
-```html
-Expires: Mon, 13 Mar 2017 12:22:00 GMT
-```
-
-It should be noted that the date cannot be more than a year and if the date format is wrong, content will be considered stale. Also, the clock on cache has to be in sync with the clock on server, otherwise the desired results might not be achieved. 
-
-Although, `Expires` header is still valid and is supported widely by the caches, preference should be given to HTTP/1.1 successor of it i.e. `Cache-Control`.  
-
-#### Pragma
-
-Another one from the old, pre HTTP/1.1 days, is `Pragma`. Everything that it could do is now possible using the cache-control header given below. However, one thing I would like to point out about it is, you might see `Pragma: no-cache` being used here and there in hopes of stopping the response from being cached. It might not necessarily work; as HTTP specification discusses it in the request headers and there is no mention of it in the response headers. Rather `Cache-Control` header should be used to control the caching.
-
-#### Cache-Control
-
-Cache-Control specifies how long and in what manner should the content be cached. This family of headers was introduced in HTTP/1.1 to overcome the limitations of the `Expires` header.
-  
-Value for the `Cache-Control` header is composite i.e. it can have multiple directive/values. Let's look at the possible values that this header may contain. 
-
-##### private
-Setting the cache to `private` means that the content will not be cached in any of the proxies and it will only be cached by the client (i.e. browser)
-
-```html
-Cache-Control: private
-```
-
-Having said that, don't let it fool you in to thinking that setting this header will make your data any secure; you still have to use SSL for that purpose. 
-
-##### public
-
-If set to `public`, apart from being cached by the client, it can also be cached by the proxies; serving many other users
-
-```html
-Cache-Control: public
-```
-
-##### no-store
-**`no-store`** specifies that the content is not to be cached by any of the caches
-
-```html
-Cache-Control: no-store
-```
-
-##### no-cache
-**`no-cache`** indicates that the cache can be maintained but the cached content is to be re-validated (using `ETag` for example) from the server before being served. That is, there is still a request to server but for validation and not to download the cached content.
-
-```html
-Cache-Control: max-age=3600, no-cache, public
-```
-
-##### max-age: seconds
-**`max-age`** specifies the number of seconds for which the content will be cached. For example, if the `cache-control` looks like below:
-
-```html
-Cache-Control: max-age=3600, public
-```
-it would mean that the content is publicly cacheable and will be considered stale after 60 minutes
-
-##### s-maxage: seconds
-**`s-maxage`** here `s-` prefix stands for shared. This directive specifically targets the shared caches. Like `max-age` it also gets the number of seconds for which something is to be cached. If present, it will override `max-age` and `expires` headers for shared caching.
-
-```html
-Cache-Control: s-maxage=3600, public
-```
-
-##### must-revalidate
-**`must-revalidate`** it might happen sometimes that if you have network problems and the content cannot be retrieved from the server, browser may serve stale content without validation. `must-revalidate` avoids that. If this directive is present, it means that stale content cannot be served in any case and the data must be re-validated from the server before serving. 
-
-```html
-Cache-Control: max-age=3600, public, must-revalidate
-```
-
-##### proxy-revalidate
-**`proxy-revalidate`** is similar to `must-revalidate` but it specifies the same for shared or proxy caches. In other words `proxy-revalidate` is to `must-revalidate` as `s-maxage` is to `max-age`. But why did they not call it `s-revalidate`?. I have no idea why, if you have any clue please leave a comment below. 
-
-##### Mixing Values
-You can combine these directives in different ways to achieve different caching behaviors, however `no-cache/no-store` and `public/private` are mutually exclusive. 
-
-If you specify both `no-store` and `no-cache`, `no-store` will be given precedence over `no-cache`.
-
-```html
-; If specified both
-Cache-Control: no-store, no-cache
-
-; Below will be considered
-Cache-Control: no-store
-```
-
-For `private/public`, for any unauthenticated requests cache is considered `public` and for any authenticated ones cache is considered `private`.
-
-### Validators 
-
-Up until now we only discussed how the content is cached and how long the cached content is to be considered fresh but we did not discuss how the client does the validation from the server. Below we discuss the headers used for this purpose.
-
-#### ETag
-
-Etag or "entity tag" was introduced in HTTP/1.1 specs. Etag is just a unique identifier that the server attaches with some resource. This ETag is later on used by the client to make conditional HTTP requests stating `"give me this resource if ETag is not same as the ETag that I have"` and the content is downloaded only if the etags do not match. 
-
-Method by which ETag is generated is not specified in the HTTP docs and usually some collision-resistant hash function is used to assign etags to each version of a resource. There could be two types of etags i.e. strong and weak
-
-```html
-ETag: "j82j8232ha7sdh0q2882" - Strong Etag
-ETag: W/"j82j8232ha7sdh0q2882" - Weak Etag (prefixed with `W/`)
-```
-
-A strong validating ETag means that two resources are **exactly** same and there is no difference between them at all. While a weak ETag means that two resources are although not strictly same but could be considered same. Weak etags might be useful for dynamic content, for example.
-
-Now you know what etags are but how does the browser make this request? by making a request to server while sending the available Etag in `If-None-Match` header.
-
-Consider the scenario, you opened a web page which loaded a logo image with caching period of 60 seconds and ETag of `abc123xyz`. After about 30 minutes you reload the page, browser will notice that the logo which was fresh for 60 seconds is now stale; it will trigger a request to server, sending the ETag of the stale logo image in `if-none-match` header
-
-```html
-If-None-Match: "abc123xyz"
-```
-
-Server will then compare this ETag with the ETag of the current version of resource. If both etags are matched, server will send back the response of `304 Not Modified` which will tell the client that the copy that it has is still good and it will be considered fresh for another 60 seconds. If both the etags do not match i.e. the logo has likely changed and client will be sent the new logo which it will use to replace the stale logo that it has.
-
-#### Last-Modified
-
-Server might include the `Last-Modified` header indicating the date and time at which some content was last modified on.
- 
-```html
-Last-Modified: Wed, 15 Mar 2017 12:30:26 GMT
-```
-
-When the content gets stale, client will make a conditional request including the last modified date that it has inside the header called `If-Modified-Since` to server to get the updated `Last-Modified` date; if it matches the date that the client has, `Last-Modified` date for the content is updated to be considered fresh for another `n` seconds. If the received `Last-Modified` date does not match the one that the client has, content is reloaded from the server and replaced with the content that client has.
-
-```html
-If-Modified-Since: Wed, 15 Mar 2017 12:30:26 GMT
-```
-
-You might be questioning now, what if the cached content has both the `Last-Modified` and `ETag` assigned to it? Well, in that case both are to be used i.e. there will not be any re-downloading of the resource if and only if `ETag` matches the newly retrieved one and so does the `Last-Modified` date. If either the `ETag` does not match or the `Last-Modified` is greater than the one from the server, content has to be downloaded again. 
-
-### Where do I start?
-
-Now that we have got *everything* covered, let us put everything in perspective and see how you can use this information.
-
-#### Utilizing Server
-
-Before we get into the possible caching strategies , let me add the fact that most of the servers including Apache and Nginx allow you to implement your caching policy through the server so that you don't have to juggle with headers in your code. 
-
-**For example**, if you are using Apache and you have your static content placed at `/static`, you can put below `.htaccess` file in the directory to make all the content in it be cached for an year using below
-
-```html
-# Cache everything for an year
-Header set Cache-Control "max-age=31536000, public"
-```
-
-You can further use `filesMatch` directive to add conditionals and use different caching strategy for different kinds of files e.g.
-
-```html
-# Cache any images for one year
-<filesMatch ".(png|jpg|jpeg|gif)$">
-    Header set Cache-Control "max-age=31536000, public"
-</filesMatch>
-
-# Cache any CSS and JS files for a month
-<filesMatch ".(css|js)$">
-    Header set Cache-Control "max-age=2628000, public"
-</filesMatch>
-```
-
-Or if you don't want to use the `.htaccess` file you can modify Apache's configuration file `http.conf`. Same goes for Nginx, you can add the caching information in the location or server block.  
-
-#### Caching Recommendations
-
-There is no golden rule or set standards about how your caching policy should look like, each of the application is different and you have to look and find what suits your application the best. However, just to give you a rough idea
-
-  - You can have aggressive caching (e.g. cache for an year) on any static content and use fingerprinted filenames (e.g. `style.ju2i90.css`) so that the cache is automatically rejected whenever the files are updated.
-    Also it should be noted that you should not cross the upper limit of one year as it [might not be honored](https://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.9) 
-  - Look and decide do you even need caching for any dynamic content, if yes how long it should be. For example, in case of some RSS feed of a blog there could be the caching of a few hours but there couldn't be any caching for inventory items in an ERP.
-  - Always add the validators (preferably ETags) in your response.
-  - Pay attention while choosing the visibility (private or public) of the cached content. Make sure that you do not accidentally cache any user-specific or sensitive content in any public proxies. When in doubt, do not use cache at all.
-  - Separate the content that changes often from the content that doesn't change that often (e.g. in javascript bundles) so that when it is updated it doesn't need to make the whole cached content stale.  
-  - Test and monitor the caching headers being served by your site. You can use the browser console or `curl -I http://some-url.com` for that purpose. 
-
-And that about wraps it up. Stay tuned for more!

content/guides/jwt-authentication.md

@@ -1,2 +0,0 @@
-[![](/guides/jwt-authentication.png)](/guides/jwt-authentication.png)
-

content/guides/oauth.md

@@ -1,2 +0,0 @@
-[![](/guides/oauth.png)](/guides/oauth.png)
-

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,4 +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)
-

content/guides/scaling-databases.md

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

content/guides/session-authentication.md

@@ -1,2 +0,0 @@
-[![](/guides/session-authentication.png)](/guides/session-authentication.png)
-

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

@@ -1,2 +0,0 @@
-[![](/guides/ssl-tls-https-ssh.png)](/guides/ssl-tls-https-ssh.png)
-

content/guides/sso.md

@@ -1,2 +0,0 @@
-[![](/guides/sso.png)](/guides/sso.png)
-

content/guides/threads-and-concurrency.md

@@ -1,8 +0,0 @@
-# Threads and Concurrency
-
-A thread is an execution context in which the instructions to the CPU can be scheduled and executed independently of the parent process. Concurrency is the concept of multiple threads in a shared memory space being computed simultaneously (or intermittently executed in succession to provide that illusion). Concurrency allows multiple processes to execute at once and can apply to programming languages as well as operating systems. 
-
-<ResourceGroupTitle>Free Content</ResourceGroupTitle>
-<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=olYdb0DdGtM'>Threading Tutorial #1 - Concurrency, Threading and Parallelism</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://medium.com/@akhandmishra/operating-system-threads-and-concurrency-aec2036b90f8'>Operating System: Threads and Concurrency</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://web.mit.edu/6.005/www/fa14/classes/17-concurrency/'>Reading 17: Concurrency</BadgeLink>

content/guides/token-authentication.md

@@ -1,2 +0,0 @@
-[![](/guides/token-authentication.png)](/guides/token-authentication.png)
-

content/guides/unfamiliar-codebase.md

@@ -1,2 +0,0 @@
-[![](/guides/unfamiliar-codebase.png)](/guides/unfamiliar-codebase.png)
-

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-are-web-vitals.md

@@ -1,2 +0,0 @@
-[![](/guides/web-vitals.png)](/guides/web-vitals.png)
-

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/what-is-sli-slo-sla.md

@@ -1,2 +0,0 @@
-[![](/guides/sli-slo-sla.jpeg)](/guides/sli-slo-sla.jpeg)
-

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.