# Timelinear
<span class="image-right">![[Timelinear-2024-12-08-ca14734b30518b378d90914fe46a09f8.webp]]</span>
A performant timeline, without dataviews.
## Installation
To use this component, you must have the [Emera](https://github.com/OlegWock/obsidian-emera) plugin installed as well as [[Emera Component Manager]]
To install, open ECM and click `Add Component`, then add the url:
```
https://pkg.elk.wtf/Timelinear/manifest.json
```
You will also need to add the following css snippet ([instructions here](https://help.obsidian.md/Extending+Obsidian/CSS+snippets) if you don't know how to add css snippets):
```css
.timeline {
margin: 4em auto;
position: relative;
max-width: 46em;
}
.timeline:before {
background-color: var(--color-accent-1);
content: "";
margin-left: -1px;
position: absolute;
top: 0;
left: 2em;
width: 2px;
height: 100%;
}
.timeline li {
list-style-type: none;
position: relative;
margin-left: 2em;
padding: 1em 0;
}
.timeline-event {
position: relative;
}
.timeline-event:hover .timeline-event-icon {
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
background-color: var(--color-accent-1);
}
.timeline-event-content {
padding: 2em;
position: relative;
top: -1.875em;
left: 4em;
width: 80%;
}
.timeline-event-content h3 {
font-size: 1.75em;
}
.timeline-event-content h4 {
font-size: 1.2em;
margin-bottom: 1.2em;
}
.timeline-event-content strong {
font-weight: 700;
}
.timeline-event-content p:not(.timeline-event-time) {
padding-bottom: 1.2em;
}
.timeline-event-icon {
-moz-transition: -moz-transform 0.2s ease-in;
-o-transition: -o-transform 0.2s ease-in;
-webkit-transition: -webkit-transform 0.2s ease-in;
transition: transform 0.2s ease-in;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
background-color: var(--color-accent-1);
outline: 10px solid var(--background-primary);
display: block;
margin: 0.5em 0.5em 0.5em -0.5em;
position: absolute;
top: 0;
left: 0;
width: 1em;
height: 1em;
}
```
### Requirements
Timelinear requires `sugar`. It will be automatically installed if you don't have it already :)
## Usage
To use the Timelinear, open up the note you want to embed it in and use:
```
`emera:<Timelinear path="path/to/your/dated/notes" property="date" />`
```
Pointing to the appropriate path that contains your notes with dates. The `property` field allows you to specify what frontmatter property to read the date from.