feat: community layout & board page #4127
Conversation
aminoxix
requested review from
Mayaleeeee,
akshatnema,
anshgoyalevil,
asyncapi-bot-eve,
derberg and
sambhavgupta0705
as code owners
✅ Deploy Preview for asyncapi-website ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
""" WalkthroughThis update introduces a reusable Changes
Sequence Diagram(s)sequenceDiagram
participant Page
participant CommunityLayout
participant MemberData
participant HelperComponents
Page->>CommunityLayout: Render with membership type (TSC or BOARD)
CommunityLayout->>MemberData: Import and enrich member data
CommunityLayout->>HelperComponents: Render UserInfo, SocialLink, etc.
CommunityLayout->>Page: Render children and member grid
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
npm warn EBADENGINE Unsupported engine { 📜 Recent review detailsConfiguration used: .coderabbit.yaml 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ 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). (2)
✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
![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.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 16
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
components/layout/CommunityLayout.tsx(1 hunks)pages/community/board.tsx(1 hunks)pages/community/tsc.tsx(2 hunks)types/packages/yaml.d.ts(1 hunks)types/pages/community/Community.ts(2 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (2)
pages/community/board.tsx (3)
types/pages/community/Community.ts (2)
Tsc(39-53)Ambassador(19-37)components/layout/CommunityLayout.tsx (1)
CommunityLayout(263-306)components/typography/TextLink.tsx (1)
TextLink(21-42)
pages/community/tsc.tsx (1)
components/layout/CommunityLayout.tsx (1)
CommunityLayout(263-306)
🪛 GitHub Actions: PR testing - if Node project
pages/community/board.tsx
[error] 1-1: Prettier formatting error: Delete newline at start of file.
[error] 2-2: simple-import-sort: Imports are not sorted. Run autofix to sort these imports.
[error] 4-4: import/no-extraneous-dependencies: 'js-yaml' should be listed in the project's dependencies. Run 'npm i -S js-yaml' to add it.
[error] 6-6: import/order: Import '../../components/typography/TextLink' should occur after import of '@/components/layout/CommunityLayout'.
[error] 7-7: @typescript-eslint/consistent-type-imports: All imports in the declaration are only used as types. Use 'import type'.
[error] 15-15: Prettier formatting error: Replace multiline props with inline props for 'members' and 'membership'.
[error] 19-19: Prettier formatting error: Replace multiline attributes with inline attributes for className and data-testid.
[error] 24-24: Prettier formatting error: Replace inline text with multiline formatting for 'What is the Governance Board?'.
[error] 26-26: Prettier formatting error: Replace inline text with multiline formatting for governance description.
[error] 34-34: Prettier formatting error: Insert newline indentation.
[error] 38-38: Prettier formatting error: Replace inline text with multiline formatting for 'How can I become a Board Member?'.
[error] 40-40: Prettier formatting error: Replace inline text with multiline formatting for board member eligibility and election cycle.
[error] 47-47: Prettier formatting error: Insert newline indentation.
[error] 51-51: Prettier formatting error: Replace inline text with multiline formatting for 'Board Member Responsibilities'.
[error] 53-53: Prettier formatting error: Replace inline text with multiline formatting for responsibilities description.
[warning] 70-70: require-jsdoc: Missing JSDoc comment.
[error] 76-76: Prettier formatting error: Replace multiline map function with inline formatting.
pages/community/tsc.tsx
[error] 1-1: simple-import-sort: Imports are not sorted. Run autofix to sort these imports.
[error] 2-2: import/order: Import '@/components/layout/CommunityLayout' should occur before import of '../../components/typography/TextLink'.
[error] 9-9: Prettier formatting error: Replace multiline prop 'membership' with inline formatting.
[error] 12-12: Prettier formatting error: Replace multiline attributes with inline attributes for className and data-testid.
[error] 16-66: Prettier formatting errors: Multiple lines contain trailing spaces or incorrect indentation. Delete extra spaces and fix indentation.
components/layout/CommunityLayout.tsx
[error] 4-4: @typescript-eslint/consistent-type-imports: All imports in the declaration are only used as types. Use 'import type'.
[error] 6-11: import/no-useless-path-segments: Useless path segments detected in multiple imports; should be corrected to relative paths.
[error] 13-13: unused-imports/no-unused-imports and no-unused-vars: 'BoardMembersList' is defined but never used.
[error] 56-56: Prettier and quotes: Replace double quotes with single quotes for string 'repos'.
[error] 142-142: Prettier and quotes: Replace double quotes with single quotes for string 'availableForHire'.
[error] 205-205: Prettier and quotes: Replace double quotes with single quotes for string 'repos' and fix multiline formatting.
[error] 250-250: no-use-before-define: 'Membership' was used before it was defined.
[error] 252-252: Prettier formatting error: Missing semicolon insertion.
[error] 256-257: Prettier and quotes: Replace double quotes with single quotes for strings 'TSC' and 'Board'.
[error] 263-263: Prettier formatting error: Replace multiline props with inline formatting for members, children, membership.
[error] 266-266: comma-dangle: Unexpected trailing comma.
[error] 271-271: Prettier and semi: Missing semicolon at end of statement.
[error] 272-272: Prettier formatting error: Replace parentheses formatting for members array.
[error] 277-277: Prettier formatting error: Fix parentheses placement in conditional expression.
[error] 280-280: Prettier formatting error: Replace inline props with multiline props for title, description, image, wide.
[error] 283-289: Prettier formatting error: Insert newlines and fix indentation in JSX elements.
⏰ Context from checks skipped due to timeout of 180000ms (1)
- GitHub Check: Lighthouse CI
🔇 Additional comments (4)
types/packages/yaml.d.ts (1)
1-5: LGTM! Clean TypeScript declaration for YAML imports.This module declaration properly enables TypeScript support for importing YAML files. The use of
anytype is appropriate since YAML content can have various structures.types/pages/community/Community.ts (2)
33-36: Well-structured interface extensions for Ambassador.The new optional properties enhance the Ambassador interface to support board membership roles and avatar URLs, aligning with the community layout requirements.
51-52: Good addition of board membership properties to Tsc interface.The optional board-related properties maintain consistency with the Ambassador interface extensions.
components/layout/CommunityLayout.tsx (1)
272-277:✅ Verification successful
Verify type safety for member filtering.
The filtering logic assumes properties exist on both TSC and Ambassador types that may not be present.
The filtering logic relies on
isTscMember,isBoardMember, andisBoardChairproperties. Please verify these properties exist on the imported types.
🏁 Script executed:
#!/bin/bash # Description: Verify the type definitions contain the required properties for filtering # Expected: Properties like isTscMember, isBoardMember, isBoardChair should exist echo "Checking type definitions for required properties..." ast-grep --pattern 'interface Tsc { $$$ }' ast-grep --pattern 'interface Ambassador { $$$ }' echo "Checking for board member properties..." rg -A 10 -B 5 "isTscMember|isBoardMember|isBoardChair"Length of output: 54879
Filtering Logic Type-Safe
Verified that both the Tsc and Ambassador interfaces declareisTscMember,isBoardMember, andisBoardChair(with appropriate optionality), so the current.filter(...)call is fully type-safe. No changes required.🧰 Tools
🪛 GitHub Actions: PR testing - if Node project
[error] 272-272: Prettier formatting error: Replace parentheses formatting for members array.
[error] 277-277: Prettier formatting error: Fix parentheses placement in conditional expression.
|
drafting this up, let's wait for the related changes to be merged! |
aminoxix
force-pushed
the
feat/community-page
branch
from
8c7b909 to
0d4fef4
Compare
Signed-off-by: aminoxix <[email protected]>
aminoxix
force-pushed
the
feat/community-page
branch
from
0d4fef4 to
c00c218
Compare
Co-authored-by: asyncapi-bot <[email protected]> Co-authored-by: Rohit <[email protected]> Co-authored-by: Eve <[email protected]>
Co-authored-by: raghav-97 <[email protected]> Co-authored-by: Rohit <[email protected]> Co-authored-by: Akshat Nema <[email protected]>
) * improve UI responsiveness for 'Latest News' section in Community Newsroom * fix the preetier part * refactor: standardize quotation marks in Newsroom component * liniting fix * lint fix * lint fix * fix: correct indentation in Newsroom component * Remove duplicate tool rendering in ToolsList using Set for unique titles. * Remove duplicate tool rendering in ToolsList using Set for unique titles. * Refactor ToolsList component to simplify rendering and remove duplicate tool handling * removed inline * fix: correct typo in Twitter link class name * fix: adjust width of banner container for better responsiveness --------- Co-authored-by: Akshat Nema <[email protected]>
asyncapi#3845) Co-authored-by: Sagar Kori <[email protected]> Co-authored-by: Chan <[email protected]> Co-authored-by: Sambhav Gupta <[email protected]> Co-authored-by: Akshat Nema <[email protected]>
Signed-off-by: aminoxix <[email protected]>
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (2)
components/layout/CommunityLayout.tsx (2)
50-52: Critical: Fix potential null reference error in avatar URL construction.The avatar URL construction assumes
userData.githubis always defined, but it could be undefined after the social links processing, leading to a runtime error.This issue was identified in previous reviews and still needs to be addressed:
// add avatar url // github redirects to avatar url using `https://www.github.com/<username>.png` - userData.avatarUrl = `${userData.github}.png`; + if (userData.github) { + userData.avatarUrl = `${userData.github}.png`; + }
188-193: Add null safety for avatar URL display.The component doesn't handle cases where
avatarUrlmight be undefined, which could break the UI if the avatar URL construction fails.<img data-testid='UserInfo-avatar' - src={user.avatarUrl} + src={user.avatarUrl || '/img/avatars/default.png'} alt={user.name} className='mx-auto size-20 rounded-full xl:size-28' />
🧹 Nitpick comments (1)
components/layout/CommunityLayout.tsx (1)
309-312: Consider accessibility improvement for the members list.The user list could benefit from additional ARIA attributes to improve screen reader navigation.
<ul role='list' className='space-y-4 sm:grid sm:grid-cols-2 sm:gap-6 sm:space-y-0 lg:grid-cols-3 lg:gap-8'> + <li className='sr-only'>List of {membership} members</li> {tscBoardMembers.map((user) => ( <UserInfo key={user.github} user={user} /> ))} <QuestionCard /> </ul>
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
components/layout/CommunityLayout.tsx(1 hunks)
⏰ Context from checks skipped due to timeout of 180000ms (1)
- GitHub Check: Lighthouse CI
🔇 Additional comments (1)
components/layout/CommunityLayout.tsx (1)
260-268: Good: Enum and interface definitions are properly structured.The
Membershipenum is now correctly defined before the interface that uses it, and the interface is clean and well-typed.
|
@derberg: btw, hyperlink styling pushed |
derberg
left a comment
derberg
left a comment
There was a problem hiding this comment.
can you please do last change - manually update source json file, make 3 random people board members, and one of them a chair - and push to PR, so I can see the board page, how it will look like with available data
please check the screenshots: 
chairperson: |
Signed-off-by: aminoxix <[email protected]>
|
ready to merge |
Signed-off-by: aminoxix <[email protected]>
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (1)
config/TSC_BOARD_MEMBERS.json(4 hunks)
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: asyncapi-bot
PR: asyncapi/website#0
File: :0-0
Timestamp: 2025-02-18T12:07:42.211Z
Learning: The following PR commands are supported in the asyncapi/website repository:
- `/please-take-a-look` or `/ptal`: Requests attention from reviewers who haven't reviewed the PR
- `/ready-to-merge` or `/rtm`: Triggers automerge when all conditions are met
- `/do-not-merge` or `/dnm`: Blocks automerge even if all conditions are met
- `/autoupdate` or `/au`: Adds autoupdate label to keep PR in sync with target branch
- `/update` or `/u`: One-time update of PR with latest changes from target branch
Learnt from: aminoxix
PR: asyncapi/website#4127
File: components/layout/CommunityLayout.tsx:179-179
Timestamp: 2025-06-10T06:27:25.419Z
Learning: In AsyncAPI's community data structure, ambassadors and TSC members are guaranteed to have GitHub accounts. The `github` field is required in both `Ambassador` and `Tsc` interfaces, and the data processing in `addAdditionalUserInfo()` converts GitHub usernames to full URLs, ensuring safe string operations when extracting usernames from URLs.
config/TSC_BOARD_MEMBERS.json (1)
Learnt from: aminoxix
PR: asyncapi/website#4127
File: components/layout/CommunityLayout.tsx:179-179
Timestamp: 2025-06-10T06:27:25.419Z
Learning: In AsyncAPI's community data structure, ambassadors and TSC members are guaranteed to have GitHub accounts. The `github` field is required in both `Ambassador` and `Tsc` interfaces, and the data processing in `addAdditionalUserInfo()` converts GitHub usernames to full URLs, ensuring safe string operations when extracting usernames from URLs.
⏰ 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). (7)
- GitHub Check: Redirect rules - asyncapi-website
- GitHub Check: Header rules - asyncapi-website
- GitHub Check: Pages changed - asyncapi-website
- GitHub Check: Test NodeJS PR - macos-13
- GitHub Check: Test NodeJS PR - ubuntu-latest
- GitHub Check: Test NodeJS PR - windows-latest
- GitHub Check: Lighthouse CI
|
@aminoxix great work mate 👏🏼 thanks for helping out 🍺 |
|
/rtm |
Co-authored-by: aminoxix <[email protected]> Co-authored-by: Chan <[email protected]> Co-authored-by: Raghav Tandulkar <[email protected]> Co-authored-by: Pankaj Kumar <[email protected]> Co-authored-by: Sagar Kori <[email protected]> Co-authored-by: sharad poddar <[email protected]> Co-authored-by: Adi Boghawala <[email protected]> Co-authored-by: Atinuke Oluwabamikemi Kayode <[email protected]> Co-authored-by: Azeez Elegbede <[email protected]> Co-authored-by: V Thulisile Sibanda <[email protected]> Co-authored-by: Akshat Nema <[email protected]> Co-authored-by: Lukasz Gornicki <[email protected]>
13 participants
Description
TSC_BOARD_MEMBER.yaml(ctx: upcoming changes through community) overUserInfocomponentCommunityLayoutas a wrapper forTsc&Boardcomponent/page/community/tscpageRelated issue(s)
Resolves #4095
Summary by CodeRabbit
Summary by CodeRabbit
New Features
Enhancements
Style
Bug Fixes