Update how-to-setup-a-jump-server.md

.env.example

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

.github/ISSUE_TEMPLATE/01-suggest-changes.yml

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

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

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

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

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

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

@@ -1,37 +0,0 @@
-name: "🙏 ​ ​Submit a Roadmap"
-description: Help us launch a new roadmap with your expertise.
-labels: [roadmap contribution]
-assignees: []
-body:
-  - type: markdown
-    attributes:
-      value: |
-        Thanks for taking the time to submit a roadmap! Please fill out the information below and we'll get back to you as soon as we can.
-  - type: input
-    id: roadmap-title
-    attributes:
-      label: What is the title of the roadmap you are submitting?
-      placeholder: e.g. Roadmap to learn Data Science
-    validations:
-      required: true
-  - type: 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

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

.github/ISSUE_TEMPLATE/config.yml

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

.github/workflows/deploy.yml

@@ -3,8 +3,6 @@ on:
   push:
     branches: [ master ]
 env:
-  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

.github/workflows/update-sponsors.yml

@@ -0,0 +1,43 @@
+name: Update Sponsors
+
+on:
+  workflow_dispatch: # allow manual run
+  schedule:
+    - cron: '0 0 * * *' # run daily at 00:00 UTC
+
+env:
+  SPONSOR_SHEET_API_KEY: ${{ secrets.SPONSOR_SHEET_API_KEY }}
+  SPONSOR_SHEET_ID: ${{ secrets.SPONSOR_SHEET_ID }}
+
+jobs:
+  update-sponsors:
+    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: Install dependencies
+        run: |
+          pnpm install
+      - name: Update sponsors
+        run: |
+          node bin/update-sponsors.cjs
+      - name: Create PR
+        uses: peter-evans/create-pull-request@v4
+        with:
+          delete-branch: false
+          branch: 'update-sponsors'
+          base: 'master'
+          labels: |
+            sponsors
+            automated pr
+          reviewers: kamranahmedse
+          commit-message: 'chore: update sponsors'
+          title: 'Update Sponsor Banners'
+          body: |
+            Updates sponsor banners.
+            Please review the changes and merge if everything looks good.

.gitignore

@@ -1,5 +1,3 @@
-.idea
-
 # build output
 dist/
 .output/
@@ -7,7 +5,7 @@ dist/
 # dependencies
 node_modules/
 
-scripts/developer-roadmap
+bin/developer-roadmap
 
 # logs
 npm-debug.log*
@@ -25,5 +23,4 @@ pnpm-debug.log*
 /test-results/
 /playwright-report/
 /playwright/.cache/
-tests-examples
-*.csv
+tests-examples

astro.config.mjs

@@ -1,14 +1,11 @@
 // https://astro.build/config
-import preact from '@astrojs/preact';
 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';
 
