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

Better PDF export mechanism (part I) (#7399)

Browse Source
This commit is contained in:
Elian Doran
2025-10-20 14:37:35 +03:00
committed by GitHub
parent 0ea7e9fc04 66896d6457
commit 44c379fce1
42 changed files with 882 additions and 627 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/server/src/assets/doc_notes/en/User Guide/!!!meta.json generated vendored
View File

File diff suppressed because one or more lines are too long

4
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Advanced Usage/Attributes/Labels.html generated vendored
View File

@@ -302,7 +302,9 @@
<td><code>color</code>
</td>
<td>defines color of the note in note tree, links etc. Use any valid CSS color
value like 'red' or #a13d5f</td>
value like 'red' or #a13d5f
<br>Note: this color may be automatically adjusted when displayed to ensure
sufficient contrast with the background.</td>
</tr>
<tr>
<td><code>keyboardShortcut</code>

0
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/Notes/1_Export as PDF_image.png → apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/Notes/1_Printing & Exporting as PD.png generated vendored
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 150 B

After

Width:  |  Height:  |  Size: 150 B

42
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/Notes/Export as PDF.html generated vendored
View File

@@ -1,42 +0,0 @@
<p>
<img src="Export as PDF_image.png">
</p>
<p>Screenshot of the note contextual menu indicating the “Export as PDF”
option.</p>
<p>On the desktop application of Trilium it is possible to export a note
as PDF. On the server or PWA (mobile), the option is not available due
to technical constraints and it will be hidden.</p>
<p>To print a note, select the
<img src="1_Export as PDF_image.png">button to the right of the note and select <em>Export as PDF</em>.</p>
<p>Afterwards you will be prompted to select where to save the PDF file.</p>
<h2>Automatic opening of the file</h2>
<p>When the PDF is exported, it is automatically opened with the system default
application for easy preview.</p>
<p>Note that if you are using Linux with the GNOME desktop environment, sometimes
the default application might seem incorrect (such as opening in GIMP).
This is because it uses Gnome's “Recommended applications” list.</p>
<p>To solve this, you can change the recommended application for PDFs via
this command line. First, list the available applications via <code>gio mime application/pdf</code> and
then set the desired one. For example to use GNOME's Evince:</p><pre><code class="language-text-x-trilium-auto">gio mime application/pdf</code></pre>
<h2>Reporting issues with the rendering</h2>
<p>Should you encounter any visual issues in the resulting PDF file (e.g.
a table does not fit properly, there is cut off text, etc.) feel free to
<a
href="#root/_help_wy8So3yZZlH9">report the issue</a>. In this case, it's best to offer a sample note (click
on the
<img src="1_Export as PDF_image.png">button, select Export note → This note and all of its descendants → HTML
in ZIP archive). Make sure not to accidentally leak any personal information.</p>
<h2>Landscape mode</h2>
<p>When exporting to PDF, there are no customizable settings such as page
orientation, size, etc. However, it is possible to specify a given note
to be printed as a PDF in landscape mode by adding the <code>#printLandscape</code> attribute
to it (see&nbsp;<a class="reference-link" href="#root/_help_zEY4DaJG4YT5">Attributes</a>).</p>
<h2>Page size</h2>
<p>By default, the resulting PDF will be in Letter format. It is possible
to adjust it to another page size via the <code>#printPageSize</code> attribute,
with one of the following values: <code>A0</code>, <code>A1</code>, <code>A2</code>, <code>A3</code>, <code>A4</code>, <code>A5</code>, <code>A6</code>, <code>Legal</code>, <code>Letter</code>, <code>Tabloid</code>, <code>Ledger</code>.</p>
<h2>Keyboard shortcut</h2>
<p>It's possible to trigger the export to PDF from the keyboard by going
to&nbsp;<em>Keyboard shortcuts</em>&nbsp;in&nbsp;<a class="reference-link"
href="#root/_help_4TIF1oA4VQRO">Options</a>&nbsp;and assigning a key combination
for the <code>exportAsPdf</code> action.</p>

0
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/Notes/Export as PDF_image.png → apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/Notes/Printing & Exporting as PD.png generated vendored
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 87 KiB

After

Width:  |  Height:  |  Size: 87 KiB

