reduce bounce rate

site/src/components/StandardCard.astro

@@ -1,6 +1,6 @@
 ---
 type Props = {
-  href: string;
+  href?: string;
   title: string;
   summary?: string;
   imageUrl?: string;
@@ -9,6 +9,7 @@ type Props = {
   sourceLabel: string;
   isExternal?: boolean;
   linkAttrs?: Record<string, any>;
+  mode?: "link" | "modal";
 };
 
 const {
@@ -21,6 +22,7 @@ const {
   sourceLabel,
   isExternal,
   linkAttrs,
+  mode = "link",
 } = Astro.props;
 
 function truncate(s: string, n: number) {
@@ -33,14 +35,21 @@ function truncate(s: string, n: number) {
 
 const summaryText = truncate(summary || "", 180);
 
+const Element = mode === "modal" ? "button" : "a";
+const elementProps = mode === "modal" 
+  ? { type: "button", ...linkAttrs }
+  : { 
+      href, 
+      target: isExternal ? "_blank" : undefined, 
+      rel: isExternal ? "noopener noreferrer" : undefined,
+      ...linkAttrs
+    };
+
 ---
 
-<a
+<Element
   class="card"
-  href={href}
-  target={isExternal ? "_blank" : undefined}
-  rel={isExternal ? "noopener noreferrer" : undefined}
-  {...(linkAttrs || {})}
+  {...elementProps}
 >
   <div class="card-media">
     {imageUrl ? (
@@ -66,4 +75,4 @@ const summaryText = truncate(summary || "", 180);
       <span class={`pill pill-${sourceLabel}`}>{sourceLabel}</span>
     </div>
   </div>
-</a>
+</Element>