feat: rewrite article-list-item as timeline card partial

1 files changed, 78 insertions, 76 deletions

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 d0ab504..44cbf32 100644
--- a/themes/danix-xyz-hacker/layouts/partials/article-list-item.html
+++ b/themes/danix-xyz-hacker/layouts/partials/article-list-item.html
@@ -1,93 +1,95 @@
-{{ $articleType := .Params.type | default "life" }}
-{{ $typeConfig := .Site.Params.articleTypes }}
+{{/* Handle both calling conventions: dict with .Page/.side or direct page */}}
+{{ $page := . }}
+{{ $side := "left" }}
+
+{{ if reflect.IsMap . }}
+  {{ $page = .Page }}
+  {{ $side = .side | default "left" }}
+{{ end }}
+
+{{ $articleType := $page.Params.type | default "life" }}
+{{ $typeConfig := $page.Site.Params.articleTypes }}
 {{ $typeData := index $typeConfig $articleType }}
-{{ $excerpt := .Description | default .Summary }}
+{{ $excerpt := $page.Description | default $page.Summary }}
 
 {{ $imageURL := "" }}
 {{ $useDefaultThumbnail := false }}
-{{ if .Params.image }}
-  {{ $resource := .Resources.GetMatch .Params.image }}
+{{ if $page.Params.image }}
+  {{ $resource := $page.Resources.GetMatch $page.Params.image }}
   {{ if $resource }}
     {{ $imageURL = $resource.RelPermalink }}
   {{ else }}
-    {{ $imageURL = .Params.image }}
+    {{ $imageURL = $page.Params.image }}
   {{ end }}
 {{ else }}
   {{ $useDefaultThumbnail = true }}
 {{ end }}
 
-<article class="card group bg-bg">
-  <!-- Thumbnail -->
-  {{ if or $imageURL $useDefaultThumbnail }}
-  <a href="{{ .RelPermalink }}" class="block overflow-hidden bg-surface/50 relative" tabindex="-1">
-    {{ if $useDefaultThumbnail }}
-    <picture>
-      <source srcset="/images/default_thumbnail_light.png" media="(prefers-color-scheme: light)" />
-      <img
-        src="/images/default_thumbnail_dark.png"
-        alt="{{ .Title }}"
-        class="card-image group-hover:scale-105 transition-transform duration-200"
-        loading="lazy"
-      />
-    </picture>
-    {{ else }}
-    <img
-      src="{{ $imageURL }}"
-      alt="{{ .Title }}"
-      class="card-image group-hover:scale-105 transition-transform duration-200"
-      loading="lazy"
-    />
-    {{ end }}
-    <!-- Type badge pill overlay -->
-    {{ if $typeData }}
-    <div
-      class="absolute top-3 right-3 px-3 py-1.5 rounded-full text-xs font-semibold text-white transition-opacity"
-      style="background-color: var(--type-{{ $articleType }});"
-    >
-      {{ i18n $articleType }}
-    </div>
-    {{ end }}
-  </a>
-  {{ end }}
+<li class="timeline-item timeline-item--{{ $side }}" style="--type-color: var(--type-{{ $articleType }});">
+  {{/* Decorative connector line */}}
+  <div class="timeline-connector" aria-hidden="true"
+       style="background-color: var(--type-{{ $articleType }});"></div>
 
-  <!-- Content -->
-  <div class="card-body">
-    <!-- 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 }}
+  {{/* Node on spine */}}
+  <div class="timeline-node" aria-hidden="true"
+       style="background-color: var(--type-{{ $articleType }}); box-shadow: 0 0 10px color-mix(in srgb, var(--type-{{ $articleType }}) 50%, transparent);"></div>
 
-    <!-- Title -->
-    <h3 class="text-xl font-semibold">
-      <a href="{{ .RelPermalink }}" class="group-hover:text-accent transition-colors">
-        {{ .Title }}
-      </a>
-    </h3>
+  <article class="timeline-card group"
+           style="border-color: color-mix(in srgb, var(--type-{{ $articleType }}) 25%, transparent);
+                  box-shadow: 0 0 18px color-mix(in srgb, var(--type-{{ $articleType }}) 10%, transparent);">
 
-    <!-- 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>
-    </div>
+    {{/* Thumbnail */}}
+    <a href="{{ $page.RelPermalink }}" class="timeline-thumb" tabindex="-1" aria-hidden="true">
+      {{ if $useDefaultThumbnail }}
+      <picture>
+        <source srcset="/images/default_thumbnail_light.png" media="(prefers-color-scheme: light)" />
+        <img src="/images/default_thumbnail_dark.png"
+             alt=""
+             loading="lazy" />
+      </picture>
+      {{ else }}
+      <img src="{{ $imageURL }}"
+           alt=""
+           loading="lazy" />
+      {{ end }}
+    </a>
 
-    <!-- Excerpt -->
-    {{ if $excerpt }}
-    <p class="text-text-dim text-sm line-clamp-3 leading-relaxed">
-      {{ $excerpt | plainify }}
-    </p>
-    {{ end }}
+    {{/* Text body */}}
+    <div class="timeline-body">
 
-    <!-- CTA Button -->
-    <a
-      href="{{ .RelPermalink }}"
-      class="btn btn-sm mt-2"
-    >
-      {{ i18n "readMore" }}
-      <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i>
-    </a>
-  </div>
-</article>
+      {{/* Pinned badge */}}
+      {{ if $page.Params.pinned }}
+      <div class="timeline-pinned" style="color: {{ $page.Site.Params.secondaryAccent }};">
+        📌 {{ i18n "pinned" | default "PINNED" }}
+      </div>
+      {{ end }}
+
+      {{/* Type + date meta row */}}
+      <div class="timeline-meta" style="color: var(--type-{{ $articleType }});">
+        {{ i18n $articleType | upper }}
+        <span class="timeline-meta-sep" aria-hidden="true">·</span>
+        <time class="timeline-date"
+              datetime="{{ $page.PublishDate.Format "2006-01-02T15:04:05Z07:00" }}">
+          {{ $page.PublishDate.Format "Jan 2, 2006" }}
+        </time>
+      </div>
+
+      {{/* Title */}}
+      <h3 class="timeline-title">
+        <a href="{{ $page.RelPermalink }}">{{ $page.Title }}</a>
+      </h3>
+
+      {{/* Excerpt */}}
+      {{ if $excerpt }}
+      <p class="timeline-excerpt">{{ $excerpt | plainify }}</p>
+      {{ end }}
+
+      {{/* CTA */}}
+      <a href="{{ $page.RelPermalink }}" class="btn btn-sm mt-auto">
+        {{ i18n "readMore" }}
+        <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i>
+      </a>
+
+    </div>
+  </article>
+</li>