docs(user): document presentation view

apps/server/src/assets/doc_notes/en/User Guide/User Guide/Advanced Usage/ETAPI (REST API).html

@@ -5,7 +5,7 @@
 <p>As an alternative to calling the API directly, there are client libraries
   to simplify this</p>
 <ul>
-  <li data-list-item-id="ee7b0cc154e457f4bd579cec38dd49695"><a href="https://github.com/Nriver/trilium-py">trilium-py</a>, you can
+  <li><a href="https://github.com/Nriver/trilium-py">trilium-py</a>, you can
     use Python to communicate with Trilium.</li>
 </ul>
 <h2>Obtaining a token</h2>
@@ -23,10 +23,10 @@ Authorization: ETAPITOKEN</code></pre>
 <p>Since v0.56 you can also use basic auth format:</p><pre><code class="language-text-x-trilium-auto">GET https://myserver.com/etapi/app-info
 Authorization: Basic BATOKEN</code></pre>
 <ul>
-  <li data-list-item-id="e86aabb1609179bc22edcb308bb84ebf8">Where <code>BATOKEN = BASE64(username + ':' + password)</code> - this is
+  <li>Where <code>BATOKEN = BASE64(username + ':' + password)</code> - this is
     a standard Basic Auth serialization</li>
-  <li data-list-item-id="e5837f08379443a09a7ea8a4237bf2909">Where <code>username</code> is "etapi"</li>
-  <li data-list-item-id="e137dc99a1b1c5a308bc5dc4b450cadda">And <code>password</code> is the generated ETAPI token described above.</li>
+  <li>Where <code>username</code> is "etapi"</li>
+  <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>
@@ -42,14 +42,13 @@ 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 data-list-item-id="e9707bf9bba8c058b72a64034deaaf5e1"><code>TOKEN</code> with your ETAPI token.</li>
-  <li data-list-item-id="e479cb73c11d13a63d7d54cb6f35c3cd7"><code>SERVER</code> with the correct protocol, host name and port to your
+  <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 data-list-item-id="e51a5af5ecb3055bd3d6c93bbc9cde2af"><code>NOTE_ID</code> with an existing note ID to download.</li>
+  <li><code>NOTE_ID</code> with an existing note ID to download.</li>
 </ul>
 <p>As another example, to obtain a .zip export of a note and place it in
   a directory called <code>out</code>, simply replace the last statement in
   the script with:</p><pre><code class="language-text-x-trilium-auto">curl -H "Authorization: $TOKEN" \
 	-X GET "$SERVER/etapi/notes/$NOTE_ID/export" \
-
     --output "out/$NOTE_ID.zip"</code></pre>

apps/server/src/assets/doc_notes/en/User Guide/User Guide/Installation & Setup/Desktop Installation/Using the desktop application .html

@@ -1,4 +1,4 @@
-<p>Sometimes, setting up a <a href="#root/pOsGYCXsbNQG/Otzi9La2YAUX/_help_WOcw2SLH6tbX">dedicated server installation</a> is
+<p>Sometimes, setting up a <a href="#root/_help_WOcw2SLH6tbX">dedicated server installation</a> is
   not feasible. The desktop application ships with a fully functional server
   instance by default.</p>
 <p>You can access this web interface locally by navigating to <a href="http://localhost:37840/login">http://localhost:37840/login</a>.</p>
@@ -12,8 +12,8 @@ class="admonition note">
   <h2>Mobile interface</h2>
   <p>By default, this will display the desktop user interface, even on mobile.
     To switch to the mobile version, simply go to the&nbsp;<a class="reference-link"
-    href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_x3i7MxGccDuM">Global menu</a>&nbsp;and
-    select “Switch to the mobile version”.</p>
+    href="#root/_help_x3i7MxGccDuM">Global menu</a>&nbsp;and select “Switch
+    to the mobile version”.</p>
   <h2>Allowing the port externally on Windows with Windows Defender Firewall</h2>
   <p>First, find out the IP of your desktop server by running <code>ipconfig</code> in
     your local terminal. Then try accessing <code>http://&lt;ip&gt;:37840/login</code> on
