From b6f40d6114f5b96f2c4b6e5d24e0f40d6fbdc106 Mon Sep 17 00:00:00 2001
From: Xin <xin@imfing.com>
Date: Sun, 20 Aug 2023 21:31:51 +0100
Subject: [PATCH] feat: add subtitle and image support to card

---
 assets/css/typography.css    |  3 +++
 exampleSite/hugo_stats.json  |  8 ++++++++
 layouts/shortcodes/card.html | 36 ++++++++++++++++++++++++++----------
 3 files changed, 37 insertions(+), 10 deletions(-)

diff --git a/assets/css/typography.css b/assets/css/typography.css
index fc44c14..0c76e35 100644
--- a/assets/css/typography.css
+++ b/assets/css/typography.css
@@ -75,6 +75,9 @@
   img {
     @apply mx-auto my-4 rounded-md;
   }
+  .not-prose img {
+    @apply m-0 rounded-none;
+  }
   figure {
     figcaption {
       @apply text-sm text-gray-500 dark:text-gray-400 mt-2 block text-center;
diff --git a/exampleSite/hugo_stats.json b/exampleSite/hugo_stats.json
index 0c20037..75c7d9f 100644
--- a/exampleSite/hugo_stats.json
+++ b/exampleSite/hugo_stats.json
@@ -156,6 +156,7 @@
       "dark:block",
       "dark:border-blue-200/30",
       "dark:border-gray-100/20",
+      "dark:border-neutral-700",
       "dark:border-neutral-800",
       "dark:border-orange-400/30",
       "dark:border-red-200/30",
@@ -165,8 +166,10 @@
       "dark:focus:bg-dark",
       "dark:hidden",
       "dark:hover:bg-gray-100/5",
+      "dark:hover:bg-neutral-700",
       "dark:hover:bg-neutral-900",
       "dark:hover:bg-primary-100/5",
+      "dark:hover:border-neutral-500",
       "dark:hover:border-neutral-700",
       "dark:hover:border-neutral-800",
       "dark:hover:shadow-none",
@@ -186,6 +189,7 @@
       "dark:text-gray-200",
       "dark:text-gray-300",
       "dark:text-gray-400",
+      "dark:text-gray-50",
       "dark:text-neutral-200",
       "dark:text-neutral-400",
       "dark:text-orange-300",
@@ -210,6 +214,7 @@
       "font-extrabold",
       "font-medium",
       "font-mono",
+      "font-normal",
       "font-semibold",
       "footnote-backref",
       "footnote-ref",
@@ -255,6 +260,7 @@
       "hover:opacity-60",
       "hover:opacity-75",
       "hover:shadow-gray-100",
+      "hover:shadow-lg",
       "hover:shadow-md",
       "hover:text-black",
       "hover:text-gray-800",
@@ -278,6 +284,7 @@
       "leading-5",
       "leading-7",
       "leading-tight",
+      "line-clamp-3",
       "list-none",
       "lntable",
       "lntd",
@@ -441,6 +448,7 @@
       "search-results",
       "search-wrapper",
       "select-none",
+      "shadow",
       "shadow-[0_-12px_16px_#fff]",
       "shadow-[0_-12px_16px_white]",
       "shadow-[0_2px_4px_rgba(0,0,0,.02),0_1px_0_rgba(0,0,0,.06)]",
diff --git a/layouts/shortcodes/card.html b/layouts/shortcodes/card.html
index af67ce3..79e8449 100644
--- a/layouts/shortcodes/card.html
+++ b/layouts/shortcodes/card.html
@@ -1,17 +1,33 @@
-{{ $href := .Get "link" }}
-{{ $title := .Get "title" }}
-{{ $icon := .Get "icon" }}
-{{ $context := . }}
+{{- $href := .Get "link" -}}
+{{- $title := .Get "title" -}}
+{{- $icon := .Get "icon" -}}
+{{- $subtitle := .Get "subtitle" }}
+{{- $image := .Get "image" }}
+{{- $context := . -}}
 
+{{ $linkClass := "hover:border-gray-300 bg-transparent shadow-sm dark:border-neutral-800 hover:bg-slate-50 hover:shadow-md dark:hover:border-neutral-700 dark:hover:bg-neutral-900" }}
+{{- with $image -}}
+  {{ $linkClass = "hover:border-gray-300 bg-gray-100 shadow dark:border-neutral-700 dark:bg-neutral-800 dark:text-gray-50 hover:shadow-lg dark:hover:border-neutral-500 dark:hover:bg-neutral-700" }}
+{{- end -}}
 
 <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 hover:border-gray-300 bg-transparent shadow-sm dark:border-neutral-800 hover:bg-slate-50 hover:shadow-md dark:hover:border-neutral-700 dark:hover:bg-neutral-900"
+  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 }}"
 >
-  <span class="flex font-semibold items-start gap-2 p-4 text-gray-700 hover:text-gray-900 dark:text-neutral-200 dark:hover:text-neutral-50">
-    {{ with $icon }}
-      {{ partial "utils/icon.html" (dict "name" $icon) }}
-    {{ end }}
-    {{ $title }}
+  {{- with $image -}}
+    <img alt="{{ $title }}" loading="lazy" decoding="async" style="color: transparent;" src="{{ $image }}" />
+  {{- end -}}
+
+  {{ $padding := "p-4"}}
+  {{- with $subtitle -}}
+    {{ $padding = "pt-4 px-4"}}
+  {{- end -}}
+
+  <span class="flex font-semibold items-start gap-2 {{ $padding }} text-gray-700 hover:text-gray-900 dark:text-neutral-200 dark:hover:text-neutral-50">
+    {{- with $icon }}{{ partial "utils/icon.html" (dict "name" $icon) -}}{{ end -}}
+    {{- $title -}}
   </span>
+  {{- with $subtitle -}}
+    <div class="line-clamp-3 text-sm font-normal text-gray-500 dark:text-gray-400 px-4 mb-4 mt-2">{{ $subtitle }}</div>
+  {{- end -}}
 </a>