From 3e3fa3e50c133554bf2efd5faa8cb8587df3f967 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 23 May 2026 19:06:37 +0000
Subject: [PATCH 1/2] Initial plan


From fb33583742249ff43bf335da22f5048106110b8d Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 23 May 2026 19:14:42 +0000
Subject: [PATCH 2/2] feat: make author card avatar, name, and @handle link to
 GitHub profile

Agent-Logs-Url: https://github.com/recodehive/recode-website/sessions/8592d8cd-9b6f-4016-9f86-dee00fff62b5
---
 src/theme/BlogPostItem/Footer/index.tsx       | 61 +++++++++++++++++--
 .../BlogPostItem/Footer/styles.module.css     | 25 ++++++++
 2 files changed, 80 insertions(+), 6 deletions(-)

diff --git a/src/theme/BlogPostItem/Footer/index.tsx b/src/theme/BlogPostItem/Footer/index.tsx
index 5c0f04ca..053076a6 100644
--- a/src/theme/BlogPostItem/Footer/index.tsx
+++ b/src/theme/BlogPostItem/Footer/index.tsx
@@ -89,9 +89,7 @@ export default function BlogPostItemFooterWrapper(props: Props): JSX.Element {
       month: "short",
       day: "numeric",
     }).format(new Date(metadata.date));
-  const metaItems = [authorHandle, blogDate, readTimeText]
-    .filter(Boolean)
-    .join(META_SEPARATOR);
+  const metaDateAndTime = [blogDate, readTimeText].filter(Boolean).join(META_SEPARATOR);
 
   const showAuthorCard = Boolean(isBlogPostPage && primaryAuthor && authorName);
 
@@ -111,7 +109,28 @@ export default function BlogPostItemFooterWrapper(props: Props): JSX.Element {
         <section ref={authorCardRef} className={styles.authorCard} aria-label="Post author details">
           <div className={styles.authorBody}>
             <div className={styles.authorAvatarWrapper}>
-              {authorAvatar ? (
+              {githubUrl ? (
+                <Link
+                  to={githubUrl}
+                  className={styles.authorAvatarLink}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  aria-label={`${authorName} on GitHub`}
+                >
+                  {authorAvatar ? (
+                    <img
+                      className={styles.authorAvatar}
+                      src={authorAvatar}
+                      alt={`${authorName} profile picture`}
+                      loading="lazy"
+                    />
+                  ) : (
+                    <div className={styles.authorAvatarFallback} aria-hidden="true">
+                      {authorName?.charAt(0).toUpperCase()}
+                    </div>
+                  )}
+                </Link>
+              ) : authorAvatar ? (
                 <img
                   className={styles.authorAvatar}
                   src={authorAvatar}
@@ -137,10 +156,40 @@ export default function BlogPostItemFooterWrapper(props: Props): JSX.Element {
             </div>
             <div className={styles.authorIdentity}>
               <div className={styles.authorNameRow}>
-                <p className={styles.authorName}>{authorName}</p>
+                {githubUrl ? (
+                  <Link
+                    to={githubUrl}
+                    className={styles.authorName}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    {authorName}
+                  </Link>
+                ) : (
+                  <p className={styles.authorName}>{authorName}</p>
+                )}
                 <span className={styles.authorBadge}>Author</span>
               </div>
-              {metaItems ? <p className={styles.authorMeta}>{metaItems}</p> : null}
+              {(authorHandle || metaDateAndTime) ? (
+                <p className={styles.authorMeta}>
+                  {authorHandle && (
+                    githubUrl ? (
+                      <Link
+                        to={githubUrl}
+                        className={styles.authorHandleLink}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        {authorHandle}
+                      </Link>
+                    ) : (
+                      authorHandle
+                    )
+                  )}
+                  {authorHandle && metaDateAndTime ? META_SEPARATOR : null}
+                  {metaDateAndTime}
+                </p>
+              ) : null}
               {authorSummary ? (
                 <p className={styles.authorSummary}>{authorSummary}</p>
               ) : null}
diff --git a/src/theme/BlogPostItem/Footer/styles.module.css b/src/theme/BlogPostItem/Footer/styles.module.css
index 1643ae81..7fe3ca4b 100644
--- a/src/theme/BlogPostItem/Footer/styles.module.css
+++ b/src/theme/BlogPostItem/Footer/styles.module.css
@@ -34,6 +34,16 @@
   justify-content: center;
 }
 
+.authorAvatarLink {
+  display: block;
+  line-height: 0;
+  border-radius: 50%;
+}
+
+.authorAvatarLink:hover {
+  opacity: 0.85;
+}
+
 .authorAvatar,
 .authorAvatarFallback {
   width: 64px;
@@ -64,6 +74,21 @@
   font-size: 1.75rem;
   font-weight: 800;
   line-height: 1.2;
+  color: var(--ifm-font-color-base);
+  text-decoration: none;
+}
+
+.authorName:hover {
+  text-decoration: underline;
+}
+
+.authorHandleLink {
+  color: inherit;
+  text-decoration: none;
+}
+
+.authorHandleLink:hover {
+  text-decoration: underline;
 }
 
 .authorNameRow {