-// https://astro.build/config
 export default defineConfig({
   site: 'https://roadmap.sh/',
   markdown: {
@@ -46,22 +43,6 @@ export default defineConfig({
     format: 'file',
   },
   integrations: [
-    {
-      name: 'client-authenticated',
-      hooks: {
-        'astro:config:setup'(options) {
-          options.addClientDirective({
-            name: 'authenticated',
-            entrypoint: fileURLToPath(
-              new URL(
-                './src/directives/client-authenticated.mjs',
-                import.meta.url
-              )
-            ),
-          });
-        },
-      },
-    },
     tailwind({
       config: {
         applyBaseStyles: false,
@@ -75,6 +56,5 @@ export default defineConfig({
       css: false,
       js: false,
     }),
-    preact(),
   ],
 });

bin/compress-jsons.cjs

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

bin/roadmap-content.cjs

@@ -3,6 +3,7 @@ const path = require('path');
 
 const OPEN_AI_API_KEY = process.env.OPEN_AI_API_KEY;
 const ALL_ROADMAPS_DIR = path.join(__dirname, '../src/data/roadmaps');
+const ROADMAP_JSON_DIR = path.join(__dirname, '../public/jsons/roadmaps');
 
 const roadmapId = process.argv[2];
 
@@ -60,12 +61,12 @@ function writeTopicContent(currTopicUrl) {
 
   const roadmapTitle = roadmapId.replace(/-/g, ' ');
 
-  let prompt = `I am reading a guide about "${roadmapTitle}". I am on the topic "${parentTopic}". I want to know more about "${childTopic}". Write me with a brief summary of that. Content should be in markdown. I already know the benefits of each so do not add benefits in the output. Also include the code examples if applicable to this topic.`;
+  let prompt = `I am reading a guide about "${roadmapTitle}". I am on the topic "${parentTopic}". I want to know more about "${childTopic}". Write me a brief summary for that topic. Content should be in markdown. Behave as if you are the author of the guide.`;
   if (!childTopic) {
-    prompt = `I am reading a guide about "${roadmapTitle}". I am on the topic "${parentTopic}". I want to know more about "${parentTopic}". Write me with a brief summary of that. Content should be in markdown. I already know the benefits of each so do not add benefits in the output. Also include the code examples if applicable to this topic.`;
+    prompt = `I am reading a guide about "${roadmapTitle}". I am on the topic "${parentTopic}". I want to know more about "${parentTopic}". Write me a brief summary for that topic. Content should be in markdown. Behave as if you are the author of the guide.`;
   }
 
-  console.log(`Generating '${childTopic || parentTopic}'...`);
+  console.log(`Genearting '${childTopic || parentTopic}'...`);
 
   return new Promise((resolve, reject) => {
     openai
@@ -89,60 +90,10 @@ function writeTopicContent(currTopicUrl) {
   });
 }
 
-async function writeFileForGroup(group, topicUrlToPathMapping) {
-  const topicId = group?.properties?.controlName;
-  const topicTitle = group?.children?.controls?.control?.find(
-    (control) => control?.typeID === 'Label'
-  )?.properties?.text;
-  const currTopicUrl = topicId?.replace(/^\d+-/g, '/')?.replace(/:/g, '/');
-  if (!currTopicUrl) {
-    return;
-  }
-
-  const contentFilePath = topicUrlToPathMapping[currTopicUrl];
-
-  if (!contentFilePath) {
-    console.log(`Missing file for: ${currTopicUrl}`);
-    return;
-  }
-
-  const currentFileContent = fs.readFileSync(contentFilePath, 'utf8');
-  const isFileEmpty = currentFileContent.replace(/^#.+/, ``).trim() === '';
-
-  if (!isFileEmpty) {
-    console.log(`Ignoring ${topicId}. Not empty.`);
-    return;
-  }
-
-  let newFileContent = `# ${topicTitle}`;
-
-  if (!OPEN_AI_API_KEY) {
-    console.log(`Writing ${topicId}..`);
-
-    fs.writeFileSync(contentFilePath, newFileContent, 'utf8');
-    return;
-  }
-
-  const topicContent = await writeTopicContent(currTopicUrl);
-  newFileContent += `\n\n${topicContent}`;
-
-  console.log(`Writing ${topicId}..`);
-  fs.writeFileSync(contentFilePath, newFileContent, 'utf8');
-
-  // console.log(currentFileContent);
-  // console.log(currTopicUrl);
-  // console.log(topicTitle);
-  // console.log(topicUrlToPathMapping[currTopicUrl]);
-}
-
 async function run() {
   const topicUrlToPathMapping = getFilesInFolder(ROADMAP_CONTENT_DIR);
 
-  const roadmapJson = require(path.join(
-      ALL_ROADMAPS_DIR,
-      `${roadmapId}/${roadmapId}`
-  ));
-
+  const roadmapJson = require(path.join(ROADMAP_JSON_DIR, `${roadmapId}.json`));
   const groups = roadmapJson?.mockup?.controls?.control?.filter(
     (control) =>
       control.typeID === '__group__' &&
@@ -155,13 +106,50 @@ async function run() {
     console.log('----------------------------------------');
   }
 
-  const writePromises = [];
   for (let group of groups) {
-    writePromises.push(writeFileForGroup(group, topicUrlToPathMapping));
-  }
+    const topicId = group?.properties?.controlName;
+    const topicTitle = group?.children?.controls?.control?.find(
+      (control) => control?.typeID === 'Label'
+    )?.properties?.text;
+    const currTopicUrl = topicId?.replace(/^\d+-/g, '/')?.replace(/:/g, '/');
+    if (!currTopicUrl) {
+      continue;
+    }
 
-  console.log('Waiting for all files to be written...');
-  await Promise.all(writePromises);
+    const contentFilePath = topicUrlToPathMapping[currTopicUrl];
+
+    if (!contentFilePath) {
+      console.log(`Missing file for: ${currTopicUrl}`);
+      return;
+    }
+
+    const currentFileContent = fs.readFileSync(contentFilePath, 'utf8');
+    const isFileEmpty = currentFileContent.replace(/^#.+/, ``).trim() === '';
+
+    if (!isFileEmpty) {
+      console.log(`Ignoring ${topicId}. Not empty.`);
+      continue;
+    }
+
+    let newFileContent = `# ${topicTitle}`;
+
+    if (!OPEN_AI_API_KEY) {
+      console.log(`Writing ${topicId}..`);
+      fs.writeFileSync(contentFilePath, newFileContent, 'utf8');
+      continue;
+    }
+
+    const topicContent = await writeTopicContent(currTopicUrl);
+    newFileContent += `\n\n${topicContent}`;
+
+    console.log(`Writing ${topicId}..`);
+    fs.writeFileSync(contentFilePath, newFileContent, 'utf8');
+
+    // console.log(currentFileContent);
+    // console.log(currTopicUrl);
+    // console.log(topicTitle);
+    // console.log(topicUrlToPathMapping[currTopicUrl]);
+  }
 }
 
 run()

bin/roadmap-dirs.cjs

@@ -84,9 +84,8 @@ function prepareDirTree(control, dirTree, dirSortOrders) {
 
 const roadmap = require(path.join(
   __dirname,
-  `../src/data/roadmaps/${roadmapId}/${roadmapId}`
+  `../public/jsons/roadmaps/${roadmapId}`
 ));
-
 const controls = roadmap.mockup.controls.control;
 
 // Prepare the dir tree that we will be creating and also calculate the sort orders

bin/update-sponsors.cjs

@@ -22,7 +22,7 @@ function removeAllSponsors(baseContentDir) {
 
   const contentDir = fs.readdirSync(contentDirPath);
   contentDir.forEach((content) => {
-    console.log('Removing sponsors from: ', content);
+    console.log('Removing sponsor from: ', content);
 
     const pageFilePath = path.join(contentDirPath, content, `${content}.md`);
     const pageFileContent = fs.readFileSync(pageFilePath, 'utf8');
@@ -35,7 +35,7 @@ function removeAllSponsors(baseContentDir) {
       .trim();
 
     let frontmatterObj = yaml.load(existingFrontmatter);
-    delete frontmatterObj.sponsors;
+    delete frontmatterObj.sponsor;
 
     const newFrontmatter = yaml.dump(frontmatterObj, {
       lineWidth: 10000,
@@ -87,23 +87,27 @@ function addPageSponsor({
     .trim();
 
   let frontmatterObj = yaml.load(existingFrontmatter);
-  const sponsors = frontmatterObj.sponsors || [];
+  delete frontmatterObj.sponsor;
 
   const frontmatterValues = Object.entries(frontmatterObj);
   const roadmapLabel = frontmatterObj.briefTitle;
 
-  sponsors.push({
-    url: redirectUrl,
-    title: adTitle,
-    imageUrl,
-    description: adDescription,
-    page: roadmapLabel,
-    company,
-  });
-
   // Insert sponsor data at 10 index i.e. after
   // roadmap dimensions in the frontmatter
-  frontmatterValues.splice(10, 0, ['sponsors', sponsors]);
+  frontmatterValues.splice(10, 0, [
+    'sponsor',
+    {
+      url: redirectUrl,
+      title: adTitle,
+      imageUrl,
+      description: adDescription,
+      event: {
+        category: 'SponsorClick',
+        action: `${company} Redirect`,
+        label: `${roadmapLabel} / ${company} Link`,
+      },
+    },
+  ]);
 
   frontmatterObj = Object.fromEntries(frontmatterValues);
 

contributing.md

@@ -16,7 +16,7 @@ For new roadmaps, submit a roadmap by providing [a textual roadmap similar to th
 
 For the existing roadmaps, please follow the details listed for the nature of contribution:
 
-- **Fixing Typos** — Make your changes in the [roadmap JSON file](https://github.com/kamranahmedse/developer-roadmap/tree/master/src/data/roadmaps)
+- **Fixing Typos** — Make your changes in the [roadmap JSON file](https://github.com/kamranahmedse/developer-roadmap/tree/master/public/jsons)
 - **Adding or Removing Nodes** — Please open an issue with your suggestion.
 
 **Note:** Please note that our goal is not to have the biggest list of items. Our goal is to list items or skills most relevant today.

package.json

@@ -11,45 +11,34 @@
     "format": "prettier --write .",
     "astro": "astro",
     "deploy": "NODE_DEBUG=gh-pages gh-pages -d dist -t",
-    "compress:jsons": "node scripts/compress-jsons.cjs",
+    "compress:jsons": "node bin/compress-jsons.cjs",
     "upgrade": "ncu -u",
-    "roadmap-links": "node scripts/roadmap-links.cjs",
-    "roadmap-dirs": "node scripts/roadmap-dirs.cjs",
-    "roadmap-content": "node scripts/roadmap-content.cjs",
-    "best-practice-dirs": "node scripts/best-practice-dirs.cjs",
-    "best-practice-content": "node scripts/best-practice-content.cjs",
+    "roadmap-links": "node bin/roadmap-links.cjs",
+    "roadmap-dirs": "node bin/roadmap-dirs.cjs",
+    "roadmap-content": "node bin/roadmap-content.cjs",
+    "best-practice-dirs": "node bin/best-practice-dirs.cjs",
     "test:e2e": "playwright test"
   },
   "dependencies": {
-    "@astrojs/preact": "^2.2.1",
-    "@astrojs/sitemap": "^1.3.3",
-    "@astrojs/tailwind": "^3.1.3",
-    "@fingerprintjs/fingerprintjs": "^3.4.1",
-    "@nanostores/preact": "^0.5.0",
-    "astro": "^2.6.6",
-    "astro-compress": "^1.1.47",
-    "jose": "^4.14.4",
-    "js-cookie": "^3.0.5",
-    "nanostores": "^0.9.2",
+    "@astrojs/sitemap": "^1.2.1",
+    "@astrojs/tailwind": "^3.1.1",
+    "astro": "^2.1.7",
+    "astro-compress": "^1.1.35",
     "node-html-parser": "^6.1.5",
-    "npm-check-updates": "^16.10.12",
-    "preact": "^10.15.1",
-    "rehype-external-links": "^2.1.0",
-    "roadmap-renderer": "^1.0.6",
-    "slugify": "^1.6.6",
-    "tailwindcss": "^3.3.2"
+    "npm-check-updates": "^16.8.0",
+    "rehype-external-links": "^2.0.1",
+    "roadmap-renderer": "^1.0.4",
+    "tailwindcss": "^3.2.7"
   },
   "devDependencies": {
-    "@playwright/test": "^1.35.1",
+    "@playwright/test": "^1.32.1",
     "@tailwindcss/typography": "^0.5.9",
-    "@types/js-cookie": "^3.0.3",
-    "csv-parser": "^3.0.0",
     "gh-pages": "^5.0.0",
     "js-yaml": "^4.1.0",
     "markdown-it": "^13.0.1",
-    "openai": "^3.3.0",
-    "prettier": "^2.8.8",
-    "prettier-plugin-astro": "^0.10.0",
-    "prettier-plugin-tailwindcss": "^0.3.0"
+    "openai": "^3.2.1",
+    "prettier": "^2.8.7",
+    "prettier-plugin-astro": "^0.8.0",
+    "prettier-plugin-tailwindcss": "^0.2.6"
   }
 }

public/favicon.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 36 36">
+  <path fill="#000" d="M22.25 4h-8.5a1 1 0 0 0-.96.73l-5.54 19.4a.5.5 0 0 0 .62.62l5.05-1.44a2 2 0 0 0 1.38-1.4l3.22-11.66a.5.5 0 0 1 .96 0l3.22 11.67a2 2 0 0 0 1.38 1.39l5.05 1.44a.5.5 0 0 0 .62-.62l-5.54-19.4a1 1 0 0 0-.96-.73Z"/>
+  <path fill="url(#gradient)" d="M18 28a7.63 7.63 0 0 1-5-2c-1.4 2.1-.35 4.35.6 5.55.14.17.41.07.47-.15.44-1.8 2.93-1.22 2.93.6 0 2.28.87 3.4 1.72 3.81.34.16.59-.2.49-.56-.31-1.05-.29-2.46 1.29-3.25 3-1.5 3.17-4.83 2.5-6-.67.67-2.6 2-5 2Z"/>
+  <defs>
+    <linearGradient id="gradient" x1="16" x2="16" y1="32" y2="24" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#000"/>
+      <stop offset="1" stop-color="#000" stop-opacity="0"/>
+    </linearGradient>
+  </defs>
+	<style>
+    @media (prefers-color-scheme:dark){:root{filter:invert(100%)}}
+  </style>
+</svg>

readme.md

@@ -4,16 +4,16 @@
   <p align="center">Community driven roadmaps, articles and resources for developers<p>
   <p align="center">
     <a href="https://roadmap.sh/roadmaps">
-    	<img src="https://img.shields.io/badge/%E2%9C%A8-Roadmaps%20-0a0a0a.svg?style=flat&colorA=0a0a0a" alt="roadmaps" />
-    </a>
-    <a href="https://roadmap.sh/best-practices">
-    	<img src="https://img.shields.io/badge/%E2%9C%A8-Best%20Practices-0a0a0a.svg?style=flat&colorA=0a0a0a" alt="best practices" />
+    	<img src="https://img.shields.io/badge/-Roadmaps%20-0a0a0a.svg?style=flat&colorA=0a0a0a" alt="roadmaps" />
     </a>
     <a href="https://youtube.com/theroadmap?sub_confirmation=1">
-    	<img src="https://img.shields.io/badge/%E2%9C%A8-Videos-0a0a0a.svg?style=flat&colorA=0a0a0a" alt="videos" />
+    	<img src="https://img.shields.io/badge/-Videos-0a0a0a.svg?style=flat&colorA=0a0a0a" alt="videos" />
+    </a>
+    <a href="https://github.com/kamranahmedse/developer-roadmap/tree/0471d44c8fae58b6a36a7c57bba12253916d0249/translations">
+    	<img src="https://img.shields.io/badge/-Translations-0a0a0a.svg?style=flat&colorA=0a0a0a" alt="videos" />
     </a>
     <a href="https://www.youtube.com/channel/UCA0H2KIWgWTwpTFjSxp0now?sub_confirmation=1">
-    	<img src="https://img.shields.io/badge/%E2%9C%A8-YouTube%20Channel-0a0a0a.svg?style=flat&colorA=0a0a0a" alt="roadmaps" />
+    	<img src="https://img.shields.io/badge/%E2%9D%A4-YouTube%20Channel-0a0a0a.svg?style=flat&colorA=0a0a0a" alt="roadmaps" />
     </a>
   </p>
 </p>
@@ -30,19 +30,16 @@ Roadmaps are now interactive, you can click the nodes to read more about the top
 
 Here is the list of available roadmaps with more being actively worked upon.
 
-- [Frontend Roadmap](https://roadmap.sh/frontend) / [Frontend Beginner Roadmap](https://roadmap.sh/frontend?r=frontend-beginner)
+- [Frontend Roadmap](https://roadmap.sh/frontend)
 - [Backend Roadmap](https://roadmap.sh/backend)
-- [DevOps Roadmap](https://roadmap.sh/devops) / [DevOps Beginner Roadmap](https://roadmap.sh/devops?r=devops-beginner)
-- [Full Stack Roadmap](https://roadmap.sh/full-stack)
+- [DevOps Roadmap](https://roadmap.sh/devops)
 - [Computer Science Roadmap](https://roadmap.sh/computer-science)
 - [QA Roadmap](https://roadmap.sh/qa)
 - [Software Architect Roadmap](https://roadmap.sh/software-architect)
 - [Software Design and Architecture Roadmap](https://roadmap.sh/software-design-architecture)
 - [JavaScript Roadmap](https://roadmap.sh/javascript)
 - [TypeScript Roadmap](https://roadmap.sh/typescript)
-- [C++ Roadmap](https://roadmap.sh/cpp)
 - [React Roadmap](https://roadmap.sh/react)
-- [React Native Roadmap](https://roadmap.sh/react-native)
 - [Vue Roadmap](https://roadmap.sh/vue)
 - [Angular Roadmap](https://roadmap.sh/angular)
 - [Node.js Roadmap](https://roadmap.sh/nodejs)
@@ -54,8 +51,7 @@ Here is the list of available roadmaps with more being actively worked upon.
 - [Java Roadmap](https://roadmap.sh/java)
 - [Spring Boot Roadmap](https://roadmap.sh/spring-boot)
 - [Design System Roadmap](https://roadmap.sh/design-system)
-- [PostgreSQL Roadmap](https://roadmap.sh/postgresql-dba)
-- [SQL Roadmap](https://roadmap.sh/sql)
+- [DBA Roadmap](https://roadmap.sh/postgresql-dba)
 - [Blockchain Roadmap](https://roadmap.sh/blockchain)
 - [ASP.NET Core Roadmap](https://roadmap.sh/aspnet-core)
 - [System Design Roadmap](https://roadmap.sh/system-design)
@@ -63,12 +59,9 @@ Here is the list of available roadmaps with more being actively worked upon.
 - [Cyber Security Roadmap](https://roadmap.sh/cyber-security)
 - [MongoDB Roadmap](https://roadmap.sh/mongodb)
 - [UX Design Roadmap](https://roadmap.sh/ux-design)
-- [Docker Roadmap](https://roadmap.sh/docker)
-- [Prompt Engineering Roadmap](https://roadmap.sh/prompt-engineering)
 
 We have also added a new form of visual content covering best practices:
 
-- [Code Review Best Practices](https://roadmap.sh/best-practices/code-review)
 - [Frontend Performance Best Practices](https://roadmap.sh/best-practices/frontend-performance)
 - [API Security Best Practices](https://roadmap.sh/best-practices/api-security)
 - [AWS Best Practices](https://roadmap.sh/best-practices/aws)
@@ -95,12 +88,6 @@ npm install
 npm run dev
 ```
 
-Note: use the `depth` parameter to reduce the clone size and speed up the clone.
-
-```sh
-git clone --depth=1 https://github.com/kamranahmedse/developer-roadmap.git
-```
-
 ## Contribution
 
 > Have a look at [contribution docs](./contributing.md) for how to update any of the roadmaps

scripts/best-practice-content.cjs

@@ -1,173 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-
-const OPEN_AI_API_KEY = process.env.OPEN_AI_API_KEY;
-const ALL_BEST_PRACTICES_DIR = path.join(
-  __dirname,
-  '../src/data/best-practices'
-);
-const BEST_PRACTICE_JSON_DIR = path.join(
-  __dirname,
-  '../public/jsons/best-practices'
-);
-
-const bestPracticeId = process.argv[2];
-const bestPracticeTitle = bestPracticeId.replace(/-/g, ' ');
-
-const allowedBestPracticeIds = fs.readdirSync(ALL_BEST_PRACTICES_DIR);
-if (!bestPracticeId) {
-  console.error('bestPracticeId is required');
-  process.exit(1);
-}
-
-if (!allowedBestPracticeIds.includes(bestPracticeId)) {
-  console.error(`Invalid bestPractice key ${bestPracticeId}`);
-  console.error(`Allowed keys are ${allowedBestPracticeIds.join(', ')}`);
-  process.exit(1);
-}
-
-const BEST_PRACTICE_CONTENT_DIR = path.join(
-  ALL_BEST_PRACTICES_DIR,
-  bestPracticeId,
-  'content'
-);
-const { Configuration, OpenAIApi } = require('openai');
-const configuration = new Configuration({
-  apiKey: OPEN_AI_API_KEY,
-});
-
-const openai = new OpenAIApi(configuration);
-
-function getFilesInFolder(folderPath, fileList = {}) {
-  const files = fs.readdirSync(folderPath);
-
-  files.forEach((file) => {
-    const filePath = path.join(folderPath, file);
-    const stats = fs.statSync(filePath);
-
-    if (stats.isDirectory()) {
-      getFilesInFolder(filePath, fileList);
-    } else if (stats.isFile()) {
-      const fileUrl = filePath
-        .replace(BEST_PRACTICE_CONTENT_DIR, '') // Remove the content folder
-        .replace(/\/\d+-/g, '/') // Remove ordering info `/101-ecosystem`
-        .replace(/\/index\.md$/, '') // Make the `/index.md` to become the parent folder only
-        .replace(/\.md$/, ''); // Remove `.md` from the end of file
-
-      fileList[fileUrl] = filePath;
-    }
-  });
-
-  return fileList;
-}
-
-function writeTopicContent(topicTitle) {
-  let prompt = `I am reading a guide that has best practices about "${bestPracticeTitle}". I want to know more about "${topicTitle}". Write me a brief introductory paragraph about this and some tips on how I make sure of this? Behave as if you are the author of the guide.`;
-
-  console.log(`Generating '${topicTitle}'...`);
-
-  return new Promise((resolve, reject) => {
-    openai
-      .createChatCompletion({
-        model: 'gpt-4',
-        messages: [
-          {
-            role: 'user',
-            content: prompt,
-          },
-        ],
-      })
-      .then((response) => {
-        const article = response.data.choices[0].message.content;
-
-        resolve(article);
-      })
-      .catch((err) => {
-        reject(err);
-      });
-  });
-}
-
-async function writeFileForGroup(group, topicUrlToPathMapping) {
-  const topicId = group?.properties?.controlName;
-  const topicTitle = group?.children?.controls?.control?.find(
-    (control) => control?.typeID === 'Label'
-  )?.properties?.text;
-  const currTopicUrl = `/${topicId}`;
-  if (currTopicUrl.startsWith('/check:')) {
-    return;
-  }
-
-  const contentFilePath = topicUrlToPathMapping[currTopicUrl];
-
-  if (!contentFilePath) {
-    console.log(`Missing file for: ${currTopicUrl}`);
-    process.exit(0);
-    return;
-  }
-
-  const currentFileContent = fs.readFileSync(contentFilePath, 'utf8');
-  const isFileEmpty = currentFileContent.replace(/^#.+/, ``).trim() === '';
-
-  if (!isFileEmpty) {
-    console.log(`Ignoring ${topicId}. Not empty.`);
-    return;
-  }
-
-  let newFileContent = `# ${topicTitle}`;
-
-  if (!OPEN_AI_API_KEY) {
-    console.log(`Writing ${topicId}..`);
-
-    fs.writeFileSync(contentFilePath, newFileContent, 'utf8');
-    return;
-  }
-
-  const topicContent = await writeTopicContent(topicTitle);
-  newFileContent += `\n\n${topicContent}`;
-
-  console.log(`Writing ${topicId}..`);
-  fs.writeFileSync(contentFilePath, newFileContent, 'utf8');
-
-  // console.log(currentFileContent);
-  // console.log(currTopicUrl);
-  // console.log(topicTitle);
-  // console.log(topicUrlToPathMapping[currTopicUrl]);
-}
-
-async function run() {
-  const topicUrlToPathMapping = getFilesInFolder(BEST_PRACTICE_CONTENT_DIR);
-
-  const bestPracticeJson = require(path.join(
-    BEST_PRACTICE_JSON_DIR,
-    `${bestPracticeId}.json`
-  ));
-  const groups = bestPracticeJson?.mockup?.controls?.control?.filter(
-    (control) =>
-      control.typeID === '__group__' &&
-      !control.properties?.controlName?.startsWith('ext_link')
-  );
-
-  if (!OPEN_AI_API_KEY) {
-    console.log('----------------------------------------');
-    console.log('OPEN_AI_API_KEY not found. Skipping openai api calls...');
-    console.log('----------------------------------------');
-  }
-
-  const writePromises = [];
-  for (let group of groups) {
-    writePromises.push(writeFileForGroup(group, topicUrlToPathMapping));
-  }
-
-  console.log('Waiting for all files to be written...');
-  await Promise.all(writePromises);
-}
-
-run()
-  .then(() => {
-    console.log('Done');
-  })
-  .catch((err) => {
-    console.error(err);
-    process.exit(1);
-  });

scripts/page-data-agg.cjs

@@ -1,129 +0,0 @@
-const csv = require('csv-parser');
-const fs = require('fs');
-const path = require('path');
-
-const csvFilePath = path.join(__dirname, '../data.csv');
-
-const results = {};
-const pageSummary = {};
-
-fs.createReadStream(csvFilePath)
-  .pipe(
-    csv({
-      separator: ',',
-      mapHeaders: ({ header, index }) =>
-        header.toLowerCase().replace(/ /g, '_'),
-      mapValues: ({ header, index, value }) => {
-        if (header === 'page') {
-          return (
-            value
-              .replace(/"/g, '')
-              .replace(/'/g, '')
-              .replace(/`/g, '')
-              .replace(/\?r=/g, '#r#')
-              .replace(/\?.+?$/g, '')
-              .replace(/#r#/g, '?r=')
-              .replace(/\/$/g, '') || '/'
-          );
-        }
-
-        if (header !== 'month_of_year') {
-          return parseInt(value, 10);
-        }
-
-        return value;
-      },
-    })
-  )
-  .on('data', (data) => {
-    const { page, month_of_year, unique_pageviews, users } = data;
-    const pageData = results[page] || {};
-    const existingPageMonthData = pageData[month_of_year] || {};
-
-    const existingViews = existingPageMonthData.views || 0;
-    const existingUsers = existingPageMonthData.users || 0;
-
-    const newViews = existingViews + unique_pageviews;
-    const newUsers = existingUsers + users;
-
-    pageData[month_of_year] = {
-      views: newViews,
-      users: newUsers,
-    };
-
-    results[page] = pageData;
-
-    pageSummary[page] = pageSummary[page] || { views: 0, users: 0 };
-    pageSummary[page].views += unique_pageviews;
-    pageSummary[page].users += users;
-  })
-  .on('end', () => {
-    const csvHeader = [
-      'Page',
-      'Jan 2022',
-      'Feb 2022',
-      'Mar 2022',
-      'Apr 2022',
-      'May 2022',
-      'Jun 2022',
-      'Jul 2022',
-      'Aug 2022',
-      'Sep 2022',
-      'Oct 2022',
-      'Nov 2022',
-      'Dec 2022',
-      'Jan 2023',
-      'Feb 2023',
-      'Mar 2023',
-      'Apr 2023',
-      'May 2023',
-      'Jun 2023',
-      'Jul 2023',
-      'Aug 2023',
-      'Sep 2023',
-      'Oct 2023',
-      'Nov 2023',
-      'Dec 2023',
-    ];
-
-    const csvRows = Object.keys(pageSummary)
-      .filter(pageUrl => pageSummary[pageUrl].views > 10)
-      .filter(pageUrl => !['/upcoming', '/pdfs', '/signup', '/login', '/@'].includes(pageUrl))
-      .sort((pageA, pageB) => {
-        const aViews = pageSummary[pageA].views;
-        const bViews = pageSummary[pageB].views;
-
-        return bViews - aViews;
-      })
-      .map((pageUrl) => {
-        const rawPageResult = results[pageUrl];
-        const pageResultCsvRow = [];
-
-        csvHeader.forEach((csvHeaderItem) => {
-          if (csvHeaderItem === 'Page') {
-            pageResultCsvRow.push(pageUrl);
-            return;
-          }
-
-          const csvHeaderItemAlt = csvHeaderItem
-            .replace(/ /g, '_')
-            .toLowerCase();
-
-          const result = rawPageResult[csvHeaderItem || csvHeaderItemAlt] || {};
-          const views = result.views || 0;
-          const users = result.users || 0;
-
-          pageResultCsvRow.push(users);
-        });
-
-        return pageResultCsvRow;
-      });
-
-    const finalCsvRows = [csvHeader, ...csvRows];
-    const csvRowStrings = finalCsvRows.map((row) => {
-      return row.join(',');
-    });
-
-    const csvString = csvRowStrings.join('\n');
-    fs.writeFileSync(path.join(__dirname, '../data-agg.csv'), csvString);
-  });

src/components/AccountSidebar.astro

@@ -1,170 +0,0 @@
----
-import AstroIcon from './AstroIcon.astro';
-import { TeamDropdown } from './TeamDropdown/TeamDropdown';
-
-export interface Props {
-  activePageId: string;
-  activePageTitle: string;
-  hasDesktopSidebar?: boolean;
-}
-
-const { hasDesktopSidebar = true, activePageId, activePageTitle } = Astro.props;
-
-const sidebarLinks = [
-  {
-    href: '/account',
-    title: 'Activity',
-    id: 'activity',
-    isNew: false,
-    icon: {
-      glyph: 'analytics',
-      classes: 'h-3 w-4',
-    },
-  },
-  {
-    href: '/account/road-card',
-    title: 'Card',
-    id: 'road-card',
-    isNew: true,
-    icon: {
-      glyph: 'badge',
-      classes: 'h-4 w-4',
-    },
-  },
-  {
-    href: '/account/update-profile',
-    title: 'Profile',
-    id: 'profile',
-    isNew: false,
-    icon: {
-      glyph: 'user',
-      classes: 'h-4 w-4',
-    },
-  },
-  {
-    href: '/account/settings',
-    title: 'Settings',
-    id: 'settings',
-    isNew: false,
-    icon: {
-      glyph: 'cog',
-      classes: 'h-4 w-4',
-    },
-  },
-];
----
-
-<div class='relative mb-5 block border-b p-4 shadow-inner md:hidden'>
-  <button
-    class='flex h-10 w-full items-center justify-between rounded-md border bg-white px-2 text-center text-sm font-medium text-gray-900'
-    id='settings-menu'
-  >
-    {activePageTitle}
-    <AstroIcon icon='dropdown' />
-  </button>
-  <ul
-    id='settings-menu-dropdown'
-    class='absolute left-0 right-0 z-10 mt-1 hidden space-y-1.5 bg-white p-2 shadow-lg'
-  >
-    <!--<li>-->
-    <!--  <a-->
-    <!--    href='/team'-->
-    <!--    class={`flex w-full items-center rounded px-3 py-1.5 text-sm text-slate-900 hover:bg-slate-200 ${-->
-    <!--      activePageId === 'team' ? 'bg-slate-100' : ''-->
-    <!--    }`}-->
-    <!--  >-->
-    <!--    <AstroIcon icon={'users'} class={`h-4 w-4 mr-2`} />-->
-    <!--    Teams-->
-    <!--  </a>-->
-    <!--</li>-->
-    {
-      sidebarLinks.map((sidebarLink) => {
-        const isActive = activePageId === sidebarLink.id;
-
-        return (
-          <li>
-            <a
-              href={sidebarLink.href}
-              class={`flex w-full items-center rounded px-3 py-1.5 text-sm text-slate-900 hover:bg-slate-200 ${
-                isActive ? 'bg-slate-100' : ''
-              }`}
-            >
-              <AstroIcon
-                icon={sidebarLink.icon.glyph}
-                class={`${sidebarLink.icon.classes} mr-2`}
-              />
-              {sidebarLink.title}
-            </a>
-          </li>
-        );
-      })
-    }
-  </ul>
-</div>
-
-<div class='container flex min-h-screen items-stretch'>
-  <!-- Start Desktop Sidebar -->
-  {
-    hasDesktopSidebar && (
-      <aside class='hidden w-[195px] shrink-0 border-r border-slate-200 py-10 md:block'>
-        <TeamDropdown client:load />
-
-        <nav>
-          <ul class='space-y-1'>
-            {sidebarLinks.map((sidebarLink) => {
-              const isActive = activePageId === sidebarLink.id;
-
-              return (
-                <li>
-                  <a
-                    href={sidebarLink.href}
-                    class={`font-regular flex w-full items-center border-r-2 px-2 py-1.5 text-sm ${
-                      isActive
-                        ? 'border-r-black bg-gray-100 text-black'
-                        : 'border-r-transparent text-gray-500 hover:border-r-gray-300'
-                    }`}
-                  >
-                    <span class='flex flex-grow items-center'>
-                      <AstroIcon
-                        icon={sidebarLink.icon.glyph}
-                        class={`${sidebarLink.icon.classes} mr-2`}
-                      />
-                      {sidebarLink.title}
-                    </span>
-
-                    {sidebarLink.isNew && !isActive && (
-                      <span class='relative mr-1 flex items-center'>
-                        <span class='relative rounded-full bg-gray-200 p-1 text-xs' />
-                        <span class='absolute bottom-0 left-0 right-0 top-0 animate-ping rounded-full bg-gray-400 p-1 text-xs' />
-                      </span>
-                    )}
-                  </a>
-                </li>
-              );
-            })}
-          </ul>
-        </nav>
-      </aside>
-    )
-  }
-  <!-- /End Desktop Sidebar -->
-
-  <div class:list={['grow px-0 py-0 md:py-10', { 'md:px-10': hasDesktopSidebar, 'md:px-5': !hasDesktopSidebar }]}>
-    <slot />
-  </div>
-</div>
-
-<script>
-  const menuButton = document.getElementById('settings-menu');
-  const menuDropdown = document.getElementById('settings-menu-dropdown');
-
-  menuButton?.addEventListener('click', () => {
-    menuDropdown?.classList.toggle('hidden');
-  });
-
-  document.addEventListener('click', (e) => {
-    if (!menuButton?.contains(e.target as Node)) {
-      menuDropdown?.classList.add('hidden');
-    }
-  });
-</script>

src/components/Activity/ActivityCounters.tsx

@@ -1,56 +0,0 @@
-type ActivityCountersType = {
-  done: {
-    today: number;
-    total: number;
-  };
-  learning: {
-    today: number;
-    total: number;
-  };
-  streak: {
-    count: number;
-  };
-};
-
-type ActivityCounterType = {
-  text: string;
-  count: string;
-};
-
-function ActivityCounter(props: ActivityCounterType) {
-  const { text, count } = props;
-
-  return (
-    <div class="relative flex flex-1 flex-row-reverse sm:flex-col px-0 sm:px-4 py-2 sm:py-4 text-center sm:pt-10 items-center gap-2 sm:gap-0 justify-end">
-      <h2 class="text-base sm:text-5xl font-bold">
-        {count}
-      </h2>
-      <p class="mt-0 sm:mt-2 text-sm text-gray-400">{text}</p>
-    </div>
-  );
-}
-
-export function ActivityCounters(props: ActivityCountersType) {
-  const { done, learning, streak } = props;
-
-  return (
-    <div class="mx-0 -mt-5 sm:-mx-10 md:-mt-10">
-      <div class="flex flex-col sm:flex-row gap-0 sm:gap-2 divide-y sm:divide-y-0 divide-x-0 sm:divide-x border-b">
-        <ActivityCounter
-          text={'Topics Completed'}
-          count={`${done?.total || 0}`}
-        />
-
-        <ActivityCounter
-          text={'Currently Learning'}
-          count={`${learning?.total || 0}`}
-        />
-
-        <ActivityCounter
-          text={'Visit Streak'}
-          count={`${streak?.count || 0}d`}
-        />
-      </div>
-    </div>
-  );
-}

src/components/Activity/ActivityPage.tsx

@@ -1,161 +0,0 @@
-import { useEffect, useState } from 'preact/hooks';
-import { httpGet } from '../../lib/http';
-import { ActivityCounters } from './ActivityCounters';
-import { ResourceProgress } from './ResourceProgress';
-import { pageProgressMessage } from '../../stores/page';
-import { EmptyActivity } from './EmptyActivity';
-
-export type ActivityResponse = {
-  done: {
-    today: number;
-    total: number;
-  };
-  learning: {
-    today: number;
-    total: number;
-    roadmaps: {
-      title: string;
-      id: string;
-      learning: number;
-      done: number;
-      total: number;
-      skipped: number;
-      updatedAt: string;
-    }[];
-    bestPractices: {
-      title: string;
-      id: string;
-      learning: number;
-      done: number;
-      skipped: number;
-      total: number;
-      updatedAt: string;
-    }[];
-  };
-  streak: {
-    count: number;
-    firstVisitAt: Date | null;
-    lastVisitAt: Date | null;
-  };
-  activity: {
-    type: 'done' | 'learning' | 'pending' | 'skipped';
-    createdAt: Date;
-    metadata: {
-      resourceId?: string;
-      resourceType?: 'roadmap' | 'best-practice';
-      topicId?: string;
-      topicLabel?: string;
-      resourceTitle?: string;
-    };
-  }[];
-};
-
-export function ActivityPage() {
-  const [activity, setActivity] = useState<ActivityResponse>();
-  const [isLoading, setIsLoading] = useState(true);
-
-  async function loadActivity() {
-    const { error, response } = await httpGet<ActivityResponse>(
-      `${import.meta.env.PUBLIC_API_URL}/v1-get-user-stats`
-    );
-
-    if (!response || error) {
-      console.error('Error loading activity');
-      console.error(error);
-
-      return;
-    }
-
-    setActivity(response);
-  }
-
-  useEffect(() => {
-    loadActivity().finally(() => {
-      pageProgressMessage.set('');
-      setIsLoading(false);
-    });
-  }, []);
-
-  const learningRoadmaps = activity?.learning.roadmaps || [];
-  const learningBestPractices = activity?.learning.bestPractices || [];
-
-  if (isLoading) {
-    return null;
-  }
-
-  return (
-    <>
-      <ActivityCounters
-        done={activity?.done || { today: 0, total: 0 }}
-        learning={activity?.learning || { today: 0, total: 0 }}
-        streak={activity?.streak || { count: 0 }}
-      />
-
-      <div class="mx-0 px-0 py-5 md:-mx-10 md:px-8 md:py-8">
-        {learningRoadmaps.length === 0 &&
-          learningBestPractices.length === 0 && <EmptyActivity />}
-
-        {(learningRoadmaps.length > 0 || learningBestPractices.length > 0) && (
-          <>
-            <h2 class="mb-3 text-xs uppercase text-gray-400">
-              Continue Following
-            </h2>
-            <div class="flex flex-col gap-3">
-              {learningRoadmaps
-                .sort((a, b) => {
-                  const updatedAtA = new Date(a.updatedAt);
-                  const updatedAtB = new Date(b.updatedAt);
-
-                  return updatedAtB.getTime() - updatedAtA.getTime();
-                })
-                .map((roadmap) => (
-                  <ResourceProgress
-                    doneCount={roadmap.done || 0}
-                    learningCount={roadmap.learning || 0}
-                    totalCount={roadmap.total || 0}
-                    skippedCount={roadmap.skipped || 0}
-                    resourceId={roadmap.id}
-                    resourceType={'roadmap'}
-                    updatedAt={roadmap.updatedAt}
-                    title={roadmap.title}
-                    onCleared={() => {
-                      pageProgressMessage.set('Updating activity');
-                      loadActivity().finally(() => {
-                        pageProgressMessage.set('');
-                      });
-                    }}
-                  />
-                ))}
-
-              {learningBestPractices
-                .sort((a, b) => {
-                  const updatedAtA = new Date(a.updatedAt);
-                  const updatedAtB = new Date(b.updatedAt);
-
-                  return updatedAtB.getTime() - updatedAtA.getTime();
-                })
-                .map((bestPractice) => (
-                  <ResourceProgress
-                    doneCount={bestPractice.done || 0}
-                    totalCount={bestPractice.total || 0}
-                    learningCount={bestPractice.learning || 0}
-                    resourceId={bestPractice.id}
-                    skippedCount={bestPractice.skipped || 0}
-                    resourceType={'best-practice'}
-                    title={bestPractice.title}
-                    updatedAt={bestPractice.updatedAt}
-                    onCleared={() => {
-                      pageProgressMessage.set('Updating activity');
-                      loadActivity().finally(() => {
-                        pageProgressMessage.set('');
-                      });
-                    }}
-                  />
-                ))}
-            </div>
-          </>
-        )}
-      </div>
-    </>
-  );
-}

src/components/Activity/EmptyActivity.tsx

@@ -1,27 +0,0 @@
-import RoadmapIcon from '../../icons/roadmap.svg';
-
-export function EmptyActivity() {
-  return (
-    <div class="rounded-md">
-      <div class="flex flex-col items-center p-7 text-center">
-        <img
-          alt="no roadmaps"
-          src={RoadmapIcon}
-          class="mb-2 w-[60px] h-[60px] sm:h-[120px] sm:w-[120px] opacity-10"
-        />
-        <h2 class="text-lg sm:text-xl font-bold">No Progress</h2>
-        <p className="my-1 sm:my-2 max-w-[400px] text-gray-500 text-sm sm:text-base">
-          Progress will appear here as you start tracking your{' '}
-          <a href="/roadmaps" class="mt-4 text-blue-500 hover:underline">
-            Roadmaps
-          </a>{' '}
-          or{' '}
-          <a href="/best-practices" class="mt-4 text-blue-500 hover:underline">
-            Best Practices
-          </a>{' '}
-          progress.
-        </p>
-      </div>
-    </div>
-  );
-}

src/components/Activity/ResourceProgress.tsx

@@ -1,150 +0,0 @@
-import { useState } from 'preact/hooks';
-import { httpPost } from '../../lib/http';
-import { getRelativeTimeString } from '../../lib/date';
-import { useToast } from '../../hooks/use-toast';
-
-type ResourceProgressType = {
-  resourceType: 'roadmap' | 'best-practice';
-  resourceId: string;
-  title: string;
-  updatedAt: string;
-  totalCount: number;
-  doneCount: number;
-  learningCount: number;
-  skippedCount: number;
-  onCleared?: () => void;
-  showClearButton?: boolean;
-};
-
-export function ResourceProgress(props: ResourceProgressType) {
-  const { showClearButton = true } = props;
-  const toast = useToast();
-  const [isClearing, setIsClearing] = useState(false);
-  const [isConfirming, setIsConfirming] = useState(false);
-
-  const {
-    updatedAt,
-    resourceType,
-    resourceId,
-    title,
-    totalCount,
-    learningCount,
-    doneCount,
-    skippedCount,
-    onCleared,
-  } = props;
-
-  async function clearProgress() {
-    setIsClearing(true);
-    const { error, response } = await httpPost(
-      `${import.meta.env.PUBLIC_API_URL}/v1-clear-resource-progress`,
-      {
-        resourceId,
-        resourceType,
-      }
-    );
-
-    if (error || !response) {
-      toast.error('Error clearing progress. Please try again.');
-      console.error(error);
-      setIsClearing(false);
-      return;
-    }
-
-    localStorage.removeItem(`${resourceType}-${resourceId}-favorite`);
-    localStorage.removeItem(`${resourceType}-${resourceId}-progress`);
-
-    setIsClearing(false);
-    setIsConfirming(false);
-    if (onCleared) {
-      onCleared();
-    }
-  }
-
-  const url =
-    resourceType === 'roadmap'
-      ? `/${resourceId}`
-      : `/best-practices/${resourceId}`;
-
-  const totalMarked = doneCount + skippedCount;
-  const progressPercentage = Math.round((totalMarked / totalCount) * 100);
-
-  return (
-    <div>
-      <a
-        href={url}
-        className="group relative flex cursor-pointer items-center rounded-t-md border p-3 text-gray-600 hover:border-gray-300 hover:text-black"
-      >
-        <span
-          className={`absolute left-0 top-0 block h-full cursor-pointer rounded-tl-md bg-black/5 group-hover:bg-black/10`}
-          style={{
-            width: `${progressPercentage}%`,
-          }}
-        ></span>
-        <span className="relative  flex-1 cursor-pointer truncate">
-          {title}
-        </span>
-        <span className="ml-1 cursor-pointer text-sm text-gray-400">
-          {getRelativeTimeString(updatedAt)}
-        </span>
-      </a>
-      <p className="sm:space-between flex flex-row items-start rounded-b-md border border-t-0 px-2 py-2 text-xs text-gray-500">
-        <span className="hidden flex-1 gap-1 sm:flex">
-          {doneCount > 0 && (
-            <>
-              <span>{doneCount} done</span> &bull;
-            </>
-          )}
-          {learningCount > 0 && (
-            <>
-              <span>{learningCount} in progress</span> &bull;
-            </>
-          )}
-          {skippedCount > 0 && (
-            <>
-              <span>{skippedCount} skipped</span> &bull;
-            </>
-          )}
-          <span>{totalCount} total</span>
-        </span>
-        {showClearButton && (
-          <>
-            {!isConfirming && (
-              <button
-                className="text-red-500 hover:text-red-800"
-                onClick={() => setIsConfirming(true)}
-                disabled={isClearing}
-              >
-                {!isClearing && (
-                  <>
-                    Clear Progress <span>&times;</span>
-                  </>
-                )}
-
-                {isClearing && 'Processing...'}
-              </button>
-            )}
-
-            {isConfirming && (
-              <span>
-                Are you sure?{' '}
-                <button
-                  onClick={clearProgress}
-                  className="ml-1 mr-1 text-red-500 underline hover:text-red-800"
-                >
-                  Yes
-                </button>{' '}
-                <button
-                  onClick={() => setIsConfirming(false)}
-                  className="text-red-500 underline hover:text-red-800"
-                >
-                  No
-                </button>
-              </span>
-            )}
-          </>
-        )}
-      </p>
-    </div>
-  );
-}

src/components/AddTeamRoadmap.tsx

@@ -1,174 +0,0 @@
-import { useRef, useState } from 'preact/hooks';
-import { useOutsideClick } from '../hooks/use-outside-click';
-import { OptionType, SearchSelector } from './SearchSelector';
-import type { PageType } from './CommandMenu/CommandMenu';
-import { CheckIcon } from './ReactIcons/CheckIcon';
-import { httpPut } from '../lib/http';
-import type { TeamResourceConfig } from './CreateTeam/RoadmapSelector';
-import { Spinner } from './ReactIcons/Spinner';
-
-type AddTeamRoadmapProps = {
-  teamId: string;
-  allRoadmaps: PageType[];
-  availableRoadmaps: PageType[];
-  onClose: () => void;
-  onMakeChanges: (roadmapId: string) => void;
-  setResourceConfigs: (config: TeamResourceConfig) => void;
-};
-
-export function AddTeamRoadmap(props: AddTeamRoadmapProps) {
-  const {
-    teamId,
-    onMakeChanges,
-    onClose,
-    allRoadmaps,
-    availableRoadmaps,
-    setResourceConfigs,
-  } = props;
-  const [error, setError] = useState('');
-  const [isLoading, setIsLoading] = useState(false);
-  const [selectedRoadmap, setSelectedRoadmap] = useState<string>('');
-  const popupBodyEl = useRef<HTMLDivElement>(null);
-
-  async function addTeamResource(roadmapId: string) {
-    if (!teamId) {
-      return;
-    }
-
-    setIsLoading(true);
-    const { error, response } = await httpPut<TeamResourceConfig>(
-      `${
-        import.meta.env.PUBLIC_API_URL
-      }/v1-update-team-resource-config/${teamId}`,
-      {
-        teamId: teamId,
-        resourceId: roadmapId,
-        resourceType: 'roadmap',
-        removed: [],
-      }
-    );
-
-    if (error || !response) {
-      setError(error?.message || 'Error adding roadmap');
-      return;
-    }
-
-    setResourceConfigs(response);
-  }
-
-  useOutsideClick(popupBodyEl, () => {
-    onClose();
-  });
-
-  const selectedRoadmapTitle = allRoadmaps.find(
-    (roadmap) => roadmap.id === selectedRoadmap
-  )?.title;
-
-  return (
-    <div class="popup fixed left-0 right-0 top-0 z-50 flex h-full items-center justify-center overflow-y-auto overflow-x-hidden bg-black/50">
-      <div class="relative h-full w-full max-w-md p-4 md:h-auto">
-        <div
-          ref={popupBodyEl}
-          class="popup-body relative rounded-lg bg-white p-4 shadow"
-        >
-          {isLoading && (
-            <>
-              <div class="flex items-center justify-center gap-2 py-8">
-                <Spinner isDualRing={false} className="h-4 w-4" />
-                <h2 className="font-medium">Loading...</h2>
-              </div>
-            </>
-          )}
-          {!isLoading && !error && selectedRoadmap && (
-            <div className={'text-center'}>
-              <CheckIcon additionalClasses="h-10 w-10 mx-auto opacity-20 mb-3 mt-4" />
-              <h3 class="mb-1.5 text-2xl font-medium">
-                {selectedRoadmapTitle} Added
-              </h3>
-              <p className="mb-4 text-sm leading-none text-gray-400">
-                <button
-                  onClick={() => onMakeChanges(selectedRoadmap)}
-                  className="underline underline-offset-2 hover:text-gray-900"
-                >
-                  Click here
-                </button>{' '}
-                to make changes to the roadmap.
-              </p>
-
-              <div class="flex items-center gap-2">
-                <button
-                  onClick={onClose}
-                  type="button"
-                  class="flex-grow cursor-pointer rounded-lg bg-gray-200 py-2 text-center hover:bg-gray-300"
-                >
-                  Done
-                </button>
-                <button
-                  onClick={() => {
-                    setSelectedRoadmap('');
-                    setError('');
-                    setIsLoading(false);
-                  }}
-                  type="button"
-                  class="flex-grow cursor-pointer rounded-lg bg-black py-2 text-center text-white"
-                >
-                  + Add More
-                </button>
-              </div>
-            </div>
-          )}
-          {!isLoading && error && (
-            <>
-              <h3 class="mb-1.5 text-2xl font-medium">Error</h3>
-              <p className="mb-3 text-sm leading-none text-red-400">{error}</p>
-
-              <div class="flex items-center gap-2">
-                <button
-                  onClick={onClose}
-                  type="button"
-                  class="flex-grow cursor-pointer rounded-lg bg-gray-200 py-2 text-center hover:bg-gray-300"
-                >
-                  Cancel
-                </button>
-              </div>
-            </>
-          )}
-          {!isLoading && !error && !selectedRoadmap && (
-            <>
-              <h3 class="mb-1.5 text-2xl font-medium">Add Roadmap</h3>
-              <p className="mb-3 text-sm leading-none text-gray-400">
-                Search and add a roadmap
-              </p>
-
-              <SearchSelector
-                options={availableRoadmaps.map((roadmap) => ({
-                  value: roadmap.id,
-                  label: roadmap.title,
-                }))}
-                onSelect={(option: OptionType) => {
-                  const roadmapId = option.value;
-                  addTeamResource(roadmapId).finally(() => {
-                    setIsLoading(false);
-                    setSelectedRoadmap(roadmapId);
-                  });
-                }}
-                inputClassName="mt-2 mb-2 block w-full rounded-md border border-gray-300 px-3 py-2 outline-none placeholder:text-gray-400 focus:border-gray-400"
-                placeholder={'Search for roadmap'}
-              />
-
-              <div class="flex items-center gap-2">
-                <button
-                  onClick={onClose}
-                  type="button"
-                  class="flex-grow cursor-pointer rounded-lg bg-gray-200 py-2 text-center hover:bg-gray-300"
-                >
-                  Cancel
-                </button>
-              </div>
-            </>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}

src/components/Analytics/Analytics.astro

@@ -1,17 +1,41 @@
 ---
 ---
 
-<script src='./analytics.ts'></script>
+<script src='./analytics.js'></script>
 <script async src='https://www.googletagmanager.com/gtag/js?id=UA-139582634-1'
 ></script>
 <script is:inline>
   // @ts-nocheck
   window.dataLayer = window.dataLayer || [];
-
   function gtag() {
     dataLayer.push(arguments);
   }
-
   gtag('js', new Date());
+
   gtag('config', 'UA-139582634-1');
+
+  document.addEventListener('click', (e) => {
+    let trackEl = e.target;
+    if (!trackEl.getAttribute('ga-category')) {
+      trackEl = trackEl.closest('[ga-category]');
+    }
+
+    if (!trackEl) {
+      return;
+    }
+
+    const category = trackEl.getAttribute('ga-category');
+    const action = trackEl.getAttribute('ga-action');
+    const label = trackEl.getAttribute('ga-label');
+
+    if (!category) {
+      return;
+    }
+
+    window.fireEvent({
+      category,
+      action,
+      label,
+    });
+  });
 </script>

src/components/Analytics/analytics.ts

@@ -1,29 +1,35 @@
+export {};
+
 declare global {
   interface Window {
+    // To selectively enable/disable debug logs
+    __DEBUG__: boolean;
     gtag: any;
-    fireEvent: (props: {
-      action: string;
-      category: string;
-      label?: string;
-      value?: string;
-    }) => void;
+    fireEvent: (props: GAEventType) => void;
   }
 }
 
+export type GAEventType = {
+  action: string;
+  category: string;
+  label?: string;
+  value?: string;
+};
+
 /**
  * Tracks the event on google analytics
  * @see https://developers.google.com/analytics/devguides/collection/gtagjs/events
  * @param props Event properties
  * @returns void
  */
-window.fireEvent = (props) => {
+window.fireEvent = (props: GAEventType) => {
   const { action, category, label, value } = props;
   if (!window.gtag) {
     console.warn('Missing GTAG - Analytics disabled');
     return;
   }
 
-  if (import.meta.env.DEV) {
+  if (window.__DEBUG__) {
     console.log('Analytics event fired', props);
   }
 

src/components/AuthenticationFlow/Divider.astro

@@ -1,5 +0,0 @@
-<div class='flex w-full items-center gap-2 py-6 text-sm text-slate-600'>
-  <div class='h-px w-full bg-slate-200'></div>
-  OR
-  <div class='h-px w-full bg-slate-200'></div>
-</div>

src/components/AuthenticationFlow/EmailLoginForm.tsx

@@ -1,103 +0,0 @@
-import Cookies from 'js-cookie';
-import type { FunctionComponent } from 'preact';
-import { useState } from 'preact/hooks';
-import { httpPost } from '../../lib/http';
-import { TOKEN_COOKIE_NAME } from '../../lib/jwt';
-
-const EmailLoginForm: FunctionComponent<{}> = () => {
-  const [email, setEmail] = useState<string>('');
-  const [password, setPassword] = useState<string>('');
-  const [error, setError] = useState('');
-
-  const [isLoading, setIsLoading] = useState<boolean>(false);
-
-  const handleFormSubmit = async (e: Event) => {
-    e.preventDefault();
-    setIsLoading(true);
-    setError('');
-
-    const { response, error } = await httpPost<{ token: string }>(
-      `${import.meta.env.PUBLIC_API_URL}/v1-login`,
-      {
-        email,
-        password,
-      }
-    );
-
-    // Log the user in and reload the page
-    if (response?.token) {
-      Cookies.set(TOKEN_COOKIE_NAME, response.token, {
-        path: '/',
-        expires: 30,
-      });
-      window.location.reload();
-
-      return;
-    }
-
-    // @todo use proper types
-    if ((error as any).type === 'user_not_verified') {
-      window.location.href = `/verification-pending?email=${encodeURIComponent(
-        email
-      )}`;
-      return;
-    }
-
-    setIsLoading(false);
-    setError(error?.message || 'Something went wrong. Please try again later.');
-  };
-
-  return (
-    <form className="w-full" onSubmit={handleFormSubmit}>
-      <label htmlFor="email" className="sr-only">
-        Email address
-      </label>
-      <input
-        name="email"
-        type="email"
-        autoComplete="email"
-        required
-        className="block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
-        placeholder="Email Address"
-        value={email}
-        onInput={(e) => setEmail(String((e.target as any).value))}
-      />
-      <label htmlFor="password" className="sr-only">
-        Password
-      </label>
-      <input
-        name="password"
-        type="password"
-        autoComplete="current-password"
-        required
-        className="mt-2 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
-        placeholder="Password"
-        value={password}
-        onInput={(e) => setPassword(String((e.target as any).value))}
-      />
-
-      <p class="mb-3 mt-2 text-sm text-gray-500">
-        <a
-          href="/forgot-password"
-          className="text-blue-800 hover:text-blue-600"
-        >
-          Reset your password?
-        </a>
-      </p>
-
-      {error && (
-        <p className="mb-2 rounded-md bg-red-100 p-2 text-red-800">{error}</p>
-      )}
-
-      <button
-        type="submit"
-        disabled={isLoading}
-        className="inline-flex w-full items-center justify-center rounded-lg bg-black p-2 py-3 text-sm font-medium text-white outline-none focus:ring-2 focus:ring-black focus:ring-offset-1 disabled:bg-gray-400"
-      >
-        {isLoading ? 'Please wait...' : 'Continue'}
-      </button>
-    </form>
-  );
-};
-
-export default EmailLoginForm;

src/components/AuthenticationFlow/EmailSignupForm.tsx

@@ -1,103 +0,0 @@
-import type { FunctionComponent } from 'preact';
-import { useState } from 'preact/hooks';
-import { httpPost } from '../../lib/http';
-
-const EmailSignupForm: FunctionComponent = () => {
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [name, setName] = useState('');
-
-  const [error, setError] = useState('');
-  const [isLoading, setIsLoading] = useState(false);
-
-  const onSubmit = async (e: Event) => {
-    e.preventDefault();
-
-    setIsLoading(true);
-    setError('');
-
-    const { response, error } = await httpPost<{ status: 'ok' }>(
-      `${import.meta.env.PUBLIC_API_URL}/v1-register`,
-      {
-        email,
-        password,
-        name,
-      }
-    );
-
-    if (error || response?.status !== 'ok') {
-      setIsLoading(false);
-      setError(
-        error?.message || 'Something went wrong. Please try again later.'
-      );
-
-      return;
-    }
-
-    window.location.href = `/verification-pending?email=${encodeURIComponent(
-      email
-    )}`;
-  };
-
-  return (
-    <form className="flex w-full flex-col gap-2" onSubmit={onSubmit}>
-      <label htmlFor="name" className="sr-only">
-        Name
-      </label>
-      <input
-        name="name"
-        type="text"
-        autoComplete="name"
-        min={3}
-        max={50}
-        required
-        className="block w-full rounded-lg border border-gray-300 px-3 py-2 outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
-        placeholder="Full Name"
-        value={name}
-        onInput={(e) => setName(String((e.target as any).value))}
-      />
-      <label htmlFor="email" className="sr-only">
-        Email address
-      </label>
-      <input
-        name="email"
-        type="email"
-        autoComplete="email"
-        required
-        className="block w-full rounded-lg border border-gray-300 px-3 py-2  outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
-        placeholder="Email Address"
-        value={email}
-        onInput={(e) => setEmail(String((e.target as any).value))}
-      />
-      <label htmlFor="password" className="sr-only">
-        Password
-      </label>
-      <input
-        name="password"
-        type="password"
-        autoComplete="current-password"
-        min={6}
-        max={50}
-        required
-        className="block w-full rounded-lg border border-gray-300 px-3 py-2 outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
-        placeholder="Password"
-        value={password}
-        onInput={(e) => setPassword(String((e.target as any).value))}
-      />
-
-      {error && (
-        <p className="rounded-lg bg-red-100 p-2 text-red-700">{error}.</p>
-      )}
-
-      <button
-        type="submit"
-        disabled={isLoading}
-        className="inline-flex w-full items-center justify-center rounded-lg bg-black p-2 py-3 text-sm font-medium text-white outline-none focus:ring-2 focus:ring-black focus:ring-offset-1 disabled:bg-gray-400"
-      >
-        {isLoading ? 'Please wait...' : 'Continue to Verify Email'}
-      </button>
-    </form>
-  );
-};
-
-export default EmailSignupForm;

src/components/AuthenticationFlow/ForgotPasswordForm.tsx

@@ -1,64 +0,0 @@
-import { useState } from 'preact/hooks';
-import { httpPost } from '../../lib/http';
-
-export function ForgotPasswordForm() {
-  const [email, setEmail] = useState('');
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState('');
-  const [success, setSuccess] = useState('');
-
-  const handleSubmit = async (e: Event) => {
-    e.preventDefault();
-    setIsLoading(true);
-    setError('');
-
-    const { response, error } = await httpPost(
-      `${import.meta.env.PUBLIC_API_URL}/v1-forgot-password`,
-      {
-        email,
-      }
-    );
-
-    setIsLoading(false);
-    if (error) {
-      setError(error.message);
-    } else {
-      setEmail('');
-      setSuccess('Check your email for a link to reset your password.');
-    }
-  };
-
-  return (
-    <form onSubmit={handleSubmit} class="w-full">
-      <input
-        type="email"
-        name="email"
-        className="mt-2 block w-full appearance-none rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none transition duration-150 ease-in-out placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
-        required
-        placeholder="Email Address"
-        value={email}
-        onInput={(e) => setEmail((e.target as HTMLInputElement).value)}
-      />
-
-      {error && (
-        <p className="mt-2 rounded-lg bg-red-100 p-2 text-sm text-red-700">
-          {error}
-        </p>
-      )}
-
-      {success && (
-        <p className="mt-2 rounded-lg bg-green-100 p-2 text-sm text-green-700">
-          {success}
-        </p>
-      )}
-
-      <button
-        type="submit"
-        disabled={isLoading}
-        className="mt-3 inline-flex w-full items-center justify-center rounded-lg bg-black p-2 py-3 text-sm font-medium text-white outline-none focus:ring-2 focus:ring-black focus:ring-offset-1 disabled:bg-gray-400"
-      >
-        {isLoading ? 'Please wait...' : 'Continue'}
-      </button>
-    </form>
-  );
-}

src/components/AuthenticationFlow/GitHubButton.tsx

@@ -1,124 +0,0 @@
-import { useEffect, useState } from 'preact/hooks';
-
-import GitHubIcon from '../../icons/github.svg';
-import SpinnerIcon from '../../icons/spinner.svg';
-import Cookies from 'js-cookie';
-import { TOKEN_COOKIE_NAME } from '../../lib/jwt';
-import { httpGet } from '../../lib/http';
-
-type GitHubButtonProps = {};
-
-const GITHUB_REDIRECT_AT = 'githubRedirectAt';
-const GITHUB_LAST_PAGE = 'githubLastPage';
-
-export function GitHubButton(props: GitHubButtonProps) {
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState('');
-  const icon = isLoading ? SpinnerIcon : GitHubIcon;
-
-  useEffect(() => {
-    const urlParams = new URLSearchParams(window.location.search);
-    const code = urlParams.get('code');
-    const state = urlParams.get('state');
-    const provider = urlParams.get('provider');
-
-    if (!code || !state || provider !== 'github') {
-      return;
-    }
-
-    setIsLoading(true);
-    httpGet<{ token: string }>(
-      `${import.meta.env.PUBLIC_API_URL}/v1-github-callback${
-        window.location.search
-      }`
-    )
-      .then(({ response, error }) => {
-        if (!response?.token) {
-          const errMessage = error?.message || 'Something went wrong.';
-          setError(errMessage);
-          setIsLoading(false);
-
-          return;
-        }
-
-        let redirectUrl = '/';
-        const gitHubRedirectAt = localStorage.getItem(GITHUB_REDIRECT_AT);
-        const lastPageBeforeGithub = localStorage.getItem(GITHUB_LAST_PAGE);
-
-        // If the social redirect is there and less than 30 seconds old
-        // redirect to the page that user was on before they clicked the github login button
-        if (gitHubRedirectAt && lastPageBeforeGithub) {
-          const socialRedirectAtTime = parseInt(gitHubRedirectAt, 10);
-          const now = Date.now();
-          const timeSinceRedirect = now - socialRedirectAtTime;
-
-          if (timeSinceRedirect < 30 * 1000) {
-            redirectUrl = lastPageBeforeGithub;
-          }
-        }
-
-        localStorage.removeItem(GITHUB_REDIRECT_AT);
-        localStorage.removeItem(GITHUB_LAST_PAGE);
-        Cookies.set(TOKEN_COOKIE_NAME, response.token, {
-          path: '/',
-          expires: 30,
-        });
-        window.location.href = redirectUrl;
-      })
-      .catch((err) => {
-        setError('Something went wrong. Please try again later.');
-        setIsLoading(false);
-      });
-  }, []);
-
-  const handleClick = async () => {
-    setIsLoading(true);
-
-    const { response, error } = await httpGet<{ loginUrl: string }>(
-      `${import.meta.env.PUBLIC_API_URL}/v1-github-login`
-    );
-
-    if (error || !response?.loginUrl) {
-      setError(
-        error?.message || 'Something went wrong. Please try again later.'
-      );
-
-      setIsLoading(false);
-      return;
-    }
-
-    // For non authentication pages, we want to redirect back to the page
-    // the user was on before they clicked the social login button
-    if (!['/login', '/signup'].includes(window.location.pathname)) {
-      const pagePath =
-        window.location.pathname === '/respond-invite'
-          ? window.location.pathname + window.location.search
-          : window.location.pathname;
-
-      localStorage.setItem(GITHUB_REDIRECT_AT, Date.now().toString());
-      localStorage.setItem(GITHUB_LAST_PAGE, pagePath);
-    }
-
-    window.location.href = response.loginUrl;
-  };
-
-  return (
-    <>
-      <button
-        class="inline-flex h-10 w-full items-center justify-center gap-2 rounded border border-slate-300 bg-white p-2 text-sm font-medium text-black outline-none focus:ring-2 focus:ring-[#333] focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-60"
-        disabled={isLoading}
-        onClick={handleClick}
-      >
-        <img
-          src={icon}
-          alt="GitHub"
-          class={`h-[18px] w-[18px] ${isLoading ? 'animate-spin' : ''}`}
-        />
-        Continue with GitHub
-      </button>
-      {error && (
-        <p className="mb-2 mt-1 text-sm font-medium text-red-600">{error}</p>
-      )}
-    </>
-  );
-}