wip: feedback popup state

.env.example

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

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

@@ -14,12 +14,24 @@ body:
       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 Link
-      description: Please create the roadmap [using our roadmap editor](https://twitter.com/kamrify/status/1708293162693767426) and submit the roadmap link.
+      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: |
-          https://roadmap.sh/xyz
+          - Item 1
+            - Subitem 1
+            - Subitem 2
+          - Item 2
+            - Subitem 1
+            - Subitem 2
     validations:
-      required: true
+      required: true

.github/workflows/deploy.yml

@@ -1,26 +1,24 @@
-name: App Deployment
+name: Deployment to GH Pages
 on:
   push:
     branches: [ master ]
 env:
   PUBLIC_API_URL: "https://api.roadmap.sh"
-  PUBLIC_EDITOR_APP_URL: "https://draw.roadmap.sh"
   PUBLIC_AVATAR_BASE_URL: "https://dodrc8eu8m09s.cloudfront.net/avatars"
   GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+  PAT: ${{ secrets.PAT }}
   CI: true
 jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v2
       with:
         persist-credentials: false
     - uses: actions/setup-node@v1
       with:
         node-version: 18
-    - name: Prepare Draw Repository
-      run: |
-        git clone https://${{ secrets.GH_PAT }}@github.com/roadmapsh/web-draw.git .temp/web-draw --depth 1
+    - 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
@@ -29,7 +27,6 @@ jobs:
         pnpm install
     - name: Generate meta and build
       run: |
-        npm run generate-renderer
         npm run build
         touch ./dist/.nojekyll
         echo 'roadmap.sh' > ./dist/CNAME

.github/workflows/update-deps.yml

@@ -9,7 +9,7 @@ jobs:
   upgrade-deps:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v2
       - uses: actions/setup-node@v3
         with:
           node-version: 18

.gitignore

@@ -1,5 +1,4 @@
 .idea
-.temp
 
 # build output
 dist/
@@ -28,6 +27,3 @@ pnpm-debug.log*
 /playwright/.cache/
 tests-examples
 *.csv
-
-/editor/*
-!/editor/readonly-editor.tsx

.npmrc

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

.prettierrc.cjs

@@ -13,6 +13,6 @@ module.exports = {
   ],
   plugins: [
     require.resolve('prettier-plugin-astro'),
-    'prettier-plugin-tailwindcss',
+    require('prettier-plugin-tailwindcss'),
   ],
 };

astro.config.mjs

@@ -1,14 +1,13 @@
 // 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 compress from '@otterlord/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/',
@@ -32,9 +31,11 @@ export default defineConfig({
               'https://cs.fyi',
               'https://roadmap.sh',
             ];
+
             if (whiteListedStarts.some((start) => href.startsWith(start))) {
               return [];
             }
+
             return 'noopener noreferrer nofollow';
           },
         },
@@ -45,6 +46,22 @@ 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,
@@ -55,10 +72,9 @@ export default defineConfig({
       serialize: serializeSitemap,
     }),
     compress({
-      HTML: false,
-      CSS: false,
-      JavaScript: false,
+      css: false,
+      js: false,
     }),
-    react(),
+    preact(),
   ],
 });

contributing.md

@@ -30,12 +30,11 @@ Find [the content directory inside the relevant roadmap](https://github.com/kamr
 
 ## Guidelines
 
-- <p><strong>Adding everything available out there is not the goal!</strong><br />
+- <p><strong>Adding everything available out there is not the goal!</strong><br /> 
   The roadmaps represent the skillset most valuable today, i.e., if you were to enter any of the listed fields today, what would you learn?! There might be things that are of-course being used today but prioritize the things that are most in demand today, e.g., agreed that lots of people are using angular.js today but you wouldn't want to learn that instead of React, Angular, or Vue. Use your critical thinking to filter out non-essential stuff. Give honest arguments for why the resource should be included.</p>
-- <p><strong>Do not add things you have not evaluated personally!</strong><br />
+- <p><strong>Do not add things you have not evaluated personally!</strong><br /> 
   Use your critical thinking to filter out non-essential stuff. Give honest arguments for why the resource should be included. Have you read this book? Can you give a short article?</p>
 - <p><strong>Create a Single PR for Content Additions</strong></p>
-
-  If you are planning to contribute by adding content to the roadmaps, I recommend you to clone the repository, add content to the [content directory of the roadmap](./src/data/roadmaps/) and create a single PR to make it easier for me to review and merge the PR.
+  If you are planning to contribute by adding content to the roadmaps, I recommend you to clone the repository, add content to the [content directory of the roadmap](./content/roadmaps/) and create a single PR to make it easier for me to review and merge the PR.
 - Write meaningful commit messages
 - Look at the existing issues/pull requests before opening new ones

editor/readonly-editor.tsx

@@ -1,14 +0,0 @@
-export function ReadonlyEditor(props: any) {
-  return (
-    <div className="fixed bottom-0 left-0 right-0 top-0 z-[9999] border bg-white p-5 text-black">
-      <h2 className="mb-2 text-xl font-semibold">Private Component</h2>
-      <p className="mb-4">
-        Renderer is a private component. If you are a collaborator and have
-        access to it. Run the following command:
-      </p>
-      <code className="mt-5 rounded-md bg-gray-800 p-2 text-white">
-        npm run generate-renderer
-      </code>
-    </div>
-  );
-}

package.json

@@ -1,10 +1,10 @@
 {
   "name": "roadmap.sh",
   "type": "module",
-  "version": "1.0.0",
+  "version": "0.0.1",
   "private": true,
   "scripts": {
-    "dev": "astro dev --port 3000",
+    "dev": "astro dev",
     "start": "astro dev",
     "build": "astro build",
     "preview": "astro preview",
@@ -16,54 +16,40 @@
     "roadmap-links": "node scripts/roadmap-links.cjs",
     "roadmap-dirs": "node scripts/roadmap-dirs.cjs",
     "roadmap-content": "node scripts/roadmap-content.cjs",
-    "generate-renderer": "sh scripts/generate-renderer.sh",
     "best-practice-dirs": "node scripts/best-practice-dirs.cjs",
     "best-practice-content": "node scripts/best-practice-content.cjs",
     "test:e2e": "playwright test"
   },
   "dependencies": {
-    "@astrojs/react": "^3.0.9",
-    "@astrojs/sitemap": "^3.0.5",
-    "@astrojs/tailwind": "^5.1.0",
-    "@fingerprintjs/fingerprintjs": "^4.2.1",
-    "@nanostores/react": "^0.7.1",
-    "@types/react": "^18.2.48",
-    "@types/react-dom": "^18.2.18",
-    "astro": "^4.2.1",
-    "astro-compress": "^2.2.8",
-    "clsx": "^2.1.0",
-    "dracula-prism": "^2.1.13",
-    "jose": "^5.2.0",
+    "@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",
+    "@otterlord/astro-compress": "^1.1.48",
+    "jose": "^4.14.4",
     "js-cookie": "^3.0.5",
-    "lucide-react": "^0.300.0",
-    "nanoid": "^5.0.4",
-    "nanostores": "^0.9.5",
-    "node-html-parser": "^6.1.12",
-    "npm-check-updates": "^16.14.12",
-    "prismjs": "^1.29.0",
-    "react": "^18.2.0",
-    "react-confetti": "^6.1.0",
-    "react-dom": "^18.2.0",
-    "reactflow": "^11.10.2",
-    "rehype-external-links": "^3.0.0",
+    "nanostores": "^0.9.2",
+    "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",
-    "tailwind-merge": "^2.2.1",
-    "tailwindcss": "^3.4.1",
-    "zustand": "^4.5.0"
+    "tailwindcss": "^3.3.2"
   },
   "devDependencies": {
-    "@playwright/test": "^1.41.1",
-    "@tailwindcss/typography": "^0.5.10",
-    "@types/js-cookie": "^3.0.6",
-    "@types/prismjs": "^1.26.3",
+    "@playwright/test": "^1.35.1",
+    "@tailwindcss/typography": "^0.5.9",
+    "@types/js-cookie": "^3.0.3",
     "csv-parser": "^3.0.0",
-    "gh-pages": "^6.1.1",
+    "gh-pages": "^5.0.0",
     "js-yaml": "^4.1.0",
-    "markdown-it": "^14.0.0",
-    "openai": "^4.25.0",
-    "prettier": "^3.2.4",
-    "prettier-plugin-astro": "^0.12.3",
-    "prettier-plugin-tailwindcss": "^0.5.11"
+    "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"
   }
 }

public/images/hackernews.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32">
-    <path fill="#94a3b8" d="M5 5v22h22V5zm2 2h18v18H7zm4.5 4l3.5 6v5h2v-5l3.5-6h-2L16 15.281L13.5 11z"></path>
-</svg>

public/images/reddit.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 1024 1024"><path fill="#94a3b8" d="M288 568a56 56 0 1 0 112 0a56 56 0 1 0-112 0zm338.7 119.7c-23.1 18.2-68.9 37.8-114.7 37.8s-91.6-19.6-114.7-37.8c-14.4-11.3-35.3-8.9-46.7 5.5s-8.9 35.3 5.5 46.7C396.3 771.6 457.5 792 512 792s115.7-20.4 155.9-52.1a33.25 33.25 0 1 0-41.2-52.2zM960 456c0-61.9-50.1-112-112-112c-42.1 0-78.7 23.2-97.9 57.6c-57.6-31.5-127.7-51.8-204.1-56.5L612.9 195l127.9 36.9c11.5 32.6 42.6 56.1 79.2 56.1c46.4 0 84-37.6 84-84s-37.6-84-84-84c-32 0-59.8 17.9-74 44.2L603.5 123a33.2 33.2 0 0 0-39.6 18.4l-90.8 203.9c-74.5 5.2-142.9 25.4-199.2 56.2A111.94 111.94 0 0 0 176 344c-61.9 0-112 50.1-112 112c0 45.8 27.5 85.1 66.8 102.5c-7.1 21-10.8 43-10.8 65.5c0 154.6 175.5 280 392 280s392-125.4 392-280c0-22.6-3.8-44.5-10.8-65.5C932.5 541.1 960 501.8 960 456zM820 172.5a31.5 31.5 0 1 1 0 63a31.5 31.5 0 0 1 0-63zM120 456c0-30.9 25.1-56 56-56a56 56 0 0 1 50.6 32.1c-29.3 22.2-53.5 47.8-71.5 75.9a56.23 56.23 0 0 1-35.1-52zm392 381.5c-179.8 0-325.5-95.6-325.5-213.5S332.2 410.5 512 410.5S837.5 506.1 837.5 624S691.8 837.5 512 837.5zM868.8 508c-17.9-28.1-42.2-53.7-71.5-75.9c9-18.9 28.3-32.1 50.6-32.1c30.9 0 56 25.1 56 56c.1 23.5-14.5 43.7-35.1 52zM624 568a56 56 0 1 0 112 0a56 56 0 1 0-112 0z"></path></svg>

readme.md

@@ -9,8 +9,8 @@
     <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" />
     </a>
-    <a href="https://roadmap.sh/questions">
-    	<img src="https://img.shields.io/badge/%E2%9C%A8-Questions-0a0a0a.svg?style=flat&colorA=0a0a0a" alt="videos" />
+    <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" />
     </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" />
@@ -24,7 +24,7 @@
 
 Roadmaps are now interactive, you can click the nodes to read more about the topics.
 
-### [View all Roadmaps](https://roadmap.sh) &nbsp;&middot;&nbsp; [Best Practices](https://roadmap.sh/best-practices) &nbsp;&middot;&nbsp; [Questions](https://roadmap.sh/questions)
+### [View all Roadmaps](https://roadmap.sh)
 
 ![](https://i.imgur.com/waxVImv.png)
 
@@ -35,11 +35,8 @@ Here is the list of available roadmaps with more being actively worked upon.
 - [DevOps Roadmap](https://roadmap.sh/devops) / [DevOps Beginner Roadmap](https://roadmap.sh/devops?r=devops-beginner)
 - [Full Stack Roadmap](https://roadmap.sh/full-stack)
 - [Computer Science Roadmap](https://roadmap.sh/computer-science)
-- [AI and Data Scientist Roadmap](https://roadmap.sh/ai-data-scientist)
 - [QA Roadmap](https://roadmap.sh/qa)
-- [Python Roadmap](https://roadmap.sh/python)
 - [Software Architect Roadmap](https://roadmap.sh/software-architect)
-- [Game Developer Roadmap](https://roadmap.sh/game-developer) / [Server Side Game Developer](https://roadmap.sh/server-side-game-developer)
 - [Software Design and Architecture Roadmap](https://roadmap.sh/software-design-architecture)
 - [JavaScript Roadmap](https://roadmap.sh/javascript)
 - [TypeScript Roadmap](https://roadmap.sh/typescript)
@@ -52,8 +49,8 @@ Here is the list of available roadmaps with more being actively worked upon.
 - [GraphQL Roadmap](https://roadmap.sh/graphql)
 - [Android Roadmap](https://roadmap.sh/android)
 - [Flutter Roadmap](https://roadmap.sh/flutter)
+- [Python Roadmap](https://roadmap.sh/python)
 - [Go Roadmap](https://roadmap.sh/golang)
-- [Rust Roadmap](https://roadmap.sh/rust)
 - [Java Roadmap](https://roadmap.sh/java)
 - [Spring Boot Roadmap](https://roadmap.sh/spring-boot)
 - [Design System Roadmap](https://roadmap.sh/design-system)
@@ -68,20 +65,14 @@ Here is the list of available roadmaps with more being actively worked upon.
 - [UX Design Roadmap](https://roadmap.sh/ux-design)
 - [Docker Roadmap](https://roadmap.sh/docker)
 - [Prompt Engineering Roadmap](https://roadmap.sh/prompt-engineering)
-- [Technical Writer Roadmap](https://roadmap.sh/technical-writer)
 
-There are also interactive best practices:
+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)
 
-..and questions to help you test, rate and improve your knowledge
-
-- [JavaScript Questions](https://roadmap.sh/questions/javascript)
-- [React Questions](https://roadmap.sh/questions/react)
-
 ![](https://i.imgur.com/waxVImv.png)
 
 ## Share with the community

renderer/index.tsx

@@ -1,14 +0,0 @@
-export function Renderer(props: any) {
-  return (
-    <div className="fixed bottom-0 left-0 right-0 top-0 z-[9999] border bg-white p-5 text-black">
-      <h2 className="mb-2 text-xl font-semibold">Private Component</h2>
-      <p className="mb-4">
-        Renderer is a private component. If you are a collaborator and have
-        access to it. Run the following command:
-      </p>
-      <code className="mt-5 rounded-md bg-gray-800 p-2 text-white">
-        npm run generate-renderer
-      </code>
-    </div>
-  );
-}

renderer/renderer.ts

@@ -1,5 +0,0 @@
-export function renderFlowJSON(data: any, options?: any) {
-  console.warn("renderFlowJSON is not implemented");
-  console.warn("run the following command to generate the renderer:");
-  console.warn("> npm run generate-renderer");
-}

scripts/generate-renderer.sh

@@ -1,32 +0,0 @@
-#!/usr/bin/env bash
-
-set -e
-
-# ignore cloning if .temp/web-draw already exists
-if [ ! -d ".temp/web-draw" ]; then
-  mkdir -p .temp
-  git clone git@github.com:roadmapsh/web-draw.git .temp/web-draw
-fi
-
-rm -rf editor
-mkdir editor
-
-# copy the files at /src/editor/* to /editor
-# while replacing any existing files
-cp -rf .temp/web-draw/src/editor/* editor
-
-# Add @ts-nocheck to the top of each ts and tsx file
-# so that the typescript compiler doesn't complain
-# about the missing types
-find editor -type f \( -name "*.ts" -o -name "*.tsx" \) -print0 | while IFS= read -r -d '' file; do
-  if [ -f "$file" ]; then
-    echo "// @ts-nocheck" > temp
-    cat "$file" >> temp
-    mv temp "$file"
-    echo "Added @ts-nocheck to $file"
-  fi
-done
-
-
-# ignore the worktree changes for the editor directory
-git update-index --assume-unchanged editor/readonly-editor.tsx

scripts/roadmap-content.cjs

@@ -19,12 +19,13 @@ if (!allowedRoadmapIds.includes(roadmapId)) {
 }
 
 const ROADMAP_CONTENT_DIR = path.join(ALL_ROADMAPS_DIR, roadmapId, 'content');
-const OpenAI = require('openai');
-
-const openai = new OpenAI({
+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);
 
@@ -59,16 +60,16 @@ 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 a brief paragraph for that. Your output should be strictly markdown. Do not include anything other than the description in your output. I already know the benefits of each so do not add benefits in the output.`;
+  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.`;
   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 a brief paragraph for that. Your output should be strictly markdown. Do not include anything other than the description in your output. I already know the benefits of each so do not add benefits in the output.`;
+    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.`;
   }
 
   console.log(`Generating '${childTopic || parentTopic}'...`);
 
   return new Promise((resolve, reject) => {
-    openai.chat.completions
-      .create({
+    openai
+      .createChatCompletion({
         model: 'gpt-4',
         messages: [
           {
@@ -78,7 +79,7 @@ function writeTopicContent(currTopicUrl) {
         ],
       })
       .then((response) => {
-        const article = response.choices[0].message.content;
+        const article = response.data.choices[0].message.content;
 
         resolve(article);
       })
@@ -91,7 +92,7 @@ function writeTopicContent(currTopicUrl) {
 async function writeFileForGroup(group, topicUrlToPathMapping) {
   const topicId = group?.properties?.controlName;
   const topicTitle = group?.children?.controls?.control?.find(
-    (control) => control?.typeID === 'Label',
+    (control) => control?.typeID === 'Label'
   )?.properties?.text;
   const currTopicUrl = topicId?.replace(/^\d+-/g, '/')?.replace(/:/g, '/');
   if (!currTopicUrl) {
@@ -137,14 +138,15 @@ async function writeFileForGroup(group, topicUrlToPathMapping) {
 async function run() {
   const topicUrlToPathMapping = getFilesInFolder(ROADMAP_CONTENT_DIR);
 
-  const roadmapJson = require(
-    path.join(ALL_ROADMAPS_DIR, `${roadmapId}/${roadmapId}`),
-  );
+  const roadmapJson = require(path.join(
+      ALL_ROADMAPS_DIR,
+      `${roadmapId}/${roadmapId}`
+  ));
 
   const groups = roadmapJson?.mockup?.controls?.control?.filter(
     (control) =>
       control.typeID === '__group__' &&
-      !control.properties?.controlName?.startsWith('ext_link'),
+      !control.properties?.controlName?.startsWith('ext_link')
   );
 
   if (!OPEN_AI_API_KEY) {

scripts/roadmap-dirs.cjs

@@ -53,12 +53,12 @@ function prepareDirTree(control, dirTree, dirSortOrders) {
   const sortOrder = controlName.match(/^\d+/)?.[0];
 
   // No directory for a group without control name
-  if (!controlName || (!sortOrder && !controlName.startsWith('check:'))) {
+  if (!controlName || !sortOrder) {
     return;
   }
 
   // e.g. testing-your-apps:other-options
-  const controlNameWithoutSortOrder = controlName.replace(/^\d+-/, '').replace(/^check:/, '');
+  const controlNameWithoutSortOrder = controlName.replace(/^\d+-/, '');
   // e.g. ['testing-your-apps', 'other-options']
   const dirParts = controlNameWithoutSortOrder.split(':');
 

src/components/AccountSidebar.astro

@@ -2,7 +2,6 @@
 import AstroIcon from './AstroIcon.astro';
 import { TeamDropdown } from './TeamDropdown/TeamDropdown';
 import { SidebarFriendsCounter } from './Friends/SidebarFriendsCounter';
-import { Map } from 'lucide-react';
 
 export interface Props {
   activePageId: string;
@@ -27,21 +26,10 @@ const sidebarLinks = [
     href: '/account/friends',
     title: 'Friends',
     id: 'friends',
-    isNew: false,
-    icon: {
-      glyph: 'users',
-      classes: 'h-4 w-4',
-    },
-  },
-  {
-    href: '/account/roadmaps',
-    title: 'Roadmaps',
-    id: 'roadmaps',
     isNew: true,
     icon: {
       glyph: 'users',
       classes: 'h-4 w-4',
-      component: Map,
     },
   },
   {
@@ -97,7 +85,7 @@ const sidebarLinks = [
         }`}
       >
         <AstroIcon icon={'users'} class={`h-4 w-4 mr-2`} />
-         Teams
+        Teams
       </a>
     </li>
     {
@@ -112,16 +100,10 @@ const sidebarLinks = [
                 isActive ? 'bg-slate-100' : ''
               }`}
             >
-              {sidebarLink.icon.component ? (
-                <sidebarLink.icon.component
-                  className={`${sidebarLink.icon.classes} mr-2`}
-                />
-              ) : (
-                <AstroIcon
-                  icon={sidebarLink.icon.glyph}
-                  class={`${sidebarLink.icon.classes} mr-2`}
-                />
-              )}
+              <AstroIcon
+                icon={sidebarLink.icon.glyph}
+                class={`${sidebarLink.icon.classes} mr-2`}
+              />
               {sidebarLink.title}
             </a>
           </li>
@@ -154,25 +136,21 @@ const sidebarLinks = [
                     }`}
                   >
                     <span class='flex flex-grow items-center'>
-                      {sidebarLink.icon.component ? (
-                        <sidebarLink.icon.component
-                          className={`${sidebarLink.icon.classes} mr-2`}
-                        />
-                      ) : (
-                        <AstroIcon
-                          icon={sidebarLink.icon.glyph}
-                          class={`${sidebarLink.icon.classes} mr-2`}
-                        />
-                      )}
+                      <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>
-                    )}
+                    {sidebarLink.isNew &&
+                      sidebarLink.id !== 'friends' &&
+                      !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>
+                      )}
 
                     {sidebarLink.id === 'friends' && (
                       <SidebarFriendsCounter client:load />

src/components/Activity/ActivityCounters.tsx

@@ -21,11 +21,11 @@ function ActivityCounter(props: ActivityCounterType) {
   const { text, count } = props;
 
   return (
-    <div className="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 className="text-base sm:text-5xl font-bold">
+    <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 className="mt-0 sm:mt-2 text-sm text-gray-400">{text}</p>
+      <p class="mt-0 sm:mt-2 text-sm text-gray-400">{text}</p>
     </div>
   );
 }
@@ -34,8 +34,8 @@ export function ActivityCounters(props: ActivityCountersType) {
   const { done, learning, streak } = props;
 
   return (
-    <div className="mx-0 -mt-5 sm:-mx-10 md:-mt-10">
-      <div className="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">
+    <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}`}

src/components/Activity/ActivityPage.tsx

@@ -1,21 +1,10 @@
-import { useEffect, useState } from 'react';
+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';
 
-type ProgressResponse = {
-  updatedAt: string;
-  title: string;
-  id: string;
-  learning: number;
-  skipped: number;
-  done: number;
-  total: number;
-  isCustomResource: boolean;
-};
-
 export type ActivityResponse = {
   done: {
     today: number;
@@ -24,9 +13,24 @@ export type ActivityResponse = {
   learning: {
     today: number;
     total: number;
-    roadmaps: ProgressResponse[];
-    bestPractices: ProgressResponse[];
-    customs: ProgressResponse[];
+    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;
@@ -87,16 +91,16 @@ export function ActivityPage() {
         streak={activity?.streak || { count: 0 }}
       />
 
-      <div className="mx-0 px-0 py-5 md:-mx-10 md:px-8 md:py-8">
+      <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 className="mb-3 text-xs uppercase text-gray-400">
+            <h2 class="mb-3 text-xs uppercase text-gray-400">
               Continue Following
             </h2>
-            <div className="flex flex-col gap-3">
+            <div class="flex flex-col gap-3">
               {learningRoadmaps
                 .sort((a, b) => {
                   const updatedAtA = new Date(a.updatedAt);
@@ -106,8 +110,6 @@ export function ActivityPage() {
                 })
                 .map((roadmap) => (
                   <ResourceProgress
-                    key={roadmap.id}
-                    isCustomResource={roadmap.isCustomResource}
                     doneCount={roadmap.done || 0}
                     learningCount={roadmap.learning || 0}
                     totalCount={roadmap.total || 0}
@@ -134,8 +136,6 @@ export function ActivityPage() {
                 })
                 .map((bestPractice) => (
                   <ResourceProgress
-                    isCustomResource={bestPractice.isCustomResource}
-                    key={bestPractice.id}
                     doneCount={bestPractice.done || 0}
                     totalCount={bestPractice.total || 0}
                     learningCount={bestPractice.learning || 0}

src/components/Activity/EmptyActivity.tsx

@@ -1,19 +1,22 @@
-import { RoadmapIcon } from "../ReactIcons/RoadmapIcon";
+import RoadmapIcon from '../../icons/roadmap.svg';
 
 export function EmptyActivity() {
   return (
-    <div className="rounded-md">
-      <div className="flex flex-col items-center p-7 text-center">
-        <RoadmapIcon className="mb-2 w-[60px] h-[60px] sm:h-[120px] sm:w-[120px] opacity-10" />
-
-        <h2 className="text-lg sm:text-xl font-bold">No Progress</h2>
+    <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" className="mt-4 text-blue-500 hover:underline">
+          <a href="/roadmaps" class="mt-4 text-blue-500 hover:underline">
             Roadmaps
           </a>{' '}
           or{' '}
-          <a href="/best-practices" className="mt-4 text-blue-500 hover:underline">
+          <a href="/best-practices" class="mt-4 text-blue-500 hover:underline">
             Best Practices
           </a>{' '}
           progress.

src/components/Activity/ResourceProgress.tsx

@@ -1,9 +1,8 @@
+import { useState } from 'preact/hooks';
 import { httpPost } from '../../lib/http';
 import { getRelativeTimeString } from '../../lib/date';
 import { useToast } from '../../hooks/use-toast';
 import { ProgressShareButton } from '../UserProgress/ProgressShareButton';
-import { useState } from 'react';
-import { getUser } from '../../lib/jwt';
 
 type ResourceProgressType = {
   resourceType: 'roadmap' | 'best-practice';
@@ -16,17 +15,14 @@ type ResourceProgressType = {
   skippedCount: number;
   onCleared?: () => void;
   showClearButton?: boolean;
-  isCustomResource: boolean;
 };
 
 export function ResourceProgress(props: ResourceProgressType) {
-  const { showClearButton = true, isCustomResource } = props;
+  const { showClearButton = true } = props;
   const toast = useToast();
   const [isClearing, setIsClearing] = useState(false);
   const [isConfirming, setIsConfirming] = useState(false);
 
-  const userId = getUser()?.id;
-
   const {
     updatedAt,
     resourceType,
@@ -56,8 +52,8 @@ export function ResourceProgress(props: ResourceProgressType) {
       return;
     }
 
-    localStorage.removeItem(`${resourceType}-${resourceId}-${userId}-favorite`);
-    localStorage.removeItem(`${resourceType}-${resourceId}-${userId}-progress`);
+    localStorage.removeItem(`${resourceType}-${resourceId}-favorite`);
+    localStorage.removeItem(`${resourceType}-${resourceId}-progress`);
 
     setIsClearing(false);
     setIsConfirming(false);
@@ -66,15 +62,11 @@ export function ResourceProgress(props: ResourceProgressType) {
     }
   }
 
-  let url =
+  const url =
     resourceType === 'roadmap'
       ? `/${resourceId}`
       : `/best-practices/${resourceId}`;
 
-  if (isCustomResource) {
-    url = `/r?id=${resourceId}`;
-  }
-
   const totalMarked = doneCount + skippedCount;
   const progressPercentage = Math.round((totalMarked / totalCount) * 100);
 
@@ -120,7 +112,6 @@ export function ResourceProgress(props: ResourceProgressType) {
           <ProgressShareButton
             resourceType={resourceType}
             resourceId={resourceId}
-            isCustomResource={isCustomResource}
             className="text-xs font-normal"
             shareIconClassName="w-2.5 h-2.5 stroke-2"
             checkIconClassName="w-2.5 h-2.5"

src/components/AddTeamRoadmap.tsx

@@ -1,6 +1,6 @@
-import { useRef, useState } from 'react';
+import { useRef, useState } from 'preact/hooks';
 import { useOutsideClick } from '../hooks/use-outside-click';
-import { type OptionType, SearchSelector } from './SearchSelector';
+import { OptionType, SearchSelector } from './SearchSelector';
 import type { PageType } from './CommandMenu/CommandMenu';
 import { CheckIcon } from './ReactIcons/CheckIcon';
 import { httpPut } from '../lib/http';
@@ -65,15 +65,15 @@ export function AddTeamRoadmap(props: AddTeamRoadmapProps) {
   )?.title;
 
   return (
-    <div className="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 className="relative h-full w-full max-w-md p-4 md:h-auto">
+    <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}
-          className="popup-body relative rounded-lg bg-white p-4 shadow"
+          class="popup-body relative rounded-lg bg-white p-4 shadow"
         >
           {isLoading && (
             <>
-              <div className="flex items-center justify-center gap-2 py-8">
+              <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>
@@ -82,7 +82,7 @@ export function AddTeamRoadmap(props: AddTeamRoadmapProps) {
           {!isLoading && !error && selectedRoadmap && (
             <div className={'text-center'}>
               <CheckIcon additionalClasses="h-10 w-10 mx-auto opacity-20 mb-3 mt-4" />
-              <h3 className="mb-1.5 text-2xl font-medium">
+              <h3 class="mb-1.5 text-2xl font-medium">
                 {selectedRoadmapTitle} Added
               </h3>
               <p className="mb-4 text-sm leading-none text-gray-400">
@@ -95,11 +95,11 @@ export function AddTeamRoadmap(props: AddTeamRoadmapProps) {
                 to make changes to the roadmap.
               </p>
 
-              <div className="flex items-center gap-2">
+              <div class="flex items-center gap-2">
                 <button
                   onClick={onClose}
                   type="button"
-                  className="flex-grow cursor-pointer rounded-lg bg-gray-200 py-2 text-center hover:bg-gray-300"
+                  class="flex-grow cursor-pointer rounded-lg bg-gray-200 py-2 text-center hover:bg-gray-300"
                 >
                   Done
                 </button>
@@ -110,7 +110,7 @@ export function AddTeamRoadmap(props: AddTeamRoadmapProps) {
                     setIsLoading(false);
                   }}
                   type="button"
-                  className="flex-grow cursor-pointer rounded-lg bg-black py-2 text-center text-white"
+                  class="flex-grow cursor-pointer rounded-lg bg-black py-2 text-center text-white"
                 >
                   + Add More
                 </button>
@@ -119,14 +119,14 @@ export function AddTeamRoadmap(props: AddTeamRoadmapProps) {
           )}
           {!isLoading && error && (
             <>
-              <h3 className="mb-1.5 text-2xl font-medium">Error</h3>
+              <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 className="flex items-center gap-2">
+              <div class="flex items-center gap-2">
                 <button
                   onClick={onClose}
                   type="button"
-                  className="flex-grow cursor-pointer rounded-lg bg-gray-200 py-2 text-center hover:bg-gray-300"
+                  class="flex-grow cursor-pointer rounded-lg bg-gray-200 py-2 text-center hover:bg-gray-300"
                 >
                   Cancel
                 </button>
@@ -135,7 +135,7 @@ export function AddTeamRoadmap(props: AddTeamRoadmapProps) {
           )}
           {!isLoading && !error && !selectedRoadmap && (
             <>
-              <h3 className="mb-1.5 text-2xl font-medium">Add Roadmap</h3>
+              <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>
@@ -156,11 +156,11 @@ export function AddTeamRoadmap(props: AddTeamRoadmapProps) {
                 placeholder={'Search for roadmap'}
               />
 
-              <div className="flex items-center gap-2">
+              <div class="flex items-center gap-2">
                 <button
                   onClick={onClose}
                   type="button"
-                  className="flex-grow cursor-pointer rounded-lg bg-gray-200 py-2 text-center hover:bg-gray-300"
+                  class="flex-grow cursor-pointer rounded-lg bg-gray-200 py-2 text-center hover:bg-gray-300"
                 >
                   Cancel
                 </button>

src/components/AppChecklist.tsx

@@ -1,15 +0,0 @@
-import { PartyPopper } from 'lucide-react';
-
-export function AppChecklist() {
-  return (
-    <div className="fixed bottom-6 right-3">
-      <a
-        href="/get-started"
-        className="flex items-center gap-2 rounded-full border border-slate-900 bg-white py-2 pl-3 pr-4 text-sm font-medium hover:bg-zinc-200"
-      >
-        <PartyPopper className="relative -top-[2px] h-[20px] w-[20px] text-purple-600" />
-        Welcome! Start here
-      </a>
-    </div>
-  );
-}

src/components/AuthenticationFlow/AuthenticationForm.tsx

@@ -1,41 +0,0 @@
-import { useState } from 'react';
-import { GitHubButton } from './GitHubButton';
-import { GoogleButton } from './GoogleButton';
-import { LinkedInButton } from './LinkedInButton';
-import { EmailLoginForm } from './EmailLoginForm';
-import { EmailSignupForm } from './EmailSignupForm';
-
-type AuthenticationFormProps = {
-  type?: 'login' | 'signup';
-};
-
-export function AuthenticationForm(props: AuthenticationFormProps) {
-  const { type = 'login' } = props;
-
-  const [isDisabled, setIsDisabled] = useState(false);
-
-  return (
-    <>
-      <div className="flex w-full flex-col gap-2">
-        <GitHubButton isDisabled={isDisabled} setIsDisabled={setIsDisabled} />
-        <GoogleButton isDisabled={isDisabled} setIsDisabled={setIsDisabled} />
-        <LinkedInButton isDisabled={isDisabled} setIsDisabled={setIsDisabled} />
-      </div>
-
-      <div className="flex w-full items-center gap-2 py-6 text-sm text-slate-600">
-        <div className="h-px w-full bg-slate-200" />
-        OR
-        <div className="h-px w-full bg-slate-200" />
-      </div>
-
-      {type === 'login' ? (
-        <EmailLoginForm isDisabled={isDisabled} setIsDisabled={setIsDisabled} />
-      ) : (
-        <EmailSignupForm
-          isDisabled={isDisabled}
-          setIsDisabled={setIsDisabled}
-        />
-      )}
-    </>
-  );
-}

src/components/AuthenticationFlow/EmailLoginForm.tsx

@@ -1,27 +1,19 @@
 import Cookies from 'js-cookie';
-import type { FormEvent } from 'react';
-import { useState } from 'react';
+import type { FunctionComponent } from 'preact';
+import { useState } from 'preact/hooks';
 import { httpPost } from '../../lib/http';
 import { TOKEN_COOKIE_NAME } from '../../lib/jwt';
 
-type EmailLoginFormProps = {
-  isDisabled?: boolean;
-  setIsDisabled?: (isDisabled: boolean) => void;
-};
-
-export function EmailLoginForm(props: EmailLoginFormProps) {
-  const { isDisabled, setIsDisabled } = props;
-
+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: FormEvent<HTMLFormElement>) => {
+  const handleFormSubmit = async (e: Event) => {
     e.preventDefault();
     setIsLoading(true);
-    setIsDisabled?.(true);
     setError('');
 
     const { response, error } = await httpPost<{ token: string }>(
@@ -29,7 +21,7 @@ export function EmailLoginForm(props: EmailLoginFormProps) {
       {
         email,
         password,
-      },
+      }
     );
 
     // Log the user in and reload the page
@@ -37,7 +29,6 @@ export function EmailLoginForm(props: EmailLoginFormProps) {
       Cookies.set(TOKEN_COOKIE_NAME, response.token, {
         path: '/',
         expires: 30,
-        domain: import.meta.env.DEV ? 'localhost' : '.roadmap.sh',
       });
       window.location.reload();
 
@@ -47,13 +38,12 @@ export function EmailLoginForm(props: EmailLoginFormProps) {
     // @todo use proper types
     if ((error as any).type === 'user_not_verified') {
       window.location.href = `/verification-pending?email=${encodeURIComponent(
-        email,
+        email
       )}`;
       return;
     }
 
     setIsLoading(false);
-    setIsDisabled?.(false);
     setError(error?.message || 'Something went wrong. Please try again later.');
   };
 
@@ -86,7 +76,7 @@ export function EmailLoginForm(props: EmailLoginFormProps) {
         onInput={(e) => setPassword(String((e.target as any).value))}
       />
 
-      <p className="mb-3 mt-2 text-sm text-gray-500">
+      <p class="mb-3 mt-2 text-sm text-gray-500">
         <a
           href="/forgot-password"
           className="text-blue-800 hover:text-blue-600"
@@ -101,11 +91,13 @@ export function EmailLoginForm(props: EmailLoginFormProps) {
 
       <button
         type="submit"
-        disabled={isLoading || isDisabled}
+        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,14 +1,8 @@
-import { type FormEvent, useState } from 'react';
+import type { FunctionComponent } from 'preact';
+import { useState } from 'preact/hooks';
 import { httpPost } from '../../lib/http';
 
-type EmailSignupFormProps = {
-  isDisabled?: boolean;
-  setIsDisabled?: (isDisabled: boolean) => void;
-};
-
-export function EmailSignupForm(props: EmailSignupFormProps) {
-  const { isDisabled, setIsDisabled } = props;
-
+const EmailSignupForm: FunctionComponent = () => {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [name, setName] = useState('');
@@ -16,11 +10,10 @@ export function EmailSignupForm(props: EmailSignupFormProps) {
   const [error, setError] = useState('');
   const [isLoading, setIsLoading] = useState(false);
 
-  const onSubmit = async (e: FormEvent<HTMLFormElement>) => {
+  const onSubmit = async (e: Event) => {
     e.preventDefault();
 
     setIsLoading(true);
-    setIsDisabled?.(true);
     setError('');
 
     const { response, error } = await httpPost<{ status: 'ok' }>(
@@ -29,21 +22,20 @@ export function EmailSignupForm(props: EmailSignupFormProps) {
         email,
         password,
         name,
-      },
+      }
     );
 
     if (error || response?.status !== 'ok') {
       setIsLoading(false);
-      setIsDisabled?.(false);
       setError(
-        error?.message || 'Something went wrong. Please try again later.',
+        error?.message || 'Something went wrong. Please try again later.'
       );
 
       return;
     }
 
     window.location.href = `/verification-pending?email=${encodeURIComponent(
-      email,
+      email
     )}`;
   };
 
@@ -99,11 +91,13 @@ export function EmailSignupForm(props: EmailSignupFormProps) {
 
       <button
         type="submit"
-        disabled={isLoading || isDisabled}
+        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,4 +1,4 @@
-import { type FormEvent, useState } from 'react';
+import { useState } from 'preact/hooks';
 import { httpPost } from '../../lib/http';
 
 export function ForgotPasswordForm() {
@@ -7,7 +7,7 @@ export function ForgotPasswordForm() {
   const [error, setError] = useState('');
   const [success, setSuccess] = useState('');
 
-  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
+  const handleSubmit = async (e: Event) => {
     e.preventDefault();
     setIsLoading(true);
     setError('');
@@ -29,7 +29,7 @@ export function ForgotPasswordForm() {
   };
 
   return (
-    <form onSubmit={handleSubmit} className="w-full">
+    <form onSubmit={handleSubmit} class="w-full">
       <input
         type="email"
         name="email"

src/components/AuthenticationFlow/GitHubButton.tsx

@@ -1,23 +1,20 @@
-import { useEffect, useState } from 'react';
-import { GitHubIcon } from '../ReactIcons/GitHubIcon.tsx';
+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';
-import { Spinner } from '../ReactIcons/Spinner.tsx';
 
-type GitHubButtonProps = {
-  isDisabled?: boolean;
-  setIsDisabled?: (isDisabled: boolean) => void;
-};
+type GitHubButtonProps = {};
 
 const GITHUB_REDIRECT_AT = 'githubRedirectAt';
 const GITHUB_LAST_PAGE = 'githubLastPage';
 
 export function GitHubButton(props: GitHubButtonProps) {
-  const { isDisabled, setIsDisabled } = props;
-
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState('');
+  const icon = isLoading ? SpinnerIcon : GitHubIcon;
 
   useEffect(() => {
     const urlParams = new URLSearchParams(window.location.search);
@@ -30,18 +27,16 @@ export function GitHubButton(props: GitHubButtonProps) {
     }
 
     setIsLoading(true);
-    setIsDisabled?.(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);
-          setIsDisabled?.(false);
 
           return;
         }
@@ -62,54 +57,43 @@ export function GitHubButton(props: GitHubButtonProps) {
           }
         }
 
-        const authRedirectUrl = localStorage.getItem('authRedirect');
-        if (authRedirectUrl) {
-          localStorage.removeItem('authRedirect');
-          redirectUrl = authRedirectUrl;
-        }
-
         localStorage.removeItem(GITHUB_REDIRECT_AT);
         localStorage.removeItem(GITHUB_LAST_PAGE);
         Cookies.set(TOKEN_COOKIE_NAME, response.token, {
           path: '/',
           expires: 30,
-          domain: import.meta.env.DEV ? 'localhost' : '.roadmap.sh',
         });
         window.location.href = redirectUrl;
       })
       .catch((err) => {
         setError('Something went wrong. Please try again later.');
         setIsLoading(false);
-        setIsDisabled?.(false);
       });
   }, []);
 
   const handleClick = async () => {
     setIsLoading(true);
-    setIsDisabled?.(true);
 
     const { response, error } = await httpGet<{ loginUrl: string }>(
-      `${import.meta.env.PUBLIC_API_URL}/v1-github-login`,
+      `${import.meta.env.PUBLIC_API_URL}/v1-github-login`
     );
 
     if (error || !response?.loginUrl) {
       setError(
-        error?.message || 'Something went wrong. Please try again later.',
+        error?.message || 'Something went wrong. Please try again later.'
       );
 
       setIsLoading(false);
-      setIsDisabled?.(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 = ['/respond-invite', '/befriend'].includes(
-        window.location.pathname,
-      )
-        ? window.location.pathname + window.location.search
-        : window.location.pathname;
+      const pagePath =
+        ['/respond-invite', '/befriend'].includes(window.location.pathname)
+          ? window.location.pathname + window.location.search
+          : window.location.pathname;
 
       localStorage.setItem(GITHUB_REDIRECT_AT, Date.now().toString());
       localStorage.setItem(GITHUB_LAST_PAGE, pagePath);
@@ -121,15 +105,15 @@ export function GitHubButton(props: GitHubButtonProps) {
   return (
     <>
       <button
-        className="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 || isDisabled}
+        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}
       >
-        {isLoading ? (
-          <Spinner className={'h-[18px] w-[18px]'} isDualRing={false} />
-        ) : (
-          <GitHubIcon className={'h-[18px] w-[18px]'} />
-        )}
+        <img
+          src={icon}
+          alt="GitHub"
+          class={`h-[18px] w-[18px] ${isLoading ? 'animate-spin' : ''}`}
+        />
         Continue with GitHub
       </button>
       {error && (

src/components/AuthenticationFlow/GoogleButton.tsx

@@ -1,23 +1,19 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState } from 'preact/hooks';
 import Cookies from 'js-cookie';
+import GoogleIcon from '../../icons/google.svg';
+import SpinnerIcon from '../../icons/spinner.svg';
 import { TOKEN_COOKIE_NAME } from '../../lib/jwt';
 import { httpGet } from '../../lib/http';
-import { Spinner } from '../ReactIcons/Spinner.tsx';
-import { GoogleIcon } from '../ReactIcons/GoogleIcon.tsx';
 
-type GoogleButtonProps = {
-  isDisabled?: boolean;
-  setIsDisabled?: (isDisabled: boolean) => void;
-};
+type GoogleButtonProps = {};
 
 const GOOGLE_REDIRECT_AT = 'googleRedirectAt';
 const GOOGLE_LAST_PAGE = 'googleLastPage';
 
 export function GoogleButton(props: GoogleButtonProps) {
-  const { isDisabled, setIsDisabled } = props;
-
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState('');
+  const icon = isLoading ? SpinnerIcon : GoogleIcon;
 
   useEffect(() => {
     const urlParams = new URLSearchParams(window.location.search);
@@ -30,17 +26,15 @@ export function GoogleButton(props: GoogleButtonProps) {
     }
 
     setIsLoading(true);
-    setIsDisabled?.(true);
     httpGet<{ token: string }>(
       `${import.meta.env.PUBLIC_API_URL}/v1-google-callback${
         window.location.search
-      }`,
+      }`
     )
       .then(({ response, error }) => {
         if (!response?.token) {
           setError(error?.message || 'Something went wrong.');
           setIsLoading(false);
-          setIsDisabled?.(false);
 
           return;
         }
@@ -61,39 +55,29 @@ export function GoogleButton(props: GoogleButtonProps) {
           }
         }
 
-        const authRedirectUrl = localStorage.getItem('authRedirect');
-        if (authRedirectUrl) {
-          localStorage.removeItem('authRedirect');
-          redirectUrl = authRedirectUrl;
-        }
-
         localStorage.removeItem(GOOGLE_REDIRECT_AT);
         localStorage.removeItem(GOOGLE_LAST_PAGE);
         Cookies.set(TOKEN_COOKIE_NAME, response.token, {
           path: '/',
           expires: 30,
-          domain: import.meta.env.DEV ? 'localhost' : '.roadmap.sh',
         });
         window.location.href = redirectUrl;
       })
       .catch((err) => {
         setError('Something went wrong. Please try again later.');
         setIsLoading(false);
-        setIsDisabled?.(false);
       });
   }, []);
 
   const handleClick = () => {
     setIsLoading(true);
-    setIsDisabled?.(true);
     httpGet<{ loginUrl: string }>(
-      `${import.meta.env.PUBLIC_API_URL}/v1-google-login`,
+      `${import.meta.env.PUBLIC_API_URL}/v1-google-login`
     )
       .then(({ response, error }) => {
         if (!response?.loginUrl) {
           setError(error?.message || 'Something went wrong.');
           setIsLoading(false);
-          setIsDisabled?.(false);
 
           return;
         }
@@ -101,11 +85,10 @@ export function GoogleButton(props: GoogleButtonProps) {
         // 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 = ['/respond-invite', '/befriend'].includes(
-            window.location.pathname,
-          )
-            ? window.location.pathname + window.location.search
-            : window.location.pathname;
+          const pagePath =
+            ['/respond-invite', '/befriend'].includes(window.location.pathname)
+              ? window.location.pathname + window.location.search
+              : window.location.pathname;
 
           localStorage.setItem(GOOGLE_REDIRECT_AT, Date.now().toString());
           localStorage.setItem(GOOGLE_LAST_PAGE, pagePath);
@@ -116,22 +99,21 @@ export function GoogleButton(props: GoogleButtonProps) {
       .catch((err) => {
         setError('Something went wrong. Please try again later.');
         setIsLoading(false);
-        setIsDisabled?.(false);
       });
   };
 
   return (
     <>
       <button
-        className="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 || isDisabled}
+        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}
       >
-        {isLoading ? (
-          <Spinner className={'h-[18px] w-[18px]'} isDualRing={false} />
-        ) : (
-          <GoogleIcon className={'h-[18px] w-[18px]'} />
-        )}
+        <img
+          src={icon}
+          alt="Google"
+          class={`h-[18px] w-[18px] ${isLoading ? 'animate-spin' : ''}`}
+        />
         Continue with Google
       </button>
       {error && (

src/components/AuthenticationFlow/LinkedInButton.tsx

@@ -1,23 +1,19 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState } from 'preact/hooks';
 import Cookies from 'js-cookie';
+import LinkedIn from '../../icons/linkedin.svg';
+import SpinnerIcon from '../../icons/spinner.svg';
 import { TOKEN_COOKIE_NAME } from '../../lib/jwt';
 import { httpGet } from '../../lib/http';
-import { Spinner } from '../ReactIcons/Spinner.tsx';
-import { LinkedInIcon } from '../ReactIcons/LinkedInIcon.tsx';
 
-type LinkedInButtonProps = {
-  isDisabled?: boolean;
-  setIsDisabled?: (isDisabled: boolean) => void;
-};
+type LinkedInButtonProps = {};
 
 const LINKEDIN_REDIRECT_AT = 'linkedInRedirectAt';
 const LINKEDIN_LAST_PAGE = 'linkedInLastPage';
 
 export function LinkedInButton(props: LinkedInButtonProps) {
-  const { isDisabled, setIsDisabled } = props;
-
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState('');
+  const icon = isLoading ? SpinnerIcon : LinkedIn;
 
   useEffect(() => {
     const urlParams = new URLSearchParams(window.location.search);
@@ -30,17 +26,15 @@ export function LinkedInButton(props: LinkedInButtonProps) {
     }
 
     setIsLoading(true);
-    setIsDisabled?.(true);
     httpGet<{ token: string }>(
       `${import.meta.env.PUBLIC_API_URL}/v1-linkedin-callback${
         window.location.search
-      }`,
+      }`
     )
       .then(({ response, error }) => {
         if (!response?.token) {
           setError(error?.message || 'Something went wrong.');
           setIsLoading(false);
-          setIsDisabled?.(false);
 
           return;
         }
@@ -61,39 +55,29 @@ export function LinkedInButton(props: LinkedInButtonProps) {
           }
         }
 
-        const authRedirectUrl = localStorage.getItem('authRedirect');
-        if (authRedirectUrl) {
-          localStorage.removeItem('authRedirect');
-          redirectUrl = authRedirectUrl;
-        }
-
         localStorage.removeItem(LINKEDIN_REDIRECT_AT);
         localStorage.removeItem(LINKEDIN_LAST_PAGE);
         Cookies.set(TOKEN_COOKIE_NAME, response.token, {
           path: '/',
           expires: 30,
-          domain: import.meta.env.DEV ? 'localhost' : '.roadmap.sh',
         });
         window.location.href = redirectUrl;
       })
       .catch((err) => {
         setError('Something went wrong. Please try again later.');
         setIsLoading(false);
-        setIsDisabled?.(false);
       });
   }, []);
 
   const handleClick = () => {
     setIsLoading(true);
-    setIsDisabled?.(true);
     httpGet<{ loginUrl: string }>(
-      `${import.meta.env.PUBLIC_API_URL}/v1-linkedin-login`,
+      `${import.meta.env.PUBLIC_API_URL}/v1-linkedin-login`
     )
       .then(({ response, error }) => {
         if (!response?.loginUrl) {
           setError(error?.message || 'Something went wrong.');
           setIsLoading(false);
-          setIsDisabled?.(false);
 
           return;
         }
@@ -101,11 +85,10 @@ export function LinkedInButton(props: LinkedInButtonProps) {
         // 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 = ['/respond-invite', '/befriend'].includes(
-            window.location.pathname,
-          )
-            ? window.location.pathname + window.location.search
-            : window.location.pathname;
+          const pagePath =
+            ['/respond-invite', '/befriend'].includes(window.location.pathname)
+              ? window.location.pathname + window.location.search
+              : window.location.pathname;
 
           localStorage.setItem(LINKEDIN_REDIRECT_AT, Date.now().toString());
           localStorage.setItem(LINKEDIN_LAST_PAGE, pagePath);
@@ -116,22 +99,21 @@ export function LinkedInButton(props: LinkedInButtonProps) {
       .catch((err) => {
         setError('Something went wrong. Please try again later.');
         setIsLoading(false);
-        setIsDisabled?.(false);
       });
   };
 
   return (
     <>
       <button
-        className="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 || isDisabled}
+        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}
       >
-        {isLoading ? (
-          <Spinner className={'h-[18px] w-[18px]'} isDualRing={false} />
-        ) : (
-          <LinkedInIcon className={'h-[18px] w-[18px]'} />
-        )}
+        <img
+          src={icon}
+          alt="Google"
+          class={`h-[18px] w-[18px] ${isLoading ? 'animate-spin' : ''}`}
+        />
         Continue with LinkedIn
       </button>
       {error && (

src/components/AuthenticationFlow/LoginPopup.astro

@@ -1,20 +1,34 @@
 ---
 import Popup from '../Popup/Popup.astro';
-import { AuthenticationForm } from './AuthenticationForm';
+import EmailLoginForm from './EmailLoginForm';
+import Divider from './Divider.astro';
+import { GitHubButton } from './GitHubButton';
+import { GoogleButton } from './GoogleButton';
+import { LinkedInButton } from './LinkedInButton';
 ---
 
 <Popup id='login-popup' title='' subtitle=''>
-  <div class='mb-7 text-center'>
-    <p class='mb-3 text-2xl font-semibold leading-5 text-slate-900'>
+  <div class='text-center'>
+    <h2 class='mb-3 text-2xl font-semibold leading-5 text-slate-900'>
       Login to your account
-    </p>
+    </h2>
     <p class='mt-2 text-sm leading-4 text-slate-600'>
       You must be logged in to perform this action.
     </p>
   </div>
-  <AuthenticationForm client:load />
+
+  <div class='mt-7 flex flex-col gap-2'>
+    <GitHubButton client:load />
+    <GoogleButton client:load />
+    <LinkedInButton client:load />
+  </div>
+
+  <Divider />
+
+  <EmailLoginForm client:load />
+
   <div class='mt-6 text-center text-sm text-slate-600'>
     Don't have an account?{' '}
-    <a href='/signup' class='font-medium text-[#4285f4]'> Sign up</a>
+    <a href='/signup' class='font-medium text-[#4285f4]'>Sign up</a>
   </div>
 </Popup>

src/components/AuthenticationFlow/ResetPasswordForm.tsx

@@ -1,9 +1,9 @@
-import { type FormEvent, useEffect, useState } from 'react';
+import { useEffect, useState } from 'preact/hooks';
 import { httpPost } from '../../lib/http';
 import Cookies from 'js-cookie';
 import { TOKEN_COOKIE_NAME } from '../../lib/jwt';
 
-export function ResetPasswordForm() {
+export default function ResetPasswordForm() {
   const [code, setCode] = useState('');
   const [password, setPassword] = useState('');
   const [passwordConfirm, setPasswordConfirm] = useState('');
@@ -21,7 +21,7 @@ export function ResetPasswordForm() {
     }
   }, []);
 
-  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
+  const handleSubmit = async (e: Event) => {
     e.preventDefault();
     setIsLoading(true);
 
@@ -56,7 +56,6 @@ export function ResetPasswordForm() {
     Cookies.set(TOKEN_COOKIE_NAME, token, {
       path: '/',
       expires: 30,
-      domain: import.meta.env.DEV ? 'localhost' : '.roadmap.sh',
     });
     window.location.href = '/';
   };

src/components/AuthenticationFlow/TriggerVerifyAccount.tsx

@@ -1,9 +1,10 @@
-import { useEffect, useState } from 'react';
+import SpinnerIcon from '../../icons/spinner.svg';
+import ErrorIcon from '../../icons/error.svg';
+
+import { useEffect, useState } from 'preact/hooks';
 import Cookies from 'js-cookie';
-import { httpPost } from '../../lib/http';
 import { TOKEN_COOKIE_NAME } from '../../lib/jwt';
-import { Spinner } from '../ReactIcons/Spinner';
-import { ErrorIcon2 } from '../ReactIcons/ErrorIcon2';
+import { httpPost } from '../../lib/http';
 
 export function TriggerVerifyAccount() {
   const [isLoading, setIsLoading] = useState(true);
@@ -16,7 +17,7 @@ export function TriggerVerifyAccount() {
       `${import.meta.env.PUBLIC_API_URL}/v1-verify-account`,
       {
         code,
-      },
+      }
     )
       .then(({ response, error }) => {
         if (!response?.token) {
@@ -29,7 +30,6 @@ export function TriggerVerifyAccount() {
         Cookies.set(TOKEN_COOKIE_NAME, response.token, {
           path: '/',
           expires: 30,
-          domain: import.meta.env.DEV ? 'localhost' : '.roadmap.sh',
         });
         window.location.href = '/';
       })
@@ -55,14 +55,26 @@ export function TriggerVerifyAccount() {
   return (
     <div className="mx-auto flex max-w-md flex-col items-center pt-0 sm:pt-12">
       <div className="mx-auto max-w-md text-center">
-        {isLoading && <Spinner className="mx-auto h-16 w-16" />}
-        {error && <ErrorIcon2 className="mx-auto h-16 w-16" />}
+        {isLoading && (
+          <img
+            alt={'Please wait.'}
+            src={SpinnerIcon}
+            class={'mx-auto h-16 w-16 animate-spin'}
+          />
+        )}
+        {error && (
+          <img
+            alt={'Please wait.'}
+            src={ErrorIcon}
+            className={'mx-auto h-16 w-16'}
+          />
+        )}
         <h2 className="mb-1 mt-4 text-center text-xl font-semibold sm:mb-3 sm:mt-4 sm:text-2xl">
           Verifying your account
         </h2>
         <div className="text-sm sm:text-base">
           {isLoading && <p>Please wait while we verify your account..</p>}
-          {error && <p className="text-red-700">{error}</p>}
+          {error && <p class="text-red-700">{error}</p>}
         </div>
       </div>
     </div>

src/components/AuthenticationFlow/VerificationEmailMessage.tsx

@@ -1,6 +1,6 @@
-import { useEffect, useState } from 'react';
+import VerifyLetterIcon from '../../icons/verify-letter.svg';
+import { useEffect, useState } from 'preact/hooks';
 import { httpPost } from '../../lib/http';
-import { VerifyLetterIcon } from '../ReactIcons/VerifyLetterIcon';
 
 export function VerificationEmailMessage() {
   const [email, setEmail] = useState('..');
@@ -37,11 +37,15 @@ export function VerificationEmailMessage() {
 
   return (
     <div className="mx-auto max-w-md text-center">
-      <VerifyLetterIcon className="mx-auto mb-4 h-20 w-40 sm:h-40" />
-      <h2 className="my-2 text-center text-xl font-semibold sm:my-5 sm:text-2xl">
+      <img
+        alt="Verify Email"
+        src={VerifyLetterIcon}
+        class="mx-auto mb-4 h-20 w-40 sm:h-40"
+      />
+      <h2 class="my-2 text-center text-xl font-semibold sm:my-5 sm:text-2xl">
         Verify your email address
       </h2>
-      <div className="text-sm sm:text-base">
+      <div class="text-sm sm:text-base">
         <p>
           We have sent you an email at{' '}
           <span className="font-bold">{email}</span>. Please click the link to
@@ -49,7 +53,7 @@ export function VerificationEmailMessage() {
           soon!
         </p>
 
-        <hr className="my-4" />
+        <hr class="my-4" />
 
         {!isEmailResent && (
           <>
@@ -68,12 +72,12 @@ export function VerificationEmailMessage() {
               </p>
             )}
 
-            {error && <p className="text-red-700">{error}</p>}
+            {error && <p class="text-red-700">{error}</p>}
           </>
         )}
 
         {isEmailResent && (
-          <p className="text-green-700">Verification email has been sent!</p>
+          <p class="text-green-700">Verification email has been sent!</p>
         )}
       </div>
     </div>

src/components/Authenticator/authenticator.ts

@@ -36,7 +36,6 @@ function handleGuest() {
     '/account/notification',
     '/account/update-password',
     '/account/settings',
-    '/account/roadmaps',
     '/account/road-card',
     '/account/friends',
     '/account',
@@ -73,10 +72,7 @@ function handleAuthenticated() {
 
   // If the user is on a guest route, redirect them to the home page
   if (guestRoutes.includes(window.location.pathname)) {
-    const authRedirect = window.localStorage.getItem('authRedirect') || '/';
-    window.localStorage.removeItem('authRedirect');
-
-    window.location.href = authRedirect;
+    window.location.href = '/';
   }
 }
 

src/components/Befriend.tsx

@@ -1,5 +1,5 @@
-import { useEffect, useState } from 'react';
-import { httpDelete, httpGet, httpPost } from '../lib/http';
+import { useEffect, useState } from 'preact/hooks';
+import { httpDelete, httpGet, httpPatch, httpPost } from '../lib/http';
 import { pageProgressMessage } from '../stores/page';
 import { isLoggedIn } from '../lib/jwt';
 import { showLoginPopup } from '../lib/popup';
@@ -118,7 +118,7 @@ export function Befriend() {
         <ErrorIcon additionalClasses="mx-auto mb-4 mt-24 w-20 opacity-20" />
 
         <h2 className={'mb-1 text-2xl font-bold'}>Error</h2>
-        <p className="mb-4 text-base leading-6 text-gray-600">
+        <p class="mb-4 text-base leading-6 text-gray-600">
           {error || 'There was a problem, please try again.'}
         </p>
 
@@ -141,7 +141,7 @@ export function Befriend() {
   const isMe = currentUser?.id === user.id;
 
   return (
-    <div className="container !max-w-[400px] text-center">
+    <div className="container max-w-[400px] text-center">
       <img
         alt={'join team'}
         src={userAvatar}
@@ -149,13 +149,13 @@ export function Befriend() {
       />
 
       <h2 className={'mb-1 text-3xl font-bold'}>{user.name}</h2>
-      <p className="mb-6 text-base leading-6 text-gray-600">
+      <p class="mb-6 text-base leading-6 text-gray-600">
         After you add {user.name} as a friend, you will be able to view each
         other's skills and progress.
       </p>
 
-      <div className="mx-auto w-full duration-500 sm:max-w-md">
-        <div className="flex w-full flex-col items-center gap-2">
+      <div class="mx-auto w-full duration-500 sm:max-w-md">
+        <div class="flex w-full flex-col items-center gap-2">
           {user.status === 'none' && (
             <button
               disabled={isMe}
@@ -169,7 +169,7 @@ export function Befriend() {
                 });
               }}
               type="button"
-              className="w-full flex-grow cursor-pointer rounded-lg bg-black px-3 py-2 text-center text-white disabled:cursor-not-allowed disabled:opacity-40"
+              class="w-full flex-grow cursor-pointer rounded-lg bg-black px-3 py-2 text-center text-white disabled:cursor-not-allowed disabled:opacity-40"
             >
               {isMe ? "You can't add yourself" : 'Add Friend'}
             </button>
@@ -177,7 +177,7 @@ export function Befriend() {
 
           {user.status === 'sent' && (
             <>
-              <span className="flex w-full flex-grow cursor-default items-center justify-center rounded-lg border  border-gray-300 px-3 py-2 text-center text-black">
+              <span class="flex w-full flex-grow cursor-default items-center justify-center rounded-lg border  border-gray-300 px-3 py-2 text-center text-black">
                 <CheckIcon additionalClasses="mr-2 h-4 w-4" />
                 Request Sent
               </span>
@@ -188,7 +188,7 @@ export function Befriend() {
                     setIsConfirming(true);
                   }}
                   type="button"
-                  className="flex w-full flex-grow cursor-pointer items-center justify-center rounded-lg border border-red-600 bg-red-600 px-3 py-2 text-center text-white hover:bg-red-700"
+                  class="flex w-full flex-grow cursor-pointer items-center justify-center rounded-lg border border-red-600 bg-red-600 px-3 py-2 text-center text-white hover:bg-red-700"
                 >
                   <DeleteUserIcon additionalClasses="mr-2 h-[19px] w-[19px]" />
                   Withdraw Request
@@ -196,7 +196,7 @@ export function Befriend() {
               )}
 
               {isConfirming && (
-                <span className="flex w-full flex-grow cursor-default items-center justify-center rounded-lg border border-red-600 px-3 py-2.5 text-center text-sm text-red-600">
+                <span class="flex w-full flex-grow cursor-default items-center justify-center rounded-lg border border-red-600 px-3 py-2.5 text-center text-sm text-red-600">
                   Are you sure?{' '}
                   <button
                     className="ml-2 text-red-700 underline"
@@ -225,7 +225,7 @@ export function Befriend() {
 
           {user.status === 'accepted' && (
             <>
-              <span className="flex w-full flex-grow cursor-default items-center justify-center rounded-lg border  border-gray-300 px-3 py-2 text-center text-black">
+              <span class="flex w-full flex-grow cursor-default items-center justify-center rounded-lg border  border-gray-300 px-3 py-2 text-center text-black">
                 <AddedUserIcon additionalClasses="mr-2 h-5 w-5" />
                 You are friends
               </span>
@@ -236,7 +236,7 @@ export function Befriend() {
                     setIsConfirming(true);
                   }}
                   type="button"
-                  className="flex w-full flex-grow cursor-pointer items-center justify-center rounded-lg border border-red-600 bg-red-600 px-3 py-2 text-center text-white hover:bg-red-700"
+                  class="flex w-full flex-grow cursor-pointer items-center justify-center rounded-lg border border-red-600 bg-red-600 px-3 py-2 text-center text-white hover:bg-red-700"
                 >
                   <DeleteUserIcon additionalClasses="mr-2 h-[19px] w-[19px]" />
                   Remove Friend
@@ -244,7 +244,7 @@ export function Befriend() {
               )}
 
               {isConfirming && (
-                <span className="flex w-full flex-grow cursor-default items-center justify-center rounded-lg border border-red-600 px-3 py-2.5 text-center text-sm text-red-600">
+                <span class="flex w-full flex-grow cursor-default items-center justify-center rounded-lg border border-red-600 px-3 py-2.5 text-center text-sm text-red-600">
                   Are you sure?{' '}
                   <button
                     className="ml-2 text-red-700 underline"
@@ -271,12 +271,12 @@ export function Befriend() {
 
           {user.status === 'rejected' && (
             <>
-              <span className="flex w-full flex-grow cursor-default items-center justify-center rounded-lg border border-gray-300 px-3 py-2 text-center text-black">
+              <span class="flex w-full flex-grow cursor-default items-center justify-center rounded-lg border border-gray-300 px-3 py-2 text-center text-black">
                 <DeleteUserIcon additionalClasses="mr-2 h-4 w-4" />
                 Request Rejected
               </span>
 
-              <span className="flex w-full flex-grow cursor-default items-center justify-center rounded-lg border border-red-600 px-3 py-2.5 text-center text-sm text-red-600">
+              <span class="flex w-full flex-grow cursor-default items-center justify-center rounded-lg border border-red-600 px-3 py-2.5 text-center text-sm text-red-600">
                 Changed your mind?{' '}
                 <button
                   className="ml-2 text-red-700 underline"
@@ -296,7 +296,7 @@ export function Befriend() {
 
           {user.status === 'got_rejected' && (
             <>
-              <span className="flex w-full flex-grow cursor-default items-center justify-center rounded-lg border border-red-500 px-3 py-2 text-center text-red-500">
+              <span class="flex w-full flex-grow cursor-default items-center justify-center rounded-lg border border-red-500 px-3 py-2 text-center text-red-500">
                 <StopIcon additionalClasses="mr-2 h-4 w-4" />
                 Request Rejected
               </span>
@@ -311,7 +311,7 @@ export function Befriend() {
                     pageProgressMessage.set('');
                   });
                 }}
-                className="flex w-full flex-grow cursor-pointer items-center justify-center rounded-lg border  border-gray-800 bg-gray-800 px-3 py-2 text-center text-white hover:bg-black"
+                class="flex w-full flex-grow cursor-pointer items-center justify-center rounded-lg border  border-gray-800 bg-gray-800 px-3 py-2 text-center text-white hover:bg-black"
               >
                 <CheckIcon additionalClasses="mr-2 h-4 w-4" />
                 Accept Request
@@ -323,7 +323,7 @@ export function Befriend() {
                     setIsConfirming(true);
                   }}
                   type="button"
-                  className="flex w-full flex-grow cursor-pointer items-center justify-center rounded-lg border border-red-600 bg-white px-3 py-2 text-center text-red-600 hover:bg-red-100"
+                  class="flex w-full flex-grow cursor-pointer items-center justify-center rounded-lg border border-red-600 bg-white px-3 py-2 text-center text-red-600 hover:bg-red-100"
                 >
                   <DeleteUserIcon additionalClasses="mr-2 h-[19px] w-[19px]" />
                   Reject Request
@@ -331,7 +331,7 @@ export function Befriend() {
               )}
 
               {isConfirming && (
-                <span className="flex w-full flex-grow cursor-default items-center justify-center rounded-lg border border-red-600 px-3 py-2.5 text-center text-sm text-red-600">
+                <span class="flex w-full flex-grow cursor-default items-center justify-center rounded-lg border border-red-600 px-3 py-2.5 text-center text-sm text-red-600">
                   Are you sure?{' '}
                   <button
                     className="ml-2 text-red-700 underline"

src/components/Breadcrumbs.astro

@@ -0,0 +1,44 @@
+---
+import type { BreadcrumbItem } from '../lib/roadmap-topic';
+
+export interface Props {
+  breadcrumbs: BreadcrumbItem[];
+  roadmapId: string;
+}
+
+const { breadcrumbs, roadmapId } = Astro.props;
+---
+
+<div class='py-7 pb-6'>
+  <!-- Desktop breadcrumbs -->
+  <p class='text-gray-500 container hidden sm:block'>
+    {
+      breadcrumbs.map((breadcrumb, counter) => {
+        const isLast = counter === breadcrumbs.length - 1;
+
+        if (!isLast) {
+          return (
+            <>
+              <a class='hover:text-gray-800' href={`${breadcrumb.url}`}>
+                {breadcrumb.title}
+              </a>
+              <span>&nbsp;&middot;&nbsp;</span>
+            </>
+          );
+        }
+
+        return <span class='text-gray-400'>{breadcrumb.title}</span>;
+      })
+    }
+  </p>
+
+  <!-- Mobile breadcrums -->
+  <p class='container block sm:hidden'>
+    <a
+      class='bg-gray-500 py-1.5 px-3 rounded-md text-white text-xs sm:text-sm font-medium hover:bg-gray-600'
+      href={`/${roadmapId}`}
+    >
+      &larr; Back to Topics List
+    </a>
+  </p>
+</div>

src/components/CommandMenu/CommandMenu.tsx

@@ -1,47 +1,34 @@
-import {
-  Fragment,
-  type ReactElement,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
+import { useEffect, useRef, useState } from 'preact/hooks';
 import { useKeydown } from '../../hooks/use-keydown';
 import { useOutsideClick } from '../../hooks/use-outside-click';
+import BestPracticesIcon from '../../icons/best-practices.svg';
+import GuideIcon from '../../icons/guide.svg';
+import HomeIcon from '../../icons/home.svg';
+import RoadmapIcon from '../../icons/roadmap.svg';
+import UserIcon from '../../icons/user.svg';
+import GroupIcon from '../../icons/group.svg';
+import VideoIcon from '../../icons/video.svg';
 import { httpGet } from '../../lib/http';
 import { isLoggedIn } from '../../lib/jwt';
-import { BestPracticesIcon } from '../ReactIcons/BestPracticesIcon.tsx';
-import { UserIcon } from '../ReactIcons/UserIcon.tsx';
-import { GroupIcon } from '../ReactIcons/GroupIcon.tsx';
-import { RoadmapIcon } from '../ReactIcons/RoadmapIcon.tsx';
-import { ClipboardIcon } from '../ReactIcons/ClipboardIcon.tsx';
-import { GuideIcon } from '../ReactIcons/GuideIcon.tsx';
-import { HomeIcon } from '../ReactIcons/HomeIcon.tsx';
-import { VideoIcon } from '../ReactIcons/VideoIcon.tsx';
 
 export type PageType = {
   id: string;
   url: string;
   title: string;
   group: string;
-  icon?: ReactElement;
+  icon?: string;
   isProtected?: boolean;
   metadata?: Record<string, any>;
 };
 
 const defaultPages: PageType[] = [
-  {
-    id: 'home',
-    url: '/',
-    title: 'Home',
-    group: 'Pages',
-    icon: <HomeIcon className="mr-2 h-4 w-4 stroke-2" />,
-  },
+  { id: 'home', url: '/', title: 'Home', group: 'Pages', icon: HomeIcon },
   {
     id: 'account',
     url: '/account',
     title: 'Account',
     group: 'Pages',
-    icon: <UserIcon className="mr-2 h-4 w-4 stroke-2" />,
+    icon: UserIcon,
     isProtected: true,
   },
   {
@@ -49,15 +36,7 @@ const defaultPages: PageType[] = [
     url: '/team',
     title: 'Teams',
     group: 'Pages',
-    icon: <GroupIcon className="mr-2 h-4 w-4 stroke-2" />,
-    isProtected: true,
-  },
-  {
-    id: 'friends',
-    url: '/account/friends',
-    title: 'Friends',
-    group: 'Pages',
-    icon: <GroupIcon className="mr-2 h-4 w-4 stroke-2" />,
+    icon: GroupIcon,
     isProtected: true,
   },
   {
@@ -65,43 +44,28 @@ const defaultPages: PageType[] = [
     url: '/roadmaps',
     title: 'Roadmaps',
     group: 'Pages',
-    icon: <RoadmapIcon className="mr-2 h-4 w-4 stroke-2" />,
-  },
-  {
-    id: 'account-roadmaps',
-    url: '/account/roadmaps',
-    title: 'Custom Roadmaps',
-    group: 'Pages',
-    icon: <RoadmapIcon className="mr-2 h-4 w-4 stroke-2" />,
-    isProtected: true,
+    icon: RoadmapIcon,
   },
   {
     id: 'best-practices',
     url: '/best-practices',
     title: 'Best Practices',
     group: 'Pages',
-    icon: <BestPracticesIcon className="mr-2 h-4 w-4 stroke-2" />,
-  },
-  {
-    id: 'questions',
-    url: '/questions',
-    title: 'Questions',
-    group: 'Pages',
-    icon: <ClipboardIcon className="mr-2 h-4 w-4 stroke-2" />,
+    icon: BestPracticesIcon,
   },
   {
     id: 'guides',
     url: '/guides',
     title: 'Guides',
     group: 'Pages',
-    icon: <GuideIcon className="mr-2 h-4 w-4 stroke-2" />,
+    icon: GuideIcon,
   },
   {
     id: 'videos',
     url: '/videos',
     title: 'Videos',
     group: 'Pages',
-    icon: <VideoIcon className="mr-2 h-4 w-4 stroke-2" />,
+    icon: VideoIcon,
   },
 ];
 
@@ -194,12 +158,12 @@ export function CommandMenu() {
         <div className="relative rounded-lg bg-white shadow" ref={modalRef}>
           <input
             ref={inputRef}
-            autoFocus={true}
+            autofocus={true}
             type="text"
             value={searchedText}
             className="w-full rounded-t-md border-b p-4 text-sm focus:bg-gray-50 focus:outline-none"
             placeholder="Search roadmaps, guides or pages .."
-            autoComplete="off"
+            autocomplete="off"
             onInput={(e) => {
               const value = (e.target as HTMLInputElement).value.trim();
               setSearchedText(value);
@@ -211,7 +175,7 @@ export function CommandMenu() {
               } else if (e.key === 'ArrowUp') {
                 const canGoPrev = activeCounter > 0;
                 setActiveCounter(
-                  canGoPrev ? activeCounter - 1 : searchResults.length - 1,
+                  canGoPrev ? activeCounter - 1 : searchResults.length - 1
                 );
               } else if (e.key === 'Tab') {
                 e.preventDefault();
@@ -227,37 +191,39 @@ export function CommandMenu() {
             }}
           />
 
-          <div className="px-2 py-2">
+          <div class="px-2 py-2">
             <div className="flex flex-col">
               {searchResults.length === 0 && (
-                <div className="p-5 text-center text-sm text-gray-400">
+                <div class="p-5 text-center text-sm text-gray-400">
                   No results found
                 </div>
               )}
 
-              {searchResults.map((page: PageType, counter: number) => {
+              {searchResults.map((page, counter) => {
                 const prevPage = searchResults[counter - 1];
                 const groupChanged = prevPage && prevPage.group !== page.group;
 
                 return (
-                  <Fragment key={page.id}>
+                  <>
                     {groupChanged && (
-                      <div className="border-b border-gray-100"></div>
+                      <div class="border-b border-gray-100"></div>
                     )}
                     <a
-                      className={`flex w-full items-center rounded p-2 text-sm ${
+                      class={`flex w-full items-center rounded p-2 text-sm ${
                         counter === activeCounter ? 'bg-gray-100' : ''
                       }`}
                       onMouseOver={() => setActiveCounter(counter)}
                       href={page.url}
                     >
                       {!page.icon && (
-                        <span className="mr-2 text-gray-400">{page.group}</span>
+                        <span class="mr-2 text-gray-400">{page.group}</span>
+                      )}
+                      {page.icon && (
+                        <img alt={page.title} src={page.icon} class="mr-2 h-4 w-4" />
                       )}
-                      {page.icon && page.icon}
                       {page.title}
                     </a>
-                  </Fragment>
+                  </>
                 );
               })}
             </div>

src/components/Confetti.tsx

@@ -1,69 +0,0 @@
-import { useEffect, useState } from 'react';
-import ReactConfetti from 'react-confetti';
-
-type ConfettiPosition = {
-  x: number;
-  y: number;
-  w: number;
-  h: number;
-};
-
-type ConfettiProps = {
-  pieces?: number;
-  element?: HTMLElement | null;
-  onDone?: () => void;
-};
-
-export function Confetti(props: ConfettiProps) {
-  const { element = document.body, onDone = () => null, pieces = 40 } = props;
-
-  const [confettiPos, setConfettiPos] = useState<
-    undefined | ConfettiPosition
-  >();
-
-  function populateConfettiPosition(element: HTMLElement) {
-    const elRect = element.getBoundingClientRect();
-
-    // set confetti position, keeping in mind the scroll values
-    setConfettiPos({
-      x: elRect?.x || 0,
-      y: (elRect?.y || 0) + window.scrollY,
-      w: elRect?.width || 0,
-      h: elRect?.height || 0,
-    });
-  }
-
-  useEffect(() => {
-    if (!element) {
-      setConfettiPos(undefined);
-      return;
-    }
-
-    populateConfettiPosition(element);
-  }, [element]);
-
-  if (!confettiPos) {
-    return null;
-  }
-
-  return (
-    <ReactConfetti
-      height={document.body.scrollHeight}
-      numberOfPieces={pieces}
-      recycle={false}
-      onConfettiComplete={(confettiInstance) => {
-        setConfettiPos(undefined);
-        onDone();
-      }}
-      initialVelocityX={4}
-      initialVelocityY={8}
-      tweenDuration={10}
-      confettiSource={{
-        x: confettiPos.x,
-        y: confettiPos.y,
-        w: confettiPos.w,
-        h: confettiPos.h,
-      }}
-    />
-  );
-}

src/components/CreateTeam/CreateTeamForm.tsx

@@ -1,7 +1,7 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState } from 'preact/hooks';
 import { Stepper } from '../Stepper';
-import { Step0, type ValidTeamType } from './Step0';
-import { Step1, type ValidTeamSize } from './Step1';
+import { Step0, ValidTeamType } from './Step0';
+import { Step1, ValidTeamSize } from './Step1';
 import { Step2 } from './Step2';
 import { httpGet } from '../../lib/http';
 import { getUrlParams, setUrlParams } from '../../lib/browser';

src/components/CreateTeam/NextButton.tsx

@@ -21,7 +21,7 @@ export function NextButton(props: NextButtonProps) {
 
   return (
     <button
-      type={type as any}
+      type={type}
       onClick={onClick}
       disabled={isLoading}
       className={

src/components/CreateTeam/NotDropdown.tsx

@@ -1,4 +1,4 @@
-import { ChevronDownIcon } from '../ReactIcons/ChevronDownIcon';
+import ChevronDownIcon from '../../icons/chevron-down.svg';
 
 type NotDropdownProps = {
   onClick: () => void;
@@ -37,7 +37,11 @@ export function NotDropdown(props: NotDropdownProps) {
         </div>
       )}
 
-      <ChevronDownIcon className="relative top-[1px] h-[17px] w-[17px] opacity-40" />
+      <img
+        alt={singularName}
+        src={ChevronDownIcon}
+        className={'relative top-[1px] h-[17px] w-[17px] opacity-40'}
+      />
     </div>
   );
 }

src/components/CreateTeam/RoadmapSelector.tsx

@@ -1,53 +1,37 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState } from 'preact/hooks';
 import { httpGet, httpPut } from '../../lib/http';
 import type { PageType } from '../CommandMenu/CommandMenu';
+import ChevronDownIcon from '../../icons/chevron-down.svg';
 import { pageProgressMessage } from '../../stores/page';
+import type { TeamDocument } from './CreateTeamForm';
 import { UpdateTeamResourceModal } from './UpdateTeamResourceModal';
 import { SelectRoadmapModal } from './SelectRoadmapModal';
-import { Map, Shapes } from 'lucide-react';
-import type {
-  AllowedRoadmapVisibility,
-  RoadmapDocument,
-} from '../CustomRoadmap/CreateRoadmap/CreateRoadmapModal';
-import { CreateRoadmapModal } from '../CustomRoadmap/CreateRoadmap/CreateRoadmapModal';
-import { useToast } from '../../hooks/use-toast';
+import { NotDropdown } from './NotDropdown';
 
 export type TeamResourceConfig = {
-  isCustomResource: boolean;
-  title: string;
-  description?: string;
-  visibility?: AllowedRoadmapVisibility;
   resourceId: string;
   resourceType: string;
   removed: string[];
-  topics?: number;
-  sharedTeamMemberIds: string[];
-  sharedFriendIds: string[];
 }[];
 
 type RoadmapSelectorProps = {
   teamId: string;
-  teamResources: TeamResourceConfig;
-  setTeamResources: (config: TeamResourceConfig) => void;
+  teamResourceConfig: TeamResourceConfig;
+  setTeamResourceConfig: (config: TeamResourceConfig) => void;
 };
 
 export function RoadmapSelector(props: RoadmapSelectorProps) {
-  const { teamId, teamResources = [], setTeamResources } = props;
+  const { teamId, teamResourceConfig = [], setTeamResourceConfig } = props;
 
-  const toast = useToast();
-  const [removingRoadmapId, setRemovingRoadmapId] = useState<string>('');
   const [showSelectRoadmapModal, setShowSelectRoadmapModal] = useState(false);
   const [allRoadmaps, setAllRoadmaps] = useState<PageType[]>([]);
   const [changingRoadmapId, setChangingRoadmapId] = useState<string>('');
-  const [isCreatingRoadmap, setIsCreatingRoadmap] = useState<boolean>(false);
-
   const [error, setError] = useState<string>('');
 
   async function loadAllRoadmaps() {
     const { error, response } = await httpGet<PageType[]>(`/pages.json`);
 
     if (error) {
-      toast.error(error.message || 'Something went wrong. Please try again!');
       setError(error.message || 'Something went wrong. Please try again!');
       return;
     }
@@ -88,7 +72,7 @@ export function RoadmapSelector(props: RoadmapSelectorProps) {
       return;
     }
 
-    setTeamResources(response);
+    setTeamResourceConfig(response);
   }
 
   async function onRemove(resourceId: string) {
@@ -122,25 +106,13 @@ export function RoadmapSelector(props: RoadmapSelectorProps) {
       return;
     }
 
-    setTeamResources(response);
+    setTeamResourceConfig(response);
   }
 
   useEffect(() => {
-    loadAllRoadmaps().finally(() => {});
+    loadAllRoadmaps().finally();
   }, []);
 
-  function handleCustomRoadmapCreated(roadmap: RoadmapDocument) {
-    const { _id: roadmapId } = roadmap;
-    if (!roadmapId) {
-      return;
-    }
-
-    loadAllRoadmaps().finally(() => {});
-    addTeamResource(roadmapId).finally(() => {
-      pageProgressMessage.set('');
-    });
-  }
-
   return (
     <div>
       {changingRoadmapId && (
@@ -149,9 +121,9 @@ export function RoadmapSelector(props: RoadmapSelectorProps) {
           resourceId={changingRoadmapId}
           resourceType={'roadmap'}
           teamId={teamId}
-          setTeamResourceConfig={setTeamResources}
+          setTeamResourceConfig={setTeamResourceConfig}
           defaultRemovedItems={
-            teamResources.find((c) => c.resourceId === changingRoadmapId)
+            teamResourceConfig.find((c) => c.resourceId === changingRoadmapId)
               ?.removed || []
           }
         />
@@ -159,7 +131,7 @@ export function RoadmapSelector(props: RoadmapSelectorProps) {
       {showSelectRoadmapModal && (
         <SelectRoadmapModal
           onClose={() => setShowSelectRoadmapModal(false)}
-          teamResourceConfig={teamResources}
+          teamResourceConfig={teamResourceConfig}
           allRoadmaps={allRoadmaps}
           teamId={teamId}
           onRoadmapAdd={(roadmapId) => {
@@ -173,170 +145,72 @@ export function RoadmapSelector(props: RoadmapSelectorProps) {
         />
       )}
 
-      <div className="my-3 flex items-center gap-4">
-        {isCreatingRoadmap && (
-          <CreateRoadmapModal
-            teamId={teamId}
-            onClose={() => setIsCreatingRoadmap(false)}
-            onCreated={(roadmap: RoadmapDocument) => {
-              handleCustomRoadmapCreated(roadmap);
-              setIsCreatingRoadmap(false);
-            }}
-          />
-        )}
-
-        <button
-          className="flex h-10 grow items-center justify-center gap-2 rounded-md border border-black bg-white text-black transition-colors hover:bg-black hover:text-white"
+      <div className="mt-3">
+        <NotDropdown
           onClick={() => {
             setShowSelectRoadmapModal(true);
           }}
-        >
-          <Map className="h-4 w-4 stroke-[2.5]" />
-          Pick from our roadmaps
-        </button>
-
-        <span className="text-base text-gray-400">or</span>
-
-        <button
-          className="flex h-10 grow items-center justify-center gap-2 rounded-md border border-black bg-white text-black transition-colors hover:bg-black hover:text-white"
-          onClick={() => {
-            setIsCreatingRoadmap(true);
-          }}
-        >
-          <Shapes className="h-4 w-4 stroke-[2.5]" />
-          Create Custom Roadmap
-        </button>
+          selectedCount={teamResourceConfig.length}
+          singularName={'roadmap'}
+          pluralName={'roadmaps'}
+        />
       </div>
 
-      {!teamResources.length && (
-        <div className="flex min-h-[240px] flex-col items-center justify-center rounded-lg border">
-          <Map className="mb-2 h-12 w-12 text-gray-300" />
-          <p className={'text-lg font-semibold'}>No roadmaps selected.</p>
-          <p className={'text-base text-gray-400'}>
-            Pick from{' '}
-            <span
-              onClick={() => setShowSelectRoadmapModal(true)}
-              className="cursor-pointer underline"
-            >
-              our roadmaps
-            </span>{' '}
-            or{' '}
-            <span
-              onClick={() => {
-                setIsCreatingRoadmap(true);
-              }}
-              className="cursor-pointer underline"
-            >
-              create a new one
-            </span>
-            .
-          </p>
-        </div>
+      {!teamResourceConfig.length && (
+        <p className={'mb-3 mt-2 text-base text-gray-400'}>
+          No roadmaps selected.
+        </p>
       )}
 
-      {teamResources.length > 0 && (
-        <div className="mb-3 grid grid-cols-1 flex-wrap gap-2.5 sm:grid-cols-3">
-          {teamResources.map(
-            ({
-              isCustomResource,
-              title: roadmapTitle,
-              resourceId,
-              removed: removedTopics,
-              topics,
-            }) => {
-              return (
-                <div
-                  className="relative flex flex-col items-start overflow-hidden rounded-md border border-gray-300"
-                  key={resourceId}
-                >
-                  <div className={'w-full flex-grow px-3 pb-2 pt-4'}>
-                    <span className="mb-0.5 block text-base font-medium leading-snug text-black">
-                      {roadmapTitle}
+      {teamResourceConfig.length > 0 && (
+        <div className="mt-4 grid grid-cols-1 sm:grid-cols-3 flex-wrap gap-2.5">
+          {teamResourceConfig.map(({ resourceId, removed: removedTopics }) => {
+            const roadmapTitle =
+              allRoadmaps.find((roadmap) => roadmap.id === resourceId)?.title ||
+              '...';
+
+            return (
+              <div className="flex flex-col items-start rounded-md border border-gray-300">
+                <div className={'w-full px-3 pb-2 pt-4'}>
+                  <span className="mb-0.5 block text-base font-medium leading-none text-black">
+                    {roadmapTitle}
+                  </span>
+                  {removedTopics.length > 0 ? (
+                    <span className={'text-xs leading-none text-gray-900'}>
+                      {removedTopics.length} topic
+                      {removedTopics.length > 1 ? 's' : ''} removed
+                    </span>
+                  ) : (
+                    <span className="text-xs italic leading-none text-gray-400/60">
+                      No changes made ..
                     </span>
-                    {removedTopics.length > 0 || (topics && topics > 0) ? (
-                      <span className={'text-xs leading-none text-gray-400'}>
-                        {isCustomResource ? (
-                          <>
-                            Custom &middot; {topics} topic
-                            {topics && topics > 1 ? 's' : ''}
-                          </>
-                        ) : (
-                          <>
-                            {removedTopics.length} topic
-                            {removedTopics.length > 1 ? 's' : ''} removed
-                          </>
-                        )}
-                      </span>
-                    ) : (
-                      <span className="text-xs italic leading-none text-gray-400/60">
-                        {isCustomResource
-                          ? 'Placeholder roadmap.'
-                          : 'No changes made ..'}
-                      </span>
-                    )}
-                  </div>
-
-                  {removingRoadmapId === resourceId && (
-                    <div
-                      className={
-                        'flex w-full items-center justify-end p-3 text-sm'
-                      }
-                    >
-                      <span className="text-xs text-gray-500">
-                        Are you sure?{' '}
-                        <button
-                          onClick={() => onRemove(resourceId)}
-                          className="mx-0.5 text-red-500 underline underline-offset-1"
-                        >
-                          Yes
-                        </button>{' '}
-                        <button
-                          onClick={() => setRemovingRoadmapId('')}
-                          className="text-red-500 underline underline-offset-1"
-                        >
-                          No
-                        </button>
-                      </span>
-                    </div>
-                  )}
-                  {(!removingRoadmapId || removingRoadmapId !== resourceId) && (
-                    <div className={'flex w-full justify-between p-3'}>
-                      <button
-                        type="button"
-                        className={
-                          'text-xs text-gray-500 underline hover:text-black focus:outline-none'
-                        }
-                        onClick={() => {
-                          if (isCustomResource) {
-                            window.open(
-                              `${
-                                import.meta.env.PUBLIC_EDITOR_APP_URL
-                              }/${resourceId}`,
-                              '_blank'
-                            );
-                            return;
-                          }
-                          setChangingRoadmapId(resourceId);
-                        }}
-                      >
-                        Customize
-                      </button>
-
-                      <button
-                        type="button"
-                        className={
-                          'text-xs text-red-500 underline hover:text-black'
-                        }
-                        onClick={() => setRemovingRoadmapId(resourceId)}
-                      >
-                        Remove
-                      </button>
-                    </div>
                   )}
                 </div>
-              );
-            }
-          )}
+
+                <div className={'flex w-full justify-between p-3'}>
+                  <button
+                    type="button"
+                    className={
+                      'text-xs text-gray-500 underline hover:text-black focus:outline-none'
+                    }
+                    onClick={() => setChangingRoadmapId(resourceId)}
+                  >
+                    Customize
+                  </button>
+
+                  <button
+                    type="button"
+                    className={
+                      'text-xs text-red-500 underline hover:text-black'
+                    }
+                    onClick={() => onRemove(resourceId)}
+                  >
+                    Remove
+                  </button>
+                </div>
+              </div>
+            );
+          })}
         </div>
       )}
     </div>

src/components/CreateTeam/RoleDropdown.tsx

@@ -1,5 +1,5 @@
 import { ChevronDownIcon } from '../ReactIcons/ChevronDownIcon';
-import { useRef, useState } from 'react';
+import { useRef, useState } from 'preact/hooks';
 import { useOutsideClick } from '../../hooks/use-outside-click';
 
 const allowedRoles = [

src/components/CreateTeam/SelectRoadmapModal.tsx

@@ -1,10 +1,10 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'preact/hooks';
 import { useKeydown } from '../../hooks/use-keydown';
 import { useOutsideClick } from '../../hooks/use-outside-click';
 import type { PageType } from '../CommandMenu/CommandMenu';
 import type { TeamResourceConfig } from './RoadmapSelector';
+import CloseIcon from '../../icons/close.svg';
 import { SelectRoadmapModalItem } from './SelectRoadmapModalItem';
-import { XIcon } from 'lucide-react';
 
 export type SelectRoadmapModalProps = {
   teamId: string;
@@ -60,27 +60,27 @@ export function SelectRoadmapModal(props: SelectRoadmapModalProps) {
     setSearchResults(searchResults);
   }, [searchText, allRoadmaps]);
 
-  const roleBasedRoadmaps = searchResults.filter(
-    (roadmap) => roadmap?.metadata?.tags?.includes('role-roadmap'),
+  const roleBasedRoadmaps = searchResults.filter((roadmap) =>
+    roadmap?.metadata?.tags?.includes('role-roadmap')
   );
-  const skillBasedRoadmaps = searchResults.filter(
-    (roadmap) => roadmap?.metadata?.tags?.includes('skill-roadmap'),
+  const skillBasedRoadmaps = searchResults.filter((roadmap) =>
+    roadmap?.metadata?.tags?.includes('skill-roadmap')
   );
 
   return (
-    <div className="fixed left-0 right-0 top-0 z-50 h-full items-center justify-center overflow-y-auto overflow-x-hidden overscroll-contain bg-black/50">
-      <div className="relative mx-auto h-full w-full max-w-2xl p-4 md:h-auto">
+    <div class="fixed left-0 right-0 top-0 z-50 h-full items-center justify-center overflow-y-auto overflow-x-hidden overscroll-contain bg-black/50">
+      <div class="relative mx-auto h-full w-full max-w-2xl p-4 md:h-auto">
         <div
           ref={popupBodyEl}
-          className="popup-body relative mt-4 overflow-hidden rounded-lg bg-white shadow"
+          class="popup-body relative mt-4 overflow-hidden rounded-lg bg-white shadow"
         >
           <button
             type="button"
             className="popup-close absolute right-2.5 top-3 ml-auto inline-flex items-center rounded-lg bg-transparent p-1.5 text-sm text-gray-400 hover:bg-gray-100 hover:text-gray-900"
             onClick={onClose}
           >
-            <XIcon className="h-4 w-4" />
-            <span className="sr-only">Close modal</span>
+            <img alt={'close'} src={CloseIcon} className="h-4 w-4" />
+            <span class="sr-only">Close modal</span>
           </button>
           <input
             ref={searchInputEl}
@@ -100,13 +100,12 @@ export function SelectRoadmapModal(props: SelectRoadmapModalProps) {
             {roleBasedRoadmaps.length > 0 && (
               <div className="mb-5 flex flex-wrap items-center gap-2">
                 {roleBasedRoadmaps.map((roadmap) => {
-                  const isSelected = !!teamResourceConfig?.find(
-                    (r) => r.resourceId === roadmap.id,
+                  const isSelected = !!teamResourceConfig.find(
+                    (r) => r.resourceId === roadmap.id
                   );
 
                   return (
                     <SelectRoadmapModalItem
-                      key={roadmap.id}
                       title={roadmap.title}
                       isSelected={isSelected}
                       onClick={() => {
@@ -127,12 +126,11 @@ export function SelectRoadmapModal(props: SelectRoadmapModalProps) {
             <div className="flex flex-wrap items-center gap-2">
               {skillBasedRoadmaps.map((roadmap) => {
                 const isSelected = !!teamResourceConfig.find(
-                  (r) => r.resourceId === roadmap.id,
+                  (r) => r.resourceId === roadmap.id
                 );
 
                 return (
                   <SelectRoadmapModalItem
-                    key={roadmap.id}
                     title={roadmap.title}
                     isSelected={isSelected}
                     onClick={() => {

src/components/CreateTeam/Step0.tsx

@@ -1,24 +1,22 @@
+import BuildingIcon from '../../icons/building.svg';
+import UsersIcon from '../../icons/users.svg';
 import type { TeamDocument } from './CreateTeamForm';
 import { httpPut } from '../../lib/http';
-import { useState } from 'react';
+import { useState } from 'preact/hooks';
 import { NextButton } from './NextButton';
-import { BuildingIcon } from '../ReactIcons/BuildingIcon.tsx';
-import { UsersIcon } from '../ReactIcons/UsersIcon.tsx';
 
 export const validTeamTypes = [
   {
     value: 'company',
     label: 'Company',
     icon: BuildingIcon,
-    description:
-      'Track the skills and learning progress of the tech team at your company',
+    description: 'Track the skills and learning progress of the tech team at your company',
   },
   {
     value: 'study_group',
     label: 'Study Group',
     icon: UsersIcon,
-    description:
-      'Invite your friends or course-mates and track your learning progress together',
+    description: 'Invite your friends or course-mates and track your learning progress together',
   },
 ] as const;
 
@@ -56,7 +54,7 @@ export function Step0(props: Step0Props) {
           teamSize: team.teamSize,
           linkedInUrl: team?.links?.linkedIn || undefined,
         }),
-      },
+      }
     );
 
     if (error || !response) {
@@ -72,28 +70,27 @@ export function Step0(props: Step0Props) {
 
   return (
     <>
-      <div className={'flex flex-col gap-3 sm:flex-row'}>
+      <div className={'flex flex-col sm:flex-row gap-3'}>
         {validTeamTypes.map((validTeamType) => (
           <button
-            key={validTeamType.value}
-            className={`flex flex-grow flex-col items-center rounded-lg border px-5 pb-10 pt-12 ${
+            className={`flex flex-grow flex-col items-center rounded-lg border px-5 py-12 ${
               validTeamType.value == selectedTeamType
                 ? 'border-gray-400 bg-gray-100'
                 : 'border-gray-300 hover:border-gray-400 hover:bg-gray-50'
             }`}
             onClick={() => setSelectedTeamType(validTeamType.value)}
           >
-            {
-              <validTeamType.icon
-                className={`mb-3 h-12 w-12 opacity-10 ${
-                  validTeamType.value === selectedTeamType ? 'opacity-100' : ''
-                }`}
-              />
-            }
+            <img
+              alt={validTeamType.label}
+              src={validTeamType.icon}
+              className={`mb-3 h-12 w-12 opacity-10 ${
+                validTeamType.value === selectedTeamType ? 'opacity-100' : ''
+              }`}
+            />
             <span className="mb-2 block text-2xl font-bold">
               {validTeamType.label}
             </span>
-            <span className="text-sm leading-[21px] text-gray-500">
+            <span className="text-sm text-gray-500 leading-[21px]">
               {validTeamType.description}
             </span>
           </button>
@@ -103,11 +100,11 @@ export function Step0(props: Step0Props) {
       {/*Error message*/}
       {error && <div className="mt-4 text-sm text-red-500">{error}</div>}
 
