Homepage    |    GitHub    |    API    |    FAQ

Timeline

Hi

I saw this on Trilium's forum, it looks like a very nice idea, and it would be awesome to have it at some point in Joplin. I am not a developer so I can't help with that myself.

https://github.com/zadam/trilium/discussions/1588

I guess you can do something similar using Gantt diagrams on mermaid.

I use simpler timelines using plain multimarkdown as described in the link.

You can add this on top of your note,

<style>
	dl:before {
    content: ' ';
    background: #d4d9df;
    display: inline-block;
    position: absolute;
    left: 29px;
    width: 2px;
    height: 50%;
    z-index: 400;
/* 	max-height: max-content; */
}

dl > dt:before {
    content: ' ';
    background: white;
    display: inline-block;
    position: absolute;
    border-radius: 50%;
    /* border: 3px solid; */
	/* #5e0900 or #22c0e8 for circle border*/
    left: 20px;
    width: 20px;
    height: 20px;
    z-index: 400;
}
	
dl > dt, dl > dd {
    margin: 6pt 0; /* was 20px */
    padding-left: 60px;
}
	
</style>

Markdown would use definition lists and look like this and rendered version below.

# example 

1066
: September. Harald Hardrada, King of Norway, invades England
: October. William of Normandy defeats and kills Harold II at Hastings.
: ---

1070
: William the Conqueror subdues the north of England
: First Norman stone castle is built in Wales.
: ---

2021
: I made this timeline. 

Note: It it important to enable the deflist syntax in Joplin configuration for this to work.

6 Likes