chore: upgrade to astro v3 (#4437)

astro.config.mjs

@@ -45,22 +45,6 @@ export default defineConfig({
     format: 'file',
   },
   integrations: [
-    {
-      name: 'client-authenticated',
-      hooks: {
-        'astro:config:setup'(options) {
-          options.addClientDirective({
-            name: 'authenticated',
-            entrypoint: fileURLToPath(
-              new URL(
-                './src/directives/client-authenticated.mjs',
-                import.meta.url
-              )
-            ),
-          });
-        },
-      },
-    },
     tailwind({
       config: {
         applyBaseStyles: false,
@@ -71,6 +55,7 @@ export default defineConfig({
       serialize: serializeSitemap,
     }),
     compress({
+      HTML: false,
       CSS: false,
       JavaScript: false,
     }),

package.json

@@ -4,7 +4,7 @@
   "version": "0.0.1",
   "private": true,
   "scripts": {
-    "dev": "astro dev",
+    "dev": "astro dev --port 3000",
     "start": "astro dev",
     "build": "astro build",
     "preview": "astro preview",
@@ -21,14 +21,14 @@
     "test:e2e": "playwright test"
   },
   "dependencies": {
-    "@astrojs/react": "^2.2.2",
+    "@astrojs/react": "^3.0.0",
     "@astrojs/sitemap": "^1.3.3",
-    "@astrojs/tailwind": "^3.1.3",
+    "@astrojs/tailwind": "^5.0.0",
     "@fingerprintjs/fingerprintjs": "^3.4.1",
     "@nanostores/react": "^0.7.1",
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
-    "astro": "^2.6.6",
+    "astro": "^3.0.5",
     "astro-compress": "^2.0.8",
     "jose": "^4.14.4",
     "js-cookie": "^3.0.5",
@@ -40,7 +40,7 @@
     "rehype-external-links": "^2.1.0",
     "roadmap-renderer": "^1.0.6",
     "slugify": "^1.6.6",
-    "tailwindcss": "^3.3.2"
+    "tailwindcss": "^3.0.23"
   },
   "devDependencies": {
     "@playwright/test": "^1.35.1",

src/components/Activity/EmptyActivity.tsx

@@ -6,7 +6,7 @@ export function EmptyActivity() {
       <div className="flex flex-col items-center p-7 text-center">
         <img
           alt="no roadmaps"
-          src={RoadmapIcon}
+          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>

src/components/AuthenticationFlow/EmailLoginForm.tsx

@@ -4,7 +4,7 @@ import { useState } from 'react';
 import { httpPost } from '../../lib/http';
 import { TOKEN_COOKIE_NAME } from '../../lib/jwt';
 
-const EmailLoginForm = () => {
+export function EmailLoginForm() {
   const [email, setEmail] = useState<string>('');
   const [password, setPassword] = useState<string>('');
   const [error, setError] = useState('');
@@ -99,6 +99,4 @@ const EmailLoginForm = () => {
       </button>
     </form>
   );
-};
+}
-
-export default EmailLoginForm;

src/components/AuthenticationFlow/EmailSignupForm.tsx

@@ -1,8 +1,7 @@
-import type { FunctionComponent } from 'preact';
+import { type FormEvent, useState } from 'react';
-import { useState } from 'react';
 import { httpPost } from '../../lib/http';
 
-const EmailSignupForm: FunctionComponent = () => {
+export function EmailSignupForm() {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [name, setName] = useState('');
@@ -10,7 +9,7 @@ const EmailSignupForm: FunctionComponent = () => {
   const [error, setError] = useState('');
   const [isLoading, setIsLoading] = useState(false);
 
-  const onSubmit = async (e: Event) => {
+  const onSubmit = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
     setIsLoading(true);
@@ -98,6 +97,4 @@ const EmailSignupForm: FunctionComponent = () => {
       </button>
     </form>
   );
-};
+}
-
-export default EmailSignupForm;

src/components/AuthenticationFlow/ForgotPasswordForm.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { type FormEvent, useState } from 'react';
 import { httpPost } from '../../lib/http';
 
 export function ForgotPasswordForm() {
@@ -7,7 +7,7 @@ export function ForgotPasswordForm() {
   const [error, setError] = useState('');
   const [success, setSuccess] = useState('');
 
-  const handleSubmit = async (e: Event) => {
+  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     setIsLoading(true);
     setError('');

src/components/AuthenticationFlow/GitHubButton.tsx

@@ -1,5 +1,4 @@
 import { useEffect, useState } from 'react';
-
 import GitHubIcon from '../../icons/github.svg';
 import SpinnerIcon from '../../icons/spinner.svg';
 import Cookies from 'js-cookie';
@@ -91,10 +90,11 @@ export function GitHubButton(props: GitHubButtonProps) {
     // 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 =
+      const pagePath = ['/respond-invite', '/befriend'].includes(
-        ['/respond-invite', '/befriend'].includes(window.location.pathname)
+        window.location.pathname
-          ? window.location.pathname + window.location.search
+      )
-          : window.location.pathname;
+        ? window.location.pathname + window.location.search
+        : window.location.pathname;
 
       localStorage.setItem(GITHUB_REDIRECT_AT, Date.now().toString());
       localStorage.setItem(GITHUB_LAST_PAGE, pagePath);
@@ -111,7 +111,7 @@ export function GitHubButton(props: GitHubButtonProps) {
         onClick={handleClick}
       >
         <img
-          src={icon as any}
+          src={icon.src}
           alt="GitHub"
           className={`h-[18px] w-[18px] ${isLoading ? 'animate-spin' : ''}`}
         />

src/components/AuthenticationFlow/GoogleButton.tsx

@@ -111,7 +111,7 @@ export function GoogleButton(props: GoogleButtonProps) {
         onClick={handleClick}
       >
         <img
-          src={icon as any}
+          src={icon.src}
           alt="Google"
           className={`h-[18px] w-[18px] ${isLoading ? 'animate-spin' : ''}`}
         />

src/components/AuthenticationFlow/LinkedInButton.tsx

@@ -86,10 +86,11 @@ export function LinkedInButton(props: LinkedInButtonProps) {
         // For non authentication pages, we want to redirect back to the page
         // the user was on before they clicked the social login button
         if (!['/login', '/signup'].includes(window.location.pathname)) {
-          const pagePath =
+          const pagePath = ['/respond-invite', '/befriend'].includes(
-            ['/respond-invite', '/befriend'].includes(window.location.pathname)
+            window.location.pathname
-              ? window.location.pathname + window.location.search
+          )
-              : window.location.pathname;
+            ? window.location.pathname + window.location.search
+            : window.location.pathname;
 
           localStorage.setItem(LINKEDIN_REDIRECT_AT, Date.now().toString());
           localStorage.setItem(LINKEDIN_LAST_PAGE, pagePath);
@@ -111,7 +112,7 @@ export function LinkedInButton(props: LinkedInButtonProps) {
         onClick={handleClick}
       >
         <img
-          src={icon as any}
+          src={icon.src}
           alt="Google"
           className={`h-[18px] w-[18px] ${isLoading ? 'animate-spin' : ''}`}
         />

src/components/AuthenticationFlow/LoginPopup.astro

@@ -1,6 +1,6 @@
 ---
 import Popup from '../Popup/Popup.astro';
-import EmailLoginForm from './EmailLoginForm';
+import { EmailLoginForm } from './EmailLoginForm';
 import Divider from './Divider.astro';
 import { GitHubButton } from './GitHubButton';
 import { GoogleButton } from './GoogleButton';

src/components/AuthenticationFlow/ResetPasswordForm.tsx

@@ -1,9 +1,9 @@
-import { useEffect, useState } from 'react';
+import { type FormEvent, useEffect, useState } from 'react';
 import { httpPost } from '../../lib/http';
 import Cookies from 'js-cookie';
 import { TOKEN_COOKIE_NAME } from '../../lib/jwt';
 
-export default function ResetPasswordForm() {
+export function ResetPasswordForm() {
   const [code, setCode] = useState('');
   const [password, setPassword] = useState('');
   const [passwordConfirm, setPasswordConfirm] = useState('');
@@ -21,7 +21,7 @@ export default function ResetPasswordForm() {
     }
   }, []);
 
-  const handleSubmit = async (e: Event) => {
+  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     setIsLoading(true);
 

src/components/AuthenticationFlow/TriggerVerifyAccount.tsx

@@ -1,10 +1,9 @@
-import SpinnerIcon from '../../icons/spinner.svg';
-import ErrorIcon from '../../icons/error.svg';
-
 import { useEffect, useState } from 'react';
 import Cookies from 'js-cookie';
-import { TOKEN_COOKIE_NAME } from '../../lib/jwt';
 import { httpPost } from '../../lib/http';
+import ErrorIcon from '../../icons/error.svg';
+import SpinnerIcon from '../../icons/spinner.svg';
+import { TOKEN_COOKIE_NAME } from '../../lib/jwt';
 
 export function TriggerVerifyAccount() {
   const [isLoading, setIsLoading] = useState(true);
@@ -59,14 +58,14 @@ export function TriggerVerifyAccount() {
         {isLoading && (
           <img
             alt={'Please wait.'}
-            src={SpinnerIcon}
+            src={SpinnerIcon.src}
             className={'mx-auto h-16 w-16 animate-spin'}
           />
         )}
         {error && (
           <img
             alt={'Please wait.'}
-            src={ErrorIcon}
+            src={ErrorIcon.src}
             className={'mx-auto h-16 w-16'}
           />
         )}

src/components/AuthenticationFlow/VerificationEmailMessage.tsx

@@ -1,5 +1,5 @@
-import VerifyLetterIcon from '../../icons/verify-letter.svg';
 import { useEffect, useState } from 'react';
+import VerifyLetterIcon from '../../icons/verify-letter.svg';
 import { httpPost } from '../../lib/http';
 
 export function VerificationEmailMessage() {
@@ -39,7 +39,7 @@ export function VerificationEmailMessage() {
     <div className="mx-auto max-w-md text-center">
       <img
         alt="Verify Email"
-        src={VerifyLetterIcon as any}
+        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">

src/components/Befriend.tsx

@@ -141,7 +141,7 @@ export function Befriend() {
   const isMe = currentUser?.id === user.id;
 
   return (
-    <div className="container max-w-[400px] text-center">
+    <div className="container !max-w-[400px] text-center">
       <img
         alt={'join team'}
         src={userAvatar}

src/components/Breadcrumbs.astro

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

src/components/CommandMenu/CommandMenu.tsx

@@ -22,13 +22,13 @@ export type PageType = {
 };
 
 const defaultPages: PageType[] = [
-  { id: 'home', url: '/', title: 'Home', group: 'Pages', icon: HomeIcon },
+  { id: 'home', url: '/', title: 'Home', group: 'Pages', icon: HomeIcon.src },
   {
     id: 'account',
     url: '/account',
     title: 'Account',
     group: 'Pages',
-    icon: UserIcon,
+    icon: UserIcon.src,
     isProtected: true,
   },
   {
@@ -36,7 +36,7 @@ const defaultPages: PageType[] = [
     url: '/team',
     title: 'Teams',
     group: 'Pages',
-    icon: GroupIcon,
+    icon: GroupIcon.src,
     isProtected: true,
   },
   {
@@ -44,28 +44,28 @@ const defaultPages: PageType[] = [
     url: '/roadmaps',
     title: 'Roadmaps',
     group: 'Pages',
-    icon: RoadmapIcon,
+    icon: RoadmapIcon.src,
   },
   {
     id: 'best-practices',
     url: '/best-practices',
     title: 'Best Practices',
     group: 'Pages',
-    icon: BestPracticesIcon,
+    icon: BestPracticesIcon.src,
   },
   {
     id: 'guides',
     url: '/guides',
     title: 'Guides',
     group: 'Pages',
-    icon: GuideIcon,
+    icon: GuideIcon.src,
   },
   {
     id: 'videos',
     url: '/videos',
     title: 'Videos',
     group: 'Pages',
-    icon: VideoIcon,
+    icon: VideoIcon.src,
   },
 ];
 
@@ -221,7 +221,7 @@ export function CommandMenu() {
                       {page.icon && (
                         <img
                           alt={page.title}
-                          src={page.icon as any}
+                          src={page.icon}
                           className="mr-2 h-4 w-4"
                         />
                       )}

src/components/CreateTeam/CreateTeamForm.tsx

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

src/components/CreateTeam/NotDropdown.tsx

@@ -39,7 +39,7 @@ export function NotDropdown(props: NotDropdownProps) {
 
       <img
         alt={singularName}
-        src={ChevronDownIcon}
+        src={ChevronDownIcon.src}
         className={'relative top-[1px] h-[17px] w-[17px] opacity-40'}
       />
     </div>

src/components/CreateTeam/SelectRoadmapModal.tsx

@@ -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}
           >
-            <img alt={'close'} src={CloseIcon} 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

src/components/CreateTeam/Step1.tsx

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

src/components/CreateTeam/Step2.tsx

@@ -1,4 +1,4 @@
-import { RoadmapSelector, TeamResourceConfig } from './RoadmapSelector';
+import { RoadmapSelector, type TeamResourceConfig } from './RoadmapSelector';
 import type { TeamDocument } from './CreateTeamForm';
 
 type Step2Props = {

src/components/CreateTeam/Step3.tsx

@@ -1,7 +1,7 @@
 import type { TeamDocument } from './CreateTeamForm';
 import { NextButton } from './NextButton';
 import { TrashIcon } from '../ReactIcons/TrashIcon';
-import { AllowedRoles, RoleDropdown } from './RoleDropdown';
+import { type AllowedRoles, RoleDropdown } from './RoleDropdown';
 import { useEffect, useRef, useState } from 'react';
 import { httpPost } from '../../lib/http';
 

src/components/DeleteAccount/DeleteAccountForm.tsx

@@ -1,4 +1,4 @@
-import {useEffect, useState} from 'react';
+import { type FormEvent, useEffect, useState } from 'react';
 import { httpDelete } from '../../lib/http';
 import { logout } from '../Navigation/navigation';
 
@@ -10,9 +10,9 @@ export function DeleteAccountForm() {
   useEffect(() => {
     setError('');
     setConfirmationText('');
-  }, [])
+  }, []);
 
-  const handleSubmit = async (e: Event) => {
+  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     setIsLoading(true);
     setError('');
@@ -53,7 +53,7 @@ export function DeleteAccountForm() {
           type="text"
           name="delete-account"
           id="delete-account"
-          className="mt-2 block w-full rounded-md border border-gray-300 py-2 px-3 outline-none placeholder:text-gray-400 focus:border-gray-400"
+          className="mt-2 block w-full rounded-md border border-gray-300 px-3 py-2 outline-none placeholder:text-gray-400 focus:border-gray-400"
           placeholder={'Type "delete" to confirm'}
           required
           autoFocus

src/components/DeleteTeamPopup.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import { type FormEvent, useEffect, useRef, useState } from 'react';
 import { httpDelete } from '../lib/http';
 import type { TeamDocument } from './CreateTeam/CreateTeamForm';
 import { useTeamId } from '../hooks/use-team-id';
@@ -34,7 +34,7 @@ export function DeleteTeamPopup(props: DeleteTeamPopupProps) {
     inputEl.current?.focus();
   }, []);
 
-  const handleSubmit = async (e: Event) => {
+  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     setIsLoading(true);
     setError('');

src/components/Feedback/SubmitFeedbackPopup.tsx

@@ -1,4 +1,4 @@
-import { FormEvent, useEffect, useRef, useState } from 'react';
+import { type FormEvent, useEffect, useRef, useState } from 'react';
 import { useToast } from '../../hooks/use-toast';
 import { useTeamId } from '../../hooks/use-team-id';
 import { useOutsideClick } from '../../hooks/use-outside-click';

src/components/FrameRenderer/renderer.ts

@@ -5,10 +5,9 @@ import {
   refreshProgressCounters,
   renderResourceProgress,
   renderTopicProgress,
-  ResourceProgressType,
-  ResourceType,
   updateResourceProgress,
 } from '../../lib/resource-progress';
+import type { ResourceProgressType, ResourceType } from '../../lib/resource-progress';
 import { pageProgressMessage } from '../../stores/page';
 import { showLoginPopup } from '../../lib/popup';
 

src/components/Friends/EmptyFriends.tsx

@@ -15,7 +15,7 @@ export function EmptyFriends(props: EmptyFriendsProps) {
       <div className="mx-auto flex flex-col items-center p-7 text-center">
         <img
           alt="no friends"
-          src={UserPlusIcon as any}
+          src={UserPlusIcon.src}
           className="mb-2 h-[60px] w-[60px] opacity-10 sm:h-[120px] sm:w-[120px]"
         />
         <h2 className="text-lg font-bold sm:text-xl">Invite your Friends</h2>
@@ -44,7 +44,7 @@ export function EmptyFriends(props: EmptyFriendsProps) {
               copyText(befriendUrl);
             }}
           >
-            <img src={CopyIcon as any} className="h-4 w-4" alt="Invite Friends" />
+            <img src={CopyIcon.src} className="h-4 w-4" alt="Invite Friends" />
             {isCopied ? 'Copied' : 'Copy'}
           </button>
         </div>

src/components/Friends/FriendsPage.tsx

@@ -188,7 +188,7 @@ export function FriendsPage() {
       {filteredFriends.length === 0 && (
         <div className="flex flex-col items-center justify-center py-12">
           <img
-            src={UserIcon}
+            src={UserIcon.src}
             alt="Empty Friends"
             className="mb-3 w-12 opacity-20"
           />

src/components/Friends/InviteFriendPopup.tsx

@@ -1,4 +1,5 @@
-import { useEffect, useRef } from 'react';
+import type { MouseEvent } from 'react';
+import { useRef } from 'react';
 import { useOutsideClick } from '../../hooks/use-outside-click';
 import CopyIcon from '../../icons/copy.svg';
 import { useCopyText } from '../../hooks/use-copy-text';
@@ -38,8 +39,8 @@ export function InviteFriendPopup(props: InviteFriendPopupProps) {
               readOnly={true}
               className="mt-2 block w-full rounded-md border border-gray-300 px-3 py-2 outline-none placeholder:text-gray-400 focus:border-gray-400"
               value={befriendUrl}
-              onClick={(e) => {
+              onClick={(e: MouseEvent<HTMLInputElement>) => {
-                e?.target?.select();
+                (e?.target as HTMLInputElement)?.select();
                 copyText(befriendUrl);
               }}
             />
@@ -53,7 +54,11 @@ export function InviteFriendPopup(props: InviteFriendPopupProps) {
                 copyText(befriendUrl);
               }}
             >
-              <img src={CopyIcon} className="h-4 w-4" alt="Invite Friends" />
+              <img
+                src={CopyIcon.src}
+                className="h-4 w-4"
+                alt="Invite Friends"
+              />
               {isCopied ? 'Copied' : 'Copy URL'}
             </button>
           </div>

src/components/Friends/SidebarFriendsCounter.tsx

@@ -1,5 +1,4 @@
 import { httpGet } from '../../lib/http';
-import type { TeamListResponse } from '../TeamDropdown/TeamDropdown';
 import { useEffect, useState } from 'react';
 
 type GetFriendCountsResponse = {

src/components/Notification/NotificationPage.tsx

@@ -91,14 +91,14 @@ export function NotificationPage() {
                 className="inline-flex border p-1 rounded hover:bg-gray-50 disabled:opacity-75"
                 onClick={() => respondInvitation('accept', notification?._id!)}
               >
-                <img src={AcceptIcon} className="h-4 w-4" />
+                <img src={AcceptIcon.src} className="h-4 w-4" />
               </button>
               <button type="button"
                 disabled={isLoading}
                 className="inline-flex border p-1 rounded hover:bg-gray-50 disabled:opacity-75"
                 onClick={() => respondInvitation('reject', notification?._id!)}
               >
-                <img src={XIcon} className="h-4 w-4" />
+                <img alt={'Close'} src={XIcon.src} className="h-4 w-4" />
               </button>
             </div>
           </div>

src/components/OpenSourceBanner.astro

@@ -6,7 +6,7 @@ const starCount = await getFormattedStars('kamranahmedse/developer-roadmap');
 ---
 
 <div class='py-6 sm:py-16 border-b border-t text-left sm:text-center bg-white'>
-  <div class='max-w-[600px] container'>
+  <div class='!max-w-[600px] container'>
     <h2 class='text-2xl sm:text-5xl font-bold'>Community</h2>
     <p class='text-gray-600 text-sm sm:text-lg leading-relaxed my-2.5 sm:my-5'>
       roadmap.sh is the <a

src/components/PageProgress.tsx

@@ -31,7 +31,7 @@ export function PageProgress(props: Props) {
       <div className="fixed left-0 top-0 z-50 flex h-full w-full items-center justify-center bg-white bg-opacity-75">
         <div className="flex  items-center justify-center rounded-md border bg-white px-4 py-2 ">
           <img
-            src={SpinnerIcon as any}
+            src={SpinnerIcon.src}
             alt="Loading"
             className="h-4 w-4 animate-spin fill-blue-600 text-gray-200 sm:h-4 sm:w-4"
           />

src/components/PageSponsor.tsx

@@ -101,7 +101,7 @@ export function PageSponsor(props: PageSponsorProps) {
           sponsorHidden.set(true);
         }}
       >
-        <img alt="Close" className="h-4 w-4" src={CloseIcon as any} />
+        <img alt="Close" className="h-4 w-4" src={CloseIcon.src} />
       </span>
       <img
         src={imageUrl}

src/components/RespondInviteForm.tsx

@@ -87,7 +87,7 @@ export function RespondInviteForm() {
       <div className="container text-center">
         <img
           alt={'error'}
-          src={ErrorIcon}
+          src={ErrorIcon.src}
           className="mx-auto mb-4 mt-24 w-20 opacity-20"
         />
 
@@ -112,7 +112,7 @@ export function RespondInviteForm() {
     <div className="container text-center">
       <img
         alt={'join team'}
-        src={BuildingIcon}
+        src={BuildingIcon.src}
         className="mx-auto mb-4 mt-24 w-20 opacity-20"
       />
 

src/components/RoadCard/Editor.tsx

@@ -24,7 +24,7 @@ export function Editor(props: EditorProps) {
             </span>
           )}
 
-          <img src={CopyIcon} alt="Copy" className="inline-block h-4 w-4" />
+          <img src={CopyIcon.src} alt="Copy" className="inline-block h-4 w-4" />
         </button>
       </div>
       <textarea

src/components/RoadCard/RoadCardPage.tsx

@@ -146,7 +146,7 @@ export function RoadCardPage() {
               className="flex cursor-pointer items-center justify-center rounded border border-gray-300 p-1.5 px-2 text-sm font-medium disabled:bg-blue-50"
               onClick={() => copyText(badgeUrl.toString())}
             >
-              <img alt="Copy" src={CopyIcon} className="mr-1" />
+              <img alt="Copy" src={CopyIcon.src} className="mr-1" />
 
               {isCopied ? 'Copied!' : 'Copy Link'}
             </button>

src/components/TeamDropdown/TeamDropdown.tsx

@@ -140,7 +140,7 @@ export function TeamDropdown() {
               {isLoading && 'Loading ..'}
             </span>
           </div>
-          <img alt={'show dropdown'} src={ChevronDown} className="h-4 w-4" />
+          <img alt={'show dropdown'} src={ChevronDown.src} className="h-4 w-4" />
         </button>
 
         {showDropdown && (

src/components/TeamMembers/InviteMemberPopup.tsx

@@ -1,8 +1,8 @@
-import { FormEvent, useEffect, useRef, useState } from 'react';
+import { type FormEvent, useEffect, useRef, useState } from 'react';
 import { httpPost } from '../../lib/http';
 import { useTeamId } from '../../hooks/use-team-id';
 import { useOutsideClick } from '../../hooks/use-outside-click';
-import { AllowedRoles, RoleDropdown } from '../CreateTeam/RoleDropdown';
+import { type AllowedRoles, RoleDropdown } from '../CreateTeam/RoleDropdown';
 
 type InviteMemberPopupProps = {
   onInvited: () => void;

src/components/TeamMembers/LeaveTeamPopup.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import { type FormEvent, useEffect, useRef, useState } from 'react';
 import { httpDelete } from '../../lib/http';
 import { useTeamId } from '../../hooks/use-team-id';
 import { useOutsideClick } from '../../hooks/use-outside-click';
@@ -23,7 +23,7 @@ export function LeaveTeamPopup(props: LeaveTeamPopupProps) {
     confirmationEl?.current?.focus();
   }, []);
 
-  const handleSubmit = async (e: Event) => {
+  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     setIsLoading(true);
     setError('');

src/components/TeamMembers/MemberActionDropdown.tsx

@@ -81,7 +81,7 @@ export function MemberActionDropdown({
         onClick={() => setIsOpen(!isOpen)}
         className="ml-2 flex items-center opacity-60 transition-opacity hover:opacity-100 disabled:cursor-not-allowed disabled:opacity-30"
       >
-        <img alt="menu" src={MoreIcon} className="h-4 w-4" />
+        <img alt="menu" src={MoreIcon.src} className="h-4 w-4" />
       </button>
 
       {isOpen && (

src/components/TeamMembers/UpdateMemberPopup.tsx

@@ -1,8 +1,8 @@
-import { FormEvent, useRef, useState } from 'react';
+import { type FormEvent, useRef, useState } from 'react';
 import { httpPut } from '../../lib/http';
 import { useTeamId } from '../../hooks/use-team-id';
 import { useOutsideClick } from '../../hooks/use-outside-click';
-import { AllowedRoles, RoleDropdown } from '../CreateTeam/RoleDropdown';
+import { type AllowedRoles, RoleDropdown } from '../CreateTeam/RoleDropdown';
 import type { TeamMemberDocument } from './TeamMembersPage';
 
 type InviteMemberPopupProps = {

src/components/TeamProgress/GroupRoadmapItem.tsx

@@ -31,7 +31,7 @@ export function GroupRoadmapItem(props: GroupRoadmapItemProps) {
             >
               <img
                 alt={'link'}
-                src={ExternalLinkIcon}
+                src={ExternalLinkIcon.src}
                 className="ml-2 h-4 w-4 opacity-20 transition-opacity group-hover:opacity-100"
               />
             </a>

src/components/TeamProgress/MemberProgressModal.tsx

@@ -8,8 +8,8 @@ import type { TeamMember } from './TeamProgressPage';
 import { httpGet } from '../../lib/http';
 import {
   renderTopicProgress,
-  ResourceProgressType,
+  type ResourceProgressType,
-  ResourceType,
+  type ResourceType,
   updateResourceProgress,
 } from '../../lib/resource-progress';
 import CloseIcon from '../../icons/close.svg';
@@ -413,7 +413,7 @@ export function MemberProgressModal(props: ProgressMapProps) {
             }`}
             onClick={onClose}
           >
-            <img alt={'close'} src={CloseIcon} className="h-4 w-4" />
+            <img alt={'close'} src={CloseIcon.src} className="h-4 w-4" />
             <span className="sr-only">Close modal</span>
           </button>
         </div>

src/components/TeamRoadmaps.tsx

@@ -188,7 +188,7 @@ export function TeamRoadmaps() {
         {addRoadmapModal}
         <img
           alt="roadmap"
-          src={RoadmapIcon}
+          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>
@@ -259,7 +259,7 @@ export function TeamRoadmaps() {
 
                   <img
                     alt={'link'}
-                    src={ExternalLinkIcon}
+                    src={ExternalLinkIcon.src}
                     className="ml-2 h-4 w-4 opacity-20 transition-opacity group-hover:opacity-100"
                   />
                 </a>
@@ -332,7 +332,7 @@ export function TeamRoadmaps() {
           >
             <img
               alt="add"
-              src={PlusIcon}
+              src={PlusIcon.src}
               className="mb-1 h-6 w-6 opacity-20 transition-opacity group-hover:opacity-100"
             />
             <span className="text-sm text-gray-400 transition-colors focus:outline-none group-hover:text-black">

src/components/TeamSettings/UpdateTeamForm.tsx

@@ -1,4 +1,4 @@
-import { FormEvent, useEffect, useState } from 'react';
+import { type FormEvent, useEffect, useState } from 'react';
 import { httpGet, httpPut } from '../../lib/http';
 import { Spinner } from '../ReactIcons/Spinner';
 import UploadProfilePicture from '../UpdateProfile/UploadProfilePicture';
@@ -9,7 +9,6 @@ import { DeleteTeamPopup } from '../DeleteTeamPopup';
 import { $isCurrentTeamAdmin } from '../../stores/team';
 import { useStore } from '@nanostores/react';
 import { useToast } from '../../hooks/use-toast';
-
 export function UpdateTeamForm() {
   const [isLoading, setIsLoading] = useState(false);
   const [isDeleting, setIsDeleting] = useState(false);
@@ -25,8 +24,6 @@ export function UpdateTeamForm() {
   const [gitHub, setGitHub] = useState('');
   const [teamType, setTeamType] = useState('');
   const [teamSize, setTeamSize] = useState('');
-  const [roadmaps, setRoadmaps] = useState<string[]>([]);
-  const [bestPractices, setBestPractices] = useState<string[]>([]);
   const validTeamSizes = [
     '0-1',
     '2-10',

src/components/TeamSidebar.tsx

@@ -29,26 +29,26 @@ export function TeamSidebar({ activePageId, children }: TeamSidebarProps) {
       title: 'Progress',
       href: `/team/progress?t=${teamId}`,
       id: 'progress',
-      icon: TeamProgress,
+      icon: TeamProgress.src,
     },
     {
       title: 'Roadmaps',
       href: `/team/roadmaps?t=${teamId}`,
       id: 'roadmaps',
-      icon: MapIcon,
+      icon: MapIcon.src,
       hasWarning: currentTeam?.roadmaps?.length === 0,
     },
     {
       title: 'Members',
       href: `/team/members?t=${teamId}`,
       id: 'members',
-      icon: GroupIcon,
+      icon: GroupIcon.src,
     },
     {
       title: 'Settings',
       href: `/team/settings?t=${teamId}`,
       id: 'settings',
-      icon: SettingsIcon,
+      icon: SettingsIcon.src,
     },
   ];
 
@@ -66,7 +66,7 @@ export function TeamSidebar({ activePageId, children }: TeamSidebarProps) {
             sidebarLinks.find((sidebarLink) => sidebarLink.id === activePageId)
               ?.title
           }
-          <img alt="menu" src={ChevronDown} className="h-4 w-4" />
+          <img alt="menu" src={ChevronDown.src} className="h-4 w-4" />
         </button>
         {menuShown && (
           <ul
@@ -80,7 +80,7 @@ export function TeamSidebar({ activePageId, children }: TeamSidebarProps) {
                   activePageId === 'team' ? 'bg-slate-100' : ''
                 }`}
               >
-                <img alt={'teams'} src={GroupIcon} className={`mr-2 h-4 w-4`} />
+                <img alt={'teams'} src={GroupIcon.src} className={`mr-2 h-4 w-4`} />
                 Personal Account / Teams
               </a>
             </li>
@@ -113,7 +113,7 @@ export function TeamSidebar({ activePageId, children }: TeamSidebarProps) {
               >
                 <img
                   alt={'menu icon'}
-                  src={ChatIcon}
+                  src={ChatIcon.src}
                   className="mr-2 h-4 w-4"
                 />
                 Send Feedback
@@ -174,7 +174,7 @@ export function TeamSidebar({ activePageId, children }: TeamSidebarProps) {
               className="mr-3 mt-4 flex items-center justify-center rounded-md border p-2 text-sm text-gray-500 transition-colors hover:border-gray-300 hover:bg-gray-50 hover:text-black"
               onClick={() => setShowFeedbackPopup(true)}
             >
-              <img alt={'feedback'} src={ChatIcon} className="mr-2 h-4 w-4" />
+              <img alt={'feedback'} src={ChatIcon.src} className="mr-2 h-4 w-4" />
               Send Feedback
             </button>
           </nav>

src/components/TeamVersions/TeamVersions.tsx

@@ -144,7 +144,7 @@ export function TeamVersions(props: TeamVersionsProps) {
           </span>
           <img
             alt="Dropdown"
-            src={DropdownIcon as any}
+            src={DropdownIcon.src}
             className="h-3 w-3 sm:h-4 sm:w-4"
           />
         </div>

src/components/TopicDetail/TopicDetail.tsx

@@ -12,9 +12,9 @@ import {
   isTopicDone,
   refreshProgressCounters,
   renderTopicProgress,
-  ResourceType,
   updateResourceProgress as updateResourceProgressApi,
 } from '../../lib/resource-progress';
+import type { ResourceType } from '../../lib/resource-progress';
 import { pageProgressMessage, sponsorHidden } from '../../stores/page';
 import { TopicProgressButton } from './TopicProgressButton';
 import { ContributionForm } from './ContributionForm';
@@ -147,7 +147,7 @@ export function TopicDetail() {
         {isLoading && (
           <div className="flex w-full justify-center">
             <img
-              src={SpinnerIcon as any}
+              src={SpinnerIcon.src}
               alt="Loading"
               className="h-6 w-6 animate-spin fill-blue-600 text-gray-200 sm:h-12 sm:w-12"
             />
@@ -192,7 +192,7 @@ export function TopicDetail() {
                   setIsContributing(false);
                 }}
               >
-                <img alt="Close" className="h-5 w-5" src={CloseIcon as any} />
+                <img alt="Close" className="h-5 w-5" src={CloseIcon.src} />
               </button>
             </div>
 
@@ -206,7 +206,8 @@ export function TopicDetail() {
             {/* Contribution */}
             <div className="mt-8 flex-1 border-t">
               <p className="mb-2 mt-2 text-sm leading-relaxed text-gray-400">
-                Help others learn by submitting links to learn more about this topic{' '}
+                Help others learn by submitting links to learn more about this
+                topic{' '}
               </p>
               <button
                 onClick={() => {

src/components/TopicDetail/TopicProgressButton.tsx

@@ -5,13 +5,12 @@ import DownIcon from '../../icons/down.svg';
 import SpinnerIcon from '../../icons/spinner.svg';
 import { isLoggedIn } from '../../lib/jwt';
 import {
-  ResourceProgressType,
-  ResourceType,
   getTopicStatus,
   refreshProgressCounters,
   renderTopicProgress,
   updateResourceProgress,
 } from '../../lib/resource-progress';
+import type { ResourceProgressType, ResourceType } from '../../lib/resource-progress';
 import { showLoginPopup } from '../../lib/popup';
 import { useToast } from '../../hooks/use-toast';
 
@@ -165,7 +164,7 @@ export function TopicProgressButton(props: TopicProgressButtonProps) {
   if (isUpdatingProgress) {
     return (
       <button className="inline-flex cursor-default items-center rounded-md border border-gray-300 bg-white p-1 px-2 text-sm text-black">
-        <img alt="Check" className="h-4 w-4 animate-spin" src={SpinnerIcon} />
+        <img alt="Check" className="h-4 w-4 animate-spin" src={SpinnerIcon.src} />
         <span className="ml-2">Updating Status..</span>
       </button>
     );
@@ -189,7 +188,7 @@ export function TopicProgressButton(props: TopicProgressButtonProps) {
         onClick={() => setShowChangeStatus(true)}
       >
         <span className="mr-0.5">Update Status</span>
-        <img alt="Check" className="h-4 w-4" src={DownIcon} />
+        <img alt="Check" className="h-4 w-4" src={DownIcon.src} />
       </button>
 
       {showChangeStatus && (

src/components/UpdatePassword/UpdatePasswordForm.tsx

@@ -1,4 +1,4 @@
-import { FormEvent, useEffect, useState } from 'react';
+import { type FormEvent, useEffect, useState } from 'react';
 import { httpGet, httpPost } from '../../lib/http';
 import { pageProgressMessage } from '../../stores/page';
 

src/components/UpdateProfile/UpdateProfileForm.tsx

@@ -1,4 +1,4 @@
-import { FormEvent, useEffect, useState } from 'react';
+import { type FormEvent, useEffect, useState } from 'react';
 import { httpGet, httpPost } from '../../lib/http';
 import { pageProgressMessage } from '../../stores/page';
 import UploadProfilePicture from './UploadProfilePicture';

src/components/UpdateProfile/UploadProfilePicture.tsx

@@ -1,5 +1,5 @@
 import Cookies from 'js-cookie';
-import { ChangeEvent, FormEvent, useEffect, useRef, useState } from 'react';
+import { type ChangeEvent, type FormEvent, useEffect, useRef, useState } from 'react';
 import { TOKEN_COOKIE_NAME } from '../../lib/jwt';
 
 interface PreviewFile extends File {

src/components/UserProgress/UserProgressModal.tsx

@@ -292,7 +292,7 @@ export function UserProgressModal(props: ProgressMapProps) {
             className={`absolute right-2.5 top-3 ml-auto inline-flex items-center rounded-lg bg-gray-100 bg-transparent p-1.5 text-sm text-gray-400 hover:text-gray-900 lg:hidden`}
             onClick={onClose}
           >
-            <img alt={'close'} src={CloseIcon as any} className="h-4 w-4" />
+            <img alt={'close'} src={CloseIcon.src} className="h-4 w-4" />
             <span className="sr-only">Close modal</span>
           </button>
         </div>

src/data/roadmaps/cpp/content/116-build-systems/102-ninja.md

@@ -4,7 +4,7 @@ Ninja is a small build system with a focus on speed. It is designed to handle la
 
 Ninja build files are typically named `build.ninja` and contain rules, build statements, and variable declarations. Here's a simple example of a Ninja build file for a C++ project:
 
-```ninja
+```
 # Variable declarations
 cxx = g++
 cflags = -Wall -Wextra -std=c++17

src/data/roadmaps/cpp/content/116-build-systems/index.md

@@ -6,7 +6,7 @@ A build system is a collection of tools and utilities that automate the process
 
    Code example:
 
-   ```Makefile
+   ```
    # Makefile
    CXX = g++
    CPPFLAGS = -Wall -std=c++11
@@ -25,7 +25,7 @@ A build system is a collection of tools and utilities that automate the process
 
    Code example:
 
-   ```CMake
+   ```
    # CMakeLists.txt
    cmake_minimum_required(VERSION 3.10)
    project(HelloWorld)

src/data/roadmaps/cpp/content/libraries/103-protobuf.md

@@ -8,7 +8,7 @@ Here is a brief summary of protobuf and how to use it in C++:
 
    *Example:*
 
-   ```protobuf
+   ```
    syntax = "proto3";
    
    message Person {

src/data/roadmaps/docker/content/106-building-container-images/102-image-size-and-security.md

@@ -46,7 +46,7 @@ When building container images, it's essential to be aware of both image size an
 
 - **Use `.dockerignore` file:** Use a `.dockerignore` file to exclude unnecessary files from the build context that might cause cache invalidation and increase the final image size.
 
-    ```dockerignore
+    ```
     node_modules
     npm-debug.log
     ```

src/data/roadmaps/postgresql-dba/content/103-installation-and-setup/102-connect-using-psql.md

@@ -28,7 +28,7 @@ Here are some basic commands to help you interact with your PostgreSQL database
 
 - To execute an SQL query, simply type it at the prompt followed by a semicolon (`;`), and hit enter. For example:
 
-  ```SQL
+  ```sql
   mydb=> SELECT * FROM mytable;
   ```
 

src/data/roadmaps/postgresql-dba/content/103-installation-and-setup/106-using-pgctlcluster.md

@@ -12,7 +12,7 @@
 
 The basic syntax for `pg_ctlcluster` is as follows:
 
-```text
+```
 pg_ctlcluster <version> <cluster name> <action> [<options>]
 ```
 

src/lib/best-practice-topic.ts

@@ -63,20 +63,4 @@ export async function getAllBestPracticeTopicFiles(): Promise<
   }
 
   return mapping;
-}
+}
-
-/**
- * Gets the the topics for a given best practice
- *
- * @param bestPracticeId BestPractice id for which you want the topics
- *
- * @returns Promise<TopicFileType[]>
- */
-export async function getTopicsByBestPracticeId(
-  bestPracticeId: string
-): Promise<BestPracticeTopicFileType[]> {
-  const topicFileMapping = await getAllBestPracticeTopicFiles();
-  const allTopics = Object.values(topicFileMapping);
-
-  return allTopics.filter((topic) => topic.bestPracticeId === bestPracticeId);
-}

src/lib/best-pratice.ts

@@ -57,7 +57,6 @@ export async function getBestPracticeIds() {
 /**
  * Gets all the best practice files
  *
- * @param tag Tag assigned to best practice
  * @returns Promisified BestPracticeFileType[]
  */
 export async function getAllBestPractices(): Promise<BestPracticeFileType[]> {

src/lib/roadmap-topic.ts

@@ -1,5 +1,5 @@
-import type {MarkdownFileType} from './file';
+import type { MarkdownFileType } from './file';
-import type {RoadmapFrontmatter} from './roadmap';
+import type { RoadmapFrontmatter } from './roadmap';
 
 // Generates URL from the topic file path e.g.
 // -> /src/data/roadmaps/vue/content/102-ecosystem/102-ssr/101-nuxt-js.md
@@ -15,61 +15,12 @@ function generateTopicUrl(filePath: string) {
     .replace(/\.md$/, ''); // Remove `.md` from the end of file
 }
 
-/**
- * Generates breadcrumbs for the given topic URL from the given topic file details
- *
- * @param topicUrl Topic URL for which breadcrumbs are required
- * @param topicFiles Topic file mapping to read the topic data from
- */
-function generateBreadcrumbs(
-  topicUrl: string,
-  topicFiles: Record<string, RoadmapTopicFileType>
-): BreadcrumbItem[] {
-  // We need to collect all the pages with permalinks to generate breadcrumbs
-  // e.g. /backend/internet/how-does-internet-work/http
-  //      /backend
-  //      /backend/internet
-  //      /backend/internet/how-does-internet-work
-  //      /backend/internet/how-does-internet-work/http
-
-  const urlParts = topicUrl.split('/');
-  const breadcrumbUrls = [];
-  const subLinks = [];
-
-  for (let counter = 0; counter < urlParts.length; counter++) {
-    subLinks.push(urlParts[counter]);
-
-    // Skip the following
-    // -> [ '' ]
-    // -> [ '', 'vue' ]
-    if (subLinks.length > 2) {
-      breadcrumbUrls.push(subLinks.join('/'));
-    }
-  }
-
-  return breadcrumbUrls.map((breadCrumbUrl): BreadcrumbItem => {
-    const topicFile = topicFiles[breadCrumbUrl];
-
-    const topicFileContent = topicFile?.file;
-
-    const firstHeading = topicFileContent?.getHeadings()?.[0];
-
-    return {title: firstHeading?.text, url: breadCrumbUrl};
-  });
-}
-
-export type BreadcrumbItem = {
-  title: string;
-  url: string;
-};
-
 export interface RoadmapTopicFileType {
   url: string;
   heading: string;
   file: MarkdownFileType;
   roadmap: RoadmapFrontmatter;
   roadmapId: string;
-  breadcrumbs: BreadcrumbItem[];
 }
 
 /**
@@ -107,113 +58,8 @@ export async function getRoadmapTopicFiles(): Promise<
       file: fileContent,
       roadmap: currentRoadmap.frontmatter,
       roadmapId: roadmapId,
-      breadcrumbs: [],
     };
   }
 
-  // Populate breadcrumbs inside the mapping
-  Object.keys(mapping).forEach((topicUrl) => {
-    const {
-      roadmap: currentRoadmap,
-      roadmapId,
-      file: currentTopic,
-    } = mapping[topicUrl];
-    const roadmapUrl = `/${roadmapId}`;
-
-    // Breadcrumbs for the file
-    mapping[topicUrl].breadcrumbs = [
-      {
-        title: 'Roadmaps',
-        url: '/roadmaps',
-      },
-      {
-        title: currentRoadmap.briefTitle,
-        url: `${roadmapUrl}`,
-      },
-      {
-        title: 'Topics',
-        url: `${roadmapUrl}/topics`,
-      },
-      ...generateBreadcrumbs(topicUrl, mapping),
-    ];
-  });
-
   return mapping;
 }
-
-// [
-//   '/frontend/internet/how-does-the-internet-work',
-//   '/frontend/internet/what-is-http',
-//   '/frontend/internet/browsers-and-how-they-work',
-//   '/frontend/internet/dns-and-how-it-works',
-//   '/frontend/internet/what-is-domain-name',
-//   '/frontend/internet/what-is-hosting',
-//   '/frontend/internet',
-//   '/frontend/html/learn-the-basics',
-//   '/frontend/html/writing-semantic-html',
-//   '/frontend/html/forms-and-validations',
-//   '/frontend/html/conventions-and-best-practices',
-//   '/frontend/html/accessibility',
-//   '/frontend/html/seo-basics',
-//   '/frontend/html',
-//   '/frontend/css/learn-the-basics',
-//   '/frontend/css/making-layouts',
-//   '/frontend/css/responsive-design-and-media-queries',
-//   '/frontend/css',
-//   '/frontend/javascript/syntax-and-basic-constructs',
-//   '/frontend/javascript/learn-dom-manipulation',
-//   '/frontend/javascript/learn-fetch-api-ajax-xhr',
-//   '/frontend/javascript/es6-and-modular-javascript',
-//   '/frontend/javascript/concepts',
-//   '/frontend/javascript',
-//   '/frontend/version-control-systems/basic-usage-of-git',
-//   '/frontend/version-control-systems'
-// ]
-async function sortTopics(
-  topics: RoadmapTopicFileType[]
-): Promise<RoadmapTopicFileType[]> {
-  let sortedTopics: RoadmapTopicFileType[] = [];
-
-  // For each of the topic, find its place in the sorted topics
-  for (let i = 0; i < topics.length; i++) {
-    const currTopic = topics[i];
-    const currUrl = currTopic.url;
-    let isPlaced = false;
-
-    // Find the first sorted topic which starts with the current topic
-    for (let j = 0; j < sortedTopics.length; j++) {
-      const sortedTopic = sortedTopics[j];
-      const sortedUrl = sortedTopic.url;
-
-      // Insert before the current URL and break
-      if (sortedUrl.startsWith(`${currUrl}/`)) {
-        sortedTopics.splice(j, 0, currTopic);
-        isPlaced = true;
-        break;
-      }
-    }
-
-    if (!isPlaced) {
-      sortedTopics.push(currTopic);
-    }
-  }
-
-  return sortedTopics;
-}
-
-/**
- * Gets the the topics for a given roadmap
- * @param roadmapId Roadmap id for which you want the topics
- * @returns Promise<TopicFileType[]>
- */
-export async function getTopicsByRoadmapId(
-  roadmapId: string
-): Promise<RoadmapTopicFileType[]> {
-  const topicFileMapping = await getRoadmapTopicFiles();
-  const allTopics = Object.values(topicFileMapping);
-  const roadmapTopics = allTopics.filter(
-    (topic) => topic.roadmapId === roadmapId
-  );
-
-  return sortTopics(roadmapTopics);
-}

src/pages/[roadmapId]/[...topicId].astro

@@ -1,5 +1,4 @@
 ---
-import Breadcrumbs from '../../components/Breadcrumbs.astro';
 import RoadmapBanner from '../../components/RoadmapBanner.astro';
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import { getRoadmapTopicFiles,RoadmapTopicFileType } from '../../lib/roadmap-topic';
@@ -23,7 +22,7 @@ export async function getStaticPaths() {
 }
 
 const { topicId } = Astro.params;
-const { file, breadcrumbs, roadmapId, roadmap, heading } = Astro.props as RoadmapTopicFileType;
+const { file, roadmapId, roadmap, heading } = Astro.props as RoadmapTopicFileType;
 
 const gitHubBaseUrl = 'https://github.com/kamranahmedse/developer-roadmap/blob/master/src/data';
 const gitHubFullUrl = file.file.replace(/^.+\/src\/data/, `${gitHubBaseUrl}/`);
@@ -38,7 +37,6 @@ const gitHubRelativeUrl = file.file.replace(/^.+\/src\/data/, 'src/data');
 >
   <RoadmapBanner roadmapId={roadmapId} roadmap={roadmap} />
   <div class='bg-gray-50'>
-    <Breadcrumbs breadcrumbs={breadcrumbs} roadmapId={roadmapId} />
 
     <div class='container pb-16 prose prose-p:mt-0 prose-h1:mb-4 prose-h2:mb-3 prose-h2:mt-0'>
       <main id='main-content'>

src/pages/[roadmapId]/index.astro

@@ -91,7 +91,7 @@ if (roadmapFAQs.length) {
   <div class='bg-gray-50 pt-4 sm:pt-12'>
     {
       !roadmapData.isUpcoming && roadmapData.briefTitle !== 'Android' && (
-        <div class='container relative max-w-[1000px]'>
+        <div class='container relative !max-w-[1000px]'>
           <ShareIcons
             description={roadmapData.briefDescription}
             pageUrl={`https://roadmap.sh/${roadmapId}`}

src/pages/[roadmapId]/index.json.ts

@@ -20,8 +20,11 @@ export async function getStaticPaths() {
   });
 }
 
-export const get: APIRoute = async function ({ params, request, props }) {
+export const GET: APIRoute = async function ({ params, request, props }) {
-  return {
+  return new Response(JSON.stringify(props.roadmapJson), {
-    body: JSON.stringify(props.roadmapJson),
+    status: 200,
-  };
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
 };

src/pages/[roadmapId]/topics.astro

@@ -1,71 +0,0 @@
----
-import RoadmapHeader from '../../components/RoadmapHeader.astro';
-import BaseLayout from '../../layouts/BaseLayout.astro';
-import { getRoadmapIds, RoadmapFrontmatter } from '../../lib/roadmap';
-import { getTopicsByRoadmapId } from '../../lib/roadmap-topic';
-
-interface Params extends Record<string, string | undefined> {
-  roadmapId: string;
-}
-
-export async function getStaticPaths() {
-  const roadmapIds = await getRoadmapIds();
-
-  return roadmapIds.map((roadmapId) => ({
-    params: { roadmapId },
-  }));
-}
-
-const { roadmapId } = Astro.params as Params;
-const topics = await getTopicsByRoadmapId(roadmapId);
-const roadmapFile = await import(`../../data/roadmaps/${roadmapId}/${roadmapId}.md`);
-const roadmapData = roadmapFile.frontmatter as RoadmapFrontmatter;
----
-
-<BaseLayout
-  title={`${roadmapData.title} Topics`}
-  description={roadmapData.seo.description}
-  keywords={roadmapData.seo.keywords}
-  permalink={`/${roadmapId}/topics`}
->
-  <RoadmapHeader
-    description={roadmapData.description}
-    title={`${roadmapData.briefTitle} Topics`}
-    roadmapId={roadmapId}
-    hasSearch={true}
-    hasTopics={false}
-  />
-
-  <div class='bg-gray-50 pt-5 pb-8 sm:pt-10 sm:pb-16'>
-    <div class='container'>
-      {
-        topics.map((topic) => {
-          // Breadcrumbs have three additional items e.g.
-          //
-          //     Roadmaps / Frontend / Topics / Internet / HTTP
-          //     ---^----------^---------^----
-          //
-          // Subtracting 3 to get the total parent count
-          const totalParentCount = topic.breadcrumbs.length - 3;
-
-          return (
-            <a
-              data-topic={topic.heading.toLowerCase()}
-              class:list={[
-                'cursor-pointer text-sm sm:text-md border-gray-200 border py-1.5 px-2 sm:py-2 sm:px-2.5 rounded-md block mb-0.5 sm:mb-1',
-                {
-                  'bg-gray-400 hover:bg-gray-500': totalParentCount === 1,
-                  'bg-gray-300 hover:bg-gray-400': totalParentCount === 2,
-                  'bg-gray-100 hover:bg-gray-300': totalParentCount === 3,
-                },
-              ]}
-              href={`${topic.url}`}
-            >
-              {topic.heading}
-            </a>
-          );
-        })
-      }
-    </div>
-  </div>
-</BaseLayout>

src/pages/best-practices/[bestPracticeId]/index.astro

@@ -8,16 +8,21 @@ import UpcomingForm from '../../../components/UpcomingForm.astro';
 import BaseLayout from '../../../layouts/BaseLayout.astro';
 import { UserProgressModal } from '../../../components/UserProgress/UserProgressModal';
 import {
+  type BestPracticeFileType,
   BestPracticeFrontmatter,
+  getAllBestPractices,
   getBestPracticeIds,
 } from '../../../lib/best-pratice';
 import { generateArticleSchema } from '../../../lib/jsonld-schema';
 
 export async function getStaticPaths() {
-  const bestPracticeIds = await getBestPracticeIds();
+  const bestPractices = await getAllBestPractices();
 
-  return bestPracticeIds.map((bestPracticeId) => ({
+  return bestPractices.map((bestPractice: BestPracticeFileType) => ({
-    params: { bestPracticeId },
+    params: { bestPracticeId: bestPractice.id },
+    props: {
+      bestPractice: bestPractice,
+    },
   }));
 }
 
@@ -25,12 +30,13 @@ interface Params extends Record<string, string | undefined> {
   bestPracticeId: string;
 }
 
+interface Props {
+  bestPractice: BestPracticeFileType;
+}
+
 const { bestPracticeId } = Astro.params as Params;
-const bestPracticeFile = await import(
+const { bestPractice } = Astro.props as Props;
-  `../../../data/best-practices/${bestPracticeId}/${bestPracticeId}.md`
+const bestPracticeData = bestPractice.frontmatter as BestPracticeFrontmatter;
-);
-const bestPracticeData =
-  bestPracticeFile.frontmatter as BestPracticeFrontmatter;
 
 let jsonLdSchema = [];
 
@@ -78,7 +84,7 @@ if (bestPracticeData.schema) {
   <div class='bg-gray-50 py-4 sm:py-12'>
     {
       !bestPracticeData.isUpcoming && bestPracticeData.jsonUrl && (
-        <div class='container relative max-w-[1000px]'>
+        <div class='container relative !max-w-[1000px]'>
           <ShareIcons
             description={bestPracticeData.briefDescription}
             pageUrl={`https://roadmap.sh/best-practices/${bestPracticeId}`}
@@ -98,7 +104,7 @@ if (bestPracticeData.schema) {
     {
       !bestPracticeData.isUpcoming && !bestPracticeData.jsonUrl && (
         <MarkdownFile>
-          <bestPracticeFile.Content />
+          <bestPractice.Content />
         </MarkdownFile>
       )
     }
@@ -107,7 +113,7 @@ if (bestPracticeData.schema) {
   <UserProgressModal
     resourceId={bestPracticeId}
     resourceType='best-practice'
-    client:only="react"
+    client:only='react'
   />
 
   {bestPracticeData.isUpcoming && <UpcomingForm />}

src/pages/best-practices/[bestPracticeId]/index.json.ts

@@ -23,8 +23,11 @@ export async function getStaticPaths() {
   });
 }
 
-export const get: APIRoute = async function ({ params, request, props }) {
+export const GET: APIRoute = async function ({ params, request, props }) {
-  return {
+  return new Response(JSON.stringify(props.bestPracticeJson), {
-    body: JSON.stringify(props.bestPracticeJson),
+    status: 200,
-  };
+    headers: {
+      'content-type': 'application/json',
+    },
+  });
 };

src/pages/login.astro

@@ -1,6 +1,6 @@
 ---
 import Divider from '../components/AuthenticationFlow/Divider.astro';
-import EmailLoginForm from '../components/AuthenticationFlow/EmailLoginForm';
+import { EmailLoginForm } from '../components/AuthenticationFlow/EmailLoginForm';
 import { GitHubButton } from '../components/AuthenticationFlow/GitHubButton';
 import { GoogleButton } from '../components/AuthenticationFlow/GoogleButton';
 import { LinkedInButton } from '../components/AuthenticationFlow/LinkedInButton';

src/pages/pages.json.ts

@@ -3,14 +3,14 @@ import { getAllGuides } from '../lib/guide';
 import { getRoadmapsByTag } from '../lib/roadmap';
 import { getAllVideos } from '../lib/video';
 
-export async function get() {
+export async function GET() {
   const guides = await getAllGuides();
   const videos = await getAllVideos();
   const roadmaps = await getRoadmapsByTag('roadmap');
   const bestPractices = await getAllBestPractices();
 
-  return {
+  return new Response(
-    body: JSON.stringify([
+    JSON.stringify([
       ...roadmaps.map((roadmap) => ({
         id: roadmap.id,
         url: `/${roadmap.id}`,
@@ -39,5 +39,11 @@ export async function get() {
         group: 'Videos',
       })),
     ]),
-  };
+    {
+      status: 200,
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    }
+  );
 }

src/pages/questions/[questionGroupId].astro

@@ -22,7 +22,7 @@ export async function getStaticPaths() {
   noIndex={true}
 >
   <div class='flex bg-gray-50 pb-14 pt-4 sm:pb-16 sm:pt-8'>
-    <div class='container max-w-[700px]'>
+    <div class='container !max-w-[700px]'>
       <div class='mb-5 mt-2 text-center sm:mb-10 sm:mt-8'>
         <h1
           class='my-2 text-3xl font-bold sm:my-5 sm:text-5xl'

src/pages/reset-password.astro

@@ -1,5 +1,5 @@
 ---
-import ResetPasswordForm from '../components/AuthenticationFlow/ResetPasswordForm';
+import { ResetPasswordForm } from '../components/AuthenticationFlow/ResetPasswordForm';
 import AccountLayout from '../layouts/AccountLayout.astro';
 ---
 

src/pages/signup.astro

@@ -1,6 +1,6 @@
 ---
 import Divider from '../components/AuthenticationFlow/Divider.astro';
-import EmailSignupForm from '../components/AuthenticationFlow/EmailSignupForm';
+import { EmailSignupForm } from '../components/AuthenticationFlow/EmailSignupForm';
 import { GitHubButton } from '../components/AuthenticationFlow/GitHubButton';
 import { GoogleButton } from '../components/AuthenticationFlow/GoogleButton';
 import { LinkedInButton } from '../components/AuthenticationFlow/LinkedInButton';

src/styles/global.css

@@ -4,7 +4,7 @@
 
 @layer components {
   .container {
-    @apply mx-auto max-w-[830px] px-4;
+    @apply mx-auto !max-w-[830px] px-4;
   }
 
   /* Chrome, Safari and Opera */

tsconfig.json

@@ -1,6 +1,7 @@
 {
   "extends": "astro/tsconfigs/strict",
   "compilerOptions": {
+    "moduleResolution": "node",
     "jsx": "react-jsx",
     "jsxImportSource": "react"
   }