Skip to content

Instantly share code, notes, and snippets.

@Grayda

Grayda/README.md

Last active December 27, 2024 04:56
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Grayda/fe71dfebb4d46339184ed95d7c74cfa5 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Grayda/fe71dfebb4d46339184ed95d7c74cfa5 to your computer and use it in GitHub Desktop.
Download ZIP
Infobox for Trilium Next Notes
Raw
README.md

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 Types 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)
  1. Copy and paste the code from template.html in this gist into the template note you created in step 3
  2. Copy and paste the code from js.js in this gist into the js note you created in step 4
  3. Copy and paste the code from this file into the dayjs_plugin_advancedFormat note you made in step 5
  4. Copy and paste the code from this file 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: image image

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.

Raw
js.js
// 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) {
// 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
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!
if(dod ?? "" != "") {
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)
}
}
Raw
template.html
<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>
@TheBig-O
Copy link

TheBig-O commented Dec 27, 2024

That makes perfect sense and totally understand building tools for the things you need.
I really appreciate your sharing what you have!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment