UI Customization

[jbouder]

Would like to open up some discussion on the best way to customize Nebari from a UI perspective. My expectation is that this is something I could achieve at one of the following levels:

1. Minor branding (title, description, logo, etc): updates to nebari-config.yaml…is this documented somewhere?
2. Major styling updates (font, text colors, buttons, etc)…is this accomplished through the jupyter hub theming? And how do I integrate the theme with my Nebari instance?
3. Functional changes to the UI (new pages, edit existing pages, navigation updates, etc): not sure where to start on this.

Thanks!

[iameskild]

Hi @jbouder, thank you for opening this discussion. I have outlined below what is needed to make some of these UI changes:

1. To customize the title, description, etc. on the Nebari (jupyterhub) landing page, you can modify the theme.jupyterhub section in the nebari-config.yaml (docs here).

theme:
  jupyterhub: 
    hub_title: <title>
    hub_subtitle: <subtitle>
    welcome: |
      <welcome message>

2. We have a custom Nebari jupyterhub theme that is controlled via this repo. This nebari-jupyterhub-theme package is then included in the base JupyterHub docker image here. To customize this theme on your own, you would need to copy and modify the docker image for JupyterHub (such as including your theme package as we have done) and push it to a public registry. Then from the nebari-config.yaml, you will need to specify this new image location:

default_images:
  jupyterhub: <location of customize jupyterhub image> # includes registry, image name and tag

3. Making functional changes to the Nebari home page will be a little trickier. I believe adding new pages under the domain your Nebari cluster is deployed can be done without any changes to Nebari if you're okay with having it under newpage.<your nebari domain> instead of <your nebari domain>/newpage. The latter will likely require modifications to the internal traefik proxy to ensure everything is routed correctly. As for editing existing pages, this will require some more investigation on my part; this might be as simple as editing the jupyterhub-theme package (as mentioned in 2.) but I would need to double-check that.

[jbouder]

Thanks @iameskild, this is all very helpful! Should be good to push forward on #1 and #2. As for #3, I am definitely looking to go the /newpage route so will wait for some addition direction on that.