feat: markdown comment

showcase.json

@@ -40,7 +40,6 @@
   "zoo",
   "colojayce",
   "stars",
-  "somehacker",
   "nss",
   "somehacker",
   "novonine",
@@ -48,5 +47,8 @@
   "qfdk",
   "fblauer",
   "anxiete",
-  "batman"
+  "batman",
+  "hoho",
+  "kyleten",
+  "kumasanki"
 ]

src/components/common/Comment.tsx

@@ -22,6 +22,7 @@ import { Popover } from "@headlessui/react"
 import { FaceSmileIcon } from "@heroicons/react/24/outline"
 import { CSB_SCAN } from "~/lib/env"
 import { getSiteLink } from "~/lib/helpers"
+import { renderPageContent } from "~/markdown"
 
 dayjs.extend(duration)
 dayjs.extend(relativeTime)
@@ -172,7 +173,7 @@ export const Comment: React.FC<{
               />
             </UniLink>
             <div className="flex-1 flex flex-col rounded-lg">
-              <div className="mb-2 text-sm">
+              <div className="mb-1 text-sm">
                 <UniLink
                   href={
                     comment?.character?.handle &&
@@ -196,7 +197,12 @@ export const Comment: React.FC<{
                   <BlockchainIcon className="w-3 h-3 inline-block" />
                 </UniLink>
               </div>
-              <div>{comment.metadata?.content?.content}</div>
+              <div className="prose">
+                {
+                  renderPageContent(comment.metadata?.content?.content || "")
+                    .element
+                }
+              </div>
             </div>
           </div>
         ))}

src/css/prose.css

@@ -159,3 +159,15 @@
 .prose .code-wrapper:hover .copy-button {
   @apply inline-flex;
 }
+
+.xlog-comment .prose {
+  @apply leading-normal text-[15px];
+}
+
+.xlog-comment .prose blockquote {
+  @apply my-1;
+}
+
+.xlog-comment .prose p {
+  @apply my-1;
+}