Skip to content

fix: open external LinkedIn link in new tab on author page #327

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
agarwalpranav0711 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

fix: open external LinkedIn link in new tab on author page #327

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9648d07
fix: open external LinkedIn link in new tab
agarwalpranav0711 Feb 17, 2026
0f3f604
feat: standardize external links and improve code consistency
agarwalpranav0711 Apr 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions components/PostHeaderAuthors.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,22 +142,22 @@ const PostHeaderAuthors = ({ blogwriter, blogreviewer, timetoRead }) => {
</div>
<div className="flex flex-row gap-5 items-center gap-3 sm:gap-5 order-2 sm:order-none mt-2 md:mb-2">
<p className="text-gray-500 text-sm">Share this</p>
<Link
<a
href={twitterShareUrl}
target="_blank"
rel="noopener noreferrer"
className="twitter-share-button text-xl text-black transition-colors duration-300 hover:text-blue-500"
>
<FaTwitter className="icon" />
</Link>
<Link
</a>
<a
href={linkedinShareUrl}
target="_blank"
rel="noopener noreferrer"
className="linkedin-share-button text-xl text-black transition-colors duration-300 hover:text-blue-500"
>
<FaLinkedin className="icon" />
</Link>
</a>
<button
onClick={copyToClipboard}
className="link-share-button text-xl text-black transition-colors duration-300 hover:text-blue-500 focus:outline-none"
Expand Down
15 changes: 9 additions & 6 deletions components/author-description.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -171,12 +171,15 @@ const AuthorDescription = ({ authorData, AuthorName, isPost }) => {
{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"
>
LinkedIn
</Link>
<a
href={authorLinkedIn}
target="_blank"
Comment on lines 171 to +176
Copy link

Copilot AI Apr 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copilot uses AI. Check for mistakes.
rel="noopener noreferrer"
className="heading1 text-slate-500 hover:underline"
>
LinkedIn
</a>

Comment on lines +174 to +182
Copy link

Copilot AI Apr 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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">.

Suggested change
<a
href={authorLinkedIn}
target="_blank"
rel="noopener noreferrer"
className="heading1 text-slate-500 hover:underline"
>
LinkedIn
</a>
<a
href={authorLinkedIn}
target="_blank"
rel="noopener noreferrer"
className="heading1 text-slate-500 hover:underline"
>
LinkedIn
</a>

Copilot uses AI. Check for mistakes.
</div>
)}
{isPost && (
Expand Down
69 changes: 43 additions & 26 deletions components/footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import sideBySideSvg from "../public/images/sidebyside-transparent.svg";
import Image from "next/image";
import CNCF from "../public/images/cncf-landscape.png";
import GSA from "../public/images/gsa.png";
import { isExternal } from "../lib/utils/utils";

export default function Footer() {
const sections = [
Expand Down Expand Up @@ -59,19 +60,23 @@ export default function Footer() {
return (
<footer className="border-t border-gray-200 bg-white">
<div className="mx-auto max-w-[1200px] px-4 sm:px-6 lg:px-8 my-20">
<div className="flex flex-col lg:flex-row gap-4 ">
<div className="flex flex-col lg:flex-row gap-4">
<div className="max-lg:ml-10">
<div className="mr-4 shrink-0 w-52">
<Link href="https://keploy.io/">
<a
href="https://keploy.io/"
target="_blank"
rel="noopener noreferrer"
>
<Image
src={sideBySideSvg}
alt="Keploy Logo"
className="h-[50px] w-[100px] mb-2"
/>
</Link>
</a>
</div>
<div className="flex space-x-6 my-4">
<Link
<a
target="_blank"
rel="noopener noreferrer"
className="text-gray-500 hover:text-gray-500 transition-colors"
Expand All @@ -88,8 +93,8 @@ export default function Footer() {
transform="scale(0.8)"
/>
</svg>
</Link>
<Link
</a>
<a
target="_blank"
rel="noopener noreferrer"
className="text-gray-500 hover:text-gray-500 transition-colors"
Expand All @@ -103,8 +108,8 @@ export default function Footer() {
>
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
</svg>
</Link>
<Link
</a>
<a
target="_blank"
rel="noopener noreferrer"
className="text-gray-500 hover:text-gray-500 transition-colors"
Expand All @@ -118,8 +123,8 @@ export default function Footer() {
>
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
</svg>
</Link>
<Link
</a>
<a
target="_blank"
rel="noopener noreferrer"
className="text-gray-500 hover:text-gray-500 transition-colors"
Expand All @@ -133,8 +138,8 @@ export default function Footer() {
>
<path d="M23.498 6.186a2.997 2.997 0 0 0-2.11-2.123C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.388.518A2.997 2.997 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a2.997 2.997 0 0 0 2.11 2.123c1.883.518 9.388.518 9.388.518s7.505 0 9.388-.518a2.997 2.997 0 0 0 2.11-2.123C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
</svg>
</Link>
<Link
</a>
<a
target="_blank"
rel="noopener noreferrer"
className="text-gray-500 hover:text-gray-500 transition-colors"
Expand All @@ -148,10 +153,10 @@ export default function Footer() {
>
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" />
</svg>
</Link>
</a>
</div>
</div>
<div className="grid grid-cols-2 sm:grid-cols-3 lg:gap-8 gap-y-10 max-lg:mt-10 lg:grid-cols-4 w-full ">
<div className="grid grid-cols-2 sm:grid-cols-3 lg:gap-8 gap-y-10 max-lg:mt-10 lg:grid-cols-4 w-full">
{sections.map((section, index) => (
<div key={index} className="lg:mt-4 max-lg:ml-10">
<h3 className="font-medium text-gray-600">
Expand All @@ -160,13 +165,23 @@ export default function Footer() {
<ul className="mt-4 space-y-3">
{section?.links?.map((link, linkIndex) => (
<li key={linkIndex}>
<Link
className="text-sm text-gray-500 hover:text-gray-900 transition-colors"
target="_blank"
href={link.url}
>
{link.text}
</Link>
{isExternal(link.url) ? (
<a
className="text-sm text-gray-500 hover:text-gray-900 transition-colors"
target="_blank"
rel="noopener noreferrer"
href={link.url}
>
{link.text}
</a>
) : (
<Link
className="text-sm text-gray-500 hover:text-gray-900 transition-colors"
href={link.url}
>
{link.text}
</Link>
)}
</li>
))}
</ul>
Expand All @@ -177,9 +192,10 @@ export default function Footer() {
<h6 className="text-primary-300 font-medium mb-2">
Find us on CNCF Landscape
</h6>
<Link
<a
href="https://landscape.cncf.io/?item=app-definition-and-development--continuous-integration-delivery--keploy"
target="_blank"
rel="noopener noreferrer"
>
<Image
width={200}
Expand All @@ -188,10 +204,11 @@ export default function Footer() {
alt="CNCF Landscape"
className="w-52"
/>
</Link>
<Link
</a>
<a
href="https://blog.google/intl/en-in/introducing-the-eighth-cohort-of-google-for-startups-accelerator-india/"
target="_blank"
rel="noopener noreferrer"
>
<Image
width={200}
Expand All @@ -200,12 +217,12 @@ export default function Footer() {
alt="Google for Startups"
className="w-52 py-2"
/>
</Link>
</a>
</div>
</div>
<div className="my-12 pt-8 border-t border-gray-200">
<div className="flex flex-col-reverse md:flex-row md:items-center md:justify-between max-lg:ml-10">
<p className="mt-8 text-sm text-gray-500 md:mt-0"> Copyright © {new Date().getFullYear()} Keploy Inc</p>
<p className="mt-8 text-sm text-gray-500 md:mt-0">Copyright © {new Date().getFullYear()} Keploy Inc</p>
</div>
</div>
</div>
Expand Down
Loading