Skip to content

Added a lightweight Community Page#3912

Open
anurag2787 wants to merge 9 commits intoOWASP:mainfrom
anurag2787:implement-community-page
Open

Added a lightweight Community Page#3912
anurag2787 wants to merge 9 commits intoOWASP:mainfrom
anurag2787:implement-community-page

Conversation

@anurag2787
Copy link
Contributor

@anurag2787 anurag2787 commented Feb 11, 2026

Proposed change

Implemented a Community Overview stats section to provide basic context and make the Community page more informative.

Resolves #3862

Screencast.from.2026-02-16.18-36-15.webm

Co-authored by: @Mr-Rahul-Paul

Checklist

  • Required: I followed the contributing workflow
  • Required: I verified that my code works as intended and resolves the issue as described
  • Required: I ran make check-test locally: all warnings addressed, tests passed
  • I used AI for code, documentation, tests, or communication related to this PR

@anurag2787 anurag2787 changed the title Addsed a lightweight Community Page Added a lightweight Community Page Feb 11, 2026
@coderabbitai
Copy link
Contributor

coderabbitai bot commented Feb 11, 2026

Walkthrough

Adds a Community app route: a per-route Next.js layout with static metadata, a client-side Community page rendering multiple UI sections, a new data module exporting content arrays, and a community metadata entry in shared metadata config. No API calls or dynamic stats added.

Changes

Cohort / File(s) Summary
Route layout & page
frontend/src/app/community/layout.tsx, frontend/src/app/community/page.tsx
Adds a per-route layout exporting metadata and default CommunityLayout; adds CommunityPage rendering Explore cards, Ways to Engage, Community Journey, Join block, and CTA with responsive/dark-mode markup.
Content data
frontend/src/utils/communityData.ts
New module exporting exploreCards, engagementWays, and journeySteps arrays used by the community page (icons, titles, descriptions, links, colors).
Metadata config
frontend/src/utils/metadata.ts
Adds community entry to exported METADATA_CONFIG (description, keywords, pageTitle, type).
Tests
frontend/__tests__/unit/pages/Community.test.tsx
New unit tests for CommunityPage with mocks for icons/components and assertions covering sections, links, and content rendering.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Suggested reviewers

  • kasya
  • arkid15r
🚥 Pre-merge checks | ✅ 4 | ❌ 2

❌ Failed checks (2 warnings)

Check name Status Explanation Resolution
Linked Issues check ⚠️ Warning The PR partially addresses issue #3862's objectives: it creates a Community page but doesn't include the requested stats (members count, active chapters, organizations count). Implement the specific stats mentioned in #3862: total OWASP members, number of active chapters, and number of organizations on the Community page.
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Out of Scope Changes check ✅ Passed All changes are within scope: layout, page component, community data, and metadata are all necessary for creating the Community page feature.
Merge Conflict Detection ✅ Passed ✅ No merge conflicts detected when merging into main
Title check ✅ Passed The title clearly summarizes the main change - adding a Community Page component with layout, page content, supporting data, metadata, and tests.
Description check ✅ Passed The description is related to the changeset, mentioning implementation of a Community section to provide context, though it references an 'Overview stats section' that is not explicitly detailed in the file changes.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Contributor

@cubic-dev-ai cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

1 issue found across 4 files

Confidence score: 3/5

  • There is a concrete user-facing bug risk: three of four explore card links in frontend/src/app/community/page.tsx point to non-existent routes, leading to 404s.
  • Given the high severity and high confidence issue, this carries some merge risk despite the narrow scope.
  • Pay close attention to frontend/src/app/community/page.tsx - incorrect exploreCards link paths causing 404s.
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:43">
P1: Three of the four explore card links will result in 404 pages. The `exploreCards` data uses paths like `/community/chapters`, `/community/members`, `/community/organizations`, but these routes don't exist — the actual routes are `/chapters`, `/members`, and `/organizations` (as correctly used in the hero section above). The hrefs in `utils/communityData.ts` need to be updated to match the existing route structure.</violation>
</file>

Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 4

🤖 Fix all issues with AI agents
In `@frontend/src/app/community/page.tsx`:
- Around line 20-33: The Link components in community page.tsx (the CTA Links
rendered via the Link component) use hrefs "/chapters" and "/members" which are
inconsistent with the cards in communityData.ts that point to
"/community/chapters" and "/community/members"; update all Link hrefs in the
page (both the top CTAs and the final CTA block rendered by the Link elements
around the Explore Chapters/Meet Members buttons) to use the same
"/community/chapters" and "/community/members" paths so routing is consistent
with the communityData links.
- Line 1: Remove the unnecessary "use client" directive from the top of the
community page component (frontend/src/app/community/page.tsx) so Next.js can
treat the exported page component as a Server Component; locate the top-level
string literal "'use client'" and delete it (the exported page component has no
client-side hooks like useState/useEffect or event handlers), leaving the
component code unchanged otherwise to enable server-side rendering and improve
performance/SEO.