@@ -21,15 +21,15 @@ class="admonition note">
     by your operating system's firewall.</p>
   <p>If you use Windows Defender Firewall:</p>
   <ol>
-    <li data-list-item-id="e181018d4ed9d5f6ed6fac8dfcfcd9fdc">Go to Windows's start menu and look for “Windows Defender Firewall with
+    <li>Go to Windows's start menu and look for “Windows Defender Firewall with
       Advanced Security”.</li>
-    <li data-list-item-id="ed0adc669e5aab708cb8c98bdfbc50d5a">Go to “Inbound Rules” on the left tree, and select “New Rule” in the “Actions”
+    <li>Go to “Inbound Rules” on the left tree, and select “New Rule” in the “Actions”
       sidebar on the right.</li>
-    <li data-list-item-id="edb48ee7c3e7b80b78e553b30ef71d01f">Select “Port” and press “Next”.</li>
-    <li data-list-item-id="ecfaef8d3f67901bbbf0d3f5c1edca797">Type in <code>37840</code> in the “Specific local ports” section and then
+    <li>Select “Port” and press “Next”.</li>
+    <li>Type in <code>37840</code> in the “Specific local ports” section and then
       press “Next”.</li>
-    <li data-list-item-id="e0fd590158c462104c099cac4971daee9">Leave “Allow the connection” checked and press “Next”.</li>
-    <li data-list-item-id="edd8c39fed27bb27e02e525a48c17d4a0">Configure the networks to apply to (check all if unsure) and then press
+    <li>Leave “Allow the connection” checked and press “Next”.</li>
+    <li>Configure the networks to apply to (check all if unsure) and then press
       “Next”.</li>
-    <li data-list-item-id="eade1aa266a382975c4b59106e2632cb1">Add an appropriate name to the rule (e.g. “Trilium Notes”) and press “Finish”.</li>
+    <li>Add an appropriate name to the rule (e.g. “Trilium Notes”) and press “Finish”.</li>
   </ol>

apps/server/src/assets/doc_notes/en/User Guide/User Guide/Installation & Setup/Mobile Frontend.html

@@ -7,21 +7,21 @@
 <p>Note that this is not an Android/iOS app, this is just mobile friendly
   web page served on the <a href="#root/_help_WOcw2SLH6tbX">server edition</a>.</p>
 <h2>Testing via the desktop application</h2>
-<p>If you are running Trilium without a dedicated <a href="#root/pOsGYCXsbNQG/Otzi9La2YAUX/_help_WOcw2SLH6tbX">server installation</a>,
+<p>If you are running Trilium without a dedicated <a href="#root/_help_WOcw2SLH6tbX">server installation</a>,
   you can still test the mobile application using the desktop application.
-  For more information, see&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/Otzi9La2YAUX/poXkQfguuA0U/_help_nRqcgfTb97uV">Using the desktop application as a server</a>.
+  For more information, see&nbsp;<a class="reference-link" href="#root/_help_nRqcgfTb97uV">Using the desktop application as a server</a>.
   To access it go to <code>http://&lt;ip&gt;:37840/login?mobile</code> .</p>
 <h2>Limitations</h2>
 <p>Mobile frontend provides only some of the features of the full desktop
   frontend:</p>
 <ul>
-  <li data-list-item-id="e738e54a9aff5f827b1321f2afb8cc89f">it is possible to browse the whole note tree, read and edit all types
+  <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 data-list-item-id="e0e3748ecf5c55000c2a220ae4daa13fa">reading and editing <a href="#root/_help_bwg0e8ewQMak">protected notes</a> is
+  <li>reading and editing <a href="#root/_help_bwg0e8ewQMak">protected notes</a> is
     possible, but creating them is not supported</li>
