blogs/FixIt
1
0
Fork 0
mirror of https://github.com/hugo-fixit/FixIt.git synced 2026-08-24 15:28:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

🎉 Feat: add extended shortcode - Timeline support

Browse Source
This commit is contained in:
Cell
2024-07-21 11:31:13 +08:00
parent 42f811de22
commit ee4441c3ea
3 changed files with 43 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
layouts/_default/_markup/render-codeblock-timeline.html
+1 -49
View File
@@ -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" -}}
layouts/partials/plugin/timeline.html
+36
View File
@@ -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 */ -}}
layouts/shortcodes/timeline.html
+6
View File
@@ -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" -}}