Merge pull request #1683 from recodehive/copilot/fix-author-card-redirect

feat: make author card avatar, name, and @handle link to GitHub profile

Author: sanjay-kv

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}

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 {