Merge pull request #1722 from recodehive/copilot/fix-avatar-stack-multiple-authors

feat: avatar stack for multiple-author blog post headers

Author: sanjay-kv

src/theme/BlogPostItem/Header/index.tsx

@@ -97,14 +97,14 @@ export default function BlogPostItemHeaderWrapper(props: Props): JSX.Element {
         <div className={styles.metaRow}>
           {authors.length > 0 && (
             <div className={styles.authorsPart}>
-              {authors.map((author, idx) => (
-                <React.Fragment key={author.handle ?? `${author.name ?? ""}-${idx}`}>
-                  {idx > 0 && (
-                    <span className={styles.authorSep} aria-hidden="true">
-                      &amp;
-                    </span>
-                  )}
-                  <div className={styles.authorPart}>
+              {/* Stacked avatars */}
+              <div className={styles.avatarStack}>
+                {authors.map((author, idx) => (
+                  <div
+                    key={author.handle ?? `${author.name ?? ""}-${idx}`}
+                    className={styles.avatarStackItem}
+                    style={{ zIndex: authors.length - idx }}
+                  >
                     {author.avatar ? (
                       <img
                         className={styles.avatar}
@@ -117,22 +117,33 @@ export default function BlogPostItemHeaderWrapper(props: Props): JSX.Element {
                         {author.name?.charAt(0).toUpperCase()}
                       </div>
                     )}
-                    {author.handle &&
-                      (author.url ? (
-                        <Link
-                          to={author.url}
-                          className={styles.handle}
-                          target="_blank"
-                          rel="noopener noreferrer"
-                        >
-                          {author.handle}
-                        </Link>
-                      ) : (
-                        <span className={styles.handle}>{author.handle}</span>
-                      ))}
                   </div>
-                </React.Fragment>
-              ))}
+                ))}
+              </div>
+              {/* Handles after the stack (only authors with a handle) */}
+              {authors
+                .filter((author) => author.handle)
+                .map((author, idx) => (
+                  <React.Fragment key={author.handle}>
+                    {idx > 0 && (
+                      <span className={styles.authorSep} aria-hidden="true">
+                        ,
+                      </span>
+                    )}
+                    {author.url ? (
+                      <Link
+                        to={author.url}
+                        className={styles.handle}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        {author.handle}
+                      </Link>
+                    ) : (
+                      <span className={styles.handle}>{author.handle}</span>
+                    )}
+                  </React.Fragment>
+                ))}
             </div>
           )}
 

src/theme/BlogPostItem/Header/styles.module.css

@@ -35,23 +35,36 @@
   font-weight: 500;
 }
 
-.authorPart {
+/* ── Stacked overlapping avatars ── */
+.avatarStack {
   display: flex;
   align-items: center;
-  gap: 0.45rem;
 }
 
-.avatar,
-.avatarFallback {
+.avatarStackItem {
   width: 32px;
   height: 32px;
   border-radius: 50%;
+  overflow: hidden;
+  flex-shrink: 0;
+  border: 2px solid var(--ifm-background-color, #fff);
+}
+
+.avatarStackItem:not(:first-child) {
+  margin-left: -10px;
+}
+
+.avatar,
+.avatarFallback {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
   flex-shrink: 0;
 }
 
 .avatar {
   object-fit: cover;
-  border: 1px solid var(--ifm-color-emphasis-300);
+  display: block;
 }
 
 .avatarFallback {