blob: 25da0a45fd9ebd1d4476e0e68503e7838537515a (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
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.Params.excerpt | default $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>
|
