Timeline snippet

[5e-Cleric]

You can see the snippet in this brew: https://homebrewery.naturalcrit.com/share/VF33QNkUHuWJ
It is a bit dated, as i get a deployment i will post a real example.

ToDo:

• Units to cm or mm
• Simplify Syntax

[calculuschild]

I'm not opposed to adding a timeline like this, even if it doesn't match an existing PHB styling.

However I am concerned about the sheer size and complexity of the Markdown and CSS here (~200 lines of CSS!). Compared to our current "most complicated" element, the Monster Stat block is only 80 lines of CSS.

Let me add a deployment for this though and maybe we can find ways to simplify this down. I also wonder if maybe this would be better suited as a Mermaid feature.

[5e-Cleric]

I understand your concerns, although i am more concerned with the markdown syntax than the CSS involved, which isn't much, all things considered.

The biggest problem is that all calculus is done via CSS, which means the snippet needs to have inline CSS to establish the position inside the timeline, therefore we need curly spans or blocks for each element inside.

The amount of CSS comes from two places, one, making every event have text, an icon(after element) and the date(before element), and the ability to make it vertical.

Also because of the three types of elements you can add inside, events, ranges and points.

I did go a little bit crazy with customization, although i did remove variables i was using which were innecessary.

[5e-Cleric]

Question, if this was implemented via mermaid.js, what would syntax look like?

[ericscheid]

Question, if this was implemented via mermaid.js, what would syntax look like?

https://mermaid.js.org/syntax/timeline.html

```mermaid
timeline
    title History of Social Media Platform
    2002 : LinkedIn
    2004 : Facebook
         : Google
    2005 : Youtube
    2006 : Twitter
```

See also mermaid-js/mermaid#2268

[5e-Cleric]

random thought, maybe if i made the :after element to be a background image (svg) in the element itself, or the :before`, i could get this down...10 lines or so, will get a crack at it later.

[dbolack-ab]

random thought, maybe if i made the :after element to be a background image (svg) in the element itself, or the :before`, i could get this down...10 lines or so, will get a crack at it later.

Any luck with that?

[5e-Cleric]

Any luck with that?

Actually no, tried, but hit some problems, would have to refactor the entire thing to do that, and probably have to deal with more, not less css

[Gazook89]

My two cents: I don't see timelines as a commonly requested feature, nor very many timelines in the (admittedly few) brews I do look at. I have created some timelines for people in the past, but each time they requested something specific to their use-case. So I personally would hesitate to add a pre-made snippet for timelines, especially with the added complexity to the markdown and to the css.

Mermaid.js seems like a much better option for this, and that PR should move forward.

In the meantime, I would leave this as a single brew resource that can be included in the subreddit/github wiki, for now.

If that sounds reasonable, this PR could be closed, but I'll leave that to @5e-Cleric after any further discussion.

[5e-Cleric]

Sounds reasonable. It can be later added to any other theme, so i am okay closing this for now as a PHB snippet.

The brew should stay up for years, so anyone should be able to find it.