Coder Social home page Coder Social logo

obsidian-timeline's People

Contributors

george-debug avatar welding-torch avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

obsidian-timeline's Issues

[feature request] Timelines spacing proportional to the dates

Hi there
Is there a way to be able to have kind of spacing between paragraphs wich is proportional to the sate spacing, ie, if I have:Jan, Feb, Dec that Jan & Feb are close to each other and Dec is further down.
Of course this should be optional and there would be the need to use date formats and a date format qualifier but just managing this via empty lines should be doable.

What do you think ??
Rui

Line Stops Rendering After 500 Entries

I have a timeline with 1340 items in it and after scrolling 1/3 ish of the way down the timeline, the line itself stops rendering. The dots and other stuff like the body, title and time still appear, but the line itself just abruptly ends.

After some fooling around, I've discovered it's after exactly 500 entries no matter the style used.

Hope this isn't too much of a bother for you to fix.

Plugin does not activate on iOS

Hi @George-debug
I just realised that the plugin would not load after its last update on iOS. I mostly use Obsidian for mobile and cannot use it anymore. It works fine on my Mac though.
Would you know why and/or require more info on my Obsidian setup?
Thanks in advance


iOS: 14.8
Obsidian for iOS: 1.0.4

Feature Request: Horizontal Scroll by Date/Time in the timeline

A Horizontal Scroll bar for timeline that scrolls by date/time in the order mentioned.

 ```timeline
 + pre</br> 17th century
 + Origins of coffee
 + The modern version of roasted coffee originated in Arabia. During the 13th century, coffee was extremely popular with the Muslim community  beans resulted in a new and competitive European coffee trade.

 + 17th century
 + Europe and coffee
 + In 1616, the Dutch founded the first European-owned coffee estate in Sri Lanka, then Ceylon, then Java in 1696. The French began growing coffee in the Caribbean, croissant at the numerous coffee cafes throughout Paris.
 ```

So the date scroll will scroll from :
< --- (first) pre-17th century -------------------------------- 17th century (last) --->

Does not work for mobile?

Using the latest insider iOS build (1.4.2), not able to turn on the plugin.

The CSS snippets also is not rendered correctly in the reading view.

Other notes linked in timeline do not show as links in graph

I use Obsidian for drafting posts for my blog, and I'm using this addon for timelines of posts I make under certain topics. I link the notes for the posts in the timeline items, but links between the note with the timeline and the note with the blog post draft never form in the graph view. Maybe a bit of an odd request, but it'd be nice if this were fixed as I find the graph view somewhat important for my system of organization. Thanks for your time.

Text vanishing after inserting YAML

Hi there,

Thank you for the great plugin!

I'm just having some trouble making the plugin work correctly. After adding
--- cssclass: timeline ---
to the top of the note, all the remaining text in the note (that is not part of the timeline) can no longer be seen. The text is still there because the word count reflects this and it will appear in reading view but I can't edit the remaining content.

I thought it might have to do with live preview so I switched this off. I've also tried toggling between editing and reading mode and toggling between live preview and source mode.

Any help or advice is greatly appreciated.

Integration of Aeon Timeline

I bought this a long time ago:
https://timeline.app/

What keeps me from using it is the overlap with my writing tools. I want to avoid ending up with text changes in two places. Aeon offers sync with Scrivener, but I never warmed up to the design and methodology of that program. They also offer ulysses, but I do not work on Mac.

Syncing Obsidian with Aeon would be GREAT, though!!!

Here, they explain the feature with Scrivener and Ulyseses:
https://timeline.app/integrations/

Plugin Test

Hi!

I tested the plugin and ran into two small problems. I will describe them below and also attach technical information. If you want, you can put each problem in a separate issue for convenience.

Some tech info

  • OS: Mac OS Big Sur 11.4
  • Obsidian version: v0.12.10
  • Obsidian theme: Discordian 0.8.6

Issue 1

I tried using headers and it didn't work. I get the text generated instead.

Some Pics

Снимок экрана 2021-07-12 в 14 07 28
Снимок экрана 2021-07-12 в 14 07 34

Issue 2

It seemed to me that the distance between the header (e.g. H1) and the timeline is not enough. This makes the text formatting look bad.

I think it would be nice to add some «air» between the timeline and the headings. If it's possible of course.

Some Pics

Снимок экрана 2021-07-12 в 14 09 09

Request - ability to change colour of single entries

Currently the colours only get applied at start of the timeline block and is applied to the whole timeline.

I'd like to see the ability to apply colours to single entries , e.g. red to highlight significant event

timeline-labeled works, timeline does not

