docs(community): redesign community page with card grid layout #37536
Conversation
Convert the community page from a vertical list to a responsive card grid, remove outdated resources (Stack Overflow, Meetup), update links for Organizations and Contributors Guide, add subscription info for the dev@ mailing list, and add a "Follow Us" section with X, LinkedIn, and Bluesky social media cards. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Sequence DiagramThe PR replaces the vertical list with a responsive card grid and adds a "Follow Us" social cards section. The diagram shows the main render flow and the user clicking a card to open an external resource. sequenceDiagram
participant Visitor
participant Browser
participant DocsSite
participant ExternalSite
Visitor->>Browser: Navigate to /community
Browser->>DocsSite: Request Community page
DocsSite-->>Browser: Render Community component with Card Grid (communityLinks) and Social Grid (socialLinks)
Visitor->>Browser: Click community/social card
Browser->>ExternalSite: Open card.url in new tab (external resource)
Generated by CodeAnt AI |
![codeant-ai-for-open-source[bot]](https://avatars.githubusercontent.com/u/151810221?s=60&v=4){kind=small}
| ${mq[2]} { | ||
| grid-template-columns: repeat(2, minmax(0, 1fr)); | ||
| } | ||
| .item { | ||
| padding: 0; | ||
| border: 0; | ||
| ${mq[1]} { |
There was a problem hiding this comment.
Suggestion: The responsive grid uses mq[2], but throughout the codebase mq is only indexed as mq[0] and mq[1], so mq[2] will be undefined and the two-column breakpoint styles will never be applied, breaking the intended 3→2→1 layout; switching to the existing breakpoints restores the correct responsive behavior. [logic error]
Severity Level: Major ⚠️
- ❌ Community page responsive grid shows wrong columns.
- ⚠️ Netlify preview displays layout regression for reviewers.
- ⚠️ Mobile/tablet users see suboptimal card layout.
- ⚠️ Visual inconsistency with other docs pages.| ${mq[2]} { | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| } | |
| .item { | |
| padding: 0; | |
| border: 0; | |
| ${mq[1]} { | |
| ${mq[1]} { | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| } | |
| ${mq[0]} { |
Steps of Reproduction ✅
1. Open the Community page component at docs/src/pages/community.tsx and locate the
StyledCardGrid breakpoints around lines 94-106. The current code uses ${mq[2]} at line 101
to set the two-column breakpoint (file verified via Read of docs/src/pages/community.tsx).
2. Inspect other components for the mq breakpoint indices. Grep results show project-wide
usage of mq[1] and mq[0] (many matches) and a single occurrence of mq[2] only in
docs/src/pages/community.tsx:101. For example, docs/src/pages/index.tsx uses ${mq[1]} and
${mq[0]} (see grep hits and file docs/src/pages/index.tsx:470 uses ${mq[0]}),
demonstrating the established breakpoint indexes are 0 and 1.
3. Build or open the site preview (Netlify preview or local dev server) and load
/community. Because mq[2] is not defined in the codebase's mq array, the CSS block for the
two-column layout never emits; the grid will remain at 3 columns until the mq[1]
breakpoint (which currently collapses directly to 1 column), causing the intended 3 → 2 →
1 responsive behavior to be skipped.
4. Observe the visual regression: resizing the browser from desktop width down to tablet
width does not switch to a 2-column card grid (verified by inspecting the generated CSS in
browser devtools and confirming absence of a media rule for the 2-column breakpoint).
Replacing ${mq[2]} with ${mq[1]} and shifting the single-column rule to ${mq[0]} (as
proposed) restores the 3→2→1 behavior consistent with other pages that use mq[1]/mq[0].
Note: The grep scan across docs components shows mq[1] is the common tablet breakpoint and
mq[0] is the mobile breakpoint; the use of mq[2] here appears to be a typo rather than
intentional (only occurrence).Prompt for AI Agent 🤖
This is a comment left during a code review.
**Path:** docs/src/pages/community.tsx
**Line:** 101:104
**Comment:**
*Logic Error: The responsive grid uses `mq[2]`, but throughout the codebase `mq` is only indexed as `mq[0]` and `mq[1]`, so `mq[2]` will be `undefined` and the two-column breakpoint styles will never be applied, breaking the intended 3→2→1 layout; switching to the existing breakpoints restores the correct responsive behavior.
Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.There was a problem hiding this comment.
mq[2] is valid — mq is defined in docs/src/utils.js as breakpoints.map(bp => ...) over [576, 768, 992, 1200], so mq[2] maps to @media (max-width: 992px). The 3→2→1 responsive layout is intentional:
- Default: 3 columns
mq[2](≤992px): 2 columnsmq[1](≤768px): 1 column
While the rest of the codebase only uses mq[0] and mq[1], the array has 4 entries and mq[2] is the correct breakpoint for the intermediate 2-column step.
![bito-code-review[bot]](https://avatars.githubusercontent.com/in/1061978?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review Agent Run #4a28e7
Actionable Suggestions - 2
-
docs/src/pages/community.tsx - 2
- Accessibility: Empty alt text · Line 277-277
- Accessibility: Empty alt text · Line 277-277
Review Details
-
Files reviewed - 1 · Commit Range:
26b8634..26b8634- docs/src/pages/community.tsx
-
Files skipped - 0
-
Tools
- Whispers (Secret Scanner) - ✔︎ Successful
- Detect-secrets (Secret Scanner) - ✔︎ Successful
Bito Usage Guide
Commands
Type the following command in the pull request comment and save the comment.
-
/review- Manually triggers a full AI review. -
/pause- Pauses automatic reviews on this pull request. -
/resume- Resumes automatic reviews. -
/resolve- Marks all Bito-posted review comments as resolved. -
/abort- Cancels all in-progress reviews.
Refer to the documentation for additional commands.
Configuration
This repository uses Superset You can customize the agent settings here or contact your Bito workspace admin at evan@preset.io.
Documentation & Help
AI Code Review powered by
docs/src/pages/community.tsx
Outdated
| target="_blank" | ||
| rel="noreferrer" | ||
| > | ||
| <img className="icon" src={`/img/community/${image}`} alt="" /> |
There was a problem hiding this comment.
The img element here has an empty alt attribute, which reduces accessibility for screen readers. Consider providing a meaningful description, such as the link title.
Code suggestion
Check the AI-generated fix before applying
| <img className="icon" src={`/img/community/${image}`} alt="" /> | |
| <img className="icon" src={`/img/community/${image}`} alt={title} /> |
Code Review Run #4a28e7
Should Bito avoid suggestions like this for future reviews? (Manage Rules)
- Yes, avoid them
There was a problem hiding this comment.
Fixed in a67daeb — both alt="" occurrences now use alt={title} for proper screen reader support.
There was a problem hiding this comment.
Yes, replacing empty alt attributes with alt={title} improves accessibility by providing meaningful descriptions for screen readers, allowing them to announce the link's purpose effectively.
docs/src/pages/community.tsx
<img className="icon" src={`/img/community/${image}`} alt={title} />
docs/src/pages/community.tsx
Outdated
| target="_blank" | ||
| rel="noreferrer" | ||
| > | ||
| <img className="icon" src={`/img/community/${image}`} alt="" /> |
There was a problem hiding this comment.
Similar to the community links, this img element has an empty alt attribute, impacting accessibility. Using the title provides a clear description.
Code suggestion
Check the AI-generated fix before applying
| <img className="icon" src={`/img/community/${image}`} alt="" /> | |
| <img className="icon" src={`/img/community/${image}`} alt={title} /> |
Code Review Run #4a28e7
Should Bito avoid suggestions like this for future reviews? (Manage Rules)
- Yes, avoid them
There was a problem hiding this comment.
Fixed in a67daeb — same fix applied to both image elements.
There was a problem hiding this comment.
Thanks for the update. The fix in a67daeb addresses the accessibility issue by adding descriptive alt text to both image elements in the community page.
✅ Deploy Preview for superset-docs-preview ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
|
Bito Automatic Review Skipped – PR Already Merged |
2 participants
SUMMARY
Redesigns the Community page to use a responsive card grid layout instead of a vertical list, and updates the resource links:
Listcomponent with a CSS Grid of styled cards (3 columns on desktop, 2 on tablet, 1 on mobile). Each card has an icon, title, and description with hover effects./inTheWildpage instead of the GitHub markdown file, with a new globe icon./developer_portal/contributing/overviewinstead of the old GitHub repo.x-symbol.svg,linkedin-symbol.svg,bluesky-symbol.svg, andglobe-symbol.svgtodocs/static/img/community/.BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF
TESTING INSTRUCTIONS
/communitypageADDITIONAL INFORMATION
🤖 Generated with Claude Code