Fix/project card routing#730
Conversation
📝 WalkthroughWalkthroughProject cards on the home page are made clickable by adding an ChangesProject Card Clickable Link
Minor Code Fixes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~5 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ 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.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/app/page.jsx (1)
213-220: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick winFilter invalid slugs before constructing project card links.
Line 219 assumes every
project.slugis valid, but the project route itself filters out invalid slugs (p?.slug && p.slug !== "undefined"). Aligning this list generation prevents cards linking to/projects/undefinedor missing routes.Proposed fix
- const others = projects.filter(p => !featuredNames.includes(p.name)); + const others = projects.filter( + (p) => !featuredNames.includes(p.name) && p?.slug && p.slug !== 'undefined' + );🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/app/page.jsx` around lines 213 - 220, The randomProjects array is being mapped without validating that each project has a valid slug, which can result in CardEffect components linking to undefined routes. Add a filter condition to the randomProjects array before the map call to exclude projects where the slug is missing or equals the string "undefined", using the same validation pattern as the project route (checking p?.slug && p.slug !== "undefined"). This ensures only valid project cards with valid slug links are rendered in the CardEffect component.
🧹 Nitpick comments (1)
src/components/home/CardEffect.jsx (1)
6-13: 🚀 Performance & Scalability | 🔵 TrivialUse
next/linkfor internal project routes instead of a raw anchor.At line 13,
motion.awithhref={/projects/${project.slug}}works, but internal app navigation should use Next routing to preserve client-side transitions and prefetch behavior. The codebase already uses Next'sLinkcomponent elsewhere for similar internal navigation.Wrapping the motion animations in an inner div and moving them outside the
<a>element maintains the animation behavior while enabling proper Next.js routing:Proposed refactor
+import Link from 'next/link' import { motion } from 'framer-motion' export function CardEffect({ heading, content, logo, href }){ return ( - <motion.a href={href} + <Link href={href}> + <motion.div initial={{ opacity: 0, rotateY: -90 }} whileInView={{ opacity: 1, rotateY: 0 }} viewport={{ once: true }} transition={{ duration: 0.8 }} className="group relative block h-[22rem] w-full cursor-pointer [perspective:1000px]" > <div className="relative h-full w-full transition-all duration-500 [transform-style:preserve-3d] group-hover:[transform:rotateY(180deg)]"> {/* content */} </div> - </motion.a> + </motion.div> + </Link> ) }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/home/CardEffect.jsx` around lines 6 - 13, In the CardEffect component, replace the raw motion.a element with Next.js Link component for internal navigation. Import Link from next/link, then restructure the component so that the Link wraps around the motion animations instead of using motion.a directly with the href attribute. This ensures proper client-side routing and prefetch behavior while maintaining the animation effects by keeping the motion elements as children inside the Link component.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Outside diff comments:
In `@src/app/page.jsx`:
- Around line 213-220: The randomProjects array is being mapped without
validating that each project has a valid slug, which can result in CardEffect
components linking to undefined routes. Add a filter condition to the
randomProjects array before the map call to exclude projects where the slug is
missing or equals the string "undefined", using the same validation pattern as
the project route (checking p?.slug && p.slug !== "undefined"). This ensures
only valid project cards with valid slug links are rendered in the CardEffect
component.
---
Nitpick comments:
In `@src/components/home/CardEffect.jsx`:
- Around line 6-13: In the CardEffect component, replace the raw motion.a
element with Next.js Link component for internal navigation. Import Link from
next/link, then restructure the component so that the Link wraps around the
motion animations instead of using motion.a directly with the href attribute.
This ensures proper client-side routing and prefetch behavior while maintaining
the animation effects by keeping the motion elements as children inside the Link
component.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: e7884420-64ac-4921-b97a-ef1302c1c673
📒 Files selected for processing (4)
jsconfig.jsonsrc/app/api/stats/route.jssrc/app/page.jsxsrc/components/home/CardEffect.jsx
1 participant
Addressed Issues:
Fixes #726
Screenshots/Recordings:
Before:
Clicking on project cards on the homepage did not navigate to the project detail page.
After:
Project cards now correctly link to their respective project pages using /projects/[slug].
Example: /projects/pictopy, /projects/djed, etc.
Navigation works correctly in both development and production builds.
Additional Notes:
Added href navigation to the CardEffect component.
Wired homepage project cards to dynamic project routes using slug.
Verified routing behavior locally using npm run dev and production build using npm run build && npm start.
No breaking changes introduced.
AI Usage Disclosure:
☑ This PR contains AI-generated code. I have read the AI Usage Policy and this PR complies with it. I have tested the code locally and I am responsible for it.
I have used the following AI models and tools:
ChatGPT (OpenAI GPT-5.3-mini) for debugging and implementation guidance
Checklist:
☑ My PR addresses a single issue, fixes a single bug or makes a single improvement.
☑ My code follows the project's code style and conventions
☑ My changes generate no new warnings or errors
☑ I have tested locally (npm run dev and npm run build)
☑ I have joined the Discord server and will share the PR link
☑ I have read the Contribution Guidelines
☑ I have filled this PR template completely and carefully
Summary by CodeRabbit