Merge branch 'main' into fix_parens_orderby

This commit is contained in:
Elian Doran
2026-02-21 17:31:33 +02:00
committed by GitHub
266 changed files with 7497 additions and 3734 deletions

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,118 @@
<p><em>Active content</em> is a generic name for powerful features in Trilium,
these range from customizing the UI to advanced scripting that can alter
your notes or even your PC.</p>
<h2>Safe import</h2>
<p>Active content problem of safety, especially when this active content
comes from a third-party such as if it is downloaded from a website and
then imported into Trilium.</p>
<p>When <a href="#root/_help_mHbBMPDPkVV5">importing</a> .zip archives into Trilium, <em>safe mode</em> is
active by default which will try to prevent untrusted code from executing.
For example, a <a href="#root/_help_MgibgPcfeuGz">custom widget</a> needs the
<code
spellcheck="false">#widget</code> <a href="#root/_help_HI6GBBIduIgv">label</a> in order to function;
safe import works by renaming that label to <code spellcheck="false">#disabled:widget</code>.</p>
<h2>Safe mode</h2>
<p>Sometimes active content can cause issues with the UI or the server, preventing
it from functioning properly.&nbsp;<a class="reference-link" href="#root/_help_64ZTlUPgEPtW">Safe mode</a>&nbsp;allows
starting Trilium in such a way that active content is not loaded by default
at start-up, allowing the user to fix the problematic scripts or widgets.</p>
<h2>Types of active content</h2>
<p>These are the types of active content in Trilium, along with a few examples
of what untrusted content of that type could cause:</p>
<table>
<thead>
<tr>
<th>Name</th>
<th>Disabled on a safe <a href="#root/_help_mHbBMPDPkVV5">import</a>
</th>
<th>Description</th>
<th>Potential risks of untrusted code</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#root/_help_yIhgI5H7A2Sm">Front-end scripts</a>
</td>
<td>Yes</td>
<td>Allow running arbitrary code on the client (UI) of Trilium, which can
alter the user interface.</td>
<td>A malicious script can execute server-side code, access un-encrypted notes
or change their contents.</td>
</tr>
<tr>
<td><a class="reference-link" href="#root/_help_MgibgPcfeuGz">Custom Widgets</a>
</td>
<td>Yes</td>
<td>Can add new UI features to Trilium, for example by adding a new section
in the&nbsp;<a class="reference-link" href="#root/_help_RnaPdbciOfeq">Right Sidebar</a>.</td>
<td>The UI can be altered in such a way that it can be used to extract sensitive
information or it can simply cause the application to crash.</td>
</tr>
<tr>
<td><a class="reference-link" href="#root/_help_SPirpZypehBG">Backend scripts</a>
</td>
<td>Yes</td>
<td>Can run custom code on the server of Trilium (Node.js environment), with
full access to the notes and the database.</td>
<td>Has access to all the unencrypted notes, but with full access to the database
it can completely destroy the data. It also has access to execute other
applications or alter the files and folders on the server).</td>
</tr>
<tr>
<td><a class="reference-link" href="#root/_help_1vHRoWCEjj0L">Web View</a>
</td>
<td>Yes</td>
<td>Displays a website inside a note.</td>
<td>Can point to a phishing website which can collect the data (for example
on a log in page).</td>
</tr>
<tr>
<td><a class="reference-link" href="#root/_help_HcABDtFCkbFN">Render Note</a>
</td>
<td>Yes</td>
<td>Renders custom content inside a note, such as a dashboard or a new editor
that is not officially supported by Trilium.</td>
<td>Can affect the UI similar to front-end scripts or custom widgets since
the scripts are not completely encapsulated, or they can act similar to
a web view where they can collect data entered by the user.</td>
</tr>
<tr>
<td><a class="reference-link" href="#root/_help_AlhDUqhENtH7">Custom app-wide CSS</a>
</td>
<td>No</td>
<td>Can alter the layout and style of the UI using CSS, applied regardless
of theme.</td>
<td>Generally less problematic than the rest of active content, but a badly
written CSS can affect the layout of the application, requiring the use
of&nbsp;<a class="reference-link" href="#root/_help_64ZTlUPgEPtW">Safe mode</a>&nbsp;to
be able to use the application.</td>
</tr>
<tr>
<td><a href="#root/_help_pKK96zzmvBGf">Custom themes</a>
</td>
<td>No</td>
<td>Can change the style of the entire UI.</td>
<td>Similar to custom app-wide CSS.</td>
</tr>
<tr>
<td><a class="reference-link" href="#root/_help_gOKqSJgXLcIj">Icon Packs</a>
</td>
<td>No</td>
<td>Introduces new icons that can be used for notes.</td>
<td>Generally are more contained and less prone to cause issues, but they
can cause performance issues (for example if the icon pack has millions
of icons in it).</td>
</tr>
</tbody>
</table>
<h2>Active content badge</h2>
<p>Starting with v0.102.0, on the&nbsp;<a class="reference-link" href="#root/_help_IjZS7iK5EXtb">New Layout</a>&nbsp;a
badge will be displayed near the note title, indicating that an active
content is detected. Clicking the badge will reveal a menu with various
options related to that content type, for example to open the documentation
or to configure the execution of scripts.</p>
<p>For some active content types, such as backend scripts with custom triggering
conditions a toggle button will appear. This makes it possible to easily
disable scripts or widgets, but also to re-enable them if an import was
made with safe mode active.</p>

View File

@@ -29,10 +29,9 @@
<li>Ideally, create a dedicated spot in your note tree where to place the
icon packs.</li>
<li>Right click the note where to put it and select <em>Import into note</em>.</li>
<li
>Uncheck <em>Safe import</em>.</li>
<li>Select <em>Import</em>.</li>
<li><a href="#root/_help_s8alTXmpFR61">Refresh the application</a>.</li>
<li>Uncheck <em>Safe import</em>.</li>
<li>Select <em>Import</em>.</li>
<li><a href="#root/_help_s8alTXmpFR61">Refresh the application</a>.</li>
</ol>
<aside class="admonition warning">
<p>Since <em>Safe import</em> is disabled, make sure you trust the source as

View File

@@ -20,25 +20,27 @@
<ul>
<li>To indicate that the subtree is hidden, the note will not have an expand
button and it will display the number of children to the right.</li>
<li>It's not possible to add a new note directly from the tree.
<li
>It's not possible to add a new note directly from the tree.
<ul>
<li>For&nbsp;<a class="reference-link" href="#root/_help_GTwFsgaA0lCt">Collections</a>,
it's best to use the built-in mechanism to create notes (for example by
creating a new point on a geo-map, or by adding a new row in a table).</li>
<li>For normal notes, it's still possible to create children via other means
<li
>For normal notes, it's still possible to create children via other means
such as using the&nbsp;<a class="reference-link" href="#root/_help_hrZ1D00cLbal">Internal (reference) links</a>&nbsp;system.</li>
</ul>
</li>
<li>Notes can be dragged from outside the note, case in which they will be
cloned into it.
<ul>
<li>Instead of switching to the child notes that were copied, the parent note
is highlighted instead.</li>
<li>A notification will indicate this behavior.</li>
</ul>
</li>
<li>Similarly, features such as cut/copy and then paste into the note will
also work.</li>
</li>
<li>Notes can be dragged from outside the note, case in which they will be
cloned into it.
<ul>
<li>Instead of switching to the child notes that were copied, the parent note
is highlighted instead.</li>
<li>A notification will indicate this behavior.</li>
</ul>
</li>
<li>Similarly, features such as cut/copy and then paste into the note will
also work.</li>
</ul>
<h2>Spotlighting</h2>
<figure class="image image-style-align-right">
@@ -64,22 +66,12 @@
This is intentional to avoid displaying a partial state of the subtree.</p>
</aside>
<h2>Working with collections</h2>
<p>By default, some of the&nbsp;<a class="reference-link" href="#root/_help_GTwFsgaA0lCt">Collections</a>&nbsp;will
automatically hide their child notes, for example the&nbsp;<a class="reference-link"
href="#root/_help_CtBQqbwXDx1w">Kanban Board</a>&nbsp;or the&nbsp;<a class="reference-link"
href="#root/_help_2FvYrpmOXm29">Table</a>.</p>
<p>The reasoning behind this is that collections are generally opaque to
the rest of the notes and they can generate a large amount of sub-notes
since they intentionally lack structure (in order to allow easy swapping
between views).</p>
<p>Some types of collections have the child notes intentionally shown, for
example the legacy ones (Grid and List), but also the&nbsp;<a class="reference-link"
href="#root/_help_zP3PMqaG71Ct">Presentation</a>&nbsp;which requires the tree
structure in order to organize and edit the slides.</p>
<p>For large collections, it can be helpful to hide their child notes for
performance reasons or de-cluttering the tree.</p>
<p>To toggle this behavior:</p>
<ul>
<li>In the&nbsp;<a class="reference-link" href="#root/_help_IjZS7iK5EXtb">New Layout</a>,
press the Options button underneath the title and uncheck <em>Hide child notes in tree</em>.</li>
<li>Open the collection and in&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/GTwFsgaA0lCt/_help_CssoWBu8I7jF">Collection Properties</a>,
look for <em>Hide child notes in tree</em>.</li>
<li>Right click the collection note in the&nbsp;<a class="reference-link"
href="#root/_help_oPVyFC7WL2Lp">Note Tree</a>&nbsp;and select <em>Advanced</em><em>Show subtree</em>.</li>
</ul>

View File

@@ -1,75 +1,76 @@
<p>Collections are a unique type of note that don't have content, but instead
display their child notes in various presentation methods.</p>
<h2>Main collections</h2>
<table>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<figure class="image">
<img style="aspect-ratio:1651/810;" src="Collections_collection_ca.webp"
width="1651" height="810">
</figure>
</td>
<td><a class="reference-link" href="#root/_help_xWbu3jpNWapp">Calendar</a>
<br>which displays a week, month or year calendar with the notes being shown
as events. New events can be added easily by dragging across the calendar.</td>
</tr>
<tr>
<td>
<figure class="image">
<img style="aspect-ratio:1643/647;" src="Collections_collection_ta.webp"
width="1643" height="647">
</figure>
</td>
<td><a class="reference-link" href="#root/_help_2FvYrpmOXm29">Table</a>
<br>displays each note as a row in a table, with&nbsp;<a class="reference-link"
href="#root/_help_OFXdgB2nNk1F">Promoted Attributes</a>&nbsp;being shown as well.
This makes it easy to visualize attributes of notes, as well as making
them easily editable.</td>
</tr>
<tr>
<td>
<figure class="image">
<img style="aspect-ratio:1174/850;" src="Collections_collection_bo.webp"
width="1174" height="850">
</figure>
</td>
<td><a class="reference-link" href="#root/_help_CtBQqbwXDx1w">Kanban Board</a>
<br>displays notes in columns, grouped by the value of a label. Items and
columns can easily be created or dragged around to change their status.</td>
</tr>
<tr>
<td>
<figure class="image">
<img style="aspect-ratio:844/639;" src="Collections_collection_ge.webp"
width="844" height="639">
</figure>
</td>
<td><a class="reference-link" href="#root/_help_81SGnPGMk7Xc">Geo Map</a>
<br>which displays a geographical map in which the notes are represented as
markers/pins on the map. New events can be easily added by pointing on
the map.</td>
</tr>
<tr>
<td>
<figure class="image">
<img style="aspect-ratio:1120/763;" src="Collections_collection_pr.webp"
width="1120" height="763">
</figure>
</td>
<td><a class="reference-link" href="#root/_help_zP3PMqaG71Ct">Presentation</a>
<br>which shows each note as a slide and can be presented full-screen with
smooth transitions or exported to PDF for sharing.</td>
</tr>
</tbody>
</table>
<figure class="table">
<table>
<thead>
<tr>
<th>&nbsp;</th>
<th>&nbsp;</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<figure class="image">
<img style="aspect-ratio:1651/810;" src="Collections_collection_ca.webp"
width="1651" height="810">
</figure>
</td>
<td><a class="reference-link" href="#root/_help_xWbu3jpNWapp">Calendar</a>&nbsp;
<br>which displays a week, month or year calendar with the notes being shown
as events. New events can be added easily by dragging across the calendar.</td>
</tr>
<tr>
<td>
<figure class="image">
<img style="aspect-ratio:1643/647;" src="Collections_collection_ta.webp"
width="1643" height="647">
</figure>
</td>
<td><a class="reference-link" href="#root/_help_2FvYrpmOXm29">Table</a>&nbsp;
<br>displays each note as a row in a table, with&nbsp;<a class="reference-link"
href="#root/_help_OFXdgB2nNk1F">Promoted Attributes</a>&nbsp;being shown as well.
This makes it easy to visualize attributes of notes, as well as making
them easily editable.</td>
</tr>
<tr>
<td>
<figure class="image">
<img style="aspect-ratio:1174/850;" src="Collections_collection_bo.webp"
width="1174" height="850">
</figure>
</td>
<td><a class="reference-link" href="#root/_help_CtBQqbwXDx1w">Kanban Board</a>&nbsp;
<br>displays notes in columns, grouped by the value of a label. Items and
columns can easily be created or dragged around to change their status.</td>
</tr>
<tr>
<td>
<figure class="image">
<img style="aspect-ratio:844/639;" src="Collections_collection_ge.webp"
width="844" height="639">
</figure>
</td>
<td><a class="reference-link" href="#root/_help_81SGnPGMk7Xc">Geo Map</a>&nbsp;
<br>which displays a geographical map in which the notes are represented as
markers/pins on the map. New events can be easily added by pointing on
the map.</td>
</tr>
<tr>
<td>
<figure class="image">
<img style="aspect-ratio:1120/763;" src="Collections_collection_pr.webp"
width="1120" height="763">
</figure>
</td>
<td><a class="reference-link" href="#root/_help_zP3PMqaG71Ct">Presentation</a>&nbsp;
<br>which shows each note as a slide and can be presented full-screen with
smooth transitions or exported to PDF for sharing.</td>
</tr>
</tbody>
</table>
</figure>
<h2>Classic collections</h2>
<p>Classic collections are read-only mode and compiles the contents of all
child notes into one continuous view. This makes it ideal for reading extensive
@@ -88,27 +89,49 @@
<p>To create a new collections, right click in the&nbsp;<a class="reference-link"
href="#root/_help_oPVyFC7WL2Lp">Note Tree</a>&nbsp;and look for the <em>Collections</em> entry
and select the desired type.</p>
<p>By default, collections come with a default configuration and sometimes
even sample notes. To create a collection completely from scratch:</p>
<ol>
<li>Create a new note of type <em>Text</em> (or any type).</li>
<li>Change the <a href="#root/pOsGYCXsbNQG/_help_KSZ04uQ2D1St">note type</a> to <em>Collection</em>.</li>
<li
>In&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/GTwFsgaA0lCt/_help_CssoWBu8I7jF">Collection Properties</a>,
select the desired view type.</li>
<li>Consult the help page of the corresponding view type in order to understand
how to configure them.</li>
</ol>
<h2>Configuration</h2>
<p>To change the configuration of a collection or even switch to a different
collection (e.g. from Kanban Board to a Calendar), see the dedicated <em>Collections</em> tab
in the&nbsp;<a class="reference-link" href="#root/_help_BlN9DFI679QC">Ribbon</a>.</p>
collection (e.g. from Kanban Board to a Calendar), see the&nbsp;<a class="reference-link"
href="#root/GTwFsgaA0lCt/_help_CssoWBu8I7jF">Collection Properties</a>&nbsp;bar
at the top of the note.</p>
<h2>Archived notes</h2>
<p>By default, <a href="#root/_help_MKmLg5x6xkor">archived notes</a> will not be
shown in collections. This behavior can be changed by going to <em>Collection Properties</em> in
the&nbsp;<a class="reference-link" href="#root/_help_BlN9DFI679QC">Ribbon</a>&nbsp;and
checking <em>Show archived notes</em>.</p>
shown in collections. This behavior can be changed by going to&nbsp;
<a
class="reference-link" href="#root/GTwFsgaA0lCt/_help_CssoWBu8I7jF">Collection Properties</a>&nbsp;and checking <em>Show archived notes</em>.</p>
<p>Archived notes will be generally indicated by being greyed out as opposed
to the normal ones.</p>
<h2>Hiding the child notes from the note tree</h2>
<p>For collections with a large number of items, it can be helpful to hide
the items from the note tree for performance reasons and to reduce clutter.
This is especially useful for standalone collections, such as a geomap
or a task board.</p>
<p>To do so, go to&nbsp;<a class="reference-link" href="#root/GTwFsgaA0lCt/_help_CssoWBu8I7jF">Collection Properties</a>&nbsp;and
select <em>Hide child notes in tree</em>.</p>
<h2>Advanced use cases</h2>
<h3>Adding a description to a collection</h3>
<p>To add a text before the collection, for example to describe it:</p>
<ol>
<li>Create a new collection.</li>
<li>In the&nbsp;<a class="reference-link" href="#root/_help_BlN9DFI679QC">Ribbon</a>,
go to <em>Basic Properties</em> and change the note type from <em>Collection</em> to <em>Text</em>.</li>
<li>Change the <a href="#root/pOsGYCXsbNQG/_help_KSZ04uQ2D1St">note type</a> from <em>Collection</em> to <em>Text</em>.</li>
</ol>
<p>Now the text will be displayed above while still maintaining the collection
view.</p>
<p>The only downside to this method is that&nbsp;<a class="reference-link"
href="#root/pOsGYCXsbNQG/GTwFsgaA0lCt/_help_CssoWBu8I7jF">Collection Properties</a>&nbsp;will
not be shown anymore. In this case, modify the attributes manually or switch
back temporarily to the <em>Collection</em> type for configuration purposes.</p>
<h3>Using saved search</h3>
<p>Collections, by default, only display the child notes. However, it is
possible to use the&nbsp;<a class="reference-link" href="#root/_help_eIg8jdvaoNNd">Search</a>&nbsp;functionality
@@ -123,19 +146,6 @@
of the search results. The reason is that the search might hit a note multiple
times, causing an exponential rise in the number of results.</p>
</aside>
<h3>Creating a collection from scratch</h3>
<p>By default, collections come with a default configuration and sometimes
even sample notes. To create a collection completely from scratch:</p>
<ol>
<li>Create a new note of type <em>Text</em> (or any type).</li>
<li>In the&nbsp;<a class="reference-link" href="#root/_help_BlN9DFI679QC">Ribbon</a>,
go to <em>Basic Properties</em> and select <em>Collection</em> as the note
type.</li>
<li>Still in the ribbon, go to <em>Collection Properties</em> and select the
desired view type.</li>
<li>Consult the help page of the corresponding view type in order to understand
how to configure them.</li>
</ol>
<h2>Under the hood</h2>
<p>Collections by themselves are simply notes with no content that rely on
the&nbsp;<a class="reference-link" href="#root/_help_0ESUbbAxVnoK">Note List</a>&nbsp;mechanism

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 605 B

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 68 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 68 KiB

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 31 KiB