Please verify that this is not user error and that timeline is broken in Obsidian 1.3.7.

Expected behavior:
A front matter with timeline will create a timeline as shown in the plugin readme.

Observed behavior:
Even with all plugins disabled, inserting a timeline will display a blank page in both editing and reading views which is locked and cannot be edited further. The only workaround is to delete the file and start over.

The timeline-labeled front matter does not seem affected.

Does this plugin supports periods ?

Is it possible to add periods to the timeline (= an event with a specified length) ? If so, is it possible to add several parallel periods ?

Exemple of desired behavior (from Aeon Timeline) :

image

Thank you

Clarification

Hay the instructions on customization in you plugin page are a bit unintuitive, I can't figure out how to use the css classes in the timeline code. I get it maybe intuitive to someone who learned css but I don't have that unfortunately.

Optional title

Is there a way to make titles optional without there being a large gap at the top of the timeline item?

Suggestion: Move the text to the second line in `line for time`

Hi!

I thought it would be cool to be able to move the line for time text to a new line with the command <br> for example. This will allow you to add long expressions to the header without affecting the reading.

As you may have noticed, if you add too long text to the header, the whole time line starts to "plush". I recorded a short video with an example below.

Video example

2021-07-12.14.25.49.mov

[Feature Request]Support formatting out of codeblock

Thanks for making this great plugin. A structured timeline view will be extremely useful for chronologically taking evergreen notes on researchers, academic debates, status of specic fields and so on.

However I was disappointed to find that linking inside codeblocks isn't fully supported by Obsidan. The links are clickable, but won't create a link between notes in graph and notes won't appear in the "linked mentions" panel. So it would be great for this plugin to read formatting outside codeblocks to fit the Zettelkasten-philosophy of Obsidian.

One suggestion on formatting is nested bullet points, which has also a clear view in edit mode:
21-07-17_K04RPq5a

Horizontal layout

The title says it all. Allowing for a switch in layout would give users added options for displaying their data and also expand the plugins use to the area of project management (think GANTT in Markdown). For such use cases, the plugin would need to allow for multiple timelines.

Multiple timelines

What a GREAT idea and plugin! Thank you!

I wonder: would it be possible to allow for multiple timelines? This would greatly expand the use of this plugin for writers plotting storylines for multiple characters while at the same time keeping all the context in a visual way.

Ideally, this would also allow for multiple colors for the respective entries for easier overview.

Suggestion & Discussion: Ability to use Markdown markup in timeline elements (plugin)

1. Idea Overview

The main idea is to allow the user to use Markdown markup in various elements of the plugin.

Here I am talking about:

  • date
  • event title
  • event content

2. Entering syntax

Now the + symbol is used to add an event to the timeline. I find it inconvenient for several reasons:

  1. It's hard for a person to read
  2. This symbol may need to be used. Unlikely, but not impossible.

2.1. Here I suggest

Introduce a simple, human-readable syntax, for example:

  • date:
  • event-title:
  • event-content: / event-desc:

Here I have tried to depict human-readable examples. They are not definitive, perhaps you will find better options.

3. Allow the user to use Markdown markup in various elements

Why? So that the user has the ability to style the timeline with Markdown markup. Little room for styling as well as content management.

3.1. Examples of use

date: ### 26 December <br> 1991

event title: # Dissolution of the Soviet Union

event-content: The dissolution of the Soviet Union[b] (1988–1991) was the process of internal disintegration within the Soviet Union, which began with growing unrest in its various constituent republics developing into an incessant political and legislative conflict between the republics and the central government, and ended when the leaders of three primal republics (the Russian SFSR, the Ukrainian SSR and the Byelorussian SSR) declared it no longer existed, later accompanied by 11 more republics, resulting in President Mikhail Gorbachev having to resign and what was left of the Soviet parliament formally acknowledging what had already taken place.

Note the markdown syntax. The user can select the size of the header (H1-H6). Italic or Bold or strikethrough text.

3.2. Allowed syntax for timeline elements

To avoid turning the timeline into a visual circus, I propose to introduce some restrictions for elements.

date (Allowed syntax)

  • Headers
# Heading level 1 
## Heading level 2 
### Heading level 3 
#### Heading level 4 
##### Heading level 5 
###### Heading level 6 
  • Line breakers aka <br> (already work)
  • Bold
  • Italic
  • Bold & Italic
  • Strikethrough
  • Links

event-title (Allowed syntax)

  • Headers
# Heading level 1 
## Heading level 2 
### Heading level 3 
#### Heading level 4 
##### Heading level 5 
###### Heading level 6 
  • Line breakers aka <br> (already work)
  • Bold
  • Italic
  • Bold & Italic
  • Strikethrough
  • Links

