feat: add optional href field to showcase and handle external links in ShowcaseCard

Author: itsarghyadas

apps/www/app/(marketing)/showcase/[...slug]/page.tsx

@@ -84,7 +84,7 @@ export default async function PagePage({ params }: PageProps) {
       </h3>
       <ShowcaseCard
         title={doc.title ?? ""}
-        href={page.url}
+        href={doc.href ?? page.url}
         image={doc.image ?? ""}
         affiliation={doc.affiliation ?? ""}
       />

apps/www/components/sections/showcase.tsx

@@ -5,6 +5,15 @@ import { ChevronRightIcon } from "@radix-ui/react-icons"
 import { showcaseSource } from "@/lib/source"
 import { Marquee } from "@/registry/magicui/marquee"
 
+function isExternalHref(href: string) {
+  try {
+    const url = new URL(href)
+    return url.protocol === "http:" || url.protocol === "https:"
+  } catch {
+    return false
+  }
+}
+
 export interface ShowcaseCardProps {
   title: string
   image: string
@@ -17,9 +26,13 @@ export function ShowcaseCard({
   href,
   affiliation,
 }: ShowcaseCardProps) {
+  const isExternal = isExternalHref(href)
   return (
     <Link
       href={href}
+      prefetch={isExternal ? false : undefined}
+      rel={isExternal ? "noopener noreferrer" : undefined}
+      target={isExternal ? "_blank" : undefined}
       className="group relative flex cursor-pointer flex-col gap-2 overflow-hidden"
     >
       <Image

apps/www/source.config.ts

@@ -63,6 +63,7 @@ export const showcase = defineDocs({
     schema: frontmatterSchema.extend({
       affiliation: z.string().optional(),
       featured: z.boolean().optional().default(false),
+      href: z.string().url().optional(),
       image: z.string().optional(),
     }),
   },