After

Width:  |  Height:  |  Size: 5.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.4 KiB

After

Width:  |  Height:  |  Size: 249 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 44 KiB

After

Width:  |  Height:  |  Size: 179 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 249 KiB

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 179 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 7.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 1014 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.6 KiB

After

Width:  |  Height:  |  Size: 966 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1014 B

After

Width:  |  Height:  |  Size: 4.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 966 B

After

Width:  |  Height:  |  Size: 42 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.3 KiB

After

Width:  |  Height:  |  Size: 3.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 42 KiB

After

Width:  |  Height:  |  Size: 3.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 338 KiB

After

Width:  |  Height:  |  Size: 108 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.0 KiB

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 108 KiB

After

Width:  |  Height:  |  Size: 605 B

View File

@@ -1,5 +1,5 @@
<figure class="image image-style-align-center">
<img style="aspect-ratio:767/606;" src="4_Calendar_image.png"
<img style="aspect-ratio:767/606;" src="2_Calendar_image.png"
width="767" height="606">
</figure>
<p>The Calendar view will display each child note in a calendar that has
@@ -11,42 +11,18 @@
time-specific events, not just all-day events.</li>
<li>Month view, where the entire month is displayed and all-day events can
be inserted. Both time-specific events and all-day events are listed.</li>
<li>Year view, which displays the entire year for quick reference.</li>
<li>List view, which displays all the events of a given month in sequence.</li>
<li
>Year view, which displays the entire year for quick reference.</li>
<li
>List view, which displays all the events of a given month in sequence.</li>
</ul>
<p>Unlike other Collection view types, the Calendar view also allows some
kind of interaction, such as moving events around as well as creating new
ones.</p>
<h2>Creating a calendar</h2>
<table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<img src="2_Calendar_image.png">
</td>
<td>The Calendar View works only for Collection note types. To create a new
note, right click on the note tree on the left and select Insert note after,
or Insert child note and then select <em>Collection</em>.</td>
</tr>
<tr>
<td>2</td>
<td>
<img src="3_Calendar_image.png">
</td>
<td>Once created, the “View type” of the Collection needs changed to “Calendar”,
by selecting the “Collection Properties” tab in the ribbon.</td>
</tr>
</tbody>
</table>
<p>Right click on an existing note in the&nbsp;<a class="reference-link"
href="#root/_help_oPVyFC7WL2Lp">Note Tree</a>&nbsp;and select <em>Insert child note</em> and
look for <em>Calendar</em>.</p>
<h2>Creating a new event/note</h2>
<ul>
<li>Clicking on a day will create a new child note and assign it to that particular
@@ -68,7 +44,7 @@
<ul>
<li>Hovering the mouse over an event will display information about the note.
<br>
<img src="7_Calendar_image.png">
<img src="5_Calendar_image.png">
</li>
<li>Left clicking the event will open a&nbsp;<a class="reference-link" href="#root/_help_ZjLYv08Rp3qC">Quick edit</a>&nbsp;to
edit the note in a popup while allowing easy return to the calendar by
@@ -80,7 +56,8 @@
</ul>
</li>
<li>Drag and drop an event on the calendar to move it to another day.</li>
<li>The length of an event can be changed by placing the mouse to the right
<li
>The length of an event can be changed by placing the mouse to the right
edge of the event and dragging the mouse around.</li>
</ul>
<h2>Interaction on mobile</h2>
@@ -89,23 +66,26 @@
<ul>
<li>Clicking on an event triggers the contextual menu, including the option
to open in&nbsp;<a class="reference-link" href="#root/_help_ZjLYv08Rp3qC">Quick edit</a>.</li>
<li>To insert a new event, touch and hold the empty space. When successful,
<li
>To insert a new event, touch and hold the empty space. When successful,
the empty space will become colored to indicate the selection.
<ul>
<li>Before releasing, drag across multiple spaces to create multi-day events.</li>
<li>When released, a prompt will appear to enter the note title.</li>
<li
>When released, a prompt will appear to enter the note title.</li>
</ul>
</li>
<li>To move an existing event, touch and hold the event until the empty space
near it will become colored.
<ul>
<li>At this point the event can be dragged across other days on the calendar.</li>
<li>Or the event can be resized by tapping on the small circle to the right
end of the event.</li>
<li>To exit out of editing mode, simply tap the empty space anywhere on the
calendar.</li>
</li>
<li>To move an existing event, touch and hold the event until the empty space
near it will become colored.
<ul>
<li>At this point the event can be dragged across other days on the calendar.</li>
<li
>Or the event can be resized by tapping on the small circle to the right
end of the event.</li>
<li>To exit out of editing mode, simply tap the empty space anywhere on the
calendar.</li>
</ul>
</li>
</li>
</ul>
<h2>Configuring the calendar view</h2>
<p>In the <em>Collections</em> tab in the&nbsp;<a class="reference-link" href="#root/_help_BlN9DFI679QC">Ribbon</a>,
@@ -116,296 +96,311 @@
</ul>
<h2>Configuring the calendar using attributes</h2>
<p>The following attributes can be added to the Collection type:</p>
<table>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>#calendar:hideWeekends</code>
</td>
<td>When present (regardless of value), it will hide Saturday and Sundays
from the calendar.</td>
</tr>
<tr>
<td><code>#calendar:weekNumbers</code>
</td>
<td>When present (regardless of value), it will show the number of the week
on the calendar.</td>
</tr>
<tr>
<td><code>#calendar:initialDate</code>
</td>
<td>Change the date the calendar opens on. When not present, the calendar
opens on the current date.</td>
</tr>
<tr>
<td><code>#calendar:view</code>
</td>
<td>
<p>Which view to display in the calendar:</p>
<ul>
<li><code>timeGridWeek</code> for the <em>week</em> view;</li>
<li><code>dayGridMonth</code> for the <em>month</em> view;</li>
<li><code>multiMonthYear</code> for the <em>year</em> view;</li>
<li><code>listMonth</code> for the <em>list</em> view.</li>
</ul>
<p>Any other value will be dismissed and the default view (month) will be
used instead.</p>
<p>The value of this label is automatically updated when changing the view
using the UI buttons.</p>
</td>
</tr>
<tr>
<td><code>~child:template</code>
</td>
<td>Defines the template for newly created notes in the calendar (via dragging
or clicking).</td>
</tr>
</tbody>
</table>
<p>In addition, the first day of the week can be either Sunday or Monday
and can be adjusted from the application settings.</p>
<h2>Configuring the calendar events using attributes</h2>
<p>For each note of the calendar, the following attributes can be used:</p>
<table>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code spellcheck="false">#startDate</code>
</td>
<td>The date the event starts, which will display it in the calendar. The
format is <code spellcheck="false">YYYY-MM-DD</code> (year, month and day
separated by a minus sign).</td>
</tr>
<tr>
<td><code spellcheck="false">#endDate</code>
</td>
<td>Similar to <code spellcheck="false">startDate</code>, mentions the end
date if the event spans across multiple days. The date is inclusive, so
the end day is also considered. The attribute can be missing for single-day
events.</td>
</tr>
<tr>
<td><code spellcheck="false">#startTime</code>
</td>
<td>The time the event starts at. If this value is missing, then the event
is considered a full-day event. The format is <code spellcheck="false">HH:MM</code> (hours
in 24-hour format and minutes).</td>
</tr>
<tr>
<td><code spellcheck="false">#endTime</code>
</td>
<td>Similar to <code spellcheck="false">startTime</code>, it mentions the time
at which the event ends (in relation with <code spellcheck="false">endDate</code> if
present, or <code spellcheck="false">startDate</code>).</td>
</tr>
<tr>
<td><code spellcheck="false">#color</code>
</td>
<td>Displays the event with a specified color (named such as <code spellcheck="false">red</code>,
<code
spellcheck="false">gray</code>or hex such as <code spellcheck="false">#FF0000</code>). This
will also change the color of the note in other places such as the note
tree.</td>
</tr>
<tr>
<td><code spellcheck="false">#calendar:color</code>
</td>
<td><strong>❌️ Removed since v0.100.0. Use</strong> <code spellcheck="false">**#color**</code> <strong>instead.</strong>
<br>
<br>Similar to <code spellcheck="false">#color</code>, but applies the color
only for the event in the calendar and not for other places such as the
note tree.</td>
</tr>
<tr>
<td><code spellcheck="false">#iconClass</code>
</td>
<td>If present, the icon of the note will be displayed to the left of the
event title.</td>
</tr>
<tr>
<td><code spellcheck="false">#calendar:title</code>
</td>
<td>Changes the title of an event to point to an attribute of the note other
than the title, can either a label or a relation (without the <code spellcheck="false">#</code> or
<code
spellcheck="false">~</code>symbol). See <em>Use-cases</em> for more information.</td>
</tr>
<tr>
<td><code spellcheck="false">#calendar:displayedAttributes</code>
</td>
<td>Allows displaying the value of one or more attributes in the calendar
like this:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<br>
<br>
<img src="9_Calendar_image.png">&nbsp;&nbsp;&nbsp;
<br>
<br><code spellcheck="false">#weight="70" #Mood="Good" #calendar:displayedAttributes="weight,Mood"</code>&nbsp;&nbsp;&nbsp;
<br>
<br>It can also be used with relations, case in which it will display the
title of the target note:&nbsp;&nbsp;&nbsp;&nbsp;
<br>
<br><code spellcheck="false">~assignee=@My assignee #calendar:displayedAttributes="assignee"</code>
</td>
</tr>
<tr>
<td><code spellcheck="false">#calendar:startDate</code>
</td>
<td>Allows using a different label to represent the start date, other than
<code
spellcheck="false">startDate</code>(e.g. <code spellcheck="false">expiryDate</code>). The
label name <strong>must not be</strong> prefixed with <code spellcheck="false">#</code>.
If the label is not defined for a note, the default will be used instead.</td>
</tr>
<tr>
<td><code spellcheck="false">#calendar:endDate</code>
</td>
<td>Similar to <code spellcheck="false">#calendar:startDate</code>, allows
changing the attribute which is being used to read the end date.</td>
</tr>
<tr>
<td><code spellcheck="false">#calendar:startTime</code>
</td>
<td>Similar to <code spellcheck="false">#calendar:startDate</code>, allows
changing the attribute which is being used to read the start time.</td>
</tr>
<tr>
<td><code spellcheck="false">#calendar:endTime</code>
</td>
<td>Similar to <code spellcheck="false">#calendar:startDate</code>, allows
changing the attribute which is being used to read the end time.</td>
</tr>
</tbody>
</table>
<h2>How the calendar works</h2>
<p>
<img src="11_Calendar_image.png">
</p>
<p>The calendar displays all the child notes of the Collection that have
a <code spellcheck="false">#startDate</code>. An <code spellcheck="false">#endDate</code> can
optionally be added.</p>
<p>If editing the start date and end date from the note itself is desirable,
the following attributes can be added to the Collection note:</p><pre><code class="language-text-x-trilium-auto">#viewType=calendar #label:startDate(inheritable)="promoted,alias=Start Date,single,date"
<figure
class="table">
<table>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code spellcheck="false">#calendar:hideWeekends</code>
</td>
<td>When present (regardless of value), it will hide Saturday and Sundays
from the calendar.</td>
</tr>
<tr>
<td><code spellcheck="false">#calendar:weekNumbers</code>
</td>
<td>When present (regardless of value), it will show the number of the week
on the calendar.</td>
</tr>
<tr>
<td><code spellcheck="false">#calendar:initialDate</code>
</td>
<td>Change the date the calendar opens on. When not present, the calendar
opens on the current date.</td>
</tr>
<tr>
<td><code spellcheck="false">#calendar:view</code>
</td>
<td>
<p>Which view to display in the calendar:</p>
<ul>
<li><code spellcheck="false">timeGridWeek</code> for the <em>week</em> view;</li>
<li
><code spellcheck="false">dayGridMonth</code> for the <em>month</em> view;</li>
<li
><code spellcheck="false">multiMonthYear</code> for the <em>year</em> view;</li>
<li
><code spellcheck="false">listMonth</code> for the <em>list</em> view.</li>
</ul>
<p>Any other value will be dismissed and the default view (month) will be
used instead.</p>
<p>The value of this label is automatically updated when changing the view
using the UI buttons.</p>
</td>
</tr>
<tr>
<td><code spellcheck="false">~child:template</code>
</td>
<td>Defines the template for newly created notes in the calendar (via dragging
or clicking).</td>
</tr>
</tbody>
</table>
</figure>
<p>In addition, the first day of the week can be either Sunday or Monday
and can be adjusted from the application settings.</p>
<h2>Configuring the calendar events using attributes</h2>
<p>For each note of the calendar, the following attributes can be used:</p>
<figure
class="table">
<table>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code spellcheck="false">#startDate</code>
</td>
<td>The date the event starts, which will display it in the calendar. The
format is <code spellcheck="false">YYYY-MM-DD</code> (year, month and day
separated by a minus sign).</td>
</tr>
<tr>
<td><code spellcheck="false">#endDate</code>
</td>
<td>Similar to <code spellcheck="false">startDate</code>, mentions the end
date if the event spans across multiple days. The date is inclusive, so
the end day is also considered. The attribute can be missing for single-day
events.</td>
</tr>
<tr>
<td><code spellcheck="false">#startTime</code>
</td>
<td>The time the event starts at. If this value is missing, then the event
is considered a full-day event. The format is <code spellcheck="false">HH:MM</code> (hours
in 24-hour format and minutes).</td>
</tr>
<tr>
<td><code spellcheck="false">#endTime</code>
</td>
<td>Similar to <code spellcheck="false">startTime</code>, it mentions the time
at which the event ends (in relation with <code spellcheck="false">endDate</code> if
present, or <code spellcheck="false">startDate</code>).</td>
</tr>
<tr>
<td><code spellcheck="false">#color</code>
</td>
<td>Displays the event with a specified color (named such as <code spellcheck="false">red</code>,
<code
spellcheck="false">gray</code>or hex such as <code spellcheck="false">#FF0000</code>). This
will also change the color of the note in other places such as the note
tree.</td>
</tr>
<tr>
<td><code spellcheck="false">#calendar:color</code>
</td>
<td><strong>❌️ Removed since v0.100.0. Use</strong> <code spellcheck="false">**#color**</code> <strong>instead.</strong>&nbsp;
<br>
<br>Similar to <code spellcheck="false">#color</code>, but applies the color
only for the event in the calendar and not for other places such as the
note tree.</td>
</tr>
<tr>
<td><code spellcheck="false">#iconClass</code>
</td>
<td>If present, the icon of the note will be displayed to the left of the
event title.</td>
</tr>
<tr>
<td><code spellcheck="false">#calendar:title</code>
</td>
<td>Changes the title of an event to point to an attribute of the note other
than the title, can either a label or a relation (without the <code spellcheck="false">#</code> or
<code
spellcheck="false">~</code>symbol). See <em>Use-cases</em> for more information.</td>
</tr>
<tr>
<td><code spellcheck="false">#calendar:displayedAttributes</code>
</td>
<td>Allows displaying the value of one or more attributes in the calendar
like this:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<br>
<br>
<img src="7_Calendar_image.png">&nbsp;&nbsp;&nbsp;&nbsp;
<br>
<br><code spellcheck="false">#weight="70" #Mood="Good" #calendar:displayedAttributes="weight,Mood"</code>&nbsp;&nbsp;&nbsp;&nbsp;
<br>
<br>It can also be used with relations, case in which it will display the
title of the target note:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<br>
<br><code spellcheck="false">~assignee=@My assignee #calendar:displayedAttributes="assignee"</code>
</td>
</tr>
<tr>
<td><code spellcheck="false">#calendar:startDate</code>
</td>
<td>Allows using a different label to represent the start date, other than
<code
spellcheck="false">startDate</code>(e.g. <code spellcheck="false">expiryDate</code>). The
label name <strong>must not be</strong> prefixed with <code spellcheck="false">#</code>.
If the label is not defined for a note, the default will be used instead.</td>
</tr>
<tr>
<td><code spellcheck="false">#calendar:endDate</code>
</td>
<td>Similar to <code spellcheck="false">#calendar:startDate</code>, allows
changing the attribute which is being used to read the end date.</td>
</tr>
<tr>
<td><code spellcheck="false">#calendar:startTime</code>
</td>
<td>Similar to <code spellcheck="false">#calendar:startDate</code>, allows
changing the attribute which is being used to read the start time.</td>
</tr>
<tr>
<td><code spellcheck="false">#calendar:endTime</code>
</td>
<td>Similar to <code spellcheck="false">#calendar:startDate</code>, allows
changing the attribute which is being used to read the end time.</td>
</tr>
</tbody>
</table>
</figure>
<h2>How the calendar works</h2>
<p>
<img src="9_Calendar_image.png">
</p>
<p>The calendar displays all the child notes of the Collection that have
a <code spellcheck="false">#startDate</code>. An <code spellcheck="false">#endDate</code> can
optionally be added.</p>
<p>If editing the start date and end date from the note itself is desirable,
the following attributes can be added to the Collection note:</p><pre><code class="language-text-x-trilium-auto">#viewType=calendar #label:startDate(inheritable)="promoted,alias=Start Date,single,date"
#label:endDate(inheritable)="promoted,alias=End Date,single,date"
#hidePromotedAttributes </code></pre>
<p>This will result in:</p>
<p>
<img src="10_Calendar_image.png">
</p>
<p>When not used in a Journal, the calendar is recursive. That is, it will
look for events not just in its child notes but also in the children of
these child notes.</p>
<h2>Use-cases</h2>
<h3>Using with the Journal / calendar</h3>
<p>It is possible to integrate the calendar view into the Journal with day
notes. In order to do so change the note type of the Journal note (calendar
root) to Collection and then select the Calendar View.</p>
<p>Based on the <code spellcheck="false">#calendarRoot</code> (or <code spellcheck="false">#workspaceCalendarRoot</code>)
attribute, the calendar will know that it's in a calendar and apply the
following:</p>
<ul>
<li>The calendar events are now rendered based on their <code spellcheck="false">dateNote</code> attribute
rather than <code spellcheck="false">startDate</code>.</li>
<li>Interactive editing such as dragging over an empty era or resizing an
event is no longer possible.</li>
<li>Clicking on the empty space on a date will automatically open that day's
note or create it if it does not exist.</li>
<li>Direct children of a day note will be displayed on the calendar despite
not having a <code spellcheck="false">dateNote</code> attribute. Children
of the child notes will not be displayed.</li>
</ul>
<img src="8_Calendar_image.png" width="1217"
height="724">
<h3>Using a different attribute as event title</h3>
<p>By default, events are displayed on the calendar by their note title.
However, it is possible to configure a different attribute to be displayed
instead.</p>
<p>To do so, assign <code spellcheck="false">#calendar:title</code> to the
child note (not the calendar/Collection note), with the value being
<code
spellcheck="false">name</code>where <code spellcheck="false">name</code> can be any label (make
not to add the <code spellcheck="false">#</code> prefix). The attribute can
also come through inheritance such as a template attribute. If the note
does not have the requested label, the title of the note will be used instead.</p>
<table>
<thead>
<tr>
<th>&nbsp;</th>
<th>&nbsp;</th>
</tr>
</thead>
<tbody>
<tr>
<td><pre><code class="language-text-x-trilium-auto">#startDate=2025-02-11 #endDate=2025-02-13 #name="My vacation" #calendar:title="name"</code></pre>
</td>
<td>
<p>&nbsp;</p>
<figure class="image image-style-align-center">
<img style="aspect-ratio:445/124;" src="5_Calendar_image.png"
width="445" height="124">
</figure>
</td>
</tr>
</tbody>
</table>
<h3>Using a relation attribute as event title</h3>
<p>Similarly to using an attribute, use <code spellcheck="false">#calendar:title</code> and
set it to <code spellcheck="false">name</code> where <code spellcheck="false">name</code> is
the name of the relation to use.</p>
<p>Moreover, if there are more relations of the same name, they will be displayed
as multiple events coming from the same note.</p>
<table>
<thead>
<tr>
<th>&nbsp;</th>
<th>&nbsp;</th>
</tr>
</thead>
<tbody>
<tr>
<td><pre><code class="language-text-x-trilium-auto">#startDate=2025-02-14 #endDate=2025-02-15 ~for=@John Smith ~for=@Jane Doe #calendar:title="for"</code></pre>
</td>
<td>
<img src="6_Calendar_image.png" width="294"
height="151">
</td>
</tr>
</tbody>
</table>
<p>Note that it's even possible to have a <code spellcheck="false">#calendar:title</code> on
the target note (e.g. “John Smith”) which will try to render an attribute
of it. Note that it's not possible to use a relation here as well for safety
reasons (an accidental recursion &nbsp;of attributes could cause the application
to loop infinitely).</p>
<table>
<thead>
<tr>
<th>&nbsp;</th>
<th>&nbsp;</th>
</tr>
</thead>
<tbody>
<tr>
<td><pre><code class="language-text-x-trilium-auto">#calendar:title="shortName" #shortName="John S."</code></pre>
</td>
<td>
<figure class="image image-style-align-center">
<img style="aspect-ratio:296/150;" src="1_Calendar_image.png"
width="296" height="150">
</figure>
</td>
</tr>
</tbody>
</table>
<p>This will result in:</p>
<p>
<img src="8_Calendar_image.png">
</p>
<p>When not used in a Journal, the calendar is recursive. That is, it will
look for events not just in its child notes but also in the children of
these child notes.</p>
<h2>Use-cases</h2>
<h3>Using with the Journal / calendar</h3>
<p>It is possible to integrate the calendar view into the Journal with day
notes. In order to do so change the note type of the Journal note (calendar
root) to Collection and then select the Calendar View.</p>
<p>Based on the <code spellcheck="false">#calendarRoot</code> (or <code spellcheck="false">#workspaceCalendarRoot</code>)
attribute, the calendar will know that it's in a calendar and apply the
following:</p>
<ul>
<li>The calendar events are now rendered based on their <code spellcheck="false">dateNote</code> attribute
rather than <code spellcheck="false">startDate</code>.</li>
<li>Interactive editing such as dragging over an empty era or resizing an
event is no longer possible.</li>
<li>Clicking on the empty space on a date will automatically open that day's
note or create it if it does not exist.</li>
<li>Direct children of a day note will be displayed on the calendar despite
not having a <code spellcheck="false">dateNote</code> attribute. Children
of the child notes will not be displayed.</li>
</ul>
<p>
<img src="6_Calendar_image.png" width="1217"
height="724">
</p>
<h3>Using a different attribute as event title</h3>
<p>By default, events are displayed on the calendar by their note title.
However, it is possible to configure a different attribute to be displayed
instead.</p>
<p>To do so, assign <code spellcheck="false">#calendar:title</code> to the
child note (not the calendar/Collection note), with the value being
<code
spellcheck="false">name</code>where <code spellcheck="false">name</code> can be any label (make
not to add the <code spellcheck="false">#</code> prefix). The attribute can
also come through inheritance such as a template attribute. If the note
does not have the requested label, the title of the note will be used instead.</p>
<figure
class="table">
<table>
<thead>
<tr>
<th>&nbsp;</th>
<th>&nbsp;</th>
</tr>
</thead>
<tbody>
<tr>
<td><pre><code class="language-text-x-trilium-auto">#startDate=2025-02-11 #endDate=2025-02-13 #name="My vacation" #calendar:title="name"</code></pre>
</td>
<td>
<p>&nbsp;</p>
<figure class="image image-style-align-center">
<img style="aspect-ratio:445/124;" src="3_Calendar_image.png"
width="445" height="124">
</figure>
</td>
</tr>
</tbody>
</table>
</figure>
<h3>Using a relation attribute as event title</h3>
<p>Similarly to using an attribute, use <code spellcheck="false">#calendar:title</code> and
set it to <code spellcheck="false">name</code> where <code spellcheck="false">name</code> is
the name of the relation to use.</p>
<p>Moreover, if there are more relations of the same name, they will be displayed
as multiple events coming from the same note.</p>
<figure class="table">
<table>
<thead>
<tr>
<th>&nbsp;</th>
<th>&nbsp;</th>
</tr>
</thead>
<tbody>
<tr>
<td><pre><code class="language-text-x-trilium-auto">#startDate=2025-02-14 #endDate=2025-02-15 ~for=@John Smith ~for=@Jane Doe #calendar:title="for"</code></pre>
</td>
<td>
<img src="4_Calendar_image.png" width="294"
height="151">
</td>
</tr>
</tbody>
</table>
</figure>
<p>Note that it's even possible to have a <code spellcheck="false">#calendar:title</code> on
the target note (e.g. “John Smith”) which will try to render an attribute
of it. Note that it's not possible to use a relation here as well for safety
reasons (an accidental recursion &nbsp;of attributes could cause the application
to loop infinitely).</p>
<figure class="table">
<table>
<thead>
<tr>
<th>&nbsp;</th>
<th>&nbsp;</th>
</tr>
</thead>
<tbody>
<tr>
<td><pre><code class="language-text-x-trilium-auto">#calendar:title="shortName" #shortName="John S."</code></pre>
</td>
<td>
<figure class="image image-style-align-center">
<img style="aspect-ratio:296/150;" src="1_Calendar_image.png"
width="296" height="150">
</figure>
</td>
</tr>
</tbody>
</table>
</figure>

View File

@@ -0,0 +1,27 @@
<figure class="image">
<img style="aspect-ratio:1177/98;" src="Collection Properties_imag.png"
width="1177" height="98">
</figure>
<p>The <em>Collection Properties</em> is a toolbar that is displayed at the
top of every <a href="#root/pOsGYCXsbNQG/_help_GTwFsgaA0lCt">collection note</a>.</p>
<p>For versions prior to v0.102.0, this feature was only available for the&nbsp;
<a
class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_IjZS7iK5EXtb">New Layout</a>. Starting with this version, the collection properties
are enabled for the Old layout as well, and&nbsp;<a class="reference-link"
href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_BlN9DFI679QC">Ribbon</a>&nbsp;no
longer contains a dedicated tab for collection properties.</p>
<p>The collection properties has:</p>
<ul>
<li>A quick selector for the view type (e.g. grid, calendar, board).</li>
<li
>A settings button with:
<ul>
<li>Settings for the current view, for example hiding the weekends in a calendar.</li>
<li
>Generic settings for the collection, such as <a href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/oPVyFC7WL2Lp/_help_wyaGBBQrl4i3">hiding the child notes</a> or
showing <a href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/BFs8mudNFgCS/_help_MKmLg5x6xkor">archived notes</a>.</li>
</ul>
</li>
<li>Specific interactions for the current view, for example month selector
and view switcher for the calendar.</li>
</ul>

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

View File

@@ -1,50 +1,20 @@
<aside class="admonition important">
<p><a class="reference-link" href="#root/_help_zEY4DaJG4YT5">Attributes</a><a class="reference-link"
href="#root/_help_OFXdgB2nNk1F">Promoted Attributes</a><a class="reference-link"
href="#root/_help_zEY4DaJG4YT5">Attributes</a>Starting with Trilium v0.97.0,
the geo map has been converted from a standalone <a href="#root/_help_KSZ04uQ2D1St">note type</a> to
a type of view for the&nbsp;<a class="reference-link" href="#root/_help_0ESUbbAxVnoK">Note List</a>.&nbsp;</p>
<p>Starting with Trilium v0.97.0, the geo map has been converted from a standalone
<a
href="#root/_help_KSZ04uQ2D1St">note type</a>to a type of view for the&nbsp;<a class="reference-link"
href="#root/_help_0ESUbbAxVnoK">Note List</a>.&nbsp;</p>
</aside>
<figure class="image image-style-align-center">
<img style="aspect-ratio:892/675;" src="9_Geo Map_image.png"
<img style="aspect-ratio:892/675;" src="8_Geo Map_image.png"
width="892" height="675">
</figure>
<p>This note type displays the children notes on a geographical map, based
on an attribute. It is also possible to add new notes at a specific location
using the built-in interface.</p>
<h2>Creating a new geo map</h2>
<table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<figure class="image">
<img style="aspect-ratio:483/413;" src="15_Geo Map_image.png"
width="483" height="413">
</figure>
</td>
<td>Right click on any note on the note tree and select <em>Insert child note</em><em>Geo Map (beta)</em>.</td>
</tr>
<tr>
<td>2</td>
<td>
<figure class="image image-style-align-center image_resized" style="width:53.44%;">
<img style="aspect-ratio:1720/1396;" src="8_Geo Map_image.png"
width="1720" height="1396">
</figure>
</td>
<td>By default the map will be empty and will show the entire world.</td>
</tr>
</tbody>
</table>
<p>Right click on an existing note in the&nbsp;<a class="reference-link"
href="#root/_help_oPVyFC7WL2Lp">Note Tree</a>&nbsp;and select <em>Geo Map</em>.</p>
<p>By default the map will be empty and will show the entire world.</p>
<h2>Repositioning the map</h2>
<ul>
<li>Click and drag the map in order to move across the map.</li>
@@ -55,59 +25,60 @@
restored when visiting again the note.</p>
<h2>Adding a marker using the map</h2>
<h3>Adding a new note using the plus button</h3>
<table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>To create a marker, first navigate to the desired point on the map. Then
press the
<img src="10_Geo Map_image.png">button in the&nbsp;<a href="#root/_help_XpOYSgsLkTJy">Floating buttons</a>&nbsp;(top-right)
area.&nbsp;&nbsp;&nbsp;&nbsp;
<br>
<br>If the button is not visible, make sure the button section is visible
by pressing the chevron button (
<img src="17_Geo Map_image.png">) in the top-right of the map.</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>
<img class="image_resized" style="aspect-ratio:1730/416;width:100%;" src="2_Geo Map_image.png"
width="1730" height="416">
</td>
<td>Once pressed, the map will enter in the insert mode, as illustrated by
the notification.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<br>
<br>Simply click the point on the map where to place the marker, or the Escape
key to cancel.</td>
</tr>
<tr>
<td>3</td>
<td>
<img class="image_resized" style="aspect-ratio:1586/404;width:100%;" src="7_Geo Map_image.png"
width="1586" height="404">
</td>
<td>Enter the name of the marker/note to be created.</td>
</tr>
<tr>
<td>4</td>
<td>
<img class="image_resized" style="aspect-ratio:1696/608;width:100%;" src="16_Geo Map_image.png"
width="1696" height="608">
</td>
<td>Once confirmed, the marker will show up on the map and it will also be
displayed as a child note of the map.</td>
</tr>
</tbody>
</table>
<figure class="table">
<table>
<thead>
<tr>
<th>&nbsp;</th>
<th>&nbsp;</th>
<th>&nbsp;</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>To create a marker, first navigate to the desired point on the map. Then
press the
<img src="9_Geo Map_image.png">button in the&nbsp;<a href="#root/_help_XpOYSgsLkTJy">Floating buttons</a>&nbsp;(top-right)
area.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<br>
<br>If the button is not visible, make sure the button section is visible
by pressing the chevron button (
<img src="15_Geo Map_image.png">) in the top-right of the map.</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>2</td>
<td>
<img class="image_resized" style="aspect-ratio:1730/416;width:100%;" src="2_Geo Map_image.png"
width="1730" height="416">
</td>
<td>Once pressed, the map will enter in the insert mode, as illustrated by
the notification.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<br>
<br>Simply click the point on the map where to place the marker, or the Escape
key to cancel.</td>
</tr>
<tr>
<td>3</td>
<td>
<img class="image_resized" style="aspect-ratio:1586/404;width:100%;" src="7_Geo Map_image.png"
width="1586" height="404">
</td>
<td>Enter the name of the marker/note to be created.</td>
</tr>
<tr>
<td>4</td>
<td>
<img class="image_resized" style="aspect-ratio:1696/608;width:100%;" src="14_Geo Map_image.png"
width="1696" height="608">
</td>
<td>Once confirmed, the marker will show up on the map and it will also be
displayed as a child note of the map.</td>
</tr>
</tbody>
</table>
</figure>
<h3>Adding a new note using the contextual menu</h3>
<ol>
<li>Right click anywhere on the map, where to place the newly created marker
@@ -120,15 +91,18 @@
<h3>Adding an existing note on note from the note tree</h3>
<ol>
<li>Select the desired note in the&nbsp;<a class="reference-link" href="#root/_help_oPVyFC7WL2Lp">Note Tree</a>.</li>
<li>Hold the mouse on the note and drag it to the map to the desired location.</li>
<li>The map should be updated with the new marker.</li>
<li
>Hold the mouse on the note and drag it to the map to the desired location.</li>
<li
>The map should be updated with the new marker.</li>
</ol>
<p>This works for:</p>
<ul>
<li>Notes that are not part of the geo map, case in which a <a href="#root/_help_IakOLONlIfGI">clone</a> will
be created.</li>
<li>Notes that are a child of the geo map but not yet positioned on the map.</li>
<li>Notes that are a child of the geo map and also positioned, case in which
<li
>Notes that are a child of the geo map and also positioned, case in which
the marker will be relocated to the new position.</li>
</ul>
<aside class="admonition note">
@@ -138,8 +112,10 @@
<h2>How the location of the markers is stored</h2>
<p>The location of a marker is stored in the <code spellcheck="false">#geolocation</code> attribute
of the child notes:</p>
<img src="18_Geo Map_image.png"
width="1288" height="278">
<p>
<img src="16_Geo Map_image.png" width="1288"
height="278">
</p>
<p>This value can be added manually if needed. The value of the attribute
is made up of the latitude and longitude separated by a comma.</p>
<h2>Repositioning markers</h2>
@@ -160,7 +136,8 @@ width="1288" height="278">
</li>
<li>Middle-clicking the marker will open the note in a new tab.</li>
<li>Right-clicking the marker will open a contextual menu (as described below).</li>
<li>If the map is in read-only mode, clicking on a marker will open a&nbsp;
<li
>If the map is in read-only mode, clicking on a marker will open a&nbsp;
<a
class="reference-link" href="#root/_help_ZjLYv08Rp3qC">Quick edit</a>&nbsp;popup for the corresponding note.</li>
</ul>
@@ -206,211 +183,237 @@ width="1288" height="278">
<p>The value of the attribute is made up of the latitude and longitude separated
by a comma.</p>
<h3>Adding from Google Maps</h3>
<table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<figure class="image image-style-align-center image_resized" style="width:56.84%;">
<img style="aspect-ratio:732/918;" src="12_Geo Map_image.png"
width="732" height="918">
</figure>
</td>
<td>Go to Google Maps on the web and look for a desired location, right click
on it and a context menu will show up.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<br>
<br>Simply click on the first item displaying the coordinates and they will
be copied to clipboard.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<br>
<br>Then paste the value inside the text box into the <code spellcheck="false">#geolocation</code> attribute
of a child note of the map (don't forget to surround the value with a
<code
spellcheck="false">"</code>character).</td>
</tr>
<tr>
<td>2</td>
<td>
<figure class="image image-style-align-center image_resized" style="width:100%;">
<img style="aspect-ratio:518/84;" src="4_Geo Map_image.png"
width="518" height="84">
</figure>
</td>
<td>In Trilium, create a child note under the map.</td>
</tr>
<tr>
<td>3</td>
<td>
<figure class="image image-style-align-center image_resized" style="width:100%;">
<img style="aspect-ratio:1074/276;" src="11_Geo Map_image.png"
width="1074" height="276">
</figure>
</td>
<td>And then go to Owned Attributes and type <code spellcheck="false">#geolocation="</code>,
then paste from the clipboard as-is and then add the ending <code spellcheck="false">"</code> character.
Press Enter to confirm and the map should now be updated to contain the
new note.</td>
</tr>
</tbody>
</table>
<figure class="table">
<table>
<thead>
<tr>
<th>&nbsp;</th>
<th>&nbsp;</th>
<th>&nbsp;</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<figure class="image image-style-align-center image_resized" style="width:56.84%;">
<img style="aspect-ratio:732/918;" src="11_Geo Map_image.png"
width="732" height="918">
</figure>
</td>
<td>Go to Google Maps on the web and look for a desired location, right click
on it and a context menu will show up.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<br>
<br>Simply click on the first item displaying the coordinates and they will
be copied to clipboard.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<br>
<br>Then paste the value inside the text box into the <code spellcheck="false">#geolocation</code> attribute
of a child note of the map (don't forget to surround the value with a
<code
spellcheck="false">"</code>character).</td>
</tr>
<tr>
<td>2</td>
<td>
<figure class="image image-style-align-center image_resized" style="width:100%;">
<img style="aspect-ratio:518/84;" src="4_Geo Map_image.png"
width="518" height="84">
</figure>
</td>
<td>In Trilium, create a child note under the map.</td>
</tr>
<tr>
<td>3</td>
<td>
<figure class="image image-style-align-center image_resized" style="width:100%;">
<img style="aspect-ratio:1074/276;" src="10_Geo Map_image.png"
width="1074" height="276">
</figure>
</td>
<td>And then go to Owned Attributes and type <code spellcheck="false">#geolocation="</code>,
then paste from the clipboard as-is and then add the ending <code spellcheck="false">"</code> character.
Press Enter to confirm and the map should now be updated to contain the
new note.</td>
</tr>
</tbody>
</table>
</figure>
<h3>Adding from OpenStreetMap</h3>
<p>Similarly to the Google Maps approach:</p>
<table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<img class="image_resized" style="aspect-ratio:562/454;width:100%;" src="1_Geo Map_image.png"
width="562" height="454">
</td>
<td>Go to any location on openstreetmap.org and right click to bring up the
context menu. Select the “Show address” item.</td>
</tr>
<tr>
<td>2</td>
<td>
<img class="image_resized" style="aspect-ratio:696/480;width:100%;" src="Geo Map_image.png"
width="696" height="480">
</td>
<td>The address will be visible in the top-left of the screen, in the place
of the search bar.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<br>
<br>Select the coordinates and copy them into the clipboard.</td>
</tr>
<tr>
<td>3</td>
<td>
<img class="image_resized" style="aspect-ratio:640/276;width:100%;" src="5_Geo Map_image.png"
width="640" height="276">
</td>
<td>Simply paste the value inside the text box into the <code spellcheck="false">#geolocation</code> attribute
of a child note of the map and then it should be displayed on the map.</td>
</tr>
</tbody>
</table>
<figure class="table">
<table>
<thead>
<tr>
<th>&nbsp;</th>
<th>&nbsp;</th>
<th>&nbsp;</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<img class="image_resized" style="aspect-ratio:562/454;width:100%;" src="1_Geo Map_image.png"
width="562" height="454">
</td>
<td>Go to any location on openstreetmap.org and right click to bring up the
context menu. Select the “Show address” item.</td>
</tr>
<tr>
<td>2</td>
<td>
<img class="image_resized" style="aspect-ratio:696/480;width:100%;" src="Geo Map_image.png"
width="696" height="480">
</td>
<td>The address will be visible in the top-left of the screen, in the place
of the search bar.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<br>
<br>Select the coordinates and copy them into the clipboard.</td>
</tr>
<tr>
<td>3</td>
<td>
<img class="image_resized" style="aspect-ratio:640/276;width:100%;" src="5_Geo Map_image.png"
width="640" height="276">
</td>
<td>Simply paste the value inside the text box into the <code spellcheck="false">#geolocation</code> attribute
of a child note of the map and then it should be displayed on the map.</td>
</tr>
</tbody>
</table>
</figure>
<h2>Adding GPS tracks (.gpx)</h2>
<p>Trilium has basic support for displaying GPS tracks on the geo map.</p>
<table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<figure class="image image-style-align-center">
<img style="aspect-ratio:226/74;" src="3_Geo Map_image.png"
width="226" height="74">
</figure>
</td>
<td>To add a track, simply drag &amp; drop a .gpx file inside the geo map
in the note tree.</td>
</tr>
<tr>
<td>2</td>
<td>
<figure class="image image-style-align-center">
<img style="aspect-ratio:322/222;" src="14_Geo Map_image.png"
width="322" height="222">
</figure>
</td>
<td>In order for the file to be recognized as a GPS track, it needs to show
up as <code spellcheck="false">application/gpx+xml</code> in the <em>File type</em> field.</td>
</tr>
<tr>
<td>3</td>
<td>
<figure class="image image-style-align-center">
<img style="aspect-ratio:620/530;" src="6_Geo Map_image.png"
width="620" height="530">
</figure>
</td>
<td>When going back to the map, the track should now be visible.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<br>
<br>The start and end points of the track are indicated by the two blue markers.</td>
</tr>
</tbody>
</table>
<aside class="admonition note">
<p>The starting point of the track will be displayed as a marker, with the
name of the note underneath. The start marker will also respect the icon
and the <code spellcheck="false">color</code> of the note. The end marker
is displayed with a distinct icon.</p>
<p>If the GPX contains waypoints, they will also be displayed. If they have
a name, it is displayed when hovering over it with the mouse.</p>
</aside>
<h2>Read-only mode</h2>
<p>When a map is in read-only all editing features will be disabled such
as:</p>
<ul>
<li>The add button in the&nbsp;<a class="reference-link" href="#root/_help_XpOYSgsLkTJy">Floating buttons</a>.</li>
<li>Dragging markers.</li>
<li>Editing from the contextual menu (removing locations or adding new items).</li>
</ul>
<p>To enable read-only mode simply press the <em>Lock</em> icon from the&nbsp;
<a
class="reference-link" href="#root/_help_XpOYSgsLkTJy">Floating buttons</a>. To disable it, press the button again.</p>
<h2>Configuration</h2>
<h3>Map Style</h3>
<p>The styling of the map can be adjusted in the <em>Collection Properties</em> tab
in the&nbsp;<a class="reference-link" href="#root/_help_BlN9DFI679QC">Ribbon</a>&nbsp;or
manually via the <code spellcheck="false">#map:style</code> attribute.</p>
<p>The geo map comes with two different types of styles:</p>
<ul>
<li>Raster styles
<ul>
<li>For these styles the map is represented as a grid of images at different
zoom levels. This is the traditional way OpenStreetMap used to work.</li>
<li>Zoom is slightly restricted.</li>
<li>Currently, the only raster theme is the original OpenStreetMap style.</li>
<figure
class="table">
<table>
<thead>
<tr>
<th>&nbsp;</th>
<th>&nbsp;</th>
<th>&nbsp;</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<figure class="image image-style-align-center">
<img style="aspect-ratio:226/74;" src="3_Geo Map_image.png"
width="226" height="74">
</figure>
</td>
<td>To add a track, simply drag &amp; drop a .gpx file inside the geo map
in the note tree.</td>
</tr>
<tr>
<td>2</td>
<td>
<figure class="image image-style-align-center">
<img style="aspect-ratio:322/222;" src="13_Geo Map_image.png"
width="322" height="222">
</figure>
</td>
<td>In order for the file to be recognized as a GPS track, it needs to show
up as <code spellcheck="false">application/gpx+xml</code> in the <em>File type</em> field.</td>
</tr>
<tr>
<td>3</td>
<td>
<figure class="image image-style-align-center">
<img style="aspect-ratio:620/530;" src="6_Geo Map_image.png"
width="620" height="530">
</figure>
</td>
<td>When going back to the map, the track should now be visible.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<br>
<br>The start and end points of the track are indicated by the two blue markers.</td>
</tr>
</tbody>
</table>
</figure>
<aside class="admonition note">
<p>The starting point of the track will be displayed as a marker, with the
name of the note underneath. The start marker will also respect the icon
and the <code spellcheck="false">color</code> of the note. The end marker
is displayed with a distinct icon.</p>
<p>If the GPX contains waypoints, they will also be displayed. If they have
a name, it is displayed when hovering over it with the mouse.</p>
</aside>
<h2>Read-only mode</h2>
<p>When a map is in read-only all editing features will be disabled such
as:</p>
<ul>
<li>The add button in the&nbsp;<a class="reference-link" href="#root/_help_XpOYSgsLkTJy">Floating buttons</a>.</li>
<li
>Dragging markers.</li>
<li>Editing from the contextual menu (removing locations or adding new items).</li>
</ul>
<p>To enable read-only mode simply press the <em>Lock</em> icon from the&nbsp;
<a
class="reference-link" href="#root/_help_XpOYSgsLkTJy">Floating buttons</a>. To disable it, press the button again.</p>
<h2>Configuration</h2>
<h3>Map Style</h3>
<p>The styling of the map can be adjusted in the&nbsp;<a class="reference-link"
href="#root/pOsGYCXsbNQG/GTwFsgaA0lCt/_help_CssoWBu8I7jF">Collection Properties</a>&nbsp;or
manually via the <code spellcheck="false">#map:style</code> attribute.</p>
<p>The geo map comes with two different types of styles:</p>
<ul>
<li>Raster styles
<ul>
<li>For these styles the map is represented as a grid of images at different
zoom levels. This is the traditional way OpenStreetMap used to work.</li>
<li
>Zoom is slightly restricted.</li>
<li>Currently, the only raster theme is the original OpenStreetMap style.</li>
</ul>
</li>
<li>Vector styles
<ul>
<li>Vector styles are not represented as images, but as geometrical shapes.
This makes the rendering much smoother, especially when zooming and looking
at the building edges, for example.</li>
<li>The map can be zoomed in much further.</li>
<li>These come both in a light and a dark version.</li>
<li>The vector styles come from <a href="https://versatiles.org/">VersaTiles</a>,
a free and open-source project providing map tiles based on OpenStreetMap.</li>
</ul>
</li>
</ul>
<aside class="admonition note">
<p>Currently it is not possible to use a custom map style.</p>
</aside>
<h3>Scale</h3>
<p>Activating this option via the&nbsp;<a class="reference-link" href="#root/_help_BlN9DFI679QC">Ribbon</a>&nbsp;or
manually via <code spellcheck="false">#map:scale</code> will display an indicator
in the bottom-left of the scale of the map.</p>
<h2>Troubleshooting</h2>
<figure class="image image-style-align-right image_resized" style="width:34.06%;">
<img style="aspect-ratio:678/499;" src="13_Geo Map_image.png"
width="678" height="499">
</figure>
<h3>Grid-like artifacts on the map</h3>
<p>This occurs if the application is not at 100% zoom which causes the pixels
of the map to not render correctly due to fractional scaling. The only
possible solution is to set the UI zoom at 100% (default keyboard shortcut
is <kbd>Ctrl</kbd>+<kbd>0</kbd>).</p>
</li>
<li>Vector styles
<ul>
<li>Vector styles are not represented as images, but as geometrical shapes.
This makes the rendering much smoother, especially when zooming and looking
at the building edges, for example.</li>
<li>The map can be zoomed in much further.</li>
<li>These come both in a light and a dark version.</li>
<li>The vector styles come from <a href="https://versatiles.org/">VersaTiles</a>,
a free and open-source project providing map tiles based on OpenStreetMap.</li>
</ul>
</li>
</ul>
<h3>Custom map style / tiles</h3>
<p>Starting with v0.102.0 it is possible to use custom tile sets, but only
in raster format.</p>
<p>To do so, manually set the <code spellcheck="false">#map:style</code>
<a
href="#root/_help_HI6GBBIduIgv">label</a>to the URL of the tile set. For example, to use Esri.NatGeoWorldMap,
set the value to <a href="https://server.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/tile/%7Bz%7D/%7By%7D/%7Bx%7D."><code spellcheck="false">https://server.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/tile/{z}/{y}/{x}</code>.</a>
</p>
<aside class="admonition note">
<p>For a list of tile sets, see the <a href="https://leaflet-extras.github.io/leaflet-providers/preview/">Leaflet Providers preview</a> page.
Select a desired tile set and just copy the URL from the <em>Plain JavaScript</em> example.</p>
</aside>
<p>Custom vector map support is planned, but not yet implemented.</p>
<h3>Other options</h3>
<p>The following options can be configured either via the&nbsp;<a class="reference-link"
href="#root/pOsGYCXsbNQG/GTwFsgaA0lCt/_help_CssoWBu8I7jF">Collection Properties</a>,
by clicking on the settings (Gear icon). Alternatively, each of these options
also have a corresponding <a href="#root/_help_HI6GBBIduIgv">label</a> that can
be set manually.</p>
<ul>
<li>Scale, which illustrates the scale of the map in kilometers and miles
in the bottom-left of the map.</li>
<li>The name of the markers is displayed by default underneath the pin on
the map. Since v0.102.0, it is possible to hide these labels which increases
the performance and decreases clutter when there are many markers on the
map.</li>
</ul>
<h2>Troubleshooting</h2>
<figure class="image image-style-align-right image_resized" style="width:34.06%;">
<img style="aspect-ratio:678/499;" src="12_Geo Map_image.png"
width="678" height="499">
</figure>
<h3>Grid-like artifacts on the map</h3>
<p>This occurs if the application is not at 100% zoom which causes the pixels
of the map to not render correctly due to fractional scaling. The only
possible solution is to set the UI zoom at 100% (default keyboard shortcut
is <kbd>Ctrl</kbd>+<kbd>0</kbd>).</p>

View File

@@ -26,5 +26,9 @@
<p>The grid view is also used by default in the&nbsp;<a class="reference-link"
href="#root/_help_0ESUbbAxVnoK">Note List</a>&nbsp;of every note, making it easy
to navigate to children notes.</p>
<h3>Creating a new table</h3>
<p>Right click on an existing note in the&nbsp;<a class="reference-link"
href="#root/_help_oPVyFC7WL2Lp">Note Tree</a>&nbsp;and select <em>Insert child note</em> and
look for <em>Grid View</em>.</p>
<h2>Configuration</h2>
<p>Unlike most other view types, the grid view is not actually configurable.</p>

View File

@@ -5,6 +5,10 @@
<p>The Board view presents sub-notes in columns for a Kanban-like experience.
Each column represents a possible value for a status label, which can be
adjusted.</p>
<h2>Creating a Kanban board</h2>
<p>Right click on an existing note in the&nbsp;<a class="reference-link"
href="#root/_help_oPVyFC7WL2Lp">Note Tree</a>&nbsp;and select <em>Insert child note</em> and
look for <em>Kanban Board</em>.</p>
<h2>How it works</h2>
<p>When first creating a collection of <em>Board</em> type, a few subnotes
will be created, each having a <code spellcheck="false">#status</code> label
@@ -24,14 +28,15 @@
<li>To reorder a column, simply hold the mouse over the title and drag it
to the desired position.</li>
<li>To delete a column, right click on its title and select <em>Delete column</em>.</li>
<li>To rename a column, click on the note title.
<li
>To rename a column, click on the note title.
<ul>
<li>Press Enter to confirm.</li>
<li>Upon renaming a column, the corresponding status attribute of all its
notes will be changed in bulk.</li>
</ul>
</li>
<li>If there are many columns, use the mouse wheel to scroll.</li>
</li>
<li>If there are many columns, use the mouse wheel to scroll.</li>
</ul>
<h3>Working with notes</h3>
<ul>
@@ -75,14 +80,16 @@
href="#root/_help_oPVyFC7WL2Lp">Note Tree</a>.</p>
<ol>
<li>Select the desired note in the&nbsp;<a class="reference-link" href="#root/_help_oPVyFC7WL2Lp">Note Tree</a>.</li>
<li>Hold the mouse on the note and drag it to the to the desired column.</li>
<li
>Hold the mouse on the note and drag it to the to the desired column.</li>
</ol>
<p>This works for:</p>
<ul>
<li>Notes that are not children of the board, case in which a <a href="#root/_help_IakOLONlIfGI">clone</a> will
be created.</li>
<li>Notes that are children of the board, but not yet assigned on the board.</li>
<li>Notes that are children of the board, case in which they will be moved
<li
>Notes that are children of the board, case in which they will be moved
to the new column.</li>
</ul>
<h3>Keyboard interaction</h3>
@@ -92,9 +99,10 @@
column titles, notes and the “New item” button for each of the columns,
in sequential order.</li>
<li>To rename a column or a note, press <kbd>F2</kbd> while it is focused.</li>
<li>To open a specific note or create a new item, press <kbd>Enter</kbd> while
<li
>To open a specific note or create a new item, press <kbd>Enter</kbd> while
it is focused.</li>
<li>To dismiss a rename of a note or a column, press <kbd>Escape</kbd>.</li>
<li>To dismiss a rename of a note or a column, press <kbd>Escape</kbd>.</li>
</ul>
<h2>Configuration</h2>
<h3>Displaying custom attributes</h3>
@@ -110,8 +118,9 @@
<ol>
<li>Go to board note.</li>
<li>In the ribbon select <em>Owned Attributes</em> → plus button → <em>Add new label/relation definition</em>.</li>
<li>Configure the attribute as desired.</li>
<li>Check <em>Inheritable</em> to make it applicable to child notes automatically.</li>
<li
>Configure the attribute as desired.</li>
<li>Check <em>Inheritable</em> to make it applicable to child notes automatically.</li>
</ol>
<p>After creating the attribute, click on a note and fill in the promoted
attributes which should then reflect inside the board.</p>
@@ -122,13 +131,15 @@
assigning a custom name.</li>
<li>Both “Single value” and “Multi value” attributes are supported. In case
of multi-value, a badge is displayed for every instance of the attribute.</li>
<li>All label types are supported, including dates, booleans and URLs.</li>
<li>Relation attributes are also supported as well, showing a link with the
target note title and icon.</li>
<li>Currently, it's not possible to adjust which promoted attributes are displayed,
since all promoted attributes will be displayed (except the <code spellcheck="false">board:groupBy</code> one).
There are plans to improve upon this being able to hide promoted attributes
individually.</li>
<li
>All label types are supported, including dates, booleans and URLs.</li>
<li
>Relation attributes are also supported as well, showing a link with the
target note title and icon.</li>
<li>Currently, it's not possible to adjust which promoted attributes are displayed,
since all promoted attributes will be displayed (except the <code spellcheck="false">board:groupBy</code> one).
There are plans to improve upon this being able to hide promoted attributes
individually.</li>
</ul>
<h3>Grouping by another label</h3>
<p>By default, the label used to group the notes is <code spellcheck="false">#status</code>.
@@ -146,36 +157,33 @@
<ul>
<li>The columns represent the <em>target notes</em> of a relation.</li>
<li>When creating a new column, a note is selected instead of a column name.</li>
<li>The column icon will match the target note.</li>
<li>Moving notes between columns will change its relation.</li>
<li>Renaming an existing column will change the target note of all the notes
in that column.</li>
<li
>The column icon will match the target note.</li>
<li>Moving notes between columns will change its relation.</li>
<li>Renaming an existing column will change the target note of all the notes
in that column.</li>
</ul>
<p>Using relations instead of labels has some benefits:</p>
<ul>
<li>The status/grouping of the notes is visible outside the Kanban board,
for example on the&nbsp;<a class="reference-link" href="#root/_help_bdUJEHsAPYQR">Note Map</a>.</li>
<li>Columns can have icons.</li>
<li>Renaming columns is less intensive since it simply involves changing the
note title of the target note instead of having to do a bulk rename.</li>
<li
>Columns can have icons.</li>
<li>Renaming columns is less intensive since it simply involves changing the
note title of the target note instead of having to do a bulk rename.</li>
</ul>
<p>To do so:</p>
<ol>
<li>
<p>First, create a Kanban board from scratch and not a template:</p>
</li>
<li>
<p>Assign <code spellcheck="false">#viewType=board #hidePromotedAttributes</code> to
emulate the default template.</p>
</li>
<li>
<p>Set <code spellcheck="false">#board:groupBy</code> to the name of a relation
<li>First, create a Kanban board from scratch and not a template:</li>
<li
>Assign <code spellcheck="false">#viewType=board #hidePromotedAttributes</code> to
emulate the default template.</li>
<li>Set <code spellcheck="false">#board:groupBy</code> to the name of a relation
to group by, <strong>including the</strong> <code spellcheck="false">~</code> <strong>prefix</strong> (e.g.
<code
spellcheck="false">~status</code>).</p>
</li>
<li>
<p>Optionally, use&nbsp;<a class="reference-link" href="#root/_help_OFXdgB2nNk1F">Promoted Attributes</a>&nbsp;for
easy status change within the note:</p><pre><code class="language-text-x-trilium-auto">#relation:status(inheritable)="promoted,alias=Status,single"</code></pre>
</li>
spellcheck="false">~status</code>).</li>
<li>
<p>Optionally, use&nbsp;<a class="reference-link" href="#root/_help_OFXdgB2nNk1F">Promoted Attributes</a>&nbsp;for
easy status change within the note:</p><pre><code class="language-text-x-trilium-auto">#relation:status(inheritable)="promoted,alias=Status,single"</code></pre>
</li>
</ol>

View File

@@ -10,6 +10,10 @@
<p>In the example above, the "Node.js" note on the left panel contains several
child notes. The right panel displays the content of these child notes
as a single continuous document.</p>
<h3>Creating a new table</h3>
<p>Right click on an existing note in the&nbsp;<a class="reference-link"
href="#root/_help_oPVyFC7WL2Lp">Note Tree</a>&nbsp;and select <em>Insert child note</em> and
look for <em>List View</em>.</p>
<h2>Interaction</h2>
<ul>
<li>Each note can be expanded or collapsed by clicking on the arrow to the
@@ -26,14 +30,15 @@
functionality:</p>
<ul>
<li>The table of contents of the PDF will reflect the structure of the notes.</li>
<li>Reference and inline links to other notes within the same hierarchy will
<li
>Reference and inline links to other notes within the same hierarchy will
be functional (will jump to the corresponding page). If a link refers to
a note that is not in the printed hierarchy, it will be unlinked.</li>
</ul>
<h2>Expanding and collapsing multiple notes at once</h2>
<p>Apart from individually expanding or collapsing notes, it's also possible
to expand or collapse them all at once. To do so, go to the <em>Collection Properties</em> tab
in the&nbsp;<a class="reference-link" href="#root/_help_BlN9DFI679QC">Ribbon</a>&nbsp;and
to expand or collapse them all at once. To do so, go to the&nbsp;<a class="reference-link"
href="#root/pOsGYCXsbNQG/GTwFsgaA0lCt/_help_CssoWBu8I7jF">Collection Properties</a>&nbsp;and
look for the corresponding button.</p>
<p>By default, the <em>Expand</em> button will only expand the direct children
(first level) of the collection. Starting with v0.100.0, it's possible

View File

@@ -4,23 +4,29 @@
</figure>
<p>The Presentation view allows the creation of slideshows directly from
within Trilium.</p>
<h3>Creating a new presentation</h3>
<p>Right click on an existing note in the&nbsp;<a class="reference-link"
href="#root/_help_oPVyFC7WL2Lp">Note Tree</a>&nbsp;and select <em>Insert child note</em> and
look for <em>Presentation</em>.</p>
<h2>How it works</h2>
<ul>
<li>Each slide is a child note of the collection.</li>
<li>The order of the child notes determines the order of the slides.</li>
<li>Unlike traditional presentation software, slides can be laid out both
<li
>Unlike traditional presentation software, slides can be laid out both
horizontally and vertically (see belwo for more information).</li>
<li>Direct children will be laid out horizontally and the children of those
will be laid out vertically. Children deeper than two levels of nesting
are ignored.</li>
<li>Direct children will be laid out horizontally and the children of those
will be laid out vertically. Children deeper than two levels of nesting
are ignored.</li>
</ul>
<h2>Interaction and navigation</h2>
<p>In the floating buttons section (top-right):</p>
<ul>
<li>Edit button to go to the corresponding note of the current slide.</li>
<li>Press Overview button (or the <kbd>O</kbd> key) to show a birds-eye view
<li
>Press Overview button (or the <kbd>O</kbd> key) to show a birds-eye view
of the slides. Press the button again to disable it.</li>
<li>Press the “Start presentation” button to show the presentation in full-screen.</li>
<li>Press the “Start presentation” button to show the presentation in full-screen.</li>
</ul>
<p>The following keyboard shortcuts are supported:</p>
<ul>
@@ -82,10 +88,11 @@
<p>At collection level, it's possible to adjust:</p>
<ul>
<li>The theme of the entire presentation to one of the predefined themes by
going to the&nbsp;<a class="reference-link" href="#root/_help_BlN9DFI679QC">Ribbon</a>&nbsp;and
looking for the <em>Collection Properties</em> tab.</li>
going to the&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/GTwFsgaA0lCt/_help_CssoWBu8I7jF">Collection Properties</a>&nbsp;and
looking for the <em>Theme</em> option.</li>
<li>It's currently not possible to create custom themes, although it is planned.</li>
<li>Note that it is note possible to alter the CSS via&nbsp;<a class="reference-link"
<li
>Note that it is note possible to alter the CSS via&nbsp;<a class="reference-link"
href="#root/_help_AlhDUqhENtH7">Custom app-wide CSS</a>&nbsp;because the slides
are rendered isolated (in a shadow DOM).</li>
</ul>
@@ -104,7 +111,8 @@
<ul>
<li>Text notes generally respect the formatting (bold, italic, foreground
and background colors) and font size. Code blocks and tables also work.</li>
<li>Try using more than just text notes, the presentation uses the same mechanism
<li
>Try using more than just text notes, the presentation uses the same mechanism
as <a href="#root/_help_R9pX4DGra2Vt">shared notes</a> and&nbsp;<a class="reference-link"
href="#root/_help_0ESUbbAxVnoK">Note List</a>&nbsp;so it should be able to display&nbsp;
<a
@@ -112,12 +120,10 @@
<a
class="reference-link" href="#root/_help_gBbsAeiuUxI5">Mind Map</a>&nbsp;in full-screen (without the interactivity).
<ul>
<li>
<p>Consider using a transparent background for&nbsp;<a class="reference-link"
href="#root/_help_grjYqerjn243">Canvas</a>, if the slides have a custom background
(go to the hamburger menu in the Canvas, press the button select a custom
color and write <code spellcheck="false">transparent</code>).</p>
</li>
<li>Consider using a transparent background for&nbsp;<a class="reference-link"
href="#root/_help_grjYqerjn243">Canvas</a>, if the slides have a custom background
(go to the hamburger menu in the Canvas, press the button select a custom
color and write <code spellcheck="false">transparent</code>).</li>
<li>
<p>For&nbsp;<a class="reference-link" href="#root/_help_s1aBHPd79XYj">Mermaid Diagrams</a>,
some of them have a predefined background which can be changed via the
@@ -129,7 +135,7 @@ config:
---</code></pre>
</li>
</ul>
</li>
</li>
</ul>
<h2>Under the hood</h2>
<p>The Presentation view uses <a href="https://revealjs.com/">Reveal.js</a> to

View File

@@ -36,8 +36,9 @@
</ul>
<h2>Interaction</h2>
<h3>Creating a new table</h3>
<p>Right click the&nbsp;<a class="reference-link" href="#root/_help_oPVyFC7WL2Lp">Note Tree</a>&nbsp;and
select <em>Insert child note</em> and look for the <em>Table item</em>.</p>
<p>Right click on an existing note in the&nbsp;<a class="reference-link"
href="#root/_help_oPVyFC7WL2Lp">Note Tree</a>&nbsp;and select <em>Insert child note</em> and
look for <em>Table</em>.</p>
<h3>Adding columns</h3>
<p>Each column is a <a href="#root/_help_OFXdgB2nNk1F">promoted or unpromoted attribute</a> that
is defined on the Collection note.</p>
@@ -45,7 +46,8 @@
<ul>
<li>Press <em>Add new column</em> at the bottom of the table.</li>
<li>Right click on an existing column and select Add column to the left/right.</li>
<li>Right click on the empty space of the column header and select <em>Label</em> or <em>Relation</em> in
<li
>Right click on the empty space of the column header and select <em>Label</em> or <em>Relation</em> in
the <em>New column</em> section.</li>
</ul>
<h3>Adding new rows</h3>
@@ -65,10 +67,11 @@
<ul>
<li>Sorting by the selected column and resetting the sort.</li>
<li>Hiding the selected column or adjusting the visibility of every column.</li>
<li>Adding new columns to the left or the right of the column.</li>
<li>Editing the current column.</li>
<li>Deleting the current column.</li>
</ul>
<li
>Adding new columns to the left or the right of the column.</li>
<li>Editing the current column.</li>
<li>Deleting the current column.</li>
</ul>
</li>
<li>Right clicking on the space to the right of the columns, allows:
<ul>
@@ -94,15 +97,16 @@
<ul>
<li>The editing will respect the type of the promoted attribute, by presenting
a normal text box, a number selector or a date selector for example.</li>
<li>It also possible to change the title of a note.</li>
<li>Editing relations is also possible
<ul>
<li>Simply click on a relation and it will become editable. Enter the text
to look for a note and click on it.</li>
<li>To remove a relation, remove the title of the note from the text box and
click outside the cell.</li>
</ul>
</li>
<li
>It also possible to change the title of a note.</li>
<li>Editing relations is also possible
<ul>
<li>Simply click on a relation and it will become editable. Enter the text
to look for a note and click on it.</li>
<li>To remove a relation, remove the title of the note from the text box and
click outside the cell.</li>
</ul>
</li>
</ul>
<h3>Editing columns</h3>
<p>It is possible to edit a column by right clicking it and selecting <em>Edit column.</em> This
@@ -127,7 +131,8 @@
<h3>Reordering and hiding columns</h3>
<ul>
<li>Columns can be reordered by dragging the header of the columns.</li>
<li>Columns can be hidden or shown by right clicking on a column and clicking
<li
>Columns can be hidden or shown by right clicking on a column and clicking
the item corresponding to the column.</li>
</ul>
<h3>Reordering rows</h3>
@@ -141,7 +146,8 @@
<li>If the parent note has <code spellcheck="false">#sorted</code>, reordering
will be disabled.</li>
<li>If using nested tables, then reordering will also be disabled.</li>
<li>Currently, it's possible to reorder notes even if column sorting is used,
<li
>Currently, it's possible to reorder notes even if column sorting is used,
but the result might be inconsistent.</li>
</ul>
<h3>Nested trees</h3>
@@ -153,8 +159,8 @@
to a certain number of levels or even disable it completely. To do so,
either:</p>
<ul>
<li>Go to <em>Collection Properties</em> in the&nbsp;<a class="reference-link"
href="#root/_help_BlN9DFI679QC">Ribbon</a>&nbsp;and look for the <em>Max nesting depth</em> section.
<li>Go to&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/GTwFsgaA0lCt/_help_CssoWBu8I7jF">Collection Properties</a>&nbsp;and
look for the <em>Max nesting depth</em> section.
<ul>
<li>To disable nesting, type 0 and press Enter.</li>
<li>To limit to a certain depth, type in the desired number (e.g. 2 to only

View File

@@ -2,15 +2,20 @@
<img style="aspect-ratio:601/216;" src="Render Note_image.png"
width="601" height="216">
</figure>
<p>Render Note is used in&nbsp;<a class="reference-link" href="#root/_help_CdNpE2pqjmI6">Scripting</a>.
It works by displaying the HTML of a&nbsp;<a class="reference-link" href="#root/_help_6f9hih2hXXZk">Code</a>&nbsp;note,
via an attribute.</p>
<p>Render Note is a special case of <a href="#root/_help_yIhgI5H7A2Sm">front-end scripting</a> which
allows rendering custom content inside a note. This makes it possible to
create custom dashboards, or to use a custom note editor.</p>
<p>The content can either be a vanilla HTML, or Preact JSX.</p>
<h2>Creating a render note</h2>
<ol>
<li>Create a&nbsp;<a class="reference-link" href="#root/_help_6f9hih2hXXZk">Code</a>&nbsp;note
with the HTML language, with what needs to be displayed (for example
<code
spellcheck="false">&lt;p&gt;Hello world.&lt;/p&gt;</code>).</li>
with the:
<ol>
<li>HTML language for the legacy/vanilla method, with what needs to be displayed
(for example <code spellcheck="false">&lt;p&gt;Hello world.&lt;/p&gt;</code>).</li>
<li>JSX for the Preact-based approach (see below).</li>
</ol>
</li>
<li>Create a&nbsp;<a class="reference-link" href="#root/_help_HcABDtFCkbFN">Render Note</a>.</li>
<li>Assign the <code spellcheck="false">renderNote</code> <a href="#root/_help_zEY4DaJG4YT5">relation</a> to
point at the previously created code note.</li>
@@ -47,7 +52,7 @@ $dateEl.text(new Date());</code></pre>
<li>
<p>Create a child&nbsp;<a class="reference-link" href="#root/_help_6f9hih2hXXZk">Code</a>&nbsp;note
with JSX as the language.
<br>As an example, use the following content:</p><pre><code class="language-text-jsx">export default function() {
<br>As an example, use the following content:</p><pre><code class="language-text-x-trilium-auto">export default function() {
return (
&lt;&gt;
&lt;p&gt;Hello world.&lt;/p&gt;

View File

@@ -0,0 +1,29 @@
<p>Unlike <a href="#root/_help_yIhgI5H7A2Sm">front-end scripts</a> which run on the
client / browser-side, back-end scripts run directly on the Node.js environment
of the Trilium server.</p>
<p>Back-end scripts can be used both on a&nbsp;<a class="reference-link"
href="#root/_help_WOcw2SLH6tbX">Server Installation</a>&nbsp;(where it will run
on the device the server is running on), or on the&nbsp;<a class="reference-link"
href="#root/_help_poXkQfguuA0U">Desktop Installation</a>&nbsp;(where it will
run on the PC).</p>
<h2>Advantages of backend scripts</h2>
<p>The benefit of backend scripts is that they can be pretty powerful, for
example to have access to the underlying system, for example it can read
files or execute processes.</p>
<p>However, the main benefit of backend scripts is that they have easier
access to the notes since the information about them is already loaded
in memory. Whereas on the client, notes have to be manually loaded first.</p>
<h2>Creating a backend script</h2>
<p>Create a new&nbsp;<a class="reference-link" href="#root/_help_6f9hih2hXXZk">Code</a>&nbsp;note
and select the language <em>JS backend</em>.</p>
<h2>Running backend scripts</h2>
<p>Backend scripts can be either run manually (via the Execute button on
the script page), or they can be triggered on certain events.</p>
<p>In addition, scripts can be run automatically when the server starts up,
on a fixed time interval or when a certain event occurs (such as an attribute
being modified). For more information, see the dedicated&nbsp;<a class="reference-link"
href="#root/_help_GPERMystNGTB">Events</a>&nbsp;page.</p>
<h2>Script API</h2>
<p>Trilium exposes a set of APIs that can be directly consumed by scripts,
under the <code spellcheck="false">api</code> object. For a reference of
this API, see&nbsp;<a class="reference-link" href="#root/_help_MEtfsqa5VwNi">Backend API</a>.</p>

View File

@@ -14,32 +14,30 @@
</thead>
<tbody>
<tr>
<td><code>run</code>
<td><code spellcheck="false">run</code>
</td>
<td>
<p>Defines on which events script should run. Possible values are:</p>
<ul>
<li><code>frontendStartup</code> - when Trilium frontend starts up (or is refreshed),
but not on mobile.</li>
<li><code>mobileStartup</code> - when Trilium frontend starts up (or is refreshed),
on mobile.</li>
<li><code>backendStartup</code> - when Trilium backend starts up</li>
<li><code>hourly</code> - run once an hour. You can use additional label <code>runAtHour</code> to
specify at which hour, on the back-end.</li>
<li><code>daily</code> - run once a day, on the back-end</li>
<li><code spellcheck="false">backendStartup</code> - when Trilium backend starts
up</li>
<li><code spellcheck="false">hourly</code> - run once an hour. You can use
additional label <code spellcheck="false">runAtHour</code> to specify at
which hour, on the back-end.</li>
<li><code spellcheck="false">daily</code> - run once a day, on the back-end</li>
</ul>
</td>
</tr>
<tr>
<td><code>runOnInstance</code>
<td><code spellcheck="false">runOnInstance</code>
</td>
<td>Specifies that the script should only run on a particular&nbsp;<a class="reference-link"
href="#root/_help_c5xB8m4g2IY6">Trilium instance</a>.</td>
</tr>
<tr>
<td><code>runAtHour</code>
<td><code spellcheck="false">runAtHour</code>
</td>
<td>On which hour should this run. Should be used together with <code>#run=hourly</code>.
<td>On which hour should this run. Should be used together with <code spellcheck="false">#run=hourly</code>.
Can be defined multiple times for more runs during the day.</td>
</tr>
</tbody>

View File

@@ -1,92 +1,76 @@
<h2>Frontend API</h2>
<p>The frontend api supports two styles, regular scripts that are run with
the current app and note context, and widgets that export an object to
Trilium to be used in the UI. In both cases, the frontend api of Trilium
is available to scripts running in the frontend context as global variable
<code
spellcheck="false">api</code>. The members and methods of the api can be seen on the <a href="#root/_help_GLks18SNjxmC">Script API</a> page.</p>
<p>Front-end scripts are custom JavaScript notes that are run on the client
(browser environment)</p>
<p>There are four flavors of front-end scripts:</p>
<table>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Regular scripts</td>
<td>These are run with the current app and note context. These can be run
either manually or automatically on start-up.</td>
</tr>
<tr>
<td><a class="reference-link" href="#root/_help_MgibgPcfeuGz">Custom Widgets</a>
</td>
<td>These can introduce new UI elements in various positions, such as near
the&nbsp;<a class="reference-link" href="#root/_help_oPVyFC7WL2Lp">Note Tree</a>,
content area or even the&nbsp;<a class="reference-link" href="#root/_help_RnaPdbciOfeq">Right Sidebar</a>.</td>
</tr>
<tr>
<td><a class="reference-link" href="#root/_help_4Gn3psZKsfSm">Launch Bar Widgets</a>
</td>
<td>Similar to&nbsp;<a class="reference-link" href="#root/_help_MgibgPcfeuGz">Custom Widgets</a>,
but dedicated to the&nbsp;<a class="reference-link" href="#root/_help_xYmIYSP6wE3F">Launch Bar</a>.
These can simply introduce new buttons or graphical elements to the bar.</td>
</tr>
<tr>
<td><a class="reference-link" href="#root/_help_HcABDtFCkbFN">Render Note</a>
</td>
<td>This allows rendering custom content inside a note, using either HTML
or Preact JSX.</td>
</tr>
</tbody>
</table>
<p>For more advanced behaviors that do not require a user interface (e.g.
batch modifying notes), see&nbsp;<a class="reference-link" href="#root/_help_SPirpZypehBG">Backend scripts</a>.</p>
<h2>Scripts</h2>
<p>Scripts don't have any special requirements. They can be run at will using
the execute button in the UI or they can be configured to run at certain
times using <a href="#root/_help_zEY4DaJG4YT5">Attributes</a> on the note containing
the script.</p>
<h3>Global Events</h3>
<p>This attribute is called <code spellcheck="false">#run</code> and it can
have any of the following values:</p>
<p>Scripts don't have any special requirements. They can be run manually
using the <em>Execute</em> button on the code note or they can be run automatically;
to do so, set the <code spellcheck="false">run</code> <a href="#root/_help_HI6GBBIduIgv">label</a> to
either:</p>
<ul>
<li><code spellcheck="false">frontendStartup</code> - executes on frontend
upon startup.</li>
<li><code spellcheck="false">mobileStartup</code> - executes on mobile frontend
upon startup.</li>
<li><code spellcheck="false">backendStartup</code> - executes on backend upon
startup.</li>
<li><code spellcheck="false">hourly</code> - executes once an hour on backend.</li>
<li><code spellcheck="false">daily</code> - executes once a day on backend.</li>
</ul>
<h3>Entity Events</h3>
<p>These events are triggered by certain <a href="#root/_help_zEY4DaJG4YT5">relations</a> to
other notes. Meaning that the script is triggered only if the note has
this script attached to it through relations (or it can inherit it).</p>
<ul>
<li><code spellcheck="false">runOnNoteCreation</code> - executes when note
is created on backend.</li>
<li><code spellcheck="false">runOnNoteTitleChange</code> - executes when note
title is changed (includes note creation as well).</li>
<li><code spellcheck="false">runOnNoteContentChange</code> - executes when
note content is changed (includes note creation as well).</li>
<li><code spellcheck="false">runOnNoteChange</code> - executes when note is
changed (includes note creation as well).</li>
<li><code spellcheck="false">runOnNoteDeletion</code> - executes when note
is being deleted.</li>
<li><code spellcheck="false">runOnBranchCreation</code> - executes when a branch
is created. Branch is a link between parent note and child note and is
created e.g. when cloning or moving note.</li>
<li><code spellcheck="false">runOnBranchDeletion</code> - executes when a branch
is delete. Branch is a link between parent note and child note and is deleted
e.g. when moving note (old branch/link is deleted).</li>
<li><code spellcheck="false">runOnChildNoteCreation</code> - executes when
new note is created under this note.</li>
<li><code spellcheck="false">runOnAttributeCreation</code> - executes when
new attribute is created under this note.</li>
<li><code spellcheck="false">runOnAttributeChange</code> - executes when attribute
is changed under this note.</li>
<li><code spellcheck="false">frontendStartup</code> - when Trilium frontend
starts up (or is refreshed), but not on mobile.</li>
<li><code spellcheck="false">mobileStartup</code> - when Trilium frontend starts
up (or is refreshed), on mobile.</li>
</ul>
<aside class="admonition note">
<p>Backend scripts have more powerful triggering conditions, for example
they can run automatically on a hourly or daily basis, but also on events
such as when a note is created or an attribute is modified. See the server-side&nbsp;
<a
class="reference-link" href="#root/_help_GPERMystNGTB">Events</a>&nbsp;for more information.</p>
</aside>
<h2>Widgets</h2>
<p>Conversely to scripts, widgets do have some specific requirements in order
to work. A widget must:</p>
<p>Widgets require a certain format in order for Trilium to be able to integrate
them into the UI.</p>
<ul>
<li>Extend <a href="https://triliumnext.github.io/Notes/frontend_api/BasicWidget.html">BasicWidget</a> or
one of it's subclasses.</li>
<li>Create a new instance and assign it to <code spellcheck="false">module.exports</code>.</li>
<li>Define a <code spellcheck="false">parentWidget</code> member to determine
where it should be displayed.</li>
<li>Define a <code spellcheck="false">position</code> (integer) that determines
the location via sort order.</li>
<li>Have a <code spellcheck="false">#widget</code> attribute on the containing
note.</li>
<li>Create, render, and return your element in the render function.
<ul>
<li>For <a href="https://triliumnext.github.io/Notes/frontend_api/BasicWidget.html">BasicWidget</a> and
<a
href="https://triliumnext.github.io/Notes/frontend_api/NoteContextAwareWidget.html">NoteContextAwareWidget</a>you should create <code spellcheck="false">this.$widget</code> and
render it in <code spellcheck="false">doRender()</code>.</li>
<li>For <a href="https://triliumnext.github.io/Notes/frontend_api/RightPanelWidget.html">RightPanelWidget</a> the
<code
spellcheck="false">this.$widget</code>and <code spellcheck="false">doRender()</code> are already
handled and you should instead return the value in <code spellcheck="false">doRenderBody()</code>.</li>
</ul>
</li>
</ul>
<h3>parentWidget</h3>
<ul>
<li><code spellcheck="false">left-pane</code> - This renders the widget on
the left side of the screen where the note tree lives.</li>
<li><code spellcheck="false">center-pane</code> - This renders the widget in
the center of the layout in the same location that notes and splits appear.</li>
<li><code spellcheck="false">note-detail-pane</code> - This renders the widget <em>with</em> the
note in the center pane. This means it can appear multiple times with splits.</li>
<li><code spellcheck="false">right-pane</code> - This renders the widget to
the right of any opened notes.</li>
<li>For legacy widgets, the script note must export a <code spellcheck="false">BasicWidget</code> or
a derived one (see&nbsp;<a class="reference-link" href="#root/_help_GhurYZjh8e1V">Note context aware widget</a>&nbsp;or&nbsp;
<a
class="reference-link" href="#root/_help_M8IppdwVHSjG">Right pane widget</a>).</li>
<li>For Preact widgets, a built-in helper called <code spellcheck="false">defineWidget</code> needs
to be used.</li>
</ul>
<p>For more information, see&nbsp;<a class="reference-link" href="#root/_help_MgibgPcfeuGz">Custom Widgets</a>.</p>
<h2>Script API</h2>
<p>The front-end API of Trilium is available to all scripts running in the
front-end context as global variable <code spellcheck="false">api</code>.
For a reference of the API, see&nbsp;<a class="reference-link" href="#root/_help_Q2z6av6JZVWm">Frontend API</a>.</p>
<h3>Tutorial</h3>
<p>For more information on building widgets, take a look at <a href="#root/_help_SynTBQiBsdYJ">Widget Basics</a>.</p>

View File

@@ -71,7 +71,7 @@ class="ck-table-resized">
</colgroup>
<thead>
<tr>
<th>Value for <code>parentWidget</code>
<th>Value for <code spellcheck="false">parentWidget</code>
</th>
<th>Description</th>
<th>Sample widget</th>
@@ -80,15 +80,15 @@ class="ck-table-resized">
</thead>
<tbody>
<tr>
<th><code>left-pane</code>
<th><code spellcheck="false">left-pane</code>
</th>
<td>Appears within the same pane that holds the&nbsp;<a class="reference-link"
href="#root/_help_oPVyFC7WL2Lp">Note Tree</a>.</td>
<td>Same as above, with only a different <code>parentWidget</code>.</td>
<td>Same as above, with only a different <code spellcheck="false">parentWidget</code>.</td>
<td>None.</td>
</tr>
<tr>
<th><code>center-pane</code>
<th><code spellcheck="false">center-pane</code>
</th>
<td>In the content area. If a split is open, the widget will span all of the
splits.</td>
@@ -96,7 +96,7 @@ class="ck-table-resized">
<td>None.</td>
</tr>
<tr>
<th><code>note-detail-pane</code>
<th><code spellcheck="false">note-detail-pane</code>
</th>
<td>
<p>In the content area, inside the note detail area. If a split is open,
@@ -107,16 +107,19 @@ class="ck-table-resized">
</td>
<td>
<ul>
<li>The widget must export a <code>class</code> and not an instance of the class
(e.g. <code>no new</code>) because it needs to be multiplied for each note,
so that splits work correctly.</li>
<li>Since the <code>class</code> is exported instead of an instance, the <code>parentWidget</code> getter
must be <code>static</code>, otherwise the widget is ignored.</li>
<li>The widget must export a <code spellcheck="false">class</code> and not an
instance of the class (e.g. <code spellcheck="false">no new</code>) because
it needs to be multiplied for each note, so that splits work correctly.</li>
<li
>Since the <code spellcheck="false">class</code> is exported instead of an
instance, the <code spellcheck="false">parentWidget</code> getter must be
<code
spellcheck="false">static</code>, otherwise the widget is ignored.</li>
</ul>
</td>
</tr>
<tr>
<th><code>right-pane</code>
<th><code spellcheck="false">right-pane</code>
</th>
<td>In the&nbsp;<a class="reference-link" href="#root/_help_RnaPdbciOfeq">Right Sidebar</a>,
as a dedicated section.</td>
@@ -124,8 +127,8 @@ class="ck-table-resized">
</td>
<td>
<ul>
<li>Although not mandatory, it's best to use a <code>RightPanelWidget</code> instead
of a <code>BasicWidget</code> or a <code>NoteContextAwareWidget</code>.</li>
<li>Although not mandatory, it's best to use a <code spellcheck="false">RightPanelWidget</code> instead
of a <code spellcheck="false">BasicWidget</code> or a <code spellcheck="false">NoteContextAwareWidget</code>.</li>
</ul>
</td>
</tr>
@@ -143,4 +146,13 @@ class="ck-table-resized">
to the&nbsp;<a class="reference-link" href="#root/_help_xYmIYSP6wE3F">Launch Bar</a>.
See&nbsp;<a class="reference-link" href="#root/_help_4Gn3psZKsfSm">Launch Bar Widgets</a>&nbsp;for
more information.</p>
<h2>Custom position</h2>
<h2>Custom position</h2>
<p>The position of a custom widget is defined via a <code spellcheck="false">position</code> integer.</p>
<p>In legacy widgets:</p><pre><code class="language-text-x-trilium-auto">class MyWidget extends api.BasicWidget {
// [..
get position() { return 10; }
}</code></pre>
<p>In Preact widgets:</p><pre><code class="language-text-x-trilium-auto">export default defineWidget({
// [...]
position: 10
});</code></pre>

View File

@@ -5,16 +5,17 @@
<p>Unlike&nbsp;<a class="reference-link" href="#root/_help_MgibgPcfeuGz">Custom Widgets</a>,
the process of setting up a launch bar widget is slightly different:</p>
<ol>
<li>Create a Code note of type <em>JavaScript (front-end)</em>.
<li>Create a Code note of type <em>JavaScript (front-end)</em> or JSX (for Preact-based
widgets).
<ul>
<li>The script itself uses the same concepts as&nbsp;<a class="reference-link"
href="#root/_help_MgibgPcfeuGz">Custom Widgets</a>, including the use of a
<code
spellcheck="false">NoteContextAwareWidget</code>or a <code spellcheck="false">BasicWidget</code> (according
to needs).</li>
<li>As examples, see&nbsp;<a class="reference-link" href="#root/_help_IPArqVfDQ4We">Note Title Widget</a>&nbsp;and&nbsp;
<a
class="reference-link" href="#root/_help_gcI7RPbaNSh3">Analog Watch</a>.</li>
<li>As examples in both legacy and Preact format, see&nbsp;<a class="reference-link"
href="#root/_help_IPArqVfDQ4We">Note Title Widget</a>&nbsp;and&nbsp;<a class="reference-link"
href="#root/_help_gcI7RPbaNSh3">Analog Watch</a>.</li>
</ul>
</li>
<li>Don't set <code spellcheck="false">#widget</code>, as that attribute is
@@ -25,5 +26,5 @@
<li>Give the newly created launcher a name (and optionally a name).</li>
<li>In the&nbsp;<a class="reference-link" href="#root/_help_OFXdgB2nNk1F">Promoted Attributes</a>&nbsp;section,
modify the <em>widget</em> field to point to the newly created note.</li>
<li>Refresh the UI.</li>
<li><a href="#root/_help_s8alTXmpFR61">Refresh</a> the UI.</li>
</ol>

View File

@@ -1,9 +1,28 @@
<aside class="admonition note">
<p>This page describes how to create custom icon packs. For a general description
of how to use already existing icon packs, see&nbsp;<a class="reference-link"
href="#root/_help_gOKqSJgXLcIj">Icon Packs</a>.</p>
<p>This page explains, stepbystep, how to create a custom icon pack. For
a general description of how to use already existing icon packs, see&nbsp;
<a
class="reference-link" href="#root/_help_gOKqSJgXLcIj">Icon Packs</a>.</p>
</aside>
<h2>Supported formats</h2>
<p>First read the quick flow to get the overall steps. After that there is
a concrete example (Phosphor) with a small Node.js script you can run to
generate the manifest.</p>
<h2>Quick flow (what you need to do)</h2>
<ol>
<li>Verify the icon set is a font (one of: .woff2, .woff, .ttf).</li>
<li>Obtain a list that maps icon names to Unicode code points (often provided
as a JSON like <code spellcheck="false">selection.json</code> or a CSS file).</li>
<li>Create a manifest JSON that maps icon ids to glyphs and search terms.</li>
<li>Create a Trilium note of type Code, set language to JSON, paste the manifest
as the note content.</li>
<li>Upload the font file as an attachment to the same note (MIME type must
be <code spellcheck="false">font/woff2</code>, <code spellcheck="false">font/woff</code>,
or <code spellcheck="false">font/ttf</code> and role <code spellcheck="false">file</code>).</li>
<li>Add the label <code spellcheck="false">#iconPack=&lt;prefix&gt;</code> to
the note (prefix: alphanumeric, hyphen, underscore only).</li>
<li>Refresh the client and verify the icon pack appears in the icon selector.</li>
</ol>
<h2>Verify the icon set</h2>
<p>The first step is to analyze if the icon set being packed can be integrated
into Trilium.</p>
<p>Trilium only supports <strong>font-based icon sets</strong>, with the following
@@ -40,8 +59,6 @@
</tr>
</tbody>
</table>
<h2>Unsupported formats</h2>
<p>Trilium <strong>does not</strong> support the following formats:</p>
<ul>
<li>SVG-based fonts.</li>
@@ -53,48 +70,45 @@
</ul>
<p>In this case, the font must be manually converted to one of the supported
formats (ideally <code spellcheck="false">.woff2</code>).</p>
<h2>Prerequisites</h2>
<p>In order to create a new icon pack from a set of icons, it must meet the
following criteria:</p>
<ol>
<li>It must have a web font of the supported format (see above).</li>
<li>It must have some kind of list, containing the name of each icon and the
corresponding Unicode code point. If this is missing, icon fonts usually
ship with a <code spellcheck="false">.css</code> file that can be used to
extract the icon names from.</li>
</ol>
<h2>Step-by-step process</h2>
<p>As an example throughout this page, we are going to go through the steps
of integrating <a href="https://phosphoricons.com/">Phosphor Icons</a>.</p>
<h3>Creating the manifest</h3>
<p>This is the most difficult part of creating an icon pack, since it requires
processing of the icon list to match Trilium's format.</p>
<p>The icon pack manifest is a JSON file with the following structure:</p><pre><code class="language-application-ld-json">{
"icons": {
"bx-ball": {
"glyph": "\ue9c2",
"terms": [ "ball" ]
},
"bxs-party": {
"glyph": "\uec92",
"terms": [ "party" ]
}
}
}</code></pre>
<h2>Manifest format</h2>
<p>The manifest is a JSON object with an <code spellcheck="false">icons</code> map.
Each entry key is the CSS/class id you will use (Trilium uses the CSS class
when rendering). Value object:</p>
<ul>
<li>The JSON example is a sample from the Boxicons font.</li>
<li>This is simply a mapping between the CSS classes (<code spellcheck="false">bx-ball</code>),
to its corresponding code point in the font (<code spellcheck="false">\ue9c2</code>)
and the terms/aliases used for search purposes.</li>
<li>Note that it's also possible to use the unescaped glyph inside the JSON.
It will appear strange (e.g. ), but it will be rendered properly regardless.</li>
<li>The first term is also considered the “name” of the icon, which is displayed
while hovering over it in the icon selector.</li>
<li>glyph: the single character (the glyph) — can be the escaped Unicode (e.g.
"\ue9c2") or the literal character.</li>
<li>terms: array of search aliases; the first term is used as display name
in the selector.</li>
</ul>
<p>In order to generate this manifest, generally a script is needed that
processes an already existing list. In the case of Phosphor Icons, the
icon list comes in a file called <code spellcheck="false">selection.json</code> with
the following format:</p><pre><code class="language-application-ld-json">{
<p>Example minimal manifest:</p><pre><code class="language-text-x-trilium-auto">{
"icons": {
"ph-acorn": {
"glyph": "\uea3f",
"terms": ["acorn", "nut"]
},
"ph-book": {
"glyph": "\uea40",
"terms": ["book", "read"]
}
}
}</code></pre>
<aside class="admonition note">
<ul>
<li>You can supply glyph as the escaped <code spellcheck="false">\uXXXX</code> sequence
or as the actual UTF8 character.</li>
<li>It is also possible to use the unescaped glyph inside the JSON. It will
appear strange (e.g. ), but it will be rendered properly regardless.</li>
<li>The manifest keys (e.g. <code spellcheck="false">ph-acorn</code>) should
match the class names used by the font (prefix + name is a common pattern).</li>
</ul>
</aside>
<h2>Concrete example: Phosphor Icons</h2>
<p><a href="https://phosphoricons.com/">Phosphor Icons</a> provide a
<code
spellcheck="false">selection.json</code>that includes <code spellcheck="false">properties.code</code> (the
codepoint) and <code spellcheck="false">properties.name</code> (the icon
name). The goal: convert that into Trilium's manifest.</p>
<p>Sample <code spellcheck="false">selection.json</code> excerpt:</p><pre><code class="language-text-x-trilium-auto">{
"icons": [
{
"icon": {
@@ -121,9 +135,9 @@
/* [...] */
]
}</code></pre>
<p>As such, we can write a Node.js script to automatically process the manifest
file:</p><pre><code class="language-application-javascript-env-backend">import { join } from "node:path";
import { readFileSync } from "node:fs";
<p>A tiny Node.js script to produce the manifest (place <code spellcheck="false">selection.json</code> in
the same directory and run with Node 20+):</p><pre><code class="language-application-javascript-env-backend">import { join } from "node:path";
import { readFileSync, writeFileSync } from "node:fs";
function processIconPack(packName) {
const path = join(packName);
@@ -143,12 +157,19 @@ function processIconPack(packName) {
};
}
return JSON.stringify({
icons
}, null, 2);
writeFileSync("manifest.json", JSON.stringify(icons, null, 2), "utf8");
console.log("manifest.json created");
}
console.log(processIconPack("light"));</code></pre>
processIconPack("light");</code></pre>
<p>What to do with the script:</p>
<ul>
<li>Put <code spellcheck="false">selection.json</code> and <code spellcheck="false">build-manifest.js</code> in
a folder.</li>
<li>Run: node build-manifest.js</li>
<li>The script writes <code spellcheck="false">manifest.json</code> — open it,
verify contents, then copy into a Trilium Code note (language: JSON).</li>
</ul>
<aside class="admonition tip">
<p><strong>Mind the escape format when processing CSS</strong>
</p>
@@ -158,32 +179,6 @@ console.log(processIconPack("light"));</code></pre>
<p>As a more compact alternative, provide the un-escaped character directly,
as UTF-8 is supported.</p>
</aside>
<h3>Creating the icon pack</h3>
<ol>
<li>Create a note of type <em>Code</em>.</li>
<li>Set the language to <em>JSON</em>.</li>
<li>Copy and paste the manifest generated in the previous step as the content
of this note.</li>
<li>Go to the <a href="#root/_help_0vhv7lsOLy82">note attachment</a> and upload the
font file (in <code spellcheck="false">.woff2</code>, <code spellcheck="false">.woff</code>,
<code
spellcheck="false">.ttf</code>) format.
<ol>
<li>Trilium identifies the font to use from attachments via the MIME type,
make sure the MIME type is displayed correctly after uploading the attachment
(for example <code spellcheck="false">font/woff2</code>).</li>
<li>Make sure the <code spellcheck="false">role</code> appears as <code spellcheck="false">file</code>,
otherwise the font will not be identified.</li>
<li>Multiple attachments are supported, but only one font will actually be
used in Trilium's order of preference: <code spellcheck="false">.woff2</code>,
<code
spellcheck="false">.woff</code>, <code spellcheck="false">.ttf</code>. As such, there's not
much reason to upload more than one font per icon pack.</li>
</ol>
</li>
<li>Go back to the note and rename it. The name of the note will also be the
name of the icon pack as displayed in the list of icons.</li>
</ol>
<h3>Assigning the prefix</h3>
<p>Before an icon pack can be used, it needs to have a prefix defined. This
prefix uniquely identifies the icon pack so that it can be used throughout
@@ -203,6 +198,34 @@ console.log(processIconPack("light"));</code></pre>
If the prefix doesn't match these constraints, the icon pack will be ignored
and an error will be logged in&nbsp;<a class="reference-link" href="#root/_help_bnyigUA2UK7s">Backend (server) logs</a>.</p>
</aside>
<h2>Creating the Trilium icon pack note</h2>
<ol>
<li>Create a note of type <em>Code</em>.</li>
<li>Set the language to <em>JSON</em>.</li>
<li>Rename the note. The name of the note will also be the name of the icon
pack as displayed in the list of icons.</li>
<li>Copy and paste the manifest generated in the previous step as the content
of this note.</li>
<li>Go to the <a href="#root/_help_0vhv7lsOLy82">note attachment</a> and upload the
font file (in <code spellcheck="false">.woff2</code>, <code spellcheck="false">.woff</code>,
<code
spellcheck="false">.ttf</code>) format.
<ol>
<li>Trilium identifies the font to use from attachments via the MIME type,
make sure the MIME type is displayed correctly after uploading the attachment
(for example <code spellcheck="false">font/woff2</code>).</li>
<li>Make sure the <code spellcheck="false">role</code> appears as <code spellcheck="false">file</code>,
otherwise the font will not be identified.</li>
<li>Multiple attachments are supported, but only one font will actually be
used in Trilium's order of preference: <code spellcheck="false">.woff2</code>,
<code
spellcheck="false">.woff</code>, <code spellcheck="false">.ttf</code>. As such, there's not
much reason to upload more than one font per icon pack.</li>
</ol>
</li>
<li>Add label: <code spellcheck="false">#iconPack=&lt;prefix&gt;</code> (for
Phosphor example: <code spellcheck="false">#iconPack=ph</code>).</li>
</ol>
<h3>Final steps</h3>
<ul>
<li><a href="#root/_help_s8alTXmpFR61">Refresh the client</a>

View File

@@ -425,7 +425,7 @@
"error_title": "Fehler"
},
"share_theme": {
"site-theme": "Webseite Stil",
"site-theme": "Webseiten Stil",
"search_placeholder": "Suche...",
"image_alt": "Artikel Bild",
"last-updated": "Zuletzt aktualisiert am {{- date}}",

View File

@@ -34,6 +34,19 @@
"duplicate-subtree": "Αντιγραφή υποδέντρου",
"tabs-and-windows": "Καρτέλες & Παράθυρα",
"open-new-tab": "Άνοιγμα νέας καρτέλας",
"close-active-tab": "Κλείσιμο ενεργής καρτέλας"
"close-active-tab": "Κλείσιμο ενεργής καρτέλας",
"reopen-last-tab": "Επαναφορά τελευταίας κλειστής καρτέλας",
"activate-next-tab": "Ενεργοποίηση καρτέλας στα δεξιά",
"activate-previous-tab": "Ενεργοποίηση καρτέλας στα αριστερά",
"open-new-window": "Άνοιγμα νέου κενού παραθύρου",
"toggle-tray": "Εμφάνιση/Απόκρυψη εφαρμογής από το system tray",
"first-tab": "Ενεργοποίηση πρώτης καρτέλας στη λίστα",
"second-tab": "Ενεργοποίηση της δεύτερης καρτέλας στη λίστα",
"third-tab": "Ενεργοποίηση της τρίτης καρτέλας στη λίστα",
"fourth-tab": "Ενεργοποίηση της τέταρτης καρτέλας στη λίστα",
"fifth-tab": "Ενεργοποίηση της πέμπτης καρτέλας στη λίστα",
"sixth-tab": "Ενεργοποίηση της έκτης καρτέλας στη λίστα",
"seventh-tab": "Ενεργοποίηση της έβδομης καρτέλας στη λίστα",
"eight-tab": "Ενεργοποίηση της όγδοης καρτέλας στη λίστα"
}
}

View File

@@ -1,6 +1,6 @@
{
"keyboard_actions": {
"back-in-note-history": "기록 내 이전 노트로 이동하기",
"back-in-note-history": "히스토리의 이전 노트로 이동하기",
"open-command-palette": "명령어 팔레트 열기",
"delete-note": "노트 삭제",
"quick-search": "빠른 검색바 활성화",
@@ -60,7 +60,48 @@
"show-help": "내장 사용자 설명서 열기",
"show-cheatsheet": "일반적인 키보드 형식의 팝업 표시",
"text-note-operations": "텍스트 노트 작업",
"add-link-to-text": "텍스트에 링크 추가를 위한 대화 상자 열기"
"add-link-to-text": "텍스트에 링크 추가를 위한 대화 상자 열기",
"follow-link-under-cursor": "커서가 있는 링크 대상으로 이동",
"insert-date-and-time-to-text": "현재 날짜와 시간을 텍스트로 삽입",
"attributes-labels-and-relations": "속성 (라벨 & 관계)",
"add-new-label": "새 라벨 작성",
"create-new-relation": "새 관계 생성",
"ribbon-tabs": "리본 탭",
"toggle-basic-properties": "기본 속성 토글",
"toggle-file-properties": "파일 속성 토글",
"toggle-image-properties": "이미지 속성 토글",
"toggle-owned-attributes": "소유 속성 토글",
"toggle-inherited-attributes": "상속 속성 토글",
"toggle-promoted-attributes": "주요 속성 토글",
"render-active-note": "활성 노트를 렌더링(다시 렌더링)",
"run-active-note": "활성 JavaScript(프런트엔드/백엔드) 코드 노트 실행",
"toggle-note-hoisting": "활성 노트를 최상단으로 올리기 토글",
"unhoist": "최상단으로 올린 노트 해제",
"reload-frontend-app": "프론트엔드 리로드",
"open-dev-tools": "개발자 도구 열기",
"find-in-text": "검색 패널 토글",
"toggle-left-note-tree-panel": "좌측(노트 트리) 패널 토글",
"toggle-full-screen": "전체 화면 토글",
"paste-markdown-into-text": "클립보드에서 마크다운 파일을 텍스트 노트에 붙여넣습니다",
"cut-into-note": "현재 노트에서 선택 영역을 잘라내어 하위 노트를 생성합니다",
"add-include-note-to-text": "노트 추가 대화 상자를 열기",
"edit-readonly-note": "읽기 전용 메모를 편집",
"toggle-link-map": "링크 맵 토글",
"toggle-note-info": "노트 정보 토글",
"toggle-note-paths": "노트 경로 토글",
"toggle-similar-notes": "유사 노트 토글",
"other": "기타",
"toggle-right-pane": "오른쪽 창(목차와 하이라이트) 표시 여부 전환",
"print-active-note": "활성 노트 인쇄",
"open-note-externally": "노트를 파일 형식으로 열기(기본 애플리케이션 사용)",
"zoom-out": "축소",
"zoom-in": "확대",
"note-navigation": "노트 내비게이션",
"reset-zoom-level": "확대/축소 초기화",
"copy-without-formatting": "선택한 텍스트를 서식 없이 복사",
"force-save-revision": "활성 노트의 새 버전을 강제로 생성/저장",
"toggle-book-properties": "컬렉션 속성 토글",
"toggle-classic-editor-toolbar": "고정 도구 모음 에디터의 서식 탭을 전환"
},
"hidden-subtree": {
"zen-mode": "젠 모드",

View File

@@ -1718,7 +1718,10 @@ class BNote extends AbstractBeccaEntity<BNote> {
}
getVisibleChildBranches() {
return this.getChildBranches().filter((branch) => !branch.getNote().isLabelTruthy("shareHiddenFromTree"));
return this.getChildBranches().filter((branch) => {
const note = branch.getNote();
return !note.isLabelTruthy("shareHiddenFromTree") && !note.noteId.startsWith("_");
});
}
getVisibleChildNotes() {

View File

@@ -1,16 +1,19 @@
import dateNoteService from "../../services/date_notes.js";
import sql from "../../services/sql.js";
import cls from "../../services/cls.js";
import specialNotesService, { type LauncherType } from "../../services/special_notes.js";
import becca from "../../becca/becca.js";
import type { Request } from "express";
import becca from "../../becca/becca.js";
import cls from "../../services/cls.js";
import dateNoteService from "../../services/date_notes.js";
import specialNotesService, { type LauncherType } from "../../services/special_notes.js";
import sql from "../../services/sql.js";
function getInboxNote(req: Request) {
return specialNotesService.getInboxNote(req.params.date);
}
function getDayNote(req: Request) {
return dateNoteService.getDayNote(req.params.date);
const calendarRootId = req.query.calendarRootId;
const calendarRoot = typeof calendarRootId === "string" ? becca.getNoteOrThrow(calendarRootId) : null;
return dateNoteService.getDayNote(req.params.date, calendarRoot);
}
function getWeekFirstDayNote(req: Request) {
@@ -59,9 +62,8 @@ function getDayNotesForMonth(req: Request) {
}
return result;
} else {
return sql.getMap(query);
}
return sql.getMap(query);
}
async function saveSqlConsole(req: Request) {

View File

@@ -38,8 +38,8 @@ async function register(app: express.Application) {
base: `/${assetUrlFragment}/`
});
app.use(`/${assetUrlFragment}/`, (req, res, next) => {
if (req.url.startsWith("/images/")) {
// Images are served as static assets from the server.
if (req.url.startsWith("/images/") || req.url.startsWith("/doc_notes/")) {
// Images and doc notes are served as static assets from the server.
next();
return;
}

View File

@@ -1,11 +1,11 @@
import BUILTIN_ATTRIBUTES from "./builtin_attributes.js";
import { AnonymizedDbResponse, BUILTIN_ATTRIBUTES, DatabaseAnonymizeResponse } from "@triliumnext/commons";
import Database from "better-sqlite3";
import fs from "fs";
import path from "path";
import dataDir from "./data_dir.js";
import dateUtils from "./date_utils.js";
import Database from "better-sqlite3";
import sql from "./sql.js";
import path from "path";
import { AnonymizedDbResponse, DatabaseAnonymizeResponse } from "@triliumnext/commons";
function getFullAnonymizationScript() {
// we want to delete all non-builtin attributes because they can contain sensitive names and values
@@ -86,7 +86,7 @@ function getExistingAnonymizedDatabases() {
.readdirSync(dataDir.ANONYMIZED_DB_DIR)
.filter((fileName) => fileName.includes("anonymized"))
.map((fileName) => ({
fileName: fileName,
fileName,
filePath: path.resolve(dataDir.ANONYMIZED_DB_DIR, fileName)
})) satisfies AnonymizedDbResponse[];
}

View File

@@ -1,13 +1,11 @@
"use strict";
import { type AttributeRow, BUILTIN_ATTRIBUTES } from "@triliumnext/commons";
import searchService from "./search/services/search.js";
import sql from "./sql.js";
import becca from "../becca/becca.js";
import BAttribute from "../becca/entities/battribute.js";
import attributeFormatter from "./attribute_formatter.js";
import BUILTIN_ATTRIBUTES from "./builtin_attributes.js";
import type BNote from "../becca/entities/bnote.js";
import type { AttributeRow } from "@triliumnext/commons";
import attributeFormatter from "./attribute_formatter.js";
import searchService from "./search/services/search.js";
import sql from "./sql.js";
const ATTRIBUTE_TYPES = new Set(["label", "relation"]);
@@ -41,18 +39,18 @@ function getNoteWithLabel(name: string, value?: string): BNote | null {
function createLabel(noteId: string, name: string, value: string = "") {
return createAttribute({
noteId: noteId,
noteId,
type: "label",
name: name,
value: value
name,
value
});
}
function createRelation(noteId: string, name: string, targetNoteId: string) {
return createAttribute({
noteId: noteId,
noteId,
type: "relation",
name: name,
name,
value: targetNoteId
});
}

View File

@@ -1,113 +0,0 @@
export default [
// label names
{ type: "label", name: "inbox" },
{ type: "label", name: "disableVersioning" },
{ type: "label", name: "calendarRoot" },
{ type: "label", name: "archived" },
{ type: "label", name: "excludeFromExport" },
{ type: "label", name: "disableInclusion" },
{ type: "label", name: "appCss" },
{ type: "label", name: "appTheme" },
{ type: "label", name: "appThemeBase" },
{ type: "label", name: "hidePromotedAttributes" },
{ type: "label", name: "readOnly" },
{ type: "label", name: "autoReadOnlyDisabled" },
{ type: "label", name: "cssClass" },
{ type: "label", name: "iconClass" },
{ type: "label", name: "keyboardShortcut" },
{ type: "label", name: "run", isDangerous: true },
{ type: "label", name: "runOnInstance", isDangerous: false },
{ type: "label", name: "runAtHour", isDangerous: false },
{ type: "label", name: "customRequestHandler", isDangerous: true },
{ type: "label", name: "customResourceProvider", isDangerous: true },
{ type: "label", name: "widget", isDangerous: true },
{ type: "label", name: "noteInfoWidgetDisabled" },
{ type: "label", name: "linkMapWidgetDisabled" },
{ type: "label", name: "revisionsWidgetDisabled" },
{ type: "label", name: "whatLinksHereWidgetDisabled" },
{ type: "label", name: "similarNotesWidgetDisabled" },
{ type: "label", name: "workspace" },
{ type: "label", name: "workspaceIconClass" },
{ type: "label", name: "workspaceTabBackgroundColor" },
{ type: "label", name: "workspaceCalendarRoot" },
{ type: "label", name: "workspaceTemplate" },
{ type: "label", name: "searchHome" },
{ type: "label", name: "workspaceInbox" },
{ type: "label", name: "workspaceSearchHome" },
{ type: "label", name: "sqlConsoleHome" },
{ type: "label", name: "datePattern" },
{ type: "label", name: "weekPattern" },
{ type: "label", name: "enableWeekNote" },
{ type: "label", name: "monthPattern" },
{ type: "label", name: "quarterPattern" },
{ type: "label", name: "yearPattern" },
{ type: "label", name: "enableQuarterNote" },
{ type: "label", name: "pageSize" },
{ type: "label", name: "viewType" },
{ type: "label", name: "mapRootNoteId" },
{ type: "label", name: "mapExcludeRelation" },
{ type: "label", name: "mapIncludeRelation" },
{ type: "label", name: "bookmarkFolder" },
{ type: "label", name: "sorted" },
{ type: "label", name: "sortDirection" },
{ type: "label", name: "sortFoldersFirst" },
{ type: "label", name: "sortNatural" },
{ type: "label", name: "sortLocale" },
{ type: "label", name: "top" },
{ type: "label", name: "bottom" },
{ type: "label", name: "fullContentWidth" },
{ type: "label", name: "shareHiddenFromTree" },
{ type: "label", name: "shareExternalLink" },
{ type: "label", name: "shareAlias" },
{ type: "label", name: "shareOmitDefaultCss" },
{ type: "label", name: "shareRoot" },
{ type: "label", name: "shareDescription" },
{ type: "label", name: "shareRaw" },
{ type: "label", name: "shareDisallowRobotIndexing" },
{ type: "label", name: "shareCredentials" },
{ type: "label", name: "shareIndex" },
{ type: "label", name: "shareHtmlLocation" },
{ type: "label", name: "displayRelations" },
{ type: "label", name: "hideRelations" },
{ type: "label", name: "titleTemplate", isDangerous: true },
{ type: "label", name: "template" },
{ type: "label", name: "toc" },
{ type: "label", name: "color" },
{ type: "label", name: "keepCurrentHoisting" },
{ type: "label", name: "executeButton" },
{ type: "label", name: "executeDescription" },
{ type: "label", name: "newNotesOnTop" },
{ type: "label", name: "clipperInbox" },
{ type: "label", name: "webViewSrc", isDangerous: true },
{ type: "label", name: "hideHighlightWidget" },
{ type: "label", name: "iconPack", isDangerous: true },
{ type: "label", name: "printLandscape" },
{ type: "label", name: "printPageSize" },
// relation names
{ type: "relation", name: "internalLink" },
{ type: "relation", name: "imageLink" },
{ type: "relation", name: "relationMapLink" },
{ type: "relation", name: "includeMapLink" },
{ type: "relation", name: "runOnNoteCreation", isDangerous: true },
{ type: "relation", name: "runOnNoteTitleChange", isDangerous: true },
{ type: "relation", name: "runOnNoteChange", isDangerous: true },
{ type: "relation", name: "runOnNoteContentChange", isDangerous: true },
{ type: "relation", name: "runOnNoteDeletion", isDangerous: true },
{ type: "relation", name: "runOnBranchCreation", isDangerous: true },
{ type: "relation", name: "runOnBranchChange", isDangerous: true },
{ type: "relation", name: "runOnBranchDeletion", isDangerous: true },
{ type: "relation", name: "runOnChildNoteCreation", isDangerous: true },
{ type: "relation", name: "runOnAttributeCreation", isDangerous: true },
{ type: "relation", name: "runOnAttributeChange", isDangerous: true },
{ type: "relation", name: "template" },
{ type: "relation", name: "inherit" },
{ type: "relation", name: "widget", isDangerous: true },
{ type: "relation", name: "renderNote", isDangerous: true },
{ type: "relation", name: "shareCss" },
{ type: "relation", name: "shareJs" },
{ type: "relation", name: "shareHtml" },
{ type: "relation", name: "shareTemplate" },
{ type: "relation", name: "shareFavicon" }
];

View File

@@ -3,7 +3,7 @@
import dateUtils from "../date_utils.js";
import path from "path";
import packageInfo from "../../../package.json" with { type: "json" };
import { getContentDisposition } from "../utils.js";
import { getContentDisposition, waitForStreamToFinish } from "../utils.js";
import protectedSessionService from "../protected_session.js";
import sanitize from "sanitize-filename";
import fs from "fs";
@@ -468,6 +468,7 @@ async function exportToZip(taskContext: TaskContext<"export">, branch: BBranch,
taskContext.taskSucceeded(null);
}
async function exportToZipFile(noteId: string, format: ExportFormat, zipFilePath: string, zipExportOptions?: AdvancedExportOptions) {
const fileOutputStream = fs.createWriteStream(zipFilePath);
const taskContext = new TaskContext("no-progress-reporting", "export", null);
@@ -479,6 +480,7 @@ async function exportToZipFile(noteId: string, format: ExportFormat, zipFilePath
}
await exportToZip(taskContext, note.getParentBranches()[0], format, fileOutputStream, false, zipExportOptions);
await waitForStreamToFinish(fileOutputStream);
log.info(`Exported '${noteId}' with format '${format}' to '${zipFilePath}'`);
}

View File

@@ -158,5 +158,14 @@ describe("Hidden Subtree", () => {
cls.init(() => hiddenSubtreeService.checkHiddenSubtree());
expect(hiddenSubtree.hasLabel("excludeFromNoteMap")).toBeFalsy();
});
it("cleans up attribute change in templates", () => {
const template = becca.getNoteOrThrow("_template_table");
cls.init(() => {
template.setLabel("subtreeHidden", "foo");
hiddenSubtreeService.checkHiddenSubtree();
});
expect(template.getLabelValue("subtreeHidden")).toBe("false");
});
});
});

View File

@@ -1,15 +1,15 @@
import BAttribute from "../becca/entities/battribute.js";
import BBranch from "../becca/entities/bbranch.js";
import type { HiddenSubtreeItem } from "@triliumnext/commons";
import { t } from "i18next";
import becca from "../becca/becca.js";
import noteService from "./notes.js";
import log from "./log.js";
import migrationService from "./migration.js";
import { t } from "i18next";
import { cleanUpHelp, getHelpHiddenSubtreeData } from "./in_app_help.js";
import BAttribute from "../becca/entities/battribute.js";
import BBranch from "../becca/entities/bbranch.js";
import buildLaunchBarConfig from "./hidden_subtree_launcherbar.js";
import buildHiddenSubtreeTemplates from "./hidden_subtree_templates.js";
import { cleanUpHelp, getHelpHiddenSubtreeData } from "./in_app_help.js";
import log from "./log.js";
import migrationService from "./migration.js";
import noteService from "./notes.js";
export const LBTPL_ROOT = "_lbTplRoot";
export const LBTPL_BASE = "_lbTplBase";
@@ -350,7 +350,7 @@ function checkHiddenSubtreeRecursively(parentNoteId: string, item: HiddenSubtree
noteId: item.id,
title: item.title,
type: item.type,
parentNoteId: parentNoteId,
parentNoteId,
content: item.content ?? "",
ignoreForbiddenParents: true
}));
@@ -372,7 +372,7 @@ function checkHiddenSubtreeRecursively(parentNoteId: string, item: HiddenSubtree
log.info(`Creating missing branch for note ${item.id} under parent ${parentNoteId}.`);
branch = new BBranch({
noteId: item.id,
parentNoteId: parentNoteId,
parentNoteId,
notePosition: item.notePosition !== undefined ? item.notePosition : undefined,
isExpanded: item.isExpanded !== undefined ? item.isExpanded : false
}).save();
@@ -454,6 +454,7 @@ function checkHiddenSubtreeRecursively(parentNoteId: string, item: HiddenSubtree
// Remove unwanted attributes.
const attrDef = attrs.find(a => a.name === attribute.name);
if (!attrDef) {
console.log(`Removing unwanted attribute ${attribute.name} where expected attrs are ${attrs.map(a => a.name).join(", ")}`);
attribute.markAsDeleted();
continue;
}
@@ -466,7 +467,7 @@ function checkHiddenSubtreeRecursively(parentNoteId: string, item: HiddenSubtree
}
for (const attr of attrs) {
const attrId = note.noteId + "_" + attr.type.charAt(0) + attr.name;
const attrId = `${note.noteId }_${ attr.type.charAt(0) }${attr.name}`;
const existingAttribute = note.getAttributes().find((attr) => attr.attributeId === attrId);

View File

@@ -4,7 +4,8 @@ import { t } from "i18next";
export default function buildHiddenSubtreeTemplates() {
const hideSubtreeAttributes: HiddenSubtreeAttribute = {
name: "subtreeHidden",
type: "label"
type: "label",
value: "false"
};
const templates: HiddenSubtreeItem = {
@@ -317,5 +318,11 @@ export default function buildHiddenSubtreeTemplates() {
]
};
// Enforce attributes.
templates.enforceAttributes = true;
for (const template of templates.children ?? []) {
template.enforceAttributes = true;
}
return templates;
}

View File

@@ -18,7 +18,8 @@ export async function initializeTranslations() {
ns: "server",
backend: {
loadPath: join(resourceDir, "assets/translations/{{lng}}/{{ns}}.json")
}
},
showSupportNotice: false
});
// Initialize dayjs locale.

View File

@@ -1,5 +1,4 @@
import chardet from "chardet";
import crypto from "crypto";
import escape from "escape-html";
@@ -516,6 +515,13 @@ function slugify(text: string) {
.replace(/(^-|-$)+/g, ""); // trim dashes
}
export function waitForStreamToFinish(stream: any): Promise<void> {
return new Promise((resolve, reject) => {
stream.on("finish", () => resolve());
stream.on("error", (err) => reject(err));
});
}
export default {
compareVersions,
constantTimeCompare,
@@ -556,5 +562,6 @@ export default {
toBase64,
toMap,
toObject,
unescapeHtml
unescapeHtml,
waitForStreamToFinish
};

View File

@@ -50,7 +50,8 @@ async function createExtraWindow(extraWindowHash: string) {
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
spellcheck: spellcheckEnabled
spellcheck: spellcheckEnabled,
webviewTag: true
},
...getWindowExtraOpts(),
icon: getIcon()