From bdce585ecc814b148827d9fb2a5fa4b2afe546e7 Mon Sep 17 00:00:00 2001
From: "Danilo M." <danix@danix.xyz>
Date: Wed, 15 Apr 2026 22:14:02 +0200
Subject: Add thumbnail support to article listings
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add 'image' front matter parameter for article thumbnails
- Redesign article-list-item.html as semantic article card:
  - Large thumbnail (aspect-video, object-cover) at top if image is present
  - Title linked to article page
  - Publication date and type badge
  - Excerpt (from .Description or .Summary with plainify)
  - "Read more" CTA button with arrow icon and hover animation
- Increase list container width (max-w-2xl → max-w-3xl) and spacing (space-y-2 → space-y-6)
- Thumbnail image has subtle scale-up hover effect
- Arrow icon animates on hover
- All three clickable elements (.image, title, CTA) link to article

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
 themes/danix-xyz-hacker/layouts/_default/list.html |  2 +-
 .../layouts/partials/article-list-item.html        | 85 +++++++++++++++-------
 2 files changed, 59 insertions(+), 28 deletions(-)

(limited to 'themes/danix-xyz-hacker')

diff --git a/themes/danix-xyz-hacker/layouts/_default/list.html b/themes/danix-xyz-hacker/layouts/_default/list.html
index 8d2c1ef..357b856 100644
--- a/themes/danix-xyz-hacker/layouts/_default/list.html
+++ b/themes/danix-xyz-hacker/layouts/_default/list.html
@@ -6,7 +6,7 @@
   </h1>
 
   <!-- Articles list -->
-  <div class="space-y-2 max-w-2xl">
+  <div class="space-y-6 max-w-3xl">
     {{ $pinned := where .Pages "Params.pinned" true }}
     {{ $unpinned := where .Pages "Params.pinned" false }}
 
diff --git a/themes/danix-xyz-hacker/layouts/partials/article-list-item.html b/themes/danix-xyz-hacker/layouts/partials/article-list-item.html
index 1065f0b..47f3109 100644
--- a/themes/danix-xyz-hacker/layouts/partials/article-list-item.html
+++ b/themes/danix-xyz-hacker/layouts/partials/article-list-item.html
@@ -1,37 +1,68 @@
 {{ $articleType := .Params.type | default "life" }}
 {{ $typeConfig := .Site.Params.articleTypes }}
 {{ $typeData := index $typeConfig $articleType }}
+{{ $excerpt := .Description | default .Summary }}
 
-<a
-  href="{{ .RelPermalink }}"
-  class="block p-4 md:p-6 border border-border/30 rounded hover:border-accent/50 hover:bg-surface/30 transition-all duration-200 group"
->
-  <!-- Pinned badge -->
-  {{ if .Params.pinned }}
-  <div class="mb-3 inline-flex items-center gap-1 px-2 py-1 rounded text-sm font-semibold" style="color: {{ .Site.Params.secondaryAccent }};">
-    📌 PINNED
-  </div>
+<article class="border border-border/30 rounded-lg overflow-hidden hover:border-accent/50 transition-all duration-200 group">
+  <!-- Thumbnail -->
+  {{ if .Params.image }}
+  <a href="{{ .RelPermalink }}" class="block overflow-hidden bg-surface/50" tabindex="-1">
+    <img
+      src="{{ .Params.image }}"
+      alt="{{ .Title }}"
+      class="w-full aspect-video object-cover group-hover:scale-105 transition-transform duration-200"
+      loading="lazy"
+    />
+  </a>
   {{ end }}
 
-  <!-- Title -->
-  <h3 class="text-lg font-semibold group-hover:text-accent transition-colors mb-3">
-    {{ .Title }}
-  </h3>
+  <!-- Content -->
+  <div class="p-5 md:p-6 space-y-3">
+    <!-- Pinned badge -->
+    {{ if .Params.pinned }}
+    <div class="inline-flex items-center gap-1 px-2 py-1 rounded text-sm font-semibold" style="color: {{ .Site.Params.secondaryAccent }};">
+      📌 PINNED
+    </div>
+    {{ end }}
+
+    <!-- Title -->
+    <h3 class="text-xl font-semibold">
+      <a href="{{ .RelPermalink }}" class="group-hover:text-accent transition-colors">
+        {{ .Title }}
+      </a>
+    </h3>
 
-  <!-- Metadata -->
-  <div class="flex flex-wrap items-center gap-3 text-sm text-text-dim">
-    <!-- Publish date -->
-    <time datetime="{{ .PublishDate.Format "2006-01-02T15:04:05Z07:00" }}">
-      {{ .PublishDate.Format "Jan 2, 2006" }}
-    </time>
+    <!-- Metadata -->
+    <div class="flex flex-wrap items-center gap-3 text-sm text-text-dim">
+      <!-- Publish date -->
+      <time datetime="{{ .PublishDate.Format "2006-01-02T15:04:05Z07:00" }}">
+        {{ .PublishDate.Format "Jan 2, 2006" }}
+      </time>
 
-    <!-- Type badge -->
-    {{ if $typeData }}
-    <span
-      class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium transition-colors type-{{ $articleType }}"
-    >
-      {{ i18n $articleType }}
-    </span>
+      <!-- Type badge -->
+      {{ if $typeData }}
+      <span
+        class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium transition-colors type-{{ $articleType }}"
+      >
+        {{ i18n $articleType }}
+      </span>
+      {{ end }}
+    </div>
+
+    <!-- Excerpt -->
+    {{ if $excerpt }}
+    <p class="text-text-dim text-sm line-clamp-3 leading-relaxed">
+      {{ $excerpt | plainify }}
+    </p>
     {{ end }}
+
+    <!-- CTA Button -->
+    <a
+      href="{{ .RelPermalink }}"
+      class="inline-flex items-center gap-2 px-3 py-2 rounded border border-border/30 text-sm font-medium hover:border-accent/50 hover:text-accent transition-colors group/cta"
+    >
+      {{ i18n "readMore" }}
+      <i data-feather="arrow-right" class="w-4 h-4 group-hover/cta:translate-x-1 transition-transform"></i>
+    </a>
   </div>
-</a>
+</article>
-- 
cgit v1.2.3