From: Danilo M. <redacted>
Date: Wed, 15 Apr 2026 13:48:55 +0000 (+0200)
Subject: feat: create article list item with type badges and pinned indicator
X-Git-Tag: release_22042026-1342~272
X-Git-Url: https://git.danix.xyz/?a=commitdiff_plain;h=79976b97958719504d074ec47ae70ec53855a029;p=danix.xyz-2.git

feat: create article list item with type badges and pinned indicator
---

diff --git a/themes/danix-xyz-hacker/layouts/partials/article-list-item.html b/themes/danix-xyz-hacker/layouts/partials/article-list-item.html
new file mode 100644
index 0000000..652e171
--- /dev/null
+++ b/themes/danix-xyz-hacker/layouts/partials/article-list-item.html
@@ -0,0 +1,40 @@
+{{ $articleType := .Params.type | default "life" }}
+{{ $typeConfig := .Site.Params.articleTypes }}
+{{ $typeData := index $typeConfig $articleType }}
+{{ $isDark := strings.Contains (os.Getenv "THEME") "dark" }}
+{{ $color := cond $isDark $typeData.color_dark $typeData.color_light }}
+
+<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>
+  {{ end }}
+
+  <!-- Title -->
+  <h3 class="text-lg font-semibold group-hover:text-accent transition-colors mb-3">
+    {{ .Title }}
+  </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>
+
+    <!-- Type badge -->
+    {{ if $typeData }}
+    <span
+      class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium transition-colors"
+      style="color: {{ $color }}; background-color: {{ $color }}20;"
+    >
+      {{ i18n $articleType }}
+    </span>
+    {{ end }}
+  </div>
+</a>