Scripts, importing or linking CSS or JS file from HTML note.

[MorganeLeCaignec]

I'm confused about how trilium handles linking different code notes between each other, such as linking a css file from an HTML note, which i've tried doing like this :

<link href="vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css"/>

Where the .css file is a child note of the HTML code note. Obviously that's not how that works, but i'm curious if that kinda linking can work at all? I've done a test with css rules on the HTML code note inside a <style> tag, and of course that works, but since I'm using JS libraries that also need a lot of CSS to be displayed properly, that's not ideal.

Beyond that, how does it work for JS, since i've put a JS code note as a child of the HTML note and that works, it seems to be executed when the HTML note is rendered. How do you reference another code note/file if the normal "file path" method doesn't work, how do import a JS note into another, etc..?

In my own test, I have an HTML note with a child "JS Code" note, and inside of THAT .js note i've done :

var vis = require('vis.js');

where "vis.js" is a child file of the JS Code note. That works, but I don't know if it's because child code notes are automatically "loaded" or if it's by pure luck.

Maybe that's covered somewhere in the docs but the existing examples (weight tracker, etc..) don't really have a full example or separate HTML, JS and CSS notes all properly loading and rendering. I think i'm getting confused since it's all "wrapped" inside trilium and the notes aren't truly organized as files (which can be reference with file paths) but as database entities.

[zadam]

Hi, so this is a complicated topic. Normally inclusion of dependencies is done through the note hierarchy - when a render note or script is getting executed, then the whole subtree is automatically loaded.

How do you reference another code note/file if the normal "file path" method doesn't work, how do import a JS note into another, etc..?

It's the same story, dependency relationship is expressed through the parent-child relationship, where child is the dependency. You can include same note as dependency into multiple parents using cloning.

where "vis.js" is a child file of the JS Code note. That works, but I don't know if it's because child code notes are automatically "loaded" or if it's by pure luck.

Child code notes are automatically loaded. This is the intended usage, yes.

There's another possibility for edge cases where the approach above does not work. You can expose file using custom resource provider which will expose the note as a file through HTTP and then you can reference it using e.g.

This approach can be seen in loading fonts in custom "Steel Blue" theme in demo document.

[MorganeLeCaignec]

Thanks for the reply.
For JS it works as expected, but for some reason including a .css file as a child note wouldn't load the CSS with the HTML, so my solution for now is to tag the css file with the "appCss" label but I'd rather have a way of just loading it for this specific note.

[zadam]

Yes, that's true, it doesn't work with CSS.

I'd rather have a way of just loading it for this specific note.

This isn't really possible to do well. We could make CSS load lazily only once the note is rendered but otherwise it will apply to everything. CSS is "global only" and can't be applied to a specific note (DOM subelement) only.