chore(docs): minor updates

This commit is contained in:
Elian Doran 2025-02-17 19:28:54 +02:00
parent e39bee23aa
commit 7bcfb1df96
No known key found for this signature in database
16 changed files with 105 additions and 276 deletions

View File

@ -1,6 +1,6 @@
{
"formatVersion": 2,
"appVersion": "0.91.6-test-250214-024424",
"appVersion": "0.91.6-test-250217-024840",
"files": [
{
"isClone": false,
@ -11,7 +11,7 @@
"title": "User Guide",
"notePosition": 20,
"prefix": null,
"isExpanded": false,
"isExpanded": true,
"type": "text",
"mime": "text/html",
"attributes": [
@ -27,135 +27,6 @@
"attachments": [],
"dirFileName": "User Guide",
"children": [
{
"isClone": false,
"noteId": "jrai60LsOhdk",
"notePath": [
"OkOZllzB3fqN",
"jrai60LsOhdk"
],
"title": "Installation",
"notePosition": 20,
"prefix": null,
"isExpanded": false,
"type": "text",
"mime": "text/html",
"attributes": [
{
"type": "relation",
"name": "internalLink",
"value": "KPeRqBU7YSAY",
"isInheritable": false,
"position": 10
},
{
"type": "label",
"name": "hideChildrenOverview",
"value": "",
"isInheritable": false,
"position": 10
}
],
"format": "html",
"dataFileName": "Installation.html",
"attachments": [
{
"attachmentId": "Mp9RaDeLtETz",
"title": "Fedora_logo.svg",
"role": "image",
"mime": "image/svg+xml",
"position": 10,
"dataFileName": "Installation_Fedora_logo.svg"
}
],
"dirFileName": "Installation",
"children": [
{
"isClone": false,
"noteId": "KPeRqBU7YSAY",
"notePath": [
"OkOZllzB3fqN",
"jrai60LsOhdk",
"KPeRqBU7YSAY"
],
"title": "On Fedora Linux",
"notePosition": 10,
"prefix": null,
"isExpanded": false,
"type": "text",
"mime": "text/html",
"attributes": [
{
"type": "label",
"name": "iconClass",
"value": "bx bxl-tux",
"isInheritable": false,
"position": 10
}
],
"format": "html",
"dataFileName": "On Fedora Linux.html",
"attachments": [
{
"attachmentId": "YHD8kyEhgkyZ",
"title": "Screenshot From 2025-02-05 19-30-50.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "On Fedora Linux_Screenshot.png"
},
{
"attachmentId": "0CpZ5v5xUMia",
"title": "Screenshot From 2025-02-05 19-35-45.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "1_On Fedora Linux_Screenshot.png"
},
{
"attachmentId": "9u7nBYvUbXJW",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "On Fedora Linux_image.png"
},
{
"attachmentId": "ipGBq0moRvF3",
"title": "Screenshot From 2025-02-05 19-36-27.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "2_On Fedora Linux_Screenshot.png"
},
{
"attachmentId": "fa83WbDUIB4G",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "1_On Fedora Linux_image.png"
},
{
"attachmentId": "kcCWr0YXytOU",
"title": "Screenshot From 2025-02-05 19-30-30.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "3_On Fedora Linux_Screenshot.png"
},
{
"attachmentId": "YF3JZy1qz7Fq",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "2_On Fedora Linux_image.png"
}
]
}
]
},
{
"isClone": false,
"noteId": "yoAe4jV2yzbd",
@ -166,7 +37,7 @@
"title": "Features",
"notePosition": 40,
"prefix": null,
"isExpanded": true,
"isExpanded": false,
"type": "text",
"mime": "text/html",
"attributes": [],
@ -314,7 +185,7 @@
"title": "Note Types",
"notePosition": 70,
"prefix": null,
"isExpanded": true,
"isExpanded": false,
"type": "text",
"mime": "text/html",
"attributes": [],
@ -548,7 +419,7 @@
"title": "Book",
"notePosition": 30,
"prefix": null,
"isExpanded": true,
"isExpanded": false,
"type": "text",
"mime": "text/html",
"attributes": [

View File

@ -13,6 +13,37 @@
<h1 data-trilium-h1>Reference</h1>
<div class="ck-content">
<h2>Detecting mobile vs. desktop</h2>
<p>The mobile layout is different than the one on the desktop. Use <code>body.mobile</code> and <code>body.desktop</code> to
differentiate between them.</p><pre><code class="language-text-css">body.mobile #root-widget {
/* Do something on mobile */
}
body.desktop #root-widget {
/* Do something on desktop */
}</code></pre>
<p>Do note that there is also a “tablet mode” in the mobile layout. For that
particular case media queries are required:</p><pre><code class="language-text-css">@media (max-width: 991px) {
#launcher-pane {
/* Do something on mobile layout */
}
}
@media (min-width: 992px) {
#launcher-pane {
/* Do something on mobile tablet + desktop layout */
}
}</code></pre>
<h2>Detecting horizontal vs. vertical layout</h2>
<p>The user can select between vertical layout (the classical one, where
the launcher bar is on the left) and a horizontal layout (where the launcher
@ -85,14 +116,14 @@ body.electron:not(.native-titlebar) {
<h4>On macOS</h4>
<p>On macOS the semaphore window buttons are enabled by default when the
native title bar is disabled. The offset of the buttons can be adjusted
using:</p><pre><code class="language-text-x-trilium-auto">body {
using:</p><pre><code class="language-text-css">body {
--native-titlebar-darwin-x-offset: 12;
--native-titlebar-darwin-y-offset: 14 !important;
}</code></pre>
<h3>Background/transparency effects on Windows (Mica)</h3>
<p>Windows 11 offers a special background/transparency effect called Mica,
which can be enabled by themes by setting the <code>--background-material</code> variable
at <code>body</code> level:</p><pre><code class="language-text-x-trilium-auto">body.electron.platform-win32 {
at <code>body</code> level:</p><pre><code class="language-text-css">body.electron.platform-win32 {
--background-material: tabbed;
}</code></pre>
<p>The value can be either <code>tabbed</code> (especially useful for the horizontal
@ -104,12 +135,12 @@ body.electron:not(.native-titlebar) {
<p>Theme capabilities are small adjustments done through CSS variables that
can affect the layout or the visual aspect of the application.</p>
<p>In the tab bar, to display the icons of notes instead of the icon of the
workspace:</p><pre><code class="language-text-x-trilium-auto">:root {
workspace:</p><pre><code class="language-text-css">:root {
--tab-note-icons: true;
}</code></pre>
<p>When a workspace is hoisted for a given tab, it is possible to get the
background color of that workspace, for example to apply a small strip
on the tab instead of the whole background color:</p><pre><code class="language-text-x-trilium-auto">.note-tab .note-tab-wrapper {
on the tab instead of the whole background color:</p><pre><code class="language-text-css">.note-tab .note-tab-wrapper {
--tab-background-color: initial !important;
}
@ -127,6 +158,21 @@ body.electron:not(.native-titlebar) {
href="../Custom%20resource%20providers.html">Custom resource providers</a>.
Basically import a font into Trilium and assign it <code>#customResourceProvider=fonts/myfont.ttf</code> and
then import the font in CSS via <code>/custom/fonts/myfont.ttf</code>.</p>
<h2>Dark and light themes</h2>
<p>A light theme needs to have the following CSS:</p><pre><code class="language-text-css">:root {
--theme-style: light;
}</code></pre>
<p>if the theme is dark, then <code>--theme-style</code> needs to be <code>dark</code>.</p>
<p>If the theme is auto (e.g. supports both light or dark based on <code>prefers-color-scheme</code>)
it must also declare (in addition to setting <code>--theme-style</code> to
either <code>light</code> or <code>dark</code>):</p><pre><code class="language-text-css">:root {
--theme-style-auto: true;
}</code></pre>
<p>This will affect the behavior of the Electron application by informing
the operating system of the color preference (e.g. background effects will
appear correct on Windows).</p>
</div>
</div>
</body>

View File

@ -1,38 +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>Installation</title>
</head>
<body>
<div class="content">
<h1 data-trilium-h1>Installation</h1>
<div class="ck-content">
<h2>Desktop application</h2>
<figure class="table">
<table style="border-color:transparent;border-style:solid;">
<tbody>
<tr>
<td style="border-color:transparent;text-align:center;">
<figure class="image image_resized" style="width:9.91%;">
<img style="aspect-ratio:267/267;" src="Installation_Fedora_logo.svg"
width="267" height="267">
</figure>
<p><a href="Installation/On%20Fedora%20Linux.html"><span class="text-big">Fedora</span></a>
</p>
</td>
</tr>
</tbody>
</table>
</figure>
<h2>Self-hosted server</h2>
</div>
</div>
</body>
</html>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 45 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 33 KiB

View File

@ -1,82 +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>On Fedora Linux</title>
</head>
<body>
<div class="content">
<h1 data-trilium-h1>On Fedora Linux</h1>
<div class="ck-content">
<p>First, download a release from GitHub.</p>
<figure class="table" style="width:100%;">
<table class="ck-table-resized">
<colgroup>
<col style="width:3.52%;">
<col style="width:58.5%;">
<col style="width:37.98%;">
</colgroup>
<tbody>
<tr>
<th>1</th>
<td>
<figure class="image">
<img style="aspect-ratio:816/581;" src="3_On Fedora Linux_Screenshot.png"
width="816" height="581">
</figure>
</td>
<td>In your file explorer, look for the <code>.rpm</code> file of TriliumNext.</td>
</tr>
<tr>
<th>2</th>
<td>
<figure class="image">
<img style="aspect-ratio:339/219;" src="On Fedora Linux_Screenshot.png"
width="339" height="219">
</figure>
</td>
<td>Right click the file and select <i>Open With Software Install</i>.</td>
</tr>
<tr>
<th>3</th>
<td>
<figure class="image">
<img style="aspect-ratio:996/953;" src="1_On Fedora Linux_Screenshot.png"
width="996" height="953">
</figure>
</td>
<td>
<p>GNOME Software will appear. Press the
<img src="2_On Fedora Linux_image.png"
width="106" height="34">.</p>
<p>You will be asked to confirm the action by entering your password.</p>
<p>After confirmation the software will start installing.</p>
<p>Once it's done the “Install” button will turn into
<img src="1_On Fedora Linux_image.png"
width="105" height="34">.</p>
</td>
</tr>
<tr>
<th>4</th>
<td>
<figure class="image">
<img style="aspect-ratio:389/224;" src="2_On Fedora Linux_Screenshot.png"
width="389" height="224">
</figure>
</td>
<td>After installation, the application will be available in the GNOME overview
section.</td>
</tr>
</tbody>
</table>
</figure>
</div>
</div>
</body>
</html>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -1,10 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" width="267" height="267" id="svg2">
<defs id="defs5"/>
<path d="M 266.62575,133.50613 C 266.62575,59.98128 207.02222,0.37583 133.49792,0.37583 C 60.00668,0.37583 0.42639,59.93123 0.37425,133.41225 L 0.37425,236.4333 C 0.4138,253.11763 13.94545,266.62417 30.64027,266.62417 L 133.55192,266.62417 C 207.05167,266.59532 266.62575,207.01142 266.62575,133.50613" id="voice" style="fill:#294172"/>
<path d="M 77.126289,142.09756 C 77.126289,142.09756 124.97104,142.09756 124.97104,142.09756 C 124.97104,142.09756 124.97104,189.94234 124.97104,189.94234 C 124.97104,216.35263 103.53659,237.78707 77.126289,237.78707 C 50.715979,237.78707 29.28153,216.35263 29.28153,189.94234 C 29.28153,163.53203 50.715979,142.09756 77.126289,142.09756 z" id="in" style="fill:none;stroke:#3c6eb4;stroke-width:29.21"/>
<use transform="matrix(-1,0,0,-1,249.71151,284.2882)" id="finity" xlink:href="#in"/>
<path d="M 139.6074,127.52923 L 139.6074,189.87541 C 139.6074,224.37943 111.63203,252.35541 77.12679,252.35541 C 71.89185,252.35541 68.1703,251.7644 63.32444,250.49771 C 56.25849,248.64859 50.48398,242.85518 50.48158,236.1166 C 50.48158,227.97147 56.39394,222.0467 65.23187,222.0467 C 69.43824,222.0467 70.96454,222.85435 77.12679,222.85435 C 95.3184,222.85435 110.07443,208.11916 110.10634,189.92756 L 110.10634,161.27099 C 110.10634,158.70324 108.01971,156.62274 105.44767,156.62274 L 83.78246,156.61846 C 75.71034,156.61846 69.18845,150.18003 69.18845,142.0858 C 69.18414,133.94124 75.77725,127.52923 83.93653,127.52923" id="free" style="fill:#ffffff"/>
<use transform="matrix(-1,0,0,-1,249.71152,284.28821)" id="dom" xlink:href="#free"/>
<path d="M 243.65456,243.58425 C 243.65456,243.58425 243.6546,238.05286 243.6546,238.05286 L 241.12607,243.85062 C 241.12607,243.85062 238.66466,238.05286 238.66466,238.05286 L 238.66513,243.58425 L 237.24683,243.58425 L 237.24683,234.84933 L 238.73387,234.84933 C 238.73387,234.84933 241.16784,240.42984 241.16784,240.42984 L 243.56495,234.84933 L 245.07039,234.84933 L 245.07039,243.58425 L 243.65456,243.58425 z M 233.32154,236.31241 L 233.32154,243.58425 L 231.83941,243.58425 L 231.83941,236.31241 L 229.35453,236.31241 L 229.35453,234.84933 L 235.80399,234.84933 L 235.80399,236.31241" id="TM" style="fill:#3c6eb4"/>
</svg>

Before

Width:  |  Height:  |  Size: 2.4 KiB

View File

@ -74,6 +74,8 @@
<br>
<img src="4_Calendar View_image.png" width="425" height="91">
</li>
<li>Creating new notes from the calendar will respect the <code>~child:template</code> relation
if set on the book note.</li>
</ul>
<h2>Interacting with events</h2>
<ul>

View File

@ -12,7 +12,53 @@
<div class="content">
<h1 data-trilium-h1>Downloading responses from Google Forms</h1>
<div class="ck-content"></div>
<div class="ck-content">
<p>This tutorials showcases a basic integration with Google Forms, where
we are able to download the responses of a form using the “Link to Sheets"
functionality.</p>
<p>Note that the link will be publicly accessible to everyone (however the
link is in a hard-to-guess format such as <code>https://docs.google.com/spreadsheets/d/e/2PACX-1vTA8NU2_eZFhc8TFadCZPreBfvP7un8IHd6J0SchrLLw3ueGmntNZjwRmsH2ZRcp1pJYDAzMz1FmFaj/pub?output=csv</code>).
Make sure you are not accidentally publishing sensitive information.</p>
<h2>Obtaining the CSV link</h2>
<ol>
<li>Open the Google Forms in a browser.</li>
<li>Select the “Responses” tab and click on “Link to Sheets”.</li>
<li>Select “Create a new spreadsheet” and press “Create”.</li>
<li>In Google Sheets, select File → Share → Publish to web.</li>
<li>In the “Publish to the web” screen, make sure the “Link” tab is selected
and instead of “Web page”, select “Comma-separated values (.csv)”.</li>
<li>Copy the given link which will be used for the upcoming script.</li>
</ol>
<h2>Creating the script</h2>
<p>Create a “JS Frontend” script:</p><pre><code class="language-text-x-trilium-auto">const CSV_URL = "https://docs.google.com/spreadsheets/d/e/2PACX-1vTiwooLV2whjCSVa49dJ99p_G3_qhqHHRqttMjYCJVfLXVdTgUSNJu5K0rpqmaHYF2k7Vofi3o7gW82/pub?output=csv";
async function fetchData() {
try {
const response = await fetch(CSV_URL);
return await response.text();
} catch (e) {
api.showError(e.message);
}
}
const data = await fetchData();
console.log(data);
// Do something with the data.</code></pre>
<p>Note that the data will be received as a string and there is no library
to do the CSV parsing for us. To do a very simple parsing of CSV:</p><pre><code class="language-text-x-trilium-auto">const content = data
.split("\n")
.slice(1)
.map((row) =&gt; row.split(","));</code></pre>
<p>This will return the data as an array of arrays.</p>
</div>
</div>
</body>

View File

@ -6,6 +6,6 @@
</head>
<frameset cols="25%,75%">
<frame name="navigation" src="navigation.html">
<frame name="detail" src="User%20Guide/Installation.html">
<frame name="detail" src="User%20Guide/Features/Export%20as%20PDF.html">
</frameset>
</html>

View File

@ -9,12 +9,6 @@
<ul>
<li>User Guide
<ul>
<li><a href="User%20Guide/Installation.html" target="detail">Installation</a>
<ul>
<li><a href="User%20Guide/Installation/On%20Fedora%20Linux.html" target="detail">On Fedora Linux</a>
</li>
</ul>
</li>
<li>Features
<ul>
<li><a href="User%20Guide/Features/Export%20as%20PDF.html" target="detail">Export as PDF</a>