codeant-ai-for-open-source[bot] commented on code in PR #37536:
URL: https://github.com/apache/superset/pull/37536#discussion_r2739132568
##########
docs/src/pages/community.tsx:
##########
@@ -18,117 +18,173 @@
*/
import { useState } from 'react';
import styled from '@emotion/styled';
-import { List } from 'antd';
import Layout from '@theme/Layout';
import { mq } from '../utils';
import SectionHeader from '../components/SectionHeader';
import BlurredSection from '../components/BlurredSection';
-const communityLinks = [
+interface CommunityLink {
+ url: string;
+ title: string;
+ description: string;
+ image: string;
+}
+
+const communityLinks: CommunityLink[] = [
{
url: 'http://bit.ly/join-superset-slack',
title: 'Slack',
description: 'Interact with other Superset users and community members.',
image: 'slack-symbol.jpg',
- ariaLabel:
- 'Interact with other Superset users and community members on Slack',
},
{
url: 'https://github.com/apache/superset',
title: 'GitHub',
description:
'Create tickets to report issues, report bugs, and suggest new
features.',
image: 'github-symbol.jpg',
- ariaLabel:
- 'Create tickets to report issues, report bugs, and suggest new features
on Superset GitHub repo',
},
{
url: 'https://lists.apache.org/[email protected]',
title: 'dev@ Mailing List',
description:
- 'Participate in conversations with committers and contributors.',
+ 'Participate in conversations with committers and contributors.
Subscribe by emailing [email protected].',
image: 'email-symbol.png',
- ariaLabel:
- 'Participate in conversations with committers and contributors on
Superset mailing list',
- },
- {
- url: 'https://stackoverflow.com/questions/tagged/apache-superset',
- title: 'Stack Overflow',
- description: 'Our growing knowledge base.',
- image: 'stackoverflow-symbol.jpg',
- ariaLabel: 'See Superset issues on Stack Overflow',
- },
- {
- url: 'https://www.meetup.com/Global-Apache-Superset-Community-Meetup/',
- title: 'Superset Meetup Group',
- description:
- 'Join our monthly virtual meetups and register for any upcoming events.',
- image: 'coffee-symbol.png',
- ariaLabel:
- 'Join our monthly virtual meetups and register for any upcoming events
on Meetup',
},
{
- url:
'https://github.com/apache/superset/blob/master/RESOURCES/INTHEWILD.md',
+ url: 'https://superset.apache.org/inTheWild',
title: 'Organizations',
description:
'A list of some of the organizations using Superset in production.',
- image: 'note-symbol.png',
- ariaLabel: 'See a list of the organizations using Superset in production',
+ image: 'globe-symbol.svg',
},
{
- url: 'https://github.com/apache-superset/awesome-apache-superset',
+ url: 'https://superset.apache.org/developer_portal/contributing/overview',
title: 'Contributors Guide',
description:
'Interested in contributing? Learn how to contribute and best
practices.',
image: 'writing-symbol.png',
- ariaLabel: 'Learn how to contribute and best practices on Superset GitHub',
},
];
-const StyledJoinCommunity = styled('section')`
- background-color: var(--ifm-background-color);
- border-bottom: 1px solid var(--ifm-border-color);
- .list {
- max-width: 540px;
- margin: 0 auto;
- padding: 40px 20px 20px 35px;
+interface SocialLink {
+ url: string;
+ title: string;
+ image: string;
+}
+
+const socialLinks: SocialLink[] = [
+ {
+ url: 'https://x.com/ApacheSuperset',
+ title: 'X (Twitter)',
+ image: 'x-symbol.svg',
+ },
+ {
+ url: 'https://www.linkedin.com/company/apache-superset/',
+ title: 'LinkedIn',
+ image: 'linkedin-symbol.svg',
+ },
+ {
+ url: 'https://bsky.app/profile/apachesuperset.bsky.social',
+ title: 'Bluesky',
+ image: 'bluesky-symbol.svg',
+ },
+];
+
+const StyledCardGrid = styled('div')`
+ display: grid;
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ gap: 16px;
+ max-width: 1000px;
+ margin: 0 auto;
+ padding: 30px 20px;
+ ${mq[2]} {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
}
- .item {
- padding: 0;
- border: 0;
+ ${mq[1]} {
Review 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]
<details>
<summary><b>Severity Level:</b> Major ⚠️</summary>
```mdx
- ❌ 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.
```
</details>
```suggestion
${mq[1]} {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
${mq[0]} {
```
<details>
<summary><b>Steps of Reproduction ✅ </b></summary>
```mdx
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).
```
</details>
<details>
<summary><b>Prompt for AI Agent 🤖 </b></summary>
```mdx
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.
```
</details>
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
