Customizing rendering of UI
jonatansberg opened this issue · comments
What would be the best way to customize the rendering of e.g. the sidebar and other UI chrome? I've managed to improve the "documentation" page layout a bit by adding some very specific CSS, but I'd also like to tweak the way things are rendered.
More specifically, I'd like to have more control of the rendering and ordering of things in the sidebar. Due to how our project(s) are set up using naming conventions and/or custom svench folders is not a viable way for us to deal with this at scale.
Svench has been designed with the idea that the user should be able to inject their own Svelte components for parts (menu, top bar...) or all (App.svelte) of the UI. Unfortunately, even if the basis is here, this API is nowhere near finalized... This is something I'm keen to prioritize though, if you've got an interesting use case to try it against.
Now, if your main need is to customize the menu tree without relying on files' names, there is a bunch of options that you can already use in Svench components. I'm pretty satisfied with those, so I don't expect this API to move in the foreseeable future.
<svench:options order="AAA" title="What's in a name?" path="cmp/Buzz" />I hope they're pretty self-explanatory...
order is prepended to the filename to form the "sort key", that is the string that will eventually be compared to others keys (filename and/or order prefixed filenames) to sort the tree.
path lets you completely rewrite the position of the item in the tree.
FYI the menu's tree is generated at build time, not in the client, and so that's also where those options are implemented. The rationale is that the browser would be repetitively doing unneeded work that is only needed once. And also Routix (the generator) is optimized to support incremental updates, specifically to mitigate increasing rebuild times in watch mode (of Svench's routes / tree) as the project grows... Maybe it would make sense to give Svench's users more control into this process to customize the menu.