Make it possible to give static files with the default voila template

[choldgraf]

To my knowledge, right now voila has two options for customization:

• either you use the voila defaults, which output a really barebones notebook+widgets
• you write your own Voila theme, which involves creating a bunch of files/folders and is a bit "advanced" IMO

I think it would be useful if users could give static files in addition to the default static files. E.g., if I want to use the vanilla Voila template, but supply my own extra static files to make the output centered with a fixed width, I could do so with

voila mynotebook.ipynb --extra-static="path/to/myfile.css"

and then this would be inserted into the template for the HTML, and the file copied over to the "static" folder.

This could be a nice way to give people some configurability over the barebones default template without requiring them to create their own template.

What do folks think? (and let me know if this is already possible, in which case I can make a docs PR to add it in)

[maartenbreddels]

nbconvert always tries to load custom.css, maybe we can always load static/custom.css, if we combine that with adding a --extra-template-path=mytemplate option, where it adds that directory to the search path, it would mean creating a directory like this:

mynotebook.ipynb
mytemplate
   static
       custom.css

and invoking voila with e.g. $ voila --template=voila-default --extra-template-path=mytemplate

[choldgraf]

That sounds reasonable to me. Though if the "custom.css" would need to be the name of the file, I feel like it might be simpler to just special-case one CSS and one JS file. So something like $ voila --template=voila-default --extra-css=path/to/custom.css.

[astrojuanlu]

If I understand correctly, the current workaround for this would be to copy the default Voilà theme and then adding custom.css as explained in https://voila.readthedocs.io/en/stable/customize.html#adding-your-own-static-files? Am I missing anything?

[3-w-c]

I found an even easier workaround if you just need to add a CSS file, based on @maartenbreddels's tip.

1. Create a custom/custom.css file (i.e. in a folder called custom) in the directory you launch voila from (likely the root of your project)
2. That's it!

nbconvert will automatically load this file, and it ends up loaded into the Voilá dashboard.

Would it be useful to add this to the Voilá customisation docs?

[trungleduc]

@3-w-c it would be great if you can add this trick to the Voila documentation!