Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-31 02:16:05 +01:00
Code Issues Packages Projects Releases Activity

feat(docs): improve documentation for code notes, code blocks

Browse Source
This commit is contained in:
Elian Doran
2025-03-12 12:13:51 +02:00
parent 4f87bd101e
commit e9175d60ec
77 changed files with 1535 additions and 685 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
docs/User Guide/User Guide/Advanced Usage/Advanced Showcases/Task Manager.md
View File

@@ -1,5 +1,5 @@
# Task Manager
Task Manager is a [promoted attributes](../Attributes/Promoted%20Attributes.md) and [scripts](../Code%20Notes/Scripts.md)showcase present in the [demo notes](../Database.md).
Task Manager is a [promoted attributes](../Attributes/Promoted%20Attributes.md) and [scripts](../../Note%20Types/Code/Scripts.md)showcase present in the [demo notes](../Database.md).
## Demo
@@ -15,7 +15,7 @@ New tasks are created in the TODO note which has `~child:template` [relation](..
### Attributes
Task template defines several [promoted attributes](../Attributes/Promoted%20Attributes.md) - todoDate, doneDate, tags, location. Importantly it also defines `~runOnAttributeChange` relation - [event](../Code%20Notes/Events.md) handler which is run on attribute change. This [script](../Code%20Notes/Scripts.md) handles when e.g. we fill out the doneDate attribute - meaning the task is done and should be moved to "Done" note and removed from TODO, locations and tags.
Task template defines several [promoted attributes](../Attributes/Promoted%20Attributes.md) - todoDate, doneDate, tags, location. Importantly it also defines `~runOnAttributeChange` relation - [event](../../Note%20Types/Code/Events.md) handler which is run on attribute change. This [script](../../Note%20Types/Code/Scripts.md) handles when e.g. we fill out the doneDate attribute - meaning the task is done and should be moved to "Done" note and removed from TODO, locations and tags.
### New task button
@@ -46,7 +46,7 @@ api.addButtonToToolbar({
In the demo screenshot above you may notice that TODO tasks are in red color and DONE tasks are green.
This is done by having this CSS [code note](../Code%20Notes.md) which defines extra CSS classes:
This is done by having this CSS [code note](../../Note%20Types/Code.md) which defines extra CSS classes:
```
span.fancytree-node.todo .fancytree-title {
@@ -58,6 +58,6 @@ span.fancytree-node.done .fancytree-title {
}
```
This [code note](../Code%20Notes.md) has `#appCss` [label](../Attributes.md)which is recognized by Trilium on startup and loaded as CSS into the application.
This [code note](../../Note%20Types/Code.md) has `#appCss` [label](../Attributes.md)which is recognized by Trilium on startup and loaded as CSS into the application.
Second part of this functionality is based in event handler described above which assigns `#cssClass` label to the task to either "done" or "todo" based on the task status.

8
docs/User Guide/User Guide/Advanced Usage/Advanced Showcases/Weight Tracker.md
View File

@@ -1,21 +1,21 @@
# Weight Tracker
![](Weight%20Tracker_image.png)
The `Weight Tracker` is a [Script API](../Code%20Notes/Script%20API.md) showcase present in the [demo notes](../Database.md).
The `Weight Tracker` is a [Script API](../../Note%20Types/Code/Script%20API.md) showcase present in the [demo notes](../Database.md).
By adding `weight` as a [promoted attribute](../Attributes/Promoted%20Attributes.md) in the [template](../Attributes/Template.md) from which [day notes](Day%20Notes.md) are created, you can aggregate the data and plot weight change over time.
## Implementation
The `Weight Tracker` note in the screenshot above is of the type `Render Note`. That type of note doesn't have any useful content itself. Instead it is a placeholder where a [script](../Code%20Notes/Scripts.md) can render its output.
The `Weight Tracker` note in the screenshot above is of the type `Render Note`. That type of note doesn't have any useful content itself. Instead it is a placeholder where a [script](../../Note%20Types/Code/Scripts.md) can render its output.
Scripts for `Render Notes` are defined in a [relation](../Attributes.md) called `~renderNote`. In this example, it's the `Weight Tracker`'s child `Implementation`. The Implementation consists of two [code notes](../Code%20Notes.md) that contain some HTML and JavaScript respectively, which load all the notes with a `weight` attribute and display their values in a chart.
Scripts for `Render Notes` are defined in a [relation](../Attributes.md) called `~renderNote`. In this example, it's the `Weight Tracker`'s child `Implementation`. The Implementation consists of two [code notes](../../Note%20Types/Code.md) that contain some HTML and JavaScript respectively, which load all the notes with a `weight` attribute and display their values in a chart.
To actually render the chart, we're using a third party library called [chart.js](https://www.chartjs.org/)which is imported as an attachment, since it's not built into Trilium.
### Code
Here's the content of the script which is placed in a [code note](../Code%20Notes.md) of type `JS Frontend`:
Here's the content of the script which is placed in a [code note](../../Note%20Types/Code.md) of type `JS Frontend`:
```
async function getChartData() {