111
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/Notes/Printing & Exporting as PDF.html generated vendored Normal file
View File

@@ -0,0 +1,111 @@
<figure class="image">
<img style="aspect-ratio:951/432;" src="Printing & Exporting as PD.png"
width="951" height="432">
<figcaption>Screenshot of the note contextual menu indicating the “Export as PDF”
option.</figcaption>
</figure>
<h2>Printing</h2>
<p>This feature allows printing of notes. It works on both the desktop client,
but also on the web.</p>
<p>Note that not all note types are printable as of now. We do plan to increase
the coverage of supported note types in the future.</p>
<p>To print a note, select the
<img src="1_Printing & Exporting as PD.png"
width="29" height="31">button to the right of the note and select <em>Print note</em>. Depending
on the size and type of the note, this can take up to a few seconds. Afterwards
you will be redirected to the system/browser printing dialog.</p>
<aside
class="admonition note">
<p>Printing and exporting as PDF are not perfect. Due to technical limitations,
and sometimes even browser glitches the text might appear cut off in some
circumstances.&nbsp;</p>
</aside>
<h2>Reporting issues with the rendering</h2>
<p>Should you encounter any visual issues in the resulting PDF file (e.g.
a table does not fit properly, there is cut off text, etc.) feel free to
<a
href="#root/_help_wy8So3yZZlH9">report the issue</a>. In this case, it's best to offer a sample note (click
on the
<img src="1_Printing & Exporting as PD.png" width="29" height="31">button, select Export note → This note and all of its descendants → HTML
in ZIP archive). Make sure not to accidentally leak any personal information.</p>
<p>Consider adjusting font sizes and using <a href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/iPIMuisry3hd/_help_CohkqWQC1iBv">page breaks</a> to
work around the layout.</p>
<h2>Exporting as PDF</h2>
<p>On the desktop application of Trilium it is possible to export a note
as PDF. On the server or PWA (mobile), the option is not available due
to technical constraints and it will be hidden.</p>
<p>To print a note, select the
<img src="1_Printing & Exporting as PD.png">button to the right of the note and select <em>Export as PDF</em>. Afterwards
you will be prompted to select where to save the PDF file.</p>
<h3>Automatic opening of the file</h3>
<p>When the PDF is exported, it is automatically opened with the system default
application for easy preview.</p>
<p>Note that if you are using Linux with the GNOME desktop environment, sometimes
the default application might seem incorrect (such as opening in GIMP).
This is because it uses Gnome's “Recommended applications” list.</p>
<p>To solve this, you can change the recommended application for PDFs via
this command line. First, list the available applications via <code>gio mime application/pdf</code> and
then set the desired one. For example to use GNOME's Evince:</p><pre><code class="language-text-x-trilium-auto">gio mime application/pdf</code></pre>
<h3>Customizing exporting as PDF</h3>
<p>When exporting to PDF, there are no customizable settings such as page
orientation, size. However, there are a few&nbsp;<a class="reference-link"
href="#root/pOsGYCXsbNQG/tC7s2alapj8V/_help_zEY4DaJG4YT5">Attributes</a>&nbsp;to
adjust some of the settings:</p>
<ul>
<li data-list-item-id="e76a765fe309058890d4f4d3e63bca578">To print in landscape mode instead of portrait (useful for big diagrams
or slides), add <code>#printLandscape</code>.</li>
<li data-list-item-id="e78123a3a12954d7c9f520f4e75ed375d">By default, the resulting PDF will be in Letter format. It is possible
to adjust it to another page size via the <code>#printPageSize</code> attribute,
with one of the following values: <code>A0</code>, <code>A1</code>, <code>A2</code>, <code>A3</code>, <code>A4</code>, <code>A5</code>, <code>A6</code>, <code>Legal</code>, <code>Letter</code>, <code>Tabloid</code>, <code>Ledger</code>.</li>
</ul>
<aside class="admonition note">
<p>These options have no effect when used with the printing feature, since
the user-defined settings are used instead.</p>
</aside>
<h2>Keyboard shortcut</h2>
<p>It's possible to trigger both printing and export as PDF from the keyboard
by going to&nbsp;<em>Keyboard shortcuts</em>&nbsp;in&nbsp;<a class="reference-link"
href="#root/_help_4TIF1oA4VQRO">Options</a>&nbsp;and assigning a key combination
for:</p>
<ul>
<li class="ck-list-marker-italic" data-list-item-id="e52b4441f2a3af7773585b19c8f796c8d"><em>Print Active Note</em>
</li>
<li class="ck-list-marker-italic" data-list-item-id="e40e1f6f480c7857100f64c2f63e062fb"><em>Export Active Note as PDF</em>
</li>
</ul>
<h2>Constraints &amp; limitations</h2>
<p>Not all&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/_help_KSZ04uQ2D1St">Note Types</a>&nbsp;are
supported when printing, in which case the <em>Print</em> and <em>Export as PDF</em> options
will be disabled.</p>
<ul>
<li data-list-item-id="e448a833da1bb1643181c72779382d1b6">For&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_6f9hih2hXXZk">Code</a>&nbsp;notes:
<ul>
<li data-list-item-id="e6b699104a21930de7c2618123d0d5750">Line numbers are not printed.</li>
<li data-list-item-id="e342cba939534f0989c9620520c7b87a3">Syntax highlighting is enabled, however a default theme (Visual Studio)
is enforced.</li>
</ul>
</li>
<li data-list-item-id="ea23948a21d6ad2a01d70dfbdfa9bd62f">For&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_GTwFsgaA0lCt">Collections</a>:
<ul>
<li data-list-item-id="e387ee52424d8b78fd61c3a1e0d395d3e">Only&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/GTwFsgaA0lCt/_help_zP3PMqaG71Ct">Presentation View</a>&nbsp;is
currently supported.</li>
<li data-list-item-id="e94fa0cced6a7668c96cf7513557f2906">We plan to add support for all the collection types at some point.</li>
</ul>
</li>
<li data-list-item-id="e8b17c931e05f9d579767536088a108da">Using&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/pKK96zzmvBGf/_help_AlhDUqhENtH7">Custom app-wide CSS</a>&nbsp;for
printing is not longer supported, due to a more stable but isolated mechanism.
<ul>
<li data-list-item-id="eae91219e277cc2366d86d47291ed9cec">We plan to introduce a new mechanism specifically for a print CSS.</li>
</ul>
</li>
</ul>
<h2>Under the hood</h2>
<p>Both printing and exporting as PDF use the same mechanism: a note is rendered
individually in a separate webpage that is then sent to the browser or
the Electron application either for printing or exporting as PDF.</p>
<p>The webpage that renders a single note can actually be accessed in a web
browser. For example <code>http://localhost:8080/#root/WWRGzqHUfRln/RRZsE9Al8AIZ?ntxId=0o4fzk</code> becomes <code>http://localhost:8080/?print#root/WWRGzqHUfRln/RRZsE9Al8AIZ</code>.</p>
<p>Accessing the print note in a web browser allows for easy debugging to
understand why a particular note doesn't render well. The mechanism for
rendering is similar to the one used in&nbsp;<a class="reference-link"
href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/BFs8mudNFgCS/_help_0ESUbbAxVnoK">Note List</a>.</p>

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

