Decide How Timeline Hierarchy Will Be Modelled

[JamieB-gu]

The current model for list-based elements looks something like this (expressed as a TS type) ¹:

type ListElement = {
  list: ListItem[];
  type: 'key-takeaways' | 'q-and-a-explainer';
}

type ListItem = {
  elements: Element[];
  title?: string;
}

This allows us to represent content with the following shape:

## Key Takeaway One
Some text.
[An image]
Some text.

## Key Takeaway Two
[An image]
Some text.
Some more text.

This has a single level of hierarchy: each list item has a heading (most likely corresponding to an h2 in HTML terms) and some content.

However, the design for timelines suggests content with the following shape:

## First Time Period (e.g. January, or 2012)

### Event With Specific Date (e.g. 3rd of January)
Some text.
[An image]
Some text.

### Event With Specific Date (e.g. 8th of January)
Some text.
[An image]
Some text.

## Second Time Period (e.g. February, or 2013)

### Event With Specific Date (e.g. 12th of February)
Some text.
[An image]
Some text.

How should we represent this content in the model? The options considered so far include:

1. An algorithm that calculates the time period headings automatically. For example, if more than one event occurs in January, it generates a "January" heading.
2. Breaking the article into multiple list elements, each of which sits beneath a separate heading. For example, a heading for January is created in Composer, and a list element for the January events is placed under that.
3. Inserting a ListItem with an empty list of elements to represent a title only.
4. Change the model

Footnotes

1. https://github.com/guardian/content-api-models/pull/233 ↩

[JamieB-gu]

A branch for this is here: guardian/content-api-models@main...timeline-model