feat(ui): show author on post page

mateusfg7 · May 10, 2023 · 45aee43 · 45aee43
1 parent d6c685c
commit 45aee43
Showing 1 changed file with 47 additions and 35 deletions.
diff --git a/src/app/(blog)/post/[slug]/page.tsx b/src/app/(blog)/post/[slug]/page.tsx
@@ -7,9 +7,8 @@ import { FiTag } from 'react-icons/fi'
 
 import { allPosts, type Post } from 'contentlayer/generated'
 
-import { Header } from 'components/Header'
 import { Date } from 'components/Date'
-import { ReadProgress } from 'components/ReadProgress'
+import { authors } from 'lib/authors'
 
 interface Props {
   params: { slug: string }
@@ -32,45 +31,58 @@ export function generateMetadata({ params }: Props): Metadata {
 export default function Page({ params }: Props) {
   const post = allPosts.find(post => post.id === params.slug) as Post
 
-  const tags = post.tags.split(',')
+  const tags = post.tags.split(',').map(tag => tag.trim())
   const MDXContent = useMDXComponent(post.body.code)
 
+  const author = authors.filter(author => author.user === post.author)[0]
+
   return (
-    <div className='blog-content-w m-auto'>
-        <div className="pb-4 px-0 leading-6 border-b border-neutral-500 mb-8">
-          <h1 className="mb-2 font-bold text-xl">{post.title}</h1>
-          <div>
-            <p>
-              <Date dateString={post.date} /> &#8226;{' '}
-              <Link
-                href={`/category/${post.category}`}
-                className="hover:text-blue-500 dark:hover:text-blue-400"
-              >
-                {post.category}
-              </Link>
-            </p>
-            {post.lastUpdate && (
-              <p
-                className="flex items-center gap-1 text-neutral-500"
-                title="Last Update"
-              >
-                <Date dateString={post.lastUpdate} /> <RiHistoryLine />
-              </p>
-            )}
-            <p className="flex flex-wrap gap-3 mt-1">
-              {tags.map((tag, index) => (
-                <Link href={`/tag/${tag.trim()}`} key={index}>
-                  <span className="flex items-center justify-center gap-1 text-neutral-500 hover:text-neutral-900 dark:hover:text-neutral-100 transition-colors duration-200 hover:cursor-pointe">
-                    {tag} <FiTag size={15} />
-                  </span>
-                </Link>
-              ))}
-            </p>
+    <div className="blog-content-w m-auto">
+      <div className="flex flex-col gap-4 pb-5 leading-6 border-b border-neutral-500 mb-8">
+        <div>
+          <h1 className="font-bold text-2xl">{post.title}</h1>
+          <div className="flex gap-2 text-neutral-600 dark:text-neutral-400">
+            <span>by</span>
+            <Link
+              href={`/author/${author.user}`}
+              className="cursor-pointer hover:text-black dark:hover:text-white"
+            >
+              {author.name} ({author.user})
+            </Link>
           </div>
         </div>
-        <div className="post-content">
-          <MDXContent />
+        <div>
+          <p>
+            <Date dateString={post.date} /> &#8226;{' '}
+            <Link
+              href={`/category/${post.category}`}
+              className="hover:text-blue-500 dark:hover:text-blue-400"
+            >
+              {post.category}
+            </Link>
+          </p>
+          {post.lastUpdate && (
+            <p
+              className="flex items-center gap-1 text-neutral-500"
+              title="Last Update"
+            >
+              <Date dateString={post.lastUpdate} /> <RiHistoryLine />
+            </p>
+          )}
+          <p className="flex flex-wrap gap-3 mt-1">
+            {tags.map((tag, index) => (
+              <Link href={`/tag/${tag}`} key={index}>
+                <span className="flex items-center justify-center gap-1 text-neutral-500 hover:text-neutral-900 dark:hover:text-neutral-100 transition-colors duration-200 hover:cursor-pointe">
+                  {tag} <FiTag size={15} />
+                </span>
+              </Link>
+            ))}
+          </p>
         </div>
+      </div>
+      <div className="post-content">
+        <MDXContent />
+      </div>
     </div>
   )
 }