fix: update Slack invite links to open external URL in new tab #4841
Conversation
ika12345
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. |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
Welcome to AsyncAPI. Thanks a lot for creating your first pull request. Please check out our contributors guide useful for opening a pull request.
Keep in mind there are also other channels you can use to interact with AsyncAPI community. For more details check out this issue.
📝 WalkthroughWalkthroughStandardized Slack invite URL to Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
📜 Recent review detailsConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro 📒 Files selected for processing (2)
🧰 Additional context used🧠 Learnings (7)📚 Learning: 2024-10-11T07:38:35.745ZApplied to files:
📚 Learning: 2024-10-11T10:46:58.882ZApplied to files:
📚 Learning: 2025-12-29T14:21:28.216ZApplied to files:
📚 Learning: 2024-10-11T11:32:30.226ZApplied to files:
📚 Learning: 2024-11-11T21:30:32.478ZApplied to files:
📚 Learning: 2024-10-11T11:17:32.246ZApplied to files:
📚 Learning: 2025-12-23T06:30:43.275ZApplied to files:
🧬 Code graph analysis (2)pages/[lang]/index.tsx (1)
components/buttons/SlackButton.tsx (2)
⏰ Context from checks skipped due to timeout of 180000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
🔇 Additional comments (1)
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-4841--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: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
components/buttons/SlackButton.tsx (1)
1-1: Address pipeline failures before merge.The CI pipeline has flagged two formatting issues:
- Line 1: Import sorting violation - run autofix to sort imports
- Line 33: Remove trailing newline
🔎 Run the following command to auto-fix formatting issues
npm run formatOr manually apply these fixes:
- Sort imports at the top of the file
- Remove the trailing newline at the end
Also applies to: 33-33
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
components/buttons/SlackButton.tsxpages/[lang]/index.tsxpages/community/index.tsxpublic/_redirects
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-12-29T14:21:28.216Z
Learnt from: sammy200-ui
Repo: asyncapi/website PR: 4804
File: components/navigation/Filter.tsx:32-41
Timestamp: 2025-12-29T14:21:28.216Z
Learning: In the asyncapi/website repository, when you intentionally omit dependencies in React hooks (e.g., useEffect, useMemo), add an eslint-disable comment with an explanatory note above the line to justify the design choice. For example: // eslint-disable-next-line react-hooks/exhaustive-deps: intentionally omitting dependencies to avoid unnecessary re-runs. This helps reviewers understand the rationale and keeps lint guidance informative.
Applied to files:
pages/community/index.tsxcomponents/buttons/SlackButton.tsxpages/[lang]/index.tsx
🧬 Code graph analysis (1)
pages/[lang]/index.tsx (1)
components/buttons/Button.tsx (1)
Button(53-106)
🪛 GitHub Actions: PR testing - if Node project
components/buttons/SlackButton.tsx
[error] 1-1: simple-import-sort/imports: Run autofix to sort these imports
[error] 33-33: prettier/prettier: Delete trailing newline
pages/[lang]/index.tsx
[error] 104-104: prettier/prettier: Delete the space character
[error] 105-105: prettier/prettier: Delete unnecessary indentation
[error] 106-106: prettier/prettier: Delete unnecessary indentation
[error] 107-107: prettier/prettier: Replace href with single quotes and correct spacing
[error] 107-107: jsx-quotes: Unexpected usage of doublequote
[error] 108-108: prettier/prettier: Replace target attribute with single quotes
[error] 108-108: jsx-quotes: Unexpected usage of doublequote
[error] 109-109: prettier/prettier: Replace rel attribute with single quotes
[error] 109-109: jsx-quotes: Unexpected usage of doublequote
[error] 110-110: prettier/prettier: Delete unnecessary space
[error] 111-111: prettier/prettier: Delete trailing newline
🔇 Additional comments (4)
components/buttons/SlackButton.tsx (2)
15-15: LGTM! External Slack invite URL is now the default.The updated default href correctly points to the external Slack invite URL, ensuring consistent behavior across all uses of the SlackButton component.
29-29: Good catch on the spacing fix!The double space between
bg-slackandhover:bg-slack-lighthas been corrected.pages/community/index.tsx (1)
179-179: LGTM! Slack invite link updated to external URL.The HomeCards component now correctly links to the external Slack invite URL, consistent with the changes across the codebase.
public/_redirects (1)
56-57: LGTM! Redirect consolidated to use the same external URL.The
/slack-inviteredirect now points towww.asyncapi.com/slack-invite, which matches the URL used throughout the UI components. This provides a single point of control for managing the Slack invite link.Using a 302 (temporary) redirect is appropriate for an external service URL that may change.
pages/[lang]/index.tsx
Outdated
| <Button | ||
| className='w-full md:w-auto' | ||
| text={t('community.slackCTABtn')} | ||
| href="https://www.asyncapi.com/slack-invite" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| /> | ||
| </div> | ||
|
|
There was a problem hiding this comment.
Fix formatting issues and remove redundant attribute.
The logic is correct - the Slack CTA now opens the external invite URL in a new tab. However, there are multiple formatting violations:
Issues:
- Double quotes: JSX attributes should use single quotes per project conventions
- Indentation: Lines 105-110 have unnecessary indentation
- Spacing: Extra spaces around attributes
- Trailing newline: Line 112 has an unnecessary blank line
- Redundant attribute: The
rel="noopener noreferrer"is already added by the Button component whentargetis set (see Button.tsx line 93)
🔎 Proposed fix with correct formatting
- <Button
- className='w-full md:w-auto'
- text={t('community.slackCTABtn')}
- href="https://www.asyncapi.com/slack-invite"
- target="_blank"
- rel="noopener noreferrer"
- />
-
+ <Button
+ className='w-full md:w-auto'
+ text={t('community.slackCTABtn')}
+ href='https://www.asyncapi.com/slack-invite'
+ target='_blank'
+ />Note: Removed rel="noopener noreferrer" since the Button component already applies it automatically for links with target set.
You can also run npm run format to auto-fix these issues.
📝 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.
| <Button | |
| className='w-full md:w-auto' | |
| text={t('community.slackCTABtn')} | |
| href="https://www.asyncapi.com/slack-invite" | |
| target="_blank" | |
| rel="noopener noreferrer" | |
| /> | |
| </div> | |
| <Button | |
| className='w-full md:w-auto' | |
| text={t('community.slackCTABtn')} | |
| href='https://www.asyncapi.com/slack-invite' | |
| target='_blank' | |
| /> | |
| </div> |
🧰 Tools
🪛 GitHub Actions: PR testing - if Node project
[error] 104-104: prettier/prettier: Delete the space character
[error] 105-105: prettier/prettier: Delete unnecessary indentation
[error] 106-106: prettier/prettier: Delete unnecessary indentation
[error] 107-107: prettier/prettier: Replace href with single quotes and correct spacing
[error] 107-107: jsx-quotes: Unexpected usage of doublequote
[error] 108-108: prettier/prettier: Replace target attribute with single quotes
[error] 108-108: jsx-quotes: Unexpected usage of doublequote
[error] 109-109: prettier/prettier: Replace rel attribute with single quotes
[error] 109-109: jsx-quotes: Unexpected usage of doublequote
[error] 110-110: prettier/prettier: Delete unnecessary space
[error] 111-111: prettier/prettier: Delete trailing newline
🤖 Prompt for AI Agents
In pages/[lang]/index.tsx around lines 104 to 112, fix JSX formatting and remove
the redundant rel attribute: change double quotes to single quotes for JSX
attributes, normalize indentation of the Button props to match project style,
remove extra spaces around attributes, delete the redundant rel="noopener
noreferrer" (Button.tsx already adds it when target is present), and remove the
trailing blank line at line 112; run the formatter (npm run format) after making
these edits.
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #4841 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 22 22
Lines 798 798
Branches 146 146
=========================================
Hits 798 798 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
components/buttons/SlackButton.tsxpages/[lang]/index.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- pages/[lang]/index.tsx
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-12-29T14:21:28.216Z
Learnt from: sammy200-ui
Repo: asyncapi/website PR: 4804
File: components/navigation/Filter.tsx:32-41
Timestamp: 2025-12-29T14:21:28.216Z
Learning: In the asyncapi/website repository, when you intentionally omit dependencies in React hooks (e.g., useEffect, useMemo), add an eslint-disable comment with an explanatory note above the line to justify the design choice. For example: // eslint-disable-next-line react-hooks/exhaustive-deps: intentionally omitting dependencies to avoid unnecessary re-runs. This helps reviewers understand the rationale and keeps lint guidance informative.
Applied to files:
components/buttons/SlackButton.tsx
🧬 Code graph analysis (1)
components/buttons/SlackButton.tsx (2)
components/buttons/Button.tsx (1)
Button(53-106)components/icons/Slack.tsx (1)
IconSlack(7-20)
⏰ Context from checks skipped due to timeout of 180000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Test NodeJS PR - windows-latest
🔇 Additional comments (2)
components/buttons/SlackButton.tsx (2)
11-13: LGTM: Clear documentation.The JSDoc accurately describes the component's behavior, making it clear that the button always opens the Slack invite in a new tab.
14-15: LGTM: Good API simplification.The simplified API (accepting only
textandclassName) makes the component more focused and ensures consistent Slack invite behavior. Using a const for the href is clean and maintainable.Note: This is a breaking change if the component was previously used with custom
href,target, oriconPositionprops, but this appears intentional based on the PR objectives.
| build with AsyncAPI." | ||
| btnText='Join AsyncAPI slack' | ||
| link='https://asyncapi.com/slack-invite' | ||
| link='https://www.asyncapi.com/slack-invite' |
There was a problem hiding this comment.
Why we need to include a www cname?
| /asyncapi-react https://asyncapi.github.io/asyncapi-react 301! | ||
|
|
||
| # Slack | ||
| /slack-invite https://join.slack.com/t/asyncapi/shared_invite/zt-3m4pmrguv-SUN9Js4BkQHocIH54F59sA 302! |
There was a problem hiding this comment.
I feel like this would result in a redirect loop. why are we removing the slack invite link here?
3 participants
🛠️ Fix Slack Invite Redirects
This PR ensures that all Slack invite buttons correctly open the external Slack invite page instead of redirecting to a 404 in local development.
✔ What’s Updated
Replaced
/slack-invitepaths with the correct external invite URL:https://www.asyncapi.com/slack-inviteUpdated:
Homepage Slack CTA button
Community page Slack CTA button
SlackButton component behavior
All Slack links now open in a new browser tab (
target="_blank")🧪 Verification
🔍 Notes
No related issue. Small, isolated fix.
Summary by CodeRabbit
Bug Fixes
Style
✏️ Tip: You can customize this high-level summary in your review settings.