uses React Markdown to render contents

Author: ChaosExAnima

package.json

@@ -38,6 +38,7 @@
     "react-blurhash": "^0.3.0",
     "react-dom": "^18.3.1",
     "react-intl": "^7.1.11",
+    "react-markdown": "^10.1.0",
     "sass": "^1.87.0",
     "sharp": "^0.34.1",
     "stripe": "^18.1.0",

pages/roadmap.tsx

@@ -9,6 +9,7 @@ import matter from "gray-matter"
 import { InferGetStaticPropsType } from "next"
 import z from "zod"
 import { RoadmapStatus } from "../components/RoadmapStatus"
+import Markdown from "react-markdown"
 
 const Roadmap = ({
   features,
@@ -44,11 +45,11 @@ const Roadmap = ({
                   <h2 className="font-bold text-b1 mb-2 col-start-2">
                     {data.title}
                   </h2>
-                  {content.split("\n").map((line, lineIndex) => (
-                    <p key={lineIndex} className="col-start-2">
-                      {line}
-                    </p>
-                  ))}
+                  <div className="col-start-2 flex flex-col gap-1">
+                    <Markdown allowedElements={allowedElements}>
+                      {content}
+                    </Markdown>
+                  </div>
                 </section>
               ))}
             </div>
@@ -90,6 +91,16 @@ const Roadmap = ({
   )
 }
 
+const allowedElements: ReadonlyArray<string> = [
+  "p",
+  "strong",
+  "em",
+  "a",
+  "ul",
+  "ol",
+  "li",
+]
+
 const featureSchema = z.object({
   data: z.object({
     title: z.string(),