refactor(links): introduce SmartLink component to handle internal and external links

eric15342335 · eric15342335 · commit 307da68ff273 · 2025-08-28T16:47:32.000+08:00
diff --git a/src/app/join-us/page.tsx b/src/app/join-us/page.tsx
@@ -1,5 +1,6 @@
 import { AnimatedFillButton } from "@/components/primitives/animated-fill-button";
 import { PageHeader } from "@/components/primitives/page-header";
+import { SmartLink } from "@/components/primitives/smart-link";
 import { buildPageMetadata, siteConfig } from "@/lib/config";
 import { Metadata } from "next";
 
@@ -32,12 +33,12 @@ export default function JoinUs() {
       </div>
       <p className="text-muted-foreground pt-3 text-sm md:text-base">
         For more information, contact us at{" "}
-        <a
+        <SmartLink
           href={`mailto:${siteConfig.email}`}
           className="text-primary hover:underline"
         >
           {siteConfig.email}
-        </a>
+        </SmartLink>
         .
       </p>
     </section>
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,12 +1,12 @@
 import { description } from "@/app/layout";
 import { PageHeader } from "@/components/primitives/page-header";
+import { SmartLink } from "@/components/primitives/smart-link";
 import { FeaturedProgram } from "@/components/sections/featured-program";
 import { Hero } from "@/components/sections/hero";
 import { WhatsHappening } from "@/components/sections/whats-happening";
 import { Button } from "@/components/ui/button";
 import { buildPageMetadata, siteConfig } from "@/lib/config";
 import { Metadata } from "next";
-import Link from "next/link";
 
 export const metadata: Metadata = buildPageMetadata("/", { description, title: "Home - ALPHA HKU" });
 
@@ -51,14 +51,12 @@ export default function Home() {
           description={
             <>
               Carrying{" "}
-              <a
+              <SmartLink
                 href={siteConfig.parentOrg}
-                target="_blank"
-                rel="noopener"
                 className="text-primary hover:text-primary/80 underline transition-colors"
               >
                 ALPHA Education
-              </a>
+              </SmartLink>
               {"'"}s mandate, we are an independent student organization, the largest student initiative in
               HKU, formed by an installation size of 30 students to spread the message of peace and humanity.
               <br />
@@ -69,7 +67,7 @@ export default function Home() {
           }
         >
           <Button asChild>
-            <Link href="/about-us/our-story">Explore Our Story</Link>
+            <SmartLink href="/about-us/our-story">Explore Our Story</SmartLink>
           </Button>
         </PageHeader>
       </section>
diff --git a/src/components/primitives/animated-fill-button.tsx b/src/components/primitives/animated-fill-button.tsx
@@ -1,6 +1,5 @@
+import { SmartLink } from "@/components/primitives/smart-link";
 import { Button } from "@/components/ui/button";
-import { isInternalHref } from "@/lib/utils";
-import Link from "next/link";
 import type { ReactNode } from "react";
 
 type AnimatedFillButtonProps = {
@@ -16,17 +15,7 @@ export function AnimatedFillButton({ href, children }: AnimatedFillButtonProps)
       size="lg"
       className="from-primary to-primary text-primary hover:text-primary-foreground rounded-full bg-gradient-to-r bg-[length:0%_100%] bg-no-repeat transition-[background-size,color] duration-300 hover:bg-[length:100%_100%]"
     >
-      {isInternalHref(href) ? (
-        <Link href={href}>{children}</Link>
-      ) : (
-        <a
-          href={href}
-          target="_blank"
-          rel="noopener"
-        >
-          {children}
-        </a>
-      )}
+      <SmartLink href={href}>{children}</SmartLink>
     </Button>
   );
 }
diff --git a/src/components/primitives/exco-card.tsx b/src/components/primitives/exco-card.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { SmartLink } from "@/components/primitives/smart-link";
 import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import type { ExcoLink, ExcoMember } from "@/lib/exco";
 import { cn } from "@/lib/utils";
@@ -112,7 +113,7 @@ function BackFace({ member }: { member: ExcoMember }) {
             {hasLinks ? (
               <div className={cn("flex items-center justify-center gap-3", !hasBio && "m-auto")}>
                 {member.links!.map((link) => (
-                  <a
+                  <SmartLink
                     key={`${member.name}-${link.type}-${link.url}`}
                     href={link.type === "email" ? `mailto:${link.url}` : link.url}
                     target={link.type === "email" ? undefined : "_blank"}
@@ -123,7 +124,7 @@ function BackFace({ member }: { member: ExcoMember }) {
                     onTouchStart={(e) => e.stopPropagation()}
                   >
                     <SocialIcon link={link} />
-                  </a>
+                  </SmartLink>
                 ))}
               </div>
             ) : null}
diff --git a/src/components/primitives/partner-card.tsx b/src/components/primitives/partner-card.tsx
@@ -1,3 +1,4 @@
+import { SmartLink } from "@/components/primitives/smart-link";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import type { Partner } from "@/lib/partners";
 import { cn } from "@/lib/utils";
@@ -10,11 +11,7 @@ type PartnerCardProps = {
 
 export function PartnerCard({ partner, className }: PartnerCardProps) {
   return (
-    <a
-      href={partner.href}
-      target="_blank"
-      rel="noopener"
-    >
+    <SmartLink href={partner.href}>
       <Card className={cn("h-full", className)}>
         <CardHeader className="text-center">
           {partner.logo && (
@@ -34,6 +31,6 @@ export function PartnerCard({ partner, className }: PartnerCardProps) {
           <p className="text-muted-foreground text-sm">{partner.href}</p>
         </CardContent>
       </Card>
-    </a>
+    </SmartLink>
   );
 }
diff --git a/src/components/primitives/smart-link.tsx b/src/components/primitives/smart-link.tsx
@@ -0,0 +1,48 @@
+"use client";
+
+import { isInternalHref } from "@/lib/utils";
+import Link from "next/link";
+import { forwardRef, type AnchorHTMLAttributes, type ReactNode } from "react";
+
+type SmartLinkProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "href"> & {
+  href: string; // mark href as required for strict validation
+  children: ReactNode;
+};
+
+export const SmartLink = forwardRef<HTMLAnchorElement, SmartLinkProps>(function SmartLink(
+  { href, children, className, target, rel, ...rest },
+  ref
+) {
+  const isInternal = isInternalHref(href);
+
+  if (isInternal) {
+    return (
+      <Link
+        href={href}
+        className={className}
+        ref={ref}
+        {...rest}
+      >
+        {children}
+      </Link>
+    );
+  }
+
+  const computedTarget = target ?? "_blank";
+  const computedRel = rel ?? (computedTarget === "_blank" ? "noopener" : undefined);
+
+  return (
+    <a
+      href={href}
+      className={className}
+      target={computedTarget}
+      rel={computedRel}
+      ref={ref}
+      {...rest}
+    >
+      {children}
+    </a>
+  );
+});
+
+export default SmartLink;
diff --git a/src/components/sections/featured-program.tsx b/src/components/sections/featured-program.tsx
@@ -1,7 +1,7 @@
+import { SmartLink } from "@/components/primitives/smart-link";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
 import Image from "next/image";
-import Link from "next/link";
 
 type FeaturedProgramProps = {
   heading: string;
@@ -32,7 +32,7 @@ export function FeaturedProgram({
               <p className="text-muted-foreground">{description}</p>
               {ctaHref && ctaLabel ? (
                 <Button asChild>
-                  <Link href={ctaHref}>{ctaLabel}</Link>
+                  <SmartLink href={ctaHref}>{ctaLabel}</SmartLink>
                 </Button>
               ) : null}
             </div>
diff --git a/src/components/sections/footer.tsx b/src/components/sections/footer.tsx
@@ -1,8 +1,8 @@
+import { SmartLink } from "@/components/primitives/smart-link";
 import { siteConfig } from "@/lib/config";
 import { cn } from "@/lib/utils";
 import { SiGithub, SiInstagram } from "@icons-pack/react-simple-icons";
 import { Mail } from "lucide-react";
-import Link from "next/link";
 import { FaLinkedin } from "react-icons/fa";
 
 const sitemapLinks = [...siteConfig.mainNav, ...siteConfig.utilityNav];
@@ -19,68 +19,60 @@ export function Footer() {
               <ul className="grid grid-cols-2 gap-x-8 gap-y-2">
                 {sitemapLinks.map((link) => (
                   <li key={link.href}>
-                    <Link
+                    <SmartLink
                       href={link.href}
                       className={baseTextLinkClass}
                     >
                       {link.label}
-                    </Link>
+                    </SmartLink>
                   </li>
                 ))}
               </ul>
             </div>
             <div className="flex flex-col items-center space-y-4">
               <h3 className="font-semibold">Connect with us!</h3>
               <div className="flex flex-col items-start gap-3">
-                <a
+                <SmartLink
                   href={`mailto:${siteConfig.email}`}
                   className={cn(baseTextLinkClass, "inline-flex items-center gap-2")}
                 >
                   <Mail size={18} />
                   {siteConfig.email}
-                </a>
-                <a
+                </SmartLink>
+                <SmartLink
                   href={siteConfig.instagram}
-                  target="_blank"
-                  rel="noopener"
                   className={cn(baseTextLinkClass, "inline-flex items-center gap-2")}
                 >
                   <SiInstagram size={18} />
                   Instagram
-                </a>
-                <a
+                </SmartLink>
+                <SmartLink
                   href={siteConfig.github}
-                  target="_blank"
-                  rel="noopener"
                   className={cn(baseTextLinkClass, "inline-flex items-center gap-2")}
                 >
                   <SiGithub size={18} />
                   GitHub
-                </a>
-                <a
+                </SmartLink>
+                <SmartLink
                   href={siteConfig.linkedin}
-                  target="_blank"
-                  rel="noopener"
                   className={cn(baseTextLinkClass, "inline-flex items-center gap-2")}
                 >
                   <FaLinkedin size={18} />
                   LinkedIn
-                </a>
+                </SmartLink>
               </div>
             </div>
           </div>
           <div className="border-border/40 text-muted-foreground mt-8 border-t pt-8 text-center text-sm">
             © {new Date().getFullYear()} ALPHA University Chapter at the University of Hong Kong. All rights
             reserved.
             <br />
-            <a
+            <SmartLink
               href={siteConfig.parentOrg}
-              target="_blank"
-              rel="noopener"
               className={cn(baseTextLinkClass, "inline-flex items-center gap-2 underline")}
             >
               {siteConfig.parentOrg.replace("https://", "")}
-            </a>
+            </SmartLink>
           </div>
         </div>
       </div>
diff --git a/src/components/sections/header.tsx b/src/components/sections/header.tsx
diff --git a/src/components/sections/resource-iframe.tsx b/src/components/sections/resource-iframe.tsx
diff --git a/src/components/sections/whats-happening.tsx b/src/components/sections/whats-happening.tsx
