⚡ Feat(igonre): Timeline feature enhancement

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;

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>

layouts/partials/single/footer.html

@@ -24,6 +24,7 @@
             {{- dict "Date" . | T "single.updatedOnDate" -}} 
             {{- 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 -}}

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" -}}