Add tags component in posts

src/components/widgets/BlogListItem.astro

@@ -3,6 +3,7 @@ import Picture from "~/components/core/Picture.astro";
 import { getPermalink } from "~/utils/permalinks";
 import { findImage } from "~/utils/findImage";
 import { getFormattedDate } from "~/utils/getFormatedDate";
+import PostTags from "./PostTags.astro";
 
 const { post } = Astro.props;
 
@@ -19,7 +20,7 @@ const image = await findImage(post.image);
   </a>
   <div>
     <header>
-      <h2 class="text-xl sm:text-2xl font-bold leading-snug mb-2">
+      <h2 class="text-xl sm:text-2xl font-bold leading-snug mb-2 font-heading">
         <a class="hover:text-blue-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
           href={getPermalink(post.slug, "post")}>
           {post.title}
@@ -29,12 +30,15 @@ const image = await findImage(post.image);
     <p class="text-md sm:text-lg flex-grow">
       {post.excerpt || post.description}
     </p>
-    <footer class="flex items-center mt-4">
+    <footer class="mt-4">
       <div>
         <span class="text-gray-500 dark:text-slate-400">
           <time datetime={post.pubDate}>{getFormattedDate(post.pubDate)}</time> ~ {Math.ceil(post.readingTime)} min read
         </span>
       </div>
+      <div class="mt-4">
+        <PostTags tags={post.tags} />
+      </div>
     </footer>
   </div>
 </article>

src/components/widgets/BlogPost.astro

@@ -1,6 +1,7 @@
 ---
 import Picture from "~/components/core/Picture.astro";
 import { getFormattedDate } from "~/utils/getFormatedDate";
+import PostTags from "~/components/widgets/PostTags.astro";
 
 const { post } = Astro.props;
 ---
@@ -12,10 +13,9 @@ const { post } = Astro.props;
         <time datetime={post.pubDate}>{getFormattedDate(post.pubDate)}</time> ~ {Math.ceil(post.readingTime)} min read
       </p>
       <h1
-        class="px-4 sm:px-6 max-w-3xl mx-auto text-center text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-8">
+        class="px-4 sm:px-6 max-w-3xl mx-auto text-center text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-8 font-heading">
         {post.title}
       </h1>
-
       {
       post.image && (
       <Picture src={post.image}
@@ -25,8 +25,11 @@ const { post } = Astro.props;
       }
     </header>
     <div
-      class="container mx-auto px-8 sm:px-6 max-w-3xl prose prose-lg lg:prose-xl dark:prose-invert dark:prose-headings:text-slate-300 prose-md prose-headings:leading-tighter prose-headings:tracking-tighter prose-headings:font-bold prose-a:text-blue-600 dark:prose-a:text-blue-400 prose-img:rounded-md prose-img:shadow-lg mt-8">
+      class="container mx-auto px-8 sm:px-6 max-w-3xl prose prose-lg lg:prose-xl dark:prose-invert dark:prose-headings:text-slate-300 prose-md prose-headings:font-heading prose-headings:leading-tighter prose-headings:tracking-tighter prose-headings:font-bold prose-a:text-blue-600 dark:prose-a:text-blue-400 prose-img:rounded-md prose-img:shadow-lg mt-8">
       <Fragment set:html={post.body} />
     </div>
+    <div class="container mx-auto px-8 sm:px-6 max-w-3xl mt-8">
+      <PostTags tags={post.tags} />
+    </div>
   </article>
 </section>

src/components/widgets/PostTags.astro

@@ -0,0 +1,12 @@
+---
+import { getPermalink } from "~/utils/permalinks";
+const { tags } = Astro.props;
+---
+
+{tags && Array.isArray(tags) && <ul>
+  {tags.map(tag => (
+  <li class="bg-gray-100 inline-block mr-2 mb-2 py-0.5 px-2"><a href={getPermalink(tag, "tag" )}>{tag}</a></li>
+  ))
+  }
+</ul>
+}