summaryrefslogtreecommitdiffstats
path: root/layouts/partials/article-list-item.html
diff options
context:
space:
mode:
authorDanilo M. <danix@danix.xyz>2026-04-22 12:42:56 +0200
committerDanilo M. <danix@danix.xyz>2026-04-22 12:42:56 +0200
commit631547a75142326a7c71bdf123e1475217a5ad73 (patch)
treef3cfef6b3c5b42bf626fc823ddcf63b8dcf4cdbb /layouts/partials/article-list-item.html
parent77ccbe72fad5a4870185fff374f75471c16a9043 (diff)
downloaddanixxyz-theme-631547a75142326a7c71bdf123e1475217a5ad73.tar.gz
danixxyz-theme-631547a75142326a7c71bdf123e1475217a5ad73.zip
chore: replace with extracted danix.xyz-hacker theme (danix2-hugo-theme)
Diffstat (limited to 'layouts/partials/article-list-item.html')
-rw-r--r--layouts/partials/article-list-item.html95
1 files changed, 95 insertions, 0 deletions
diff --git a/layouts/partials/article-list-item.html b/layouts/partials/article-list-item.html
new file mode 100644
index 0000000..44cbf32
--- /dev/null
+++ b/layouts/partials/article-list-item.html
@@ -0,0 +1,95 @@
+{{/* 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 := $page.Description | default $page.Summary }}
+
+{{ $imageURL := "" }}
+{{ $useDefaultThumbnail := false }}
+{{ if $page.Params.image }}
+ {{ $resource := $page.Resources.GetMatch $page.Params.image }}
+ {{ if $resource }}
+ {{ $imageURL = $resource.RelPermalink }}
+ {{ else }}
+ {{ $imageURL = $page.Params.image }}
+ {{ end }}
+{{ else }}
+ {{ $useDefaultThumbnail = true }}
+{{ 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>
+
+ {{/* 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>
+
+ <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);">
+
+ {{/* 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>
+
+ {{/* Text body */}}
+ <div class="timeline-body">
+
+ {{/* 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>