@@ -6,33 +6,31 @@
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
<li>Each slide is a child note of the collection.</li>
<li>The order of the child notes determines the order of the slides.</li>
<li>Unlike traditional presentation software, slides can be laid out both
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>
<li>Direct children will be laid out horizontally and the children of those
will be laid out vertically. Children deeper than two levels of nesting
are ignored.</li>
</ul>
<h2>Interaction and navigation</h2>
<p>In the floating buttons section (top-right):</p>
<ul>
<li 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
<li>Edit button to go to the corresponding note of the current slide.</li>
<li>Press Overview button (or the <kbd>O</kbd> key) to show a birds-eye view
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>
<li>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
<li>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>)
<li>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
<li>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
<li>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>
@@ -42,15 +40,15 @@
<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,
<li>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
skip entire chapters/related slides.</li>
<li>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
<li>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
<li>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%;">
@@ -62,19 +60,19 @@
slides.</p>
<p>In the following example, the note structure is as follows:</p>
<ul>
<li data-list-item-id="e4d5d440ec56a9c81b7c8323ab142478d">Presentation collection
<li>Presentation collection
<ul>
<li data-list-item-id="e255021a351d18e2792c15ab2b80c0a57">Trilium Notes (demo page)</li>
<li data-list-item-id="ef6f95ec54572aa247a13e8104a2db0c3">“Introduction” slide
<li>Trilium Notes (demo page)</li>
<li>“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>
<li>“The challenge of personal knowledge management”</li>
<li>“Note-taking structures”</li>
</ul>
</li>
<li data-list-item-id="e3bbbe33c8d7a18cb17cd0de29b6eff05">“Demo &amp; Feature highlights” slide
<li>“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>
<li>“Really fast installation process”</li>
<li>Video slide</li>
</ul>
</li>
</ul>
@@ -83,56 +81,54 @@
<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
<li>The theme of the entire presentation to one of the predefined themes by
going to the&nbsp;<a class="reference-link" href="#root/_help_BlN9DFI679QC">Ribbon</a>&nbsp;and
looking for the <em>Collection Properties</em> tab.</li>
<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>
<li>It's currently not possible to create custom themes, although it is planned.</li>
<li>Note that it is note possible to alter the CSS via&nbsp;<a class="reference-link"
href="#root/_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
<li>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
href="#root/_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
<li>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
<li>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;
<li>Try using more than just text notes, the presentation uses the same mechanism
as <a href="#root/_help_R9pX4DGra2Vt">shared notes</a> and&nbsp;<a class="reference-link"
href="#root/_help_0ESUbbAxVnoK">Note List</a>&nbsp;so it should be able
to display&nbsp;<a class="reference-link" href="#root/_help_s1aBHPd79XYj">Mermaid Diagrams</a>,&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">---
class="reference-link" href="#root/_help_grjYqerjn243">Canvas</a>&nbsp;and&nbsp;<a class="reference-link" href="#root/_help_gBbsAeiuUxI5">Mind Map</a>&nbsp;in
full-screen (without the interactivity).
<ul>
<li>
<p>Consider using a transparent background for&nbsp;<a class="reference-link"
href="#root/_help_grjYqerjn243">Canvas</a>, if the slides have a custom
background (go to the hamburger menu in the Canvas, press the button select
a custom color and write <code>transparent</code>).</p>
</li>
<li>
<p>For&nbsp;<a class="reference-link" href="#root/_help_s1aBHPd79XYj">Mermaid Diagrams</a>,
some of them have a predefined background which can be changed via the
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>
</li>
</ul>
<h2>Under the hood</h2>
<p>The Presentation view uses <a href="https://revealjs.com/">Reveal.js</a> to

