From 03e9b119cc2d0b48edf5c93f664b5142fb7252a4 Mon Sep 17 00:00:00 2001
From: Cell <1024@lruihao.cn>
Date: Mon, 22 Jul 2024 15:12:55 +0800
Subject: [PATCH] :zap: Feat(igonre): Timeline feature enhancement

---
 assets/css/_shortcodes/_timeline.scss |  4 ++-
 layouts/partials/plugin/timeline.html | 37 ++++++++++++++++++++++-----
 layouts/partials/single/footer.html   |  1 +
 layouts/shortcodes/timeline.html      |  5 ++++
 4 files changed, 40 insertions(+), 7 deletions(-)

diff --git a/assets/css/_shortcodes/_timeline.scss b/assets/css/_shortcodes/_timeline.scss
index 65d6e736..237b489b 100644
--- a/assets/css/_shortcodes/_timeline.scss
+++ b/assets/css/_shortcodes/_timeline.scss
@@ -1,6 +1,8 @@
 .#{$prefix}timeline {
   list-style: none;
-  margin-block: 1rem;
+  box-sizing: border-box;
+  overflow: auto;
+  margin: 1rem auto;
   --timeline-color: #{darken($global-border-color, 5%)};
   --timeline-circle-color: #FF735A;
   --timeline-circle-size: 10px;
diff --git a/layouts/partials/plugin/timeline.html b/layouts/partials/plugin/timeline.html
index bd78859f..27d66a87 100644
--- a/layouts/partials/plugin/timeline.html
+++ b/layouts/partials/plugin/timeline.html
@@ -4,22 +4,47 @@
 {{- $animation := .Options.animation | default false -}}
 {{- $size := .Options.size | default "medium" -}}
 {{- $node := .Options.node | default "circle" -}}
-{{- $events := sort (.Inner | transform.Unmarshal).events "timestamp" (cond $reverse "desc" "asc") -}}
 
-<ul class="fi-timeline"{{ with $animation }} data-animation{{ end }}>
+{{- /* Set Timeline style  */ -}}
+{{- $style := "" -}}
+{{- with .Options.width -}}
+  {{- $style = printf "width: %v;" . -}}
+{{- end -}}
+{{- with .Options.height -}}
+  {{- $style = add $style (printf "height: %v;" .) -}}
+{{- end -}}
+{{- with $style -}}
+  {{- $style = printf `style="%v"` $style -}}
+{{- end -}}
+
+{{- /* Get Timeline events */ -}}
+{{- $events := slice -}}
+{{- with .Inner -}}
+  {{- $events = (. | transform.Unmarshal).events -}}
+  {{- end -}}
+{{- with .Events -}}
+  {{- $events = . -}}
+{{- end -}}
+{{- $events = sort $events "timestamp" (cond $reverse "desc" "asc") -}}
+
+<ul
+  class="fi-timeline{{ with .Options.class }} {{ . }}{{ end }}"
+  {{ $style | safeHTMLAttr }}
+  {{- with $animation }} data-animation{{- end -}}
+>
   {{- range $index, $item := $events -}}
     {{- $itemStyle := printf "--timeline-index: %v;" (add $index 1) -}}
     {{- with $item.color -}}
-      {{- $itemStyle = add $itemStyle (printf " --timeline-circle-color: %v;" .) -}}
+      {{- $itemStyle = add $itemStyle (printf "--timeline-circle-color: %v;" .) -}}
     {{- end -}}
-    {{- $itemStyle = (printf "style=\"%v\"" $itemStyle) | safeHTMLAttr -}}
+    {{- $itemStyle = printf `style="%v"` $itemStyle -}}
 
     <li
       class="fi-timeline-item"
       data-size="{{ $item.size | default $size }}"
       data-node="{{ $item.node | default $node }}"
-      {{ $itemStyle }}
-      {{ with $item.type }} data-type="{{ . }}"{{ end }}
+      {{ $itemStyle | safeHTMLAttr }}
+      {{- with $item.type }} data-type="{{ . }}"{{- end -}}
     >
       {{- if $item.hideTimestamp -}}
         <div class="fi-timeline-item__content">{{ $item.content | page.RenderString }}</div>
diff --git a/layouts/partials/single/footer.html b/layouts/partials/single/footer.html
index 610bfdf0..0bb42b37 100644
--- a/layouts/partials/single/footer.html
+++ b/layouts/partials/single/footer.html
@@ -24,6 +24,7 @@
             {{- dict "Date" . | T "single.updatedOnDate" -}}&nbsp;
             {{- if $gitRepo -}}
               {{- with $.GitInfo -}}
+                {{/*  TODO add Git .Body  */}}
                 <a class="git-hash" href="{{ printf `%v/commit/%v` $gitRepo .Hash }}" rel="external nofollow noopener noreferrer" target="_blank" title="commit by {{ .AuthorName }}({{ .AuthorEmail }}) {{ .Hash }}: {{ .Subject }}">
                   {{- dict "Class" "fa-solid fa-hashtag fa-fw" | partial "plugin/icon.html" -}}
                   {{- .AbbreviatedHash -}}
diff --git a/layouts/shortcodes/timeline.html b/layouts/shortcodes/timeline.html
index a6df0bbe..3766fa89 100644
--- a/layouts/shortcodes/timeline.html
+++ b/layouts/shortcodes/timeline.html
@@ -3,4 +3,9 @@
 {{- $options = .Get "animation" | default (.Get 2) | dict "animation" | merge $options -}}
 {{- $options = .Get "size" | default (.Get 3) | dict "size" | merge $options -}}
 {{- $options = .Get "node" | default (.Get 4) | dict "node" | merge $options -}}
+{{- if .IsNamedParams -}}
+  {{- $options = .Get "width" | dict "width" | merge $options -}}
+  {{- $options = .Get "height" | dict "height" | merge $options -}}
+  {{- $options = .Get "class" | dict "class" | merge $options -}}
+{{- end -}}
 {{- dict "Options" $options "Inner" .Inner | partial "plugin/timeline.html" -}}