fix: open external LinkedIn link in new tab on author page#327
fix: open external LinkedIn link in new tab on author page#327agarwalpranav0711 wants to merge 2 commits intokeploy:mainfrom
Conversation
|
Hi @agarwalpranav0711 The change fixes a very minor UI issue. Since the scope of this PR is quite small, we’d recommend exploring a slightly broader improvement or addressing a larger issue and including this fix as part of that update. Looking forward to seeing more from you! |
|
Hey @agarwalpranav0711 👋 — thanks for putting this PR together, we appreciate the effort! We've gone ahead and requested a Copilot review on this. Here's some context from the reviewer:
Once you've had a chance to go through the comments, please address the feedback and resolve the threads — and we'll get this across the line. Feel free to ask if anything's unclear. Happy coding! 💙 |
There was a problem hiding this comment.
Pull request overview
This PR updates the author details page so the external LinkedIn URL opens in a new tab (and uses safer link attributes), preventing users from being navigated away from the blog.
Changes:
- Replaced a Next.js
<Link>usage for an external LinkedIn URL with a standard<a>tag. - Added
target="_blank"andrel="noopener noreferrer"to the external link.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| {authorLinkedIn !== "n/a" && ( | ||
| <div className="mt-2"> | ||
| <IoLogoLinkedin className="h-5 w-5 inline mr-1" /> | ||
| <Link | ||
| href={authorLinkedIn} | ||
| className="heading1 text-slate-500 hover:underline" | ||
| > | ||
| </Link> | ||
| <a | ||
| href={authorLinkedIn} | ||
| target="_blank" |
There was a problem hiding this comment.
authorLinkedIn is initialized to an empty string, and the render condition only checks !== "n/a". This means the LinkedIn anchor can render with href="" on the initial render (before the effect runs), and clicking it will open a blank/new tab to the current page. Consider initializing authorLinkedIn to "n/a" (or null) and/or tightening the condition to require a non-empty URL before rendering the link.
| <a | ||
| href={authorLinkedIn} | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| className="heading1 text-slate-500 hover:underline" | ||
| > | ||
| </a> | ||
|
|
There was a problem hiding this comment.
The newly added <a> block is not indented consistently with the surrounding JSX, which makes this section harder to read/maintain. Please align the indentation (or run the repo formatter) so it matches the existing structure inside the <div className="mt-2">.
| <a | |
| href={authorLinkedIn} | |
| target="_blank" | |
| rel="noopener noreferrer" | |
| className="heading1 text-slate-500 hover:underline" | |
| > | |
| </a> | |
| <a | |
| href={authorLinkedIn} | |
| target="_blank" | |
| rel="noopener noreferrer" | |
| className="heading1 text-slate-500 hover:underline" | |
| > | |
| </a> |
|
Thanks for the review and the helpful feedback! 🙌 I understand that the original issue was relatively small, and my changes expanded the scope to improve consistency across similar components. My intention was to standardize external link handling and ensure security best practices across the navigation-related parts of the codebase. That said, I completely understand if this feels too broad for a single PR. I’m happy to:
Please let me know what you’d prefer, and I’ll adjust accordingly. Thanks again! 🚀 |
🐛 Fix: External LinkedIn link opens in same tab
Problem
On the author details page, the external LinkedIn link was opening in the same browser tab.
This redirected users away from the blog website.
Root Cause
The
<Link>component was being used for an external URL without specifying:target="_blank"rel="noopener noreferrer"Solution
Replaced the Next.js
<Link>component with a standard<a>tag and added:target="_blank"rel="noopener noreferrer"This ensures:
Files Modified
components/author-description.jsxFixes: keploy/keploy#3796