76
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Theme development/Custom app-wide CSS.html generated vendored
View File

@@ -1,38 +1,37 @@
<p>It is possible to provide a CSS file to be used regardless of the theme
set by the user.</p>
<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>
<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;&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>
<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
@@ -54,10 +53,9 @@
workspaces.</p>
<p>To do so:</p>
<ol>
<li data-list-item-id="eaca1b6777262e20c38dae5e2c2ef8496">In the note with <code>#workspace</code>, add an inheritable attribute <code>#cssClass(inheritable)</code> with
<li>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
data-list-item-id="e01663cf2128c10a0cd0cab1bb27fd44d">Anywhere in the note structure, create a CSS note with <code>#appCss</code>.</li>
<li>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;
@@ -73,8 +71,8 @@
width="641" height="630">
</figure>
<ol>
<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
<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
the desired values.</li>
</ol><pre><code class="language-text-x-trilium-auto">.note-split.my-workspace .scrolling-container:after {
position: fixed;
@@ -94,5 +92,5 @@
<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>
<li>The slides in a&nbsp;<a class="reference-link" href="#root/_help_zP3PMqaG71Ct">Presentation View</a>.</li>
</ul>

3
apps/server/src/assets/translations/en/server.json
View File

@@ -373,7 +373,8 @@
"export_filter": "PDF Document (*.pdf)",
"unable-to-export-message": "The current note could not be exported as a PDF.",
"unable-to-export-title": "Unable to export as PDF",
"unable-to-save-message": "The selected file could not be written to. Try again or select another destination."
"unable-to-save-message": "The selected file could not be written to. Try again or select another destination.",
"unable-to-print": "Unable to print the note"
},
"tray": {
"tooltip": "Trilium Notes",

2
apps/server/src/assets/views/partials/windowGlobal.ejs
View File

@@ -3,7 +3,7 @@
window.glob = {
device: "<%= device %>",
baseApiUrl: 'api/',
baseApiUrl: "<%= baseApiUrl %>",
activeDialog: null,
maxEntityChangeIdAtLoad: <%= maxEntityChangeIdAtLoad %>,
maxEntityChangeSyncIdAtLoad: <%= maxEntityChangeSyncIdAtLoad %>,

32
apps/server/src/assets/views/print.ejs Normal file
View File

@@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="favicon.ico">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover" />
<link rel="manifest" crossorigin="use-credentials" href="../manifest.webmanifest">
<title>Trilium Notes</title>
<script src="../<%= appPath %>/runtime.js" crossorigin type="module"></script>
</head>
<body
id="trilium-print"
lang="<%= currentLocale.id %>" dir="<%= currentLocale.rtl ? 'rtl' : 'ltr' %>"
>
<noscript><%= t("javascript-required") %></noscript>
<script>
// hide body to reduce flickering on the startup. This is done through JS and not CSS to not hide <noscript>
document.getElementsByTagName("body")[0].style.display = "none";
</script>
<%- include("./partials/windowGlobal.ejs", locals) %>
<!-- Required for correct loading of scripts in Electron -->
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
<script src="../<%= appPath %>/print.js" crossorigin type="module"></script>
</body>
</html>

16
apps/server/src/routes/index.ts
View File

@@ -16,9 +16,11 @@ import type { Request, Response } from "express";
import type BNote from "../becca/entities/bnote.js";
import { getCurrentLocale } from "../services/i18n.js";
type View = "desktop" | "mobile" | "print";
function index(req: Request, res: Response) {
const options = optionService.getOptionMap();
const view = getView(req);
const options = optionService.getOptionMap();
//'overwrite' set to false (default) => the existing token will be re-used and validated
//'validateOnReuse' set to false => if validation fails, generate a new token instead of throwing an error
@@ -57,13 +59,19 @@ function index(req: Request, res: Response) {
isProtectedSessionAvailable: protectedSessionService.isProtectedSessionAvailable(),
maxContentWidth: Math.max(640, parseInt(options.maxContentWidth)),
triliumVersion: packageJson.version,
assetPath: assetPath,
appPath: appPath,
assetPath,
appPath,
baseApiUrl: 'api/',
currentLocale: getCurrentLocale()
});
}
function getView(req: Request): "desktop" | "mobile" {
function getView(req: Request): View {
// Special override for printing.
if ("print" in req.query) {
return "print";
}
// Electron always uses the desktop view.
if (isElectron) {
return "desktop";

2
apps/server/src/routes/routes.ts
View File

@@ -378,8 +378,6 @@ function register(app: express.Application) {
asyncApiRoute(PST, "/api/llm/chat/:chatNoteId/messages", llmRoute.sendMessage);
asyncApiRoute(PST, "/api/llm/chat/:chatNoteId/messages/stream", llmRoute.streamMessage);
// LLM provider endpoints - moved under /api/llm/providers hierarchy
asyncApiRoute(GET, "/api/llm/providers/ollama/models", ollamaRoute.listModels);
asyncApiRoute(GET, "/api/llm/providers/openai/models", openaiRoute.listModels);

137
apps/server/src/services/window.ts
View File

@@ -8,10 +8,12 @@ import sqlInit from "./sql_init.js";
import cls from "./cls.js";
import keyboardActionsService from "./keyboard_actions.js";
import electron from "electron";
import type { App, BrowserWindowConstructorOptions, BrowserWindow, WebContents } from "electron";
import type { App, BrowserWindowConstructorOptions, BrowserWindow, WebContents, IpcMainEvent } from "electron";
import { formatDownloadTitle, isDev, isMac, isWindows } from "./utils.js";
import { t } from "i18next";
import { RESOURCE_DIR } from "./resource_dir.js";
import { PerformanceObserverEntryList } from "perf_hooks";
import options from "./options.js";
// Prevent the window being garbage collected
let mainWindow: BrowserWindow | null;
@@ -67,61 +69,102 @@ electron.ipcMain.on("create-extra-window", (event, arg) => {
createExtraWindow(arg.extraWindowHash);
});
interface PrintOpts {
notePath: string;
printToPdf: boolean;
}
interface ExportAsPdfOpts {
notePath: string;
title: string;
landscape: boolean;
pageSize: "A0" | "A1" | "A2" | "A3" | "A4" | "A5" | "A6" | "Legal" | "Letter" | "Tabloid" | "Ledger";
}
electron.ipcMain.on("export-as-pdf", async (e, opts: ExportAsPdfOpts) => {
const browserWindow = electron.BrowserWindow.fromWebContents(e.sender);
if (!browserWindow) {
return;
}
const filePath = electron.dialog.showSaveDialogSync(browserWindow, {
defaultPath: formatDownloadTitle(opts.title, "file", "application/pdf"),
filters: [
{
name: t("pdf.export_filter"),
extensions: ["pdf"]
}
]
electron.ipcMain.on("print-note", async (e, { notePath }: PrintOpts) => {
const browserWindow = await getBrowserWindowForPrinting(e, notePath);
browserWindow.webContents.print({}, (success, failureReason) => {
if (!success) {
electron.dialog.showErrorBox(t("pdf.unable-to-print"), failureReason);
}
e.sender.send("print-done");
browserWindow.destroy();
});
if (!filePath) {
return;
}
let buffer: Buffer;
try {
buffer = await browserWindow.webContents.printToPDF({
landscape: opts.landscape,
pageSize: opts.pageSize,
generateDocumentOutline: true,
generateTaggedPDF: true,
printBackground: true,
displayHeaderFooter: true,
headerTemplate: `<div></div>`,
footerTemplate: `
<div class="pageNumber" style="width: 100%; text-align: center; font-size: 10pt;">
</div>
`
});
} catch (e) {
electron.dialog.showErrorBox(t("pdf.unable-to-export-title"), t("pdf.unable-to-export-message"));
return;
}
try {
await fs.writeFile(filePath, buffer);
} catch (e) {
electron.dialog.showErrorBox(t("pdf.unable-to-export-title"), t("pdf.unable-to-save-message"));
return;
}
electron.shell.openPath(filePath);
});
electron.ipcMain.on("export-as-pdf", async (e, { title, notePath, landscape, pageSize }: ExportAsPdfOpts) => {
const browserWindow = await getBrowserWindowForPrinting(e, notePath);
async function print() {
const filePath = electron.dialog.showSaveDialogSync(browserWindow, {
defaultPath: formatDownloadTitle(title, "file", "application/pdf"),
filters: [
{
name: t("pdf.export_filter"),
extensions: ["pdf"]
}
]
});
if (!filePath) return;
let buffer: Buffer;
try {
buffer = await browserWindow.webContents.printToPDF({
landscape,
pageSize,
generateDocumentOutline: true,
generateTaggedPDF: true,
printBackground: true,
displayHeaderFooter: true,
headerTemplate: `<div></div>`,
footerTemplate: `
<div class="pageNumber" style="width: 100%; text-align: center; font-size: 10pt;">
</div>
`
});
} catch (e) {
electron.dialog.showErrorBox(t("pdf.unable-to-export-title"), t("pdf.unable-to-export-message"));
return;
}
try {
await fs.writeFile(filePath, buffer);
} catch (e) {
electron.dialog.showErrorBox(t("pdf.unable-to-export-title"), t("pdf.unable-to-save-message"));
return;
}
electron.shell.openPath(filePath);
}
try {
await print();
} finally {
e.sender.send("print-done");
browserWindow.destroy();
}
});
async function getBrowserWindowForPrinting(e: IpcMainEvent, notePath: string) {
const browserWindow = new electron.BrowserWindow({
show: false,
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
offscreen: true,
session: e.sender.session
},
});
await browserWindow.loadURL(`http://127.0.0.1:${port}/?print#${notePath}`);
await browserWindow.webContents.executeJavaScript(`
new Promise(resolve => {
if (window._noteReady) return resolve();
window.addEventListener("note-ready", () => resolve());
});
`);
return browserWindow;
}
async function createMainWindow(app: App) {
if ("setUserTasks" in app) {
app.setUserTasks([