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;
@@ -54,17 +55,17 @@ const toc = headers.map((header) => ({
 
     <!-- Featured Image -->
     {
-      image && (
+    image && (
-        <figure class="mb-8 rounded-2xl overflow-hidden">
+    <figure class="mb-8 rounded-2xl overflow-hidden">
-          <Image
+      <Image
-            src={image}
+        src={image}
-            alt={title}
+        alt={title}
-            class="w-full aspect-video object-cover"
+        class="w-full aspect-video object-cover"
-            width={1200}
+        width={1200}
-            height={630}
+        height={630}
-          />
+      />
-        </figure>
+    </figure>
-      )
+    )
     }
 
     <!-- Post Header -->
@@ -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)}
@@ -81,24 +82,26 @@ const toc = headers.map((header) => ({
         <span>•</span>
         <span>{readingTime} min read</span>
         {
-          updatedDate && (
+        updatedDate && (
-            <>
+        <>
-              <span>•</span>
+        <span>•</span>
-              <span>Updated: {formatDate(updatedDate)}</span>
+        <span>Updated: {formatDate(updatedDate)}</span>
-            </>
+      </>
-          )
+        )
         }
       </div>
 
       {
-        tags && tags.length > 0 && (
+      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) => (
+        {tags.map((tag) => (
-              <TagBadge tag={tag} />
+        <TagBadge tag={tag} />
-            ))}
+        ))}
-          </div>
+      </div>
-        )
+      )
       }
+
+      <Author />
     </header>
 
     <!-- Divider -->
@@ -170,7 +173,7 @@ const toc = headers.map((header) => ({
         <span class="text-base-content/30">•</span>
         <a href="/#contact" class="link link-hover">Contact me</a>
         <span class="text-base-content/30">•</span>
-      <a href="https://ko-fi.com/anotherhadi" class="link link-hover">Support me</a>
+        <a href="https://ko-fi.com/anotherhadi" class="link link-hover">Support me</a>
       </div>
     </div>
   </article>