feat: enhance ambassador card social media buttons#5113
feat: enhance ambassador card social media buttons#5113asyncapi-bot merged 29 commits intoasyncapi:masterfrom
Conversation
yashdarekar17
requested review from
akshatnema,
anshgoyalevil,
derberg,
princerajpoot20 and
sambhavgupta0705
as code owners
yashdarekar17
requested review from
Mayaleeeee and
asyncapi-bot-eve
as code owners
✅ Deploy Preview for asyncapi-website ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughReplaces plain-text ambassador social links with brand icon components, adds aria-labels and spacing/hover styles, introduces a local Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #5113 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 22 22
Lines 830 830
Branches 159 159
=========================================
Hits 830 830 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
|
⚡️ Lighthouse report for the changes in this PR:
Lighthouse ran on https://deploy-preview-5113--asyncapi-website.netlify.app/ |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In `@pages/community/ambassadors/index.tsx`:
- Line 77: The img element uses an invalid Tailwind class "full" (see the JSX
<img ... className='full' />); replace it with the proper Tailwind utility(s)
such as "w-full" (and optionally "h-auto" to preserve aspect ratio) so the image
regains its width constraint—for example, update the className on the <img>
element to use "w-full" instead of "full".
- Around line 145-154: Add accessible names to the social icon links by adding
an aria-label (or title) to each anchor that wraps the icons so screen readers
can announce them; for example update the anchor that uses ambassador.twitterUrl
and IconTwitter (data-testid='Ambassadors-members-twitter') to include a
descriptive aria-label like "Twitter — {ambassador.name}" and do the same for
the other two social anchors (the LinkedIn and GitHub icon anchors) referencing
their respective ambassador.{linkedinUrl} and ambassador.{githubUrl} properties
so each icon link has a clear accessible label.
🧹 Nitpick comments (1)
pages/community/ambassadors/index.tsx (1)
144-175: Social icon links look good overall — minor inconsistency withdata-testidattributes.The Twitter link has
data-testid='Ambassadors-members-twitter'but the GitHub and LinkedIn links are missing theirdata-testidattributes. For test consistency, consider adding them.🔧 Proposed fix
{ambassador.githubUrl && ( <a href={ambassador.githubUrl} target='_blank' rel='noreferrer' className='text-gray-500 hover:text-black transition-colors' + data-testid='Ambassadors-members-github' > <IconGithub className='h-5 w-5 fill-current' /> </a> )} {ambassador.linkedinUrl && ( <a href={ambassador.linkedinUrl} target='_blank' rel='noreferrer' className='text-gray-500 hover:text-[`#0077b5`] transition-colors' + data-testid='Ambassadors-members-linkedin' > <IconLinkedIn className='h-5 w-5 fill-current' /> </a> )}
|
|
@yashdarekar17 this is totally insane , 21 commits without any discussion . |
| ['name'] | ||
| ); | ||
|
|
||
| // Variable to handle long URL and pass max-len linter |
There was a problem hiding this comment.
| // Variable to handle long URL and pass max-len linter |
don't add unnecessary comment
There was a problem hiding this comment.
♻️ Duplicate comments (1)
pages/community/ambassadors/index.tsx (1)
76-76:⚠️ Potential issue | 🟠 MajorFix invalid utility class on the cover image.
Line 76 uses
className='full'. Unless.fullis custom-defined in repo styles, this is a no-op and the image loses width styling.🐛 Proposed fix
- <img src='/img/homepage/ambassador-cover.svg' alt='ambassador-cover' className='full' /> + <img src='/img/homepage/ambassador-cover.svg' alt='ambassador-cover' className='w-full' />#!/bin/bash # Verify if `full` is actually defined as a custom CSS utility/class. rg -n "className=['\"][^'\"]*\bfull\b" --iglob '**/*.{tsx,jsx,ts,js}' rg -n "^\s*\.full\b" --iglob '**/*.{css,scss,sass,less,pcss}'Expected result: if no
.fullclass definition is found,fullshould be replaced with Tailwind utilities likew-full.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@pages/community/ambassadors/index.tsx` at line 76, The img element using className='full' is likely a no-op; check whether a .full CSS rule exists and if not replace the JSX img's className ('full') with Tailwind utilities such as 'w-full h-auto object-cover' (or simply 'w-full') to restore correct width behavior — locate the <img ... alt='ambassador-cover' className='full' /> instance in pages/community/ambassadors/index.tsx and update the className accordingly.
🧹 Nitpick comments (1)
pages/community/ambassadors/index.tsx (1)
143-171: Render the optional Twitter social link conditionally to avoid dead icon anchors.Line 145-153 always renders the Twitter anchor. Since one ambassador is missing a Twitter URL, the icon link becomes non-functional. Conditionally render it based on
ambassador.twitterUrl.The GitHub link should remain unconditional (GitHub is a required field for all ambassadors). LinkedIn can also remain unconditional (all ambassadors have LinkedIn profiles).
♻️ Suggested refactor
<div className='flex border-t p-2 gap-4' data-testid='Ambassadors-members-socials'> - <a - href={ambassador.twitterUrl} - target='_blank' - rel='noreferrer' - className='text-gray-500 hover:text-black transition-colors' - data-testid='Ambassadors-members-twitter' - aria-label={`Twitter profile of ${ambassador.name}`} - > - <IconTwitter className='h-5 w-5 fill-current' /> - </a> + {ambassador.twitterUrl && ( + <a + href={ambassador.twitterUrl} + target='_blank' + rel='noreferrer' + className='text-gray-500 hover:text-black transition-colors' + data-testid='Ambassadors-members-twitter' + aria-label={`Twitter profile of ${ambassador.name}`} + > + <IconTwitter className='h-5 w-5 fill-current' /> + </a> + )} <a href={ambassador.githubUrl} target='_blank' rel='noreferrer' className='text-gray-500 hover:text-black transition-colors' aria-label={`GitHub profile of ${ambassador.name}`} > <IconGithub className='h-5 w-5 fill-current' /> </a> <a href={ambassador.linkedinUrl} target='_blank' rel='noreferrer' className='text-gray-500 hover:text-[`#0077b5`] transition-colors' aria-label={`LinkedIn profile of ${ambassador.name}`} > <IconLinkedIn className='h-5 w-5 fill-current' /> </a>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@pages/community/ambassadors/index.tsx` around lines 143 - 171, The Twitter anchor for each ambassador is always rendered even when ambassador.twitterUrl is missing, producing a dead icon link; update the JSX in pages/community/ambassadors/index.tsx to render the <a ... data-testid='Ambassadors-members-twitter'> and the IconTwitter component only when ambassador.twitterUrl is truthy (e.g., wrap that anchor in a conditional check like if ambassador.twitterUrl), leaving the GitHub and LinkedIn anchors (IconGithub, IconLinkedIn) unchanged so required links remain unconditional.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Duplicate comments:
In `@pages/community/ambassadors/index.tsx`:
- Line 76: The img element using className='full' is likely a no-op; check
whether a .full CSS rule exists and if not replace the JSX img's className
('full') with Tailwind utilities such as 'w-full h-auto object-cover' (or simply
'w-full') to restore correct width behavior — locate the <img ...
alt='ambassador-cover' className='full' /> instance in
pages/community/ambassadors/index.tsx and update the className accordingly.
---
Nitpick comments:
In `@pages/community/ambassadors/index.tsx`:
- Around line 143-171: The Twitter anchor for each ambassador is always rendered
even when ambassador.twitterUrl is missing, producing a dead icon link; update
the JSX in pages/community/ambassadors/index.tsx to render the <a ...
data-testid='Ambassadors-members-twitter'> and the IconTwitter component only
when ambassador.twitterUrl is truthy (e.g., wrap that anchor in a conditional
check like if ambassador.twitterUrl), leaving the GitHub and LinkedIn anchors
(IconGithub, IconLinkedIn) unchanged so required links remain unconditional.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 9834d692-56a6-45f6-b51a-cb28d446e7fb
📒 Files selected for processing (1)
pages/community/ambassadors/index.tsx
princerajpoot20
left a comment
princerajpoot20
left a comment
There was a problem hiding this comment.
LGTM. @yashdarekar17 Thanks for your effort
|
/rtm |
|
/rtm |
|
github-project-automation
Bot
moved this from To Be Triaged
to Done
in Website - Kanban
4 participants
Description
Replaced the plain text social media links (Twitter, GitHub, LinkedIn) on the Ambassador cards with brand-specific icons to improve visual consistency across the community page.
Implemented interactive hover states for each icon: black for GitHub and Twitter/X, and the official brand blue (#0077b5) for LinkedIn.
Refactored the Index component in pages/community/ambassadors/index.tsx to utilize existing icon components (IconTwitter, IconGithub, IconLinkedIn) while maintaining the original card layout and flexbox logic.
Related issue(s)
Fixes #5097
Summary by CodeRabbit
New Features
Style