Adding next and back buttons, and anchor links, to shared pages

[sigaloid]

I've made a few changes to my shared page (css + js).

CSS changes:

• Dark mode
• Blue accent colors

Next and previous buttons:

It's really easy to change almost every color (I experimented with https://colorpicker.me/) so I just made a dark + blue theme. It's pretty ugly but I like it.

JS changes (real features):

• anchor links (website.com/share/id#paragraph jumps to paragraph)
• next and previous button (for when you want to read across the tree, sequentially)
• left and right arrows on your keyboard also triggers next and previous across tree

It's sequential, so :

• One
  • Two
    • Three
  • Four
    • Five
• Six

I think the anchor.js would be a good addition to the share page, but the rest is just an example of what I've done with it.

https://gist.github.com/sigaloid/c07252eec41b0326f208986dfd5c10d4

You can test out the anchors here: https://notes.matthew.science/share/JXdxQeGfmcU6

[ferrlen]

This looks really cool! Although I think the website example ( https://notes.matthew.science/share/JXdxQeGfmcU6 ) isn't working, it might be one of my browser addons interfering, but anchor-js isn't loaded, and the relevant lines for it at the beginning of https://notes.matthew.science/share/api/notes/lbVEJLODreYL/download are commented out.

Would it be possible to make your script to add anchors a plugin? Or how could one add it to a note in Trillium?

Thanks!

[ferrlen]

Reading again, I think your code only updates the shared page hosted on the server, am I right? And it doesn't really interact with the Trilium app?

The problem I'm having with adding anchors in Trilium is that CK Editor will afterwards remove any id or class I might have added to a given element. At least I'm not managing to make ids and classes added to elements persist, when the note is reloaded they all vanish

[sigaloid]

Reading again, I think your code only updates the shared page hosted on the server, am I right? And it doesn't really interact with the Trilium app?

Correct, this is only for shared pages.

The problem I'm having with adding anchors in Trilium is that CK Editor will afterwards remove any id or class I might have added to a given element. At least I'm not managing to make ids and classes added to elements persist, when the note is reloaded they all vanish

CKEditor doesn't really allow editing the HTML like that. There's sort of an option to have links like the anchor.js has, in the editing page, but it's with the ToC plugin.

---

In order to add the anchoring or the next/forward buttons to Trilium within shared notes, you can take the javascript.js and the css.css from the gist linked, put them into new notes in Trilium with a type of "JS Frontend" and "CSS" respectively, then on any note you want to add it to, add a relation called shareJs to the javascript note and shareCss to the css note.