Multiline content in Timeline plugin

marcemv90 commented 2 years ago

Hello @RobertoPrevato, first of all congratulations for the great plugins! those are just amazing!

I'm now playing around with the timeline plugin, and just figured out that multi lined content is only possible by typing <br/> inside the content.

I would expect that the following snippet renders to multiple lines, as per https://yaml-multiline.info

- content: |
    Lorem ipsum
    dolor sit amet,
    consectetur adipiscing elit.
  icon: ':fontawesome-solid-gem:'
  sub_title: 2022-Q2
  title: New features

But it renders to a single one:

I'm not sure whether this is the intended behaviour or not, but raising it up here just in case.

Thanks again for the beautiful plugins.

Regards!

RobertoPrevato commented 2 years ago

Hi @marcemv90, Thank You for your kind words, and for opening this issue. You have a very good point! As you may already know, this is a common issue in HTML, since carriage returns ("\r\n" or "\n" characters) are collapsed by default in most HTML elements.

The good news is that my Python code relies on PyYAML and the built-in json package to parse YAML and JSON, so carriage returns are maintained. I didn't verify, yet, but I also expect that the library used to generate HTML doesn't remove carriage returns from texts. There is something missing in the CSS rules, though. Can you please try to apply the following change to the CSS file (either using a dedicated css file, or modifying the one provided with these plugins)?

.nt-timeline .nt-timeline-content {
    white-space: pre-line;
}

+.nt-timeline .nt-timeline-content {
+    white-space: pre-line;
+}

And let me know if it helps? We can include this rule in the CSS file.

marcemv90 commented 2 years ago

Hi @RobertoPrevato, it works like a charm 🚀

Neoteroi / mkdocs-plugins

Multiline content in Timeline plugin #25