Dynamically render the navigation bar

josephlewis42 commented 2 months ago

Currently, the navigation bar is generated for each document using a template. This leads to the following issues:

The DevDocs CSS doesn't work quite right because we're using native HTML tags to collapse/expand content rather than JS. Ideally, we'd be able to use DevDocs CSS out of the box.
Pages like the index and licenses are treated as special cases because that matches how they're done in DevDocs.
The highlighted page doesn't change as you navigate through the structure on the same page because there's no JS to react to navigation changes.
Each page in the ZIM has the full navigation tree embedded which causes significant size increases for navigation heavy documents.

Instead, we should dynamically generate the navbar using JS and some kind of optimized navigation intermediate representation in JSON that encodes all the special sorting and special case links that DevDocs does.

benoit74 commented 2 months ago

Agreed, thank you for detailing the issue and plan!

josephlewis42 commented 2 months ago

I'm working on this now. It's my first time using Vue2, WebComponents, and TypeScript together so there are a lot of learning opportunities!

benoit74 commented 2 months ago

I hope you misspelled Vue2 and meant Vue3 ^^

If you did not already found it, you might be interested to have a look into https://github.com/openzim/youtube/tree/main/zimui or the soon-to-be-merged https://github.com/openzim/libretexts/tree/minimal_structure/zimui

Not that we are Vue3 experts at all, but this is our "state of the art" with our limited experience so far.

openzim / devdocs

Dynamically render the navigation bar #24