conf: use ReactMarkdown to display events description and speakers bio (graphql#1514)

Author: beerose

package.json

@@ -44,7 +44,9 @@
     "prismjs": "1.29.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-markdown": "^8.0.7",
     "react-tooltip": "^5.18.1",
+    "rehype-raw": "^6.1.1",
     "timeago.js": "4.0.2"
   },
   "devDependencies": {
@@ -64,4 +66,4 @@
     "tailwindcss": "3.3.2",
     "typescript": "5.1.3"
   }
-}
+}

src/components/Conf/Schedule/ScheduleList.tsx

@@ -1,5 +1,8 @@
 import { format, parseISO, compareAsc } from "date-fns"
 import React, { FC, useEffect, useState } from "react"
+import ReactMarkdown from "react-markdown"
+import rehypeRaw from "rehype-raw"
+import remarkGfm from "remark-gfm"
 import { Tooltip } from "react-tooltip"
 import { eventsColors } from "../../../utils/eventsColors"
 
@@ -104,7 +107,7 @@ const ScheduleList: FC<Props> = ({
         isOpen={isOpen}
         positionStrategy="absolute"
         opacity={1}
-        border={"3px solid black"}
+        border="2px solid black"
         setIsOpen={value => {
           setIsOpen(value)
         }}
@@ -114,9 +117,15 @@ const ScheduleList: FC<Props> = ({
             <div className="text-gray-800 flex flex-col gap-2">
               <span className="font-medium">{hoveredSession.name}</span>
               <p className="" style={{ margin: 0 }}>
-                {hoveredSession?.description
-                  ? hoveredSession?.description.slice(0, 350) + "..."
-                  : "No Description"}
+                <ReactMarkdown
+                  children={
+                    hoveredSession?.description
+                      ? hoveredSession?.description.slice(0, 250) + "..."
+                      : "No Description"
+                  }
+                  rehypePlugins={[rehypeRaw]}
+                  remarkPlugins={[remarkGfm]}
+                />
               </p>
             </div>
           )}

src/templates/event.tsx

@@ -1,4 +1,7 @@
 import React, { FC } from "react"
+import ReactMarkdown from "react-markdown"
+import rehypeRaw from "rehype-raw"
+import remarkGfm from "remark-gfm"
 import { HeadProps, PageProps } from "gatsby"
 import FooterConf from "../components/Conf/Footer"
 import HeaderConf from "../components/Conf/Header"
@@ -121,7 +124,13 @@ export const EventComponent: FC<{
               <Tag text={event.audience} />
               <Tag text={event.event_subtype} />
             </div>
-            <p className="mt-7 lg:pr-20">{event.description}</p>
+            <p className="mt-7 lg:pr-20">
+              <ReactMarkdown
+                children={event.description}
+                remarkPlugins={[remarkGfm]}
+                rehypePlugins={[rehypeRaw]}
+              />
+            </p>
 
             <div className="flex lg:flex-row flex-col gap-4">
               {speakers?.map(speaker => (
@@ -149,7 +158,7 @@ export const EventComponent: FC<{
                               key={social.url}
                               href={social.url}
                               target="_blank"
-                              className="flex items-center text-[#333333] w-max"
+                              className="flex items-center text-[#c9b7b7] w-max"
                             >
                               <SocialMediaIcon
                                 service={

src/templates/speaker.tsx

@@ -1,4 +1,7 @@
 import React, { FC } from "react"
+import { ReactMarkdown } from "react-markdown/lib/react-markdown"
+import rehypeRaw from "rehype-raw"
+import remarkGfm from "remark-gfm"
 import FooterConf from "../components/Conf/Footer"
 import HeaderConf from "../components/Conf/Header"
 import LayoutConf from "../components/Conf/Layout"
@@ -102,10 +105,13 @@ const SpeakersTemplate: FC<
                   <div className="mt-3 font-medium">
                     {renderPositionAndCompany(speaker)}
                   </div>
-                  <p
-                    className="lg:text-justify"
-                    dangerouslySetInnerHTML={{ __html: speaker.about }}
-                  />
+                  <p className="lg:text-justify">
+                    <ReactMarkdown
+                      children={speaker.about}
+                      rehypePlugins={[rehypeRaw]}
+                      remarkPlugins={[remarkGfm]}
+                    />
+                  </p>
                 </div>
               </div>
             </div>