Fix project page #537
Fix project page #537
Conversation
src/pages/projects.jsx to make the link display inline with the icon and text aligned correctly.
Signed-off-by: Mangesh Pagare <mangeshpagare8668@gmail.com>
|
@PAGARE-MANGESH is attempting to deploy a commit to the AOSSIE Team on Vercel. A member of the Team first needs to authorize it. |
📝 WalkthroughWalkthroughThe PR updates FontAwesome dependency versions and replaces the Twitter brand icon with the X icon, updates Discord invitation links across multiple files, and adds hover interactions and a clickable link to project cards — no backend or API behavior changes. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
🚥 Pre-merge checks | ✅ 1 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (1 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 |
![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
🤖 Fix all issues with AI agents
In `@package.json`:
- Around line 17-21: The package version mismatch:
`@fortawesome/free-brands-svg-icons` is v7 while
`@fortawesome/fontawesome-svg-core`, `@fortawesome/free-regular-svg-icons`, and
`@fortawesome/free-solid-svg-icons` are v6, causing runtime import errors; fix by
aligning versions—either upgrade `@fortawesome/fontawesome-svg-core`,
`@fortawesome/free-regular-svg-icons`, and `@fortawesome/free-solid-svg-icons` to
the matching v7 release (e.g. ^7.1.0) or downgrade
`@fortawesome/free-brands-svg-icons` to the v6 release so all four packages use
the same major version; update the version strings for the packages named
`@fortawesome/fontawesome-svg-core`, `@fortawesome/free-regular-svg-icons`,
`@fortawesome/free-solid-svg-icons`, and `@fortawesome/free-brands-svg-icons`
accordingly and run npm/yarn install to verify.
🧹 Nitpick comments (3)
src/pages/projects.jsx (1)
91-99: Consider handling placeholder links gracefully.The PR notes mention that OpenChat still has
href="#"in the projects data. When users click this link, they'll navigate to the page anchor, which may confuse users.Consider adding conditional styling or disabling the link when the href is a placeholder:
💡 Suggested enhancement
- <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 dark:text-zinc-200 hover:text-[`#00843D`] dark:hover:text-yellow-400 transition-colors" - > + <a + href={project.link.href} + target={project.link.href !== '#' ? '_blank' : undefined} + rel={project.link.href !== '#' ? 'noopener noreferrer' : undefined} + className={`relative z-10 mt-6 flex items-center text-md font-semibold font-mono transition-colors ${ + project.link.href === '#' + ? 'text-zinc-400 dark:text-zinc-500 cursor-not-allowed' + : 'text-zinc-600 dark:text-zinc-200 hover:text-[`#00843D`] dark:hover:text-yellow-400' + }`} + onClick={project.link.href === '#' ? (e) => e.preventDefault() : undefined} + >src/components/Footer.jsx (1)
45-49: Discord URL and X icon updates look good.Minor optional consideration: the
aria-labelon line 48 still says "Follow on Twitter" while the icon now represents "X". You may want to update it to "Follow on X" for consistency with the current branding.💡 Optional aria-label update
- <Link aria-label="Follow on Twitter" className=' text-zinc-400 hover:text-[`#00843D`] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://twitter.com/aossie_org'> + <Link aria-label="Follow on X" className=' text-zinc-400 hover:text-[`#00843D`] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://twitter.com/aossie_org'>src/pages/index.jsx (1)
87-96: Discord URL and X icon updates are consistent.Same optional consideration as in Footer.jsx: the
aria-labelon line 92 could be updated from "Follow on Twitter" to "Follow on X" for consistency with the current branding.
1 participant
Hello @Zahnentferner , @saisankargochhayat , @heychirag , @icemc
#471 , #535 #481
I have fixed all three reported issues in
src/pages/projects.jsx
.
Fixed Link Bug: I replaced the
wrapped link with a direct tag containing the correct href, target, rel, and className attributes. This ensures all project cards (except "OpenChat" which has href="#") are now clickable.
Fixed Layout Shift: I removed the width: 100vw and negative margin breakout hack from the banner wrapper, replacing it with width: 100%. This eliminates the horizontal scrollbar issue on desktop.
Enhanced UI: I added a hover effect to the project cards. They now lift up slightly (translateY(-5px)) and have a stronger shadow when hovered, as requested.
The server is running, so you can test the /projects page immediately.
Note: As you pointed out, the "OpenChat" project currently has href: "#" in
src/helper/projects.js
, so it will remain unclickable until a valid URL is provided.
e4895bc4-b778-43d9-95e5-f55979853965
Summary by CodeRabbit
New Features
Updates
Documentation
✏️ Tip: You can customize this high-level summary in your review settings.