New Plugin: Timeline

Share & showcase
1

README.md

Example

image
image2013×1404 414 KB

Use + at the beginning of each line:

  • each event has 3 +s at the beginning of the line for time, header and description
  • you can separate them with empty lines if it’s easier for you to write

[] is optional!

You can use [] at the beginning of the code-block to add pre-written classes or your own classes to the wrapper.

Example: [spaced-paragraph, your-class, even-more]

The list of all pre-written classes:

  • white/black changes the main vertical line and dashed line to white/black
  • spaced-paragraph increases the default gap between lines in description’s paragraphs

The time, header and description of each event can do everything Obsidian can do

Special thanks to:

21 Likes
2

Oh my, just the thing I was looking for! Thanks a lot!

2 Likes
3

BTW when are you planning to publish it as a community plugin?

1 Like
5

image
image1319×932 20.2 KB

4 Likes
6

I’m really sorry for the people who couldn’t install it through the obsidian application. It’s fixed now!

3 Likes
7

Hi,
thanks for the great plugin.
I’m having a problem in the difference between the date (left side) and the enplain. text (right side).
For some reason it’s mixed and not following my idea?

time 1
time 1539×560 30.8 KB

time 2
time 2503×507 21.9 KB

Any idea what I’m doing wrong?

1 Like
8

You should only have 3 plus sign per event. Use + at the beginning of each line for time, header and description (in that order)

So, the + Laberrabaerhabberöabber line starts a new event and this text becomes the label for its “time”. From then on, lines starting with “+” are out of place.

2 Likes
9

this is super great plugin
thank you for the plugin

this plugin actually gives me hope for similar flow chart plugin

10

Screenshot (130)
Screenshot (130)1920×1080 199 KB

Screenshot (129)
Screenshot (129)1920×1080 201 KB

Hey can you help me. I just installed this plugin and also enabled it. But it is not rendering timeline. After enabling it, I wrote this in my daily note for testing purposes. Do I need to do something else to render it?

  • = (Plus sign)

(Three ticks)Timeline

  • 2000

  • Heading1

  • Description1

  • 2005

  • Heading2

  • Description2

  • 2010

  • Heading3

  • Description3

  • 2015

  • Heading4

  • Description4
    (Three ticks)

1 Like
11

Im having the same issue as you. It is not rendering.

1 Like
12

Hello. May I ask can this plugin also work on iOS like iPhone & iPad?

13

@gourav @cattenbb That’s probably because you haven’t included “timeline” at the top. It also has to be lowercase:)

```timeline
+ 1918
+ Treaty of Versailles
+ Happened in Paris
```
1 Like
14

I am having the same issue, even when copying your code

1 Like
15

thank you for this! unfortunately, it is not rendering the timeline after i published it. the timeline is there in obsidian, just not in my published obsidian page. am i missing something?

16

it could be that you didn’t include the ``` at the end of the code. Or you didn’t install and enable the plugin correctly

17

i have the same problem. after hitting publish, i only see lines of code after enabling the plugin and adding ```

18

hello. sorry for multiple pings. the timeline displays in obsidian correctly but i am unable to see it in my published site

19

Can we combine dataview with this?

20

hmm, I’m not sure why it’s not displaying correctly, haven’t used Obsidian publish yet. Maybe try to refresh or try to publish the page again.

21

Hey, you’ve probably already found a working solution for yourself, but I can answer your question about the timeline not rendering on your published site. This problem will come up for any community plugin that changes some CSS inside of obsidian. Sadly, the publish feature can’t keep up with that and won’t be able to render these plugins and the content of those correctly. It’s the same with the admonition plugin, that’s why you should always use callouts if you wanna publish.