-  <li data-list-item-id="edb73b27209d2628a43c131551470688b">editing options is not supported</li>
-  <li data-list-item-id="eee7c0f90ea1fbd6b79aac302ccf7ff0b">cloning notes is not supported</li>
-  <li data-list-item-id="e82466c594de53615b657260c9ead626a">uploading file attachments is not supported</li>
+  <li>editing options is not supported</li>
+  <li>cloning notes is not supported</li>
+  <li>uploading file attachments is not supported</li>
 </ul>
 <h2>Forcing mobile/desktop frontend</h2>
 <p>Trilium decides automatically whether to use mobile or desktop frontend.

apps/server/src/assets/doc_notes/en/User Guide/User Guide/Installation & Setup/Server Installation/2. Reverse proxy/Apache using Docker.html

@@ -5,18 +5,18 @@
  docker create --name trilium -t -p 127.0.0.1:8080:8080 -v ~/trilium-data:/home/node/trilium-data triliumnext/trilium:[VERSION]</code></pre>
 <h2>Configuring the Apache proxy</h2>
 <ol>
-  <li data-list-item-id="edcf1e8eaf68f39ab3b02a563d23ffca4">
+  <li>
     <p>Enable apache proxy modules</p><pre><code class="language-text-x-trilium-auto"> a2enmod ssl
  a2enmod proxy
  a2enmod proxy_http
  a2enmod proxy_wstunnel</code></pre>
   </li>
-  <li data-list-item-id="e8c39c3bc1f275514ef6048afaaf707e7">
+  <li>
     <p>Create a new let's encrypt certificate</p><pre><code class="language-text-x-trilium-auto"> sudo certbot certonly -d trilium.mydomain.com</code></pre>
     <p>Choose standalone (2) and note the location of the created certificates
       (typically /etc/letsencrypt/live/...)</p>
   </li>
-  <li data-list-item-id="ed3cea3c4b554b37a54b09e4a4a6bcfae">
+  <li>
     <p>Create a new virtual host file for apache (you may want to use <code>apachectl -S</code> to
       determine the server root location, mine is /etc/apache2)</p><pre><code class="language-text-x-trilium-auto"> sudo nano /etc/apache2/sites-available/trilium.yourdomain.com.conf</code></pre>
     <p>Paste (and customize) the following text into the configuration file</p><pre><code class="language-text-x-trilium-auto"> 
@@ -38,18 +38,22 @@
      Include /etc/letsencrypt/options-ssl-apache.conf
  </code></pre>
   </li>
-  <li data-list-item-id="e5a7a78cf9d2aa51813ce21a9ca555c4d">Enable the virtual host with <code>sudo a2ensite trilium.yourdomain.com.conf</code>
+  <li>
+    <p>Enable the virtual host with <code>sudo a2ensite trilium.yourdomain.com.conf</code>
+    </p>
   </li>
-  <li data-list-item-id="eb0b41c876bcaf500601a725234c482e9">Reload apache2 with <code>sudo systemctl reload apache2</code>
+  <li>
+    <p>Reload apache2 with <code>sudo systemctl reload apache2</code>
+    </p>
   </li>
 </ol>
 <h2>Configuring the trusted proxy</h2>
 <p>After setting up a reverse proxy, make sure to configure the&nbsp;<a class="reference-link"
-  href="#root/vcjrb3VVYPZI/_help_LLzSMXACKhUs">Trusted proxy</a>.</p>
+  href="#root/_help_LLzSMXACKhUs">Trusted proxy</a>.</p>
 <h2>Setup the systemd service to start up the server</h2>
 <p>Create and enable a systemd service to start the docker container on boot</p>
 <ol>
-  <li data-list-item-id="e45d86d557e5197177815a90dfbbbae2c">
+  <li>
     <p>Create a new empty file called <code>/lib/systemd/system/trilium.service</code> with
       the contents</p><pre><code class="language-text-x-trilium-auto"> [Unit]
  Description=Trilium Server
@@ -64,7 +68,7 @@
  [Install]
  WantedBy=local.target</code></pre>
   </li>
-  <li data-list-item-id="efec9f13630080d6bc681f447d077c43c">
+  <li>
     <p>Install, enable and start service</p><pre><code class="language-text-x-trilium-auto"> sudo systemctl daemon-reload
  sudo systemctl enable trilium.service
  sudo systemctl start trilium.service</code></pre>

