feat: github user card implemented

src/components/GitHubUserCard.astro

@@ -0,0 +1,45 @@
+---
+import { fetchGitHubUser } from '../utils/github'
+
+interface Props {
+	username: string
+}
+
+const { username } = Astro.props
+
+const cleanUsername = username.startsWith('@') ? username.slice(1) : username
+const user = await fetchGitHubUser(cleanUsername)
+const githubUrl = `https://github.com/${cleanUsername}`
+---
+
+{
+	user ? (
+		<a
+			href={githubUrl}
+			target="_blank"
+			rel="noopener noreferrer"
+			class="inline-flex items-center gap-2 hover:opacity-80 transition-opacity group"
+			aria-label={`GitHub: ${user.name || user.login}`}
+		>
+			<img
+				src={user.avatar_url}
+				alt={user.name || user.login}
+				class="w-6 h-6 rounded-full border border-border dark:border-border-dark"
+				loading="lazy"
+			/>
+			<span class="text-sm text-muted-foreground dark:text-muted-dark-foreground group-hover:text-foreground dark:group-hover:text-foreground-dark transition-colors">
+				{user.name || user.login}
+			</span>
+		</a>
+	) : (
+		<a
+			href={githubUrl}
+			target="_blank"
+			rel="noopener noreferrer"
+			class="inline-flex items-center gap-2 hover:opacity-80 transition-opacity"
+		>
+			<span class="i-lucide-github w-4 h-4 text-muted-foreground dark:text-muted-dark-foreground" />
+			<span class="text-sm text-muted-foreground dark:text-muted-dark-foreground">{username}</span>
+		</a>
+	)
+}

src/pages/articles/[slug].astro

@@ -1,6 +1,7 @@
 ---
 import DocsLayout from '../../layouts/DocsLayout.astro'
 import ShareButtons from '../../components/ShareButtons.astro'
+import GitHubUserCard from '../../components/GitHubUserCard.astro'
 import { getCollection, render } from 'astro:content'
 import { SITE } from '../../config.mjs'
 import { getLangFromUrl, t } from '../../i18n/index.ts'
@@ -63,7 +64,6 @@ const jsonLdArticle = {
 
 const homeLabel = t(labels, 'article.home')
 const articlesLabel = t(labels, 'nav.articles')
-const byLabel = t(labels, 'article.by')
 const onThisPageLabel = t(labels, 'article.onThisPage')
 ---
 
@@ -118,9 +118,13 @@ const onThisPageLabel = t(labels, 'article.onThisPage')
 				<h1 class="text-3xl font-bold tracking-tight text-foreground dark:text-foreground-dark mb-4">
 					{article.data.title}
 				</h1>
-				<div class="flex items-center gap-4 text-sm text-muted-foreground dark:text-muted-dark-foreground mb-4">
-					<span>{byLabel} {article.data.author}</span>
+				<div
+					class="flex items-center gap-4 text-sm text-muted-foreground dark:text-muted-dark-foreground mb-4 flex-wrap"
+				>
+					<GitHubUserCard username={article.data.author} />
+					<span class="text-muted-foreground/50 dark:text-muted-dark-foreground/50">·</span>
 					<span>{article.data.date}</span>
+					<span class="text-muted-foreground/50 dark:text-muted-dark-foreground/50">·</span>
 					<span class="flex items-center gap-1"
 						><span class="i-lucide-eye w-3.5 h-3.5"></span>{article.data.views.toLocaleString()}</span
 					>

src/pages/en/articles/[slug].astro

@@ -1,6 +1,7 @@
 ---
 import DocsLayout from '../../../layouts/DocsLayout.astro'
 import ShareButtons from '../../../components/ShareButtons.astro'
+import GitHubUserCard from '../../../components/GitHubUserCard.astro'
 import { getCollection, render } from 'astro:content'
 import { SITE } from '../../../config.mjs'
 import { t } from '../../../i18n/index.ts'
@@ -64,7 +65,6 @@ const jsonLdArticle = {
 
 const homeLabel = t(labels, 'article.home')
 const articlesLabel = t(labels, 'nav.articles')
-const byLabel = t(labels, 'article.by')
 const onThisPageLabel = t(labels, 'article.onThisPage')
 ---
 
@@ -117,9 +117,13 @@ const onThisPageLabel = t(labels, 'article.onThisPage')
 				<h1 class="text-3xl font-bold tracking-tight text-foreground dark:text-foreground-dark mb-4">
 					{article.data.title}
 				</h1>
-				<div class="flex items-center gap-4 text-sm text-muted-foreground dark:text-muted-dark-foreground mb-4">
-					<span>{byLabel} {article.data.author}</span>
+				<div
+					class="flex items-center gap-4 text-sm text-muted-foreground dark:text-muted-dark-foreground mb-4 flex-wrap"
+				>
+					<GitHubUserCard username={article.data.author} />
+					<span class="text-muted-foreground/50 dark:text-muted-dark-foreground/50">·</span>
 					<span>{article.data.date}</span>
+					<span class="text-muted-foreground/50 dark:text-muted-dark-foreground/50">·</span>
 					<span class="flex items-center gap-1"
 						><span class="i-lucide-eye w-3.5 h-3.5"></span>{article.data.views.toLocaleString()}</span
 					>

src/utils/github.ts

@@ -0,0 +1,34 @@
+export interface GitHubUser {
+	login: string
+	avatar_url: string
+	html_url: string
+	name: string | null
+	bio: string | null
+	company: string | null
+	blog: string
+	public_repos: number
+	followers: number
+	following: number
+}
+
+export async function fetchGitHubUser(username: string): Promise<GitHubUser | null> {
+	const cleanUsername = username.startsWith('@') ? username.slice(1) : username
+
+	try {
+		const response = await fetch(`https://api.github.com/users/${cleanUsername}`, {
+			headers: {
+				Accept: 'application/vnd.github.v3+json',
+			},
+		})
+
+		if (!response.ok) {
+			console.error(`GitHub API error: ${response.status} for user ${cleanUsername}`)
+			return null
+		}
+
+		return await response.json()
+	} catch (error) {
+		console.error(`Failed to fetch GitHub user ${cleanUsername}:`, error)
+		return null
+	}
+}