Merge branch 'develop' into tray

src/app.ts

@@ -14,6 +14,8 @@ import custom from "./routes/custom.js";
 import error_handlers from "./routes/error_handlers.js";
 import { startScheduledCleanup } from "./services/erase.js";
 import sql_init from "./services/sql_init.js";
+import { auth } from "express-openid-connect";
+import openID from "./services/open_id.js";
 import { t } from "i18next";
 
 await import("./services/handlers.js");
@@ -59,6 +61,9 @@ app.use(`/icon.png`, express.static(path.join(scriptDir, "public/icon.png")));
 app.use(sessionParser);
 app.use(favicon(`${scriptDir}/../images/app-icons/icon.ico`));
 
+if (openID.isOpenIDEnabled())
+    app.use(auth(openID.generateOAuthConfig()));
+
 await assets.register(app);
 routes.register(app);
 custom.register(app);

src/becca/becca_service.ts

@@ -40,6 +40,33 @@ function getNoteTitle(childNoteId: string, parentNoteId?: string) {
     return `${branch && branch.prefix ? `${branch.prefix} - ` : ""}${title}`;
 }
 
+/**
+ * Similar to {@link getNoteTitle}, but also returns the icon class of the note.
+ *
+ * @returns An object containing the title and icon class of the note.
+ */
+function getNoteTitleAndIcon(childNoteId: string, parentNoteId?: string) {
+    const childNote = becca.notes[childNoteId];
+    const parentNote = parentNoteId ? becca.notes[parentNoteId] : null;
+
+    if (!childNote) {
+        log.info(`Cannot find note '${childNoteId}'`);
+        return {
+            title: "[error fetching title]"
+        }
+    }
+
+    const title = childNote.getTitleOrProtected();
+    const icon = childNote.getIcon();
+
+    const branch = parentNote ? becca.getBranchFromChildAndParent(childNote.noteId, parentNote.noteId) : null;
+
+    return {
+        icon,
+        title: `${branch && branch.prefix ? `${branch.prefix} - ` : ""}${title}`
+    }
+}
+
 function getNoteTitleArrayForPath(notePathArray: string[]) {
     if (!notePathArray || !Array.isArray(notePathArray)) {
         throw new Error(`${notePathArray} is not an array.`);
@@ -84,6 +111,7 @@ function getNoteTitleForPath(notePathArray: string[]) {
 
 export default {
     getNoteTitle,
+    getNoteTitleAndIcon,
     getNoteTitleForPath,
     isNotePathArchived
 };

src/becca/entities/bnote.ts

@@ -27,6 +27,26 @@ dayjs.extend(utc);
 const LABEL = "label";
 const RELATION = "relation";
 
+// TODO: Deduplicate with fnote
+const NOTE_TYPE_ICONS = {
+    file: "bx bx-file",
+    image: "bx bx-image",
+    code: "bx bx-code",
+    render: "bx bx-extension",
+    search: "bx bx-file-find",
+    relationMap: "bx bxs-network-chart",
+    book: "bx bx-book",
+    noteMap: "bx bxs-network-chart",
+    mermaid: "bx bx-selection",
+    canvas: "bx bx-pen",
+    webView: "bx bx-globe-alt",
+    launcher: "bx bx-link",
+    doc: "bx bxs-file-doc",
+    contentWidget: "bx bxs-widget",
+    mindMap: "bx bx-sitemap",
+    geoMap: "bx bx-map-alt"
+};
+
 interface NotePathRecord {
     isArchived: boolean;
     isInHoistedSubTree: boolean;
@@ -1691,6 +1711,53 @@ class BNote extends AbstractBeccaEntity<BNote> {
 
         return pojo;
     }
+
+    // TODO: Deduplicate with fnote
+    getIcon() {
+        const iconClassLabels = this.getLabels("iconClass");
+
+        if (iconClassLabels && iconClassLabels.length > 0) {
+            return iconClassLabels[0].value;
+        } else if (this.noteId === "root") {
+            return "bx bx-home-alt-2";
+        }
+        if (this.noteId === "_share") {
+            return "bx bx-share-alt";
+        } else if (this.type === "text") {
+            if (this.isFolder()) {
+                return "bx bx-folder";
+            } else {
+                return "bx bx-note";
+            }
+        } else if (this.type === "code" && this.mime.startsWith("text/x-sql")) {
+            return "bx bx-data";
+        } else {
+            return NOTE_TYPE_ICONS[this.type];
+        }
+    }
+
+    // TODO: Deduplicate with fnote
+    isFolder() {
+        return this.type === "search" || this.getFilteredChildBranches().length > 0;
+    }
+
+    // TODO: Deduplicate with fnote
+    getFilteredChildBranches() {
+            let childBranches = this.getChildBranches();
+
+        if (!childBranches) {
+            console.error(`No children for '${this.noteId}'. This shouldn't happen.`);
+            return [];
+        }
+
+        // we're not checking hideArchivedNotes since that would mean we need to lazy load the child notes
+        // which would seriously slow down everything.
+        // we check this flag only once user chooses to expand the parent. This has the negative consequence that
+        // note may appear as a folder but not contain any children when all of them are archived
+
+        return childBranches;
+    }
+
 }
 
 export default BNote;

src/errors/open_id_error.ts

@@ -0,0 +1,9 @@
+class OpenIdError {
+    message: string;
+
+    constructor(message: string) {
+        this.message = message;
+    }
+}
+
+export default OpenIdError;

src/express.d.ts

@@ -4,6 +4,10 @@ export declare module "express-serve-static-core" {
     interface Request {
         session: Session & {
             loggedIn: boolean;
+            lastAuthState: {
+                totpEnabled: boolean;
+                ssoEnabled: boolean;
+            };
         };
         headers: {
             "x-local-date"?: string;

src/public/app/doc_notes/en/User Guide/User Guide/Advanced Usage/Advanced Showcases.html

@@ -18,7 +18,7 @@
           href="Attributes/Promoted%20Attributes.html">Promoted Attributes</a>. To illustrate these features, we've prepared
             several showcases available in the <a href="Database.html">demo notes</a>:</p>
         <ul>
-          <li><a href="Relation%20Map.html">Relation Map</a>
+          <li><a href="../Note%20Types/Relation%20Map.html">Relation Map</a>
           </li>
           <li><a href="Advanced%20Showcases/Day%20Notes.html">Day Notes</a>
           </li>

src/public/app/doc_notes/en/User Guide/User Guide/Advanced Usage/Advanced Showcases/Day Notes.html

@@ -27,7 +27,7 @@
         <p>
           <img src="1_Day Notes_image.png">
         </p>
-        <p>This pattern works well also because of <a href="../../Basic%20Concepts/Note/Cloning%20Notes.html">Cloning Notes</a> functionality
+        <p>This pattern works well also because of <a href="../../Basic%20Concepts%20and%20Features/Notes/Cloning%20Notes.html">Cloning Notes</a> functionality
           - note can appear in multiple places in the note tree, so besides appearing
           under day note, it can also be categorized into other notes.</p>
         <h2>Demo</h2>
@@ -76,8 +76,8 @@
           the <code>#monthPattern</code> attribute, much like <code>#datePattern</code>.
           The options are:</p>
         <ul>
-          <li><code>{isoMonth}</code> results in an ISO 8061 formatted month (e.g.
-            "2025-03" for March 2025)</li>
+          <li><code>{isoMonth}</code> results in an ISO 8061 formatted month (e.g. "2025-03"
+            for March 2025)</li>
           <li><code>{monthNumberPadded}</code> results in a number like <code>09</code> for
             September, and <code>11</code> for November</li>
           <li><code>{month}</code> results in the full month name (e.g. <code>September</code> or <code>October</code>)</li>
@@ -100,4 +100,4 @@
     </div>
   </body>
 
-</html>
+</html>

src/public/app/doc_notes/en/User Guide/User Guide/Advanced Usage/Advanced Showcases/Task Manager.html

@@ -25,8 +25,8 @@
           and arbitrary tags - whenever you change tag attribute in the task note,
           this task is then automatically moved to appropriate location.</p>
         <p>Task Manager also integrates with <a href="Day%20Notes.html">day notes</a> -
-          notes are <a href="../../Basic%20Concepts/Note/Cloning%20Notes.html">cloned</a> into
-          day note to both todoDate note and doneDate note (with <a href="../../Basic%20Concepts/Navigation/Tree%20Concepts.html">prefix</a> of
+          notes are <a href="../../Basic%20Concepts%20and%20Features/Notes/Cloning%20Notes.html">cloned</a> into
+          day note to both todoDate note and doneDate note (with <a href="../../Basic%20Concepts%20and%20Features/Navigation/Tree%20Concepts.html">prefix</a> of
           either "TODO" or "DONE").</p>
         <h2>Implementation</h2>
         <p>New tasks are created in the TODO note which has <code>~child:template</code> 

src/public/app/doc_notes/en/User Guide/User Guide/Advanced Usage/Attributes.html

@@ -72,7 +72,7 @@
           <li><code>**cssClass**</code>: Adds a CSS class to the note's representation
             in the tree</li>
           <li><code>**iconClass**</code>: Adds a CSS class to the note's icon, useful
-            for distinguishing notes visually. See <a href="../Basic%20Concepts/Note/Note%20Icons.html">note icons</a>
+            for distinguishing notes visually. See <a href="../Basic%20Concepts%20and%20Features/Notes/Note%20Icons.html">note icons</a>
           </li>
           <li><code>**pageSize**</code>: Specifies the number of items per page in note
             listings</li>
@@ -83,13 +83,13 @@
             component tree</li>
           <li><code>**workspace**</code>  <strong>and related attributes</strong>: See
             <a
-            href="../Basic%20Concepts/Navigation/Workspace.html">Workspace</a>for more details</li>
+            href="../Basic%20Concepts%20and%20Features/Navigation/Workspace.html">Workspace</a>for more details</li>
           <li><code>**searchHome**</code>: Specifies the parent for new search notes</li>
           <li><code>**inbox**</code>: Designates a default location for new notes created
             via the sidebar</li>
           <li><code>**sqlConsoleHome**</code>: Default location for SQL console notes</li>
           <li><code>**bookmarked**</code>  <strong>and</strong>  <code>**bookmarkFolder**</code>:
-            See <a href="../Basic%20Concepts/Navigation/Bookmarks.html">Bookmarks</a>
+            See <a href="../Basic%20Concepts%20and%20Features/Navigation/Bookmarks.html">Bookmarks</a>
           </li>
           <li><code>**shareXXX**</code>: See <a href="Sharing.html">Sharing</a>
           </li>

src/public/app/doc_notes/en/User Guide/User Guide/Advanced Usage/Attributes/Template.html

@@ -51,7 +51,7 @@
         </p>
         <p>For the template to appear in the menu, the template note must have the <code>#template</code> label.
           Do not confuse this with the <code>~template</code> relation, which links
-          the instance note to the template note. If you use <a href="../../Basic%20Concepts/Navigation/Workspace.html">workspaces</a>,
+          the instance note to the template note. If you use <a href="../../Basic%20Concepts%20and%20Features/Navigation/Workspace.html">workspaces</a>,
           you can also mark templates with <code>#workspaceTemplate</code> to display
           them only in the workspace.</p>
         <p>Templates can also be added or changed after note creation by creating
@@ -61,7 +61,7 @@
           allowing all instance notes (e.g., books) to display a specific icon and
           CSS style.</p>
         <p>Explore the concept further in the <a href="../Database.html">demo notes</a>,
-          including examples like the <a href="../Relation%20Map.html">Relation Map</a>,
+          including examples like the <a href="../../Note%20Types/Relation%20Map.html">Relation Map</a>,
           <a
           href="../Advanced%20Showcases/Task%20Manager.html">Task Manager</a>, and <a href="../Advanced%20Showcases/Day%20Notes.html">Day Notes</a>.</p>
         <p>Additionally, see <a href="../Default%20Note%20Title.html">default note title</a> for

src/public/app/doc_notes/en/User Guide/User Guide/Advanced Usage/Database.html

@@ -21,7 +21,7 @@
         <p>When you run Trilium for the first time, it will generate a new database
           containing demo notes. These notes showcase its many features, such as:</p>
         <ul>
-          <li><a href="Relation%20Map.html">Relation Map</a>
+          <li><a href="../Note%20Types/Relation%20Map.html">Relation Map</a>
           </li>
           <li><a href="Advanced%20Showcases/Day%20Notes.html">Day Notes</a>
           </li>
@@ -29,7 +29,7 @@
           </li>
           <li><a href="Advanced%20Showcases/Task%20Manager.html">Task Manager</a>
           </li>
-          <li><a href="../Basic%20Concepts/Themes.html">Custom CSS Themes</a>
+          <li><a href="../Basic%20Concepts%20and%20Features/Themes.html">Custom CSS Themes</a>
           </li>
         </ul>
         <h3>Restoring Demo Notes</h3>

src/public/app/doc_notes/en/User Guide/User Guide/Advanced Usage/Database/Manually altering the database/SQL Console.html

@@ -14,7 +14,7 @@
 
       <div class="ck-content">
         <p>The SQL Console is Trilium's built-in database editor.</p>
-        <p>It can be accessed by going to the <a href="../../../Basic%20Concepts/UI%20Elements">global menu</a> →
+        <p>It can be accessed by going to the <a href="../../../Basic%20Concepts%20and%20Features/UI%20Elements">global menu</a> →
           Advanced → Open SQL Console.</p>
         <p>
           <img src="SQL Console_image.png">

src/public/app/doc_notes/en/User Guide/User Guide/Advanced Usage/ETAPI (REST API).html

@@ -16,9 +16,13 @@
         <p>ETAPI is Trilium's public/external REST API. It is available since Trilium
           v0.50.</p>
         <p>The documentation is in OpenAPI format, available <a href="https://github.com/TriliumNext/Notes/blob/master/src/etapi/etapi.openapi.yaml">here</a>.</p>
-        <p><a href="https://github.com/Nriver/trilium-py">trilium-py</a> is a third-party
-          Python implementation for ETAPI client, you can use Python to communicate
-          with Trilium.</p>
+        <h2>API clients</h2>
+        <p>As an alternative to calling the API directly, there are client libraries
+          to simplify this</p>
+        <ul>
+          <li><a href="https://github.com/Nriver/trilium-py">trilium-py</a>, you can
+            use Python to communicate with Trilium.</li>
+        </ul>
         <h2>Authentication</h2>
         <p>All operations have to be authenticated using a token. You can get this
           token either from Options -&gt; ETAPI or programmatically using the <code>/auth/login</code> REST
@@ -33,6 +37,32 @@ Authorization: Basic BATOKEN</code></pre>
           <li>And <code>password</code> is the generated ETAPI token described above.</li>
         </ul>
         <p>Basic Auth is meant to be used with tools which support only basic auth.</p>
+        <h2>Interaction using Bash scripts</h2>
+        <p>It is possible to write simple Bash scripts to interact with Trilium.
+          As an example, here's how to obtain the HTML content of a note:</p><pre><code class="language-text-x-sh">#!/usr/bin/env bash
+
+
+
+# Configuration
+
+TOKEN=z1vA4fkGxjOR_ZXLrZeqHEFOv65yV3882iFCRtNIK9k9iWrHliITNSLQ=
+
+SERVER=http://localhost:8080
+
+
+
+# Download a note by ID
+
+NOTE_ID="i6ra4ZshJhgN"
+
+curl "$SERVER/etapi/notes/$NOTE_ID/content" -H "Authorization: $TOKEN" </code></pre>
+        <p>Make sure to replace the values of:</p>
+        <ul>
+          <li><code>TOKEN</code> with your ETAPI token.</li>
+          <li><code>SERVER</code> with the correct protocol, host name and port to your
+            Trilium instance.</li>
+          <li><code>NOTE_ID</code> with an existing note ID to download.</li>
+        </ul>
       </div>
     </div>
   </body>

src/public/app/doc_notes/en/User Guide/User Guide/Advanced Usage/Note Map (Link map, Tree map).html

@@ -5,30 +5,39 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="../../style.css">
     <base target="_parent">
-    <title data-trilium-title>Note Map</title>
+    <title data-trilium-title>Note Map (Link map, Tree map)</title>
   </head>
   
   <body>
     <div class="content">
-       <h1 data-trilium-h1>Note Map</h1>
+       <h1 data-trilium-h1>Note Map (Link map, Tree map)</h1>
 
       <div class="ck-content">
         <p>Note map is a visualisation of connections between notes.</p>
         <p>This provides an insight into a structure ("web") of notes.</p>
         <p>There are two types of note map:</p>
+        <ul>
+          <li>Link Map, which shows relations between notes.</li>
+          <li>Note Map, which shows the hierarchical tree structure.</li>
+        </ul>
         <h2>Link Map</h2>
         <p>Shows <a href="Attributes.html">relations</a> between notes:</p>
         <p>
-          <img src="1_Note Map_image.png">
+          <img src="1_Note Map (Link map, Tree m.png">
         </p>
         <h2>Tree Map</h2>
         <p>Shows hierarchical map of notes:</p>
         <p>
-          <img src="Note Map_image.png">
+          <img src="Note Map (Link map, Tree m.png">
         </p>
+        <h2>Dedicated note type</h2>
+        <p>Apart from the note map feature which can be accessed from any note, it
+          is also possible to create a dedicated note which will display the relations
+          in full screen. See&nbsp;<a class="reference-link" href="../Note%20Types/Note%20Map.html">Note Map</a>&nbsp;for
+          more information.</p>
         <h2>See also</h2>
-        <p><a href="Relation%20Map.html">Relation map</a> is a similar concept, with
-          some differences:</p>
+        <p><a href="../Note%20Types/Relation%20Map.html">Relation map</a> is a similar
+          concept, with some differences:</p>
         <ul>
           <li>note map is automatically generated while relation map must be created
             manually</li>

src/public/app/doc_notes/en/User Guide/User Guide/Advanced Usage/Note source.html

@@ -0,0 +1,88 @@
+<html>
+  
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="../../style.css">
+    <base target="_parent">
+    <title data-trilium-title>Note source</title>
+  </head>
+  
+  <body>
+    <div class="content">
+       <h1 data-trilium-h1>Note source</h1>
+
+      <div class="ck-content">
+        <h2>Understanding the source code of the different notes</h2>
+        <p>Internally, the structure of the content of each note is different based
+          on the&nbsp;<a class="reference-link" href="../Note%20Types">Note Types</a>.</p>
+        <p>For example:</p>
+        <ul>
+          <li><a class="reference-link" href="#root/_hidden/_options/_optionsTextNotes">Text Notes</a>&nbsp;are
+            represented internally as HTML, using the&nbsp;<a class="reference-link"
+            href="Technologies%20used/CKEditor.html">CKEditor</a>&nbsp;representation.
+            Note that due to the custom plugins, some HTML elements are specific to
+            Trilium only, for example the admonitions.</li>
+          <li><a class="reference-link" href="#root/_hidden/_options/_optionsCodeNotes">Code Notes</a>&nbsp;are
+            plain text and are represented internally as-is.</li>
+          <li><a class="reference-link" href="../Note%20Types/Geo%20map.html">Geo map</a>&nbsp;notes
+            contain only minimal information (viewport, zoom) as a JSON.</li>
+          <li><a class="reference-link" href="../Note%20Types/Canvas.html">Canvas</a>&nbsp;notes
+            are represented as JSON, with Trilium's own information alongside with&nbsp;
+            <a
+            class="reference-link" href="Technologies%20used/Excalidraw.html">Excalidraw</a>'s internal JSON representation format.</li>
+          <li><a class="reference-link" href="../Note%20Types/Mind%20Map.html">Mind Map</a>&nbsp;notes
+            are represented as JSON, with the internal format of&nbsp;<a class="reference-link"
+            href="Technologies%20used/MindElixir.html">MindElixir</a>.</li>
+        </ul>
+        <p>Note that some information is also stored as&nbsp;<a class="reference-link"
+          href="../Attachments">Attachments</a>. For example&nbsp;<a class="reference-link"
+          href="../Note%20Types/Canvas.html">Canvas</a>&nbsp;notes use the attachments
+          feature to store the custom libraries, and alongside with&nbsp;<a class="reference-link"
+          href="../Note%20Types/Mind%20Map.html">Mind Map</a>&nbsp;and other similar
+          note types it stores an SVG representation of the content for use in other
+          features such as including in other notes, shared notes, etc.</p>
+        <p>Here's part of the HTML representation of this note, as it's stored in
+          the database (but prettified).</p><pre><code class="language-text-html">&lt;h2&gt;
+	Understanding the source code of the different notes
+&lt;/h2&gt;
+&lt;p&gt;
+	Internally, the structure of the content of each note is different based on the&amp;nbsp;
+	&lt;a class="reference-link" href="../Note%20Types"&gt;
+		Note Types
+	&lt;/a&gt;
+	.
+&lt;/p&gt;</code></pre>
+        <h2>Viewing the source code</h2>
+        <p>It is possible to view the source code of a note by pressing the contextual
+          menu in&nbsp;<a class="reference-link" href="../Basic%20Concepts%20and%20Features/UI%20Elements/Note%20buttons.html">Note buttons</a>&nbsp;and
+          selecting <em>Note source</em>.</p>
+        <p>
+          <img src="Note source_image.png" width="860" height="377">
+        </p>
+        <p>The source code will be displayed in a new tab.</p>
+        <p>For some note types, such as text notes, the source code is also formatted
+          in order to be more easily readable.</p>
+        <h2>Modifying the source code</h2>
+        <p>It is possible to modify the source code of a note directly, however not
+          via the <em>Note source </em>functionality.&nbsp;</p>
+        <p>To do so:</p>
+        <ol>
+          <li>Change the note type from the real note type (e.g. Canvas, Geo Type) to
+            Code (plain text) or the corresponding format such as JSON or HTML.</li>
+          <li>Confirm the warning about changing the note type.</li>
+          <li>The source code will appear, make the necessary modifications.</li>
+          <li>Change the note type back to the real note type.</li>
+        </ol>
+        <aside class="admonition warning">
+          <p>Depending on the changes made, there is a risk that the note will not
+            render properly. It's best to save a revision before making any big changes.</p>
+          <p>If the note does not render properly, modify the source code again or
+            revert to a prior revision. Since the error handling for unexpected changes
+            might not always be perfect, it be required to refresh the application.</p>
+        </aside>
+      </div>
+    </div>
+  </body>
+
+</html>

src/public/app/doc_notes/en/User Guide/User Guide/Advanced Usage/Relation Map.html

@@ -1,95 +0,0 @@
-<html>
-  
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="../../style.css">
-    <base target="_parent">
-    <title data-trilium-title>Relation Map</title>
-  </head>
-  
-  <body>
-    <div class="content">
-       <h1 data-trilium-h1>Relation Map</h1>
-
-      <div class="ck-content">
-        <p>Relation map is a type of <a href="../Basic%20Concepts/Navigation/Tree%20Concepts.html">note</a> which
-          visualizes notes and their <a href="Attributes.html">relations</a>. See
-          an example:</p>
-        <h2>Development process demo</h2>
-        <p>This is a basic example how you can create simple diagram using relation
-          maps:</p>
-        <p>
-          <img src="../Attachments/relation-map-dev-process.png">
-        </p>
-        <p>And this is how you can create it:</p>
-        <p>
-          <img src="Relation Map_relation-map-.gif">
-        </p>
-        <p>We start completely from scratch by first creating new note called "Development
-          process" and changing its type to "Relation map". After that we create
-          new notes one by one and place them by clicking into the map. We also drag
-          <a
-          href="Attributes.html">relations</a>between notes and name them. That's all!</p>
-        <p>Items on the map - "Specification", "Development", "Testing" and "Demo"
-          are actually notes which have been created under "Development process"
-          note - you can click on them and write some content. Connections between
-          notes are called "<a href="Attributes.html">relations</a>".</p>
-        <h2>Family demo</h2>
-        <p>This is more complicated demo using some advanced concepts. Resulting
-          diagram is here:</p>
-        <p>
-          <img src="../Attachments/relation-map-family.png">
-        </p>
-        <p>This is how you get to it:</p>
-        <p>
-          <img src="../Attachments/relation-map-family-demo.gif">
-        </p>
-        <p>There are several steps here:</p>
-        <ul>
-          <li>we start with empty relation map and two existing notes representing Prince
-            Philip and Queen Elizabeth II. These two notes already have "isPartnerOf"
-            <a
-            href="Attributes.html">relations</a>defined.
-              <ul>
-                <li>There are actually two "inverse" relations (one from Philip to Elizabeth
-                  and one from Elizabeth to Philip)</li>
-              </ul>
-          </li>
-          <li>we drag both notes to relation map and place to suitable position. Notice
-            how the existing "isPartnerOf" relations are displayed.</li>
-          <li>now we create new note - we name it "Prince Charles" and place it on the
-            relation map by clicking on the desired position. The note is by default
-            created under the relation map note (visible in the note tree on the left).</li>
-          <li>we create two new relations "isChildOf" targeting both Philip and Elizabeth
-            <ul>
-              <li>now there's something unexpected - we can also see the relation to display
-                another "hasChild" relation. This is because there's a <a href="Attributes/Promoted%20Attributes.html">relation definition</a> which
-                puts "isChildOf" as an "<a href="Attributes/Promoted%20Attributes.html">inverse</a>"
-                relation of "hasChildOf" (and vice versa) and thus it is created automatically.</li>
-            </ul>
-          </li>
-          <li>we create another note for Princess Diana and create "isPartnerOf" relation
-            from Charles. Again notice how the relation has arrows both ways - this
-            is because "isPartnerOf" definition specifies its inverse relation as again
-            "isPartnerOf" so the opposite relation is created automatically.</li>
-          <li>as the last step we pan &amp; zoom the map to fit better to window dimensions.</li>
-        </ul>
-        <p>Relation definitions mentioned above come from "Person template" note
-          which is assigned to any child of "My Family Tree" relation note. You can
-          play with the whole thing in the <a href="Database.html">demo notes</a>.</p>
-        <h2>Details</h2>
-        <p>You can specify which relations should be displayed with comma delimited
-          names of relations in <code>displayRelations</code> label.</p>
-        <p>Alternatively, you can specify comma delimited list of relation names
-          in <code>hideRelations</code> which will display all relations, except for
-          the ones defined in the label.</p>
-        <h2>See also</h2>
-        <ul>
-          <li><a href="Note%20Map.html">Note map</a> is a similar concept</li>
-        </ul>
-      </div>
-    </div>
-  </body>
-
-</html>

src/public/app/doc_notes/en/User Guide/User Guide/Advanced Usage/Sharing.html

@@ -71,7 +71,7 @@
           <li><strong>Omitting Default CSS</strong>: For extensive styling changes,
             use the <code>#shareOmitDefaultCss</code> label to avoid conflicts with Trilium's
             <a
-            href="../Basic%20Concepts/Themes.html">default stylesheet</a>.</li>
+            href="../Basic%20Concepts%20and%20Features/Themes.html">default stylesheet</a>.</li>
         </ul>
         <h3>Adding JavaScript</h3>
         <p>You can inject custom JavaScript into the shared note using the <code>~shareJs</code> relation.

src/public/app/doc_notes/en/User Guide/User Guide/Advanced Usage/Technologies used.html

@@ -0,0 +1,27 @@
+<html>
+  
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="../../style.css">
+    <base target="_parent">
+    <title data-trilium-title>Technologies used</title>
+  </head>
+  
+  <body>
+    <div class="content">
+       <h1 data-trilium-h1>Technologies used</h1>
+
+      <div class="ck-content">
+        <p>One core aspect of Trilium that allows it to have support for multiple&nbsp;
+          <a
+          class="reference-link" href="../Note%20Types">Note Types</a>&nbsp;is the fact that it makes use of various off-the-shelf
+            or reusable libraries.</p>
+        <p>The sub-pages showcase some of the technologies used, for a better understanding
+          of how Trilium works but also to credit the developers of that particular
+          technology.</p>
+      </div>
+    </div>
+  </body>
+
+</html>

src/public/app/doc_notes/en/User Guide/User Guide/Advanced Usage/Technologies used/CKEditor.html

@@ -0,0 +1,59 @@
+<html>
+  
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="../../../style.css">
+    <base target="_parent">
+    <title data-trilium-title>CKEditor</title>
+  </head>
+  
+  <body>
+    <div class="content">
+       <h1 data-trilium-h1>CKEditor</h1>
+
+      <div class="ck-content">
+        <h2>Editor core</h2>
+        <p>The CKEditor is the WYSIWYG (standing for What You See Is What You Get)
+          editor behind&nbsp;<a class="reference-link" href="../../Note%20Types/Text.html">Text</a>&nbsp;notes.</p>
+        <p>Their website is <a href="https://ckeditor.com/">ckeditor.com</a>.</p>
+        <p>CKEditor by itself is a commercial product, but the core is open-source.
+          As described in <a href="https://ckeditor.com/docs/ckeditor5/latest/features/index.html">its documentation</a>,
+          the editor supports quite a large number of features. Do note that not
+          all the features are enabled in Trilium.</p>
+        <h2>Premium features</h2>
+        <p>Some features are marked as premium in the CKEditor feature set. This
+          means that they cannot be used without a license.</p>
+        <p>Trilium cannot benefit from any of these premium features as they require
+          a commercial license, however we are in discussions with the CKEditor team
+          to allow us to use a subset of these premium features such as <a href="https://ckeditor.com/docs/ckeditor5/latest/features/slash-commands.html">Slash commands</a>.</p>
+        <h2>Plugins</h2>
+        <p>The CKEditor ecosystem is quite extensible, in the sense that custom plugins
+          can be written to extend the functionality of the editor beyond its original
+          scope.</p>
+        <p>Trilium makes use of such features:</p>
+        <ul>
+          <li>The math feature is added by a version of <a href="https://github.com/isaul32/ckeditor5-math">isaul32/ckeditor5-math: Math feature for CKEditor 5.</a> modified
+            by us to fit our needs.</li>
+          <li>We also make use of modified upstream plugins such as <a href="https://github.com/ckeditor/ckeditor5-mermaid">ckeditor/ckeditor5-mermaid</a> to
+            allow inline Mermaid code.</li>
+          <li><a href="https://github.com/mlewand/ckeditor5-keyboard-marker">mlewand/ckeditor5-keyboard-marker: Plugin adds support for the keyboard input element (&lt;kbd&gt;) to CKEditor 5.</a> 
+          </li>
+          <li>A modified version of <a href="https://github.com/ThomasAitken/ckeditor5-footnotes">ThomasAitken/ckeditor5-footnotes: Footnotes plugin for CKEditor5</a> to
+            allow footnotes.</li>
+        </ul>
+        <p>Apart from that, Trilium also has its own set of specific plugins such
+          as:</p>
+        <ul>
+          <li>Cut to note</li>
+          <li>Include note</li>
+          <li>Mentions, for linking pages.</li>
+          <li>Markdown import.</li>
+          <li>Reference links.</li>
+          <li>etc.</li>
+        </ul>
+      </div>
+    </div>
+  </body>
+
+</html>

src/public/app/doc_notes/en/User Guide/User Guide/Advanced Usage/Technologies used/Excalidraw.html

@@ -0,0 +1,25 @@
+<html>
+  
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="../../../style.css">
+    <base target="_parent">
+    <title data-trilium-title>Excalidraw</title>
+  </head>
+  
+  <body>
+    <div class="content">
+       <h1 data-trilium-h1>Excalidraw</h1>
+
+      <div class="ck-content">
+        <p><a href="https://excalidraw.com/">Excalidraw</a> is the technology behind
+          the&nbsp;<a class="reference-link" href="../../Note%20Types/Canvas.html">Canvas</a>&nbsp;notes.
+          The source code of the library is available on <a href="https://github.com/excalidraw/excalidraw">GitHub</a>.</p>
+        <p>We are using an unmodified version of it, so it shares the same <a href="https://github.com/excalidraw/excalidraw/issues">issues</a> as
+          the original.</p>
+      </div>
+    </div>
+  </body>
+
+</html>

src/public/app/doc_notes/en/User Guide/User Guide/Advanced Usage/Technologies used/Leaflet.html

@@ -0,0 +1,28 @@
+<html>
+  
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="../../../style.css">
+    <base target="_parent">
+    <title data-trilium-title>Leaflet</title>
+  </head>
+  
+  <body>
+    <div class="content">
+       <h1 data-trilium-h1>Leaflet</h1>
+
+      <div class="ck-content">
+        <p>Leaflet is the library behind&nbsp;<a class="reference-link" href="../../Note%20Types/Geo%20map.html">Geo map</a>&nbsp;notes.</p>
+        <h2>Plugins</h2>
+        <p>Leaflet is also highly customizable via external plugins.</p>
+        <p>Currently we use:</p>
+        <ul>
+          <li><a href="https://github.com/mpetazzoni/leaflet-gpx">mpetazzoni/leaflet-gpx: A GPX track plugin for Leaflet.js</a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </body>
+
+</html>

src/public/app/doc_notes/en/User Guide/User Guide/Advanced Usage/Technologies used/MindElixir.html

@@ -0,0 +1,29 @@
+<html>
+  
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="../../../style.css">
+    <base target="_parent">
+    <title data-trilium-title>MindElixir</title>
+  </head>
+  
+  <body>
+    <div class="content">
+       <h1 data-trilium-h1>MindElixir</h1>
+
+      <div class="ck-content">
+        <p>MindElixir is the library we are using for the&nbsp;<a class="reference-link"
+          href="../../Note%20Types/Mind%20Map.html">Mind Map</a>&nbsp;note types.</p>
+        <p>The main library is available on <a href="https://github.com/SSShooter/mind-elixir-core/issues">GitHub as mind-elixir-core</a>.</p>
+        <p>The library is embedded as-is without additional modifications.</p>
+        <p>Issues with its functionality should generally be reported <a href="https://github.com/ssshooter/mind-elixir-core">upstream</a>.</p>
+        <h2>Plugins</h2>
+        <p>MindElixir supports plugins, and one such plugin we are making use of
+          is <a href="https://github.com/SSShooter/node-menu">SSShooter/node-menu: A node menu plugin of mind-elixir</a>,
+          which allows editing the fonts, colors, links of nodes.</p>
+      </div>
+    </div>
+  </body>
+
+</html>

src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/Keyboard Shortcuts.html

@@ -75,7 +75,7 @@
           <li><kbd>Shift</kbd>+<kbd>🖱 Left click</kbd> - multi select note which you
             clicked on</li>
           <li><kbd>Ctrl</kbd>+<kbd>C</kbd> - copies current note (or current selection)
-            into clipboard (used for <a href="Note/Cloning%20Notes.html">cloning</a>
+            into clipboard (used for <a href="Notes/Cloning%20Notes.html">cloning</a>
           </li>
           <li><kbd>Ctrl</kbd>+<kbd>X</kbd> - cuts current (or current selection) note
             into clipboard (used for moving notes)</li>

src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/Navigation/Tree Concepts.html

@@ -16,7 +16,7 @@
         <p>This page explains the basic concepts related to the tree structure of
           notes in TriliumNext.</p>
         <h2>Note</h2>
-        <p>A note is the central entity in TriliumNext. For more details, see <a href="../Note.html">Note</a>.</p>
+        <p>A note is the central entity in TriliumNext. For more details, see <a href="../Notes.html">Note</a>.</p>
         <h2>Branch</h2>
         <p>A branch describes the placement of a note within the note tree. Essentially,
           it is a tuple of <code>parentNoteId</code> and <code>noteId</code>, indicating
@@ -24,7 +24,7 @@
         <p>Each note can have multiple branches, meaning any note can be placed in
           multiple locations within the tree. This concept is referred to as "
           <a
-          href="../Note/Cloning%20Notes.html">cloning</a>."</p>
+          href="../Notes/Cloning%20Notes.html">cloning</a>."</p>
         <h2>Prefix</h2>
         <p>A prefix is a branch-specific title modifier for a note. If you place
           your note in two different locations within the tree and want to alter

src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/Notes.html

@@ -5,12 +5,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="../../style.css">
     <base target="_parent">
-    <title data-trilium-title>Note</title>
+    <title data-trilium-title>Notes</title>
   </head>
   
   <body>
     <div class="content">
-       <h1 data-trilium-h1>Note</h1>
+       <h1 data-trilium-h1>Notes</h1>
 
       <div class="ck-content">
         <p>Note is a central entity in Trilium. Main attributes of note are title
@@ -30,8 +30,8 @@
           <li><a href="../Note%20Types/Saved%20Search.html">saved search</a> note - contains
             saved search query and dynamically displays result of the search as its
             sub-notes</li>
-          <li><a href="../Advanced%20Usage/Relation%20Map.html">relation map</a> note
-            - visualizes notes and their relations</li>
+          <li><a href="../Note%20Types/Relation%20Map.html">relation map</a> note - visualizes
+            notes and their relations</li>
           <li><a href="../Note%20Types/Book.html">book note</a> - displays its children
             notes, useful for reading many short notes</li>
           <li>mermaid - create diagrams and flowcharts using <a href="https://github.com/mermaid-js/mermaid">mermaid.js ↗</a>
@@ -47,7 +47,7 @@
           tree. All other notes are placed below it in the structure.</p>
         <h3>Tree structure</h3>
         <p>Importantly, note itself doesn't carry information on its placement in
-          note tree. See <a href="Note/Cloning%20Notes.html">cloning</a> for details.</p>
+          note tree. See <a href="Notes/Cloning%20Notes.html">cloning</a> for details.</p>
         <p>Tree structure of notes can resemble file system - but compared to that
           notes in Trilium can act as both file and directory - meaning that note
           can both have its own content and have children. "Leaf note" is a note
@@ -73,7 +73,7 @@
           anymore to recover them (unless you restore <a href="../Installation%20%26%20Setup/Backup.html">backup</a>).</p>
         <h2>See also</h2>
         <ul>
-          <li><a href="Note/Read-Only%20Notes.html">Read-only note</a>
+          <li><a href="Notes/Read-Only%20Notes.html">Read-only note</a>
           </li>
         </ul>
       </div>

src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/Notes/Attachments.html

@@ -13,7 +13,7 @@
        <h1 data-trilium-h1>Attachments</h1>
 
       <div class="ck-content">
-        <p>A <a href="../Note.html">note</a> in Trilium can <em>own</em> one or more
+        <p>A <a href="../Notes.html">note</a> in Trilium can <em>own</em> one or more
           attachments, which can be either images or files. These attachments can
           be displayed or linked within the note that owns them.</p>
         <p>This can be especially useful to include dependencies for your <a href="../../Note%20Types/Code/Scripts.html">scripts</a>.

src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/Notes/Note Icons.html

@@ -14,8 +14,8 @@
 
       <div class="ck-content">
         <p>Icons are useful for distinguishing notes. At the technical level, they
-          are set by the <code>**iconClass**</code> attribute which adds a CSS class
-          to the note. For example <code>#iconClass="bx bx-calendar"</code> will show
+          are set by the <code>iconClass</code> attribute which adds a CSS class to
+          the note. For example <code>#iconClass="bx bx-calendar"</code> will show
           a calendar instead of the default page or folder icon. Looking up and remembering
           the css class names is not necessary. While editing a note, click on the
           icon next to the title to bring up a chooser gallery:</p>

src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/Launch Bar.html

@@ -56,7 +56,7 @@
         <ul>
           <li>The icon of a launcher can be changed just like a normal note. See 
             <a
-            href="../Note/Note%20Icons.html">Note Icons</a> for more information.</li>
+            href="../Notes/Note%20Icons.html">Note Icons</a> for more information.</li>
           <li>The title of the launcher can also be changed.</li>
         </ul>
         <h3>Resetting</h3>

src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/Note Tree.html

@@ -44,7 +44,7 @@
         <p>You can also move notes using the familiar cut and paste functions available
           in the context menu, or with the associated keyboard <a href="../Keyboard%20Shortcuts.html">shortcuts</a>: <code>CTRL-C</code> (
           <a
-          href="../Note/Cloning%20Notes.html">copy</a>), <kbd>Ctrl</kbd> + <kbd>X</kbd> (cut) and <kbd>Ctrl</kbd> + <kbd>V</kbd> (paste).</p>
+          href="../Notes/Cloning%20Notes.html">copy</a>), <kbd>Ctrl</kbd> + <kbd>X</kbd> (cut) and <kbd>Ctrl</kbd> + <kbd>V</kbd> (paste).</p>
         <h2>Multiple selection</h2>
         <p>It is possible to select multiple notes at one time.</p>
         <p>To do so, first select the note to start the selection with. Then hold

src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/Note buttons.html

@@ -0,0 +1,34 @@
+<html>
+  
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="../../../style.css">
+    <base target="_parent">
+    <title data-trilium-title>Note buttons</title>
+  </head>
+  
+  <body>
+    <div class="content">
+       <h1 data-trilium-h1>Note buttons</h1>
+
+      <div class="ck-content">
+        <p>To the right of the&nbsp;<a class="reference-link" href="Ribbon.html">Ribbon</a>&nbsp;there
+          are a few more buttons:
+          <img src="Note buttons_image.png" width="69" height="33">
+        </p>
+        <ul>
+          <li>The Note Revisions button displays the&nbsp;<a class="reference-link"
+            href="../Notes/Note%20Revisions.html">Note Revisions</a>&nbsp;for that
+            particular note.</li>
+          <li>The contextual menu offers commands for the note or its subtree, such
+            as import, export, viewing the&nbsp;<a class="reference-link" href="../../Advanced%20Usage/Note%20source.html">Note source code</a>&nbsp;or&nbsp;
+            <a
+            class="reference-link" href="../Notes/Attachments.html">Attachments</a>.</li>
+        </ul>
+        <p>&nbsp;</p>
+      </div>
+    </div>
+  </body>
+
+</html>

src/public/app/doc_notes/en/User Guide/User Guide/Developer Guides/Widget Basics.html

@@ -34,13 +34,13 @@ module.exports = new MyWidget();</code></pre>
           <li>Create a new <code>JS Frontend</code> note in Trilium and paste in the code
             above.</li>
           <li>Assign the <code>#widget</code>  <a href="../Advanced%20Usage/Attributes.html">attribute</a> to
-            the <a href="../Basic%20Concepts/Note.html">note</a>.</li>
+            the <a href="../Basic%20Concepts%20and%20Features/Notes.html">note</a>.</li>
           <li>Restart Trilium or reload the window.</li>
         </ol>
         <p>To verify that the widget is working, open the developer tools (<code>Cmd</code> + <code>Shift</code> + <code>I</code>)
           and run <code>document.querySelector("#my-widget")</code>. If the element
           is found, the widget is functioning correctly. If <code>undefined</code> is
-          returned, double-check that the <a href="../Basic%20Concepts/Note.html">note</a> has
+          returned, double-check that the <a href="../Basic%20Concepts%20and%20Features/Notes.html">note</a> has
           the <code>#widget</code>  <a href="../Advanced%20Usage/Attributes.html">attribute</a>.</p>
         <h3>Step 2: Adding an UI Element</h3>
         <p>Next, let's improve the widget by adding a button to it.</p><pre><code class="language-text-x-trilium-auto">const template = ``;

src/public/app/doc_notes/en/User Guide/User Guide/FAQ.html

@@ -70,9 +70,9 @@
           with probably more problems.</p>
         <p>More detailed answer:</p>
         <ul>
-          <li><a href="Basic%20Concepts/Note/Cloning%20Notes.html">clones</a> are what
-            you might call "hard directory link" in filesystem lingo, but this concept
-            is not implemented in any filesystem</li>
+          <li><a href="Basic%20Concepts%20and%20Features/Notes/Cloning%20Notes.html">clones</a> are
+            what you might call "hard directory link" in filesystem lingo, but this
+            concept is not implemented in any filesystem</li>
           <li>filesystems make a distinction between directory and file while there's
             intentionally no such difference in Trilium</li>
           <li>files are stored in no particular order and user can't change this</li>
@@ -80,7 +80,7 @@
             could be represented in extended user attributes but their support differs
             greatly among different filesystems / operating systems</li>
           <li>Trilium makes links / relations between different notes which can be quickly
-            retrieved / navigated (e.g. for <a href="Advanced%20Usage/Note%20Map.html">note map</a>).
+            retrieved / navigated (e.g. for <a href="Advanced%20Usage/Note%20Map%20(Link%20map%2C%20Tree%20map).html">note map</a>).
             There's no such support in file systems which means these would have to
             be stored in some kind of side-car files (mini-databases).</li>
           <li>Filesystems are generally not transactional. While this is not completely

src/public/app/doc_notes/en/User Guide/User Guide/Installation & Setup/Mobile Frontend.html

@@ -36,7 +36,7 @@
         <ul>
           <li>it is possible to browse the whole note tree, read and edit all types
             of notes, but you can create only text notes</li>
-          <li>reading and editing <a href="../Basic%20Concepts/Note/Protected%20Notes.html">protected notes</a> is
+          <li>reading and editing <a href="../Basic%20Concepts%20and%20Features/Notes/Protected%20Notes.html">protected notes</a> is
             possible, but creating them is not supported</li>
           <li>editing options is not supported</li>
           <li>cloning notes is not supported</li>

src/public/app/doc_notes/en/User Guide/User Guide/Installation & Setup/Synchronization.html

@@ -97,7 +97,7 @@
         <h3>Conflict Resolution</h3>
         <p>If you edit the same note on multiple instances before synchronization,
           Trilium resolves conflicts by retaining the newer change and discarding
-          the older one. The older version remains accessible in <a href="../Basic%20Concepts/Note/Note%20Revisions.html">note revisions</a>,
+          the older one. The older version remains accessible in <a href="../Basic%20Concepts%20and%20Features/Notes/Note%20Revisions.html">note revisions</a>,
           allowing data recovery if needed.</p>
         <h3>Hash Check</h3>
         <p>After each synchronization, Trilium computes a hash of all synced data

src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Book.html

@@ -13,7 +13,7 @@
        <h1 data-trilium-h1>Book</h1>
 
       <div class="ck-content">
-        <p>A <strong>Book Note</strong> in Trilium is a special type of <a href="../Basic%20Concepts/Note.html">note</a> designed
+        <p>A <strong>Book Note</strong> in Trilium is a special type of <a href="../Basic%20Concepts%20and%20Features/Notes.html">note</a> designed
           to display the contents of its child notes sequentially, creating a linear,
           book-like reading experience. This format is particularly useful for viewing
           multiple smaller notes in a cohesive, continuous manner.</p>

src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Code.html

@@ -29,12 +29,12 @@
             in conjunction with scripting)</li>
         </ul>
         <p>For shorter snippets of code that can be embedded in <a href="Text.html">Text</a> notes,
-          see <a href="Text/Code%20blocks.html">Code blocks</a>.</p>
+          see <a href="Text/Developer-specific%20formatting/Code%20blocks.html">Code blocks</a>.</p>
         <p>
           <img src="Code_image.png">
         </p>
         <h2>Adjusting the language of a code note</h2>
-        <p>In the <a href="../Basic%20Concepts/UI%20Elements/Ribbon.html">Ribbon</a>,
+        <p>In the <a href="../Basic%20Concepts%20and%20Features/UI%20Elements/Ribbon.html">Ribbon</a>,
           look for the <em>Note type</em> selector and click it to reveal the possible
           note types. Inside of it there will be a section called <em>Code</em>, select
           any one of the languages.</p>
@@ -44,13 +44,13 @@
         <h2>Adjusting the list of languages</h2>
         <p>Trilium supports syntax highlighting for many languages, but by default
           displays only some of them. The supported languages can be adjusted by
-          going to <a href="../Basic%20Concepts/UI%20Elements/Options.html">Options</a>,
+          going to <a href="../Basic%20Concepts%20and%20Features/UI%20Elements/Options.html">Options</a>,
           then <em>Code Notes</em> and looking for the <em>Available MIME types in the dropdown</em> section.
           Simply check any of the items to add them to the list, or un-check them
           to remove them from the list.</p>
         <p>Note that the list of languages is not immediately refreshed, you'd have
           to manually <a href="../Troubleshooting/Refreshing%20the%20application.html">refresh the application</a>.</p>
-        <p>The list of languages is also shared with the <a href="Text/Code%20blocks.html">Code blocks</a> feature
+        <p>The list of languages is also shared with the <a href="Text/Developer-specific%20formatting/Code%20blocks.html">Code blocks</a> feature
           of <a href="Text.html">Text</a> notes.</p>
       </div>
     </div>

src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Note Map.html

@@ -12,7 +12,16 @@
     <div class="content">
        <h1 data-trilium-h1>Note Map</h1>
 
-      <div class="ck-content"></div>
+      <div class="ck-content">
+        <p>A Note map is a note type which displays a standalone version of the feature
+          of the same name:&nbsp;<a class="reference-link" href="../Advanced%20Usage/Note%20Map%20(Link%20map%2C%20Tree%20map).html">Note Map (Link map, Tree map)</a>.</p>
+        <p>Once created, the note map will display the relations between notes. Only
+          the notes that are part of the parent of the note map will be displayed
+          (including their children).</p>
+        <p>
+          <img src="Note Map_image.png" width="856" height="763">
+        </p>
+      </div>
     </div>
   </body>
 

src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Relation Map.html

@@ -12,7 +12,84 @@
     <div class="content">
        <h1 data-trilium-h1>Relation Map</h1>
 
-      <div class="ck-content"></div>
+      <div class="ck-content">
+        <p>Relation map is a type of&nbsp;<a class="reference-link" href="../Basic%20Concepts%20and%20Features/Notes.html">Note</a>&nbsp;which
+          visualizes notes and their <a href="../Advanced%20Usage/Attributes.html">relations</a>.
+          See an example:</p>
+        <h2>Development process demo</h2>
+        <p>This is a basic example how you can create simple diagram using relation
+          maps:</p>
+        <p>
+          <img src="../Attachments/relation-map-dev-process.png">
+        </p>
+        <p>And this is how you can create it:</p>
+        <p>
+          <img src="Relation Map_relation-map-.gif">
+        </p>
+        <p>We start completely from scratch by first creating new note called "Development
+          process" and changing its type to "Relation map". After that we create
+          new notes one by one and place them by clicking into the map. We also drag
+          <a
+          href="../Advanced%20Usage/Attributes.html">relations</a>between notes and name them. That's all!</p>
+        <p>Items on the map - "Specification", "Development", "Testing" and "Demo"
+          are actually notes which have been created under "Development process"
+          note - you can click on them and write some content. Connections between
+          notes are called "<a href="../Advanced%20Usage/Attributes.html">relations</a>".</p>
+        <h2>Family demo</h2>
+        <p>This is more complicated demo using some advanced concepts. Resulting
+          diagram is here:</p>
+        <p>
+          <img src="../Attachments/relation-map-family.png">
+        </p>
+        <p>This is how you get to it:</p>
+        <p>
+          <img src="../Attachments/relation-map-family-demo.gif">
+        </p>
+        <p>There are several steps here:</p>
+        <ul>
+          <li>we start with empty relation map and two existing notes representing Prince
+            Philip and Queen Elizabeth II. These two notes already have "isPartnerOf"
+            <a
+            href="../Advanced%20Usage/Attributes.html">relations</a>defined.
+              <ul>
+                <li>There are actually two "inverse" relations (one from Philip to Elizabeth
+                  and one from Elizabeth to Philip)</li>
+              </ul>
+          </li>
+          <li>we drag both notes to relation map and place to suitable position. Notice
+            how the existing "isPartnerOf" relations are displayed.</li>
+          <li>now we create new note - we name it "Prince Charles" and place it on the
+            relation map by clicking on the desired position. The note is by default
+            created under the relation map note (visible in the note tree on the left).</li>
+          <li>we create two new relations "isChildOf" targeting both Philip and Elizabeth
+            <ul>
+              <li>now there's something unexpected - we can also see the relation to display
+                another "hasChild" relation. This is because there's a <a href="../Advanced%20Usage/Attributes/Promoted%20Attributes.html">relation definition</a> which
+                puts "isChildOf" as an "<a href="../Advanced%20Usage/Attributes/Promoted%20Attributes.html">inverse</a>"
+                relation of "hasChildOf" (and vice versa) and thus it is created automatically.</li>
+            </ul>
+          </li>
+          <li>we create another note for Princess Diana and create "isPartnerOf" relation
+            from Charles. Again notice how the relation has arrows both ways - this
+            is because "isPartnerOf" definition specifies its inverse relation as again
+            "isPartnerOf" so the opposite relation is created automatically.</li>
+          <li>as the last step we pan &amp; zoom the map to fit better to window dimensions.</li>
+        </ul>
+        <p>Relation definitions mentioned above come from "Person template" note
+          which is assigned to any child of "My Family Tree" relation note. You can
+          play with the whole thing in the <a href="../Advanced%20Usage/Database.html">demo notes</a>.</p>
+        <h2>Details</h2>
+        <p>You can specify which relations should be displayed with comma delimited
+          names of relations in <code>displayRelations</code> label.</p>
+        <p>Alternatively, you can specify comma delimited list of relation names
+          in <code>hideRelations</code> which will display all relations, except for
+          the ones defined in the label.</p>
+        <h2>See also</h2>
+        <ul>
+          <li><a class="reference-link" href="../Advanced%20Usage/Note%20Map%20(Link%20map%2C%20Tree%20map).html">Note Map</a>&nbsp;is
+            a similar concept</li>
+        </ul>
+      </div>
     </div>
   </body>
 

src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Saved Search.html

@@ -22,7 +22,7 @@
         <h2>Location</h2>
         <p>By default, saved searches are stored in the day note. However, you can
           designate a different note to store saved searches by marking it with the <code>#searchHome</code> label.
-          Additionally, for <a href="../Basic%20Concepts/Navigation/Workspace.html">workspaces</a>,
+          Additionally, for <a href="../Basic%20Concepts%20and%20Features/Navigation/Workspace.html">workspaces</a>,
           you can use the <code>#workspaceSearchHome</code> label to specify a storage
           location for saved searches within that workspace.</p>
       </div>

src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Text.html

@@ -37,7 +37,7 @@
         <p>In both cases, it is possible to switch back to editable mode using the
           <img
           src="Text_bx-edit-alt.svg">button at top right of page.</p>
-        <p>For more information, see <a href="../Basic%20Concepts/Note/Read-Only%20Notes.html">Read-Only Notes</a>.</p>
+        <p>For more information, see&nbsp;<a href="../Basic%20Concepts%20and%20Features/Notes/Read-Only%20Notes.html">Read-Only Notes</a>.</p>
         <h2>General Formatting</h2>
         <p>Since Trilium uses CKEditor, all of its formatting options are available
           here. You may use the graphical toolbar shown above, or enter formatting
@@ -47,21 +47,24 @@
           </li>
           <li><em>Italic</em>: Type <code>*text*</code> or <code>_text_</code>
           </li>
-          <li><code>Code</code>: Type `text`</li>
-          <li><del>Strikethrough</del>: Type <code>~~text~~</code>
+          <li><s>Strikethrough</s>: Type <code>~~text~~</code>
           </li>
         </ul>
         <h3>Lists</h3>
-        <p>See <a href="Text/Lists.html">Lists</a>.</p>
+        <p>See&nbsp;<a href="Text/Lists.html">Lists</a>.</p>
         <h3>Blocks</h3>
         <ul>
           <li>Block quote: Start a line with <code>&gt;</code> followed by a space</li>
         </ul>
-        <h3>Multi-Line Code Blocks</h3>
-        <p>To create a multi-line code block, start a line with "```[lang]", for
-          example:</p><pre><code class="language-text-x-trilium-auto">if (1 &gt; 2) {
-    console.log("Error in the matrix");
-}</code></pre>
+        <h2>Developer-specific formatting</h2>
+        <p>The following features are supported:</p>
+        <ul>
+          <li>Inline code</li>
+          <li><a class="reference-link" href="Text/Developer-specific%20formatting/Code%20blocks.html">Code blocks</a>
+          </li>
+        </ul>
+        <p>See&nbsp;<a class="reference-link" href="Text/Developer-specific%20formatting.html">Developer-specific formatting</a>&nbsp;for
+          more information.</p>
         <h3>Headings</h3>
         <p>Create headings by starting a line with <code>##</code> for heading 2, <code>###</code> for
           heading 3, and so on up to heading 6. Note that <code>#</code> is reserved

src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Text/Developer-specific formatting.html

@@ -0,0 +1,60 @@
+<html>
+  
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="../../../style.css">
+    <base target="_parent">
+    <title data-trilium-title>Developer-specific formatting</title>
+  </head>
+  
+  <body>
+    <div class="content">
+       <h1 data-trilium-h1>Developer-specific formatting</h1>
+
+      <div class="ck-content">
+        <h3>Inline code</h3>
+        <p>Inline code formats text using a monospace font to indicate technical
+          content in a sentence such as code, paths, etc.</p>
+        <figure class="image">
+          <img style="aspect-ratio:829/191;" src="4_Developer-specific formatt.png"
+          width="829" height="191">
+          <figcaption>Example of inline code being used to illustrate file system paths as well
+            as shell commands (<code>git</code> in this case).</figcaption>
+        </figure>
+        <p>To insert an inline code:</p>
+        <ul>
+          <li>Via the&nbsp;<a class="reference-link" href="Formatting%20toolbar.html">Formatting toolbar</a>,
+            look for the
+            <img src="2_Developer-specific formatt.png" width="15" height="9">button.</li>
+          <li>Type `code` where <code>code</code> is the desired text to be automatically
+            formatted as inline code.</li>
+        </ul>
+        <h3>Code blocks</h3>
+        <p>Code blocks display a snippet of code as a dedicated block:</p>
+        <figure
+        class="image">
+          <img style="aspect-ratio:1078/307;" src="3_Developer-specific formatt.png"
+          width="1078" height="307">
+          <figcaption>A code block with JavaScript syntax highlight enabled.</figcaption>
+          </figure>
+          <p>Note that these are not meant for very large portions of code. Use the
+            dedicated&nbsp;<a class="reference-link" href="../Code.html">Code</a>&nbsp;note
+            type instead.</p>
+          <p>See the dedicated documentation for more information:&nbsp;<a class="reference-link"
+            href="Developer-specific%20formatting/Code%20blocks.html">Code blocks</a>
+          </p>
+          <h3>Keyboard shortcuts</h3>
+          <p>This allows marking a portion of text as a shortcut key.</p>
+          <p>
+            <img src="Developer-specific formatt.png">
+          </p>
+          <p>To apply this style, press the
+            <img src="5_Developer-specific formatt.png">button in
+            <img src="1_Developer-specific formatt.png">group from the&nbsp;<a href="Formatting%20toolbar.html">Formatting toolbar</a>.
+            On the floating toolbar, the buttons appear when selecting a text.</p>
+      </div>
+    </div>
+  </body>
+
+</html>