event-description (Allowed syntax)

  • Headers
# Heading level 1 
## Heading level 2 
### Heading level 3 
#### Heading level 4 
##### Heading level 5 
###### Heading level 6 
  • Line breakers aka <br> (already work)
  • Bold
  • Italic
  • Bold & Italic
  • Strikethrough
  • Links
  • Tables
  • Quotes
  • Lists
  • Tasks
  • Numbered Lists

3.3. Default state

I also suggest adding a default state. This is for cases where, for example, the user does not use markdown for timeline elements.

In this case, the timeline is displayed "by default". For example as you have it now.


PS: If the idea(s) turn out to be interesting, I can describe more timeline styling features in stages. But do not overload it too much, so that it remains simple and readable.

spaced-paragraph and white/black classes don't seem to do anything

This timeline text (no spaced-paragraph class):

```timeline
+ time1
+ header
+ description line 1

description line 2

description line 3

+ time2
+ header
+ description line 1

description line 2

description line 3
```

And this timeline text (with a spaced-paragraph class):

```timeline
[spaced-paragraph]
+ time1
+ header
+ description line 1

description line 2

description line 3

+ time2
+ header
+ description line 1

description line 2

description line 3
```

Appear to render exactly the same. Is the spaced-paragraph class supposed to change the way the text renders?

Timeline Export to HTML/website

Hi,
I'm loving the timeline - thank you so much for the work put into developing this idea. It's been working great - using a nice image embedded with each time block.

However, as a non-native obsidian plugin, it does not play well with Publish. When publishing dataview files, I have been able to copy the code from the developer tools, but I am having no luck doing that with the timeline. Do you have any advice as to which part of the code I need to copy over to create a stand alone file that I can use with obsidian Publish?

Thanks!

Nik

Altered the snippet to work within callouts so that other lists in a note are unaffected

First, thank you so much for this plugin and snippet!

I used the snippet with great success in some notes. However, I was running into issues where I wanted to have both a timeline and a list in the same note. So I modified the snippet CSS so that it only works inside a callout called "timeline". e.g.

>[!timeline]
>- Date
>- First thing that happened
>- Something grand and [[wonderful]] happened first on this date. Happy.
>
>- Date 2
>- Another thing occured
>- A less good thing occured on this date.[^1] Sad.

In the CSS I also altered the cssclass names so that they're more human readable (I have Memory Impairment and there was no way I would remember what line-4 or body-2, etc. would mean). They are as follows:
line-2 -> timeline-line-2
line-3 -> timeline-line-3
line-4 -> timeline-line-4
etc.

body-2 -> timeline-box-2
body-3 -> timeline-box-3
etc.

There's an added cssclass that can be added to the YAML to hide the callout title so it can fit in better with the rest of the note: timeline-hide-title

There's some other minor changes as noted in the CSS comments.

Full altered CSS snippet as follows:

CSS Code
.callout[data-callout="timeline"] { /* Remove background of callout, change the icon to a clock and give it the same colour as an H2 title */
  background: none;
  --callout-icon: clock;
  --callout-color: var(--h2-color);
}

.timeline-hide-title .callout[data-callout="timeline"] .callout-title { /* Add "timeline-hide-title" to YAML cssclass to optionally hide the timeline callout title */
  display: none;
}

/***** Following has been adapted from: https://github.com/George-debug/obsidian-timeline/tree/master/src/style/snippet *****/

.callout[data-callout="timeline"].spaced-lines ul:not(ul ul) > li:nth-child(3n) p {
  line-height: 1.7rem;
}

.callout[data-callout="timeline"] {
  --timeline-active-color: var(--text-accent); /* Had to change this from --timeline-active-color to --text-accent because it was coming up as "not defined" resulting in some funky colours */
}

.callout[data-callout="timeline"].active-color-background-modifier-success {
  --timeline-active-color: var(--background-modifier-success);
}

.callout[data-callout="timeline"].active-color-background-modifier-error {
  --timeline-active-color: var(--background-modifier-error);
}

.callout[data-callout="timeline"].active-color-background-modifier-error-hover {
  --timeline-active-color: var(--background-modifier-error-hover);
}

.callout[data-callout="timeline"].active-color-text-accent {
  --timeline-active-color: var(--text-accent);
}

.callout[data-callout="timeline"].active-color-text-accent-hover {
  --timeline-active-color: var(--text-accent-hover);
}

.callout[data-callout="timeline"].active-color-text-error {
  --timeline-active-color: var(--text-error);
}