-      <div className="mt-4 flex flex-col items-stretch justify-between gap-2 md:flex-row md:items-center">
+      <div className="mt-4 flex flex-col md:flex-row items-stretch md:items-center justify-between gap-2">
         <a
           href="/account"
           className={
-            'rounded-md border border-red-400 bg-white px-8 py-2 text-center text-red-500'
+            'rounded-md border border-red-400 bg-white px-8 py-2 text-red-500 text-center'
           }
         >
           Cancel

src/components/CreateTeam/Step1.tsx

@@ -1,5 +1,5 @@
-import { type FormEvent, useEffect, useRef, useState } from 'react';
-import { type AppError, httpPost, httpPut } from '../../lib/http';
+import { useEffect, useRef, useState } from 'preact/hooks';
+import { AppError, httpPost, httpPut } from '../../lib/http';
 import type { ValidTeamType } from './Step0';
 import type { TeamDocument } from './CreateTeamForm';
 import { NextButton } from './NextButton';
@@ -49,7 +49,7 @@ export function Step1(props: Step1Props) {
     team?.teamSize || ('' as any)
   );
 
-  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
+  const handleSubmit = async (e: Event) => {
     e.preventDefault();
     setIsLoading(true);
     if (!name || !selectedTeamType) {
@@ -124,7 +124,7 @@ export function Step1(props: Step1Props) {
     <form onSubmit={handleSubmit}>
       <div className="flex w-full flex-col">
         <label
-          htmlFor="name"
+          for="name"
           className='text-sm leading-none text-slate-500 after:text-red-400 after:content-["*"]'
         >
           {selectedTeamType === 'company' ? 'Company Name' : 'Group Name'}
@@ -133,7 +133,7 @@ export function Step1(props: Step1Props) {
           type="text"
           name="name"
           ref={nameRef as any}
-          autoFocus={true}
+          autofocus={true}
           id="name"
           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="Roadmap Inc."
@@ -147,7 +147,7 @@ export function Step1(props: Step1Props) {
       {selectedTeamType === 'company' && (
         <div className="mt-4 flex w-full flex-col">
           <label
-            htmlFor="website"
+            for="website"
             className='text-sm leading-none text-slate-500 after:text-red-400 after:content-["*"]'
           >
             Website
@@ -168,7 +168,7 @@ export function Step1(props: Step1Props) {
 
       {selectedTeamType === 'company' && (
         <div className="mt-4 flex w-full flex-col">
-          <label htmlFor="website" className="text-sm leading-none text-slate-500">
+          <label for="website" className="text-sm leading-none text-slate-500">
             Company LinkedIn URL
           </label>
           <input
@@ -187,7 +187,7 @@ export function Step1(props: Step1Props) {
       )}
 
       <div className="mt-4 flex w-full flex-col">
-        <label htmlFor="website" className="text-sm leading-none text-slate-500">
+        <label for="website" className="text-sm leading-none text-slate-500">
           GitHub Organization URL
         </label>
         <input
@@ -205,7 +205,7 @@ export function Step1(props: Step1Props) {
       {selectedTeamType === 'company' && (
         <div className="mt-4 flex w-full flex-col">
           <label
-            htmlFor="team-size"
+            for="team-size"
             className='text-sm leading-none text-slate-500 after:text-red-400 after:content-["*"]'
           >
             Tech Team Size
@@ -221,11 +221,11 @@ export function Step1(props: Step1Props) {
               setTeamSize((e.target as HTMLSelectElement).value as any)
             }
           >
-            <option value="">
+            <option value="" selected>
               Select team size
             </option>
             {validTeamSizes.map((size) => (
-              <option key={size} value={size}>{size} people</option>
+              <option value={size}>{size} people</option>
             ))}
           </select>
         </div>
@@ -237,7 +237,7 @@ export function Step1(props: Step1Props) {
         </div>
       )}
 
-      <div className="mt-4 flex flex-col items-center justify-between gap-2 md:flex-row">
+      <div className="mt-4 flex flex-col md:flex-row items-center justify-between gap-2">
         <button
           type="button"
           onClick={onBack}

src/components/CreateTeam/Step2.tsx

@@ -1,4 +1,4 @@
-import { RoadmapSelector, type TeamResourceConfig } from './RoadmapSelector';
+import { RoadmapSelector, TeamResourceConfig } from './RoadmapSelector';
 import type { TeamDocument } from './CreateTeamForm';
 
 type Step2Props = {
@@ -17,9 +17,7 @@ export function Step2(props: Step2Props) {
     <>
       <div className="mt-4 flex w-full flex-col">
         <div className="mb-1 mt-2">
-          <h2 className="mb-1 text-lg font-bold md:mb-1.5 md:text-2xl">
-            Select Roadmaps
-          </h2>
+          <h2 className="mb-1 md:mb-1.5 text-lg md:text-2xl font-bold">Select Roadmaps</h2>
           <p className="text-sm text-gray-700">
             You can always add and customize your roadmaps later.
           </p>
@@ -27,12 +25,12 @@ export function Step2(props: Step2Props) {
 
         <RoadmapSelector
           teamId={team._id!}
-          teamResources={teamResourceConfig}
-          setTeamResources={setTeamResourceConfig}
+          teamResourceConfig={teamResourceConfig}
+          setTeamResourceConfig={setTeamResourceConfig}
         />
       </div>
 
-      <div className="mt-4 flex flex-col items-stretch justify-between gap-2 md:flex-row md:items-center">
+      <div className="mt-4 flex flex-col md:flex-row items-stretch md:items-center justify-between gap-2">
         <button
           type="button"
           onClick={onBack}
@@ -48,9 +46,8 @@ export function Step2(props: Step2Props) {
           <button
             type="button"
             onClick={onNext}
-            disabled={teamResourceConfig.length !== 0}
             className={
-              'flex-grow rounded-md border border-gray-300 bg-white px-4 py-2 text-gray-500 hover:border-gray-400 hover:text-black md:flex-auto disabled:opacity-50 disabled:pointer-events-none'
+              'flex-grow rounded-md border border-gray-300 bg-white px-4 py-2 text-gray-500 hover:border-gray-400 hover:text-black md:flex-auto'
             }
           >
             Skip for Now

src/components/CreateTeam/Step3.tsx

@@ -1,8 +1,8 @@
 import type { TeamDocument } from './CreateTeamForm';
 import { NextButton } from './NextButton';
 import { TrashIcon } from '../ReactIcons/TrashIcon';
-import { type AllowedRoles, RoleDropdown } from './RoleDropdown';
-import { useEffect, useRef, useState } from 'react';
+import { AllowedRoles, RoleDropdown } from './RoleDropdown';
+import { useEffect, useRef, useState } from 'preact/hooks';
 import { httpPost } from '../../lib/http';
 
 type Step3Props = {
@@ -75,9 +75,9 @@ export function Step3(props: Step3Props) {
 
   return (
     <form className="mt-4 flex w-full flex-col" onSubmit={onSubmit}>
-      <div className="mb-1 mt-2">
-        <h2 className="mb-1 md:mb-2 text-lg md:text-2xl font-bold">Invite your Team</h2>
-        <p className="text-sm text-gray-700">
+      <div class="mb-1 mt-2">
+        <h2 class="mb-1 md:mb-2 text-lg md:text-2xl font-bold">Invite your Team</h2>
+        <p class="text-sm text-gray-700">
           Use the form below to invite your team members to your team. You can
           also invite them later.
         </p>
@@ -88,7 +88,7 @@ export function Step3(props: Step3Props) {
             <div className="flex flex-col sm:flex-row gap-2" key={user.id}>
               <input
                 ref={userCounter === users.length - 1 ? emailInputRef : null}
-                autoFocus={true}
+                autofocus={true}
                 type="email"
                 name="email"
                 required
@@ -178,9 +178,8 @@ export function Step3(props: Step3Props) {
           <button
             type="button"
             onClick={onNext}
-            disabled={users.filter((u) => u.email).length !== 0}
             className={
-              'rounded-md flex-grow md:flex-auto border border-gray-300 bg-white px-4 py-2 text-gray-500 hover:border-gray-400 hover:text-black disabled:opacity-50 disabled:pointer-events-none'
+              'rounded-md flex-grow md:flex-auto border border-gray-300 bg-white px-4 py-2 text-gray-500 hover:border-gray-400 hover:text-black'
             }
           >
             Skip for Now

src/components/CreateTeam/Step4.tsx

@@ -8,15 +8,15 @@ type Step4Props = {
 export function Step4({ team }: Step4Props) {
   return (
     <div className="mt-4 flex flex-col rounded-xl border py-12 text-center">
-      <div className="mb-1 flex flex-col items-center">
+      <div class="mb-1 flex flex-col items-center">
         <CheckIcon additionalClasses={'h-14 w-14 mb-4 opacity-100'} />
-        <h2 className="mb-2 text-2xl font-bold">Team Created</h2>
-        <p className="text-sm text-gray-700">
+        <h2 class="mb-2 text-2xl font-bold">Team Created</h2>
+        <p class="text-sm text-gray-700">
           Your team has been created. Happy learning!
         </p>
         <a
           href={`/team/progress?t=${team._id}`}
-          className="mt-4 rounded-md bg-black px-5 py-1.5 text-sm text-white"
+          class="mt-4 rounded-md bg-black px-5 py-1.5 text-sm text-white"
         >
           View Team
         </a>