Skip to content

feat: replace single-author display with clickable avatar stack + full names on blog cards#1720

Merged
sanjay-kv merged 3 commits into
mainfrom
copilot/update-avatar-stack-format
May 25, 2026
Merged

feat: replace single-author display with clickable avatar stack + full names on blog cards#1720
sanjay-kv merged 3 commits into
mainfrom
copilot/update-avatar-stack-format

Conversation

Copy link
Copy Markdown
Contributor

Copilot AI commented May 25, 2026

Blog cards on /blogs showed only the primary author as "By @username". For multi-author posts, co-authors were invisible and no author info was linked to GitHub profiles.

Changes Made

src/pages/blogs/index.tsx

  • Drop primaryAuthor — iterate all authors instead
  • Replace single <div className="card-avatar"> with <div className="card-avatar-stack"> rendering up to 3 circular avatar <Link>s, each pointing to the author's GitHub
  • Replace "By @handle" text with comma-separated full name links:
    {authors.map((author, idx) => (
      <React.Fragment key={author.id}>
        {idx > 0 && <span className="card-author-sep">, </span>}
        <Link href={author.githubUrl} className="card-author-handle" target="_blank" rel="noopener noreferrer">
          {author.name}
        </Link>
      </React.Fragment>
    ))}

src/pages/blogs/blogs-new.css

  • .card-avatar-stack — flex row with -8px left margin on stacked avatars for overlap effect; hover scales focused avatar to front (z-index: 10)
  • .card-author-names — flex wrap container with overflow: hidden to prevent long names from escaping card bounds
  • .card-author-sep — muted comma separator, no extra spacing

Dependencies

None.

Checklist

  • My code follows the style guidelines of this project.
  • I have tested my changes across major browsers and devices
  • My changes do not generate new console warnings or errors .
  • I ran npm run build and attached screenshot(s) in this PR.
  • This is already assigned Issue to me, not an unassigned issue.

@vercel
Copy link
Copy Markdown
Contributor

vercel Bot commented May 25, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
recode-website Ready Ready Preview, Comment May 25, 2026 4:42am

- Replace single primary author display with avatar stack showing all authors
- Overlapping circular avatars (up to 3), each linking to author's GitHub
- Author full names displayed inline, comma-separated, each a clickable link
- Add CSS for .card-avatar-stack, .card-author-names, .card-author-sep

Agent-Logs-Url: https://github.com/recodehive/recode-website/sessions/50071c63-4fa1-4246-9569-7edf711b18da
Copilot AI changed the title [WIP] Update author section to show avatar stack with clickable names feat: replace single-author display with clickable avatar stack + full names on blog cards May 25, 2026
Copilot AI requested a review from sanjay-kv May 25, 2026 04:42
@sanjay-kv sanjay-kv marked this pull request as ready for review May 25, 2026 04:46
@sanjay-kv sanjay-kv merged commit b00bd2e into main May 25, 2026
7 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Multiple author change avatar stack

2 participants