From 4ae38ac5d6365835e4dd4b5513cb913ae1af42d5 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Wed, 5 Nov 2025 18:32:34 +0200 Subject: [PATCH] docs(user): widget basics missing template (closes #6148) --- .../en/User Guide/User Guide/AI.html | 51 +++--- .../Advanced Usage/Read-only database.html | 29 ++-- .../Installation & Setup/Data directory.html | 157 +++++++++--------- .../Custom Widgets/Widget Basics.html | 23 +-- .../Developer Guide/Documentation.md | 2 +- docs/User Guide/!!!meta.json | 98 +++++------ .../Custom Widgets/Widget Basics.md | 8 +- 7 files changed, 181 insertions(+), 187 deletions(-) diff --git a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/AI.html b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/AI.html index 11ad7e821..6d9c62f15 100644 --- a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/AI.html +++ b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/AI.html @@ -19,7 +19,8 @@ class="image image_resized" style="width:74.04%;"> -

Embeddings

+ +

Embeddings

Embeddings are important as it allows us to have an compact AI “summary” (it's not human readable text) of each of your Notes, that we can then perform mathematical functions on (such as cosine similarity) @@ -79,59 +80,59 @@ class="image image_resized" style="width:74.04%;">

These are the tools that currently exist, and will certainly be updated to be more effectively (and even more to be added!):

@@ -146,12 +147,12 @@ class="image image_resized" style="width:74.04%;">

Overview

To start, simply press the Chat with Notes button in the  Launch Bar.

+ class="reference-link" href="#root/_help_xYmIYSP6wE3F">Launch Bar.

-

If you don't see the button in the Launch Bar, +

If you don't see the button in the Launch Bar, you might need to move it from the Available Launchers section to the Visible Launchers section:

This functionality is still in preview, expect possible issues or even the feature disappearing completely. -
Feel free to report any - issues you might have.

+
Feel free to report any issues you might + have.

The read-only database is an alternative to Sharing notes. - Although the share functionality works pretty well to publish pages to - the Internet in a wiki, blog-like format it does not offer the full functionality - behind Trilium (such as the advanced Search or - the interactivity behind Collections or - the various Note Types).

+ href="#root/_help_R9pX4DGra2Vt">Sharing notes. Although the share functionality + works pretty well to publish pages to the Internet in a wiki, blog-like + format it does not offer the full functionality behind Trilium (such as + the advanced Search or + the interactivity behind Collections or + the various Note Types).

When the database is in read-only mode, the Trilium application can be used as normal, but editing is disabled and changes are made in-memory only.

What it does

Limitations

Setting a database as read-only

First, make sure the database is initialized (e.g. the first set up is - complete). Then modify the config.ini by + complete). Then modify the config.ini by looking for the [General] section and adding a new readOnly field:

[General]
 readOnly=true

If your server is already running, restart it to apply the changes.

diff --git a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Installation & Setup/Data directory.html b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Installation & Setup/Data directory.html index ad81d00c1..9f2de8853 100644 --- a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Installation & Setup/Data directory.html +++ b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Installation & Setup/Data directory.html @@ -1,12 +1,12 @@

Data directory contains:

Location of the data directory

Easy way how to find out which data directory Trilium uses is to look @@ -18,14 +18,11 @@

Data directory is normally named trilium-data and it is stored in:

If you want to back up your Trilium data, just backup this single directory - it contains everything you need.

@@ -35,17 +32,15 @@ variable to some other location:

Windows

    -
  1. Press the Windows key on your keyboard.
    2. -
  2. Search and select “Edit the system variables”.
    3. -
  3. Press the “Environment Variables…” button in the bottom-right of the newly +
  4. Press the Windows key on your keyboard.
    5. +
  5. Search and select “Edit the system variables”.
    6. +
  6. Press the “Environment Variables…” button in the bottom-right of the newly opened screen.
    7. -
  7. On the top section ("User variables for [user]"), press the “New…” button.
    8. -
  8. In the Variable name field insert TRILIUM_DATA_DIR.
    9. -
  9. Press the Browse Directory… button and select the new directory - where to store the database.
    10. -
  10. Close all the windows by pressing the OK button for each of them.
    11. +
  11. On the top section ("User variables for [user]"), press the “New…” button.
    12. +
  12. In the Variable name field insert TRILIUM_DATA_DIR.
    13. +
  13. Press the Browse Directory… button and select the new directory + where to store the database.
    14. +
  14. Close all the windows by pressing the OK button for each of them.

Linux

export TRILIUM_DATA_DIR=/home/myuser/data/my-trilium-data

Mac OS X

@@ -74,63 +69,61 @@

Fine-grained directory/path location

Apart from the data directory, some of the subdirectories of it can be moved elsewhere by changing an environment variable:

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Environment variableDefault valueDescription
TRILIUM_DOCUMENT_PATH - ${TRILIUM_DATA_DIR}/document.db - Path to the Database (storing - all notes and metadata).
TRILIUM_BACKUP_DIR - ${TRILIUM_DATA_DIR}/backup - Directory where automated Backup databases - are stored.
TRILIUM_LOG_DIR - ${TRILIUM_DATA_DIR}/log - Directory where daily Backend (server) logs are - stored.
TRILIUM_TMP_DIR - ${TRILIUM_DATA_DIR}/tmp - Directory where temporary files are stored (for example when opening in - an external app).
TRILIUM_ANONYMIZED_DB_DIR - ${TRILIUM_DATA_DIR}/anonymized-db - Directory where a Anonymized Database is - stored.
TRILIUM_CONFIG_INI_PATH - ${TRILIUM_DATA_DIR}/config.ini - Path to Configuration (config.ini or environment variables) file.
-
\ No newline at end of file + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Environment variableDefault valueDescription
TRILIUM_DOCUMENT_PATH + ${TRILIUM_DATA_DIR}/document.db + Path to the Database (storing + all notes and metadata).
TRILIUM_BACKUP_DIR + ${TRILIUM_DATA_DIR}/backup + Directory where automated Backup databases + are stored.
TRILIUM_LOG_DIR + ${TRILIUM_DATA_DIR}/log + Directory where daily Backend (server) logs are + stored.
TRILIUM_TMP_DIR + ${TRILIUM_DATA_DIR}/tmp + Directory where temporary files are stored (for example when opening in + an external app).
TRILIUM_ANONYMIZED_DB_DIR + ${TRILIUM_DATA_DIR}/anonymized-db + Directory where a Anonymized Database is + stored.
TRILIUM_CONFIG_INI_PATH + ${TRILIUM_DATA_DIR}/config.ini + Path to Configuration (config.ini or environment variables) file.
\ No newline at end of file diff --git a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Custom Widgets/Widget Basics.html b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Custom Widgets/Widget Basics.html index 84a15c29e..6048e6f11 100644 --- a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Custom Widgets/Widget Basics.html +++ b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Custom Widgets/Widget Basics.html @@ -8,7 +8,7 @@ get parentWidget() { return "left-pane"; } doRender() { - this.$widget = $(""); + this.$widget = $("<div id='my-widget'>"); return this.$widget; } } @@ -16,19 +16,19 @@ module.exports = new MyWidget();