.callout[data-callout="timeline"].active-color-text-error-hover {
  --timeline-active-color: var(--text-error-hover);
}

.callout[data-callout="timeline"].active-color-text-selection {
  --timeline-active-color: var(--text-selection);
}

.callout[data-callout="timeline"].active-color-interactive-accent {
  --timeline-active-color: var(--interactive-accent);
}

.callout[data-callout="timeline"].active-color-interactive-accent-hover {
  --timeline-active-color: var(--interactive-accent-hover);
}

.callout[data-callout="timeline"].active-color-interactive-success {
  --timeline-active-color: var(--interactive-success);
}

.callout[data-callout="timeline"] ul:not(ul ul) {
  display: grid;
  grid-template-columns: auto auto 1fr;
  column-gap: 1.5rem;
  margin: 2.3rem 0;
}
.callout[data-callout="timeline"] ul:not(ul ul) > li {
  list-style: none;
}
.callout[data-callout="timeline"] .list-bullet { /* For some reason bullets still show without this */
  display: none;
}
.callout[data-callout="timeline"] ul:not(ul ul) > li > *:first-child {
  margin-top: 0;
}
.callout[data-callout="timeline"] ul:not(ul ul) > li > *:last-child {
  margin-bottom: 0;
}
.callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n), .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+2) {
  grid-column: 3;
}
.callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+1), .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+2) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.4em 0;
  font-size: 1.3rem;
  font-weight: bold;
}
.callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+1) > *, .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+2) > * {
  font-size: 1.3rem;
  font-weight: bold;
}
.callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+1) {
  grid-column: 1;
  position: relative;
  justify-self: right;
  text-align: right;
}
.callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+1)::before, .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+1)::after {
  content: " ";
  position: absolute;
  height: 100%;
  width: 0.5rem;
  right: -2rem;
  top: 0;
}
.callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+1)::before {
  background-color: var(--background-primary);
}
.callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+1)::after {
  background-color: var(--text-normal);
  opacity: 0.25;
}
.callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n) {
  position: relative;
  margin-bottom: 4.5rem;
  padding-top: 0.4em;
}
.callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n)::after {
  content: " ";
  position: absolute;
  border-bottom: 0.1rem dashed var(--text-normal);
  opacity: 0.1;
  width: 100%;
  left: 0;
  bottom: -2.25rem;
  transform: translateY(50%);
}
.callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n):last-child {
  margin-bottom: 0.4em;
}
.callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n):last-child::after {
  display: none;
}
.callout[data-callout="timeline"] ul:not(ul ul)::before {
  content: "";
  height: 100%;
  width: 0.5rem;
  grid-column: 2/span 1;
  grid-row-start: 1;
  grid-row-end: span 1000;
  background-color: var(--text-normal);
  opacity: 0.1;
}

.timeline-box-2 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+2), .timeline-box-2 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n), .timeline-box-3 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+2), .timeline-box-3 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n), .timeline-box-4 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+2), .timeline-box-4 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n) {
  background-color: var(--background-primary-alt);
}
.timeline-box-2 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n), .timeline-box-3 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n), .timeline-box-4 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n) {
  margin-bottom: 2.25rem;
}
.timeline-box-2 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n):last-child, .timeline-box-3 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n):last-child, .timeline-box-4 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n):last-child {
  margin-bottom: 0.4em;
}
.timeline-box-2 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n)::after, .timeline-box-3 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n)::after, .timeline-box-4 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n)::after {
  display: none;
}

.timeline-box-2 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n), .timeline-box-2 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+2), .timeline-box-4 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n), .timeline-box-4 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+2) {
  padding: 1.5rem;
  padding-top: 0.4em;
}
.timeline-box-2 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+2), .timeline-box-4 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+2) {
  padding-bottom: 0;
}
.timeline-box-2 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+1), .timeline-box-4 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+1) {
  margin-top: 0.4em;
}

.timeline-box-2 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+2) {
  border-radius: 1.5rem 1.5rem 0 0;
}
.timeline-box-2 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n) {
  border-radius: 0 0 1.5rem 1.5rem;
}

.timeline-box-3 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+2), .timeline-box-3 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n) {
  margin-left: 1rem;
}
.timeline-box-3 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+2) {
  position: relative;
  background: var(--timeline-active-color);
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.timeline-box-3 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+2)::before {
  content: "";
  position: absolute;
  width: 2rem;
  background: var(--timeline-active-color);
  top: 0;
  bottom: 0;
  left: -1rem;
  clip-path: polygon(1rem 0, 100% 0, 100% 100%, 1rem 100%, 0 50%);
}
.timeline-box-3 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n) {
  padding: 1.5rem;
}

.timeline-box-4 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+2), .timeline-box-4 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n) {
  border-left: 0.3rem solid var(--timeline-active-color);
}

.timeline-line-2 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+1)::before, .timeline-line-2 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+1)::after {
  right: -2.2rem;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
}
.timeline-line-2 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+1)::before {
  height: 1.2rem;
  width: 1.2rem;
}
.timeline-line-2 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+1)::after {
  background: transparent;
  border: 0.2rem solid var(--text-normal);
  height: 0.8rem;
  width: 0.8rem;
  opacity: 0.15;
}
.timeline-line-2 .callout[data-callout="timeline"] ul:not(ul ul)::before {
  width: 0.2rem;
  opacity: 0.15;
}

.timeline-line-3 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+1)::before {
  background: var(--timeline-active-color);
  height: 1rem;
  width: 1rem;
  border: 0.3rem solid var(--background-primary);
  right: -2.45rem;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
}
.timeline-line-3 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+1)::after {
  background: transparent;
}
.timeline-line-3 .callout[data-callout="timeline"] ul:not(ul ul)::before {
  width: 0.3rem;
  opacity: 0.15;
}

.timeline-line-4 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+1)::before, .timeline-line-4 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+1)::after {
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
}
.timeline-line-4 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+1)::before {
  background: var(--text-normal);
  height: 1.3rem;
  width: 1.3rem;
  right: -2.225rem;
}
.timeline-line-4 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+1)::after {
  opacity: 1;
  background: var(--timeline-active-color);
  height: 0.85rem;
  width: 0.85rem;
  right: -2rem;
}
.timeline-line-4 .callout[data-callout="timeline"] ul:not(ul ul)::before {
  opacity: 1;
  width: 0.15rem;
  background-color: transparent;
  background-image: linear-gradient(var(--text-normal) 60%, rgba(255, 255, 255, 0) 0%);
  background-position: right;
  background-size: 0.15rem 1.5rem;
  background-repeat: repeat-y;
}

.timeline-line-5 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+1)::before, .timeline-line-5 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+1)::after {
  top: 50%;
}
.timeline-line-5 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+1)::before {
  width: 3rem;
  height: 3rem;
  right: -3.1rem;
  transform: translateY(-50%);
}
.timeline-line-5 .callout[data-callout="timeline"] ul:not(ul ul) > li:nth-child(3n+1)::after {
  width: 1rem;
  height: 1rem;
  right: 0;
  transform: translateY(-50%) translateX(2.1rem) rotate(45deg);
}
.timeline-line-5 .callout[data-callout="timeline"] ul:not(ul ul)::before {
  width: 0.2rem;
  opacity: 0.25;
}
Thanks again! :)

Nested entries?

I might just be missing something and this is already possible, but I'd like the option to list several different events under the same main "date" segment.

For instance, I want it to be able to say:

2001

Sep 11, 2001
World Trade Center attacks

Dec 2, 2001
Enron files for bankruptcy

Dec 11, 2001
NRDC files suit against the DOE

Is this possible?

similar plugin for flow chart possible

hi developer,
the timeline plugin is super great , because its super simple and doesnt interrupt workflow.

is it possible to make a similar plugin for simple flow chart (if possible with one or 2 branches)

thank you

Title only entry

Would it be possible to have a timeline entry that only has a title, without content? I can leave the content line blank, but there still ends up being a space for it. Would it be possible to collapse the body up so that there is not the awkward space for the empty content in this case?

CleanShot 2022-07-27 at 22 23 18@2x

Problematic interaction with Tasks plugin

After updating a bunch of plugins I noted a strange behavior with nodes populating in the graph that shouldn't be there. I eventually traced back this to Timeline interacting with the Tasks plugins query results.

I use the Tasks plugin to query tasks in my daily notes, ranging all from no due dates, due within 7 days and all sorts of things. These are located on the bottom of my daily notes. These results from Tasks plugin queries do not create nodes in the graph as is the expected behavior.

With Timeline activated since the latest update, as soon as a task is toggled within a note the graph is populated with nodes from these Tasks query results, suddenly filling up the local graph with a lot of nodes. If Obsidian is restarted the graph is no longer populated, but as soon as another task is toggled it will populate with these again.

Looking in the latest changelog I see "The plugin creates nodes between files", could this be the cause for this behavior? Would it be possible to detect if Tasks is used with Timeline, or even a setting that can be toggled, to prevent this from happening?

Thank you for a great plugin.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.