Extended Shortcode - Timeline

This document will show you how to create a Timeline in FixIt using Shortcode.

Basic Usage

Timeline can be split into multiple events in ascending or descending. Timestamp and content are required fields.

An example of a Timeline arranged in ascending order:

• Success
  2024-07-11
• Approved
  2024-07-13
• Event start
  2024-07-15

1
2
3
4
5
6
7
8
9

{{< timeline >}}
events:
  - timestamp: 2024-07-11
    content: Success
  - timestamp: 2024-07-13
    content: Approved
  - timestamp: 2024-07-15
    content: Event start
{{< /timeline >}}

An example of a Timeline arranged in descending order:

• Event start
  2024-07-15
• Approved
  2024-07-13
• Success
  2024-07-11

1
2
3
4
5
6
7
8
9

{{< timeline reverse=true >}}
events:
  - timestamp: 2024-07-11
    content: Success
  - timestamp: 2024-07-13
    content: Approved
  - timestamp: 2024-07-15
    content: Event start
{{< /timeline >}}

Animation Support

Timeline supports animation, and you can enable or disable it using the animation parameter.

• Success
  2024-07-11
• Approved
  2024-07-13
• Event start
  2024-07-15

1
2
3
4
5
6
7
8
9

{{< timeline animation=true >}}
events:
  - timestamp: 2024-07-11
    content: Success
  - timestamp: 2024-07-13
    content: Approved
  - timestamp: 2024-07-15
    content: Event start
{{< /timeline >}}

Custom node

Size, color, type and style can be customized in node.

• Custom type and style
  2024-07-19 20:30
• Custom color
  2024-07-19 20:30
• Custom size
  2024-07-19 20:30
• Default node
  2024-07-20 20:30

{{< timeline >}}
events:
  - timestamp: 2024-07-19 20:30
    content: Custom type and style
    type: primary
    node: dot
  - timestamp: 2024-07-19 20:30
    content: Custom color
    color: "#0CBD87"
  - timestamp: 2024-07-19 20:30
    content: Custom size
    size: large
  - timestamp: 2024-07-20 20:30
    content: Default node
{{< /timeline >}}

Custom timestamp

Timestamp can be placed on top of content when content is too high.

• 2024-07-19 20:30
  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint impedit magni soluta esse placeat facilis porro vitae facere explicabo. Architecto exercitationem accusamus omnis reiciendis beatae et inventore deserunt sequi recusandae.
• 2024-07-19 20:30
  Id amet sapiente quod temporibus molestiae? Quasi officia placeat magnam sapiente! Esse iure ipsam quia laboriosam dolorem at dolor est porro placeat, sequi magni maxime vel sint architecto. Placeat, laboriosam?
• 2024-07-19 20:30
  Expedita delectus rerum vitae consequuntur quam, tempore fugit debitis voluptatem praesentium maiores dolorem possimus illum adipisci facere veniam voluptatibus aliquam ipsa ducimus nam impedit cumque! Rerum molestias praesentium expedita! Itaque.

1
2
3
4
5
6
7
8
9

{{< timeline placement=top >}}
events:
  - timestamp: 2024-07-19 20:30
    content: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint impedit magni soluta esse placeat facilis porro vitae facere explicabo. Architecto exercitationem accusamus omnis reiciendis beatae et inventore deserunt sequi recusandae.
  - timestamp: 2024-07-19 20:30
    content: Id amet sapiente quod temporibus molestiae? Quasi officia placeat magnam sapiente! Esse iure ipsam quia laboriosam dolorem at dolor est porro placeat, sequi magni maxime vel sint architecto. Placeat, laboriosam?
  - timestamp: 2024-07-19 20:30
    content: Expedita delectus rerum vitae consequuntur quam, tempore fugit debitis voluptatem praesentium maiores dolorem possimus illum adipisci facere veniam voluptatibus aliquam ipsa ducimus nam impedit cumque! Rerum molestias praesentium expedita! Itaque.
{{< /timeline >}}

MD/HTML Support

Markdown or HTML format is supported in content.

• 🎉 Feat: add timeline support for code blocks
  2024-07-20T22:28:19+08:00
•  Half a year later…
• 🔖 Chore(release): 0.3.0
  2024-01-01T14:54:19+08:00
