add markdown parsing

app/posts.tsx

@@ -1,5 +1,9 @@
-import { getPosts, Post } from '@/lib/getPosts';
-import { FC, use } from 'react';
+'use client-only';
+
+import { Post } from '@/lib/getPosts';
+import { FC } from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
 
 interface PostProps {
   posts: Post[];
@@ -11,10 +15,11 @@ const Posts: FC<PostProps> = ({ posts }) => {
         <div className="space-y-2 text-white">
           <p className="font-bold">{p.author.name}</p>
           <p>{p.title}</p>
-          {p.message &&
-            p.message
-              .split('\n')
-              .map((para, i) => para && <p key={i}>{para}</p>)}
+          <div>
+            {p.message && (
+              <ReactMarkdown children={p.message} remarkPlugins={[remarkGfm]} />
+            )}
+          </div>
         </div>
       ))}
     </>