feat: enhance ambassador card social media buttons#5110
feat: enhance ambassador card social media buttons#5110yashdarekar17 wants to merge 18 commits intoasyncapi:masterfrom
Conversation
yashdarekar17
requested review from
Mayaleeeee,
akshatnema,
anshgoyalevil,
asyncapi-bot-eve,
derberg,
princerajpoot20 and
sambhavgupta0705
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. |
📝 WalkthroughWalkthroughReplaces text social links with GitHub, LinkedIn, and Twitter icon components on the ambassadors page; introduces 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)
No actionable comments were generated in the recent review. 🎉 🧹 Recent nitpick comments
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 |
|
⚡️ Lighthouse report for the changes in this PR:
Lighthouse ran on https://deploy-preview-5110--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: 4
🤖 Fix all issues with AI agents
In `@pages/community/ambassadors/index.tsx`:
- Around line 147-171: The anchor elements that wrap IconTwitter, IconGithub,
and IconLinkedIn (the links using ambassador.twitterUrl, ambassador.githubUrl,
ambassador.linkedinUrl) lack accessible names; add aria-label attributes to each
anchor (e.g. aria-label="Twitter", aria-label="GitHub", aria-label="LinkedIn")
so screen readers announce them, keeping existing attributes (target, rel,
className, data-testid) intact.
- Around line 146-171: Optional social links are rendered even when absent
because ambassador.twitterUrl and ambassador.linkedinUrl can be undefined;
update the JSX in the Ambassadors members block to only render the Twitter <a>
(with IconTwitter) when ambassador.twitterUrl is truthy and only render the
LinkedIn <a> (with IconLinkedIn) when ambassador.linkedinUrl is truthy, leaving
the always-present GitHub <a> (and IconGithub) unchanged; ensure you keep the
same attributes (target, rel, className, data-testid where applicable) when
wrapping those anchors with the conditional rendering so tests and behavior
remain consistent.
- Around line 156-170: Remove the trailing whitespace causing Prettier failures
in the JSX anchor blocks that render icons (the <a> elements using
ambassador.githubUrl and ambassador.linkedinUrl and the IconGithub/IconLinkedIn
components); run npx prettier --write on pages/community/ambassadors/index.tsx
or manually trim trailing spaces on the lines around the GitHub and LinkedIn
anchors to fix the formatting and re-run CI.
- Around line 14-16: Reorder the three icon imports (IconGithub, IconLinkedIn,
IconTwitter) so they are grouped with the other ../../../components/ imports and
sorted according to the project's simple-import-sort rules (i.e., place them
alongside imports like IconX or other components and alphabetize within that
group); update the import block in pages/community/ambassadors/index.tsx by
moving the IconGithub, IconLinkedIn, IconTwitter lines into the components group
and arranging them in the correct lexical order to satisfy the linter.
| <div className='flex border-t p-2 gap-4' data-testid='Ambassadors-members-socials'> | ||
| <a | ||
| href={ambassador.twitterUrl} | ||
| target='_blank' | ||
| rel='noreferrer' | ||
| className='underline' | ||
| className='text-gray-500 hover:text-black transition-colors' | ||
| data-testid='Ambassadors-members-twitter' | ||
| > | ||
| Twitter ↗ | ||
| <IconTwitter className='h-5 w-5 fill-current' /> | ||
| </a> | ||
| <a href={ambassador.githubUrl} target='_blank' rel='noreferrer' className='ml-3 underline'> | ||
| Github ↗ | ||
| <a | ||
| href={ambassador.githubUrl} | ||
| target='_blank' | ||
| rel='noreferrer' | ||
| className='text-gray-500 hover:text-black transition-colors' | ||
| > | ||
| <IconGithub className='h-5 w-5 fill-current' /> | ||
| </a> | ||
| <a href={ambassador.linkedinUrl} target='_blank' rel='noreferrer' className='ml-3 underline'> | ||
| Linkedin ↗ | ||
| <a | ||
| href={ambassador.linkedinUrl} | ||
| target='_blank' | ||
| rel='noreferrer' | ||
| className='text-gray-500 hover:text-[#0077b5] transition-colors' | ||
| > | ||
| <IconLinkedIn className='h-5 w-5 fill-current' /> | ||
| </a> |
There was a problem hiding this comment.
Social links render even when the ambassador has no Twitter or LinkedIn profile.
Unlike github (which is guaranteed), twitter and linkedin are optional fields. When absent, ambassador.twitterUrl is undefined, causing <a href={undefined}> to render as a link to the current page. Each social link should be conditionally rendered.
Based on learnings, the github field is required for ambassadors, but twitter and linkedin are not.
Suggested fix — conditionally render optional social links
<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'
- >
- <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'
- >
- <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'
- >
- <IconLinkedIn 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'
+ >
+ <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'
+ >
+ <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'
+ >
+ <IconLinkedIn className='h-5 w-5 fill-current' />
+ </a>
+ )}
</div>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <div className='flex border-t p-2 gap-4' data-testid='Ambassadors-members-socials'> | |
| <a | |
| href={ambassador.twitterUrl} | |
| target='_blank' | |
| rel='noreferrer' | |
| className='underline' | |
| className='text-gray-500 hover:text-black transition-colors' | |
| data-testid='Ambassadors-members-twitter' | |
| > | |
| Twitter ↗ | |
| <IconTwitter className='h-5 w-5 fill-current' /> | |
| </a> | |
| <a href={ambassador.githubUrl} target='_blank' rel='noreferrer' className='ml-3 underline'> | |
| Github ↗ | |
| <a | |
| href={ambassador.githubUrl} | |
| target='_blank' | |
| rel='noreferrer' | |
| className='text-gray-500 hover:text-black transition-colors' | |
| > | |
| <IconGithub className='h-5 w-5 fill-current' /> | |
| </a> | |
| <a href={ambassador.linkedinUrl} target='_blank' rel='noreferrer' className='ml-3 underline'> | |
| Linkedin ↗ | |
| <a | |
| href={ambassador.linkedinUrl} | |
| target='_blank' | |
| rel='noreferrer' | |
| className='text-gray-500 hover:text-[#0077b5] transition-colors' | |
| > | |
| <IconLinkedIn className='h-5 w-5 fill-current' /> | |
| </a> | |
| <div className='flex border-t p-2 gap-4' data-testid='Ambassadors-members-socials'> | |
| {ambassador.twitterUrl && ( | |
| <a | |
| href={ambassador.twitterUrl} | |
| target='_blank' | |
| rel='noreferrer' | |
| className='text-gray-500 hover:text-black transition-colors' | |
| data-testid='Ambassadors-members-twitter' | |
| > | |
| <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' | |
| > | |
| <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' | |
| > | |
| <IconLinkedIn className='h-5 w-5 fill-current' /> | |
| </a> | |
| )} |
🧰 Tools
🪛 GitHub Actions: PR testing - if Node project
[error] 156-156: Prettier formatting: Delete extraneous character '·' (spaces represented as middot) to fix formatting
[error] 156-156: Prettier formatting: Trailing spaces not allowed
[error] 157-157: Prettier formatting: Delete extraneous character '·' (spaces represented as middot) to fix formatting
[error] 157-157: Prettier formatting: Trailing spaces not allowed
[error] 158-158: Prettier formatting: Delete extraneous character '·' (spaces represented as middot) to fix formatting
[error] 158-158: Prettier formatting: Trailing spaces not allowed
[error] 164-164: Prettier formatting: Delete extraneous character '·' (spaces represented as middot) to fix formatting
[error] 164-164: Prettier formatting: Trailing spaces not allowed
[error] 165-165: Prettier formatting: Delete extraneous character '·' (spaces represented as middot) to fix formatting
[error] 165-165: Prettier formatting: Trailing spaces not allowed
[error] 166-166: Prettier formatting: Delete extraneous character '·' (spaces represented as middot) to fix formatting
[error] 166-166: Prettier formatting: Trailing spaces not allowed
🤖 Prompt for AI Agents
In `@pages/community/ambassadors/index.tsx` around lines 146 - 171, Optional
social links are rendered even when absent because ambassador.twitterUrl and
ambassador.linkedinUrl can be undefined; update the JSX in the Ambassadors
members block to only render the Twitter <a> (with IconTwitter) when
ambassador.twitterUrl is truthy and only render the LinkedIn <a> (with
IconLinkedIn) when ambassador.linkedinUrl is truthy, leaving the always-present
GitHub <a> (and IconGithub) unchanged; ensure you keep the same attributes
(target, rel, className, data-testid where applicable) when wrapping those
anchors with the conditional rendering so tests and behavior remain consistent.
| <a | ||
| href={ambassador.twitterUrl} | ||
| target='_blank' | ||
| rel='noreferrer' | ||
| className='underline' | ||
| className='text-gray-500 hover:text-black transition-colors' | ||
| data-testid='Ambassadors-members-twitter' | ||
| > | ||
| Twitter ↗ | ||
| <IconTwitter className='h-5 w-5 fill-current' /> | ||
| </a> | ||
| <a href={ambassador.githubUrl} target='_blank' rel='noreferrer' className='ml-3 underline'> | ||
| Github ↗ | ||
| <a | ||
| href={ambassador.githubUrl} | ||
| target='_blank' | ||
| rel='noreferrer' | ||
| className='text-gray-500 hover:text-black transition-colors' | ||
| > | ||
| <IconGithub className='h-5 w-5 fill-current' /> | ||
| </a> | ||
| <a href={ambassador.linkedinUrl} target='_blank' rel='noreferrer' className='ml-3 underline'> | ||
| Linkedin ↗ | ||
| <a | ||
| href={ambassador.linkedinUrl} | ||
| target='_blank' | ||
| rel='noreferrer' | ||
| className='text-gray-500 hover:text-[#0077b5] transition-colors' | ||
| > | ||
| <IconLinkedIn className='h-5 w-5 fill-current' /> | ||
| </a> |
There was a problem hiding this comment.
Icon-only links lack accessible names for screen readers.
These links contain only SVG icons with no text content. Screen readers will announce them as empty links. Add aria-label attributes to each.
Example fix
<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'
>Apply similarly to the GitHub (aria-label='GitHub') and LinkedIn (aria-label='LinkedIn') links.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <a | |
| href={ambassador.twitterUrl} | |
| target='_blank' | |
| rel='noreferrer' | |
| className='underline' | |
| className='text-gray-500 hover:text-black transition-colors' | |
| data-testid='Ambassadors-members-twitter' | |
| > | |
| Twitter ↗ | |
| <IconTwitter className='h-5 w-5 fill-current' /> | |
| </a> | |
| <a href={ambassador.githubUrl} target='_blank' rel='noreferrer' className='ml-3 underline'> | |
| Github ↗ | |
| <a | |
| href={ambassador.githubUrl} | |
| target='_blank' | |
| rel='noreferrer' | |
| className='text-gray-500 hover:text-black transition-colors' | |
| > | |
| <IconGithub className='h-5 w-5 fill-current' /> | |
| </a> | |
| <a href={ambassador.linkedinUrl} target='_blank' rel='noreferrer' className='ml-3 underline'> | |
| Linkedin ↗ | |
| <a | |
| href={ambassador.linkedinUrl} | |
| target='_blank' | |
| rel='noreferrer' | |
| className='text-gray-500 hover:text-[#0077b5] transition-colors' | |
| > | |
| <IconLinkedIn className='h-5 w-5 fill-current' /> | |
| </a> | |
| <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' | |
| > | |
| <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' | |
| > | |
| <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' | |
| > | |
| <IconLinkedIn className='h-5 w-5 fill-current' /> | |
| </a> |
🧰 Tools
🪛 GitHub Actions: PR testing - if Node project
[error] 156-156: Prettier formatting: Delete extraneous character '·' (spaces represented as middot) to fix formatting
[error] 156-156: Prettier formatting: Trailing spaces not allowed
[error] 157-157: Prettier formatting: Delete extraneous character '·' (spaces represented as middot) to fix formatting
[error] 157-157: Prettier formatting: Trailing spaces not allowed
[error] 158-158: Prettier formatting: Delete extraneous character '·' (spaces represented as middot) to fix formatting
[error] 158-158: Prettier formatting: Trailing spaces not allowed
[error] 164-164: Prettier formatting: Delete extraneous character '·' (spaces represented as middot) to fix formatting
[error] 164-164: Prettier formatting: Trailing spaces not allowed
[error] 165-165: Prettier formatting: Delete extraneous character '·' (spaces represented as middot) to fix formatting
[error] 165-165: Prettier formatting: Trailing spaces not allowed
[error] 166-166: Prettier formatting: Delete extraneous character '·' (spaces represented as middot) to fix formatting
[error] 166-166: Prettier formatting: Trailing spaces not allowed
🤖 Prompt for AI Agents
In `@pages/community/ambassadors/index.tsx` around lines 147 - 171, The anchor
elements that wrap IconTwitter, IconGithub, and IconLinkedIn (the links using
ambassador.twitterUrl, ambassador.githubUrl, ambassador.linkedinUrl) lack
accessible names; add aria-label attributes to each anchor (e.g.
aria-label="Twitter", aria-label="GitHub", aria-label="LinkedIn") so screen
readers announce them, keeping existing attributes (target, rel, className,
data-testid) intact.
|
hey @yashdarekar17 there are some formatting issue also because of which ci is failing so please have a look at this and suggestion of code rabbit |
|
@SHUBHANSHU602 I appreciate the suggestions! I'm currently in the process of fixing the linting and formatting issues to get the CI passing. |
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@pages/community/ambassadors/index.tsx`:
- Around line 56-101: The JSX in the Ambassadors page uses double quotes for
attributes and string literals which triggers jsx-quotes/prettier errors; run
the formatter or convert to single quotes across the JSX (for elements like
GenericLayout, Heading, Button and the img src/alt/className) and fix trailing
commas by running the project Prettier config (e.g., npx prettier --write
pages/community/ambassadors/index.tsx) so the file conforms to the repo's quote
style and formatting rules.
🧹 Nitpick comments (1)
pages/community/ambassadors/index.tsx (1)
165-169: Consider using a stable key instead of array index.
ambassador.githubis guaranteed unique and stable — it would be a more robust React key than the array index, especially if the list is ever filtered or reordered dynamically in the future.- key={index} + key={ambassador.github}
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
pages/community/ambassadors/index.tsx (1)
56-101:⚠️ Potential issue | 🟡 MinorRun Prettier to fix pervasive formatting errors blocking CI.
The pipeline reports ~30+
prettier/prettiererrors across virtually every changed block in this file — multi-line attribute formatting, extra line breaks, spacing inconsistencies, etc. Rather than fixing these individually, run the formatter:npx prettier --write pages/community/ambassadors/index.tsxAlso applies to: 112-149, 152-161, 242-258, 263-278, 290-299
🤖 Fix all issues with AI agents
In `@pages/community/ambassadors/index.tsx`:
- Line 24: Remove the trailing comma after the object spread "...user" where
it's used (the spread within the props/object literal on the affected line);
edit the expression to end with the spread without a comma so Prettier no longer
flags "Delete `,`" (look for the "...user" spread usage in this file and remove
the trailing comma).
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In `@pages/community/ambassadors/index.tsx`:
- Line 165: Replace the unescaped single quote in the JSX text "The AsyncAPI
Ambassador program is now open for applications! If you're selected, you'll join
AsyncAPI's mission..." in pages/community/ambassadors/index.tsx to fix the
react/no-unescaped-entities CI error; update the "you're" (and any other raw
apostrophes in that string) to use the HTML entity ' (or a properly escaped
apostrophe) so the JSX string is valid.
- Line 50: The file has multiple Prettier formatting violations (affecting lines
around the asyncapiAmbassadors declaration and uses of
addAdditionalUserInfo/sortBy) that are blocking CI; run the Prettier formatter
to fix them in one pass (for example: run npx prettier --write
pages/community/ambassadors/index.tsx) so lines like the asyncapiAmbassadors
assignment and nearby JSX/props are reformatted to meet project style rules and
resolve the CI failures.
🧹 Nitpick comments (1)
pages/community/ambassadors/index.tsx (1)
101-101: Prefer a stable unique key over array index.
ambassador.githubis guaranteed unique and stable — using it as the key is more robust thanindex, especially if the list is ever filtered or reordered dynamically.- <div key={index} className='...'> + <div key={ambassador.github} className='...'>
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In `@pages/community/ambassadors/index.tsx`:
- Around line 96-100: The <li> element using key={link.title} with
className='flex flex-col items-center justify-start' and
data-testid='Ambassadors-list' is split across multiple lines and fails
Prettier's single-line rule; collapse that JSX element to a single line (e.g.
<li key={link.title} className='flex ...' data-testid='Ambassadors-list'>) and
then run npx prettier --write to apply consistent formatting.
- Line 63: The long JSX text nodes in pages/community/ambassadors/index.tsx
(e.g., the string starting "Passionate about event-driven architectures or
message-driven APIs? Become an AsyncAPI Ambassador..." and the other two long
strings around the same section) exceed the 120-character max-len and must be
wrapped into shorter lines; fix by breaking each long string literal or JSX text
node into multiple concatenated lines or separate JSX fragments so no single
line exceeds 120 chars (update the text nodes where the long sentences are
rendered, e.g., the JSX element containing the "Passionate about..." copy and
the other long sentence literals), then run npx prettier --write
pages/community/ambassadors/index.tsx to reformat.
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In `@pages/community/ambassadors/index.tsx`:
- Line 179: The JSX text node containing "We appreciate your commitment and
passion for sharing your knowledge with your communities. Let us support you!"
exceeds 120 chars; split the string into shorter segments (e.g., break into two
concatenated strings, use two JSX elements, or insert a <br/> between phrases)
so each line stays under 120 characters and preserves the rendered sentence;
update the JSX in the ambassadors page where that exact text appears.
- Line 91: The JSX text node "AsyncAPI Ambassadors are passionate about APIs and
AsyncAPI. They share their interest, expertise, and excitement within their
communities to help others build better software." exceeds the 120-char max-len
rule; open the JSX element in pages/community/ambassadors/index.tsx (the
paragraph/heading that contains that exact string) and split the sentence across
multiple lines (e.g., break into two or more string literals or separate JSX
text nodes) so each source line is under the limit while preserving the exact
wording and spacing.
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In `@pages/community/ambassadors/index.tsx`:
- Around line 90-93: The Heading block for the ambassador description is
over-indented causing Prettier CI failures; locate the <Heading
typeStyle={HeadingTypeStyle.bodyLg} ...> element and align its opening and
closing tags with its sibling element (same indentation as the element on the
previous line) by removing the extra two leading spaces so the JSX block matches
the surrounding indentation.
- Around line 179-182: The Heading block using HeadingTypeStyle.bodyLg (the
<Heading> element) has extra leading spaces causing Prettier CI failures; remove
two leading spaces so the <Heading typeStyle={HeadingTypeStyle.bodyLg} ...> line
is aligned with its parent <div> (same indentation style as the earlier block at
lines ~90-93) to fix formatting/indentation.
🧹 Nitpick comments (1)
pages/community/ambassadors/index.tsx (1)
129-130:cursor-pointeris redundant inside a<Link>.The wrapping
<Link>already renders as an<a>tag which hascursor: pointerby default. Minor nit — can be removed for cleanliness.
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In `@pages/community/ambassadors/index.tsx`:
- Around line 180-181: The CI failure is due to Prettier formatting around the
JSX text block containing "We appreciate your commitment and passion for sharing
your knowledge with your communities." and "Let us support you!"; run the
formatter (npx prettier --write pages/community/ambassadors/index.tsx) or adjust
the JSX line breaks so the two strings are formatted as a single properly
wrapped text node to satisfy Prettier (ensure the JSX around that paragraph is
valid and saved after formatting).
- Around line 91-92: The JSX text node containing "AsyncAPI Ambassadors are
passionate about APIs and AsyncAPI. They share their interest, expertise, and
excitement within their communities to help others build better software." is
incorrectly line-broken and failing Prettier; run the project formatter (npx
prettier --write pages/community/ambassadors/index.tsx) or fix the line break so
the sentence is a single properly wrapped JSX text node (adjust the string
around "expertise, and excitement") and then commit the formatted file to
resolve the CI Prettier errors.
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
pages/community/ambassadors/index.tsx (1)
79-83:⚠️ Potential issue | 🟡 MinorMissing
titleattribute on iframe — accessibility concern.Screen readers need a
titleattribute on<iframe>elements to describe the embedded content. This is a WCAG requirement.Proposed fix
<iframe src='https://www.youtube.com/embed/3rg_7hIb9PQ' + title='AsyncAPI Ambassador Program Video' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share' data-testid='Ambassadors-Iframe' ></iframe>
🤖 Fix all issues with AI agents
In `@pages/community/ambassadors/index.tsx`:
- Line 74: Replace the invalid Tailwind class "full" on the ambassador cover
image with the correct full-width utility: update the img element found in
pages/community/ambassadors/index.tsx (the element using src
'/img/homepage/ambassador-cover.svg' and className='full') to use
className='w-full' so the image renders at full width.
- Around line 49-51: Remove the trailing space after the assignment operator in
the ambassadorProgramUrl declaration so the '=' is immediately followed by the
newline and the string literal (constant ambassadorProgramUrl) starts on the
next line; ensure there are no trailing spaces on that line and run
Prettier/lint to confirm the no-trailing-spaces and prettier/prettier errors are
resolved.
| </div> | ||
| <div className='hidden w-1/2 lg:block'> | ||
| <img src='/img/homepage/ambassador-cover.svg' alt='ambassador-cover' className='w-full' /> | ||
| <img src='/img/homepage/ambassador-cover.svg' alt='ambassador-cover' className='full' /> |
There was a problem hiding this comment.
'full' is not a valid Tailwind class — likely should be 'w-full'.
The class full doesn't exist in Tailwind CSS. This appears to be an accidental deletion of the w- prefix, which will cause the image to lose its full-width sizing.
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' />🤖 Prompt for AI Agents
In `@pages/community/ambassadors/index.tsx` at line 74, Replace the invalid
Tailwind class "full" on the ambassador cover image with the correct full-width
utility: update the img element found in pages/community/ambassadors/index.tsx
(the element using src '/img/homepage/ambassador-cover.svg' and
className='full') to use className='w-full' so the image renders at full width.
|
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #5110 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 22 22
Lines 796 796
Branches 146 146
=========================================
Hits 796 796 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
3 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
Style
Refactor
New Features