hinode/layouts/shortcodes/timeline.html

<!-- 
    Inspired by the timeline snippet from Siddharth Panchal at https://bootsnipp.com/snippets/Q0ppE
    
    Show items ordered on a vertical timelime. The shortcode supports the following arguments:
    "data"          Required filename of the timeline input. You can omit the file extension. The file should reside in
                    the "data" folder. The data supports language extensions. For example, "timeline.en.yaml" refers to
                    the English translation of the timeline data. The filename "timeline.yaml" is used when no suitable
                    translation is found.
    "background"    Optional border color of the connector dots, defaults to the body background color. If set, uses a
                    subtle background color that is adaptive to the current color mode.
    "class"         Optional class attribute of the timeline's container.
-->

{{ $error := false }}
{{- $page := .Page -}}

{{- $data := .Get "data" | default "" -}}
{{ if not $data -}}
    {{ errorf "Missing param 'data': %s" .Position -}}
    {{ $error = true }}
{{ end -}}

{{/* Try language-specific file first */}}
{{ $path := path.Join (path.Dir $data) (printf "%s.%s" (path.BaseName $data) .Page.Language.Lang) (path.Ext $data) }}
{{ $entries := index site.Data $path }}
{{/* Use exact provided path as backup */}}
{{ if not $entries -}}
    {{ $entries = index site.Data $data }}
{{ end }}
{{ if not $entries -}}
    {{ errorf "Invalid timeline data '%s': %s" $data .Position -}}
    {{ $error = true }}
{{ end -}}

{{ $background := "" -}}
{{ with .Get "background" }}{{ $background = . }}{{ end -}}
{{ $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "light" "dark" -}}
{{ if and $background (not (in $supportedColors $background)) -}}
    {{ errorf "Invalid value for param 'background': %s" .Position -}}
    {{ $error = true -}}
{{ end -}}

{{- $class := .Get "class" | default "" -}}

<!-- Inline partial to render icon -->
{{- define "partials/timeline-icon.html" -}}
    {{- $col := default 6 .col -}}
    {{- $icon := .icon -}}
    {{- $direction := .direction -}}
    <div class="col-{{ $col }} d-flex justify-content-{{ $direction }} align-items-center">
        <div class="d-flex">
            <div class="d-flex timeline-semi-circle-{{ $direction }} fa-wrapper align-items-center justify-content-center">
                {{ partial "assets/icon.html" (dict "icon" (printf "%s fa-fluid" $icon)) }}
            </div>
            <div class="timeline-connector-{{ $direction }} {{ if eq $direction "start" }} order-first{{ end }}"></div>
        </div>
    </div>
{{- end -}}

<!-- Inline partial to render icon -->
{{- define "partials/timeline-panel.html" -}}
    {{- $col := default 6 .col -}}
    {{- $page := .page -}}
    {{- $content := .content -}}
    {{- $color := .color -}}
    {{- $title := .title -}}
    {{- $badge := .badge -}}
    {{- $url := .url -}}
    {{- $date := .date -}}
    {{- if and $url (not (hasPrefix $url "http")) -}}
        {{- $url = partial "partials/utilities/URLJoin.html" (dict "base" site.Params.docs.release "path" $url) }}
    {{- end -}}
    {{- $direction := .direction -}}

    <div class="col-{{ $col }} d-flex align-items-center">
        <div class="d-flex h-100 w-100">
            <div class="timeline-panel-{{ $direction }}"></div>
            <div class="timeline-description-text-{{ $direction }} p-3 w-100">
                <div>
                    {{ with $url }}
                        <a class="fs-5 fw-bold text-uppercase link-{{ $color }} text-break align-middle" href="{{ . }}">{{ $title }}</a>
                        <span class="badge rounded-pill text-bg-{{ $color }} ms-1">{{ if $badge }}<a class="link-bg-{{ $color }}" href="{{ . }}">{{ $badge }}</a>{{ end }}</span>
                    {{ else}}
                        <span class="fs-5 fw-bold text-uppercase text-{{ $color }} text-break align-middle">{{ $title }}</span>
                        <span class="badge rounded-pill text-bg-{{ $color }} ms-1">{{ if $badge }}{{ $badge }}{{ end }}</span>
                    {{ end }}
                </div>
                {{ if $date }}
                    {{ $datestr := (partial "utilities/date.html" (dict "date" $date "format" "long")) -}}
                    <p class="mb-0"><small class="text-body-secondary text-uppercase">{{ $datestr -}}</small></p>
                {{ end }}
                <p class="mt-3 mb-0">{{ $content | $page.RenderString }}</p>
            </div>
        </div>
    </div>    
{{- end -}}

<!-- Render default timeline -->
<div class="container p-0 d-none d-md-block mb-5 {{ with $background }} timeline-bg-{{ . }}{{ end }}{{ with $class }} {{ . }}{{ end }}">
    {{ range $index, $item := $entries }}
        <div class="row timeline timeline-{{ $item.color }} timeline-dot g-0 ">
            {{ if eq (mod $index 2) 1 }}
                {{ partial "partials/timeline-panel.html" (dict "page" $page "content" $item.content "color" $item.color "title" $item.title "badge" $item.badge "date" $item.date "url" $item.url "direction" "start") }}
                {{ partial "partials/timeline-icon.html" (dict "icon" $item.icon "direction" "start") }}
            {{ else }}
                {{ partial "partials/timeline-icon.html" (dict "icon" $item.icon "direction" "end") }}
                {{ partial "partials/timeline-panel.html" (dict "page" $page "content" $item.content "color" $item.color "title" $item.title "badge" $item.badge "date" $item.date "url" $item.url "direction" "end") }}
            {{ end }}
        </div>
        <div class="row timeline g-0 p-3"> </div>
    {{ end }}
</div>

<!-- Render timeline for smaller devices -->
<div class="container p-0 d-block d-md-none small{{ with $background }} timeline-bg-{{ . }}{{ end }}{{ with $class }} {{ . }}{{ end }}">
    {{ range $index, $item := $entries }}
        <div class="row timeline-sm timeline-{{ $item.color }} timeline-dot g-0">
            {{ partial "partials/timeline-icon.html" (dict "icon" $item.icon "direction" "end" "col" 3) }}
            {{ partial "partials/timeline-panel.html" (dict "page" $page "content" $item.content "color" $item.color "title" $item.title "badge" $item.badge "date" $item.date "url" $item.url "direction" "end" "col" 9) }}
        </div>
        <div class="row timeline-sm g-0 p-3"> </div>
    {{ end }}
</div>