feat(site): DR-7731 add community page#7732
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
WalkthroughAdds a new Next.js Community page at Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes 🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. 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 |
|
The latest updates on your projects. Learn more about Argos notifications ↗︎
|
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
apps/site/src/app/community/page.tsx (1)
251-256: Remove the redundantunoptimizedprop from this Image component and configure remotePatterns for meetupstatic.com in your Next config.The global
images: { unoptimized: true }setting inapps/site/next.config.mjs(line 220) already disables optimization for all images app-wide, making the component-level prop redundant. The real performance gain comes from removing that global flag and configuringremotePatternsfor external domains likemeetupstatic.com(which is already allowed in your CSP on line 77). This lets Next.js optimize remote images while still allowing them to load.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/site/src/app/community/page.tsx` around lines 251 - 256, Remove the redundant unoptimized prop from the Image usage (Image component rendering meetup.image with alt={meetup.title}) in page.tsx and instead update your Next configuration: remove or set images.unoptimized to false in the global config (apps/site/next.config.mjs) and add a remotePatterns entry allowing meetupstatic.com (hostname pattern for meetupstatic.com) so Next.js can optimize those external images; then rebuild to validate optimized remote image delivery.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/site/src/app/community/page.tsx`:
- Around line 126-150: The Card is wrapped in an anchor while it contains an
interactive Button, causing nested interactive elements; change the structure so
only one interactive element remains: remove the outer anchor around the Card
(replace it with a non-interactive container/div) and move the link behavior to
the inner Button (make the Button render as an anchor or give it the
href/target/rel attributes), or alternatively keep the outer anchor and convert
the inner Button to a non-interactive element; update Button/Card usage
accordingly and preserve target="_blank" and rel="noopener noreferrer" for the
external Discord link to maintain accessibility and security.
- Line 103: The Tailwind classes z-1, inset-x-30, and before:-z-1 are
non-standard and will not compile; replace them with arbitrary-value utilities
using bracket syntax (e.g., z-[1], inset-x-[30px], and before:-z-[1]) wherever
they appear in the className string or pseudo-class sequences (such as the
element with className containing "relative z-1 ..." and any sibling/::before
usages). Ensure you update the className on the element in page.tsx (and any
corresponding ::before/after utility strings) to use z-[1], inset-x-[30px], and
before:-z-[1] so Tailwind recognizes the values.
---
Nitpick comments:
In `@apps/site/src/app/community/page.tsx`:
- Around line 251-256: Remove the redundant unoptimized prop from the Image
usage (Image component rendering meetup.image with alt={meetup.title}) in
page.tsx and instead update your Next configuration: remove or set
images.unoptimized to false in the global config (apps/site/next.config.mjs) and
add a remotePatterns entry allowing meetupstatic.com (hostname pattern for
meetupstatic.com) so Next.js can optimize those external images; then rebuild to
validate optimized remote image delivery.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 07a5aab9-b4d8-4953-8629-c57207754b1f
📒 Files selected for processing (1)
apps/site/src/app/community/page.tsx
Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>
Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (2)
apps/site/src/app/community/page.tsx (2)
101-101:⚠️ Potential issue | 🟡 MinorReplace non-standard Tailwind utilities with arbitrary values.
Line 101 (
z-1) and Line 334 (before:inset-x-30,before:-z-1) are non-default Tailwind utilities and won’t apply unless extended in config.Suggested fix
- <div className="relative z-1 mx-auto flex w-full max-w-[720px] flex-col items-center gap-6 text-center"> + <div className="relative z-[1] mx-auto flex w-full max-w-[720px] flex-col items-center gap-6 text-center"> - <div className="bg-[url('/illustrations/homepage/footer_grid.svg')] bg-contain bg-center before:inset-x-30 before:inset-y-[45%] before:absolute relative before:content-[''] before:pointer-events-none before:-z-1 rounded-full before:bg-indigo-400 before:blur-[100px]"> + <div className="relative rounded-full bg-[url('/illustrations/homepage/footer_grid.svg')] bg-contain bg-center before:absolute before:inset-x-[7.5rem] before:inset-y-[45%] before:pointer-events-none before:-z-[1] before:content-[''] before:bg-indigo-400 before:blur-[100px]">Also applies to: 334-334
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/site/src/app/community/page.tsx` at line 101, The Tailwind classes used in the component (e.g., the div with className containing "z-1" and the element using "before:inset-x-30" and "before:-z-1") rely on non-standard utilities; replace them with Tailwind arbitrary-value syntax so they apply without config changes — for example use "z-[1]" instead of "z-1", "before:inset-x-[30px]" (or a responsive/rem value) instead of "before:inset-x-30", and "before:-z-[1]" instead of "before:-z-1" in the relevant JSX className strings (locate occurrences in page.tsx around the div with className containing "z-1" and the element using before:...).
124-148:⚠️ Potential issue | 🟠 MajorRemove nested interactive elements in the featured Discord card.
Line 124 creates an anchor wrapper, while Line 143 renders a
Buttoninside it. This interactive nesting is invalid and can break keyboard/screen-reader behavior.Suggested fix
- <a - href="https://pris.ly/discord" - target="_blank" - rel="noopener noreferrer" - className="group mb-4 block" - > - <Card className="flex flex-col items-center text-center gap-4 p-6 transition-colors bg-[linear-gradient(180deg,var(--color-background-default)_0%,var(--color-background-orm)_262.5%)] hover:border-stroke-neutral-strong sm:flex-row sm:items-center sm:text-left sm:justify-between"> + <Card className="group mb-4 flex flex-col items-center text-center gap-4 p-6 transition-colors bg-[linear-gradient(180deg,var(--color-background-default)_0%,var(--color-background-orm)_262.5%)] hover:border-stroke-neutral-strong sm:flex-row sm:items-center sm:text-left sm:justify-between"> ... - <Button variant="orm" size="lg" className="shrink-0 w-fit"> + <Button + variant="orm" + size="lg" + href="https://pris.ly/discord" + target="_blank" + rel="noopener noreferrer" + className="shrink-0 w-fit" + > Join Discord <i className="fa-regular fa-arrow-up-right ml-2" aria-hidden /> </Button> - </Card> - </a> + </Card>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/site/src/app/community/page.tsx` around lines 124 - 148, The featured Discord card currently nests an interactive Button inside an anchor (<a> wrapper) which creates invalid nested interactive elements; fix by making the outer wrapper non-interactive (e.g., replace the <a> with a <div> or <Card> clickable prop removed) and convert the inner Button into the actual link (or alternatively remove the inner Button and make the Card itself the anchor) so only one interactive element remains; update the JSX around the anchor wrapper, the Button component usage, and the Card wrapper (look for the <a ...> that wraps <Card> and the Button variant="orm" size="lg") to ensure a single accessible link/interactive element and preserve the same styling and target/rel behavior.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/site/src/app/community/page.tsx`:
- Around line 249-254: Remove the redundant unoptimized prop from the Image
components that render meetup images (the JSX using <Image src={meetup.image}
alt={meetup.title} fill ... />); since image optimization is already disabled
globally via next.config, simply delete the unoptimized attribute from those
Image usages (e.g., the Image instances showing meetup.image/meetup.title) in
both places where meetup cards are rendered.
---
Duplicate comments:
In `@apps/site/src/app/community/page.tsx`:
- Line 101: The Tailwind classes used in the component (e.g., the div with
className containing "z-1" and the element using "before:inset-x-30" and
"before:-z-1") rely on non-standard utilities; replace them with Tailwind
arbitrary-value syntax so they apply without config changes — for example use
"z-[1]" instead of "z-1", "before:inset-x-[30px]" (or a responsive/rem value)
instead of "before:inset-x-30", and "before:-z-[1]" instead of "before:-z-1" in
the relevant JSX className strings (locate occurrences in page.tsx around the
div with className containing "z-1" and the element using before:...).
- Around line 124-148: The featured Discord card currently nests an interactive
Button inside an anchor (<a> wrapper) which creates invalid nested interactive
elements; fix by making the outer wrapper non-interactive (e.g., replace the <a>
with a <div> or <Card> clickable prop removed) and convert the inner Button into
the actual link (or alternatively remove the inner Button and make the Card
itself the anchor) so only one interactive element remains; update the JSX
around the anchor wrapper, the Button component usage, and the Card wrapper
(look for the <a ...> that wraps <Card> and the Button variant="orm" size="lg")
to ensure a single accessible link/interactive element and preserve the same
styling and target/rel behavior.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 9163f6de-a994-4b87-b36d-bd4e6af13c57
📒 Files selected for processing (1)
apps/site/src/app/community/page.tsx
Summary
/communitypage for the website rebuildLinear
https://linear.app/prisma-company/issue/DR-7731/community
Summary by CodeRabbit