Fix: Make project links clickable in Projects section #524
Conversation
|
@ssid18 is attempting to deploy a commit to the AOSSIE Team on Vercel. A member of the Team first needs to authorize it. |
📝 WalkthroughWalkthroughThe CardActions component in projects.jsx now conditionally renders links based on URL validity. Valid links display as clickable anchors with new tab behavior and accessibility attributes, while invalid or missing links render as disabled text with consistent styling. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
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: 1
🧹 Nitpick comments (1)
src/pages/projects.jsx (1)
98-98: Consider adding cursor styling for non-interactive links.The disabled state paragraph could benefit from explicit cursor styling (
cursor-defaultorcursor-not-allowed) to provide a clearer visual indication that the element is non-interactive, beyond just the muted color.🔎 Suggested enhancement
- <p className="relative z-10 mt-6 flex items-center text-md font-semibold font-mono text-zinc-400 dark:text-zinc-500"> + <p className="relative z-10 mt-6 flex items-center text-md font-semibold font-mono text-zinc-400 dark:text-zinc-500 cursor-default"> <LinkIcon className="h-6 w-6 flex-none scale-110" /> <span className="ml-2">{project.link?.label}</span> </p>
| {project.link?.href && project.link.href !== '#' ? ( | ||
| <a | ||
| href={project.link.href} | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| className="relative z-10 mt-6 flex items-center text-md font-semibold font-mono text-zinc-600 transition hover:text-[#00843D] dark:hover:text-yellow-400 dark:text-zinc-200" | ||
| aria-label={`Open ${project.name} project`} | ||
| > | ||
| <LinkIcon className="h-6 w-6 flex-none scale-110" /> | ||
| <span className="ml-2">{project.link.label}</span> | ||
| </a> | ||
| ) : ( | ||
| <p className="relative z-10 mt-6 flex items-center text-md font-semibold font-mono text-zinc-400 dark:text-zinc-500"> | ||
| <LinkIcon className="h-6 w-6 flex-none scale-110" /> | ||
| <span className="ml-2">{project.link.label}</span> | ||
| </p> | ||
| )} |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# First, let's read the projects.jsx file to confirm the code
cat -n src/pages/projects.jsx | head -120Repository: AOSSIE-Org/website
Length of output: 6236
🏁 Script executed:
# Search for where projects data is defined or imported
rg "projects\s*=" src/ -A 3 -B 1 --type js --type jsxRepository: AOSSIE-Org/website
Length of output: 89
🏁 Script executed:
# Look for the projects data file/constant
fd "project" -e js -e jsx -e ts -e tsx | grep -v node_modulesRepository: AOSSIE-Org/website
Length of output: 107
🏁 Script executed:
cat src/helper/projects.jsRepository: AOSSIE-Org/website
Length of output: 3554
Apply optional chaining consistently for defensive programming.
The condition on line 86 uses optional chaining (project.link?.href), but lines 95 and 100 access project.link.label without it. While all current projects include a link object, this inconsistency violates defensive programming practices. If the data structure changes or a project lacks a link object, the else branch will throw a runtime error. Apply optional chaining on lines 95 and 100 to match the pattern established on line 86.
Suggested fix
<LinkIcon className="h-6 w-6 flex-none scale-110" />
- <span className="ml-2">{project.link.label}</span>
+ <span className="ml-2">{project.link?.label}</span>Apply the same change on line 100 in the else branch.
📝 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.
| {project.link?.href && project.link.href !== '#' ? ( | |
| <a | |
| href={project.link.href} | |
| target="_blank" | |
| rel="noopener noreferrer" | |
| className="relative z-10 mt-6 flex items-center text-md font-semibold font-mono text-zinc-600 transition hover:text-[#00843D] dark:hover:text-yellow-400 dark:text-zinc-200" | |
| aria-label={`Open ${project.name} project`} | |
| > | |
| <LinkIcon className="h-6 w-6 flex-none scale-110" /> | |
| <span className="ml-2">{project.link.label}</span> | |
| </a> | |
| ) : ( | |
| <p className="relative z-10 mt-6 flex items-center text-md font-semibold font-mono text-zinc-400 dark:text-zinc-500"> | |
| <LinkIcon className="h-6 w-6 flex-none scale-110" /> | |
| <span className="ml-2">{project.link.label}</span> | |
| </p> | |
| )} | |
| {project.link?.href && project.link.href !== '#' ? ( | |
| <a | |
| href={project.link.href} | |
| target="_blank" | |
| rel="noopener noreferrer" | |
| className="relative z-10 mt-6 flex items-center text-md font-semibold font-mono text-zinc-600 transition hover:text-[#00843D] dark:hover:text-yellow-400 dark:text-zinc-200" | |
| aria-label={`Open ${project.name} project`} | |
| > | |
| <LinkIcon className="h-6 w-6 flex-none scale-110" /> | |
| <span className="ml-2">{project.link?.label}</span> | |
| </a> | |
| ) : ( | |
| <p className="relative z-10 mt-6 flex items-center text-md font-semibold font-mono text-zinc-400 dark:text-zinc-500"> | |
| <LinkIcon className="h-6 w-6 flex-none scale-110" /> | |
| <span className="ml-2">{project.link?.label}</span> | |
| </p> | |
| )} |
🤖 Prompt for AI Agents
In src/pages/projects.jsx around lines 86 to 102, the code uses optional
chaining for project.link.href but accesses project.link.label directly on lines
95 and 100, which can throw if link is undefined; update those two accesses to
use optional chaining (project.link?.label) so both branches defensively
reference the label (optionally add a fallback like ?? '' if you prefer an
explicit empty string).
1 participant
Summary
This PR makes the project link label in the Projects section clickable when a valid
link.hrefis provided in the project data.Changes
<a>) when a validhrefis present.href === '#') non-interactive.Motivation
The Projects cards currently display a link icon and label that appears interactive but does not navigate anywhere. This change improves usability by aligning visual affordances with actual behavior.
This keeps the UI behavior consistent with user expectations while leveraging existing data without introducing additional logic or dependencies.
Scope
Testing
Verified locally by running the app and confirming that project links with valid URLs navigate correctly, while placeholder links remain non-interactive.
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.