recodehive · sanjay-kv · May 22, 2026 · May 22, 2026 · May 22, 2026 · May 22, 2026
@@ -1,14 +1,16 @@
 import React from "react";
 import Link from "@docusaurus/Link";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import { useBlogPost } from "@docusaurus/plugin-content-blog/client";
 import BlogPostItemFooterOriginal from "@theme-original/BlogPostItem/Footer";
 import type BlogPostItemFooterType from "@theme/BlogPostItem/Footer";
 import type { WrapperProps } from "@docusaurus/types";
-import { getAuthorProfile } from "@site/src/utils/authors";
+import { getAuthorProfile } from "../../../utils/authors";
 
 import styles from "./styles.module.css";
 
 type Props = WrapperProps<typeof BlogPostItemFooterType>;
+const META_SEPARATOR = " • ";
 
 function getGitHubUrl(author: {
   key?: string;
@@ -26,7 +28,26 @@ function getGitHubUrl(author: {
   return undefined;
 }
 
+function getGitHubHandle(author: {
+  key?: string;
+  url?: string;
+}): string | undefined {
+  if (author.url && /github\.com\//i.test(author.url)) {
+    const matched = author.url.match(/github\.com\/([^/?#]+)/i);
+    if (matched?.[1]) {
+      return `@${matched[1]}`;
+    }
+  }
+
+  if (author.key) {
+    return `@${author.key}`;
+  }
+
+  return undefined;
+}
+
 export default function BlogPostItemFooterWrapper(props: Props): JSX.Element {
+  const { siteConfig } = useDocusaurusContext();
   const { metadata, isBlogPostPage } = useBlogPost();
   const primaryAuthor = metadata.authors?.[0];
 
@@ -46,20 +67,27 @@ export default function BlogPostItemFooterWrapper(props: Props): JSX.Element {
 
   const roundedReadTime = Math.max(1, Math.ceil(metadata.readingTime || 0));
   const readTimeText = `${roundedReadTime} min read`;
+  const authorHandle = primaryAuthor
+    ? getGitHubHandle({
+        key: primaryAuthor.key,
+        url: primaryAuthor.url,
+      })
+    : undefined;
   const authorSummary =
     primaryAuthor?.description ||
     profile?.description ||
     primaryAuthor?.title ||
     profile?.title;
   const blogDate =
-    metadata.formattedDate ||
-    (metadata.date
-      ? new Date(metadata.date).toLocaleDateString("en-US", {
-          year: "numeric",
-          month: "short",
-          day: "numeric",
-        })
-      : "");
+    metadata.date &&
+    new Intl.DateTimeFormat(siteConfig.i18n?.defaultLocale || "en-US", {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+    }).format(new Date(metadata.date));
+  const metaItems = [authorHandle, blogDate, readTimeText]
+    .filter(Boolean)
+    .join(META_SEPARATOR);
 
   const showAuthorCard = Boolean(isBlogPostPage && primaryAuthor && authorName);
 
@@ -68,41 +96,53 @@ export default function BlogPostItemFooterWrapper(props: Props): JSX.Element {
       <BlogPostItemFooterOriginal {...props} />
       {showAuthorCard && (
         <section className={styles.authorCard} aria-label="Post author details">
-          <div className={styles.authorLeft}>
-            {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>
-            )}
+          <div className={styles.authorBody}>
+            <div className={styles.authorAvatarWrapper}>
+              {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>
+              )}
+              <span className={styles.verifiedBadge} aria-hidden="true">
+                ✓
+              </span>
+            </div>
             <div className={styles.authorIdentity}>
-              <p className={styles.authorName}>{authorName}</p>
-              {blogDate ? <p className={styles.authorDate}>{blogDate}</p> : null}
+              <div className={styles.authorNameRow}>
+                <p className={styles.authorName}>{authorName}</p>
+                <span className={styles.authorBadge}>Author</span>
+              </div>
+              {metaItems ? <p className={styles.authorMeta}>{metaItems}</p> : null}
               {authorSummary ? (
                 <p className={styles.authorSummary}>{authorSummary}</p>
               ) : null}
+              {githubUrl ? (
+                <Link
+                  className={styles.githubButton}
+                  to={githubUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <span className={styles.githubIcon} aria-hidden="true">
+                    <svg viewBox="0 0 16 16" width="14" height="14" focusable="false">
+                      <path
+                        fill="currentColor"
+                        d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.5-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82A7.5 7.5 0 0 1 8 3.8c.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8Z"
+                      />
+                    </svg>
+                  </span>
+                  GitHub
+                </Link>
+              ) : null}
             </div>
           </div>
-
-          <div className={styles.authorRight}>
-            <p className={styles.readTime}>{readTimeText}</p>
-            {githubUrl ? (
-              <Link
-                className={styles.githubButton}
-                to={githubUrl}
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                GitHub Profile
-              </Link>
-            ) : null}
-          </div>
         </section>
       )}
     </>

@@ -1,32 +1,50 @@
 .authorCard {
-  position: relative;
   width: 100%;
-  margin-top: 1.25rem;
-  padding: 1rem;
-  padding-bottom: 3.75rem;
+  margin-top: 1.5rem;
+  padding: 1.5rem;
   border: 1px solid var(--ifm-color-emphasis-300);
-  border-radius: 12px;
-  display: flex;
-  align-items: stretch;
-  justify-content: space-between;
-  gap: 1rem;
-  background: var(--ifm-background-surface-color);
+  border-radius: 16px;
+  background: linear-gradient(
+    90deg,
+    color-mix(in srgb, var(--ifm-color-emphasis-100) 80%, transparent),
+    color-mix(in srgb, var(--ifm-color-emphasis-200) 45%, transparent)
+  );
   box-sizing: border-box;
 }
 
-.authorLeft {
+.authorBody {
   display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  min-width: 0;
+  align-items: flex-start;
+  gap: 1rem;
+}
+
+.authorAvatarWrapper {
+  position: relative;
+  flex-shrink: 0;
+}
+
+.verifiedBadge {
+  position: absolute;
+  right: -1px;
+  bottom: -1px;
+  width: 18px;
+  height: 18px;
+  border-radius: 999px;
+  border: 2px solid var(--ifm-background-color);
+  background: var(--ifm-color-success);
+  color: var(--ifm-color-white);
+  display: grid;
+  place-items: center;
+  font-size: 11px;
+  line-height: 1;
+  font-weight: 700;
 }
 
 .authorAvatar,
 .authorAvatarFallback {
-  width: 52px;
-  height: 52px;
+  width: 84px;
+  height: 84px;
   border-radius: 50%;
-  flex-shrink: 0;
 }
 
 .authorAvatar {
@@ -44,56 +62,64 @@
 
 .authorIdentity {
   min-width: 0;
+  flex: 1;
 }
 
 .authorName {
   margin: 0;
-  font-weight: 700;
+  font-size: 1.75rem;
+  font-weight: 800;
   line-height: 1.2;
 }
 
-.authorDate {
-  margin: 0.25rem 0 0;
-  color: var(--ifm-color-emphasis-700);
-  font-size: 0.9rem;
+.authorNameRow {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  flex-wrap: wrap;
 }
 
-.authorSummary {
-  margin: 0.45rem 0 0;
-  color: var(--ifm-color-emphasis-800);
-  font-size: 0.92rem;
-  line-height: 1.4;
-  max-width: 56ch;
+.authorBadge {
+  padding: 0.2rem 0.55rem;
+  border-radius: 999px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--ifm-color-primary);
+  background: var(--ifm-color-primary-contrast-background);
 }
 
-.authorRight {
-  margin-left: auto;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  justify-content: flex-start;
-  gap: 0.75rem;
-  text-align: right;
+.authorMeta {
+  margin: 0.35rem 0 0;
+  color: var(--ifm-color-emphasis-700);
+  font-size: 1rem;
 }
 
-.readTime {
-  margin: 0;
-  color: var(--ifm-color-emphasis-700);
-  font-weight: 600;
+.authorSummary {
+  margin: 0.65rem 0 0;
+  color: var(--ifm-color-emphasis-800);
+  font-size: 1.1rem;
+  line-height: 1.4;
+  max-width: 68ch;
 }
 
 .githubButton {
-  position: absolute;
-  right: 1rem;
-  bottom: 1rem;
+  margin-top: 1rem;
   display: inline-flex;
   align-items: center;
-  justify-content: center;
-  padding: 0.45rem 0.8rem;
-  border-radius: 8px;
-  border: 1px solid var(--ifm-color-primary);
+  gap: 0.4rem;
+  padding: 0.35rem 0.9rem;
+  border-radius: 999px;
+  border: 1px solid var(--ifm-color-emphasis-300);
+  background: var(--ifm-background-color);
+  color: var(--ifm-font-color-base);
+  font-size: 0.95rem;
   font-weight: 600;
   text-decoration: none;
+  width: fit-content;
+}
+
+.githubIcon {
+  display: inline-flex;
 }
 
 .githubButton:hover {
@@ -102,19 +128,20 @@
 
 @media (max-width: 640px) {
   .authorCard {
-    padding-bottom: 1rem;
+    padding: 1rem;
+  }
+
+  .authorBody {
     flex-direction: column;
-    align-items: flex-start;
   }
 
-  .authorRight {
-    width: 100%;
-    margin-left: 0;
-    align-items: flex-start;
-    text-align: left;
+  .authorAvatar,
+  .authorAvatarFallback {
+    width: 64px;
+    height: 64px;
   }
 
-  .githubButton {
-    position: static;
+  .authorName {
+    font-size: 1.25rem;
   }
 }