Fix Roadmap Share Link

.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,4 +1,4 @@
-name: App Deployment
+name: Deployment to GH Pages
 on:
   push:
     branches: [ master ]
@@ -12,7 +12,7 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v2
       with:
         persist-credentials: false
     - uses: actions/setup-node@v1

.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

@@ -29,5 +29,6 @@ pnpm-debug.log*
 tests-examples
 *.csv
 
-/editor/*
-!/editor/readonly-editor.tsx
+/renderer/*
+!/renderer/index.tsx
+!/renderer/renderer.ts

.npmrc

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

.prettierrc.cjs

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

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,7 +1,7 @@
 {
   "name": "roadmap.sh",
   "type": "module",
-  "version": "1.0.0",
+  "version": "0.0.1",
   "private": true,
   "scripts": {
     "dev": "astro dev --port 3000",
@@ -16,54 +16,53 @@
     "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",
+    "generate-renderer": "sh scripts/generate-renderer.sh",
     "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",
+    "@astrojs/react": "^3.0.0",
+    "@astrojs/sitemap": "^1.3.3",
+    "@astrojs/tailwind": "^5.0.0",
+    "@fingerprintjs/fingerprintjs": "^3.4.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",
+    "@types/react": "^18.0.21",
+    "@types/react-dom": "^18.0.6",
+    "astro": "^3.0.5",
+    "astro-compress": "^2.0.8",
+    "clsx": "^2.0.0",
     "dracula-prism": "^2.1.13",
-    "jose": "^5.2.0",
+    "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",
+    "lucide-react": "^0.274.0",
+    "nanoid": "^4.0.2",
+    "nanostores": "^0.9.2",
+    "node-html-parser": "^6.1.5",
+    "npm-check-updates": "^16.10.12",
     "prismjs": "^1.29.0",
-    "react": "^18.2.0",
+    "react": "^18.0.0",
     "react-confetti": "^6.1.0",
-    "react-dom": "^18.2.0",
-    "reactflow": "^11.10.2",
-    "rehype-external-links": "^3.0.0",
+    "react-dom": "^18.0.0",
+    "reactflow": "^11.8.3",
+    "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"
+    "tailwind-merge": "^1.14.0",
+    "tailwindcss": "^3.3.3"
   },
   "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",
+    "@types/prismjs": "^1.26.0",
     "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)
 
@@ -39,7 +39,6 @@ Here is the list of available roadmaps with more being actively worked upon.
 - [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)
@@ -53,7 +52,6 @@ Here is the list of available roadmaps with more being actively worked upon.
 - [Android Roadmap](https://roadmap.sh/android)
 - [Flutter Roadmap](https://roadmap.sh/flutter)
 - [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 +66,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

scripts/generate-renderer.sh

@@ -8,17 +8,17 @@ if [ ! -d ".temp/web-draw" ]; then
   git clone git@github.com:roadmapsh/web-draw.git .temp/web-draw
 fi
 
-rm -rf editor
-mkdir editor
+rm -rf renderer
+mkdir renderer
 
-# copy the files at /src/editor/* to /editor
+# copy the files at /src/editor/renderer/* to /renderer
 # while replacing any existing files
-cp -rf .temp/web-draw/src/editor/* editor
+cp -rf .temp/web-draw/src/editor/renderer/* renderer
 
 # 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
+find renderer -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
@@ -28,5 +28,6 @@ find editor -type f \( -name "*.ts" -o -name "*.tsx" \) -print0 | while IFS= rea
 done
 
 
-# ignore the worktree changes for the editor directory
-git update-index --assume-unchanged editor/readonly-editor.tsx
+
+# ignore the worktree changes for the renderer directory
+git update-index --skip-worktree renderer/*

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) {

src/components/AccountSidebar.astro

@@ -97,7 +97,7 @@ const sidebarLinks = [
         }`}
       >
         <AstroIcon icon={'users'} class={`h-4 w-4 mr-2`} />
-         Teams
+        Teams
       </a>
     </li>
     {
@@ -167,12 +167,13 @@ const sidebarLinks = [
                       {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 &&
+                      !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/EmptyActivity.tsx

@@ -1,11 +1,14 @@
-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" />
-
+        <img
+          alt="no roadmaps"
+          src={RoadmapIcon.src}
+          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>
         <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{' '}

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

@@ -4,14 +4,7 @@ import { useState } from 'react';
 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;
-
+export function EmailLoginForm() {
   const [email, setEmail] = useState<string>('');
   const [password, setPassword] = useState<string>('');
   const [error, setError] = useState('');
@@ -21,7 +14,6 @@ export function EmailLoginForm(props: EmailLoginFormProps) {
   const handleFormSubmit = async (e: FormEvent<HTMLFormElement>) => {
     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
@@ -47,13 +39,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.');
   };
 
@@ -101,7 +92,7 @@ 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'}

src/components/AuthenticationFlow/EmailSignupForm.tsx

@@ -1,14 +1,7 @@
 import { type FormEvent, useState } from 'react';
 import { httpPost } from '../../lib/http';
 
-type EmailSignupFormProps = {
-  isDisabled?: boolean;
-  setIsDisabled?: (isDisabled: boolean) => void;
-};
-
-export function EmailSignupForm(props: EmailSignupFormProps) {
-  const { isDisabled, setIsDisabled } = props;
-
+export function EmailSignupForm() {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [name, setName] = useState('');
@@ -20,7 +13,6 @@ export function EmailSignupForm(props: EmailSignupFormProps) {
     e.preventDefault();
 
     setIsLoading(true);
-    setIsDisabled?.(true);
     setError('');
 
     const { response, error } = await httpPost<{ status: 'ok' }>(
@@ -29,21 +21,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,7 +90,7 @@ 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'}

src/components/AuthenticationFlow/GitHubButton.tsx

@@ -1,23 +1,19 @@
 import { useEffect, useState } from 'react';
-import { GitHubIcon } from '../ReactIcons/GitHubIcon.tsx';
+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 +26,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,12 +56,6 @@ 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, {
@@ -80,25 +68,22 @@ export function GitHubButton(props: GitHubButtonProps) {
       .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;
     }
 
@@ -106,7 +91,7 @@ export function GitHubButton(props: GitHubButtonProps) {
     // 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.pathname + window.location.search
         : window.location.pathname;
@@ -122,14 +107,14 @@ export function GitHubButton(props: GitHubButtonProps) {
     <>
       <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}
+        disabled={isLoading}
         onClick={handleClick}
       >
-        {isLoading ? (
-          <Spinner className={'h-[18px] w-[18px]'} isDualRing={false} />
-        ) : (
-          <GitHubIcon className={'h-[18px] w-[18px]'} />
-        )}
+        <img
+          src={icon.src}
+          alt="GitHub"
+          className={`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 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,12 +55,6 @@ 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, {
@@ -79,21 +67,18 @@ export function GoogleButton(props: GoogleButtonProps) {
       .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 +86,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,7 +100,6 @@ export function GoogleButton(props: GoogleButtonProps) {
       .catch((err) => {
         setError('Something went wrong. Please try again later.');
         setIsLoading(false);
-        setIsDisabled?.(false);
       });
   };
 
@@ -124,14 +107,14 @@ export function GoogleButton(props: GoogleButtonProps) {
     <>
       <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}
+        disabled={isLoading}
         onClick={handleClick}
       >
-        {isLoading ? (
-          <Spinner className={'h-[18px] w-[18px]'} isDualRing={false} />
-        ) : (
-          <GoogleIcon className={'h-[18px] w-[18px]'} />
-        )}
+        <img
+          src={icon.src}
+          alt="Google"
+          className={`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 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,12 +55,6 @@ 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, {
@@ -79,21 +67,18 @@ export function LinkedInButton(props: LinkedInButtonProps) {
       .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;
         }
@@ -102,7 +87,7 @@ export function LinkedInButton(props: LinkedInButtonProps) {
         // 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.pathname + window.location.search
             : window.location.pathname;
@@ -116,7 +101,6 @@ export function LinkedInButton(props: LinkedInButtonProps) {
       .catch((err) => {
         setError('Something went wrong. Please try again later.');
         setIsLoading(false);
-        setIsDisabled?.(false);
       });
   };
 
@@ -124,14 +108,14 @@ export function LinkedInButton(props: LinkedInButtonProps) {
     <>
       <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}
+        disabled={isLoading}
         onClick={handleClick}
       >
-        {isLoading ? (
-          <Spinner className={'h-[18px] w-[18px]'} isDualRing={false} />
-        ) : (
-          <LinkedInIcon className={'h-[18px] w-[18px]'} />
-        )}
+        <img
+          src={icon.src}
+          alt="Google"
+          className={`h-[18px] w-[18px] ${isLoading ? 'animate-spin' : ''}`}
+        />
         Continue with LinkedIn
       </button>
       {error && (

src/components/AuthenticationFlow/LoginPopup.astro

@@ -1,10 +1,14 @@
 ---
 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'>
+  <div class='text-center'>
     <p class='mb-3 text-2xl font-semibold leading-5 text-slate-900'>
       Login to your account
     </p>
@@ -12,9 +16,19 @@ import { AuthenticationForm } from './AuthenticationForm';
       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/TriggerVerifyAccount.tsx

@@ -1,9 +1,9 @@
 import { useEffect, useState } from 'react';
 import Cookies from 'js-cookie';
 import { httpPost } from '../../lib/http';
+import ErrorIcon from '../../icons/error.svg';
+import SpinnerIcon from '../../icons/spinner.svg';
 import { TOKEN_COOKIE_NAME } from '../../lib/jwt';
-import { Spinner } from '../ReactIcons/Spinner';
-import { ErrorIcon2 } from '../ReactIcons/ErrorIcon2';
 
 export function TriggerVerifyAccount() {
   const [isLoading, setIsLoading] = useState(true);
@@ -16,7 +16,7 @@ export function TriggerVerifyAccount() {
       `${import.meta.env.PUBLIC_API_URL}/v1-verify-account`,
       {
         code,
-      },
+      }
     )
       .then(({ response, error }) => {
         if (!response?.token) {
@@ -55,8 +55,20 @@ 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.src}
+            className={'mx-auto h-16 w-16 animate-spin'}
+          />
+        )}
+        {error && (
+          <img
+            alt={'Please wait.'}
+            src={ErrorIcon.src}
+            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>

src/components/AuthenticationFlow/VerificationEmailMessage.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
+import VerifyLetterIcon from '../../icons/verify-letter.svg';
 import { httpPost } from '../../lib/http';
-import { VerifyLetterIcon } from '../ReactIcons/VerifyLetterIcon';
 
 export function VerificationEmailMessage() {
   const [email, setEmail] = useState('..');
@@ -37,7 +37,11 @@ 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" />
+      <img
+        alt="Verify Email"
+        src={VerifyLetterIcon.src}
+        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">
         Verify your email address
       </h2>

src/components/Authenticator/authenticator.ts

@@ -73,10 +73,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/CommandMenu/CommandMenu.tsx

@@ -1,47 +1,35 @@
-import {
-  Fragment,
-  type ReactElement,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
+import { Fragment, useEffect, useRef, useState } from 'react';
 import { useKeydown } from '../../hooks/use-keydown';
 import { useOutsideClick } from '../../hooks/use-outside-click';
+import BestPracticesIcon from '../../icons/best-practices.svg';
+import ClipboardIcon from '../../icons/clipboard.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.src },
   {
     id: 'account',
     url: '/account',
     title: 'Account',
     group: 'Pages',
-    icon: <UserIcon className="mr-2 h-4 w-4 stroke-2" />,
+    icon: UserIcon.src,
     isProtected: true,
   },
   {
@@ -49,15 +37,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.src,
     isProtected: true,
   },
   {
@@ -65,43 +45,35 @@ 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.src,
   },
   {
     id: 'best-practices',
     url: '/best-practices',
     title: 'Best Practices',
     group: 'Pages',
-    icon: <BestPracticesIcon className="mr-2 h-4 w-4 stroke-2" />,
+    icon: BestPracticesIcon.src,
   },
   {
     id: 'questions',
     url: '/questions',
     title: 'Questions',
     group: 'Pages',
-    icon: <ClipboardIcon className="mr-2 h-4 w-4 stroke-2" />,
+    icon: ClipboardIcon.src,
   },
   {
     id: 'guides',
     url: '/guides',
     title: 'Guides',
     group: 'Pages',
-    icon: <GuideIcon className="mr-2 h-4 w-4 stroke-2" />,
+    icon: GuideIcon.src,
   },
   {
     id: 'videos',
     url: '/videos',
     title: 'Videos',
     group: 'Pages',
-    icon: <VideoIcon className="mr-2 h-4 w-4 stroke-2" />,
+    icon: VideoIcon.src,
   },
 ];
 
@@ -211,7 +183,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();
@@ -254,7 +226,13 @@ export function CommandMenu() {
                       {!page.icon && (
                         <span className="mr-2 text-gray-400">{page.group}</span>
                       )}
-                      {page.icon && page.icon}
+                      {page.icon && (
+                        <img
+                          alt={page.title}
+                          src={page.icon}
+                          className="mr-2 h-4 w-4"
+                        />
+                      )}
                       {page.title}
                     </a>
                   </Fragment>

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.src}
+        className={'relative top-[1px] h-[17px] w-[17px] opacity-40'}
+      />
     </div>
   );
 }

src/components/CreateTeam/RoadmapSelector.tsx

@@ -15,7 +15,6 @@ import { useToast } from '../../hooks/use-toast';
 export type TeamResourceConfig = {
   isCustomResource: boolean;
   title: string;
-  description?: string;
   visibility?: AllowedRoadmapVisibility;
   resourceId: string;
   resourceType: string;

src/components/CreateTeam/SelectRoadmapModal.tsx

@@ -3,8 +3,8 @@ 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,11 +60,11 @@ 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 (
@@ -79,7 +79,7 @@ export function SelectRoadmapModal(props: SelectRoadmapModalProps) {
             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" />
+            <img alt={'close'} src={CloseIcon.src} className="h-4 w-4" />
             <span className="sr-only">Close modal</span>
           </button>
           <input
@@ -101,7 +101,7 @@ export function SelectRoadmapModal(props: SelectRoadmapModalProps) {
               <div className="mb-5 flex flex-wrap items-center gap-2">
                 {roleBasedRoadmaps.map((roadmap) => {
                   const isSelected = !!teamResourceConfig?.find(
-                    (r) => r.resourceId === roadmap.id,
+                    (r) => r.resourceId === roadmap.id
                   );
 
                   return (
@@ -127,7 +127,7 @@ 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 (

src/components/CreateTeam/Step0.tsx

@@ -1,22 +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 { NextButton } from './NextButton';
-import { BuildingIcon } from '../ReactIcons/BuildingIcon.tsx';
-import { UsersIcon } from '../ReactIcons/UsersIcon.tsx';
 
 export const validTeamTypes = [
   {
     value: 'company',
     label: 'Company',
-    icon: BuildingIcon,
+    icon: BuildingIcon.src,
     description:
       'Track the skills and learning progress of the tech team at your company',
   },
   {
     value: 'study_group',
     label: 'Study Group',
-    icon: UsersIcon,
+    icon: UsersIcon.src,
     description:
       'Invite your friends or course-mates and track your learning progress together',
   },
@@ -56,7 +56,7 @@ export function Step0(props: Step0Props) {
           teamSize: team.teamSize,
           linkedInUrl: team?.links?.linkedIn || undefined,
         }),
-      },
+      }
     );
 
     if (error || !response) {
@@ -76,20 +76,21 @@ export function Step0(props: Step0Props) {
         {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 pt-12 pb-10 ${
               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
+              key={validTeamType.value}
+              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>

src/components/CreateTeam/UpdateTeamResourceModal.tsx

@@ -8,7 +8,6 @@ import { useOutsideClick } from '../../hooks/use-outside-click';
 import { useKeydown } from '../../hooks/use-keydown';
 import type { TeamResourceConfig } from './RoadmapSelector';
 import { useToast } from '../../hooks/use-toast';
-import {replaceChildren} from "../../lib/dom.ts";
 
 export type ProgressMapProps = {
   teamId: string;
@@ -82,8 +81,7 @@ export function UpdateTeamResourceModal(props: ProgressMapProps) {
       fontURL: '/fonts/balsamiq.woff2',
     });
 
-    replaceChildren(containerEl.current!, svg);
-    // containerEl.current?.replaceChildren(svg);
+    containerEl.current?.replaceChildren(svg);
 
     // Render team configuration
     removedItems.forEach((topicId: string) => {

src/components/CreateVersion/CreateVersion.tsx

@@ -1,145 +0,0 @@
-import { useEffect, useState } from 'react';
-import { httpGet, httpPost } from '../../lib/http';
-import { useToast } from '../../hooks/use-toast';
-import { isLoggedIn } from '../../lib/jwt';
-import { GitFork, Loader2, Map } from 'lucide-react';
-import { showLoginPopup } from '../../lib/popup';
-import type { RoadmapDocument } from '../CustomRoadmap/CreateRoadmap/CreateRoadmapModal.tsx';
-
-type CreateVersionProps = {
-  roadmapId: string;
-};
-
-export function CreateVersion(props: CreateVersionProps) {
-  const { roadmapId } = props;
-
-  const toast = useToast();
-  const [isLoading, setIsLoading] = useState(true);
-  const [isCreating, setIsCreating] = useState(false);
-  const [isConfirming, setIsConfirming] = useState(false);
-  const [userVersion, setUserVersion] = useState<RoadmapDocument>();
-
-  async function loadMyVersion() {
-    if (!isLoggedIn()) {
-      return;
-    }
-
-    setIsLoading(true);
-    const { response, error } = await httpGet<RoadmapDocument>(
-      `${import.meta.env.PUBLIC_API_URL}/v1-get-my-version/${roadmapId}`,
-      {},
-    );
-
-    if (error || !response) {
-      setIsLoading(false);
-      return;
-    }
-
-    setIsLoading(false);
-    setUserVersion(response);
-  }
-
-  useEffect(() => {
-    loadMyVersion().finally(() => {
-      setIsLoading(false);
-    });
-  }, []);
-
-  async function createVersion() {
-    if (isCreating || !roadmapId) {
-      return;
-    }
-
-    if (!isLoggedIn()) {
-      showLoginPopup();
-      return;
-    }
-
-    setIsCreating(true);
-    const { response, error } = await httpPost<{ roadmapId: string }>(
-      `${import.meta.env.PUBLIC_API_URL}/v1-create-version/${roadmapId}`,
-      {},
-    );
-
-    if (error || !response) {
-      setIsCreating(false);
-      toast.error(error?.message || 'Failed to create version');
-      return;
-    }
-
-    window.location.href = `${
-      import.meta.env.PUBLIC_EDITOR_APP_URL
-    }/${response?.roadmapId}`;
-  }
-
-  if (isLoading) {
-    return (
-      <div className="h-[30px] w-[312px] animate-pulse rounded-md bg-gray-300"></div>
-    );
-  }
-
-  if (!isLoading && userVersion?._id) {
-    return (
-      <div className={'flex items-center'}>
-        <a
-          href={`/r?id=${userVersion._id}`}
-          className="flex items-center rounded-md border border-blue-400 bg-gray-50 px-2.5 py-1 text-xs font-medium text-blue-600 hover:bg-blue-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:hover:bg-gray-100 max-sm:hidden sm:text-sm"
-        >
-          <Map size="15px" className="mr-1.5" />
-          Visit your own version of this Roadmap
-        </a>
-      </div>
-    );
-  }
-
-  if (isConfirming) {
-    return (
-      <p className="flex h-[30px] items-center text-sm text-red-500">
-        Create and edit a custom roadmap from this roadmap?
-        <button
-          onClick={() => {
-            setIsConfirming(false);
-            createVersion().finally(() => null);
-          }}
-          className="ml-2 font-semibold underline underline-offset-2"
-        >
-          Yes
-        </button>
-        <span className="text-xs">&nbsp;/&nbsp;</span>
-        <button
-          className="font-semibold underline underline-offset-2"
-          onClick={() => setIsConfirming(false)}
-        >
-          No
-        </button>
-      </p>
-    );
-  }
-
-  return (
-    <button
-      disabled={isCreating}
-      className="flex items-center justify-center rounded-md border border-gray-300 bg-gray-50 px-2.5 py-1 text-xs font-medium text-black hover:bg-gray-200 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:hover:bg-gray-100 max-sm:hidden sm:text-sm"
-      onClick={() => {
-        if (!isLoggedIn()) {
-          showLoginPopup();
-          return;
-        }
-
-        setIsConfirming(true);
-      }}
-    >
-      {isCreating ? (
-        <>
-          <Loader2 className="mr-2 h-3 w-3 animate-spin stroke-[2.5]" />
-          Please wait ..
-        </>
-      ) : (
-        <>
-          <GitFork className="mr-1.5" size="16px" />
-          Create your own version of this roadmap
-        </>
-      )}
-    </button>
-  );
-}

src/components/CustomRoadmap/CreateRoadmap/CreateRoadmapButton.tsx

@@ -2,17 +2,20 @@ import { Plus } from 'lucide-react';
 import { isLoggedIn } from '../../../lib/jwt';
 import { showLoginPopup } from '../../../lib/popup';
 import { cn } from '../../../lib/classname';
-import { CreateRoadmapModal } from './CreateRoadmapModal';
+import {
+  type AllowedCustomRoadmapType,
+  type AllowedRoadmapVisibility,
+  CreateRoadmapModal,
+} from './CreateRoadmapModal';
 import { useState } from 'react';
 
 type CreateRoadmapButtonProps = {
   className?: string;
-  text?: string;
-  teamId?: string;
+  type?: AllowedCustomRoadmapType;
 };
 
 export function CreateRoadmapButton(props: CreateRoadmapButtonProps) {
-  const { teamId, className, text = 'Create your own Roadmap' } = props;
+  const { className, type } = props;
 
   const [isCreatingRoadmap, setIsCreatingRoadmap] = useState(false);
 
@@ -28,7 +31,7 @@ export function CreateRoadmapButton(props: CreateRoadmapButtonProps) {
     <>
       {isCreatingRoadmap && (
         <CreateRoadmapModal
-          teamId={teamId}
+          type={type}
           onClose={() => {
             setIsCreatingRoadmap(false);
           }}
@@ -38,12 +41,12 @@ export function CreateRoadmapButton(props: CreateRoadmapButtonProps) {
       <button
         className={cn(
           'flex h-full w-full items-center justify-center gap-1 overflow-hidden rounded-md border border-dashed border-gray-800 p-3 text-sm text-gray-400 hover:border-gray-600 hover:bg-gray-900 hover:text-gray-300',
-          className,
+          className
         )}
         onClick={toggleCreateRoadmapHandler}
       >
         <Plus size={16} />
-        {text}
+        Create a new roadmap
       </button>
     </>
   );

src/components/CustomRoadmap/CreateRoadmap/CreateRoadmapModal.tsx

@@ -10,6 +10,7 @@ import { Modal } from '../../Modal';
 import { useToast } from '../../../hooks/use-toast';
 import { httpPost } from '../../../lib/http';
 import { cn } from '../../../lib/classname';
+import { allowedVisibilityLabels } from '../ShareRoadmapModal';
 
 export const allowedRoadmapVisibility = [
   'me',
@@ -29,7 +30,6 @@ export interface RoadmapDocument {
   description?: string;
   creatorId: string;
   teamId?: string;
-  isDiscoverable: boolean;
   type: AllowedCustomRoadmapType;
   visibility: AllowedRoadmapVisibility;
   sharedFriendIds?: string[];
@@ -46,11 +46,12 @@ interface CreateRoadmapModalProps {
   onClose: () => void;
   onCreated?: (roadmap: RoadmapDocument) => void;
   teamId?: string;
+  type?: AllowedCustomRoadmapType;
   visibility?: AllowedRoadmapVisibility;
 }
 
 export function CreateRoadmapModal(props: CreateRoadmapModalProps) {
-  const { onClose, onCreated, teamId } = props;
+  const { onClose, onCreated, teamId, type: defaultType = 'role' } = props;
 
   const titleRef = useRef<HTMLInputElement>(null);
   const toast = useToast();
@@ -58,18 +59,19 @@ export function CreateRoadmapModal(props: CreateRoadmapModalProps) {
   const [isLoading, setIsLoading] = useState(false);
   const [title, setTitle] = useState('');
   const [description, setDescription] = useState('');
+  const [type, setType] = useState<AllowedCustomRoadmapType>(defaultType);
   const isInvalidDescription = description?.trim().length > 80;
 
   async function handleSubmit(
     e: FormEvent<HTMLFormElement> | MouseEvent<HTMLButtonElement>,
-    redirect: boolean = true,
+    redirect: boolean = true
   ) {
     e.preventDefault();
     if (isLoading) {
       return;
     }
 
-    if (title.trim() === '' || isInvalidDescription) {
+    if (title.trim() === '' || isInvalidDescription || !type) {
       toast.error('Please fill all the fields');
       return;
     }
@@ -80,12 +82,13 @@ export function CreateRoadmapModal(props: CreateRoadmapModalProps) {
       {
         title,
         description,
+        type,
         ...(teamId && {
           teamId,
         }),
         nodes: [],
         edges: [],
-      },
+      }
     );
 
     if (error) {
@@ -96,9 +99,9 @@ export function CreateRoadmapModal(props: CreateRoadmapModalProps) {
 
     toast.success('Roadmap created successfully');
     if (redirect) {
-      window.location.href = `${
-        import.meta.env.PUBLIC_EDITOR_APP_URL
-      }/${response?._id}`;
+      window.location.href = `${import.meta.env.PUBLIC_EDITOR_APP_URL}/${
+        response?._id
+      }`;
       return;
     }
 
@@ -111,6 +114,7 @@ export function CreateRoadmapModal(props: CreateRoadmapModalProps) {
 
     setTitle('');
     setDescription('');
+    setType('role');
     setIsLoading(false);
   }
 
@@ -145,7 +149,7 @@ export function CreateRoadmapModal(props: CreateRoadmapModalProps) {
               name="title"
               id="title"
               required
-              className="block text-black w-full rounded-md border border-gray-300 px-2.5 py-2 outline-none focus:border-black sm:text-sm"
+              className="block w-full rounded-md border border-gray-300 px-2.5 py-2 outline-none focus:border-black sm:text-sm"
               placeholder="Enter Title"
               value={title}
               onChange={(e) => setTitle(e.target.value)}
@@ -165,7 +169,7 @@ export function CreateRoadmapModal(props: CreateRoadmapModalProps) {
               name="description"
               required
               className={cn(
-                'block text-black h-24 w-full resize-none rounded-md border border-gray-300 px-2.5 py-2 outline-none focus:border-black sm:text-sm',
+                'block h-24 w-full resize-none rounded-md border border-gray-300 px-2.5 py-2 outline-none focus:border-black sm:text-sm',
                 isInvalidDescription && 'border-red-300 bg-red-100'
               )}
               placeholder="Enter Description"
@@ -178,6 +182,33 @@ export function CreateRoadmapModal(props: CreateRoadmapModalProps) {
           </div>
         </div>
 
+        <div className="mt-4">
+          <label
+            htmlFor="type"
+            className="block text-xs uppercase text-gray-400"
+          >
+            Type
+          </label>
+          <div className="mt-1">
+            <select
+              id="type"
+              name="type"
+              required
+              className="block w-full rounded-md border border-gray-300 px-2.5 py-2 outline-none focus:border-black sm:text-sm"
+              value={type}
+              onChange={(e) =>
+                setType(e.target.value as AllowedCustomRoadmapType)
+              }
+            >
+              {allowedCustomRoadmapType.map((type) => (
+                <option key={type} value={type}>
+                  {type.charAt(0).toUpperCase() + type.slice(1)} Based Roadmap
+                </option>
+              ))}
+            </select>
+          </div>
+        </div>
+
         <div
           className={cn('mt-4 flex justify-between gap-2', teamId && 'mt-8')}
         >
@@ -186,7 +217,7 @@ export function CreateRoadmapModal(props: CreateRoadmapModalProps) {
             type="button"
             className={cn(
               'block h-9 rounded-md border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-black outline-none hover:border-gray-300 hover:bg-gray-50 focus:border-gray-300 focus:bg-gray-100',
-              !teamId && 'w-full',
+              !teamId && 'w-full'
             )}
           >
             Cancel
@@ -213,7 +244,7 @@ export function CreateRoadmapModal(props: CreateRoadmapModalProps) {
               type="submit"
               className={cn(
                 'flex h-9 items-center justify-center rounded-md border border-transparent bg-black px-4 py-2 text-sm font-medium text-white outline-none hover:bg-gray-800 focus:bg-gray-800',
-                teamId ? 'hidden sm:flex' : 'w-full',
+                teamId ? 'hidden sm:flex' : 'w-full'
               )}
             >
               {isLoading ? (

src/components/CustomRoadmap/CustomRoadmap.tsx

@@ -7,12 +7,13 @@ import {
   httpPost,
 } from '../../lib/http';
 import { RoadmapHeader } from './RoadmapHeader';
+import { RoadmapRenderer } from './RoadmapRenderer';
 import { TopicDetail } from '../TopicDetail/TopicDetail';
 import type { RoadmapDocument } from './CreateRoadmap/CreateRoadmapModal';
 import { currentRoadmap } from '../../stores/roadmap';
+import { UserProgressModal } from '../UserProgress/UserProgressModal';
 import { RestrictedPage } from './RestrictedPage';
 import { isLoggedIn } from '../../lib/jwt';
-import { FlowRoadmapRenderer } from './FlowRoadmapRenderer';
 
 export const allowedLinkTypes = [
   'video',
@@ -39,53 +40,34 @@ export interface RoadmapContentDocument {
   }[];
 }
 
-export type CreatorType = {
-  id: string;
-  name: string;
-  avatar: string;
-};
-
-export type GetRoadmapResponse = RoadmapDocument & {
-  canManage: boolean;
-  creator?: CreatorType;
-  team?: CreatorType;
-};
-
 export function hideRoadmapLoader() {
   const loaderEl = document.querySelector(
-    '[data-roadmap-loader]',
+    '[data-roadmap-loader]'
   ) as HTMLElement;
   if (loaderEl) {
     loaderEl.remove();
   }
 }
 
-type CustomRoadmapProps = {
-  isEmbed?: boolean;
-};
-
-export function CustomRoadmap(props: CustomRoadmapProps) {
-  const { isEmbed = false } = props;
-
+export function CustomRoadmap() {
   const { id, secret } = getUrlParams() as { id: string; secret: string };
 
   const [isLoading, setIsLoading] = useState(true);
-  const [roadmap, setRoadmap] = useState<GetRoadmapResponse | null>(null);
+  const [roadmap, setRoadmap] = useState<RoadmapDocument | null>(null);
   const [error, setError] = useState<AppError | FetchError | undefined>();
 
   async function getRoadmap() {
     setIsLoading(true);
 
     const roadmapUrl = new URL(
-      `${import.meta.env.PUBLIC_API_URL}/v1-get-roadmap/${id}`,
+      `${import.meta.env.PUBLIC_API_URL}/v1-get-roadmap/${id}`
     );
-
     if (secret) {
       roadmapUrl.searchParams.set('secret', secret);
     }
 
-    const { response, error } = await httpGet<GetRoadmapResponse>(
-      roadmapUrl.toString(),
+    const { response, error } = await httpGet<RoadmapDocument>(
+      roadmapUrl.toString()
     );
 
     if (error || !response) {
@@ -101,10 +83,19 @@ export function CustomRoadmap(props: CustomRoadmapProps) {
     setIsLoading(false);
   }
 
+  async function trackVisit() {
+    if (!isLoggedIn()) return;
+    await httpPost(`${import.meta.env.PUBLIC_API_URL}/v1-visit`, {
+      resourceId: id,
+      resourceType: 'roadmap',
+    });
+  }
+
   useEffect(() => {
     getRoadmap().finally(() => {
       hideRoadmapLoader();
     });
+    trackVisit().then();
   }, []);
 
   if (isLoading) {
@@ -117,9 +108,14 @@ export function CustomRoadmap(props: CustomRoadmapProps) {
 
   return (
     <>
-      {!isEmbed && <RoadmapHeader />}
-      <FlowRoadmapRenderer isEmbed={isEmbed} roadmap={roadmap!} />
-      <TopicDetail isEmbed={isEmbed} canSubmitContribution={false} />
+      <RoadmapHeader />
+      <RoadmapRenderer roadmap={roadmap!} />
+      <TopicDetail canSubmitContribution={false} />
+      <UserProgressModal
+        resourceId={roadmap?._id!}
+        resourceType="roadmap"
+        isCustomResource={true}
+      />
     </>
   );
 }

src/components/CustomRoadmap/EmbedRoadmapModal.tsx

@@ -1,81 +0,0 @@
-import { useStore } from '@nanostores/react';
-import { Check, Copy } from 'lucide-react';
-
-import { Modal } from '../Modal';
-import { useToast } from '../../hooks/use-toast';
-import { useCopyText } from '../../hooks/use-copy-text';
-import { currentRoadmap, isCurrentRoadmapPersonal } from '../../stores/roadmap';
-import { cn } from '../../lib/classname.ts';
-
-type ShareRoadmapModalProps = {
-  onClose: () => void;
-};
-
-export function EmbedRoadmapModal(props: ShareRoadmapModalProps) {
-  const { onClose } = props;
-
-  const toast = useToast();
-  const $currentRoadmap = useStore(currentRoadmap);
-  const $isCurrentRoadmapPersonal = useStore(isCurrentRoadmapPersonal);
-  const roadmapId = $currentRoadmap?._id!;
-
-  const { copyText, isCopied } = useCopyText();
-
-  const isDev = import.meta.env.DEV;
-  const baseUrl = isDev ? 'http://localhost:3000' : 'https://roadmap.sh';
-
-  const embedHtml = `<iframe src="${baseUrl}/r/embed?id=${roadmapId}" width="100%" height="500px" frameBorder="0"\n></iframe>`;
-
-  return (
-    <Modal onClose={onClose} wrapperClassName={'max-w-[500px]'}>
-      <div className="p-4 pb-0">
-        <h1 className="text-xl font-semibold leading-5 text-gray-900">
-          Embed Roadmap
-        </h1>
-      </div>
-
-      <div className="px-4 pt-3">
-        <p className={'mb-2 text-sm text-gray-500'}>
-          Copy the following HTML code and paste it into your website.
-        </p>
-        <input
-          type="text"
-          value={embedHtml}
-          readOnly={true}
-          onClick={(e) => {
-            e.currentTarget.select();
-            copyText(embedHtml);
-          }}
-          className="w-full resize-none rounded-md border bg-gray-50 p-2 text-sm"
-        />
-      </div>
-
-      <div className="flex items-center justify-between px-4 pb-4 pt-2">
-        <button
-          className={cn(
-            'flex h-9 w-full items-center justify-center rounded-md border border-transparent px-4 py-2 text-sm font-medium text-white outline-none',
-            {
-              'bg-green-500 hover:bg-green-600 focus:bg-green-600': isCopied,
-              'bg-gray-900 hover:bg-gray-800 focus:bg-gray-800': !isCopied,
-            },
-          )}
-          onClick={() => {
-            copyText(embedHtml);
-          }}
-        >
-          {isCopied ? (
-            <>
-              <Check size={14} className="mr-2 stroke-[2.5]" />
-              Copied
-            </>
-          ) : (
-            <>
-              <Copy size={14} className="mr-2 stroke-[2.5]" />
-              Copy Link
-            </>
-          )}
-        </button>
-      </div>
-    </Modal>
-  );
-}

src/components/CustomRoadmap/EmptyRoadmap.tsx

@@ -1,31 +1,11 @@
-import { CircleSlash, PenSquare, Shapes } from 'lucide-react';
-import { cn } from '../../lib/classname';
-
-type EmptyRoadmapProps = {
-  roadmapId: string;
-  canManage: boolean;
-  className?: string;
-};
-
-export function EmptyRoadmap(props: EmptyRoadmapProps) {
-  const { roadmapId, canManage, className } = props;
-  const editUrl = `${import.meta.env.PUBLIC_EDITOR_APP_URL}/${roadmapId}`;
+import { CircleSlash } from 'lucide-react';
 
+export function EmptyRoadmap() {
   return (
-    <div className={cn('flex h-full items-center justify-center', className)}>
+    <div className="flex h-full items-center justify-center">
       <div className="flex flex-col items-center">
         <CircleSlash className="mx-auto h-20 w-20 text-gray-400" />
-        <h3 className="mt-2">This roadmap is currently empty.</h3>
-
-        {canManage && (
-          <a
-            href={editUrl}
-            className="mt-4 flex items-center rounded-md bg-gray-500 px-4 py-2 font-medium text-white hover:bg-gray-600"
-          >
-            <Shapes className="mr-2 inline-block h-4 w-4" />
-            Edit Roadmap
-          </a>
-        )}
+        <h3 className="mt-4">This roadmap is currently empty.</h3>
       </div>
     </div>
   );

src/components/CustomRoadmap/FlowRoadmapRenderer.tsx

@@ -1,170 +0,0 @@
-import { ReadonlyEditor } from '../../../editor/readonly-editor';
-import type { RoadmapDocument } from './CreateRoadmap/CreateRoadmapModal';
-import {
-  refreshProgressCounters,
-  renderResourceProgress,
-  renderTopicProgress,
-  type ResourceProgressType,
-  updateResourceProgress,
-} from '../../lib/resource-progress';
-import { pageProgressMessage } from '../../stores/page';
-import { useToast } from '../../hooks/use-toast';
-import type { Node } from 'reactflow';
-import { type MouseEvent, useCallback, useRef, useState } from 'react';
-import { EmptyRoadmap } from './EmptyRoadmap';
-import { cn } from '../../lib/classname';
-import { totalRoadmapNodes } from '../../stores/roadmap.ts';
-
-type FlowRoadmapRendererProps = {
-  isEmbed?: boolean;
-  roadmap: RoadmapDocument;
-};
-
-export function FlowRoadmapRenderer(props: FlowRoadmapRendererProps) {
-  const { roadmap, isEmbed = false } = props;
-  const roadmapId = String(roadmap._id!);
-
-  const [hideRenderer, setHideRenderer] = useState(false);
-  const editorWrapperRef = useRef<HTMLDivElement>(null);
-
-  const toast = useToast();
-
-  async function updateTopicStatus(
-    topicId: string,
-    newStatus: ResourceProgressType,
-  ) {
-    if (isEmbed) {
-      return;
-    }
-
-    pageProgressMessage.set('Updating progress');
-    updateResourceProgress(
-      {
-        resourceId: roadmapId,
-        resourceType: 'roadmap',
-        topicId,
-      },
-      newStatus,
-    )
-      .then(() => {
-        renderTopicProgress(topicId, newStatus);
-      })
-      .catch((err) => {
-        toast.error('Something went wrong, please try again.');
-        console.error(err);
-      })
-      .finally(() => {
-        pageProgressMessage.set('');
-        refreshProgressCounters();
-      });
-
-    return;
-  }
-
-  const handleTopicRightClick = useCallback((e: MouseEvent, node: Node) => {
-    const target = e?.currentTarget as HTMLDivElement;
-    if (!target) {
-      return;
-    }
-
-    const isCurrentStatusDone = target?.classList.contains('done');
-    updateTopicStatus(node.id, isCurrentStatusDone ? 'pending' : 'done');
-  }, []);
-
-  const handleTopicShiftClick = useCallback((e: MouseEvent, node: Node) => {
-    const target = e?.currentTarget as HTMLDivElement;
-    if (!target) {
-      return;
-    }
-
-    const isCurrentStatusLearning = target?.classList.contains('learning');
-    updateTopicStatus(
-      node.id,
-      isCurrentStatusLearning ? 'pending' : 'learning',
-    );
-  }, []);
-
-  const handleTopicAltClick = useCallback((e: MouseEvent, node: Node) => {
-    const target = e?.currentTarget as HTMLDivElement;
-    if (!target) {
-      return;
-    }
-
-    const isCurrentStatusSkipped = target?.classList.contains('skipped');
-    updateTopicStatus(node.id, isCurrentStatusSkipped ? 'pending' : 'skipped');
-  }, []);
-
-  const handleTopicClick = useCallback((e: MouseEvent, node: Node) => {
-    const target = e?.currentTarget as HTMLDivElement;
-    if (!target) {
-      return;
-    }
-
-    window.dispatchEvent(
-      new CustomEvent('roadmap.node.click', {
-        detail: {
-          topicId: node.id,
-          resourceId: roadmapId,
-          resourceType: 'roadmap',
-          isCustomResource: true,
-        },
-      }),
-    );
-  }, []);
-
-  const handleLinkClick = useCallback((linkId: string, href: string) => {
-    if (!href) {
-      return;
-    }
-
-    const isExternalLink = href.startsWith('http');
-    if (isExternalLink) {
-      window.open(href, '_blank');
-    } else {
-      window.location.href = href;
-    }
-  }, []);
-
-  return (
-    <>
-      {hideRenderer && (
-        <EmptyRoadmap
-          roadmapId={roadmapId}
-          canManage={roadmap.canManage}
-          className="grow"
-        />
-      )}
-      <ReadonlyEditor
-        ref={editorWrapperRef}
-        roadmap={roadmap}
-        className={cn(
-          roadmap?.nodes?.length === 0
-            ? 'grow'
-            : 'min-h-0 max-md:min-h-[1000px]',
-        )}
-        onRendered={() => {
-          renderResourceProgress('roadmap', roadmapId).then(() => {
-            totalRoadmapNodes.set(
-              roadmap?.nodes?.filter((node) => {
-                return ['topic', 'subtopic'].includes(node.type);
-              }).length || 0,
-            );
-
-            if (roadmap?.nodes?.length === 0) {
-              setHideRenderer(true);
-              editorWrapperRef?.current?.classList.add('hidden');
-            }
-          });
-        }}
-        onTopicClick={handleTopicClick}
-        onTopicRightClick={handleTopicRightClick}
-        onTopicShiftClick={handleTopicShiftClick}
-        onTopicAltClick={handleTopicAltClick}
-        onButtonNodeClick={handleLinkClick}
-        onLinkClick={handleLinkClick}
-        fontFamily="Balsamiq Sans"
-        fontURL="/fonts/balsamiq.woff2"
-      />
-    </>
-  );
-}

src/components/CustomRoadmap/PersonalRoadmapActionDropdown.tsx

@@ -1,7 +1,7 @@
+import MoreIcon from '../../icons/more-vertical.svg';
 import { useRef, useState } from 'react';
 import { useOutsideClick } from '../../hooks/use-outside-click';
 import { Lock, MoreVertical, Shapes, Trash2 } from 'lucide-react';
-import { MoreVerticalIcon } from '../ReactIcons/MoreVerticalIcon.tsx';
 
 type PersonalRoadmapActionDropdownProps = {
   onDelete?: () => void;
@@ -9,9 +9,7 @@ type PersonalRoadmapActionDropdownProps = {
   onUpdateSharing?: () => void;
 };
 
-export function PersonalRoadmapActionDropdown(
-  props: PersonalRoadmapActionDropdownProps,
-) {
+export function PersonalRoadmapActionDropdown(props: PersonalRoadmapActionDropdownProps) {
   const { onDelete, onUpdateSharing, onCustomize } = props;
 
   const menuRef = useRef<HTMLDivElement>(null);
@@ -28,7 +26,7 @@ export function PersonalRoadmapActionDropdown(
         onClick={() => setIsOpen(!isOpen)}
         className="hidden items-center opacity-60 transition-opacity hover:opacity-100 disabled:cursor-not-allowed disabled:opacity-30 sm:flex"
       >
-        <MoreVerticalIcon className={'h-4 w-4'} />
+        <img alt="menu" src={MoreIcon.src} className="h-4 w-4" />
       </button>
 
       <button

src/components/CustomRoadmap/PersonalRoadmapList.tsx

@@ -7,18 +7,17 @@ import {
   Globe,
   LockIcon,
   Users,
-  PenSquare,
 } from 'lucide-react';
 import { useToast } from '../../hooks/use-toast';
 import {
   type AllowedRoadmapVisibility,
   type RoadmapDocument,
 } from './CreateRoadmap/CreateRoadmapModal';
+import RoadmapIcon from '../../icons/roadmap.svg';
 import { PersonalRoadmapActionDropdown } from './PersonalRoadmapActionDropdown';
 import type { GetRoadmapListResponse } from './RoadmapListPage';
 import { useState, type Dispatch, type SetStateAction } from 'react';
 import { ShareOptionsModal } from '../ShareOptions/ShareOptionsModal';
-import {RoadmapIcon} from "../ReactIcons/RoadmapIcon.tsx";
 
 type PersonalRoadmapListType = {
   roadmaps: GetRoadmapListResponse['personalRoadmaps'];
@@ -61,8 +60,6 @@ export function PersonalRoadmapList(props: PersonalRoadmapListType) {
 
   const shareSettingsModal = selectedRoadmap && (
     <ShareOptionsModal
-      isDiscoverable={selectedRoadmap.isDiscoverable}
-      description={selectedRoadmap.description}
       visibility={selectedRoadmap.visibility}
       sharedFriendIds={selectedRoadmap.sharedFriendIds}
       sharedTeamMemberIds={selectedRoadmap.sharedTeamMemberIds}
@@ -91,8 +88,11 @@ export function PersonalRoadmapList(props: PersonalRoadmapListType) {
   if (roadmapList.length === 0) {
     return (
       <div className="flex flex-col items-center p-4 py-20">
-        <RoadmapIcon className="mb-4 h-24 w-24 opacity-10" />
-
+        <img
+          alt="roadmap"
+          src={RoadmapIcon.src}
+          className="mb-4 h-24 w-24 opacity-10"
+        />
         <h3 className="mb-1 text-2xl font-bold text-gray-900">No roadmaps</h3>
         <p className="text-base text-gray-500">
           Create a roadmap to get started
@@ -140,7 +140,7 @@ function CustomRoadmapItem(props: CustomRoadmapItemProps) {
 
   return (
     <li
-      className="grid grid-cols-1 p-2.5 sm:grid-cols-[auto_172px]"
+      className="grid grid-cols-1 p-2.5 sm:grid-cols-[auto_110px]"
       key={roadmap._id!}
     >
       <div className="mb-3 grid grid-cols-1 sm:mb-0">
@@ -172,20 +172,10 @@ function CustomRoadmapItem(props: CustomRoadmapItemProps) {
           }}
         />
 
-        <a
-          href={editorLink}
-          className={
-            'ml-2 flex items-center gap-2 rounded-md border border-gray-300 bg-white px-2.5 py-1.5 text-xs text-black hover:bg-gray-50 focus:outline-none'
-          }
-          target={'_blank'}
-        >
-          <PenSquare className="inline-block h-4 w-4" />
-          Edit
-        </a>
         <a
           href={`/r?id=${roadmap._id}`}
           className={
-            'ml-2 flex items-center gap-2 rounded-md border border-blue-400 bg-white px-2 py-1.5 text-xs hover:bg-blue-50 focus:outline-none text-blue-600'
+            'ml-2 flex items-center gap-2 rounded-md border border-gray-300 bg-white px-2 py-1.5 text-xs hover:bg-gray-50 focus:outline-none'
           }
           target={'_blank'}
         >

src/components/CustomRoadmap/ResourceProgressStats.tsx

@@ -24,8 +24,6 @@ export function ResourceProgressStats(props: ResourceProgressStatsProps) {
     <>
       {isSharing && $canManageCurrentRoadmap && $currentRoadmap && (
         <ShareOptionsModal
-          isDiscoverable={$currentRoadmap.isDiscoverable}
-          description={$currentRoadmap?.description}
           visibility={$currentRoadmap?.visibility}
           teamId={$currentRoadmap?.teamId}
           roadmapId={$currentRoadmap?._id!}
@@ -43,7 +41,7 @@ export function ResourceProgressStats(props: ResourceProgressStatsProps) {
       <div
         data-progress-nums-container=""
         className={cn(
-          'striped-loader relative z-50 hidden items-center justify-between bg-white px-2 py-1.5 sm:flex',
+          'striped-loader relative hidden items-center justify-between bg-white px-2 py-1.5 sm:flex',
           {
             'rounded-bl-md rounded-br-md': isSecondaryBanner,
             'rounded-md': !isSecondaryBanner,

src/components/CustomRoadmap/RoadmapActionButton.tsx

@@ -23,7 +23,7 @@ export function RoadmapActionButton(props: RoadmapActionButtonProps) {
       <button
         disabled={false}
         onClick={() => setIsOpen(!isOpen)}
-        className="inline-flex items-center justify-center rounded-md border border-gray-300 bg-white py-1.5 pl-2 pr-2 text-xs font-medium text-black hover:border-gray-300 hover:bg-gray-300 sm:pl-1.5 sm:pr-3 sm:text-sm"
+        className="inline-flex items-center justify-center rounded-md bg-gray-500 py-1.5 pl-2 pr-2 text-xs font-medium text-white hover:bg-gray-600 sm:pl-1.5 sm:pr-3 sm:text-sm"
       >
         <MoreVertical className="mr-0 h-4 w-4 stroke-[2.5] sm:mr-1.5" />
         <span className="hidden sm:inline">Actions</span>
@@ -32,7 +32,7 @@ export function RoadmapActionButton(props: RoadmapActionButtonProps) {
       {isOpen && (
         <div
           ref={menuRef}
-          className="align-right absolute right-0 top-full mt-1 w-[140px] rounded-md bg-slate-800 px-2 py-2 text-white shadow-md z-[9999]"
+          className="align-right absolute right-0 top-full z-50 mt-1 w-[140px] rounded-md bg-slate-800 px-2 py-2 text-white shadow-md"
         >
           <ul>
             {onUpdateSharing && (

src/components/CustomRoadmap/RoadmapHeader.tsx

@@ -8,10 +8,6 @@ import { httpDelete, httpPut } from '../../lib/http';
 import { type TeamResourceConfig } from '../CreateTeam/RoadmapSelector';
 import { useToast } from '../../hooks/use-toast';
 import { RoadmapActionButton } from './RoadmapActionButton';
-import { Lock, Shapes } from 'lucide-react';
-import { Modal } from '../Modal';
-import { ShareSuccess } from '../ShareOptions/ShareSuccess';
-import { ShareRoadmapButton } from '../ShareRoadmapButton.tsx';
 
 type RoadmapHeaderProps = {};
 
@@ -19,17 +15,9 @@ export function RoadmapHeader(props: RoadmapHeaderProps) {
   const $canManageCurrentRoadmap = useStore(canManageCurrentRoadmap);
   const $currentRoadmap = useStore(currentRoadmap);
 
-  const {
-    title,
-    description,
-    _id: roadmapId,
-    creator,
-    team,
-    visibility,
-  } = useStore(currentRoadmap) || {};
+  const { title, description, _id: roadmapId } = useStore(currentRoadmap) || {};
 
   const [isSharing, setIsSharing] = useState(false);
-  const [isSharingWithOthers, setIsSharingWithOthers] = useState(false);
   const toast = useToast();
 
   async function deleteResource() {
@@ -45,11 +33,11 @@ export function RoadmapHeader(props: RoadmapHeaderProps) {
         {
           resourceId: roadmapId,
           resourceType: 'roadmap',
-        },
+        }
       ));
     } else {
       ({ error, response } = await httpDelete<TeamResourceConfig>(
-        `${baseApiUrl}/v1-delete-roadmap/${roadmapId}`,
+        `${baseApiUrl}/v1-delete-roadmap/${roadmapId}`
       ));
     }
 
@@ -66,53 +54,10 @@ export function RoadmapHeader(props: RoadmapHeaderProps) {
     }
   }
 
-  const avatarUrl = creator?.avatar
-    ? `${import.meta.env.PUBLIC_AVATAR_BASE_URL}/${creator?.avatar}`
-    : '/images/default-avatar.png';
-
-  const sharingWithOthersModal = isSharingWithOthers && (
-    <Modal
-      onClose={() => setIsSharingWithOthers(false)}
-      wrapperClassName="max-w-lg"
-      bodyClassName="p-4 flex flex-col"
-    >
-      <ShareSuccess
-        visibility="public"
-        roadmapId={roadmapId!}
-        description={description}
-        onClose={() => setIsSharingWithOthers(false)}
-        isSharingWithOthers={true}
-      />
-    </Modal>
-  );
-
   return (
     <div className="border-b">
       <div className="container relative py-5 sm:py-12">
-        {creator?.name && (
-          <div className="-mb-1 flex items-center gap-1.5 text-sm text-gray-500">
-            <img
-              alt={creator.name}
-              src={avatarUrl}
-              className="h-5 w-5 rounded-full"
-            />
-            <span>
-              Created by&nbsp;
-              <span className="font-semibold text-gray-900">
-                {creator?.name}
-              </span>
-              {team && (
-                <>
-                  &nbsp;from&nbsp;
-                  <span className="font-semibold text-gray-900">
-                    {team?.name}
-                  </span>
-                </>
-              )}
-            </span>
-          </div>
-        )}
-        <div className="mb-3 mt-4 sm:mb-4">
+        <div className="mb-3 mt-0 sm:mb-4">
           <h1 className="text-2xl font-bold sm:mb-2 sm:text-4xl">{title}</h1>
           <p className="mt-0.5 text-sm text-gray-500 sm:text-lg">
             {description}
@@ -120,7 +65,7 @@ export function RoadmapHeader(props: RoadmapHeaderProps) {
         </div>
 
         <div className="flex justify-between gap-2 sm:gap-0">
-          <div className="flex justify-stretch gap-1 sm:gap-2">
+          <div className="flex gap-1 sm:gap-2">
             <a
               href="/roadmaps"
               className="rounded-md bg-gray-500 px-3 py-1.5 text-xs font-medium text-white hover:bg-gray-600 sm:text-sm"
@@ -129,85 +74,61 @@ export function RoadmapHeader(props: RoadmapHeaderProps) {
               &larr;<span className="hidden sm:inline">&nbsp;All Roadmaps</span>
             </a>
 
-            <ShareRoadmapButton
-              roadmapId={roadmapId!}
-              description={description!}
-              pageUrl={`https://roadmap.sh/r?id=${roadmapId}`}
-              allowEmbed={true}
-            />
+            <button
+              data-guest-required
+              data-popup="login-popup"
+              className="inline-flex hidden items-center justify-center rounded-md bg-yellow-400 px-3 py-1.5 text-xs font-medium hover:bg-yellow-500 sm:text-sm"
+              aria-label="Subscribe for Updates"
+            >
+              <span className="ml-2">Subscribe</span>
+            </button>
           </div>
-          <div className="flex items-center gap-2">
-            {$canManageCurrentRoadmap && (
-              <>
-                {isSharing && $currentRoadmap && (
-                  <ShareOptionsModal
-                    isDiscoverable={$currentRoadmap.isDiscoverable}
-                    description={$currentRoadmap?.description}
-                    visibility={$currentRoadmap?.visibility}
-                    teamId={$currentRoadmap?.teamId}
-                    roadmapId={$currentRoadmap?._id!}
-                    sharedFriendIds={$currentRoadmap?.sharedFriendIds || []}
-                    sharedTeamMemberIds={
-                      $currentRoadmap?.sharedTeamMemberIds || []
-                    }
-                    onClose={() => setIsSharing(false)}
-                    onShareSettingsUpdate={(settings) => {
-                      currentRoadmap.set({
-                        ...$currentRoadmap,
-                        ...settings,
-                      });
-                    }}
-                  />
-                )}
-
-                <a
-                  href={`${
-                    import.meta.env.PUBLIC_EDITOR_APP_URL
-                  }/${$currentRoadmap?._id}`}
-                  target="_blank"
-                  className="inline-flex items-center justify-center rounded-md border border-gray-300 bg-white py-1.5 pl-2 pr-2 text-xs font-medium  text-black hover:border-gray-300 hover:bg-gray-300 sm:px-3 sm:text-sm"
-                >
-                  <Shapes className="mr-1.5 h-4 w-4 stroke-[2.5]" />
-                  <span className="hidden sm:inline-block">Edit Roadmap</span>
-                  <span className="sm:hidden">Edit</span>
-                </a>
-                <button
-                  onClick={() => setIsSharing(true)}
-                  className="inline-flex items-center justify-center rounded-md border border-gray-300 bg-white py-1.5 pl-2 pr-2 text-xs font-medium text-black hover:border-gray-300 hover:bg-gray-300 sm:px-3 sm:text-sm"
-                >
-                  <Lock className="mr-1.5 h-4 w-4 stroke-[2.5]" />
-                  Sharing
-                </button>
-
-                <RoadmapActionButton
-                  onDelete={() => {
-                    const confirmation = window.confirm(
-                      'Are you sure you want to delete this roadmap?',
-                    );
-
-                    if (!confirmation) {
-                      return;
-                    }
-
-                    deleteResource().finally(() => null);
+          {$canManageCurrentRoadmap && (
+            <div className="flex items-center gap-2">
+              {isSharing && $currentRoadmap && (
+                <ShareOptionsModal
+                  visibility={$currentRoadmap?.visibility}
+                  teamId={$currentRoadmap?.teamId}
+                  roadmapId={$currentRoadmap?._id!}
+                  sharedFriendIds={$currentRoadmap?.sharedFriendIds || []}
+                  sharedTeamMemberIds={
+                    $currentRoadmap?.sharedTeamMemberIds || []
+                  }
+                  onClose={() => setIsSharing(false)}
+                  onShareSettingsUpdate={(settings) => {
+                    currentRoadmap.set({
+                      ...$currentRoadmap,
+                      ...settings,
+                    });
                   }}
                 />
-              </>
-            )}
+              )}
 
-            {!$canManageCurrentRoadmap && visibility === 'public' && (
-              <>
-                {sharingWithOthersModal}
-                <button
-                  onClick={() => setIsSharingWithOthers(true)}
-                  className="inline-flex items-center justify-center rounded-md border border-gray-300 bg-white py-1.5 pl-2 pr-2 text-xs font-medium  text-black hover:border-gray-300 hover:bg-gray-300 sm:px-3 sm:text-sm"
-                >
-                  <Lock className="mr-1.5 h-4 w-4 stroke-[2.5]" />
-                  Share with Others
-                </button>
-              </>
-            )}
-          </div>
+              <RoadmapActionButton
+                onDelete={() => {
+                  const confirmation = window.confirm(
+                    'Are you sure you want to delete this roadmap?'
+                  );
+
+                  if (!confirmation) {
+                    return;
+                  }
+
+                  deleteResource().finally(() => null);
+                }}
+                onCustomize={() => {
+                  const editorLink = `${
+                    import.meta.env.PUBLIC_EDITOR_APP_URL
+                  }/${$currentRoadmap?._id}`;
+
+                  window.open(editorLink, '_blank');
+                }}
+                onUpdateSharing={() => {
+                  setIsSharing(true);
+                }}
+              />
+            </div>
+          )}
         </div>
 
         <RoadmapHint

src/components/CustomRoadmap/RoadmapListPage.tsx

@@ -86,13 +86,13 @@ export function RoadmapListPage() {
         <CreateRoadmapModal onClose={() => setIsCreatingRoadmap(false)} />
       )}
 
-      <div className="mb-6 flex flex-col justify-between gap-2 sm:flex-row sm:items-center sm:gap-0">
-        <div className="flex grow items-center gap-2">
+      <div className="mb-6 flex items-center justify-between">
+        <div className="flex items-center gap-2">
           {tabTypes.map((tab) => {
             return (
               <button
                 key={tab.value}
-                className={`relative flex w-full items-center justify-center whitespace-nowrap rounded-md border p-1 px-3 text-sm sm:w-auto ${
+                className={`relative flex items-center justify-center rounded-md border p-1 px-3 text-sm ${
                   activeTab === tab.value ? ' border-gray-400 bg-gray-200 ' : ''
                 } w-full sm:w-auto`}
                 onClick={() => setActiveTab(tab.value)}

src/components/CustomRoadmap/RoadmapRenderer.css

@@ -0,0 +1,53 @@
+svg text tspan {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeSpeed;
+}
+
+svg > g[data-type='topic'],
+svg > g[data-type='subtopic'],
+svg > g > g[data-type='link-item'],
+svg > g[data-type='button'] {
+  cursor: pointer;
+}
+
+svg > g[data-type='topic']:hover > rect {
+  fill: #d6d700;
+}
+
+svg > g[data-type='subtopic']:hover > rect {
+  fill: #f3c950;
+}
+svg > g[data-type='button']:hover {
+  opacity: 0.8;
+}
+
+svg .done rect {
+  fill: #cbcbcb !important;
+}
+
+svg .done text,
+svg .skipped text {
+  text-decoration: line-through;
+}
+
+svg > g[data-type='topic'].learning > rect + text,
+svg > g[data-type='topic'].done > rect + text {
+  fill: black;
+}
+
+svg > g[data-type='subtipic'].done > rect + text,
+svg > g[data-type='subtipic'].learning > rect + text {
+  fill: #cbcbcb;
+}
+
+svg .learning rect {
+  fill: #dad1fd !important;
+}
+svg .learning text {
+  text-decoration: underline;
+}
+
+svg .skipped rect {
+  fill: #496b69 !important;
+}

src/components/CustomRoadmap/RoadmapRenderer.tsx

@@ -0,0 +1,177 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Renderer } from '../../../renderer';
+import './RoadmapRenderer.css';
+import {
+  renderResourceProgress,
+  updateResourceProgress,
+  type ResourceProgressType,
+  renderTopicProgress,
+  refreshProgressCounters,
+} from '../../lib/resource-progress';
+import { pageProgressMessage } from '../../stores/page';
+import { useToast } from '../../hooks/use-toast';
+import type { RoadmapDocument } from './CreateRoadmap/CreateRoadmapModal';
+import { EmptyRoadmap } from './EmptyRoadmap';
+import { isLoggedIn } from '../../lib/jwt';
+import { httpPost } from '../../lib/http';
+
+type RoadmapRendererProps = {
+  roadmap: RoadmapDocument;
+};
+
+type RoadmapNodeDetails = {
+  nodeId: string;
+  nodeType: string;
+  targetGroup: SVGElement;
+};
+
+export function getNodeDetails(
+  svgElement: SVGElement
+): RoadmapNodeDetails | null {
+  const targetGroup = (svgElement?.closest('g') as SVGElement) || {};
+
+  const nodeId = targetGroup?.dataset?.nodeId;
+  const nodeType = targetGroup?.dataset?.type;
+  if (!nodeId || !nodeType) return null;
+
+  return { nodeId, nodeType, targetGroup };
+}
+
+export const allowedClickableNodeTypes = [
+  'topic',
+  'subtopic',
+  'button',
+  'link-item',
+];
+
+export function RoadmapRenderer(props: RoadmapRendererProps) {
+  const { roadmap } = props;
+  const roadmapRef = useRef<HTMLDivElement>(null);
+  const roadmapId = roadmap._id!;
+
+  const toast = useToast();
+  const [hideRenderer, setHideRenderer] = useState(false);
+
+  async function updateTopicStatus(
+    topicId: string,
+    newStatus: ResourceProgressType
+  ) {
+    pageProgressMessage.set('Updating progress');
+    updateResourceProgress(
+      {
+        resourceId: roadmapId,
+        resourceType: 'roadmap',
+        topicId,
+      },
+      newStatus
+    )
+      .then(() => {
+        renderTopicProgress(topicId, newStatus);
+      })
+      .catch((err) => {
+        toast.error('Something went wrong, please try again.');
+        console.error(err);
+      })
+      .finally(() => {
+        pageProgressMessage.set('');
+        refreshProgressCounters();
+      });
+
+    return;
+  }
+
+  const handleSvgClick = useCallback((e: MouseEvent) => {
+    const target = e.target as SVGElement;
+    const { nodeId, nodeType, targetGroup } = getNodeDetails(target) || {};
+    if (!nodeId || !nodeType || !allowedClickableNodeTypes.includes(nodeType))
+      return;
+
+    if (nodeType === 'button' || nodeType === 'link-item') {
+      const link = targetGroup?.dataset?.link || '';
+      const isExternalLink = link.startsWith('http');
+      if (isExternalLink) {
+        window.open(link, '_blank');
+      } else {
+        window.location.href = link;
+      }
+      return;
+    }
+
+    const isCurrentStatusLearning = targetGroup?.classList.contains('learning');
+    const isCurrentStatusSkipped = targetGroup?.classList.contains('skipped');
+
+    if (e.shiftKey) {
+      e.preventDefault();
+      updateTopicStatus(
+        nodeId,
+        isCurrentStatusLearning ? 'pending' : 'learning'
+      );
+      return;
+    } else if (e.altKey) {
+      e.preventDefault();
+      updateTopicStatus(nodeId, isCurrentStatusSkipped ? 'pending' : 'skipped');
+      return;
+    }
+
+    window.dispatchEvent(
+      new CustomEvent('roadmap.node.click', {
+        detail: {
+          topicId: nodeId,
+          resourceId: roadmap?._id,
+          resourceType: 'roadmap',
+          isCustomResource: true,
+        },
+      })
+    );
+  }, []);
+
+  const handleSvgRightClick = useCallback((e: MouseEvent) => {
+    e.preventDefault();
+
+    const target = e.target as SVGElement;
+    const { nodeId, nodeType, targetGroup } = getNodeDetails(target) || {};
+    if (!nodeId || !nodeType || !allowedClickableNodeTypes.includes(nodeType))
+      return;
+
+    if (nodeType === 'button' || nodeType === 'link-item') {
+      return;
+    }
+
+    const isCurrentStatusDone = targetGroup?.classList.contains('done');
+    updateTopicStatus(nodeId, isCurrentStatusDone ? 'pending' : 'done');
+  }, []);
+
+  useEffect(() => {
+    if (!roadmapRef?.current) return;
+    roadmapRef?.current?.addEventListener('click', handleSvgClick);
+    roadmapRef?.current?.addEventListener('contextmenu', handleSvgRightClick);
+
+    return () => {
+      roadmapRef?.current?.removeEventListener('click', handleSvgClick);
+      roadmapRef?.current?.removeEventListener(
+        'contextmenu',
+        handleSvgRightClick
+      );
+    };
+  }, []);
+
+  return (
+    <div className="flex grow bg-gray-50 pb-8 pt-4 sm:pt-12">
+      <div className="container !max-w-[1000px]">
+        <Renderer
+          ref={roadmapRef}
+          roadmap={{ nodes: roadmap?.nodes!, edges: roadmap?.edges! }}
+          onRendered={() => {
+            renderResourceProgress('roadmap', roadmapId).then(() => {
+              if (roadmap?.nodes?.length === 0) {
+                setHideRenderer(true);
+                roadmapRef?.current?.classList.add('hidden');
+              }
+            });
+          }}
+        />
+        {hideRenderer && <EmptyRoadmap />}
+      </div>
+    </div>
+  );
+}

src/components/CustomRoadmap/SkeletonRoadmapHeader.tsx

@@ -2,25 +2,14 @@ export function SkeletonRoadmapHeader() {
   return (
     <div className="border-b">
       <div className="container relative py-5 sm:py-12">
-        <div className="flex items-center gap-1.5">
-          <div className="h-4 w-4 animate-pulse rounded-full bg-gray-300" />
-          <div className="h-5 w-5/12 animate-pulse rounded-md bg-gray-200" />
-        </div>
-        <div className="mb-3 mt-4 sm:mb-4">
+        <div className="mb-3 mt-0 sm:mb-4">
           <div className="h-8 w-1/2 animate-pulse rounded-md bg-gray-300 sm:mb-2 sm:h-10" />
           <div className="mt-0.5 h-5 w-1/3 animate-pulse rounded-md bg-gray-200 sm:h-7" />
         </div>
 
         <div className="flex justify-between gap-2 sm:gap-0">
-          <div className='flex gap-1 sm:gap-2'>
-            <div className="h-7 w-[35.04px] animate-pulse rounded-md bg-gray-300 sm:h-8 sm:w-32" />
-            <div className="h-7 w-[35.04px] animate-pulse rounded-md bg-gray-300 sm:h-8 sm:w-[85px]" />
-          </div>
-          <div className="flex items-center gap-2">
-            <div className="h-7 w-[60.52px] animate-pulse rounded-md bg-gray-300 sm:h-8 sm:w-[139.71px]" />
-            <div className="h-7 w-[71.48px] animate-pulse rounded-md bg-gray-300 sm:h-8 sm:w-[100.34px]" />
-            <div className="h-7 w-[32px] animate-pulse rounded-md bg-gray-300 sm:h-8 sm:w-[89.73px]" />
-          </div>
+          <div className="h-7 w-[35.04px] sm:w-32 animate-pulse rounded-md bg-gray-300 sm:h-8" />
+          <div className="h-7 w-[32px] sm:w-[89.73px] animate-pulse rounded-md bg-gray-300 sm:h-8" />
         </div>
 
         <div className="mb-0 mt-4 rounded-md border-0 sm:-mb-[65px] sm:mt-7 sm:border">

src/components/FeaturedItems/FeaturedItems.astro

@@ -42,7 +42,13 @@ const {
       {
         showCreateRoadmap && (
           <li>
-            <CreateRoadmapButton client:load className='min-h-[54px]' />
+            <CreateRoadmapButton
+              client:load
+              className='min-h-[54px]'
+              type={
+                heading.toLowerCase().indexOf('role') > -1 ? 'role' : 'skill'
+              }
+            />
           </li>
         )
       }

src/components/Footer.astro

@@ -31,8 +31,7 @@ import Icon from './AstroIcon.astro';
       <a
         class='px-2 py-1.5 transition-colors hover:text-white sm:border-b-0 sm:px-0 sm:py-0'
         href='https://youtube.com/theroadmap?sub_confirmation=1'
-        target='_blank'>YouTube</a
-      >
+        target='_blank'>YouTube</a>
     </p>
 
     <div class='flex flex-col justify-between gap-12 sm:flex-row'>
@@ -48,7 +47,7 @@ import Icon from './AstroIcon.astro';
           <span class='mx-2 text-gray-400'>by</span>
           <a
             class='font-regular rounded-md bg-blue-600 px-1.5 py-1 text-sm hover:bg-blue-700'
-            href='https://twitter.com/kamrify'
+            href='https://twitter.com/intent/user?screen_name=kamrify'
             target='_blank'
           >
             <span class='hidden sm:inline'>@kamrify</span>
@@ -68,30 +67,20 @@ import Icon from './AstroIcon.astro';
             <a href='/privacy' class='hover:text-white'>Privacy</a>
             <span class='mx-1.5'>&middot;</span>
             <a
-              aria-label='Write us an email'
-              href='mailto:info@roadmap.sh'
-              class='hover:text-white'
-            >
-              <AstroIcon icon='letter' class='inline-block h-5 w-5' />
-            </a>
-            <a
-              aria-label='Subscribe to YouTube channel'
+              aria-label="Subscribe to YouTube channel"
               href='https://youtube.com/theroadmap?sub_confirmation=1'
               target='_blank'
-              class='ml-2 hover:text-white'
+              class='hover:text-white'
             >
               <AstroIcon icon='youtube' class='inline-block h-5 w-5' />
             </a>
             <a
-              aria-label='Follow on Twitter'
+              aria-label="Follow on Twitter"
               href='https://twitter.com/roadmapsh'
               target='_blank'
               class='ml-2 hover:text-white'
             >
-              <AstroIcon
-                icon='twitter-fill'
-                class='inline-block h-5 w-5 fill-current'
-              />
+              <AstroIcon icon='twitter-fill' class='inline-block h-5 w-5 fill-current' />
             </a>
           </p>
         </div>

src/components/FrameRenderer/FrameRenderer.astro

@@ -1,7 +1,6 @@
 ---
 import Loader from '../Loader.astro';
 import './FrameRenderer.css';
-import { ProgressNudge } from "./ProgressNudge";
 
 export interface Props {
   resourceType: 'roadmap' | 'best-practice';
@@ -28,6 +27,4 @@ const { resourceId, resourceType, dimensions = null } = Astro.props;
   </div>
 </div>
 
-<ProgressNudge resourceId={resourceId} resourceType={resourceType} client:only="react" />
-
 <script src='./renderer.ts'></script>

src/components/FrameRenderer/ProgressNudge.tsx

@@ -1,65 +0,0 @@
-import { cn } from '../../lib/classname.ts';
-import { roadmapProgress, totalRoadmapNodes } from '../../stores/roadmap.ts';
-import { useStore } from '@nanostores/react';
-
-type ProgressNudgeProps = {
-  resourceType: 'roadmap' | 'best-practice';
-  resourceId: string;
-};
-
-export function ProgressNudge(props: ProgressNudgeProps) {
-  const $totalRoadmapNodes = useStore(totalRoadmapNodes);
-  const $roadmapProgress = useStore(roadmapProgress);
-
-  const done = $roadmapProgress?.done?.length || 0;
-
-  const hasProgress = done > 0;
-
-  if (!$totalRoadmapNodes) {
-    return null;
-  }
-
-  return (
-    <div
-      className={
-        'fixed bottom-5 left-1/2 z-30 hidden -translate-x-1/2 transform animate-fade-slide-up overflow-hidden rounded-full bg-stone-900 px-4 py-2 text-center text-white shadow-2xl transition-all duration-300 sm:block'
-      }
-    >
-      <span
-        className={cn('block', {
-          hidden: hasProgress,
-        })}
-      >
-        <span className="mr-2 text-sm font-semibold uppercase text-yellow-400">
-          Tip
-        </span>
-        <span className="text-sm text-gray-200">
-          Right-click on a topic to mark it as done.{' '}
-          <button
-            data-popup="progress-help"
-            className="cursor-pointer font-semibold text-yellow-500 underline"
-          >
-            Learn more.
-          </button>
-        </span>
-      </span>
-      <span
-        className={cn('relative z-20 block text-sm', {
-          hidden: !hasProgress,
-        })}
-      >
-        <span className="relative -top-[0.45px] mr-2 text-xs font-medium uppercase text-yellow-400">
-          Progress
-        </span>
-        <span>{done}</span> of <span>{$totalRoadmapNodes}</span> Done
-      </span>
-
-      <span
-        className="absolute bottom-0 left-0 top-0 z-10 bg-stone-700"
-        style={{
-          width: `${(done / $totalRoadmapNodes) * 100}%`,
-        }}
-      ></span>
-    </div>
-  );
-}

src/components/FrameRenderer/renderer.ts

@@ -7,13 +7,9 @@ import {
   renderTopicProgress,
   updateResourceProgress,
 } from '../../lib/resource-progress';
-import type {
-  ResourceProgressType,
-  ResourceType,
-} from '../../lib/resource-progress';
+import type { ResourceProgressType, ResourceType } from '../../lib/resource-progress';
 import { pageProgressMessage } from '../../stores/page';
 import { showLoginPopup } from '../../lib/popup';
-import { replaceChildren } from '../../lib/dom.ts';
 
 export class Renderer {
   resourceId: string;
@@ -92,13 +88,12 @@ export class Renderer {
         });
       })
       .then((svg) => {
-        replaceChildren(this.containerEl!, svg);
-        // this.containerEl?.replaceChildren(svg);
+        this.containerEl?.replaceChildren(svg);
       })
       .then(() => {
         return renderResourceProgress(
           this.resourceType as ResourceType,
-          this.resourceId,
+          this.resourceId
         );
       })
       .catch((error) => {
@@ -117,6 +112,19 @@ export class Renderer {
       });
   }
 
+  trackVisit() {
+    if (!isLoggedIn()) {
+      return;
+    }
+
+    window.setTimeout(() => {
+      httpPost(`${import.meta.env.PUBLIC_API_URL}/v1-visit`, {
+        resourceId: this.resourceId,
+        resourceType: this.resourceType,
+      }).then(() => null);
+    }, 0);
+  }
+
   onDOMLoaded() {
     if (!this.prepareConfig()) {
       return;
@@ -125,13 +133,15 @@ export class Renderer {
     const urlParams = new URLSearchParams(window.location.search);
     const roadmapType = urlParams.get('r');
 
+    this.trackVisit();
+
     if (roadmapType) {
       this.switchRoadmap(`/${roadmapType}.json`);
     } else {
       this.jsonToSvg(
         this.resourceType === 'roadmap'
           ? `/${this.resourceId}.json`
-          : `/best-practices/${this.resourceId}.json`,
+          : `/best-practices/${this.resourceId}.json`
       );
     }
   }
@@ -171,7 +181,7 @@ export class Renderer {
         resourceType: this.resourceType as ResourceType,
         topicId,
       },
-      newStatus,
+      newStatus
     )
       .then(() => {
         renderTopicProgress(topicId, newStatus);
@@ -203,14 +213,9 @@ export class Renderer {
 
     const isCurrentStatusDone = targetGroup.classList.contains('done');
     const normalizedGroupId = groupId.replace(/^\d+-/, '');
-
-    if (normalizedGroupId.startsWith('ext_link:')) {
-      return;
-    }
-
     this.updateTopicStatus(
       normalizedGroupId,
-      !isCurrentStatusDone ? 'done' : 'pending',
+      !isCurrentStatusDone ? 'done' : 'pending'
     );
   }
 
@@ -236,12 +241,9 @@ export class Renderer {
           action: `${this.resourceType} / ${this.resourceId}`,
           label: externalLink,
         });
-
-        window.open(`https://${externalLink}`);
-      } else {
-        window.location.href = `https://${externalLink}`;
       }
 
+      window.open(`https://${externalLink}`);
       return;
     }
 
@@ -261,7 +263,7 @@ export class Renderer {
             resourceType: this.resourceType,
             resourceId: this.resourceId,
           },
-        }),
+        })
       );
       return;
     }
@@ -276,7 +278,7 @@ export class Renderer {
       e.preventDefault();
       this.updateTopicStatus(
         normalizedGroupId,
-        !isCurrentStatusLearning ? 'learning' : 'pending',
+        !isCurrentStatusLearning ? 'learning' : 'pending'
       );
       return;
     }
@@ -285,7 +287,7 @@ export class Renderer {
       e.preventDefault();
       this.updateTopicStatus(
         normalizedGroupId,
-        !isCurrentStatusSkipped ? 'skipped' : 'pending',
+        !isCurrentStatusSkipped ? 'skipped' : 'pending'
       );
 
       return;
@@ -298,7 +300,7 @@ export class Renderer {
           resourceId: this.resourceId,
           resourceType: this.resourceType,
         },
-      }),
+      })
     );
   }