From ee4441c3ea098dce4111ecdf3fd5c773efd5d24b Mon Sep 17 00:00:00 2001
From: Cell <1024@lruihao.cn>
Date: Sun, 21 Jul 2024 11:31:13 +0800
Subject: [PATCH] :tada: Feat: add extended shortcode - Timeline support

---
 .../_markup/render-codeblock-timeline.html    | 50 +------------------
 layouts/partials/plugin/timeline.html         | 36 +++++++++++++
 layouts/shortcodes/timeline.html              |  6 +++
 3 files changed, 43 insertions(+), 49 deletions(-)
 create mode 100644 layouts/partials/plugin/timeline.html
 create mode 100644 layouts/shortcodes/timeline.html

diff --git a/layouts/_default/_markup/render-codeblock-timeline.html b/layouts/_default/_markup/render-codeblock-timeline.html
index 5b765c2d..07971e12 100644
--- a/layouts/_default/_markup/render-codeblock-timeline.html
+++ b/layouts/_default/_markup/render-codeblock-timeline.html
@@ -1,49 +1 @@
-{{- /*
-Timeline support for code blocks, example usage:
-
-```timeline {reverse=false, placement=bottom, animation=false, size=medium, node=circle}
-- timestamp: "2024-07-20 18:52:00"  # [required] timestamp
-  content: "hello world"            # [required] content
-  hideTimestamp: false              # [optional] whether to hide timestamp, default false
-  placement: "top"                  # [optional] timestamp placement [top, bottom], default bottom
-  color: ""                         # [optional] node color, hsl/hsv/hex/rgb supported
-  type: ""                          # [optional] node type [primary, secondary, success, info, warning, danger]
-  size: ""                          # [optional] node size [small, medium, large], default medium
-  node: circle                      # [optional] node type [circle, dot], default circle
-```
-*/ -}}
-{{- $reverse := .Attributes.reverse | default false -}}
-{{- $placement := .Attributes.placement | default "bottom" -}}
-{{- $animation := .Attributes.animation | default false -}}
-{{- $size := .Attributes.size | default "medium" -}}
-{{- $node := .Attributes.node | default "circle" -}}
-{{- $events := sort (.Inner | transform.Unmarshal).events "timestamp" (cond $reverse "desc" "asc") -}}
-
-<ul class="fi-timeline"{{ 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;" .) -}}
-    {{- end -}}
-    {{- $itemStyle = (printf "style=\"%v\"" $itemStyle) | safeHTMLAttr -}}
-
-    <li
-      class="fi-timeline-item"
-      data-size="{{ $item.size | default $size }}"
-      data-node="{{ $item.node | default $node }}"
-      {{ $itemStyle }}
-      {{ with $item.type }} data-type="{{ . }}"{{ end }}
-    >
-      {{- if $item.hideTimestamp -}}
-        <div class="fi-timeline-item__content">{{ $item.content | $.Page.RenderString }}</div>
-      {{- else if eq ($item.placement | default $placement) "top" -}}
-        <div class="fi-timeline-item__timestamp is-top">{{ $item.timestamp }}</div>
-        <div class="fi-timeline-item__content">{{ $item.content | $.Page.RenderString }}</div>
-      {{- else -}}
-        <div class="fi-timeline-item__content">{{ $item.content | $.Page.RenderString }}</div>
-        <div class="fi-timeline-item__timestamp is-bottom">{{ $item.timestamp }}</div>
-      {{- end -}}
-  </li>
-  {{- end -}}
-</ul>
-{{- /* EOF */ -}}
+{{- dict "Options" .Attributes "Inner" .Inner | partial "plugin/timeline.html" -}}
diff --git a/layouts/partials/plugin/timeline.html b/layouts/partials/plugin/timeline.html
new file mode 100644
index 00000000..fdf2a320
--- /dev/null
+++ b/layouts/partials/plugin/timeline.html
@@ -0,0 +1,36 @@
+{{- /* Timeline support for code blocks and shortcodes. */ -}}
+{{- $reverse := .Options.reverse | default false -}}
+{{- $placement := .Options.placement | default "bottom" -}}
+{{- $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 }}>
+  {{- range $index, $item := $events -}}
+    {{- $itemStyle := printf "--timeline-index: %v;" (add $index 1) -}}
+    {{- with $item.color -}}
+      {{- $itemStyle = add $itemStyle (printf " --timeline-circle-color: %v;" .) -}}
+    {{- end -}}
+    {{- $itemStyle = (printf "style=\"%v\"" $itemStyle) | safeHTMLAttr -}}
+
+    <li
+      class="fi-timeline-item"
+      data-size="{{ $item.size | default $size }}"
+      data-node="{{ $item.node | default $node }}"
+      {{ $itemStyle }}
+      {{ with $item.type }} data-type="{{ . }}"{{ end }}
+    >
+      {{- if $item.hideTimestamp -}}
+        <div class="fi-timeline-item__content">{{ $item.content | page.RenderString }}</div>
+      {{- else if eq ($item.placement | default $placement) "top" -}}
+        <div class="fi-timeline-item__timestamp is-top">{{ $item.timestamp }}</div>
+        <div class="fi-timeline-item__content">{{ $item.content | page.RenderString }}</div>
+      {{- else -}}
+        <div class="fi-timeline-item__content">{{ $item.content | page.RenderString }}</div>
+        <div class="fi-timeline-item__timestamp is-bottom">{{ $item.timestamp }}</div>
+      {{- end -}}
+  </li>
+  {{- end -}}
+</ul>
+{{- /* EOF */ -}}
diff --git a/layouts/shortcodes/timeline.html b/layouts/shortcodes/timeline.html
new file mode 100644
index 00000000..a6df0bbe
--- /dev/null
+++ b/layouts/shortcodes/timeline.html
@@ -0,0 +1,6 @@
+{{- $options := .Get "reverse" | default (.Get 0) | dict "reverse" -}}
+{{- $options = .Get "placement" | default (.Get 1) | dict "placement" | merge $options -}}
+{{- $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 -}}
+{{- dict "Options" $options "Inner" .Inner | partial "plugin/timeline.html" -}}