To implement this widget:

    -
  1. Create a new JS Frontend note in Trilium and paste in the code +
  2. Create a new JS Frontend note in Trilium and paste in the code above.
    3. -
  3. Assign the #widget attribute to +
  4. Assign the #widget attribute to the note.
    5. -
  5. Restart Trilium or reload the window.
    6. +
  6. Restart Trilium or reload the window.
-

To verify that the widget is working, open the developer tools (Cmd + Shift + I) +

To verify that the widget is working, open the developer tools (Ctrl + Shift + I) and run document.querySelector("#my-widget"). If the element is found, the widget is functioning correctly. If undefined is returned, double-check that the note has the #widget attribute.

Step 2: Adding an UI Element

-

Next, let's improve the widget by adding a button to it.

const template = ``;
+
Next, let's improve the widget by adding a button to it.
const template = `<div id="my-widget"><button>Click Me!</button></div>`;
 
 class MyWidget extends api.BasicWidget {
     get position() {return 1;}
@@ -47,7 +47,7 @@ module.exports = new MyWidget();

 
To make the button more visually appealing and position it correctly,
   we'll apply some custom styling. Trilium includes Box Icons,
   which we'll use to replace the button text with an icon. For example the bx bxs-magic-wand icon.

-
Here's the updated template:
const template = ``;

+
Here's the updated template:
const template = `<div id="my-widget"><button class="tree-floating-button bx bxs-magic-wand tree-settings-button"></button></div>`;

 
Next, we'll adjust the button's position using CSS:
class MyWidget extends api.BasicWidget {
     get position() { return 1; }
     get parentWidget() { return "left-pane"; }
@@ -89,13 +89,14 @@ module.exports = new MyWidget();

 module.exports = new MyWidget();

parentWidget() can be given the following values:

Reload the application one last time. diff --git a/docs/Developer Guide/Developer Guide/Documentation.md b/docs/Developer Guide/Developer Guide/Documentation.md index c11d3164c..5d7b25eac 100644 --- a/docs/Developer Guide/Developer Guide/Documentation.md +++ b/docs/Developer Guide/Developer Guide/Documentation.md @@ -1,5 +1,5 @@ # Documentation -There are multiple types of documentation for Trilium: +There are multiple types of documentation for Trilium: * The _User Guide_ represents the user-facing documentation. This documentation can be browsed by users directly from within Trilium, by pressing F1. * The _Developer's Guide_ represents a set of Markdown documents that present the internals of Trilium, for developers. diff --git a/docs/User Guide/!!!meta.json b/docs/User Guide/!!!meta.json index c046fac03..12f9549ca 100644 --- a/docs/User Guide/!!!meta.json +++ b/docs/User Guide/!!!meta.json @@ -14166,6 +14166,48 @@ "type": "text", "mime": "text/html", "attributes": [ + { + "type": "relation", + "name": "internalLink", + "value": "Gzjqa934BdH4", + "isInheritable": false, + "position": 10 + }, + { + "type": "relation", + "name": "internalLink", + "value": "wy8So3yZZlH9", + "isInheritable": false, + "position": 20 + }, + { + "type": "relation", + "name": "internalLink", + "value": "R9pX4DGra2Vt", + "isInheritable": false, + "position": 30 + }, + { + "type": "relation", + "name": "internalLink", + "value": "eIg8jdvaoNNd", + "isInheritable": false, + "position": 40 + }, + { + "type": "relation", + "name": "internalLink", + "value": "GTwFsgaA0lCt", + "isInheritable": false, + "position": 50 + }, + { + "type": "relation", + "name": "internalLink", + "value": "KSZ04uQ2D1St", + "isInheritable": false, + "position": 60 + }, { "type": "label", "name": "iconClass", @@ -14179,48 +14221,6 @@ "value": "read-only-db", "isInheritable": false, "position": 40 - }, - { - "type": "relation", - "name": "internalLink", - "value": "wy8So3yZZlH9", - "isInheritable": false, - "position": 50 - }, - { - "type": "relation", - "name": "internalLink", - "value": "R9pX4DGra2Vt", - "isInheritable": false, - "position": 60 - }, - { - "type": "relation", - "name": "internalLink", - "value": "Gzjqa934BdH4", - "isInheritable": false, - "position": 70 - }, - { - "type": "relation", - "name": "internalLink", - "value": "eIg8jdvaoNNd", - "isInheritable": false, - "position": 80 - }, - { - "type": "relation", - "name": "internalLink", - "value": "GTwFsgaA0lCt", - "isInheritable": false, - "position": 90 - }, - { - "type": "relation", - "name": "internalLink", - "value": "KSZ04uQ2D1St", - "isInheritable": false, - "position": 100 } ], "format": "markdown", @@ -14250,6 +14250,13 @@ "isInheritable": false, "position": 10 }, + { + "type": "relation", + "name": "internalLink", + "value": "xYmIYSP6wE3F", + "isInheritable": false, + "position": 20 + }, { "type": "label", "name": "shareAlias", @@ -14263,13 +14270,6 @@ "value": "bx bx-bot", "isInheritable": false, "position": 30 - }, - { - "type": "relation", - "name": "internalLink", - "value": "xYmIYSP6wE3F", - "isInheritable": false, - "position": 40 } ], "format": "markdown", diff --git a/docs/User Guide/User Guide/Scripting/Frontend Basics/Custom Widgets/Widget Basics.md b/docs/User Guide/User Guide/Scripting/Frontend Basics/Custom Widgets/Widget Basics.md index 474cba983..39867172f 100644 --- a/docs/User Guide/User Guide/Scripting/Frontend Basics/Custom Widgets/Widget Basics.md +++ b/docs/User Guide/User Guide/Scripting/Frontend Basics/Custom Widgets/Widget Basics.md @@ -11,7 +11,7 @@ class MyWidget extends api.BasicWidget { get parentWidget() { return "left-pane"; } doRender() { - this.$widget = $(""); + this.$widget = $("

"); return this.$widget; } } @@ -25,14 +25,14 @@ To implement this widget: 2. Assign the `#widget` [attribute](../../../Advanced%20Usage/Attributes.md) to the [note](../../../Basic%20Concepts%20and%20Features/Notes.md). 3. Restart Trilium or reload the window. -To verify that the widget is working, open the developer tools (`Cmd` + `Shift` + `I`) and run `document.querySelector("#my-widget")`. If the element is found, the widget is functioning correctly. If `undefined` is returned, double-check that the [note](../../../Basic%20Concepts%20and%20Features/Notes.md) has the `#widget` [attribute](../../../Advanced%20Usage/Attributes.md). +To verify that the widget is working, open the developer tools (Ctrl + Shift + I) and run `document.querySelector("#my-widget")`. If the element is found, the widget is functioning correctly. If `undefined` is returned, double-check that the [note](../../../Basic%20Concepts%20and%20Features/Notes.md) has the `#widget` [attribute](../../../Advanced%20Usage/Attributes.md). ### Step 2: Adding an UI Element Next, let's improve the widget by adding a button to it. ``` -const template = ``; +const template = `
`; class MyWidget extends api.BasicWidget { get position() {return 1;} @@ -56,7 +56,7 @@ To make the button more visually appealing and position it correctly, we'll appl Here's the updated template: ``` -const template = ``; +const template = `
`; ``` Next, we'll adjust the button's position using CSS: