Trilium share theme customization
I'm going to have a hard time remembering all the changes I've made, and struggling with what to document. Specifying everything is too much → go read the code, but saying only read the code will leave me lost when I come back. sigh.
Started with zerebos/trilium.rocks share theme. Next time, use the release pkg by perfectra1n instead of zerebos default. (avoids having to use npm to compile the resources together.)
Adding image to nav pane was a lot of fun, and extremely frustrating. I'm pretty happy with the final result, with also much wishes for improvement :) Originally wanted Winter Fire Dancer as a background image on left bleeding over into content area. The human figure presenting the active content to reader's right is a perfect thematic idea.
I had to give up on the background concept though because making text legible on top of this kind of image is just too hard. They compete with each other. Eventually decided, after several days, of simply adding the image as tail or footer to the navigation content. It will move up/down as nav expands and contracts. Better accessibility, and also simpler html+css skeleton. Maybe a future revisit will find a method to bring back the original blending across panels idea.
I'm a little unhappy with the blurring effect of the current solution when in light-theme mode, but need to move on to other things. I could get stuck in a back eddy of perfecting this element for many more days to weeks if not mindful of everything I also want to do.
Striking a balance between modifying for my own use while also structuring to enable re-use by others adds a fair bit of work. My default is to always attempt structure-for-all but I'm just not up to that kind of lift presently. I feel some sadness on that, but generating and maintaining a sense of velocity and direction is more important these days.
Learnings#
#shareAlias=___ can be used in the templates instead of noteId, this means instead of<style src="api/notes/7f2309ksdn/download"/> we can use src = "/share/foo-theme.css". Much simpler templates, but does mean config work after importing the theme to apply aliases, and make sure they don't conflict with existing ones.
Enabling Trilium's image compression setting means PNG are converted to Jpeg. When importing uncheck compress if preserving transparency is wanted. (It seems to be okay to still have the global option enabled when importing.)
Embedded javascript for js in html templates is a thing, and Trilium uses it for theming.
css filter functions - def. need to lean into these, much potential.
How to fade image edges using linear-gradient and stacking/compositing functions. It works, but so wordy. I don't like how many extra lines it added to my css for a conceptually simple idea.