In `@frontend/src/utils/communityData.ts`:
- Around line 1-66: The file only contains static UI copy (exploreCards,
engagementWays, journeySteps) and misses the Community Overview Stats required
by issue `#3862`; add a new exported data structure (e.g., communityStats)
containing keys like totalMembers, activeChapters, and organizations with
initial hardcoded numeric values, and optionally add an exported async helper
(e.g., fetchCommunityStats) that will later fetch real numbers—place these next
to the existing exports so components can import either the static
communityStats or the fetchCommunityStats function to populate the stats
section.
- Line 8: The exploreCards entries currently use the wrong paths with a
`/community` prefix; update the href values in the exploreCards data for the
chapter, member, and organization cards so they point to '/chapters',
'/members', and '/organizations' respectively (leave the snapshots entry as
'/community/snapshots'); locate the exploreCards array in
frontend/src/utils/communityData.ts and change the href strings for the items
labeled for chapters, members, and organizations to remove the '/community'
prefix.

Copy link
Contributor

@cubic-dev-ai cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

1 issue found across 1 file (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/utils/communityData.ts">

<violation number="1" location="frontend/src/utils/communityData.ts:32">
P1: Broken link: The Snapshots route is at `/community/snapshots` (see `frontend/src/app/community/snapshots/`), not `/snapshots`. This change will result in a 404 for the Snapshots card. The other three href changes are correct since those routes exist at the top level, but this one should be reverted.</violation>
</file>

Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Fix all issues with AI agents
In `@frontend/src/utils/communityData.ts`:
- Line 32: Update the incorrect route string in
frontend/src/utils/communityData.ts by changing the href value currently set to
'/snapshots' to the correct path '/community/snapshots'; locate the object/entry
in communityData.ts that contains the href property and replace the string so
navigation points to the existing /community/snapshots page.

coderabbitai[bot]
coderabbitai bot previously approved these changes Feb 11, 2026
@anurag2787 anurag2787 marked this pull request as ready for review February 11, 2026 18:43
@anurag2787
Copy link
Contributor Author

Hi @arkid15r the stats idea i proposed is already implemented on the home page adding the same thing again in the community section would make it redundant the same applies to Recent Issues, New Chapters, and Recent Pull Requests these are already present on the Home page.
Rest I’ve implemented the community page static as said If any further improvements are needed, please let me know. or should i start writing test for this changes?
Thanks!

Copy link
Collaborator

@arkid15r arkid15r left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think we have a clear understanding of what this page should look like atm but it's a good start. Perhaps, this page contents will migrate to the main page later, maybe in a bit remixed way. But now it should not just duplicate the main page content and be lightweight -- similar to what you implemented.

As for the feedback:

  • we don't use colored icons
  • the page has too many buttons/calls to action
  • I saw the committees included in one of the parallel PRs

I'm attaching other PRs screenshots for UI ideas

Image Image Image

coderabbitai[bot]
coderabbitai bot previously approved these changes Feb 16, 2026
@anurag2787 anurag2787 requested a review from arkid15r February 16, 2026 13:08
@anurag2787 anurag2787 marked this pull request as ready for review February 16, 2026 13:08
@anurag2787
Copy link
Contributor Author

Hi @arkid15r i have updated it could you please review Thanks!

@arkid15r arkid15r enabled auto-merge February 16, 2026 21:22
@arkid15r arkid15r disabled auto-merge February 16, 2026 21:31
Copy link
Collaborator

@arkid15r arkid15r left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please run the checks and add tests.

@sonarqubecloud
Copy link

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (3)
frontend/src/app/community/page.tsx (2)

130-131: Consider extracting the Slack invite URL to a constants file.

Hardcoded URLs are easy to miss when they change. A shared constant (e.g., in a constants/urls.ts) would make it easier to update and reuse across the codebase.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@frontend/src/app/community/page.tsx` around lines 130 - 131, The Slack invite
URL is hardcoded in the anchor href inside the Community page component
(page.tsx); extract this string into a shared constant (e.g., export const
SLACK_INVITE_URL from a new constants/urls.ts), import SLACK_INVITE_URL in the
Community page and replace the literal "https://owasp.org/slack/invite" with
that constant, and update any other occurrences to use the same constant so the
URL is maintained in one place.

5-5: Confusing import alias: exploreCards as NAV_SECTIONS.

The source export is exploreCards — renaming it to NAV_SECTIONS implies a navigation-config role that doesn't match the card-rendering context. Use the original name or pick an alias that reflects its purpose (e.g., resourceCards).

Proposed fix
-import { exploreCards as NAV_SECTIONS, engagementWays, journeySteps } from 'utils/communityData'
+import { exploreCards, engagementWays, journeySteps } from 'utils/communityData'

Then replace NAV_SECTIONS with exploreCards at line 45.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@frontend/src/app/community/page.tsx` at line 5, The import alias
`exploreCards as NAV_SECTIONS` is misleading; change the import to keep the
original name or a clearer alias (e.g., `resourceCards`) so it reflects card
data rather than navigation; update the import statement that currently aliases
to NAV_SECTIONS and replace all usages of NAV_SECTIONS in this module (e.g., the
render where NAV_SECTIONS is used around line 45) to the chosen name
(`exploreCards` or `resourceCards`) so the symbol meaning is consistent.
frontend/__tests__/unit/pages/Community.test.tsx (1)

11-18: react-icons/fa6 mock is unnecessary.

Since utils/communityData is fully mocked below (lines 51–77), the real module — and its fa6 imports — is never loaded. This mock block is dead code.

Proposed fix
-jest.mock('react-icons/fa6', () => ({
-  FaLocationDot: () => <span data-testid="icon-location" />,
-  FaFolder: () => <span data-testid="icon-folder" />,
-  FaPeopleGroup: () => <span data-testid="icon-people" />,
-  FaBuilding: () => <span data-testid="icon-building" />,
-  FaUsers: () => <span data-testid="icon-users" />,
-  FaHandshakeAngle: () => <span data-testid="icon-handshake" />,
-}))
-
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@frontend/__tests__/unit/pages/Community.test.tsx` around lines 11 - 18,
Remove the unused mock for 'react-icons/fa6' (the jest.mock call that defines
FaLocationDot, FaFolder, FaPeopleGroup, FaBuilding, FaUsers, FaHandshakeAngle)
because utils/communityData is fully mocked elsewhere so the real module is
never imported; simply delete that jest.mock('react-icons/fa6', ...) block to
eliminate dead code and rely on the existing mock for utils/communityData.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Duplicate comments:
In `@frontend/__tests__/unit/pages/Community.test.tsx`:
- Around line 84-95: The test "renders the main page title and intro" currently
asserts link hrefs for "Chapters", "Members", and "Organizations" as
'/chapters', '/members', '/organizations' but the app uses the community-scoped
routes; update the expected hrefs in the Community.test.tsx assertions for the
rendered CommunityPage component to '/community/chapters', '/community/members',
and '/community/organizations' respectively so getByRole('link', { name:
/Chapters|Members|Organizations/i }) checks match the actual routes.

In `@frontend/src/app/community/page.tsx`:
- Line 1: Remove the unnecessary client directive by deleting the top-line "'use
client'" in the community page component (frontend/src/app/community/page.tsx);
ensure the component (the default export in page.tsx) contains no client-only
hooks or event handlers and can safely be a Server Component so Next.js will
render it server-side for better performance and SEO.
- Around line 19-28: The Link hrefs in the community page (the Link elements in
frontend/src/app/community/page.tsx) use /chapters, /members, /organizations
while the explore cards in communityData.ts use the /community/* prefixed
routes; make them consistent by updating either the Link hrefs in page.tsx or
the route fields in communityData.ts so both use the same base path (e.g.,
change the Link hrefs to /community/chapters, /community/members,
/community/organizations or update communityData entries to remove the
/community prefix), and verify the Explore card rendering uses the same property
names (the route/path field) you adjusted.

---

Nitpick comments:
In `@frontend/__tests__/unit/pages/Community.test.tsx`:
- Around line 11-18: Remove the unused mock for 'react-icons/fa6' (the jest.mock
call that defines FaLocationDot, FaFolder, FaPeopleGroup, FaBuilding, FaUsers,
FaHandshakeAngle) because utils/communityData is fully mocked elsewhere so the
real module is never imported; simply delete that jest.mock('react-icons/fa6',
...) block to eliminate dead code and rely on the existing mock for
utils/communityData.

In `@frontend/src/app/community/page.tsx`:
- Around line 130-131: The Slack invite URL is hardcoded in the anchor href
inside the Community page component (page.tsx); extract this string into a
shared constant (e.g., export const SLACK_INVITE_URL from a new
constants/urls.ts), import SLACK_INVITE_URL in the Community page and replace
the literal "https://owasp.org/slack/invite" with that constant, and update any
other occurrences to use the same constant so the URL is maintained in one
place.
- Line 5: The import alias `exploreCards as NAV_SECTIONS` is misleading; change
the import to keep the original name or a clearer alias (e.g., `resourceCards`)
so it reflects card data rather than navigation; update the import statement
that currently aliases to NAV_SECTIONS and replace all usages of NAV_SECTIONS in
this module (e.g., the render where NAV_SECTIONS is used around line 45) to the
chosen name (`exploreCards` or `resourceCards`) so the symbol meaning is
consistent.

@anurag2787 anurag2787 requested a review from arkid15r February 17, 2026 19:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add Community Overview Stats Section

2 participants

Comments