apps/server/src/assets/doc_notes/en/User Guide/User Guide/Installation & Setup/Server Installation/2. Reverse proxy/Nginx.html

@@ -4,11 +4,11 @@
 sudo apt-get remove apache2</code></pre>
 <h2>Build the configuration file</h2>
 <ol>
-  <li data-list-item-id="e13e11a7fc322c075930e523e2c7aa4d9">
+  <li>
     <p>First, create the configuration file:</p><pre><code class="language-text-x-trilium-auto">cd /etc/nginx/conf.d
 vim default.conf</code></pre>
   </li>
-  <li data-list-item-id="e4f78909eb8e972cb53763daa3fc69333">
+  <li>
     <p>Fill the file with the context shown below, part of the setting show be
       changed. Then you can enjoy your web with HTTPS forced and proxy.</p><pre><code class="language-text-x-trilium-auto"># This part configures, where your Trilium server is running
 upstream trilium {
@@ -54,10 +54,9 @@ server {
   (useful e.g. if you want to serve multiple instances), update the location
   block like so:</p>
 <ul>
-  <li data-list-item-id="e332fd2d3d68c160e471759fa76c542c9">update the location with your desired path (make sure to not leave a trailing
+  <li>update the location with your desired path (make sure to not leave a trailing
     slash "/", if your <code>proxy_pass</code> does not end on a slash as well)</li>
-  <li
-  data-list-item-id="e48363402721bba6392ba9ff3f45b16b6">add the <code>proxy_cookie_path</code> directive with the same path: this
+  <li>add the <code>proxy_cookie_path</code> directive with the same path: this
     allows you to stay logged in at multiple instances at the same time.</li>
 </ul><pre><code class="language-text-x-trilium-auto">    location /trilium/instance-one {
         rewrite /trilium/instance-one/(.*) /$1  break;
@@ -73,4 +72,4 @@ server {
     }</code></pre>
 <h2>Configuring the trusted proxy</h2>
 <p>After setting up a reverse proxy, make sure to configure the&nbsp;<a class="reference-link"
-  href="#root/vcjrb3VVYPZI/_help_LLzSMXACKhUs">Trusted proxy</a>.</p>
+  href="#root/_help_LLzSMXACKhUs">Trusted proxy</a>.</p>

apps/server/src/assets/doc_notes/en/User Guide/User Guide/Installation & Setup/Server Installation/2. Reverse proxy/Trusted proxy.html

@@ -1,12 +1,11 @@
-<p>If you are running the Trilium server under a <a href="#root/pOsGYCXsbNQG/Otzi9La2YAUX/WOcw2SLH6tbX/_help_vcjrb3VVYPZI">reverse proxy</a>,
+<p>If you are running the Trilium server under a <a href="#root/_help_vcjrb3VVYPZI">reverse proxy</a>,
   it's important to configure it as a trusted proxy so that the application
   can correctly identify the real IP address of the clients (for authentication
   and rate limiting purposes).</p>
-<p>To do so, simply modify&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/tC7s2alapj8V/_help_Gzjqa934BdH4">Configuration (config.ini or environment variables)</a>&nbsp;and
+<p>To do so, simply modify&nbsp;<a class="reference-link" href="#root/_help_Gzjqa934BdH4">Configuration (config.ini or environment variables)</a>&nbsp;and
   set:</p><pre><code class="language-text-x-trilium-auto">[Network]
 trustedReverseProxy=true</code></pre>
 <p>This will use the left-most IP in the <code>X-Forwarded-For</code> header.
   Alternatively, instead of <code>true</code> use the IP address of the reverse
   proxy or Express.js shortcuts such as:</p><pre><code class="language-text-x-trilium-auto">loopback(127.0.0.1/8, ::1/128), linklocal(169.254.0.0/16, fe80::/10), uniquelocal(10.0.0.0/8, 172.16.0.0/12, 192.168.0.0/16, fc00::/7)</code></pre>
-<p>For more information, consult <a href="https://expressjs.com/en/guide/behind-proxies.html">Express behind proxies</a>.</p>
-<p>&nbsp;</p>
+<p>For more information, consult <a href="https://expressjs.com/en/guide/behind-proxies.html">Express behind proxies</a>.</p>

apps/server/src/assets/doc_notes/en/User Guide/User Guide/Installation & Setup/Server Installation/HTTPS (TLS).html

@@ -3,18 +3,18 @@
 <aside
 class="admonition tip">
   <p>While Trilium supports HTTPS on its own, it's generally a good idea to
-    use a <a href="#root/pOsGYCXsbNQG/Otzi9La2YAUX/WOcw2SLH6tbX/_help_vcjrb3VVYPZI">reverse proxy</a> instead
-    with TLS termination. You can follow a <a href="https://www.digitalocean.com/community/tutorials/how-to-secure-nginx-with-let-s-encrypt-on-ubuntu-20-04">guide like this</a> for
+    use a <a href="#root/_help_vcjrb3VVYPZI">reverse proxy</a> instead with TLS
+    termination. You can follow a <a href="https://www.digitalocean.com/community/tutorials/how-to-secure-nginx-with-let-s-encrypt-on-ubuntu-20-04">guide like this</a> for
     such setups.</p>
   </aside>
   <h2>Obtaining a TLS Certificate</h2>
   <p>You have two options for obtaining a TLS certificate:</p>
   <ul>
-    <li data-list-item-id="ef9eca3746191ab88f8ac5b9bbf0819b5"><strong>Recommended</strong>: Obtain a TLS certificate signed by a root
+    <li><strong>Recommended</strong>: Obtain a TLS certificate signed by a root
       certificate authority. For personal use, <a href="https://letsencrypt.org">Let's Encrypt</a> is
       an excellent choice. It is free, automated, and straightforward. Certbot
       can facilitate automatic TLS setup.</li>
-    <li data-list-item-id="e2f48af26cc62a095be59dccbf1e44db6">Generate a self-signed certificate. This option is not recommended due
+    <li>Generate a self-signed certificate. This option is not recommended due
       to the additional complexity of importing the certificate into all machines
       connecting to the server.</li>
   </ul>

apps/server/src/assets/doc_notes/en/User Guide/User Guide/Note Types/Collections/Presentation View.html

@@ -0,0 +1,139 @@
+<figure class="image">
+  <img style="aspect-ratio:1120/763;" src="Presentation View_image.png"
+  width="1120" height="763">
+</figure>
+<p>The Presentation view allows the creation of slideshows directly from
+  within Trilium.</p>
+<h2>How it works</h2>
+<ul>
+  <li data-list-item-id="e51cbe078fb06e2bfdfb1f2bf6fd82225">Each slide is a child note of the collection.</li>
+  <li data-list-item-id="efffc6f15623109770c57338c61b4ccb6">The order of the child notes determines the order of the slides.</li>
+  <li
+  data-list-item-id="e1a795af0f85ba888f84586be6ed2de2a">Unlike traditional presentation software, slides can be laid out both
+    horizontally and vertically (see belwo for more information).</li>
+    <li data-list-item-id="e9a2a74d8e19974766f65416100e8f877">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 data-list-item-id="ee6dd604137e6918dcfac24fe271b05bf">Edit button to go to the corresponding note of the current slide.</li>
+  <li
+  data-list-item-id="e4805f237077e9dc8ddbed2cb0b56e585">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 data-list-item-id="ee714da289257895faf87a26f6849e050">Press the “Start presentation” button to show the presentation in full-screen.</li>
+</ul>
+<p>The following keyboard shortcuts are supported:</p>
+<ul>
+  <li data-list-item-id="e5a34fbaa9c98cd91ffac8301e153a083">Press <kbd>←</kbd> and <kbd>→</kbd> (or <kbd>H</kbd> and <kbd>L</kbd>) to go
+    to the slide on the left or on the right (horizontal).</li>
+  <li data-list-item-id="e39394b060a9b767d04c466440106cbf0">Press <kbd>↑</kbd> and <kbd>↓</kbd> &nbsp;(or <kbd>K</kbd> and <kbd>J</kbd>)
+    to go to the upward or downward slide (vertical).</li>
+  <li data-list-item-id="e17441e9598f687e89a161a8afe2f703d">Press <kbd>Space</kbd> and <kbd>Shift</kbd> + <kbd>Space</kbd> or &nbsp;to go
+    to the next/previous slide in order.</li>
+  <li data-list-item-id="e4212130fc1fdc5de980e2e40feae68c2">And a few more, press <kbd>?</kbd> to display a popup with all the supported
+    keyboard combinations.</li>
+</ul>
+<h2>Vertical slides and nesting</h2>
+<p>Unlike traditional presentation software such as Microsoft PowerPoint,
+  the slides in Trilium can be laid out horizontally or vertically in order
+  to create depth or better organize the slides by topic.</p>
+<p>This horizontal/vertical organization affects transitions (especially
+  on the “slide” transition), however it is most noticeable in navigation.</p>
+<ul>
+  <li data-list-item-id="e9245eba99da45713930c1714202add31">Pressing <kbd>←</kbd> and <kbd>→</kbd> will navigate through slides horizontally,
+    thus skipping vertical notes under the current slide. This is useful to
+    skip entire chapters/related slides.&nbsp;</li>
+  <li data-list-item-id="ef9aedf69e5e2a599e9fbd0de1b89b4ad">Pressing <kbd>↑</kbd> and <kbd>↓</kbd> will navigate through the vertical
+    slides at the current level.</li>
+  <li data-list-item-id="e436fc36f74a22fdefe31e498684e23b3">Pressing <kbd>Space</kbd> and <kbd>Shift</kbd> + <kbd>Space</kbd> will go to
+    the next/previous slide in order, regardless of the direction. This is
+    generally the key combination to use when presenting.</li>
+  <li data-list-item-id="e9c5dcf5efec250876bd2c527082e76d7">The arrows on the bottom-right of the slide will also reflect this navigation
+    scheme.</li>
+</ul>
+<figure class="image image-style-align-right image_resized" style="width:55.57%;">
+  <img style="aspect-ratio:890/569;" src="1_Presentation View_image.png"
+  width="890" height="569">
+</figure>
+<p>All direct children of the collection will be laid out horizontally. If
+  a direct child also has children, those children will be placed as vertical
+  slides.</p>
+<p>In the following example, the note structure is as follows:</p>
+<ul>
+  <li data-list-item-id="e4d5d440ec56a9c81b7c8323ab142478d">Presentation collection
+    <ul>
+      <li data-list-item-id="e255021a351d18e2792c15ab2b80c0a57">Trilium Notes (demo page)</li>
+      <li data-list-item-id="ef6f95ec54572aa247a13e8104a2db0c3">“Introduction” slide
+        <ul>
+          <li data-list-item-id="eccb526d7f2dd67ac686f8e963e660a77">“The challenge of personal knowledge management”</li>
+          <li data-list-item-id="e0aca477122bb0b00ab9b3bc163436b5f">“Note-taking structures”</li>
+        </ul>
+      </li>
+      <li data-list-item-id="e3bbbe33c8d7a18cb17cd0de29b6eff05">“Demo &amp; Feature highlights” slide
+        <ul>
+          <li data-list-item-id="ebf5e3fe8a8b4400f21d5cc99b8198898">“Really fast installation process”</li>
+          <li data-list-item-id="e0b6885a0bf7f76fa2ce7801f004a2d42">Video slide</li>
+        </ul>
+      </li>
+    </ul>
+  </li>
+</ul>
+<h2>Customization</h2>
+<p>At collection level, it's possible to adjust:</p>
+<ul>
+  <li data-list-item-id="edc0a7c71ee836a225a8793e3cb1e29e8">The theme of the entire presentation to one of the predefined themes by
+    going to the&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_BlN9DFI679QC">Ribbon</a>&nbsp;and
+    looking for the <em>Collection Properties</em> tab.</li>
+  <li data-list-item-id="ed04e1bd7a997de717d8b8b8b90f19e7f">It's currently not possible to create custom themes, although it is planned.</li>
+  <li
+  data-list-item-id="edb37c7902c9e464de4555ec3ede05403">Note that it is note possible to alter the CSS via&nbsp;<a class="reference-link"
+    href="#root/pOsGYCXsbNQG/pKK96zzmvBGf/_help_AlhDUqhENtH7">Custom app-wide CSS</a>&nbsp;because
+    the slides are rendered isolated (in a shadow DOM).</li>
+</ul>
+<p>At slide level:</p>
+<ul>
+  <li data-list-item-id="eb9c23ec94dcd00a3a8539d3cd633d7df">It's possible to adjust the background color of a slide by using the
+    <a
+    href="#root/pOsGYCXsbNQG/tC7s2alapj8V/zEY4DaJG4YT5/_help_OFXdgB2nNk1F">predefined promoted attribute</a>for the color or manually setting <code>#slide:background</code> to
+      a hex color.</li>
+  <li data-list-item-id="e70af66a7d3468b7fa86badb1e2c93cc9">More complex backgrounds can be achieved via gradients. There's no UI
+    for it; it has to be set via <code>#slide:background</code> to a CSS gradient
+    definition such as: <code>linear-gradient(to bottom, #283b95, #17b2c3)</code>.</li>
+</ul>
+<h2>Tips and tricks</h2>
+<ul>
+  <li data-list-item-id="ec501025735d0063969f2a48eedb651dc">Text notes generally respect the formatting (bold, italic, foreground
+    and background colors) and font size. Code blocks and tables also work.</li>
+  <li
+  data-list-item-id="e8acd457a2660726905aee30a9325a620">Try using more than just text notes, the presentation uses the same mechanism
+    as <a href="#root/pOsGYCXsbNQG/tC7s2alapj8V/_help_R9pX4DGra2Vt">shared notes</a> and&nbsp;
+    <a
+    class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/BFs8mudNFgCS/_help_0ESUbbAxVnoK">Note List</a>&nbsp;so it should be able to display&nbsp;<a class="reference-link"
+      href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_s1aBHPd79XYj">Mermaid Diagrams</a>,&nbsp;
+      <a
+      class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_grjYqerjn243">Canvas</a>&nbsp;and&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_gBbsAeiuUxI5">Mind Map</a>&nbsp;in
+        full-screen (without the interactivity).
+        <ul>
+          <li data-list-item-id="e91cdf4823552f771ed802de7fd6330e4">Consider using a transparent background for&nbsp;<a class="reference-link"
+            href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_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>transparent</code>).</li>
+          <li
+          data-list-item-id="ebed408174c89a15dc9b0ee74d36e2e70">
+            <p>For&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_s1aBHPd79XYj">Mermaid Diagrams</a>,
+              some of them have a predefined background which can be changed via the
+              frontmatter. For example, for XY-charts:</p><pre><code class="language-text-x-trilium-auto">---
+config:
+    themeVariables:
+        xyChart:
+            backgroundColor: transparent
+---</code></pre>
+            </li>
+        </ul>
+        </li>
+</ul>
+<h2>Under the hood</h2>
+<p>The Presentation view uses <a href="https://revealjs.com/">Reveal.js</a> to
+  handle the navigation and layout of the slides.</p>

apps/server/src/assets/doc_notes/en/User Guide/User Guide/Theme development/Custom app-wide CSS.html

@@ -1,37 +1,38 @@
 <p>It is possible to provide a CSS file to be used regardless of the theme
   set by the user.</p>
-<table>
-  <thead>
-    <tr>
-      <th></th>
-      <th></th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>
-        <img src="Custom app-wide CSS_image.png">
-      </td>
-      <td>Start by creating a new note and changing the note type to CSS</td>
-    </tr>
-    <tr>
-      <td>
-        <img src="2_Custom app-wide CSS_image.png">
-      </td>
-      <td>In the ribbon, press the “Owned Attributes” section and type <code>#appCss</code>.</td>
-    </tr>
-    <tr>
-      <td>
-        <img src="3_Custom app-wide CSS_image.png">
-      </td>
-      <td>Type the desired CSS.&nbsp;
-        <br>
-        <br>Generally it's a good idea to append <code>!important</code> for the styles
-        that are being changed, in order to prevent other</td>
-    </tr>
-  </tbody>
-</table>
-
+<figure class="table">
+  <table>
+    <thead>
+      <tr>
+        <th>&nbsp;</th>
+        <th>&nbsp;</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>
+          <img src="Custom app-wide CSS_image.png">
+        </td>
+        <td>Start by creating a new note and changing the note type to CSS</td>
+      </tr>
+      <tr>
+        <td>
+          <img src="2_Custom app-wide CSS_image.png">
+        </td>
+        <td>In the ribbon, press the “Owned Attributes” section and type <code>#appCss</code>.</td>
+      </tr>
+      <tr>
+        <td>
+          <img src="3_Custom app-wide CSS_image.png">
+        </td>
+        <td>Type the desired CSS.&nbsp;&nbsp;
+          <br>
+          <br>Generally it's a good idea to append <code>!important</code> for the styles
+          that are being changed, in order to prevent other</td>
+      </tr>
+    </tbody>
+  </table>
+</figure>
 <h2>Seeing the changes</h2>
 <p>Adding a new <em>app CSS note</em> or modifying an existing one does not
   immediately apply changes. To see the changes, press Ctrl+Shift+R to refresh
@@ -53,9 +54,10 @@
   workspaces.</p>
 <p>To do so:</p>
 <ol>
-  <li>In the note with <code>#workspace</code>, add an inheritable attribute <code>#cssClass(inheritable)</code> with
+  <li data-list-item-id="eaca1b6777262e20c38dae5e2c2ef8496">In the note with <code>#workspace</code>, add an inheritable attribute <code>#cssClass(inheritable)</code> with
     a value that uniquely identifies the workspace (say <code>my-workspace</code>).</li>
-  <li>Anywhere in the note structure, create a CSS note with <code>#appCss</code>.</li>
+  <li
+  data-list-item-id="e01663cf2128c10a0cd0cab1bb27fd44d">Anywhere in the note structure, create a CSS note with <code>#appCss</code>.</li>
 </ol>
 <h4>Change the color of the icons in the&nbsp;<a class="reference-link" href="#root/_help_oPVyFC7WL2Lp">Note Tree</a></h4><pre><code class="language-text-x-trilium-auto">.fancytree-node.my-workspace.fancytree-custom-icon {
     color: #ff0000;
@@ -71,8 +73,8 @@
   width="641" height="630">
 </figure>
 <ol>
-  <li>Insert an image in any note and take the URL of the image.</li>
-  <li>Use the following CSS, adjusting the <code>background-image</code> and <code>width</code> and <code>height</code> to
+  <li data-list-item-id="e6e7ec9751bdc6f7846d10bf42c42c9b1">Insert an image in any note and take the URL of the image.</li>
+  <li data-list-item-id="edc7f77ed718593d91bda3b2983b81bed">Use the following CSS, adjusting the <code>background-image</code> and <code>width</code> and <code>height</code> to
     the desired values.</li>
 </ol><pre><code class="language-text-x-trilium-auto">.note-split.my-workspace .scrolling-container:after {
     position: fixed;
@@ -87,4 +89,10 @@
     right: 1em;
     opacity: 0.5;
     z-index: 0;
-}</code></pre>
+}</code></pre>
+<h2>Limitations</h2>
+<p>Some parts of the application can't be styled directly via custom CSS
+  because they are rendered in an isolated mode (shadow DOM), more specifically:</p>
+<ul>
+  <li data-list-item-id="e3ce2c089fe536bc42856bb1b5edc8c8e">The slides in a&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/GTwFsgaA0lCt/_help_zP3PMqaG71Ct">Presentation View</a>.</li>
+</ul>