improve comment display

phartenfeller · Oct 30, 2023 · 824b1b3 · 824b1b3
1 parent 72dee12
commit 824b1b3
Show file tree

Hide file tree

Showing 4 changed files with 371 additions and 368 deletions.
diff --git a/package.json b/package.json
@@ -32,7 +32,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
-    "react-markdown": "^7.1.2",
+    "react-markdown": "^9.0.0",
     "react-readonly-codemirror6": "^1.0.0",
     "react-zoom-pan-pinch": "^1.6.1",
     "slugify": "^1.6.6",

diff --git a/src/components/blog/Comments.jsx b/src/components/blog/Comments.jsx
@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { useEffect, useState } from 'react';
+import Markdown from 'react-markdown';
 import LinkButton from '../LinkButton';
 
 const LOADING = 1;
@@ -50,7 +51,7 @@ const Comments = ({ ghCommentsIssueId }) => {
               <div className="mr-8 flex-shrink-0">
                 <a href={comment.user.html_url}>
                   <img
-                    className="h-16 w-16 rounded-full bg-zinc-400 flex items-center justify-center ring-8 ring-white"
+                    className="flex h-16 w-16 items-center justify-center rounded-full bg-zinc-400 ring-8 ring-white"
                     src={comment.user.avatar_url}
                     alt={comment.user.login}
                     loading="lazy"
@@ -61,21 +62,21 @@ const Comments = ({ ghCommentsIssueId }) => {
                 <div>
                   <a
                     href={comment.user.html_url}
-                    className="font-medium text-lg text-zinc-900 hover:underline"
+                    className="text-lg font-medium text-zinc-900 hover:underline"
                   >
                     {comment.user.login}
                   </a>
-                  <span className="mx-2 text-zinc-900 font-bold">•</span>
+                  <span className="mx-2 font-bold text-zinc-900">•</span>
                   <time className="text-zinc-600" dateTime={comment.created_at}>
                     {new Date(comment.created_at).toLocaleDateString()}
                   </time>
                 </div>
-                <p className="mt-2 text-zinc-700">{comment.body}</p>
+                <Markdown className="blog-comments">{comment.body}</Markdown>
               </div>
             </li>
           ))}
         {comments.length === 0 && (
-          <li className="text-center py-3 text-zinc-700 font-light text-lg">
+          <li className="py-3 text-center text-lg font-light text-zinc-700">
             No comments yet...
           </li>
         )}

diff --git a/src/styles/blog.css b/src/styles/blog.css
@@ -32,6 +32,15 @@
   font-family: 'Raleway', serif;
 }
 
+.blog-comments {
+  @apply font-mono text-sm leading-7;
+}
+
+.blog-comments p {
+  @apply mb-4;
+}
+
+.blog-comments a,
 .blog-body a:not(.custom-link) {
   @apply rounded text-red-600 underline decoration-red-100 hover:decoration-red-300 focus:ring-1 focus:ring-red-600;
 }