Infobox for Trilium Next Notes

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)

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 into the dayjs_plugin_advancedFormat note you made in step 5
10. 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:

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.

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)
    }
}

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>

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