feat: add a centralized contributors page #4682
Conversation
Shubhashish-Chakraborty
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. |
|
Important Review skippedReview was skipped due to path filters ⛔ Files ignored due to path filters (1)
CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including You can disable this status message by setting the WalkthroughAdds a new Contributors feature: a React page that lists AsyncAPI GitHub repositories with search and pagination, lets users select a repo to load its contributors (with client-side username filtering), plus a new Git fork icon, navigation entry, Next.js page, and framer-motion dependency. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Browser
participant Page as Contributors Page
participant GH as GitHub API
participant UI as UI Renderer
User->>Browser: Navigate to /community/contributors
Browser->>Page: mount
Page->>GH: fetch repositories (page, per_page)
GH-->>Page: repositories list + metadata
Page->>UI: render repositories list (search, pagination controls)
User->>UI: Search or change page
UI->>Page: update filters/pagination
Page->>Page: filter repos (client-side) / fetch new page
User->>UI: Select repository
UI->>Page: request contributors for repo
Page->>GH: fetch contributors for repo
GH-->>Page: contributors list
Page->>UI: render contributors (with avatar, counts)
User->>UI: Filter contributors by username
UI->>Page: apply contributor filter
Page->>UI: render filtered contributors
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related issues
Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
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 |
Shubhashish-Chakraborty
changed the title
|
⚡️ Lighthouse report for the changes in this PR:
Lighthouse ran on https://deploy-preview-4682--asyncapi-website.netlify.app/ |
Shubhashish-Chakraborty
changed the title
![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
🧹 Nitpick comments (6)
components/navigation/communityItems.tsx (1)
12-12: Contributors nav item wiring looks goodThe new
Contributorscommunity entry is consistent with existing items (internal href, icon usage, description). Only tiny nit: you might consider rephrasing the description to something like “See who the developers behind AsyncAPI are.” for smoother grammar, but current text is fine if you prefer it.Also applies to: 82-87
components/icons/GitFork.tsx (1)
1-13: New GitFork icon is fine; consider minor a11y and cleanup tweaksThe icon component is consistent with other icons and works as‑is. Optionally, you could:
- Mark it as decorative with
aria-hidden="true"on the<svg>to avoid extra noise for screen readers.- Drop the explicit
import React from 'react';if your tooling is on the modern JSX runtime and doesn’t require it.Neither is blocking.
components/contributors/Contributors.tsx (3)
48-78: GitHub API pagination works but could be more efficient and resilientThe
while (hasMore)loops for repos and contributors will work with GitHub’s empty‑array termination, but they:
- Always perform an extra “empty” page request (N+1 calls).
- Have no guard on total pages or backoff, so they can be a bit wasteful and are more likely to run into rate limits on large orgs.
Not blocking, but consider:
- Using the
Linkheader orresponse.data.length === per_pageto decide whether to continue, avoiding the extra request.- Adding a hard cap on pages (e.g., 10–20) and surfacing a clearer “too many results” message if that’s hit.
- Optionally moving these calls behind a small API route for caching and centralizing rate‑limit handling.
Also applies to: 80-109
425-431: Tailwind arbitraryfocus:ring-[…]classes won’t be generated with runtime interpolationUsing template strings like:
className={`... focus:ring-[${themeColors.primary}]`}means Tailwind’s class scanner never sees the final
focus:ring-[#3B82F6]literal, so that utility is unlikely to be generated and your focus ring color won’t apply.Safer options:
- Use existing semantic Tailwind colors (e.g.
focus:ring-blue-500/focus:ring-purple-500), or- Hard‑code the arbitrary value literal directly in the source, without string interpolation.
For example:
- className={`w-full ... focus:ring-[${themeColors.primary}]`} + className="w-full px-4 py-3 pl-12 border border-gray-200 rounded-full focus:outline-none focus:ring-2 shadow-sm bg-white text-gray-700 focus:ring-blue-500"and similarly for the contributors search input (using a purple/indigo token as appropriate).
Also applies to: 491-497
475-481: Use a proper link for the repo name instead of span + window.openThe repo name is currently a clickable
spanthat callswindow.open, which:
- Is not announced as a link to assistive tech.
- Doesn’t give you
rel="noopener noreferrer"protections.- Requires JS to be enabled.
Consider changing it to an
<a>:- <span onClick={() => { - window.open(`https://github.com/asyncapi/${selectedRepo}`); - }} className="text-blue-600 hover:text-blue-700 cursor-pointer underline"> - {selectedRepo} - </span> + <a + href={`https://github.com/asyncapi/${selectedRepo}`} + target="_blank" + rel="noopener noreferrer" + className="text-blue-600 hover:text-blue-700 cursor-pointer underline" + > + {selectedRepo} + </a>This improves accessibility and follows security best practices.
pages/community/contributors.tsx (1)
9-19: Page wiring is correct; inner Container may be redundantThe page correctly wires
ContributorsPageintoGenericLayoutwith the right metadata and image. SinceGenericLayoutalready wrapschildrenin aContainer, the extra<Container wide>around<ContributorsPage />is probably unnecessary and might slightly constrain the layout compared to other pages.If other community pages pass their content directly as children to
GenericLayout, consider aligning with that pattern:- return ( - <GenericLayout title='AsyncAPI Contributors' description={description} image={image} wide> - <Container wide> - <ContributorsPage /> - </Container> - </GenericLayout> - ); + return ( + <GenericLayout title='AsyncAPI Contributors' description={description} image={image} wide> + <ContributorsPage /> + </GenericLayout> + );
📜 Review details
Configuration used: Path: .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 (5)
components/contributors/Contributors.tsx(1 hunks)components/icons/GitFork.tsx(1 hunks)components/navigation/communityItems.tsx(2 hunks)package.json(1 hunks)pages/community/contributors.tsx(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (2)
pages/community/contributors.tsx (1)
components/layout/GenericLayout.tsx (1)
GenericLayout(25-51)
components/contributors/Contributors.tsx (3)
components/icons/GitFork.tsx (1)
IconGitFork(7-13)components/icons/SearchIcon.tsx (1)
SearchIcon(7-24)components/icons/Code.tsx (1)
IconCode(7-13)
⏰ 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). (4)
- GitHub Check: Redirect rules - asyncapi-website
- GitHub Check: Header rules - asyncapi-website
- GitHub Check: Pages changed - asyncapi-website
- GitHub Check: Lighthouse CI
🔇 Additional comments (2)
components/contributors/Contributors.tsx (1)
243-362: Contributors list logic and UX look solid overallThe contributors panel handles the main states (no repo selected, loading, API error, no contributors, no matches for search) cleanly, and the filtered list computation is straightforward and performant for expected list sizes. The
githubSearchfiltering is also nicely scoped to login names and only applied when there’s input.No changes needed here from a correctness/UX standpoint.
package.json (1)
76-76: [email protected] is compatible with React ^18 and Next.js 15.5.2Version compatibility is confirmed — [email protected] supports React ^18.0.0. When using this with Next.js 15, ensure any component importing from
framer-motionis marked as a client component with"use client"at the top to avoid runtime errors like "Element type is invalid." Verify that the new animated Contributors UI component follows this pattern.
|
hey maintainers, ive tried my best to fix the issues, now can you guide me what else i should do from here.. |
2 participants
This PR adds a new
/community/contributorspage to the AsyncAPI website.Ive discussed everything about it in #4658 , So i would urge y'all to check it out.😄
Changes made:
working (Do watch this
50 Secondrecording of the final working version):ContributorsPagePR.mp4
Note:
framer-motion.GitFork: coz no icon was related to this./public/img/social/community-contributors.webpAnd now i would love to know tweakings and changes from maintainers and the community 😄
Thankyou!
Related issue(s): #4658
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.