feat: show tags on post list

ridhozhr10 · Jun 1, 2024 · 6101d61 · 6101d61
1 parent f20792d
commit 6101d61
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 8 deletions.
diff --git a/src/app/_components/BlogPost/index.tsx b/src/app/_components/BlogPost/index.tsx
@@ -20,7 +20,7 @@ import {
   generateTwitterShare,
 } from "@/lib/share";
 import { Post } from "@/interfaces/post";
-import { useRef, useState } from "react";
+import { Fragment, useRef, useState } from "react";
 import { SinglePagination } from "@/lib/api";
 import Comment from "./Comment";
 import dayjs from "dayjs";
@@ -76,7 +76,7 @@ export default function BlogPost({
             </li>
             {shareLinks.map((d, i) => (
               <li
-                key={`share_i_${i}`}
+                key={`share_i_${d.href}_${i}`}
                 className={!shareOpen ? "max-lg:hidden" : ""}
               >
                 <a href={d.href} title={d.title} target="_blank" rel="noopener">
@@ -111,7 +111,7 @@ export default function BlogPost({
           <p>
             <BiTagAlt className="feather" />
             {post.tags.map((tag) => (
-              <span className="tag" key={tag}>
+              <span className="tag" key={post.title + tag}>
                 <Link href={`/tags/${tag}`}>{tag}</Link>
               </span>
             ))}
@@ -123,10 +123,10 @@ export default function BlogPost({
             {post.path.map((p, i) => {
               const slug = post.path.filter((_, is) => is <= i).join("/");
               return (
-                <>
+                <Fragment key={`path_post_${post.title}_${i}`}>
                   <Link href={`/posts/${slug}`}>{p}</Link>
                   {i < post.path.length - 1 ? "/" : ""}
-                </>
+                </Fragment>
               );
             })}
           </span>

diff --git a/src/app/posts/[...path]/page.tsx b/src/app/posts/[...path]/page.tsx
@@ -12,6 +12,7 @@ import { Metadata } from "next";
 import Link from "next/link";
 import { notFound } from "next/navigation";
 import "@/app/posts/style.scss";
+import { BiTagAlt } from "react-icons/bi";
 
 type Props = {
   params: { path: string[] };
@@ -42,6 +43,18 @@ export default async function Post({ params }: Props) {
                       {dayjs(post.created_at).format("MMM DD, YYYY")}
                     </span>
                   </Link>
+                  <div className="flex items-center mb-[5px]">
+                    <BiTagAlt className="mr-2" />
+                    {post.tags.map((tag) => (
+                      <Link
+                        key={post.title + tag}
+                        href={`/tags/${tag}`}
+                        className="p-1 bg-header-bg-dark bg-opacity-50 mr-2 rounded-md hover:bg-opacity-100"
+                      >
+                        {tag}
+                      </Link>
+                    ))}
+                  </div>
                 </li>
               ))}
             </ul>

diff --git a/src/app/posts/page.tsx b/src/app/posts/page.tsx
@@ -4,6 +4,7 @@ import Link from "next/link";
 import dayjs from "dayjs";
 import "./style.scss";
 import { baseMetadata } from "@/constants";
+import { BiTagAlt } from "react-icons/bi";
 
 export const metadata = baseMetadata("posts", "Posts");
 
@@ -29,6 +30,18 @@ export default function Posts() {
                       {dayjs(post.date).format("MMM DD")}
                     </span>
                   </Link>
+                  <div className="flex items-center mb-[5px]">
+                    <BiTagAlt className="mr-2" />
+                    {post.tags.map((tag) => (
+                      <Link
+                        key={post.title + tag}
+                        href={`/tags/${tag}`}
+                        className="p-1 bg-header-bg-dark bg-opacity-50 mr-2 rounded-md hover:bg-opacity-100"
+                      >
+                        {tag}
+                      </Link>
+                    ))}
+                  </div>
                 </li>
               ))}
             </ul>

diff --git a/src/app/posts/style.scss b/src/app/posts/style.scss
@@ -16,10 +16,10 @@
       border-bottom: 1px grey dashed;
 
       .post-item-inner {
-        @apply flex justify-between align-baseline py-[12px] px-0;
+        @apply flex justify-between align-baseline pt-[12px] px-0;
 
         .post-title {
-          @apply mb-[5px];
+          @apply mb-[5px] leading-5;
         }
 
         .post-day {

diff --git a/src/app/tags/[tag]/page.tsx b/src/app/tags/[tag]/page.tsx
@@ -4,6 +4,7 @@ import Link from "next/link";
 import dayjs from "dayjs";
 import "@/app/posts/style.scss";
 import { Metadata } from "next";
+import { BiTagAlt } from "react-icons/bi";
 
 type Props = {
   params: {
@@ -17,7 +18,7 @@ export default function Tag({ params }: Props) {
   return (
     <BaseLayout logoText={`ls $POSTS_DIR | grep ${params.tag}`}>
       <main className="post">
-        <h1 className="text-5xl font-bold my-6">{params.tag}</h1>
+        <h1 className="text-5xl font-bold my-6">#{params.tag}</h1>
         {postGroups.map((postGroup) => (
           <div key={postGroup.year} className="posts-group">
             <div className="post-year">{postGroup.year}</div>
@@ -33,6 +34,18 @@ export default function Tag({ params }: Props) {
                       {dayjs(post.date).format("MMM DD")}
                     </span>
                   </Link>
+                  <div className="flex items-center mb-[5px]">
+                    <BiTagAlt className="mr-2" />
+                    {post.tags.map((tag) => (
+                      <Link
+                        key={post.title + tag}
+                        href={`/tags/${tag}`}
+                        className="p-1 bg-header-bg-dark bg-opacity-50 mr-2 rounded-md hover:bg-opacity-100"
+                      >
+                        {tag}
+                      </Link>
+                    ))}
+                  </div>
                 </li>
               ))}
             </ul>

diff --git a/src/lib/api.ts b/src/lib/api.ts
@@ -131,6 +131,7 @@ type PostGroup = {
     slug: string;
     title: string;
     date: Date;
+    tags: string[];
   }[];
 };
 
@@ -147,6 +148,7 @@ export function getPostGroupByYear(tag?: string): PostGroup[] {
       slug: post.path.join("/"),
       title: post.title,
       date: new Date(post.created_at),
+      tags: post.tags,
     };
 
     if (idxResult < 0) {