feat: added author info in article page

src/components/helper/authors/Info.astro

@@ -0,0 +1,29 @@
+---
+import {Image} from "astro:assets";
+import {getEntry} from "astro:content";
+import {siteConfig} from "../../../config";
+
+const { id } = Astro.props;
+
+// Get author data
+const authorData = await getEntry('authors', id || '');
+const authorAvatar = authorData?.data.mcplayerid ? `/images/avatars/${id}.png` : null;
+const authorName = authorData ? authorData.data.name : null;
+---
+{(siteConfig.displayAvatar && authorData) &&
+        <>
+            {authorAvatar && <Image src={authorAvatar} alt={`avatar of ${authorName}`} width=16 height=16 />}
+            <span>{authorName} @ </span>
+        </>
+    }
+<style>
+    img + span {
+        margin-left: 0.5rem;
+        font-weight: 500;
+    }
+    img {
+        width: 16px;
+        height: 16px;
+        vertical-align: middle;
+    }
+</style>

src/config.ts

@@ -26,6 +26,8 @@ export const siteConfig = {
     // search
     // This only works when noClientJavaScript is enabled
     searchEngine: 'bing', // 'google', 'duckduckgo', 'bing'(broken until M1cr0$0ft get support for it), defaults to 'google'
+    // content
+    displayAvatar: true, // display author avatar in the article list and info line of article page
     // footer
     // yes you can write html safely here
     customFooter: '<i>I have no mouth, and I must SCREAM</i>',

src/pages/post/[...slug].astro

@@ -6,6 +6,7 @@ import {getImage} from "astro:assets";
 import {siteConfig} from "../../config";
 import ReplyViaEmail from "../../components/ReplyViaEmail.astro";
 import { ExtractFirstImage } from '../../plugins/extract-images';
+import AuthorInfo from "../../components/helper/authors/Info.astro";
 
 export async function getStaticPaths() {
   const blogEntries = await getCollection('posts');
@@ -45,6 +46,7 @@ const cover = customFeaturedImage || matchedImage_src?.src || firstImageURL || `
   author={authorInfo.name}
 >
       <h1 class="title">{entry.data.title}</h1>
+      <AuthorInfo id={authorId} />
       <span class="date">{new Date(entry.data.pubDate).toISOString().split('T')[0]}</span>
       <div class="content">
         <Content />