Use markdown-it for mentorship portal summaries

Author: kasya

frontend/__tests__/unit/components/MarkdownWrapper.test.tsx

@@ -6,7 +6,7 @@ jest.mock('dompurify', () => ({
   sanitize: (html: string) => html,
 }))
 
-jest.mock('markdown-it/index.mjs', () => {
+jest.mock('markdown-it', () => {
   return jest.fn().mockImplementation(() => ({
     render: (content: string) => {
       // Very simple mock: replace **bold** and [link](url)

frontend/__tests__/unit/components/ProgramCard.test.tsx

@@ -276,8 +276,7 @@ describe('ProgramCard', () => {
       )
 
       expect(screen.getByText(longDescription)).toBeInTheDocument()
-      expect(screen.getByText(longDescription)).toBeInTheDocument()
-      const descriptionElement = screen.getByText(longDescription)
+      const descriptionElement = screen.getByText(longDescription).closest('.md-wrapper')
       expect(descriptionElement).toHaveClass('line-clamp-8')
     })
 
@@ -296,7 +295,7 @@ describe('ProgramCard', () => {
 
       expect(screen.getByText('Short description')).toBeInTheDocument()
 
-      const descriptionElement = screen.getByText('Short description')
+      const descriptionElement = screen.getByText('Short description').closest('.md-wrapper')
       expect(descriptionElement).toHaveClass('line-clamp-8')
     })
 

frontend/src/app/globals.css

@@ -131,6 +131,22 @@
     color: #1d7bd7;
   }
 
+  a .md-wrapper {
+    color: rgb(75 85 99); /* gray-600 */
+  }
+
+  .dark a .md-wrapper {
+    color: rgb(156 163 175); /* gray-400 */
+  }
+
+  a .md-wrapper a {
+    color: #1d7bd7;
+  }
+
+  .dark a .md-wrapper a {
+    color: #1d7bd7;
+  }
+
   .navlink {
     color: inherit;
   }
@@ -253,6 +269,24 @@
     transition: transform 1s ease;
   }
 
+  .md-wrapper ul,
+  .md-wrapper ol {
+    margin: 0 0 1em 1.5em;
+    padding-left: 1.5em;
+  }
+
+  .md-wrapper ul {
+    list-style-type: disc;
+  }
+
+  .md-wrapper ol {
+    list-style-type: decimal;
+  }
+
+  .md-wrapper li {
+    margin: 0.25em 0;
+  }
+
   .flip-container:hover .icon-flip {
     transform: rotateY(180deg);
   }

frontend/src/components/CardDetailsPage.tsx

@@ -22,6 +22,7 @@ import HealthMetrics from 'components/HealthMetrics'
 import InfoBlock from 'components/InfoBlock'
 import Leaders from 'components/Leaders'
 import LeadersList from 'components/LeadersList'
+import Markdown from 'components/MarkdownWrapper'
 import MenteeContributorsList from 'components/MenteeContributorsList'
 import MetricsScoreCircle from 'components/MetricsScoreCircle'
 import Milestones from 'components/Milestones'
@@ -77,14 +78,12 @@ const DetailsCard = ({
   const { data } = useSession()
 
   // compute styles based on type prop
-  const secondaryCardStyles = (() => {
-    if (type === 'program' || type === 'module') {
-      return 'gap-2 md:col-span-7'
-    } else if (type === 'chapter') {
-      return 'gap-2 md:col-span-3'
-    }
-    return 'gap-2 md:col-span-5'
-  })()
+  const typeStylesMap = new Map([
+    ['program', 'gap-2 md:col-span-7'],
+    ['module', 'gap-2 md:col-span-7'],
+    ['chapter', 'gap-2 md:col-span-3'],
+  ])
+  const secondaryCardStyles = typeStylesMap.get(type) ?? 'gap-2 md:col-span-5'
 
   return (
     <div className="min-h-screen bg-white p-8 text-gray-600 dark:bg-[#212529] dark:text-gray-300">
@@ -121,7 +120,7 @@ const DetailsCard = ({
         <p className="mb-6 text-xl">{description}</p>
         {summary && (
           <SecondaryCard icon={faCircleInfo} title={<AnchorTitle title="Summary" />}>
-            <p>{summary}</p>
+            <Markdown content={summary} />
           </SecondaryCard>
         )}
 

frontend/src/components/MarkdownWrapper.tsx

@@ -1,5 +1,5 @@
 import DOMPurify from 'dompurify'
-import markdownit from 'markdown-it/index.mjs'
+import markdownit from 'markdown-it'
 import taskLists from 'markdown-it-task-lists'
 
 export default function Markdown({ content, className }: { content: string; className?: string }) {

frontend/src/components/ProgramCard.tsx

@@ -5,6 +5,7 @@ import type React from 'react'
 import { GetProgramAndModulesDocument } from 'types/__generated__/programsQueries.generated'
 import { Program } from 'types/mentorship'
 import EntityActions from 'components/EntityActions'
+import Markdown from 'components/MarkdownWrapper'
 
 interface ProgramCardProps {
   program: Program
@@ -96,7 +97,7 @@ const ProgramCard: React.FC<ProgramCardProps> = ({ program, href, accessLevel, i
               </span>
             )}
           </div>
-          <p className="line-clamp-8 text-sm text-gray-700 dark:text-gray-300">{description}</p>
+          <Markdown content={description} className="line-clamp-8" />
         </div>
       </div>
     </Link>

frontend/src/components/SingleModuleCard.tsx

@@ -11,6 +11,7 @@ import { ExtendedSession } from 'types/auth'
 import type { Module } from 'types/mentorship'
 import { formatDate } from 'utils/dateFormatter'
 import EntityActions from 'components/EntityActions'
+import Markdown from 'components/MarkdownWrapper'
 import { getSimpleDuration } from 'components/ModuleCard'
 import TopContributorsList from 'components/TopContributorsList'
 
@@ -67,7 +68,7 @@ const SingleModuleCard: React.FC<SingleModuleCardProps> = ({ module, accessLevel
 
       {/* Description */}
       <div>
-        <p>{module.description}</p>
+        <Markdown content={module.description} />
       </div>
 
       {/* Details */}