-{{ $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>
