Timeline

Polymathic comes with template for building timelines from your content. Timeline renders pages according to their parent section's page_thumbnails or page thumbnail.

Timeline may behave unexpectedly when rendering overlapping time spans. Feel free to open an issue or propose your solution.

Add a timeline page front-matter

Add a page where you want to display the timeline. It can be a section or page.

Specify sections or individual pages to be included in the timeline in [extra.poly.timeline] content.

Use the template="timeline.html" in your content

    +++
    title="Timeline title"
    template="timeline.html"
    [extra.poly.timeline]
    content=[
      "section/_index.md", # pages from section
      "section/subsection/_index.md", # pages from subsection 
      "another-section/some-page/index.md", # and a page
    ]
    +++

    Content displayed in aside

Format dates

See chrono for format specification

    +++
    title="Timeline title"
    template="timeline.html"
    [extra.poly.timeline]
    format="%Y-%m-%d %H:%M"
    content=[
      ...
    ]
    +++

Reverse

    +++
    title="Timeline title"
    template="timeline.html"
    [extra.poly.timeline]
    reverse=true
    +++

Limiting and offsetting

Limit the size of timeline or offset it.

[extra.poly.timeline] limit limits the number of entries in timeline and adds a button to end of the timeline. You can configure count, text, and next url.

[extra.poly.timeline] offset offsets the start of entries in timeline and adds a button before the timeline. You can configure count, text, and previous url.

You would need to define separate content entries for each segment of the timeline

    +++
    title="Timeline title"
    template="timeline.html"
    [extra.poly.timeline]
    offset={ count=4, url="/timeline/0", text="previous" }
    limit={ count=4, url="/timeline/2", text="next" }
    +++

Add dates to all timeline pages

Add date in front matter of the page or use the filename date.

Template will throw an error if there's no date.

Span timestamps

date is always used for sorting.

Set [extra.poly.timeline] start_date, then page date will be treated as end_date.

Set [extra.poly.timeline] end_date, then page date will be treated as start_date.

Set [extra.poly.timeline] end_date and [extra.poly.timeline] start_date, date property will be only used for sorting the timeline.

    +++
    title="My page"
    date=2023-10-31
    [extra.poly.timeline] 
    start_date=2023-10-01
    end_date=2023-11-01
    +++

Vague dates

When the actual date is vague like "2020's" you can set [extra.poly.timeline] vague of your page to true or a "string".

Then dates are still used for ordering and positioning but timeline displays your custom value or nothing on that segment instead of formatted date.

    +++
    title="My page"
    date=2023-10-31
    [extra.poly.timeline] 
    vague="Once upon a time"
    +++