Conversation
Summary by CodeRabbitRelease Notes
WalkthroughIntroduces a new Community Hub page with layout template, GraphQL queries, and components. Displays community statistics, navigable resource sections, recent releases, and top contributors. Updates metadata configuration and enhances ContributorsList component with customizable styling options. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~22 minutes Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (3 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Fix all issues with AI agents
In `@frontend/src/app/community/page.tsx`:
- Around line 72-77: The page is over-fetching by using GetMainPageDataDocument;
create a dedicated, smaller GraphQL query (e.g., GetCommunityPageDataDocument)
that only requests statsOverview, recentReleases, and topContributors (with the
same recentReleasesLimit and topContributorsLimit variables), replace the
useQuery call that references GetMainPageDataDocument with one that uses the new
document, and remove any references to unused fields (recentProjects,
recentPosts, recentChapters, recentIssues, recentPullRequests, recentMilestones,
sponsors, upcomingEvents) so only the needed data is fetched and returned to the
component.
- Around line 234-235: The external GitHub Link in community/page.tsx (the Link
with href="https://github.com/owasp") needs to open in a new tab and prevent
reverse-tabnapping; update the Link so the rendered anchor includes
target="_blank" and rel="noopener noreferrer" (for Next.js/React, add these
attributes to the child <a> or the Link element that renders the anchor) to
ensure it opens in a new tab safely.
- Line 197: The code fetches up to recentReleasesLimit (set to 10) but then
truncates the UI with data?.recentReleases?.slice(0, 6), causing 4 items to be
dropped; pick one: if you want to show 6 items, change recentReleasesLimit to 6
(update the variable/constant named recentReleasesLimit), or if you want to show
all fetched items, remove the .slice(0, 6) in the JSX mapping (the line
referencing data?.recentReleases?.slice) so the map renders data?.recentReleases
directly; update the corresponding symbol(s) accordingly.
🧹 Nitpick comments (3)
frontend/src/components/CommunityContributorsList.tsx (2)
27-31: Move the early return before the slice for clarity.The empty-array guard on line 29 should come before the
sliceon line 27. Currently the slice runs unnecessarily whencontributorsis empty — functionally harmless but reads better with the guard first.Proposed reorder
}: CommunityContributorsListProps) => { + if (contributors.length === 0) { + return null + } + const displayContributors = contributors.slice(0, maxInitialDisplay) - - if (contributors.length === 0) { - return null - }
41-41:twMergewith a single argument is a no-op.
twMerge(className)just returnsclassNameunchanged. Either passclassNamedirectly or merge it with a base class string if one is intended.frontend/src/app/community/page.tsx (1)
1-1: Consider whether'use client'is necessary for the entire page.The page currently uses
useQuerywhich requires client-side rendering, but the bulk of the page is static content (hero, nav sections, quick links). If the project supports it, you could split the data-dependent sections into a client component and keep the rest as a server component for better initial load performance and SEO.
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
2 issues found across 6 files
Confidence score: 3/5
- The community page in
frontend/src/app/community/page.tsxreuses a heavy GraphQL query but only consumes a small subset of fields, which can cause unnecessary data fetching and user-visible performance impact. frontend/src/components/CommunityContributorsList.tsxlargely duplicatesContributorsList.tsx, increasing maintenance risk and the chance of divergence over time.- The score reflects some concrete user-impacting risk (overfetching) plus a medium maintainability concern.
- Pay close attention to
frontend/src/app/community/page.tsxandfrontend/src/components/CommunityContributorsList.tsx- reduce overfetching and avoid duplicated component logic.
Prompt for AI agents (all issues)
Check if these issues are valid — if so, understand the root cause of each and fix them.
<file name="frontend/src/app/community/page.tsx">
<violation number="1" location="frontend/src/app/community/page.tsx:18">
P1: This page reuses the home page's GraphQL query (`GetMainPageDataDocument`) which fetches ~12 top-level fields, but only 3 are used here (`statsOverview`, `recentReleases`, `topContributors`). This causes significant over-fetching of data (projects, posts, chapters, issues, PRs, sponsors, events, milestones are all fetched and discarded). Create a dedicated query for the community page that only requests the fields it needs.
(Based on your team's feedback about using existing shared components and utilities.) [FEEDBACK_USED]</violation>
</file>
<file name="frontend/src/components/CommunityContributorsList.tsx">
<violation number="1" location="frontend/src/components/CommunityContributorsList.tsx:19">
P2: This component is a near-exact duplicate of the existing `ContributorsList.tsx`. Instead of creating a parallel implementation, extend the existing `ContributorsList` with additional props (e.g., `className`, `showMore`, `gridClassName`, `cardClassName`) to customize its behavior. This avoids maintaining two almost-identical components that will easily drift out of sync.
(Based on your team's feedback about using existing shared components and utilities.) [FEEDBACK_USED]</violation>
</file>
Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.
There was a problem hiding this comment.
1 issue found across 4 files (changes from recent commits).
Prompt for AI agents (all issues)
Check if these issues are valid — if so, understand the root cause of each and fix them.
<file name="frontend/src/app/community/page.tsx">
<violation number="1" location="frontend/src/app/community/page.tsx:240">
P3: Spurious `{' '}` adds a leading space inside the link text, rendering as " Github" instead of "Github". Remove this line to avoid the extra whitespace.</violation>
</file>
Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Fix all issues with AI agents
In `@frontend/src/app/community/page.tsx`:
- Around line 240-241: Update the displayed label text in the component that
renders the string "Github" to use the correct capitalization "GitHub" and
remove the stray JSX whitespace token {' '} surrounding it; locate the JSX
element in page.tsx that currently contains {' '} Github and replace it with a
single plain "GitHub" text node so the UI renders with correct spelling and no
extra space token.
- Around line 197-204: The map uses release.tagName as the React key which can
collide across repos; change the key to the unique GraphQL id (use release.id)
in the mapping that renders the Release component so each <Release key=...
release={release as ReleaseType} .../> uses release.id instead of
release.tagName to avoid duplicate key warnings and rendering bugs.
- Line 200: Remove the unsafe cast "as ReleaseType" when passing the
recentReleases item to the release prop and make the types align: update the
GraphQL query that supplies recentReleases to return publishedAt as a number
(e.g., epoch or timestamp) and shape author to match your User type, or
alternatively modify the ReleaseType definition to accept publishedAt: any |
null and the actual author shape from GraphQL; ensure checks/conversions occur
where you map recentReleases to the component (so ReleaseType and the data
returned by recentReleases are concordant and you no longer need the cast).
🧹 Nitpick comments (4)
frontend/src/components/ContributorCard.tsx (1)
22-35: Inconsistent optional chaining oncontributor.
contributoris a required prop (non-optionalContributor), yet lines 23, 26, 27, 32, 33 usecontributor?.while line 35 accessescontributor.name/contributor.logindirectly. Pick one style — since the prop is required, drop the unnecessary optional chaining for consistency.♻️ Suggested diff
- alt={contributor?.name ? `${contributor.name}'s avatar` : 'Contributor avatar'} + alt={contributor.name ? `${contributor.name}'s avatar` : 'Contributor avatar'} className="rounded-full" height={24} - src={`${contributor?.avatarUrl}${contributor?.avatarUrl?.includes('?') ? '&' : '?'}s=60`} - title={contributor?.name || contributor?.login} + src={`${contributor.avatarUrl}${contributor.avatarUrl.includes('?') ? '&' : '?'}s=60`} + title={contributor.name || contributor.login} width={24} /> <Link className="cursor-pointer overflow-hidden font-semibold text-ellipsis whitespace-nowrap text-blue-400 hover:underline" - href={getUrl(contributor?.login)} - title={contributor?.name || contributor?.login} + href={getUrl(contributor.login)} + title={contributor.name || contributor.login} >frontend/src/app/community/page.tsx (3)
26-69: Thecolorproperty is identical for every entry inNAV_SECTIONS.All six items use
'text-gray-900 dark:text-gray-100'. You could extract this as a constant or apply it directly in the rendering code, removing the per-item boilerplate.
71-81: Full-page loading spinner with no error recovery.The entire page shows a spinner while data loads (no skeleton/placeholder), and on error the user sees a static message with no way to retry. Consider adding a retry button or using Apollo's
refetchto let users recover from transient failures.Minimal retry example
- if (error) - return <div className="p-8 text-center text-red-500">Error loading community data.</div> + if (error) + return ( + <div className="p-8 text-center text-red-500"> + Error loading community data. + <button + className="ml-2 text-blue-500 underline" + onClick={() => void refetch()} + > + Retry + </button> + </div> + )You'll need to destructure
refetchfromuseQuery:- const { data, loading, error } = useQuery(...) + const { data, loading, error, refetch } = useQuery(...)
109-110: Use a theme token or define the color in the Tailwind config for consistency.
dark:bg-[#212529]is inconsistent with the surrounding code, which uses theme tokens likedark:bg-gray-800anddark:text-gray-100. Add this color to the Tailwind config's theme if it's intentional, or switch to an existing token that matches the design intent.
Mr-Rahul-Paul
force-pushed
the
community
branch
from
50c90e4 to
dd9fe9a
Compare
|
1 participant
Proposed change
Resolves #3862
Description
This PR proposes a design for the
/Communitypage , aligned with OWASP's visual identity.Static page implementation (as requested), clean & Community first design:
visuals
2026-02-12.04-09-03.mp4
disscussion
some tests will need to be added / updated related to the PR. After the design is approved.
Checklist
make check-testlocally: all warnings addressed, tests passed