feat: add markdown text to startup details page (#1032)

package.json

@@ -20,9 +20,11 @@
     "eslint": "8.46.0",
     "eslint-config-next": "13.4.12",
     "next": "13.4.12",
+    "next-mdx-remote": "4.4.1",
     "postcss": "8.4.27",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "remark": "14.0.3",
     "tailwindcss": "3.3.3",
     "typescript": "5.1.6"
   },

src/app/startups/[id]/page.tsx

@@ -1,8 +1,8 @@
 import Image from "next/image"
-// import { remark } from "remark"
+import { remark } from "remark"
 import { fr } from "@codegouvfr/react-dsfr"
-// import type { MDXComponents } from "mdx/types"
-// import { MDXRemote } from "next-mdx-remote/rsc"
+import type { MDXComponents } from "mdx/types"
+import { MDXRemote } from "next-mdx-remote/rsc"
 
 import getStartup from "./get-startup"
 import getStartups from "../get-startups"
@@ -34,29 +34,32 @@ export default async function Details({
     content_url_encoded_markdown,
   } = attributes
 
-  // const markdown = await remark().process(
-  //   decodeURIComponent(content_url_encoded_markdown)
-  // )
+  const markdown = await remark().process(
+    decodeURIComponent(content_url_encoded_markdown)
+  )
 
-  // const component = {
-  //   h2: ({ children }: { children: React.ReactNode }) => (
-  //     <h2 className="fr-h2">{children}</h2>
-  //   ),
-  //   h3: ({ children }: { children: React.ReactNode }) => (
-  //     <h2 className="fr-h3">{children}</h2>
-  //   ),
-  //   p: ({ children }: { children: React.ReactNode }) => (
-  //     <p className="mb-6">{children}</p>
-  //   ),
-  //   ul: ({ children }: { children: React.ReactNode }) => (
-  //     <ul className="mb-6">{children}</ul>
-  //   ),
-  //   a: ({ children, ...props }: { children: React.ReactNode }) => (
-  //     <a {...props} target="_blank" rel="noopener">
-  //       {children}
-  //     </a>
-  //   ),
-  // } as MDXComponents
+  const component = {
+    h1: ({ children }: { children: React.ReactNode }) => (
+      <h1 className="fr-h1">{children}</h1>
+    ),
+    h2: ({ children }: { children: React.ReactNode }) => (
+      <h2 className="fr-h2">{children}</h2>
+    ),
+    h3: ({ children }: { children: React.ReactNode }) => (
+      <h2 className="fr-h3">{children}</h2>
+    ),
+    p: ({ children }: { children: React.ReactNode }) => (
+      <p className="mb-6">{children}</p>
+    ),
+    ul: ({ children }: { children: React.ReactNode }) => (
+      <ul className="mb-6">{children}</ul>
+    ),
+    a: ({ children, ...props }: { children: React.ReactNode }) => (
+      <a {...props} target="_blank" rel="noopener">
+        {children}
+      </a>
+    ),
+  } as MDXComponents
 
   const theme = fr.getColors(false)
   const blueCumulus = theme.decisions.background.alt.blueCumulus.default
@@ -101,11 +104,11 @@ export default async function Details({
           </div>
         </div>
       </div>
-      {/* <div className="fr-py-6w">
+      <div className="fr-py-6w">
         <div className="fr-container">
           <MDXRemote source={markdown} components={component} />
         </div>
-      </div> */}
+      </div>
     </div>
   )
 }