Solved issues #324 , #58 , #24 , #346 , #97 , #94 , #85 , #81 , #455 , #475 , #430 , #234 , #144 , #60 , #440 , #114 #507
Conversation
|
@Bhavik-Mittal-26 is attempting to deploy a commit to the AOSSIE Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThe changes introduce design refinements through added hover effects and transitions, update link handling to open external resources in new tabs with security attributes, refresh content descriptions, and add a new 2025 ideas page with static data generation. These are primarily presentational and content updates with minimal behavioral modifications. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (1 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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: 7
🧹 Nitpick comments (4)
src/pages/ideas/2025/index.jsx (1)
39-51: Avoid hard-codingcolor: 'black'(likely breaks dark mode contrast).
Right nowsx={{ color: 'black' }}can override the Tailwinddark:text-zinc-400.<Typography variant="body1" className="text-zinc-600 text-base dark:text-zinc-400 text-lg font-mono leading-6 text-center" sx={{ fontFamily: 'Nunito-Light', - color: 'black', mt: 2, overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box', WebkitBoxOrient: 'vertical', WebkitLineClamp: 4, }} >src/style/tailwind.css (1)
4-6: Consider respecting user motion preferences.The global
scroll-behavior: smoothis nice for UX, but may cause discomfort for users with vestibular disorders. Consider respecting theprefers-reduced-motionmedia query.Apply this diff to respect user preferences:
html { - scroll-behavior: smooth; + scroll-behavior: smooth; +} + +@media (prefers-reduced-motion: reduce) { + html { + scroll-behavior: auto; + } }src/components/Header.jsx (1)
234-234: Consider optimizing the logo image.The logo is marked as
unoptimized, which bypasses Next.js image optimization. Unless there's a specific reason (e.g., SVG or animated image), removing this flag would improve performance through automatic optimization and lazy loading.If the logo is a standard raster image (PNG/JPG), consider removing the
unoptimizedflag:- <Image src={Logo1} width={100} height={100} className='scale-125' alt='AOSSIE Logo' unoptimized /> + <Image src={Logo1} width={100} height={100} className='scale-125' alt='AOSSIE Logo' />Additionally, if you're using
scale-125, consider whether the source image could be sized appropriately to avoid CSS scaling.src/pages/index.jsx (1)
44-50: Consider enabling Next.js image optimization.Similar to the Header component, the logo is marked as
unoptimized. Unless Logo1 is an SVG or has specific requirements, enabling optimization would improve performance.Apply this diff if Logo1 is a raster image:
<Image src={Logo1} width={320} height={300} className="mx-auto scale-110 m-4" alt="AOSSIE Logo" - unoptimized />
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (14)
README.md(3 hunks)src/components/Banner.jsx(1 hunks)src/components/CardEffect.jsx(1 hunks)src/components/Footer.jsx(1 hunks)src/components/Header.jsx(3 hunks)src/components/TimelineElement.jsx(2 hunks)src/helper/projects.js(3 hunks)src/pages/about.jsx(1 hunks)src/pages/apply.jsx(1 hunks)src/pages/ideas/2025/index.jsx(1 hunks)src/pages/ideas/index.jsx(1 hunks)src/pages/index.jsx(3 hunks)src/pages/projects.jsx(3 hunks)src/style/tailwind.css(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (2)
src/pages/about.jsx (2)
src/pages/projects.jsx (1)
styles(135-142)src/components/ContainerPattern.jsx (1)
styles(3-8)
src/pages/ideas/2025/index.jsx (1)
src/pages/ideas/index.jsx (2)
Ideas(77-135)getStaticProps(137-143)
🪛 markdownlint-cli2 (0.18.1)
README.md
54-54: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
108-108: Bare URL used
(MD034, no-bare-urls)
109-109: Bare URL used
(MD034, no-bare-urls)
🔇 Additional comments (12)
src/pages/apply.jsx (1)
145-145: LGTM: Proper external link handling.The addition of
target="_blank"andrel="noopener noreferrer"appropriately opens the GSoC program page in a new tab while preventing security vulnerabilities (tabnabbing).src/components/TimelineElement.jsx (1)
4-15: LGTM: Clean external link detection logic.The implementation correctly identifies external links and conditionally applies security attributes only when needed. The approach is straightforward and maintainable.
src/pages/projects.jsx (1)
47-53: Card hover animation implemented well.The hover effect with
translateYand box shadow creates a nice lift effect. UsingwillChangehelps optimize the animation performance by hinting to the browser which properties will change.src/style/tailwind.css (1)
8-15: LGTM: Utility class for centered overlays.The
.center-screenutility provides a clean way to create full-viewport centered elements, useful for modals or hero sections.src/components/Banner.jsx (1)
21-21: LGTM: Smooth hover transitions enhance UX.The addition of transition utilities and hover effects provides nice visual feedback when users interact with the Apply button.
src/components/Header.jsx (1)
148-148: LGTM: Consistent hover styling.The enhanced hover effects with opacity and brightness adjustments align with the broader UI polish across the codebase and provide better visual feedback.
src/pages/index.jsx (1)
64-99: LGTM: Consistent external link handling across social icons.All social and contact links now properly open in new tabs with appropriate security attributes, and the hover effects are consistent and visually appealing.
src/components/CardEffect.jsx (1)
10-10: LGTM! Performance optimization applied.The
willChange: 'transform, box-shadow'inline style is a good performance hint that aligns with the transition properties and hover effects. The styling updates create a smoother, more polished interaction.src/components/Footer.jsx (1)
36-50: Excellent security improvement!Adding
target="_blank"withrel="noopener noreferrer"to all external links is a security best practice that prevents potential window.opener exploitation and referrer leakage. The styling updates are also consistent across all links.src/helper/projects.js (2)
16-78: Content refinements look good.The updated project descriptions are more concise, professionally worded, and consistently formatted. These editorial improvements enhance readability without changing the underlying data structure.
57-58: The OpenChat repository URL (https://github.com/AOSSIE-Org/OpenPeerChat-flutter) is publicly accessible and will not result in broken links in the UI.README.md (1)
41-76: No issues found. All statements in the README documentation are accurate and align with the repository configuration.
| ## Environment Variables | ||
|
|
||
| Create a `.env.local` in the project root to configure environment variables used at build time. The site references: | ||
|
|
||
| - `NEXT_PUBLIC_SITE_URL` — used for generating RSS links (`src/pages/_document.jsx`). Example: | ||
|
|
||
| ``` | ||
| NEXT_PUBLIC_SITE_URL=https://aossie.org | ||
| ``` | ||
|
|
||
| Restart the dev server after changing environment variables. |
There was a problem hiding this comment.
Fix fenced code block language to satisfy markdownlint (MD040).
Line 54’s fenced block should specify a language (e.g., env/bash/text) to avoid MD040.
-```
+```env
NEXT_PUBLIC_SITE_URL=https://aossie.org
<details>
<summary>🧰 Tools</summary>
<details>
<summary>🪛 markdownlint-cli2 (0.18.1)</summary>
54-54: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
</details>
</details>
<details>
<summary>🤖 Prompt for AI Agents</summary>
In README.md around lines 48 to 58, the fenced code block showing the
environment variable lacks a language tag (triggering markdownlint MD040);
update the block to include a language such as env (or bash/text) by adding the
language identifier after the opening backticks (for example: ```env) so the
fenced block becomes a valid language-specified code block.
</details>
<!-- fingerprinting:phantom:triton:falcon -->
<!-- This is an auto-generated comment by CodeRabbit -->
| # **License** | ||
|
|
||
| [**MIT License**](https://choosealicense.com/licenses/mit/) | ||
| This project is licensed under the **MIT License**, a permissive license that allows commercial and private use, modification, distribution, and sublicensing, provided that copyright and license notices are included in all copies. | ||
|
|
||
| - Full license text (OSI): https://opensource.org/licenses/MIT | ||
| - Choose a License reference: https://choosealicense.com/licenses/mit/ | ||
|
|
There was a problem hiding this comment.
Replace bare URLs with proper Markdown links (MD034).
Lines 108–109 should be formatted as links.
-- Full license text (OSI): https://opensource.org/licenses/MIT
-- Choose a License reference: https://choosealicense.com/licenses/mit/
+- Full license text (OSI): [https://opensource.org/licenses/MIT](https://opensource.org/licenses/MIT)
+- Choose a License reference: [https://choosealicense.com/licenses/mit/](https://choosealicense.com/licenses/mit/)📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| # **License** | |
| [**MIT License**](https://choosealicense.com/licenses/mit/) | |
| This project is licensed under the **MIT License**, a permissive license that allows commercial and private use, modification, distribution, and sublicensing, provided that copyright and license notices are included in all copies. | |
| - Full license text (OSI): https://opensource.org/licenses/MIT | |
| - Choose a License reference: https://choosealicense.com/licenses/mit/ | |
| # **License** | |
| This project is licensed under the **MIT License**, a permissive license that allows commercial and private use, modification, distribution, and sublicensing, provided that copyright and license notices are included in all copies. | |
| - Full license text (OSI): [https://opensource.org/licenses/MIT](https://opensource.org/licenses/MIT) | |
| - Choose a License reference: [https://choosealicense.com/licenses/mit/](https://choosealicense.com/licenses/mit/) |
🧰 Tools
🪛 markdownlint-cli2 (0.18.1)
108-108: Bare URL used
(MD034, no-bare-urls)
109-109: Bare URL used
(MD034, no-bare-urls)
🤖 Prompt for AI Agents
In README.md around lines 104 to 110, the two bare URLs on lines 108–109 should
be converted to proper Markdown links; replace
"https://opensource.org/licenses/MIT" with a link text such as "[Full license
text (OSI)](https://opensource.org/licenses/MIT)" and replace
"https://choosealicense.com/licenses/mit/" with a link text such as "[Choose a
License reference](https://choosealicense.com/licenses/mit/)" so both appear as
inline Markdown links rather than raw URLs.
| <section style={styles.section}> | ||
| <div className="text-center"> | ||
| <h2 className="font-mono text-4xl md:text-5xl font-extrabold tracking-tighter text-[#00843D] dark:text-yellow-400"> | ||
| AOSSIE 10 Years | ||
| </h2> | ||
| <p className="mt-2 font-mono text-lg text-zinc-600 dark:text-zinc-400"> | ||
| 2015025 · Decade of Innovation & Education | ||
| </p> | ||
| <div className="mt-6"> | ||
| <a | ||
| href="mailto:[email protected]?subject=AOSSIE%2010%20Years%20T-Shirt" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| className="inline-flex items-center rounded-lg bg-[#00843D] px-6 py-3 font-mono font-semibold text-white transition hover:scale-[1.02] hover:shadow-md dark:bg-yellow-400 dark:text-black" | ||
| > | ||
| Get the Anniversary T-Shirt | ||
| </a> | ||
| </div> | ||
| </div> | ||
| </section> |
There was a problem hiding this comment.
Verify the year format in the subtitle.
Line 199 shows "2015025" which appears to be a typo. Did you mean "2015-2025" to represent a decade?
If this is indeed a typo, apply this diff:
<p className="mt-2 font-mono text-lg text-zinc-600 dark:text-zinc-400">
- 2015025 · Decade of Innovation & Education
+ 2015-2025 · Decade of Innovation & Education
</p>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <section style={styles.section}> | |
| <div className="text-center"> | |
| <h2 className="font-mono text-4xl md:text-5xl font-extrabold tracking-tighter text-[#00843D] dark:text-yellow-400"> | |
| AOSSIE 10 Years | |
| </h2> | |
| <p className="mt-2 font-mono text-lg text-zinc-600 dark:text-zinc-400"> | |
| 2015025 · Decade of Innovation & Education | |
| </p> | |
| <div className="mt-6"> | |
| <a | |
| href="mailto:[email protected]?subject=AOSSIE%2010%20Years%20T-Shirt" | |
| target="_blank" | |
| rel="noopener noreferrer" | |
| className="inline-flex items-center rounded-lg bg-[#00843D] px-6 py-3 font-mono font-semibold text-white transition hover:scale-[1.02] hover:shadow-md dark:bg-yellow-400 dark:text-black" | |
| > | |
| Get the Anniversary T-Shirt | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <section style={styles.section}> | |
| <div className="text-center"> | |
| <h2 className="font-mono text-4xl md:text-5xl font-extrabold tracking-tighter text-[#00843D] dark:text-yellow-400"> | |
| AOSSIE 10 Years | |
| </h2> | |
| <p className="mt-2 font-mono text-lg text-zinc-600 dark:text-zinc-400"> | |
| 2015-2025 · Decade of Innovation & Education | |
| </p> | |
| <div className="mt-6"> | |
| <a | |
| href="mailto:[email protected]?subject=AOSSIE%2010%20Years%20T-Shirt" | |
| target="_blank" | |
| rel="noopener noreferrer" | |
| className="inline-flex items-center rounded-lg bg-[#00843D] px-6 py-3 font-mono font-semibold text-white transition hover:scale-[1.02] hover:shadow-md dark:bg-yellow-400 dark:text-black" | |
| > | |
| Get the Anniversary T-Shirt | |
| </a> | |
| </div> | |
| </div> | |
| </section> |
🤖 Prompt for AI Agents
In src/pages/about.jsx around lines 193 to 212, the subtitle contains a typo
"2015\u0002025" (rendered as 2015025); update the paragraph text to "2015-2025 ·
Decade of Innovation & Education" (replace the bad character with a hyphen and
correct spacing) so the decade range displays correctly.
| <CardActions sx={{ justifyContent: 'center' }}> | ||
| <Link href={`/ideas/2025/${article.slug}`} passHref> | ||
| <Button | ||
| sx={{ | ||
| color: '#3c982c', | ||
| textTransform: 'none', | ||
| }} | ||
| className="font-Nunito-Bold text-green-600 dark:text-yellow-400 text-lg leading-7 text-center" | ||
| > | ||
| Know more <ArrowForwardIcon sx={{ width: 20, height: 20 }} /> | ||
| </Button> | ||
| </Link> | ||
| </CardActions> |
There was a problem hiding this comment.
Don’t wrap an MUI <Button> inside Next <Link> (invalid/awkward semantics); compose them instead.
Prefer Button rendering as the link to avoid <a><button/></a>.
-import Link from 'next/link';
+import Link from 'next/link';
...
- <CardActions sx={{ justifyContent: 'center' }}>
- <Link href={`/ideas/2025/${article.slug}`} passHref>
- <Button
- sx={{
- color: '#3c982c',
- textTransform: 'none',
- }}
- className="font-Nunito-Bold text-green-600 dark:text-yellow-400 text-lg leading-7 text-center"
- >
- Know more <ArrowForwardIcon sx={{ width: 20, height: 20 }} />
- </Button>
- </Link>
- </CardActions>
+ <CardActions sx={{ justifyContent: 'center' }}>
+ <Button
+ component={Link}
+ href={`/ideas/2025/${article.slug}`}
+ sx={{ color: '#3c982c', textTransform: 'none' }}
+ className="font-Nunito-Bold text-green-600 dark:text-yellow-400 text-lg leading-7 text-center"
+ >
+ Know more <ArrowForwardIcon sx={{ width: 20, height: 20 }} />
+ </Button>
+ </CardActions>(If your MUI/Next setup needs it, you may also need LinkComponent={Link} at theme-level; worth confirming with your Next 14 + MUI 6 integration.)
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <CardActions sx={{ justifyContent: 'center' }}> | |
| <Link href={`/ideas/2025/${article.slug}`} passHref> | |
| <Button | |
| sx={{ | |
| color: '#3c982c', | |
| textTransform: 'none', | |
| }} | |
| className="font-Nunito-Bold text-green-600 dark:text-yellow-400 text-lg leading-7 text-center" | |
| > | |
| Know more <ArrowForwardIcon sx={{ width: 20, height: 20 }} /> | |
| </Button> | |
| </Link> | |
| </CardActions> | |
| <CardActions sx={{ justifyContent: 'center' }}> | |
| <Button | |
| component={Link} | |
| href={`/ideas/2025/${article.slug}`} | |
| sx={{ color: '#3c982c', textTransform: 'none' }} | |
| className="font-Nunito-Bold text-green-600 dark:text-yellow-400 text-lg leading-7 text-center" | |
| > | |
| Know more <ArrowForwardIcon sx={{ width: 20, height: 20 }} /> | |
| </Button> | |
| </CardActions> |
🤖 Prompt for AI Agents
In src/pages/ideas/2025/index.jsx around lines 57–69, the code nests an MUI
Button inside a Next Link which creates invalid/awkward HTML; instead render the
Button as the link by giving it the Link component and href (e.g., set
component={Link} and href={`/ideas/2025/${article.slug}`} on the Button and
remove the outer Link), or configure theme-level LinkComponent={Link} and simply
set href on the Button; remove passHref/inner anchor nesting and ensure you
import Next's Link for use as the Button component.
| </CardContent> | ||
|
|
||
| <CardActions sx={{ justifyContent: 'center' }}> | ||
| <Link href={`/ideas/2025/${article.slug}`} passHref> |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# 1) Ensure a dynamic route exists for idea details under /ideas/2025/*
# Expect: a file like src/pages/ideas/2025/[slug].jsx (or similar) exists.
fd -a --max-depth 6 --type f '\[slug\]\.(js|jsx|ts|tsx)$' src/pages/ideas || true
# 2) Inspect getAllIdeas() implementation to confirm whether it filters/scopes by year.
# Expect: either hardcoded 2025 directory, or a `year` filter, or data source only contains 2025.
fd -a --type f 'getAllIdeas\.(js|jsx|ts|tsx)$' src | xargs -I{} sh -c 'echo "----- {}"; sed -n "1,220p" "{}"'
# 3) Check idea metadata for a year field that could/should be used for filtering.
# Expect: presence of `year: 2025` (or equivalent) in idea frontmatter/data.
rg -n --hidden -S '(^|\b)(year|gsocYear)\s*[:=]\s*(2025|"2025")' src/pages/ideas src/helper || trueRepository: AOSSIE-Org/website
Length of output: 656
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Check for dynamic route file under /ideas/2025/
echo "=== Checking for dynamic route file ==="
find src/pages/ideas/2025 -type f \( -name '[slug]*' -o -name '*\[slug\]*' \) 2>/dev/null || echo "No [slug] file found"
ls -la src/pages/ideas/2025/ 2>/dev/null || echo "Directory doesn't exist or can't list"
# Check the structure of ideas directory
echo -e "\n=== Ideas directory structure ==="
fd -a --type f . src/pages/ideas/2025 | head -20
# Sample an idea file to check metadata structure
echo -e "\n=== Sample idea file metadata ==="
fd -a --type f '\.mdx$' src/pages/ideas/2025 | head -1 | xargs -I{} sh -c 'echo "File: {}"; head -40 "{}"'Repository: AOSSIE-Org/website
Length of output: 3825
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Check for dynamic routes at parent ideas level or with different patterns
echo "=== Dynamic route files in ideas directory ==="
find src/pages/ideas -type f \( -name '[*' -o -name '*].*' \) 2>/dev/null | sort
ls -la src/pages/ideas/ 2>/dev/null
# Inspect the index.jsx to understand how it handles routing
echo -e "\n=== index.jsx implementation (lines 50-70) ==="
sed -n '50,70p' src/pages/ideas/2025/index.jsx
# Check if there's a catch-all route at parent level
echo -e "\n=== All .jsx/.tsx files in src/pages/ideas ==="
find src/pages/ideas -type f -name '*.jsx' -o -name '*.tsx' | sortRepository: AOSSIE-Org/website
Length of output: 1349
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Check parent ideas/index.jsx
echo "=== src/pages/ideas/index.jsx ==="
cat src/pages/ideas/index.jsx
# Search for any dynamic routes in the entire pages directory
echo -e "\n=== All dynamic/catch-all routes in pages directory ==="
find src/pages -type f \( -name '\[*\]*.jsx' -o -name '\[*\]*.tsx' -o -name '*.jsx' -o -name '*.tsx' \) | grep -E '\[|\.\.\.' | sortRepository: AOSSIE-Org/website
Length of output: 5348
Add missing dynamic route handler for idea detail pages.
The links generated on line 58 (/ideas/2025/${article.slug}) will return 404 errors because no dynamic route file exists at src/pages/ideas/2025/[slug].jsx to handle them. Create this file to render individual idea pages, or update the routing approach.
Note: getAllIdeas() is correctly scoped to 2025 only, so data filtering is safe.
Also applies to: 115-120
🤖 Prompt for AI Agents
In src/pages/ideas/2025/index.jsx around line 58 (and similarly lines 115-120),
links point to /ideas/2025/${article.slug} but there is no dynamic route to
handle them — create src/pages/ideas/2025/[slug].jsx to render individual idea
pages; implement Next.js data methods (getStaticPaths to return all 2025 slugs
from getAllIdeas() and getStaticProps to fetch the article by slug), render the
article content and handle notFound/fallback appropriately (e.g., return
notFound when slug missing) so the links no longer 404.
| <Link | ||
| className="group order-2 mx-auto items-center overflow-hidden rounded-lg bg-zinc-800 px-8 py-3 text-white focus:outline-none dark:bg-white dark:text-black" | ||
| href="/ideas/2024" | ||
| className="group order-2 mx-auto items-center overflow-hidden rounded-lg bg-zinc-800 px-8 py-3 text-white focus:outline-none dark:bg-white dark:text-black transition-all duration-200 hover:bg-[#00843D] hover:shadow-lg hover:scale-[1.02] dark:hover:bg-yellow-400" | ||
| href="/ideas/2025" | ||
| > | ||
| <span className="text-center font-mono font-semibold"> | ||
| View 2024 Idea List | ||
| View 2025 Idea List | ||
| </span> | ||
| </Link> |
There was a problem hiding this comment.
Add proper flex + focus-visible styles (current items-center is a no-op and focus is invisible).
items-center won’t apply unless the Link is flex/inline-flex, and focus:outline-none should be paired with a visible focus style to avoid keyboard accessibility regressions.
- <Link
- className="group order-2 mx-auto items-center overflow-hidden rounded-lg bg-zinc-800 px-8 py-3 text-white focus:outline-none dark:bg-white dark:text-black transition-all duration-200 hover:bg-[#00843D] hover:shadow-lg hover:scale-[1.02] dark:hover:bg-yellow-400"
+ <Link
+ className="group order-2 mx-auto inline-flex items-center overflow-hidden rounded-lg bg-zinc-800 px-8 py-3 text-white dark:bg-white dark:text-black transition-all duration-200 hover:bg-[#00843D] hover:shadow-lg hover:scale-[1.02] dark:hover:bg-yellow-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[#00843D] dark:focus-visible:ring-yellow-400"
href="/ideas/2025"
>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <Link | |
| className="group order-2 mx-auto items-center overflow-hidden rounded-lg bg-zinc-800 px-8 py-3 text-white focus:outline-none dark:bg-white dark:text-black" | |
| href="/ideas/2024" | |
| className="group order-2 mx-auto items-center overflow-hidden rounded-lg bg-zinc-800 px-8 py-3 text-white focus:outline-none dark:bg-white dark:text-black transition-all duration-200 hover:bg-[#00843D] hover:shadow-lg hover:scale-[1.02] dark:hover:bg-yellow-400" | |
| href="/ideas/2025" | |
| > | |
| <span className="text-center font-mono font-semibold"> | |
| View 2024 Idea List | |
| View 2025 Idea List | |
| </span> | |
| </Link> | |
| <Link | |
| className="group order-2 mx-auto inline-flex items-center overflow-hidden rounded-lg bg-zinc-800 px-8 py-3 text-white dark:bg-white dark:text-black transition-all duration-200 hover:bg-[#00843D] hover:shadow-lg hover:scale-[1.02] dark:hover:bg-yellow-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[#00843D] dark:focus-visible:ring-yellow-400" | |
| href="/ideas/2025" | |
| > | |
| <span className="text-center font-mono font-semibold"> | |
| View 2025 Idea List | |
| </span> | |
| </Link> |
🤖 Prompt for AI Agents
In src/pages/ideas/index.jsx around lines 122-129, the Link uses items-center
(no-op without flex) and removes the visible focus outline which harms keyboard
accessibility; make the Link an inline-flex container (e.g. add inline-flex
items-center justify-center) so centering works, and replace the bare
focus:outline-none with an accessible focus-visible style (e.g. keep
focus:outline-none but add focus-visible:ring-2 focus-visible:ring-offset-2
focus-visible:ring-[color]/use your theme color) so keyboard focus is clearly
visible.
| <Link href={project.link.href} legacyBehavior> | ||
| <a | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| className="group relative z-10 mt-6 inline-flex items-center px-2 py-1 text-md font-semibold font-mono text-zinc-600 transition hover:text-[#00843D] hover:opacity-90 dark:hover:text-yellow-300 dark:hover:brightness-110 dark:text-zinc-200" | ||
| > | ||
| <LinkIcon className="h-6 w-6 flex-none scale-110" /> | ||
| <span className="ml-2">{project.link.label}</span> | ||
| </a> | ||
| </Link> |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
rg -n -A2 -B2 "target=\"_blank\"" --type=jsx --type=js --type=tsx --type=tsRepository: AOSSIE-Org/website
Length of output: 89
🌐 Web query:
Next.js Link component external links legacyBehavior best practices
💡 Result:
Quick summary + best practices
- Don’t use next/link for external URLs — use a plain and include target/rel when opening new tabs (rel="noopener noreferrer"). [1][3]
- Stop using legacyBehavior — Next.js Link now renders an automatically. legacyBehavior is deprecated and scheduled for removal (not present in Next.js v16+). Migrate by removing inner and moving attributes (className, onClick, target, etc.) onto Link (or onto your custom component that forwards them). [2][1]
- For custom components or styled wrappers:
- Update components to accept and forward href, className, onClick, target, and ref (or use polymorphic "as/component" patterns) so you can use without legacyBehavior. See guides on using polymorphism/forwarding for migration. [4][1]
- passHref: only needed for legacy patterns where a child element expects href; avoid if you follow the new pattern (it’s also being removed in v16). [2]
- When you must open internal routes in a new tab (rare), include target="_blank" and rel="noopener noreferrer" on the anchor. For normal client navigation, use Link without target. [1][3]
Sources
- Next.js Link docs & legacyBehavior deprecation. [1]
- Next.js errors / passHref / v16 removal notes. [2]
- Practical external-link guidance (use native , add rel). [3]
- Migration pattern / polymorphism approach for custom components. [4]
References
[1] Next.js Link docs (legacyBehavior note).
[2] Next.js docs: Link passHref / removal in v16.
[3] Practical guide: avoid next/link for external links.
[4] Article: using polymorphism to replace legacyBehavior.
🏁 Script executed:
rg -n -A2 -B2 "target=\"_blank\"" --type js --type tsRepository: AOSSIE-Org/website
Length of output: 6803
🏁 Script executed:
rg -n -A2 -B2 "legacyBehavior" --type js --type tsRepository: AOSSIE-Org/website
Length of output: 1006
🏁 Script executed:
find . -name "*.jsx" -o -name "*.tsx" | head -20Repository: AOSSIE-Org/website
Length of output: 655
Replace Link with a plain <a> tag for external links.
Next.js Link should not be used for external URLs—use a plain anchor tag instead. Additionally, legacyBehavior is deprecated and scheduled for removal in Next.js v16+. Replace with:
<a
href={project.link.href}
target="_blank"
rel="noopener noreferrer"
className="group relative z-10 mt-6 inline-flex items-center px-2 py-1 text-md font-semibold font-mono text-zinc-600 transition hover:text-[#00843D] hover:opacity-90 dark:hover:text-yellow-300 dark:hover:brightness-110 dark:text-zinc-200"
>
<LinkIcon className="h-6 w-6 flex-none scale-110" />
<span className="ml-2">{project.link.label}</span>
</a>🤖 Prompt for AI Agents
In src/pages/projects.jsx around lines 94 to 103, the code wraps an external URL
with Next.js Link (using legacyBehavior) which is inappropriate for external
links and legacyBehavior is deprecated; replace the Link wrapper with a plain
<a> element that uses href={project.link.href}, preserves target="_blank" and
rel="noopener noreferrer", and keeps the existing className, inner LinkIcon and
span so the behavior, styling and accessibility remain identical but without
Next.js Link.
1 participant
Summary by CodeRabbit
Documentation
New Features
Style
Bug Fixes
✏️ Tip: You can customize this high-level summary in your review settings.