From ae01ac08b6663ac6d08754d2208feef2fc090a77 Mon Sep 17 00:00:00 2001
From: LLL <still.lkmn@gmail.com>
Date: Fri, 27 Oct 2023 05:13:24 +0700
Subject: [PATCH] feat: improve Cards link behaviour (#153)

* clickable feature-card when a link is provided

* unclickable card when no link is provided

---------

Co-authored-by: Xin <xin@imfing.com>
---
 layouts/shortcodes/card.html                | 5 ++---
 layouts/shortcodes/hextra/feature-card.html | 8 ++++++--
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/layouts/shortcodes/card.html b/layouts/shortcodes/card.html
index 40f5913..50204d6 100644
--- a/layouts/shortcodes/card.html
+++ b/layouts/shortcodes/card.html
@@ -49,9 +49,8 @@
 
 <a
   class="hextra-card group flex flex-col justify-start overflow-hidden rounded-lg border border-gray-200 text-current no-underline dark:shadow-none hover:shadow-gray-100 dark:hover:shadow-none shadow-gray-100 active:shadow-sm active:shadow-gray-200 transition-all duration-200 {{ $linkClass }}"
-  href="{{ $href }}"
-  {{- if $external }}
-    target="_blank" rel="noreferrer"
+  {{- if $link -}}
+    href="{{ $href }}" {{ with $external }}target="_blank" rel="noreferrer"{{ end -}}
   {{- end -}}
 >
   {{- with $image -}}
diff --git a/layouts/shortcodes/hextra/feature-card.html b/layouts/shortcodes/hextra/feature-card.html
index 9ba4e1b..23a5aab 100644
--- a/layouts/shortcodes/hextra/feature-card.html
+++ b/layouts/shortcodes/hextra/feature-card.html
@@ -5,9 +5,13 @@
 {{- $imageClass := .Get "imageClass" -}}
 {{- $style := .Get "style" -}}
 {{- $icon := .Get "icon" -}}
+{{- $link := .Get "link" -}}
 
+{{- $external := hasPrefix $link "http" -}}
+{{- $href := cond (strings.HasPrefix $link "/") ($link | relURL) $link -}}
 
-<div
+<a
+  {{ with $link }}href="{{ $href }}" {{ with $external }} target="_blank" rel="noreferrer"{{ end }}{{ end }}
   {{ with $style }}style="{{ . | safeCSS }}"{{ end }}
   class="{{ $class }} hextra-feature-card relative overflow-hidden rounded-3xl border border-gray-200 hover:border-gray-300 dark:border-neutral-800 dark:hover:border-neutral-700 before:pointer-events-none before:absolute before:inset-0 before:bg-glass-gradient"
 >
@@ -25,4 +29,4 @@
   {{- with $image -}}
     <img src="{{ . }}" class="absolute max-w-none {{ $imageClass }}" alt="{{ $title }}" />
   {{- end -}}
-</div>
+</a>