add author to blog posts

Signed-off-by: Hadi <112569860+anotherhadi@users.noreply.github.com>

src/components/Author.astro

@@ -0,0 +1,18 @@
+---
+import { Image } from "astro:assets";
+const avatar = "/avatar.jpg";
+const username = "anotherhadi"
+const bio = "Infosec engineer."
+
+---
+<div class="flex gap-3 justify-start">
+  <div
+    class="ring-base-300 ring-offset-base-100 rounded-full ring-2 ring-offset-2 flex justify-center items-center"
+  >
+    <Image src={avatar} alt="anotherhadi avatar" class="rounded-full m-auto" width={36} height={36}/>
+  </div>
+  <div>
+    <p class="text-sm font-semibold"><a href="/"><span class="text-base-content/40">@</span>{username}</a></p>
+    <p class="text-xs text-base-content/60">{bio}</p>
+  </div>
+</div>

src/layouts/BlogLayout.astro

@@ -5,6 +5,7 @@ import TagBadge from "../components/TagBadge.astro";
 import BackToTop from "../components/BackToTop.astro";
 import { ChevronLeft } from "@lucide/astro";
 import { parse } from "node-html-parser";
+import Author from "../components/Author.astro";
 
 interface Props {
   title: string;
@@ -73,7 +74,7 @@ const toc = headers.map((header) => ({
       <p class="text-xl text-base-content/70 mb-4">{description}</p>
 
       <div
-        class="flex flex-wrap items-center gap-4 text-sm text-base-content/60"
+        class="flex flex-wrap items-center gap-4 text-sm text-base-content/60 mb-4"
       >
         <time datetime={publishDate.toISOString()}>
           {formatDate(publishDate)}
@@ -92,13 +93,15 @@ const toc = headers.map((header) => ({
 
       {
       tags && tags.length > 0 && (
-          <div class="flex flex-wrap gap-2 mt-4">
+      <div class="flex flex-wrap gap-2 mb-4">
         {tags.map((tag) => (
         <TagBadge tag={tag} />
         ))}
       </div>
       )
       }
+
+      <Author />
     </header>
 
     <!-- Divider -->