Last active
December 27, 2024 04:56
-
-
Save Grayda/fe71dfebb4d46339184ed95d7c74cfa5 to your computer and use it in GitHub Desktop.
Revisions
-
Grayda revised this gist
Dec 26, 2024 . 1 changed file with 2 additions and 3 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -33,7 +33,8 @@ var [ // If the note_title HTML element exists, if(titleElement) { // Set the note title or default to "this note" if not set for some reason. titleElement.innerHTML = note.title ?? "this note" } // If the note_dob HTML element exists @@ -53,9 +54,7 @@ if(dobElement) { if(dodElement) { // If the DoD is set, make it into a relative day // If it's NOT set, we set the style to hide it. Too depressing otherwise! if(dod ?? "" != "") { var tempDod = dayjs(dod) dod = `${tempDod.format("Do \of MMMM YYYY")} (${tempDod.fromNow()})` } else { -
Dec 25, 2024 .There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,46 @@ This is an (in-progress) infobox for Trilium Next Notes. # Installation ## Installing the template 1. Create a new note somewhere (preferably under a `Scripts` note or something to keep everything organized) 2. Create a new note called `Infobox` 3. Create a new note under `Infobox` called `template` and make the `Note Type` `HTML` 4. Create a new note under `template` and call it `js` and make the `Note Type` `JS Frontend` 5. Create two new notes under `js`. Call the first one `dayjs_plugin_relativeTime` and call the second one `dayjs_plugin_advancedFormat`. Set both `Note Type`s to `JS Frontend` 6. Add a new Relation to the `Infobox` note (not the `template` note!). The Name will be `renderNote` and the Target Note will be the `template` you created in step 3. This tells Trilium to render the HTML, instead of just displaying the raw text At this point, your folder structure should look like this: ``` Scripts or wherever you're storing this └── Infobox (Type: Render Note) └── template (Type: HTML) └── js (Type: JS Frontend) ├── dayjs_plugin_relativeTime (Type: JS Frontend) └── dayjs_plugin_advancedFormat (Type: JS Frontend) ``` 7. Copy and paste the code from `template.html` in this gist into the `template` note you created in step 3 8. Copy and paste the code from `js.js` in this gist into the `js` note you created in step 4 9. Copy and paste the code from [this file](https://cdn.jsdelivr.net/npm/[email protected]/plugin/advancedFormat.js) into the `dayjs_plugin_advancedFormat` note you made in step 5 10. Copy and paste the code from [this file](https://cdn.jsdelivr.net/npm/[email protected]/plugin/relativeTime.js) into the `dayjs_plugin_relativeTime` note you made in step 5 Now you have all the files you need to get started. ## Setting up your notes This relies on three labels, `DateOfBirth`, `DateOfDeath` and `Address`. It's best to add them to a template note so you don't have to recreate them every time. My label code looks like this: `#label:DateOfBirth(inheritable)="promoted,alias=Date of Birth,single,date" #label:DateOfDeath(inheritable)="promoted,alias=Date of Death,single,date" #label:Address(inheritable)="promoted,alias=Address,single,text" ` ## Adding the Infobox to the notes 1. Go to the note you want to add this to or create a new note with those three labels 2. Use the `Include Note` button in the toolbar and add your Infobox note:   # Caveats This is a work in progress. It may throw up errors or not work entirely. It currently doesn't work with multi-value labels, and there may be much better ways to accomplish this, but it works for my needs. This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,84 @@ // Import day.js extra plugins for working with relative dates and ordinal numbers var dayjs_plugin_relativeTime = require("dayjs_plugin_relativeTime") var dayjs_plugin_advancedFormat = require("dayjs_plugin_advancedFormat") dayjs.extend(dayjs_plugin_relativeTime) dayjs.extend(dayjs_plugin_advancedFormat) // Now we get the "parent" note (i.e. the note that this will be embedded into) // I think this is kind of hacky, as I think by default a note doesn't know what it's being embedded into const note = await api.getActiveContextNote() // Now we deconstruct / set up properties we need to work with var [ titleElement, dob, dobElement, dod, dodElement, address, addressElement, related, relatedElement ] = [ document.getElementById("note_title"), await note.getLabelValue("DateOfBirth"), document.getElementById("note_dob"), await note.getLabelValue("DateOfDeath"), document.getElementById("note_dod"), await note.getLabelValue("Address"), document.getElementById("note_addresses"), await note.getRelations("Related"), document.getElementById("note_related"), ] // If the note_title HTML element exists, if(titleElement) { titleElement.innerHTML = note.title } // If the note_dob HTML element exists if(dobElement) { // If we don't specify a date, we want to show n/a if(dob ?? "" != "") { var tempDob = dayjs(dob) dob = `${tempDob.format("Do \of MMMM YYYY")} (${tempDob.fromNow()})` } else { dob = "n/a" } dobElement.innerHTML = dob } // if the note_dod HTML element exists if(dodElement) { // If the DoD is set, make it into a relative day // If it's NOT set, we set the style to hide it. Too depressing otherwise! console.dir(dod) if(dod ?? "" != "") { console.dir("dod set, going") var tempDod = dayjs(dod) dod = `${tempDod.format("Do \of MMMM YYYY")} (${tempDod.fromNow()})` } else { // IF we don't have a DoD, we find the nearest TR (i.e. the row this line is on) and hide it dodElement.closest("tr").style = "display: none;" } dodElement.innerHTML = dod } // If we've got a note_addresses HTML element if(addressElement) { // If we've set an address if(address) { // Make a brand new link tag const linkTag = document.createElement("a") // Set the HREF attribute, then set the text linkTag.setAttribute("href", "https://www.google.com.au/maps/search/" + encodeURIComponent(address)) linkTag.innerHTML = address ?? "n/a" // Append the newly created tag. We do this because (eventually) we'll support multiple addresses addressElement.appendChild(linkTag) } } This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,18 @@ <div> <p>Info about <span id="note_title"></span></p> <table class="table stats-table"> <tr> <th>Date of Birth</th> <td><span id="note_dob"></span></td> </tr> <tr> <th>Date of Death</th> <td><span id="note_dod"></span></td> </tr> <tr> <th>Address</th> <td id="note_addresses"></td> </tr> </table> </div>