Update UI for project languages

src/components/Projects/EmptySolutions.tsx

@@ -8,7 +8,7 @@ export function EmptySolutions(props: EmptySolutionsProps) {
   const { projectId } = props;
 
   return (
-    <div className="flex min-h-[250px] flex-col items-center justify-center rounded-xl px-5 py-3 sm:px-0 sm:py-20">
+    <div className="flex min-h-[250px] flex-col items-center justify-center rounded-xl px-5 py-3 sm:px-0 sm:py-20 bg-white border mb-5">
       <Blocks className="mb-4 opacity-10 h-14 w-14" />
       <h2 className="mb-1 text-lg font-semibold sm:text-xl">
         No solutions submitted yet

src/components/Projects/LeavingRoadmapWarningModal.tsx

@@ -4,13 +4,13 @@ import { SubmissionRequirement } from './SubmissionRequirement.tsx';
 
 type LeavingRoadmapWarningModalProps = {
   onClose: () => void;
-  onContinue: () => void;
+  repositoryUrl: string;
 };
 
 export function LeavingRoadmapWarningModal(
   props: LeavingRoadmapWarningModalProps,
 ) {
-  const { onClose, onContinue } = props;
+  const { onClose, repositoryUrl } = props;
 
   return (
     <Modal onClose={onClose} bodyClassName="h-auto p-4">
@@ -45,13 +45,14 @@ export function LeavingRoadmapWarningModal(
         </p>
       </div>
 
-      <button
+      <a
         className="inline-flex w-full items-center gap-2 rounded-lg bg-black px-3 py-2.5 text-sm text-white"
-        onClick={onContinue}
+        href={repositoryUrl}
+        target="_blank"
       >
         <ArrowUpRight className="h-5 w-5" />
         Continue to Solution
-      </button>
+      </a>
 
       <button
         className="absolute right-2.5 top-2.5 text-gray-600 hover:text-black"

src/components/Projects/ListProjectSolutions.tsx

@@ -13,7 +13,8 @@ import { isLoggedIn } from '../../lib/jwt';
 import { showLoginPopup } from '../../lib/popup';
 import { VoteButton } from './VoteButton.tsx';
 import { GitHubIcon } from '../ReactIcons/GitHubIcon.tsx';
-import { cn } from '../../lib/classname.ts';
+import { SelectLanguages } from './SelectLanguages.tsx';
+import type { ProjectFrontmatter } from '../../lib/project.ts';
 
 export interface ProjectStatusDocument {
   _id?: string;
@@ -24,6 +25,7 @@ export interface ProjectStatusDocument {
   startedAt?: Date;
   submittedAt?: Date;
   repositoryUrl?: string;
+  languages?: string[];
 
   upvotes: number;
   downvotes: number;
@@ -53,15 +55,16 @@ type ListProjectSolutionsResponse = {
 
 type QueryParams = {
   p?: string;
+  l?: string;
 };
 
 type PageState = {
   currentPage: number;
+  language: string;
 };
 
-const VISITED_SOLUTIONS_KEY = 'visited-project-solutions';
-
 type ListProjectSolutionsProps = {
+  project: ProjectFrontmatter;
   projectId: string;
 };
 
@@ -90,27 +93,26 @@ const submittedAlternatives = [
 ];
 
 export function ListProjectSolutions(props: ListProjectSolutionsProps) {
-  const { projectId } = props;
+  const { projectId, project: projectData } = props;
 
   const toast = useToast();
   const [pageState, setPageState] = useState<PageState>({
     currentPage: 0,
+    language: '',
   });
 
   const [isLoading, setIsLoading] = useState(true);
   const [solutions, setSolutions] = useState<ListProjectSolutionsResponse>();
-  const [alreadyVisitedSolutions, setAlreadyVisitedSolutions] = useState<
-    Record<string, boolean>
-  >({});
   const [showLeavingRoadmapModal, setShowLeavingRoadmapModal] = useState<
     ListProjectSolutionsResponse['data'][number] | null
   >(null);
 
-  const loadSolutions = async (page = 1) => {
+  const loadSolutions = async (page = 1, language: string = '') => {
     const { response, error } = await httpGet<ListProjectSolutionsResponse>(
       `${import.meta.env.PUBLIC_API_URL}/v1-list-project-solutions/${projectId}`,
       {
         currPage: page,
+        ...(language ? { languages: language } : {}),
       },
     );
 
@@ -132,7 +134,7 @@ export function ListProjectSolutions(props: ListProjectSolutionsProps) {
       return;
     }
 
-    pageProgressMessage.set('Submitting vote...');
+    pageProgressMessage.set('Submitting vote');
     const { response, error } = await httpPost(
       `${import.meta.env.PUBLIC_API_URL}/v1-vote-project/${solutionId}`,
       {
@@ -172,13 +174,9 @@ export function ListProjectSolutions(props: ListProjectSolutionsProps) {
 
   useEffect(() => {
     const queryParams = getUrlParams() as QueryParams;
-    const alreadyVisitedSolutions = JSON.parse(
-      localStorage.getItem(VISITED_SOLUTIONS_KEY) || '{}',
-    );
-
-    setAlreadyVisitedSolutions(alreadyVisitedSolutions);
     setPageState({
       currentPage: +(queryParams.p || '1'),
+      language: queryParams.l || '',
     });
   }, []);
 
@@ -188,23 +186,21 @@ export function ListProjectSolutions(props: ListProjectSolutionsProps) {
       return;
     }
 
-    if (pageState.currentPage !== 1) {
+    if (pageState.currentPage !== 1 || pageState.language !== '') {
       setUrlParams({
         p: String(pageState.currentPage),
+        l: pageState.language,
       });
     } else {
       deleteUrlParam('p');
+      deleteUrlParam('l');
     }
 
-    loadSolutions(pageState.currentPage).finally(() => {
+    loadSolutions(pageState.currentPage, pageState.language).finally(() => {
       setIsLoading(false);
     });
   }, [pageState]);
 
-  if (isLoading) {
-    return <LoadingSolutions />;
-  }
-
   const isEmpty = solutions?.data.length === 0;
   if (isEmpty) {
     return <EmptySolutions projectId={projectId} />;
@@ -213,116 +209,128 @@ export function ListProjectSolutions(props: ListProjectSolutionsProps) {
   const leavingRoadmapModal = showLeavingRoadmapModal ? (
     <LeavingRoadmapWarningModal
       onClose={() => setShowLeavingRoadmapModal(null)}
-      onContinue={() => {
-        const visitedSolutions = {
-          ...alreadyVisitedSolutions,
-          [showLeavingRoadmapModal._id!]: true,
-        };
-        localStorage.setItem(
-          VISITED_SOLUTIONS_KEY,
-          JSON.stringify(visitedSolutions),
-        );
-
-        window.open(showLeavingRoadmapModal.repositoryUrl, '_blank');
-      }}
+      repositoryUrl={showLeavingRoadmapModal?.repositoryUrl!}
     />
   ) : null;
 
+  const selectedLanguage = pageState.language;
+
   return (
-    <section>
+    <div className="mb-4 overflow-hidden rounded-lg border bg-white p-3 sm:p-5">
       {leavingRoadmapModal}
-
-      <div className="flex min-h-[500px] flex-col divide-y divide-gray-100">
-        {solutions?.data.map((solution, counter) => {
-          const isVisited = alreadyVisitedSolutions[solution._id!];
-          const avatar = solution.user.avatar || '';
-
-          return (
-            <div
-              key={solution._id}
-              className={
-                'flex flex-col justify-between gap-2 py-2 text-sm text-gray-500 sm:flex-row sm:items-center sm:gap-0'
-              }
-            >
-              <div className="flex items-center gap-1.5">
-                <img
-                  src={
-                    avatar
-                      ? `${import.meta.env.PUBLIC_AVATAR_BASE_URL}/${avatar}`
-                      : '/images/default-avatar.png'
-                  }
-                  alt={solution.user.name}
-                  className="mr-0.5 h-7 w-7 rounded-full"
-                />
-                <span className="font-medium text-black">
-                  {solution.user.name}
-                </span>
-                <span className="hidden sm:inline">
-                  {submittedAlternatives[
-                    counter % submittedAlternatives.length
-                  ] || 'submitted their solution'}
-                </span>{' '}
-                <span className="flex-grow text-right text-gray-400 sm:flex-grow-0 sm:text-left sm:font-medium sm:text-black">
-                  {getRelativeTimeString(solution?.submittedAt!)}
-                </span>
-              </div>
-
-              <div className="flex items-center justify-end gap-1">
-                <span className="flex overflow-hidden rounded-full border">
-                  <VoteButton
-                    icon={ThumbsUp}
-                    isActive={solution?.voteType === 'upvote'}
-                    count={solution.upvotes || 0}
-                    onClick={() => {
-                      handleSubmitVote(solution._id!, 'upvote');
-                    }}
-                  />
-
-                  <VoteButton
-                    icon={ThumbsDown}
-                    isActive={solution?.voteType === 'downvote'}
-                    count={solution.downvotes || 0}
-                    hideCount={true}
-                    onClick={() => {
-                      handleSubmitVote(solution._id!, 'downvote');
-                    }}
-                  />
-                </span>
-
-                <a
-                  className="ml-1 flex items-center gap-1 rounded-full border px-2 py-1 text-xs text-black transition-colors hover:border-black hover:bg-black hover:text-white"
-                  onClick={(e) => {
-                    e.preventDefault();
-                    setShowLeavingRoadmapModal(solution);
-                  }}
-                  target="_blank"
-                  href={solution.repositoryUrl}
-                >
-                  <GitHubIcon className="h-4 w-4 text-current" />
-                  Visit Solution
-                </a>
-              </div>
-            </div>
-          );
-        })}
-      </div>
-
-      {(solutions?.totalPages || 0) > 1 && (
-        <div className="mt-4">
-          <Pagination
-            totalPages={solutions?.totalPages || 1}
-            currPage={solutions?.currPage || 1}
-            perPage={solutions?.perPage || 21}
-            totalCount={solutions?.totalCount || 0}
-            onPageChange={(page) => {
-              setPageState({
-                ...pageState,
-                currentPage: page,
-              });
+      <div className="relative mb-5 hidden items-center justify-between sm:flex">
+        <div>
+          <h1 className="mb-1 text-xl font-semibold">
+            {projectData.title} Solutions
+          </h1>
+          <p className="text-sm text-gray-500">{projectData.description}</p>
+        </div>
+        {!isLoading && (
+          <SelectLanguages
+            projectId={projectId}
+            selectedLanguage={selectedLanguage}
+            onSelectLanguage={(language) => {
+              setPageState((prev) => ({
+                ...prev,
+                language: prev.language === language ? '' : language,
+              }));
             }}
           />
-        </div>
+        )}
+      </div>
+
+      {isLoading ? (
+        <LoadingSolutions />
+      ) : (
+        <>
+          <div className="flex min-h-[500px] flex-col divide-y divide-gray-100">
+            {solutions?.data.map((solution, counter) => {
+              const avatar = solution.user.avatar || '';
+              return (
+                <div
+                  key={solution._id}
+                  className="flex flex-col gap-2 py-2 text-sm text-gray-500"
+                >
+                  <div className="flex flex-col justify-between gap-2 text-sm text-gray-500 sm:flex-row sm:items-center sm:gap-0">
+                    <div className="flex items-center gap-1.5">
+                      <img
+                        src={
+                          avatar
+                            ? `${import.meta.env.PUBLIC_AVATAR_BASE_URL}/${avatar}`
+                            : '/images/default-avatar.png'
+                        }
+                        alt={solution.user.name}
+                        className="mr-0.5 h-7 w-7 rounded-full"
+                      />
+                      <span className="font-medium text-black">
+                        {solution.user.name}
+                      </span>
+                      <span className="hidden sm:inline">
+                        {submittedAlternatives[
+                          counter % submittedAlternatives.length
+                        ] || 'submitted their solution'}
+                      </span>{' '}
+                      <span className="flex-grow text-right text-gray-400 sm:flex-grow-0 sm:text-left sm:font-medium sm:text-black">
+                        {getRelativeTimeString(solution?.submittedAt!)}
+                      </span>
+                    </div>
+
+                    <div className="flex items-center justify-end gap-1">
+                      <span className="flex shrink-0 overflow-hidden rounded-full border">
+                        <VoteButton
+                          icon={ThumbsUp}
+                          isActive={solution?.voteType === 'upvote'}
+                          count={solution.upvotes || 0}
+                          onClick={() => {
+                            handleSubmitVote(solution._id!, 'upvote');
+                          }}
+                        />
+
+                        <VoteButton
+                          icon={ThumbsDown}
+                          isActive={solution?.voteType === 'downvote'}
+                          count={solution.downvotes || 0}
+                          hideCount={true}
+                          onClick={() => {
+                            handleSubmitVote(solution._id!, 'downvote');
+                          }}
+                        />
+                      </span>
+
+                      <button
+                        className="ml-1 flex items-center gap-1 rounded-full border px-2 py-1 text-xs text-black transition-colors hover:border-black hover:bg-black hover:text-white"
+                        onClick={() => {
+                          setShowLeavingRoadmapModal(solution);
+                        }}
+                      >
+                        <GitHubIcon className="h-4 w-4 text-current" />
+                        Visit Solution
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+
+          {(solutions?.totalPages || 0) > 1 && (
+            <div className="mt-4">
+              <Pagination
+                totalPages={solutions?.totalPages || 1}
+                currPage={solutions?.currPage || 1}
+                perPage={solutions?.perPage || 21}
+                totalCount={solutions?.totalCount || 0}
+                onPageChange={(page) => {
+                  setPageState({
+                    ...pageState,
+                    currentPage: page,
+                  });
+                }}
+              />
+            </div>
+          )}
+        </>
       )}
-    </section>
+    </div>
   );
 }

src/components/Projects/SelectLanguages.tsx

@@ -0,0 +1,88 @@
+import { useEffect, useRef, useState } from 'react';
+import { useOutsideClick } from '../../hooks/use-outside-click';
+import { httpGet } from '../../lib/http';
+import { useToast } from '../../hooks/use-toast';
+import { ChevronDown, X } from 'lucide-react';
+
+type SelectLanguagesProps = {
+  projectId: string;
+  selectedLanguage: string;
+  onSelectLanguage: (language: string) => void;
+};
+
+export function SelectLanguages(props: SelectLanguagesProps) {
+  const { projectId, onSelectLanguage, selectedLanguage } = props;
+
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const toast = useToast();
+
+  const [distinctLanguages, setDistinctLanguages] = useState<string[]>([]);
+  const [isOpen, setIsOpen] = useState(false);
+
+  const loadDistinctLanguages = async () => {
+    const { response, error } = await httpGet<string[]>(
+      `${import.meta.env.PUBLIC_API_URL}/v1-list-project-languages/${projectId}`,
+    );
+
+    if (error || !response) {
+      toast.error(error?.message || 'Failed to load project languages');
+      return;
+    }
+
+    setDistinctLanguages(response);
+  };
+
+  useOutsideClick(dropdownRef, () => {
+    setIsOpen(false);
+  });
+
+  useEffect(() => {
+    loadDistinctLanguages().finally(() => {});
+  }, []);
+
+  return (
+    <div className="relative flex">
+      <button
+        className="flex items-center gap-1 rounded-md border border-gray-300 py-1.5 pl-3 pr-2 text-xs font-medium text-gray-900"
+        onClick={() => setIsOpen(!isOpen)}
+      >
+        {selectedLanguage || 'Select Language'}
+
+        <ChevronDown className="ml-1 h-4 w-4" />
+      </button>
+      {selectedLanguage && (
+        <button
+          className="ml-1 text-red-500 text-xs border border-red-500 rounded-md px-2 py-1"
+          onClick={() => onSelectLanguage('')}
+        >
+          Clear
+        </button>
+      )}
+
+      {isOpen && (
+        <div
+          className="absolute right-0 top-full z-10 w-full min-w-[200px] max-w-[200px] translate-y-1.5 overflow-hidden rounded-md border border-gray-300 bg-white p-1 shadow-lg"
+          ref={dropdownRef}
+        >
+          {distinctLanguages.map((language) => {
+            const isSelected = selectedLanguage === language;
+
+            return (
+              <button
+                key={language}
+                className="flex w-full items-center rounded-md px-4 py-1.5 text-left text-sm text-gray-700 hover:bg-gray-100 aria-selected:bg-gray-100"
+                onClick={() => {
+                  onSelectLanguage(language);
+                  setIsOpen(false);
+                }}
+                aria-selected={isSelected}
+              >
+                {language}
+              </button>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}

src/components/Projects/SubmitProjectModal.tsx

@@ -170,10 +170,19 @@ export function SubmitProjectModal(props: SubmitProjectModalProps) {
         projectUrlExists: 'success',
       });
 
+      const languagesUrl = `${mainApiUrl}/languages`;
+      const languagesResponse = await fetch(languagesUrl);
+      let languages: string[] = [];
+      if (languagesResponse.ok) {
+        const languagesData = await languagesResponse.json();
+        languages = Object.keys(languagesData || {})?.slice(0, 4);
+      }
+
       const submitProjectUrl = `${import.meta.env.PUBLIC_API_URL}/v1-submit-project/${projectId}`;
       const { response: submitResponse, error } =
         await httpPost<SubmitProjectResponse>(submitProjectUrl, {
           repositoryUrl: repoUrl,
+          languages,
         });
 
       if (error || !submitResponse) {
@@ -272,7 +281,7 @@ export function SubmitProjectModal(props: SubmitProjectModalProps) {
 
         <button
           type="submit"
-          className="mt-2 w-full rounded-lg bg-black p-2 font-medium text-white disabled:opacity-50 text-sm"
+          className="mt-2 w-full rounded-lg bg-black p-2 text-sm font-medium text-white disabled:opacity-50"
           disabled={isLoading}
         >
           {isLoading ? 'Verifying...' : 'Verify and Submit'}

src/components/TopicDetail/TopicDetail.tsx

@@ -32,18 +32,6 @@ import { YouTubeIcon } from '../ReactIcons/YouTubeIcon.tsx';
 import { resourceTitleFromId } from '../../lib/roadmap.ts';
 import { lockBodyScroll } from '../../lib/dom.ts';
 
-export const allowedRoadmapResourceTypes = ['course', 'book', 'other'] as const;
-export type AllowedRoadmapResourceType =
-  (typeof allowedRoadmapResourceTypes)[number];
-
-type TopicResource = {
-  _id?: string;
-  title: string;
-  type: AllowedRoadmapResourceType;
-  url: string;
-  topicIds: string[];
-};
-
 type TopicDetailProps = {
   resourceTitle?: string;
   resourceType?: ResourceType;
@@ -62,7 +50,7 @@ const linkTypes: Record<AllowedLinkTypes, string> = {
   video: 'bg-purple-300',
   website: 'bg-blue-300',
   official: 'bg-blue-600 text-white',
-  feed: 'bg-[#ce3df3] text-white',
+  feed: "bg-[#ce3df3] text-white"
 };
 
 export function TopicDetail(props: TopicDetailProps) {
@@ -81,8 +69,6 @@ export function TopicDetail(props: TopicDetailProps) {
   const [links, setLinks] = useState<RoadmapContentDocument['links']>([]);
   const toast = useToast();
 
-  const [topicResources, setTopicResources] = useState<TopicResource[]>([]);
-
   const { secret } = getUrlParams() as { secret: string };
   const isGuest = useMemo(() => !isLoggedIn(), []);
   const topicRef = useRef<HTMLDivElement>(null);
@@ -101,20 +87,6 @@ export function TopicDetail(props: TopicDetailProps) {
     setIsActive(false);
   });
 
-  const loadTopicResources = async (roadmapId: string, topicId: string) => {
-    const sanitizedTopicId = topicId.split('@')?.[1] || topicId;
-    const { response, error } = await httpGet<TopicResource[]>(
-      `${import.meta.env.PUBLIC_API_URL}/v1-list-topic-resources/${roadmapId}?t=${sanitizedTopicId}`,
-    );
-
-    if (error) {
-      toast.error(error?.message || 'Failed to load topic resources');
-      return;
-    }
-
-    setTopicResources(response || []);
-  };
-
   // Toggle topic is available even if the component UI is not active
   // This is used on the best practice screen where we have the checkboxes
   // to mark the topic as done/undone.
@@ -179,125 +151,114 @@ export function TopicDetail(props: TopicDetailProps) {
       }`;
     }
 
-    Promise.all([
-      httpGet<string | RoadmapContentDocument>(
-        topicUrl,
-        {},
-        {
-          ...(!isCustomResource && {
-            headers: {
-              Accept: 'text/html',
-            },
-          }),
-        },
-      )
-        .then(({ response }) => {
-          if (!response) {
-            setError('Topic not found.');
-            setIsLoading(false);
-            return;
-          }
-          let topicHtml = '';
-          if (!isCustomResource) {
-            const topicDom = new DOMParser().parseFromString(
-              response as string,
-              'text/html',
-            );
+    httpGet<string | RoadmapContentDocument>(
+      topicUrl,
+      {},
+      {
+        ...(!isCustomResource && {
+          headers: {
+            Accept: 'text/html',
+          },
+        }),
+      },
+    )
+      .then(({ response }) => {
+        if (!response) {
+          setError('Topic not found.');
+          setIsLoading(false);
+          return;
+        }
+        let topicHtml = '';
+        if (!isCustomResource) {
+          const topicDom = new DOMParser().parseFromString(
+            response as string,
+            'text/html',
+          );
 
-            const links = topicDom.querySelectorAll('a');
-            const urlElem: HTMLElement =
-              topicDom.querySelector('[data-github-url]')!;
-            const contributionUrl = urlElem?.dataset?.githubUrl || '';
+          const links = topicDom.querySelectorAll('a');
+          const urlElem: HTMLElement =
+            topicDom.querySelector('[data-github-url]')!;
+          const contributionUrl = urlElem?.dataset?.githubUrl || '';
 
-            const titleElem: HTMLElement = topicDom.querySelector('h1')!;
-            const otherElems = topicDom.querySelectorAll(
-              'body > *:not(h1, div)',
-            );
+          const titleElem: HTMLElement = topicDom.querySelector('h1')!;
+          const otherElems = topicDom.querySelectorAll('body > *:not(h1, div)');
 
-            let ulWithLinks: HTMLUListElement = document.createElement('ul');
+          let ulWithLinks: HTMLUListElement = document.createElement('ul');
 
-            // we need to remove the `ul` with just links (i.e. resource links)
-            // and show them separately.
-            topicDom.querySelectorAll('ul').forEach((ul) => {
-              const lisWithJustLinks = Array.from(
-                ul.querySelectorAll('li'),
-              ).filter((li) => {
-                return (
-                  li.children.length === 1 &&
-                  li.children[0].tagName === 'A' &&
-                  li.children[0].textContent === li.textContent
-                );
-              });
-
-              if (lisWithJustLinks.length > 0) {
-                ulWithLinks = ul;
-              }
+          // we need to remove the `ul` with just links (i.e. resource links)
+          // and show them separately.
+          topicDom.querySelectorAll('ul').forEach((ul) => {
+            const lisWithJustLinks = Array.from(
+              ul.querySelectorAll('li'),
+            ).filter((li) => {
+              return (
+                li.children.length === 1 &&
+                li.children[0].tagName === 'A' &&
+                li.children[0].textContent === li.textContent
+              );
             });
 
-            const listLinks = Array.from(ulWithLinks.querySelectorAll('li > a'))
-              .map((link, counter) => {
-                const typePattern = /@([a-z.]+)@/;
-                let linkText = link.textContent || '';
-                const linkHref = link.getAttribute('href') || '';
-                const linkType = linkText.match(typePattern)?.[1] || 'article';
-
-                linkText = linkText.replace(typePattern, '');
-
-                return {
-                  id: `link-${linkHref}-${counter}`,
-                  title: linkText,
-                  url: linkHref,
-                  type: linkType as AllowedLinkTypes,
-                };
-              })
-              .sort((a, b) => {
-                // official at the top
-                // opensource at second
-                // article at third
-                // videos at fourth
-                // rest at last
-                const order = [
-                  'official',
-                  'opensource',
-                  'article',
-                  'video',
-                  'feed',
-                ];
-                return order.indexOf(a.type) - order.indexOf(b.type);
-              });
-
-            if (ulWithLinks) {
-              ulWithLinks.remove();
+            if (lisWithJustLinks.length > 0) {
+              ulWithLinks = ul;
             }
+          });
 
-            topicHtml = topicDom.body.innerHTML;
+          const listLinks = Array.from(ulWithLinks.querySelectorAll('li > a'))
+            .map((link, counter) => {
+              const typePattern = /@([a-z.]+)@/;
+              let linkText = link.textContent || '';
+              const linkHref = link.getAttribute('href') || '';
+              const linkType = linkText.match(typePattern)?.[1] || 'article';
 
-            setLinks(listLinks);
-            setHasContent(otherElems.length > 0);
-            setContributionUrl(contributionUrl);
-            setHasEnoughLinks(links.length >= 3);
-            setTopicHtmlTitle(titleElem?.textContent || '');
-          } else {
-            setLinks((response as RoadmapContentDocument)?.links || []);
-            setTopicTitle((response as RoadmapContentDocument)?.title || '');
+              linkText = linkText.replace(typePattern, '');
 
-            const sanitizedMarkdown = sanitizeMarkdown(
-              (response as RoadmapContentDocument).description || '',
-            );
+              return {
+                id: `link-${linkHref}-${counter}`,
+                title: linkText,
+                url: linkHref,
+                type: linkType as AllowedLinkTypes,
+              };
+            })
+            .sort((a, b) => {
+              // official at the top
+              // opensource at second
+              // article at third
+              // videos at fourth
+              // rest at last
+              const order = ['official', 'opensource', 'article', 'video', 'feed'];
+              return order.indexOf(a.type) - order.indexOf(b.type);
+            });
 
-            setHasContent(sanitizedMarkdown?.length > 0);
-            topicHtml = markdownToHtml(sanitizedMarkdown, false);
+          if (ulWithLinks) {
+            ulWithLinks.remove();
           }
 
-          setIsLoading(false);
-          setTopicHtml(topicHtml);
-        })
-        .catch((err) => {
-          setError('Something went wrong. Please try again later.');
-          setIsLoading(false);
-        }),
-      loadTopicResources(resourceId, topicId),
-    ]);
+          topicHtml = topicDom.body.innerHTML;
+
+          setLinks(listLinks);
+          setHasContent(otherElems.length > 0);
+          setContributionUrl(contributionUrl);
+          setHasEnoughLinks(links.length >= 3);
+          setTopicHtmlTitle(titleElem?.textContent || '');
+        } else {
+          setLinks((response as RoadmapContentDocument)?.links || []);
+          setTopicTitle((response as RoadmapContentDocument)?.title || '');
+
+          const sanitizedMarkdown = sanitizeMarkdown(
+            (response as RoadmapContentDocument).description || '',
+          );
+
+          setHasContent(sanitizedMarkdown?.length > 0);
+          topicHtml = markdownToHtml(sanitizedMarkdown, false);
+        }
+
+        setIsLoading(false);
+        setTopicHtml(topicHtml);
+      })
+      .catch((err) => {
+        setError('Something went wrong. Please try again later.');
+        setIsLoading(false);
+      });
   });
 
   useEffect(() => {
@@ -463,52 +424,47 @@ export function TopicDetail(props: TopicDetailProps) {
               )}
 
               {/* Contribution */}
-              {canSubmitContribution &&
-                !hasEnoughLinks &&
-                contributionUrl &&
-                hasContent && (
-                  <div className="mb-12 mt-3 border-t text-sm text-gray-400 sm:mt-12">
-                    <div className="mb-4 mt-3">
-                      <p className="">
-                        Find more resources using these pre-filled search
-                        queries:
-                      </p>
-                      <div className="mt-3 flex gap-2 text-gray-700">
-                        <a
-                          href={googleSearchUrl}
-                          target="_blank"
-                          className="flex items-center gap-2 rounded-md border border-gray-300 px-3 py-1.5 pl-2 text-xs hover:border-gray-700 hover:bg-gray-100"
-                        >
-                          <GoogleIcon className={'h-4 w-4'} />
-                          Google
-                        </a>
-                        <a
-                          href={youtubeSearchUrl}
-                          target="_blank"
-                          className="flex items-center gap-2 rounded-md border border-gray-300 px-3 py-1.5 pl-2 text-xs hover:border-gray-700 hover:bg-gray-100"
-                        >
-                          <YouTubeIcon className={'h-4 w-4 text-red-500'} />
-                          YouTube
-                        </a>
-                      </div>
-                    </div>
-
-                    <p className="mb-2 mt-2 leading-relaxed">
-                      This popup should be a brief introductory paragraph for
-                      the topic and a few links to good articles, videos, or any
-                      other self-vetted resources. Please consider submitting a
-                      PR to improve this content.
+              {canSubmitContribution && !hasEnoughLinks && contributionUrl && hasContent && (
+                <div className="mb-12 mt-3 border-t text-sm text-gray-400 sm:mt-12">
+                  <div className="mb-4 mt-3">
+                    <p className="">
+                      Find more resources using these pre-filled search queries:
                     </p>
-                    <a
-                      href={contributionUrl}
-                      target={'_blank'}
-                      className="flex w-full items-center justify-center rounded-md bg-gray-800 p-2 text-sm text-white transition-colors hover:bg-black hover:text-white disabled:bg-green-200 disabled:text-black"
-                    >
-                      <GitHubIcon className="mr-2 inline-block h-4 w-4 text-white" />
-                      Help us Improve this Content
-                    </a>
+                    <div className="mt-3 flex gap-2  text-gray-700">
+                      <a
+                        href={googleSearchUrl}
+                        target="_blank"
+                        className="flex items-center gap-2 rounded-md border border-gray-300 px-3 py-1.5 pl-2 text-xs hover:border-gray-700 hover:bg-gray-100"
+                      >
+                        <GoogleIcon className={'h-4 w-4'} />
+                        Google
+                      </a>
+                      <a
+                        href={youtubeSearchUrl}
+                        target="_blank"
+                        className="flex items-center gap-2 rounded-md border border-gray-300 px-3 py-1.5 pl-2 text-xs hover:border-gray-700 hover:bg-gray-100"
+                      >
+                        <YouTubeIcon className={'h-4 w-4 text-red-500'} />
+                        YouTube
+                      </a>
+                    </div>
                   </div>
-                )}
+
+                  <p className="mb-2 mt-2 leading-relaxed">
+                    This popup should be a brief introductory paragraph for the topic and a few links
+                    to good articles, videos, or any other self-vetted resources. Please consider
+                    submitting a PR to improve this content.
+                  </p>
+                  <a
+                    href={contributionUrl}
+                    target={'_blank'}
+                    className="flex w-full items-center justify-center rounded-md bg-gray-800 p-2 text-sm text-white transition-colors hover:bg-black hover:text-white disabled:bg-green-200 disabled:text-black"
+                  >
+                    <GitHubIcon className="mr-2 inline-block h-4 w-4 text-white" />
+                    Help us Improve this Content
+                  </a>
+                </div>
+              )}
             </div>
             {resourceId === 'devops' && (
               <div className="mt-4">
@@ -572,4 +528,4 @@ export function TopicDetail(props: TopicDetailProps) {
       <div className="fixed inset-0 z-30 bg-gray-900 bg-opacity-50 dark:bg-opacity-80"></div>
     </div>
   );
-}
+}

src/pages/projects/[projectId]/solutions.astro

@@ -49,18 +49,11 @@ const githubUrl = `https://github.com/kamranahmedse/developer-roadmap/tree/maste
     <div class='container'>
       <ProjectTabs projectId={projectId} activeTab='solutions' />
 
-      <div class='mb-4 overflow-hidden rounded-lg border bg-white p-3 sm:p-5'>
-        <div class='relative mb-5 hidden sm:block'>
-          <h1 class='mb-1 text-xl font-semibold'>
-            {projectData.title} Solutions
-          </h1>
-          <p class='text-sm text-gray-500'>
-            {projectData.description}
-          </p>
-        </div>
-
-        <ListProjectSolutions projectId={projectId} client:load />
-      </div>
+      <ListProjectSolutions
+        project={projectData}
+        projectId={projectId}
+        client:load
+      />
     </div>
   </div>
 </BaseLayout>