mirror of
https://github.com/zadam/trilium.git
synced 2026-01-06 06:34:25 +01:00
docs(demo): add JSX widget showcase
This commit is contained in:
Elian Doran
parent
8740bf84cf
commit
9332b9ca8f
128
apps/edit-docs/demo/!!!meta.json
vendored
128
apps/edit-docs/demo/!!!meta.json
vendored
@ -1,6 +1,6 @@
|
||||
{
|
||||
"formatVersion": 2,
|
||||
"appVersion": "0.99.3",
|
||||
"appVersion": "0.100.0",
|
||||
"files": [
|
||||
{
|
||||
"isClone": false,
|
||||
@ -5507,51 +5507,7 @@
|
||||
}
|
||||
],
|
||||
"dataFileName": "chartjs-plugin-datalabe.min.js",
|
||||
"attachments": [],
|
||||
"dirFileName": "chartjs-plugin-datalabels.min.js",
|
||||
"children": [
|
||||
{
|
||||
"isClone": true,
|
||||
"noteId": "piyimQhwfcy5",
|
||||
"notePath": [
|
||||
"root",
|
||||
"rvaX6hEaQlmk",
|
||||
"KZVWidxicAfn",
|
||||
"xRQuuwkaobBM",
|
||||
"GXUcReLM6dSe",
|
||||
"oLPbgCo7djD7",
|
||||
"AlL9eFopYuHg",
|
||||
"9GZB2MeW51xv",
|
||||
"3jaioienOLTR",
|
||||
"piyimQhwfcy5"
|
||||
],
|
||||
"title": "chart.js",
|
||||
"prefix": null,
|
||||
"dataFileName": "chart.js.clone.html",
|
||||
"type": "text",
|
||||
"format": "html"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"isClone": true,
|
||||
"noteId": "piyimQhwfcy5",
|
||||
"notePath": [
|
||||
"root",
|
||||
"rvaX6hEaQlmk",
|
||||
"KZVWidxicAfn",
|
||||
"xRQuuwkaobBM",
|
||||
"GXUcReLM6dSe",
|
||||
"oLPbgCo7djD7",
|
||||
"AlL9eFopYuHg",
|
||||
"9GZB2MeW51xv",
|
||||
"piyimQhwfcy5"
|
||||
],
|
||||
"title": "chart.js",
|
||||
"prefix": null,
|
||||
"dataFileName": "chart.js.clone.html",
|
||||
"type": "text",
|
||||
"format": "html"
|
||||
"attachments": []
|
||||
}
|
||||
]
|
||||
},
|
||||
@ -6044,6 +6000,86 @@
|
||||
],
|
||||
"dataFileName": "Custom request handler.js",
|
||||
"attachments": []
|
||||
},
|
||||
{
|
||||
"isClone": false,
|
||||
"noteId": "DAybX9h5jOoG",
|
||||
"notePath": [
|
||||
"root",
|
||||
"rvaX6hEaQlmk",
|
||||
"KZVWidxicAfn",
|
||||
"DAybX9h5jOoG"
|
||||
],
|
||||
"title": "Render note with JSX",
|
||||
"notePosition": 100,
|
||||
"prefix": null,
|
||||
"isExpanded": false,
|
||||
"type": "render",
|
||||
"mime": "",
|
||||
"attributes": [
|
||||
{
|
||||
"type": "label",
|
||||
"name": "widget",
|
||||
"value": "",
|
||||
"isInheritable": false,
|
||||
"position": 10
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "renderNote",
|
||||
"value": "xzqr5J1V4YwY",
|
||||
"isInheritable": false,
|
||||
"position": 20
|
||||
}
|
||||
],
|
||||
"attachments": [],
|
||||
"dirFileName": "Render note with JSX",
|
||||
"children": [
|
||||
{
|
||||
"isClone": false,
|
||||
"noteId": "xzqr5J1V4YwY",
|
||||
"notePath": [
|
||||
"root",
|
||||
"rvaX6hEaQlmk",
|
||||
"KZVWidxicAfn",
|
||||
"DAybX9h5jOoG",
|
||||
"xzqr5J1V4YwY"
|
||||
],
|
||||
"title": "JSX",
|
||||
"notePosition": 12,
|
||||
"prefix": null,
|
||||
"isExpanded": false,
|
||||
"type": "code",
|
||||
"mime": "text/jsx",
|
||||
"attributes": [],
|
||||
"dataFileName": "JSX.jsx",
|
||||
"attachments": [],
|
||||
"dirFileName": "JSX",
|
||||
"children": [
|
||||
{
|
||||
"isClone": false,
|
||||
"noteId": "mqDw6BebfE58",
|
||||
"notePath": [
|
||||
"root",
|
||||
"rvaX6hEaQlmk",
|
||||
"KZVWidxicAfn",
|
||||
"DAybX9h5jOoG",
|
||||
"xzqr5J1V4YwY",
|
||||
"mqDw6BebfE58"
|
||||
],
|
||||
"title": "FormElements",
|
||||
"notePosition": 10,
|
||||
"prefix": null,
|
||||
"isExpanded": false,
|
||||
"type": "code",
|
||||
"mime": "text/jsx",
|
||||
"attributes": [],
|
||||
"dataFileName": "FormElements.jsx",
|
||||
"attachments": []
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
20
apps/edit-docs/demo/navigation.html
vendored
20
apps/edit-docs/demo/navigation.html
vendored
@ -540,14 +540,6 @@
|
||||
<ul>
|
||||
<li><a href="root/Trilium%20Demo/Scripting%20examples/Statistics/Attribute%20count/template/js/renderPieChart/chartjs-plugin-datalabe.min.js"
|
||||
target="detail">chartjs-plugin-datalabels.min.js</a>
|
||||
<ul>
|
||||
<li><a href="root/Trilium%20Demo/Scripting%20examples/Weight%20Tracker/Implementation/JS%20code/chart.js"
|
||||
target="detail">chart.js</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="root/Trilium%20Demo/Scripting%20examples/Weight%20Tracker/Implementation/JS%20code/chart.js"
|
||||
target="detail">chart.js</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
@ -633,6 +625,18 @@
|
||||
<li><a href="root/Trilium%20Demo/Scripting%20examples/Custom%20request%20handler.js"
|
||||
target="detail">Custom request handler</a>
|
||||
</li>
|
||||
<li>Render note with JSX
|
||||
<ul>
|
||||
<li><a href="root/Trilium%20Demo/Scripting%20examples/Render%20note%20with%20JSX/JSX.jsx"
|
||||
target="detail">JSX</a>
|
||||
<ul>
|
||||
<li><a href="root/Trilium%20Demo/Scripting%20examples/Render%20note%20with%20JSX/JSX/FormElements.jsx"
|
||||
target="detail">FormElements</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
8
apps/edit-docs/demo/root/Trilium Demo.html
vendored
8
apps/edit-docs/demo/root/Trilium Demo.html
vendored
@ -18,6 +18,7 @@
|
||||
width="150" height="150">
|
||||
</figure>
|
||||
<p><strong>Welcome to Trilium Notes!</strong>
|
||||
|
||||
</p>
|
||||
<p>This is a "demo" document packaged with Trilium to showcase some of its
|
||||
features and also give you some ideas on how you might structure your notes.
|
||||
@ -25,17 +26,22 @@
|
||||
you wish.</p>
|
||||
<p>If you need any help, visit <a href="https://triliumnotes.org">triliumnotes.org</a> or
|
||||
our <a href="https://github.com/TriliumNext">GitHub repository</a>
|
||||
|
||||
</p>
|
||||
<h2>Cleanup</h2>
|
||||
|
||||
<p>Once you're finished with experimenting and want to cleanup these pages,
|
||||
you can simply delete them all.</p>
|
||||
<h2>Formatting</h2>
|
||||
|
||||
<p>Trilium supports classic formatting like <em>italic</em>, <strong>bold</strong>, <em><strong>bold and italic</strong></em>.
|
||||
You can add links pointing to <a href="https://triliumnotes.org/">external pages</a> or
|
||||
<a
|
||||
class="reference-link" href="Trilium%20Demo/Formatting%20examples">Formatting examples</a>.</p>
|
||||
<h3>Lists</h3>
|
||||
|
||||
<p><strong>Ordered:</strong>
|
||||
|
||||
</p>
|
||||
<ol>
|
||||
<li data-list-item-id="e877cc655d0239b8bb0f38696ad5d8abb">First Item</li>
|
||||
@ -50,6 +56,7 @@
|
||||
</li>
|
||||
</ol>
|
||||
<p><strong>Unordered:</strong>
|
||||
|
||||
</p>
|
||||
<ul>
|
||||
<li data-list-item-id="e68bf4b518a16671c314a72073c3d900a">Item</li>
|
||||
@ -60,6 +67,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
<h3>Block quotes</h3>
|
||||
|
||||
<blockquote>
|
||||
<p>Whereof one cannot speak, thereof one must be silent”</p>
|
||||
<p>– Ludwig Wittgenstein</p>
|
||||
|
||||
@ -14,17 +14,22 @@
|
||||
|
||||
<div class="ck-content">
|
||||
<h2>Main characters</h2>
|
||||
|
||||
<p>… here put main characters …</p>
|
||||
<p> </p>
|
||||
<h2>Plot</h2>
|
||||
|
||||
<p>… describe main plot lines …</p>
|
||||
<p> </p>
|
||||
<h2>Tone</h2>
|
||||
|
||||
<p> </p>
|
||||
<h2>Genre</h2>
|
||||
|
||||
<p>scifi / drama / romance</p>
|
||||
<p> </p>
|
||||
<h2>Similar books</h2>
|
||||
|
||||
<ul>
|
||||
<li>…</li>
|
||||
</ul>
|
||||
|
||||
@ -16,8 +16,10 @@
|
||||
<p>Check out <a href="https://www.amazon.com/amz-books/book-deals">Kindle Daily Deals</a>:</p>
|
||||
<ul>
|
||||
<li data-list-item-id="e5bec34ede90d88a3ad5f7362ab60cbfb">Cixin Liu - <a href="https://www.amazon.com/Dark-Forest-Remembrance-Earths-Past/dp/0765386690/">The Dark Forest</a>
|
||||
|
||||
</li>
|
||||
<li data-list-item-id="ef10faa539920a4fd817f09ba564d69d3">Ann Leckie - <a href="https://www.amazon.com/Ancillary-Sword-Imperial-Radch-Leckie/dp/0316246654/">Ancillary Sword</a>
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -18,21 +18,25 @@
|
||||
<li>
|
||||
<label class="todo-list__label">
|
||||
<input type="checkbox" disabled="disabled"><span class="todo-list__label__description">buy milk </span>
|
||||
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label class="todo-list__label">
|
||||
<input type="checkbox" checked="checked" disabled="disabled"><span class="todo-list__label__description">do the laundry </span>
|
||||
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label class="todo-list__label">
|
||||
<input type="checkbox" checked="checked" disabled="disabled"><span class="todo-list__label__description">watch TV </span>
|
||||
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label class="todo-list__label">
|
||||
<input type="checkbox" disabled="disabled"><span class="todo-list__label__description">eat ice cream </span>
|
||||
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@ -28,6 +28,7 @@
|
||||
|
||||
|
||||
}</code></pre>
|
||||
|
||||
<p>For larger pieces of code it is better to use a code note, which uses
|
||||
a fully-fledged code editor (CodeMirror). For an example of a code note,
|
||||
see <a class="reference-link" href="../Scripting%20examples/Custom%20request%20handler.js">Custom request handler</a>.</p>
|
||||
|
||||
@ -15,7 +15,9 @@
|
||||
<div class="ck-content">
|
||||
<p><span class="math-tex">\(% \f is defined as #1f(#2) using the macro \f\relax{x} = \int_{-\infty}^\infty \f\hat\xi\,e^{2 \pi i \xi x} \,d\xi\)</span>Some
|
||||
math examples:</p><span class="math-tex">\[\displaystyle \frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots} } } }\]</span>
|
||||
|
||||
<p>Another:</p><span class="math-tex">\[\displaystyle \left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)\]</span>
|
||||
|
||||
<p>Inline math is also possible: <span class="math-tex">\(c^2 = a^2 + b^2\)</span> </p>
|
||||
<p> </p>
|
||||
</div>
|
||||
|
||||
@ -15,6 +15,7 @@
|
||||
<div class="ck-content">
|
||||
<p>How to be a stoic from Massimo Pigliuci:</p>
|
||||
<p><a href="https://www.amazon.com/gp/product/B01K3WN1BY">https://www.amazon.com/gp/product/B01K3WN1BY</a>
|
||||
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -22,6 +22,7 @@
|
||||
<p>This page demonstrates two things:</p>
|
||||
<ul>
|
||||
<li>possibility to <a href="#root/_hidden/_help/_help_KSZ04uQ2D1St/_help_iPIMuisry3hd/_help_nBAXQFj20hS1">include one note into another</a>
|
||||
|
||||
</li>
|
||||
<li>PDF preview - you can read PDFs directly in Trilium!</li>
|
||||
</ul>
|
||||
|
||||
@ -14,6 +14,7 @@
|
||||
|
||||
<div class="ck-content">
|
||||
<p>You can read some explanation on how this journal works here: <a href="https://github.com/zadam/trilium/wiki/Day-notes">https://github.com/zadam/trilium/wiki/Day-notes</a>
|
||||
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -18,6 +18,7 @@
|
||||
<li>
|
||||
<label class="todo-list__label">
|
||||
<input type="checkbox" disabled="disabled"><span class="todo-list__label__description"> </span>
|
||||
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@ -17,6 +17,7 @@
|
||||
<li>XBox</li>
|
||||
<li>Candles</li>
|
||||
<li><a href="https://www.amazon.ca/Anker-SoundCore-Portable-Bluetooth-Resistance/dp/B01MTB55WH?pd_rd_wg=honW8&pd_rd_r=c9bb7c0f-0051-4da7-991f-4ca711a1b3e3&pd_rd_w=ciUpR&ref_=pd_gw_simh&pf_rd_r=K10XKX0NGPDNTYYP4BS4&pf_rd_p=5f1b460b-78c1-580e-929e-2878fe4859e8">Portable speakers</a>
|
||||
|
||||
</li>
|
||||
<li>...?</li>
|
||||
</ul>
|
||||
|
||||
@ -14,8 +14,10 @@
|
||||
|
||||
<div class="ck-content">
|
||||
<p>Wiki: <a href="https://en.wikipedia.org/wiki/Trusted_timestamping">https://en.wikipedia.org/wiki/Trusted_timestamping</a>
|
||||
|
||||
</p>
|
||||
<p>Bozho: <a href="https://techblog.bozho.net/using-trusted-timestamping-java/">https://techblog.bozho.net/using-trusted-timestamping-java/</a>
|
||||
|
||||
</p>
|
||||
<p><strong>Trusted timestamping</strong> is the process of <a href="https://en.wikipedia.org/wiki/Computer_security">securely</a> keeping
|
||||
track of the creation and modification time of a document. Security here
|
||||
|
||||
@ -16,6 +16,7 @@
|
||||
<p>Miscellaneous notes done on monday ...</p>
|
||||
<p> </p>
|
||||
<p>Interesting video: <a href="https://www.youtube.com/watch?v=_eSAF_qT_FY&feature=youtu.be">https://www.youtube.com/watch?v=_eSAF_qT_FY&feature=youtu.be</a>
|
||||
|
||||
</p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
|
||||
@ -18,6 +18,7 @@
|
||||
<li>
|
||||
<label class="todo-list__label">
|
||||
<input type="checkbox" disabled="disabled"><span class="todo-list__label__description"> </span>
|
||||
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@ -18,6 +18,7 @@
|
||||
<li>
|
||||
<label class="todo-list__label">
|
||||
<input type="checkbox" disabled="disabled"><span class="todo-list__label__description"> </span>
|
||||
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@ -18,6 +18,7 @@
|
||||
<li>
|
||||
<label class="todo-list__label">
|
||||
<input type="checkbox" disabled="disabled"><span class="todo-list__label__description"> </span>
|
||||
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@ -18,6 +18,7 @@
|
||||
<li>
|
||||
<label class="todo-list__label">
|
||||
<input type="checkbox" disabled="disabled"><span class="todo-list__label__description"> </span>
|
||||
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@ -18,6 +18,7 @@
|
||||
<li>
|
||||
<label class="todo-list__label">
|
||||
<input type="checkbox" disabled="disabled"><span class="todo-list__label__description"> </span>
|
||||
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@ -18,6 +18,7 @@
|
||||
<li>
|
||||
<label class="todo-list__label">
|
||||
<input type="checkbox" disabled="disabled"><span class="todo-list__label__description"> </span>
|
||||
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@ -18,6 +18,7 @@
|
||||
width="209" height="300">
|
||||
</figure>
|
||||
<p>Maybe CodeNames? <a href="https://boardgamegeek.com/boardgame/178900/codenames">https://boardgamegeek.com/boardgame/178900/codenames</a>
|
||||
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -18,6 +18,7 @@
|
||||
<li>
|
||||
<label class="todo-list__label">
|
||||
<input type="checkbox" disabled="disabled"><span class="todo-list__label__description"> </span>
|
||||
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@ -18,6 +18,7 @@
|
||||
<li>
|
||||
<label class="todo-list__label">
|
||||
<input type="checkbox" disabled="disabled"><span class="todo-list__label__description"> </span>
|
||||
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@ -24,14 +24,17 @@
|
||||
<span
|
||||
class="footnote-reference" data-footnote-reference="" data-footnote-index="1"
|
||||
data-footnote-id="6qz4pm021mi" role="doc-noteref" id="fnref6qz4pm021mi"><sup><a href="#fn6qz4pm021mi">[1]</a></sup>
|
||||
|
||||
</span>
|
||||
</p>
|
||||
<ol class="footnote-section footnotes" data-footnote-section="" role="doc-endnotes">
|
||||
<li class="footnote-item" data-footnote-item="" data-footnote-index="1"
|
||||
data-footnote-id="6qz4pm021mi" role="doc-endnote" id="fn6qz4pm021mi"><span class="footnote-back-link" data-footnote-back-link="" data-footnote-id="6qz4pm021mi"><sup><strong><a href="#fnref6qz4pm021mi">^</a></strong></sup></span>
|
||||
|
||||
<div
|
||||
class="footnote-content" data-footnote-content="">
|
||||
<p><a href="https://www.thecollector.com/what-are-the-seven-wonders-of-the-world/">What Are the 7 Wonders of the World? (with HD Images) | TheCollector</a>
|
||||
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
@ -26,13 +26,16 @@
|
||||
been brought to its knees.<span class="footnote-reference" data-footnote-reference=""
|
||||
data-footnote-index="1" data-footnote-id="o6g991vkrwj" role="doc-noteref"
|
||||
id="fnrefo6g991vkrwj"><sup><a href="#fno6g991vkrwj">[1]</a></sup></span>
|
||||
|
||||
</p>
|
||||
<ol class="footnote-section footnotes" data-footnote-section="" role="doc-endnotes">
|
||||
<li class="footnote-item" data-footnote-item="" data-footnote-index="1"
|
||||
data-footnote-id="o6g991vkrwj" role="doc-endnote" id="fno6g991vkrwj"><span class="footnote-back-link" data-footnote-back-link="" data-footnote-id="o6g991vkrwj"><sup><strong><a href="#fnrefo6g991vkrwj">^</a></strong></sup></span>
|
||||
|
||||
<div
|
||||
class="footnote-content" data-footnote-content="">
|
||||
<p><a href="https://www.thecollector.com/what-are-the-seven-wonders-of-the-world/">What Are the 7 Wonders of the World? (with HD Images) | TheCollector</a>
|
||||
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
@ -22,13 +22,16 @@
|
||||
around 1450 in polished drystone walls.<span class="footnote-reference"
|
||||
data-footnote-reference="" data-footnote-index="1" data-footnote-id="4prjheuho88"
|
||||
role="doc-noteref" id="fnref4prjheuho88"><sup><a href="#fn4prjheuho88">[1]</a></sup></span>
|
||||
|
||||
</p>
|
||||
<ol class="footnote-section footnotes" data-footnote-section="" role="doc-endnotes">
|
||||
<li class="footnote-item" data-footnote-item="" data-footnote-index="1"
|
||||
data-footnote-id="4prjheuho88" role="doc-endnote" id="fn4prjheuho88"><span class="footnote-back-link" data-footnote-back-link="" data-footnote-id="4prjheuho88"><sup><strong><a href="#fnref4prjheuho88">^</a></strong></sup></span>
|
||||
|
||||
<div
|
||||
class="footnote-content" data-footnote-content="">
|
||||
<p><a href="https://www.thecollector.com/what-are-the-seven-wonders-of-the-world/">What Are the 7 Wonders of the World? (with HD Images) | TheCollector</a>
|
||||
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
@ -23,13 +23,16 @@
|
||||
by earthquakes.<span class="footnote-reference" data-footnote-reference=""
|
||||
data-footnote-index="1" data-footnote-id="ej5sd0bakne" role="doc-noteref"
|
||||
id="fnrefej5sd0bakne"><sup><a href="#fnej5sd0bakne">[1]</a></sup></span>
|
||||
|
||||
</p>
|
||||
<ol class="footnote-section footnotes" data-footnote-section="" role="doc-endnotes">
|
||||
<li class="footnote-item" data-footnote-item="" data-footnote-index="1"
|
||||
data-footnote-id="ej5sd0bakne" role="doc-endnote" id="fnej5sd0bakne"><span class="footnote-back-link" data-footnote-back-link="" data-footnote-id="ej5sd0bakne"><sup><strong><a href="#fnrefej5sd0bakne">^</a></strong></sup></span>
|
||||
|
||||
<div
|
||||
class="footnote-content" data-footnote-content="">
|
||||
<p><a href="https://www.thecollector.com/what-are-the-seven-wonders-of-the-world/">What Are the 7 Wonders of the World? (with HD Images) | TheCollector</a>
|
||||
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
@ -26,14 +26,17 @@
|
||||
<span
|
||||
class="footnote-reference" data-footnote-reference="" data-footnote-index="1"
|
||||
data-footnote-id="4kitkusvyi3" role="doc-noteref" id="fnref4kitkusvyi3"><sup><a href="#fn4kitkusvyi3">[1]</a></sup>
|
||||
|
||||
</span>
|
||||
</p>
|
||||
<ol class="footnote-section footnotes" data-footnote-section="" role="doc-endnotes">
|
||||
<li class="footnote-item" data-footnote-item="" data-footnote-index="1"
|
||||
data-footnote-id="4kitkusvyi3" role="doc-endnote" id="fn4kitkusvyi3"><span class="footnote-back-link" data-footnote-back-link="" data-footnote-id="4kitkusvyi3"><sup><strong><a href="#fnref4kitkusvyi3">^</a></strong></sup></span>
|
||||
|
||||
<div
|
||||
class="footnote-content" data-footnote-content="">
|
||||
<p><a href="https://www.thecollector.com/what-are-the-seven-wonders-of-the-world/">What Are the 7 Wonders of the World? (with HD Images) | TheCollector</a>
|
||||
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
@ -23,14 +23,17 @@
|
||||
<span
|
||||
class="footnote-reference" data-footnote-reference="" data-footnote-index="1"
|
||||
data-footnote-id="o0o2das7ljm" role="doc-noteref" id="fnrefo0o2das7ljm"><sup><a href="#fno0o2das7ljm">[1]</a></sup>
|
||||
|
||||
</span>
|
||||
</p>
|
||||
<ol class="footnote-section footnotes" data-footnote-section="" role="doc-endnotes">
|
||||
<li class="footnote-item" data-footnote-item="" data-footnote-index="1"
|
||||
data-footnote-id="o0o2das7ljm" role="doc-endnote" id="fno0o2das7ljm"><span class="footnote-back-link" data-footnote-back-link="" data-footnote-id="o0o2das7ljm"><sup><strong><a href="#fnrefo0o2das7ljm">^</a></strong></sup></span>
|
||||
|
||||
<div
|
||||
class="footnote-content" data-footnote-content="">
|
||||
<p><a href="https://www.thecollector.com/what-are-the-seven-wonders-of-the-world/">What Are the 7 Wonders of the World? (with HD Images) | TheCollector</a>
|
||||
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
@ -23,13 +23,16 @@
|
||||
the complex.<span class="footnote-reference" data-footnote-reference=""
|
||||
data-footnote-index="1" data-footnote-id="zzzjn52iwk" role="doc-noteref"
|
||||
id="fnrefzzzjn52iwk"><sup><a href="#fnzzzjn52iwk">[1]</a></sup></span>
|
||||
|
||||
</p>
|
||||
<ol class="footnote-section footnotes" data-footnote-section="" role="doc-endnotes">
|
||||
<li class="footnote-item" data-footnote-item="" data-footnote-index="1"
|
||||
data-footnote-id="zzzjn52iwk" role="doc-endnote" id="fnzzzjn52iwk"><span class="footnote-back-link" data-footnote-back-link="" data-footnote-id="zzzjn52iwk"><sup><strong><a href="#fnrefzzzjn52iwk">^</a></strong></sup></span>
|
||||
|
||||
<div
|
||||
class="footnote-content" data-footnote-content="">
|
||||
<p><a href="https://www.thecollector.com/what-are-the-seven-wonders-of-the-world/">What Are the 7 Wonders of the World? (with HD Images) | TheCollector</a>
|
||||
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
108
apps/edit-docs/demo/root/Trilium Demo/Scripting examples/Render note with JSX/JSX.jsx
vendored
Normal file
108
apps/edit-docs/demo/root/Trilium Demo/Scripting examples/Render note with JSX/JSX.jsx
vendored
Normal file
@ -0,0 +1,108 @@
|
||||
import {
|
||||
ActionButton, Button, LinkButton,
|
||||
Admonition, Collapsible, FormGroup,
|
||||
Dropdown, FormListItem, FormDropdownDivider, FormDropdownSubmenu,
|
||||
NoteAutocomplete, NoteLink, Modal,
|
||||
CKEditor,
|
||||
useEffect, useState
|
||||
} from "trilium:preact";
|
||||
import { showMessage } from "trilium:api";
|
||||
|
||||
export default function() {
|
||||
const [ time, setTime ] = useState();
|
||||
const lorem = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam accumsan eu odio non gravida. Pellentesque ornare, arcu condimentum molestie dignissim, nibh turpis ultrices elit, eget elementum nunc erat at erat. Maecenas vehicula consectetur elit, nec fermentum elit venenatis eu.";
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => setTime(new Date().toLocaleString()), 1000);
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div style={{ padding: 20, display: "flex", flexDirection: "column", gap: "1em" }}>
|
||||
<h1>Widget showcase</h1>
|
||||
|
||||
<Buttons />
|
||||
<Admonition type="note">
|
||||
<strong>Admonition</strong><br />
|
||||
{lorem}
|
||||
</Admonition>
|
||||
|
||||
<Collapsible title="Collapsible" initiallyExpanded>
|
||||
{lorem}
|
||||
</Collapsible>
|
||||
|
||||
<FormElements />
|
||||
<NoteElements />
|
||||
<ModalSample />
|
||||
<DropdownSample />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Buttons() {
|
||||
const onClick = () => showMessage("A button was pressed");
|
||||
|
||||
return (
|
||||
<>
|
||||
<h2>Buttons</h2>
|
||||
<div style={{ display: "flex", gap: "1em", alignItems: "center" }}>
|
||||
<ActionButton icon="bx bx-rocket" text="Action button" onClick={onClick} />
|
||||
<Button icon="bx bx-rocket" text="Simple button" onClick={onClick} />
|
||||
<LinkButton text="Link button" onClick={onClick} />
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
function NoteElements() {
|
||||
const [ noteId, setNoteId ] = useState("");
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h2>Note elements</h2>
|
||||
|
||||
<FormGroup name="note-autocomplete" label="Note autocomplete">
|
||||
<NoteAutocomplete
|
||||
placeholder="Select a note"
|
||||
noteId={noteId} noteIdChanged={setNoteId}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup name="note-link" label="Note link">
|
||||
{noteId
|
||||
? <NoteLink notePath={noteId} showNoteIcon />
|
||||
: <span>Select a note first</span>}
|
||||
</FormGroup>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ModalSample() {
|
||||
const [ shown, setShown ] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<h2>Modal</h2>
|
||||
<Button text="Open modal" onClick={() => setShown(true)} />
|
||||
<Modal title="Modal title" size="md" show={shown} onHidden={() => setShown(false)}>
|
||||
Modal goes here.
|
||||
</Modal>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownSample() {
|
||||
return (
|
||||
<>
|
||||
<h2>Dropdown menu</h2>
|
||||
<Dropdown text="Dropdown" hideToggleArrow>
|
||||
<FormListItem icon="bx bx-cut">Cut</FormListItem>
|
||||
<FormListItem icon="bx bx-copy">Copy</FormListItem>
|
||||
<FormListItem icon="bx bx-paste">Paste</FormListItem>
|
||||
<FormDropdownDivider />
|
||||
<FormDropdownSubmenu title="Submenu">
|
||||
<FormListItem>More items</FormListItem>
|
||||
</FormDropdownSubmenu>
|
||||
</Dropdown>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,84 @@
|
||||
import {
|
||||
useState,
|
||||
FormCheckbox, FormDropdownList, FormFileUploadButton, FormGroup, FormRadioGroup, FormTextArea,
|
||||
FormTextBox, FormToggle, Slider, RawHtml, LoadingSpinner, Icon,
|
||||
} from "trilium:preact";
|
||||
|
||||
export default function FormElements() {
|
||||
const [ checkboxChecked, setCheckboxChecked ] = useState(false);
|
||||
const [ dropdownValue, setDropdownValue ] = useState("key-1");
|
||||
const [ radioGroupValue, setRadioGroupValue ] = useState("key-1");
|
||||
const [ sliderValue, setSliderValue ] = useState(50);
|
||||
|
||||
return (
|
||||
<>
|
||||
<h2>Form elements</h2>
|
||||
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "1em" }}>
|
||||
<FormGroup name="checkbox" label="Checkbox">
|
||||
<FormCheckbox label="Checkbox" currentValue={checkboxChecked} onChange={setCheckboxChecked} />
|
||||
</FormGroup>
|
||||
<FormGroup name="toggle" label="Toggle">
|
||||
<FormToggle switchOnName="Off" switchOffName="On" currentValue={checkboxChecked} onChange={setCheckboxChecked} />
|
||||
</FormGroup>
|
||||
<FormGroup name="dropdown" label="Dropdown">
|
||||
<FormDropdownList
|
||||
values={[
|
||||
{ key: "key-1", name: "First item" },
|
||||
{ key: "key-2", name: "Second item" },
|
||||
{ key: "key-3", name: "Third item" },
|
||||
]}
|
||||
currentValue={dropdownValue} onChange={setDropdownValue}
|
||||
keyProperty="key" titleProperty="name"
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup name="radio-group" label="Radio group">
|
||||
<FormRadioGroup
|
||||
values={[
|
||||
{ value: "key-1", label: "First item" },
|
||||
{ value: "key-2", label: "Second item" },
|
||||
{ value: "key-3", label: "Third item" },
|
||||
]}
|
||||
currentValue={radioGroupValue} onChange={setRadioGroupValue}
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup name="text-box" label="Text box">
|
||||
<FormTextBox
|
||||
placeholder="Type something..."
|
||||
currentValue="" onChange={(newValue) => {}}
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup name="text-area" label="Text area">
|
||||
<FormTextArea
|
||||
placeholder="Type something bigger..."
|
||||
currentValue="" onChange={(newValue) => {}}
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup name="slider" label="Slider">
|
||||
<Slider
|
||||
min={1} max={100}
|
||||
value={sliderValue} onChange={setSliderValue}
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup name="file-upload" label="File upload">
|
||||
<FormFileUploadButton
|
||||
text="Upload"
|
||||
onChange={(files) => {
|
||||
const file = files?.[0];
|
||||
if (!file) return;
|
||||
showMessage(`Got file "${file.name}" of size ${file.size} B and type ${file.type}.`);
|
||||
}}
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup name="icon" label="Icon">
|
||||
<Icon icon="bx bx-smile" />
|
||||
</FormGroup>
|
||||
<FormGroup name="loading-spinner" label="Loading spinner">
|
||||
<LoadingSpinner />
|
||||
</FormGroup>
|
||||
<FormGroup name="raw-html" label="Raw HTML">
|
||||
<RawHtml html="<strong>Hi</strong> <em>there</em>" />
|
||||
</FormGroup>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -1,21 +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>chart.js</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="content">
|
||||
<h1 data-trilium-h1>chart.js</h1>
|
||||
|
||||
<div class="ck-content">
|
||||
<p>This is a clone of a note. Go to its <a href="../../../../../Weight%20Tracker/Implementation/JS%20code/chart.js">primary location</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,21 +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>chart.js</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="content">
|
||||
<h1 data-trilium-h1>chart.js</h1>
|
||||
|
||||
<div class="ck-content">
|
||||
<p>This is a clone of a note. Go to its <a href="../../../../../../Weight%20Tracker/Implementation/JS%20code/chart.js">primary location</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -18,6 +18,7 @@
|
||||
width="209" height="300">
|
||||
</figure>
|
||||
<p>Maybe CodeNames? <a href="https://boardgamegeek.com/boardgame/178900/codenames">https://boardgamegeek.com/boardgame/178900/codenames</a>
|
||||
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -14,6 +14,7 @@
|
||||
|
||||
<div class="ck-content">
|
||||
<p><a href="https://en.wikipedia.org/wiki/The_Black_Swan:_The_Impact_of_the_Highly_Improbable">https://en.wikipedia.org/wiki/The_Black_Swan:_The_Impact_of_the_Highly_Improbable</a>
|
||||
|
||||
</p>
|
||||
<p><em><strong>The Black Swan: The Impact of the Highly Improbable</strong></em> is
|
||||
a 2007 book by author and former <a href="https://en.wikipedia.org/wiki/Options_trader">options trader</a>
|
||||
|
||||
@ -25,6 +25,7 @@
|
||||
and <a href="https://en.wikipedia.org/wiki/Apple_Inc.">Apple's</a> <a href="https://en.wikipedia.org/wiki/MacOS">macOS</a> (formerly
|
||||
OS X). A version <a href="https://en.wikipedia.org/wiki/Windows_Subsystem_for_Linux">is also available for Windows 10</a>.</p>
|
||||
<p><a href="https://en.wikipedia.org/wiki/Bash_(Unix_shell)">Bash on Wikipedia</a>
|
||||
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -14,6 +14,7 @@
|
||||
|
||||
<div class="ck-content">
|
||||
<h3>Login shell</h3>
|
||||
|
||||
<p>As a "login shell", Bash reads and sets (executes) the user's profile
|
||||
from /etc/profile and one of ~/.bash_profile, ~/.bash_login, or ~/.profile
|
||||
(in that order, using the first one that's readable!).</p>
|
||||
@ -23,6 +24,7 @@
|
||||
that only make sense for the initial user login. That's why all UNIX® shells
|
||||
have (should have) a "login" mode.</p>
|
||||
<p><em><strong>Methods to start Bash as a login shell:</strong></em>
|
||||
|
||||
</p>
|
||||
<ul>
|
||||
<li>the first character of argv[0] is - (a hyphen): traditional UNIX® shells
|
||||
@ -31,17 +33,20 @@
|
||||
<li>Bash is started with the --login option</li>
|
||||
</ul>
|
||||
<p><em><strong>Methods to test for login shell mode:</strong></em>
|
||||
|
||||
</p>
|
||||
<ul>
|
||||
<li>the shell option <a href="http://wiki.bash-hackers.org/internals/shell_options#login_shell">login_shell</a> is
|
||||
set</li>
|
||||
</ul>
|
||||
<p><em><strong>Related switches:</strong></em>
|
||||
|
||||
</p>
|
||||
<ul>
|
||||
<li>--noprofile disables reading of all profile files</li>
|
||||
</ul>
|
||||
<h3>Interactive shell</h3>
|
||||
|
||||
<p>When Bash starts as an interactive non-login shell, it reads and executes
|
||||
commands from ~/.bashrc. This file should contain, for example, aliases,
|
||||
since they need to be defined in every shell as they're not inherited from
|
||||
@ -51,11 +56,13 @@
|
||||
The classic way to have a system-wide rc file is to source /etc/bashrc
|
||||
from every user's ~/.bashrc.</p>
|
||||
<p><em><strong>Methods to test for interactive-shell mode:</strong></em>
|
||||
|
||||
</p>
|
||||
<ul>
|
||||
<li>the special parameter $- contains the letter i (lowercase I)</li>
|
||||
</ul>
|
||||
<p><em><strong>Related switches:</strong></em>
|
||||
|
||||
</p>
|
||||
<ul>
|
||||
<li>-i forces the interactive mode</li>
|
||||
@ -65,6 +72,7 @@
|
||||
~/.bashrc)</li>
|
||||
</ul>
|
||||
<h3>SH mode</h3>
|
||||
|
||||
<p>When Bash starts in SH compatiblity mode, it tries to mimic the startup
|
||||
behaviour of historical versions of sh as closely as possible, while conforming
|
||||
to the POSIX® standard as well. The profile files read are /etc/profile
|
||||
@ -74,6 +82,7 @@
|
||||
file.</p>
|
||||
<p>After the startup files are read, Bash enters the <a href="http://wiki.bash-hackers.org/scripting/bashbehaviour#posix_run_mode">POSIX(r) compatiblity mode (for running, not for starting!)</a>.</p>
|
||||
<p><em><strong>Bash starts in sh compatiblity mode when:</strong></em>
|
||||
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
|
||||
@ -14,6 +14,7 @@
|
||||
|
||||
<div class="ck-content">
|
||||
<p>Documentation: <a href="http://tldp.org/LDP/Bash-Beginners-Guide/html/sect_09_02.html">http://tldp.org/LDP/Bash-Beginners-Guide/html/sect_09_02.html</a>
|
||||
|
||||
</p><pre><code class="language-text-x-sh">#!/bin/bash
|
||||
|
||||
|
||||
|
||||
@ -20,6 +20,7 @@
|
||||
href="https://en.wikipedia.org/wiki/Node.js#cite_note-b1-31">[31]</a>Developers can create scalable servers without using <a href="https://en.wikipedia.org/wiki/Thread_(computing)">threading</a>,
|
||||
by using a simplified model of <a href="https://en.wikipedia.org/wiki/Event-driven_programming">event-driven programming</a> that
|
||||
uses callbacks to signal the completion of a task.<a href="https://en.wikipedia.org/wiki/Node.js#cite_note-b1-31">[31]</a>
|
||||
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
35
apps/edit-docs/demo/style.css
vendored
35
apps/edit-docs/demo/style.css
vendored
@ -550,9 +550,9 @@
|
||||
}
|
||||
|
||||
@media print{
|
||||
.ck-content figure.table:not(.layout-table):not(:has(> figcaption)){
|
||||
display:block;
|
||||
.ck-content figure.table:not(.layout-table){
|
||||
width:fit-content;
|
||||
height:fit-content;
|
||||
}
|
||||
.ck-content figure.table:not(.layout-table) > table{
|
||||
height:initial;
|
||||
@ -601,4 +601,33 @@
|
||||
.ck-content .table td,
|
||||
.ck-content .table th{
|
||||
overflow-wrap:break-word;
|
||||
}
|
||||
}
|
||||
|
||||
:root{
|
||||
--ck-content-table-style-spacing:1.5em;
|
||||
}
|
||||
|
||||
.ck-content .table.table-style-align-left{
|
||||
float:left;
|
||||
margin-right:var(--ck-content-table-style-spacing);
|
||||
}
|
||||
|
||||
.ck-content .table.table-style-align-right{
|
||||
float:right;
|
||||
margin-left:var(--ck-content-table-style-spacing);
|
||||
}
|
||||
|
||||
.ck-content .table.table-style-align-center{
|
||||
margin-left:auto;
|
||||
margin-right:auto;
|
||||
}
|
||||
|
||||
.ck-content .table.table-style-block-align-left{
|
||||
margin-left:0;
|
||||
margin-right:auto;
|
||||
}
|
||||
|
||||
.ck-content .table.table-style-block-align-right{
|
||||
margin-left:auto;
|
||||
margin-right:0;
|
||||
}
|
||||
Binary file not shown.
Loading…
x
Reference in New Issue
Block a user