• ⬆️ Chore: update 0.2.11
  2021-12-19T19:48:23+08:00
•  Developed for a long time…
• Feat: LoveIt => FixIt
  2021-12-18T16:15:22+08:00

{{< timeline reverse=true >}}
events:
  - timestamp: 2021-12-18T16:15:22+08:00
    content: "Feat: [LoveIt](https://github.com/dillonzq/LoveIt) => [FixIt](https://github.com/hugo-fixit/FixIt)"
    type: primary
  - timestamp: 2021-12-19T19:48:23+08:00
    content: ":arrow_up: Chore: update 0.2.11"
  - timestamp: 2021-12-19T19:48:23+08:00
    content: "<span class=\"text-secondary\">:(fa-regular fa-comment-dots): Developed for a long time...</span>"
    hideTimestamp: true
    type: secondary
  - timestamp: 2024-01-01T14:54:19+08:00
    content: ":bookmark: Chore(release): 0.3.0"
    type: success
  - timestamp: 2024-05-20T14:54:19+08:00
    content: "<span class=\"text-secondary\">:(fa-regular fa-comment-dots): Half a year later...</span>"
    hideTimestamp: true
    type: secondary
  - timestamp: 2024-07-20T22:28:19+08:00
    content: ":tada: Feat: add timeline support for code blocks"
    type: danger
{{< /timeline >}}

Multiple Formats

The Timeline data supports three formats: JSON, YAML, and TOML.

Example Timeline input in JSON format:

• Success
  2024-07-11
• Approved
  2024-07-13
• Event start
  2024-07-15

{{< timeline >}}
{
  "events": [
    {
      "timestamp": "2024-07-11",
      "content": "Success"
    },
    {
      "timestamp": "2024-07-13",
      "content": "Approved"
    },
    {
      "timestamp": "2024-07-15",
      "content": "Event start"
    }
  ]
}
{{< /timeline >}}

Example Timeline input in YAML format:

• Success
  2024-07-11
• Approved
  2024-07-13
• Event start
  2024-07-15

1
2
3
4
5
6
7
8
9

{{< timeline >}}
events:
  - timestamp: 2024-07-11
    content: Success
  - timestamp: 2024-07-13
    content: Approved
  - timestamp: 2024-07-15
    content: Event start
{{< /timeline >}}

Example Timeline input in TOML format:

• Success
  2024-07-11
• Approved
  2024-07-13
• Event start
  2024-07-15

{{< timeline >}}
[[events]]
timestamp = "2024-07-11"
content = "Success"

[[events]]
timestamp = "2024-07-13"
content = "Approved"

[[events]]
timestamp = "2024-07-15"
content = "Event start"
{{< /timeline >}}

Hugo Data

Support obtaining data from Hugo site data, with data files defined in the data/timeline directory, and the format supports JSON, YAML, and TOML.

For example, if you have a file data/timeline/example.yml, you can use the data parameter to reference it:

1

{{< timeline data="example" />}}

The rendered output looks like this:

• Success
  2024-07-11
• Approved
  2024-07-13
• Event start
  2024-07-15

File Data

Supports getting data from files in Hugo page-resources or assets, and the format supports JSON, YAML or TOML format.

For example, the current page structure is as follows:

1
2
3
4
5

timeline/
├── data/
│   └── example.yml
├── featured-image.webp
└── index.md

You can use the file parameter to get data from the file:

1

{{< timeline file="data/example.yml" />}}

The rendered output looks like this:

• Success
  2024-07-11
• Approved
  2024-07-13
• Event start
  2024-07-15

Parameters

Timeline

The timeline shortcode has the following named parameters, and the positional parameters ordered from top to bottom:

Parameter	Description	Type	Optional values	Default
reverse	1 whether the node is ascending or descending, default is ascending	boolean	-	false
placement	2 position of timestamp	string	top / bottom	bottom
animation	3 whether to enable animation	boolean	-	false
size	4 node size	string	small / medium / large	medium
node	5 node style	string	circle / dot	circle
width	container width	string	-	-
height	container height	string	-	-
class	container classname	string	-	-
data	Hugo Site data key below timeline scope	string	-	-
file	Data file in page resources or assets	string	-	-

Timeline Events