feat(footer): Add LinkedIn social link and ensure external links open… #73
Conversation
|
@MohammadRehaanDev is attempting to deploy a commit to the idan lodzki's projects Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughAdded a LinkedIn social link and aria-label attributes to social link elements in the footer; made minor formatting adjustments to existing link attributes. Changes
Possibly related PRs
Suggested labels
Suggested reviewers
📜 Recent review detailsConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
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
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
components/Footer.tsx (1)
112-146: Critical: Duplicate "Open Source" section detected.Lines 112-127 and 129-146 define two identical "Open Source" sections that both render
footerLinks.opensource. This creates duplicate content in the footer. Additionally, the second duplicate (lines 138-139) includestarget="_blank"andrel="noopener noreferrer"attributes, while the first (lines 118-120) does not, causing inconsistent behavior.One section should be removed, or if both are intentional, they should have different titles and render different content.
Apply this diff to remove the duplicate section:
- {/* Open Source Links */} - <div> - <h3 className="font-semibold text-white mb-4">Open Source</h3> - <ul className="space-y-2"> - {footerLinks.opensource.map((link) => ( - <li key={link.name}> - <Link - href={link.href} - className="text-gray-300 hover:text-white transition-colors duration-200" - > - {link.name} - </Link> - </li> - ))} - </ul> - </div> - {/* Open Source Links */} <div> <h3 className="font-semibold text-white mb-4">Open Source</h3>
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
components/Footer.tsx(2 hunks)
🔇 Additional comments (1)
components/Footer.tsx (1)
31-35: LGTM! LinkedIn link properly added.The LinkedIn social link follows the established pattern and uses the correct company URL format.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
components/Footer.tsx (2)
68-69: Good security practice with external links.The
target="_blank"andrel="noopener noreferrer"attributes correctly prevent tabnapping and are properly applied to all social links.Consider removing the emoji comments (🌟 FIX:) for a cleaner, more professional codebase. These annotations are helpful during development but are typically removed before merging to production.
- target="_blank" // 🌟 FIX: Added target="_blank" - rel="noopener noreferrer" // 🌟 FIX: Added rel="noopener noreferrer" + target="_blank" + rel="noopener noreferrer"
132-133: Previous issue resolved: duplicate section removed.The duplicate Open Source section has been successfully removed, addressing the structural issue identified in the previous review.
Consider removing this comment entirely or replacing it with a more standard comment style without emojis:
- - {/* 🗑️ FIX: The duplicate "Open Source" section that was previously here has been removed. */} -
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
components/Footer.tsx(5 hunks)
🔇 Additional comments (3)
components/Footer.tsx (3)
31-35: LGTM! LinkedIn social link properly configured.The LinkedIn entry is correctly structured and follows the same pattern as other social links. The company URL format is correct.
104-105: Previous issue resolved: external link now has security attributes.This correctly addresses the previous review comment by adding
target="_blank"andrel="noopener noreferrer"to the Resources section external link.
123-124: External links properly secured.The Open Source section external links now correctly include security attributes, consistent with the rest of the footer.
1 participant
Description
This PR addresses the need to increase OpsiMate's social presence by adding a link to the official LinkedIn company page in the website's footer.
It also includes a small but critical fix to ensure all external social links within the footer open in a new tab, improving user experience and consistency.
Changes Made
Added a new object for LinkedIn to the socialLinks array in src/components/Footer.tsx, using the imported Linkedin icon from lucide-react.
URL: https://www.linkedin.com/company/opsimate/
Modified the social links rendering logic to include target="_blank" and rel="noopener noreferrer" attributes. This ensures that clicking the LinkedIn, GitHub, Slack, and Email icons opens the destination in a new browser tab.
Definition of Done (DOD) Verification
The following items have been tested locally:
✅ LinkedIn button is visible in the footer.
✅ Clicking it opens OpsiMate’s LinkedIn page in a new tab.
✅ All other external social links now open in a new tab.
Summary by CodeRabbit
New Features
Improvements