Zero-to-jupyterhub-k8s: Customize and provide the logo - recommendations?

[consideRatio]

@sanzaypant and me wants to customize the logo used by JupyterHub within the z2jh deployment. Anyone with a recommendation on a suitable way to do that?

# For starters, we should probably add this or something similar to the helm chart configuration under `hub.extraConfig`
extraConfig: |
  c.JupyterHub.logo_file = "my_custom_logo.png"

But how should we provide the image to the Container within the Pod? We often provide strings / config etc, but not full binary files like a logo image... Hmmm... I'm not very happy with the options...

Option 1 - External reference

We could reference an externally hosted image (https://my-file-hosting.com/logo.png)

Option 2 - Replace the JupyterHub image

We could instruct the helm chart to use our custom docker image for the hub under hub.image and make that simply do one silly thing: add the logo.

FROM jupyterhub/k8s-hub

COPY my-logo.png /some/destination/folder

Option 3 - Mount templates and files to the hub pod (UPDATED)

I suggest the option so mount both templates and files that are in total smaller than 2 MB. An example configuration can be inspected in this Helm chart that defined z2jh as a chart dependency

[choldgraf]

Perhaps it's worth having a conversation about branding/templating/customizability of JupyterHub+BinderHub next week @ the jupyterhub dev meeting. WDYT?

[sanjaydatasciencedojo]

I was able to change the logo by adding following lines inside config.yaml.

hub:
  extraConfig: |
    import urllib.request
    urllib.request.urlretrieve("url of logo", "logo.png")
    c.JupyterHub.logo_file = 'logo.png'

Update by @consideRatio

It is recommended to not directly set hub.extraConfig to a single string as done above, because then if you configure this from another .yaml file passed with --values, that string will be overridden. Due to this, we recommend the option to configure many different parts nested like hub.extraConfig.anyKeyNameHere, which all then will be combined.

hub:
  extraConfig:
    logoConfig: |
      import urllib.request
      urllib.request.urlretrieve("url of logo", "logo.png")
      c.JupyterHub.logo_file = 'logo.png'

[dkipping]

So the solution of @sanjaydatasciencedojo would still require to host the image right?

Does somebody know if there are any different options to hand in an own image (without hosting it externally) to this date than making an extra docker image for that as described originally by @consideRatio ?

Or did you decide against providing an interface for that because of branding purposes?

Cheers

[manics]

How about patch Jupyterhub to accept a base64 embedded image?

[consideRatio]

Hmmm @manics based on @sanjaydatasciencedojo's solution, we could simply utilize Python to convert a base64 string to an image, and then use that image - i don't know how to do this but i imagine it would work by googling a bit.

extraConfig:
  myCustomLogoConfig:
    my_base64_encoded_logo = "FJA...NTKJN=="
    # do some python to convert the base_64 stuff to logo.png
    c.JupyterHub.logo_file = 'logo.png'

[manics]

It might already be possible? Python 3 urllib includes support for data URIs https://stackoverflow.com/a/43677746/8062212

[dkipping]

tried that in the extraConfig like this:

hub:
  extraConfig: |
    # following lines for the logo in the jupyterhub
    from base64 import decodebytes
    imagestr = b'iVBO...YII='
    with open('my_logo.png','wb') as f:
        f.write(decodebytes(imagestr))
    c.JupyterHub.logo_file = 'my_logo.png'

It's not throwing any errors, but it's also just not changing anything.

[manics]

Does it work if you use the absolute path to the image inside the container?

[dkipping]

when providing the absolute path like:

with open('/etc/jupyterhub/config/my_logo.png','wb') as f:
        f.write(decodebytes(imagestr))
    c.JupyterHub.logo_file = '/etc/jupyterhub/config/my_logo.png'

I get the following error:

with open('/etc/jupyterhub/config/my_logo.png','wb') as f:
    OSError: [Errno 30] Read-only file system: '/etc/jupyterhub/config/my_logo.png'

This explains also why it didn't change anything beforehand I guess.
I already tried putting the image to another high level location like /home/, /srv/ or /etc/ or even /etc/jupyterhub/ but then I get a Permission denied error.

So a config option for that approach would probably be nice for users who don't want to adapt permissions and paste in a base64 data url like this but instead just provide a link to an image.

[dkipping]

Have tried Option 2 of @consideRatio, so serving an own hub image.

I copied the image in the docker image:

FROM jupyterhub/k8s-hub:0.7.0

COPY my_logo.png /etc/jupyterhub/my_logo.png

And added it in the config.yaml:

hub:
  image:
    name: 'me/my-image'
    tag: 'my-tag'
  extraConfig: |
    c.JupyterHub.logo_file = '/etc/jupyterhub/my_logo.png'

When inspecting the files in the container via kubectl exec -it hub-numbers -n jhub -- /bin/bash
I can see that the image exists in /etc/jupyterhub/, as well as in /srv/jupyterhub. I guess it is supposed to be copied there?

The extraConfig line also appears in the hub.extra-config.default.py as it should.

But still, the logo didn't change.

(PS I also tried c.JupyterHub.logo_file = os.path.abspath('/etc/jupyterhub/my_logo.png'), but that also didn't help)

EDIT:
Still have the c.JupyterHub.logo_file = os.path.abspath('/etc/jupyterhub/my_logo.png') version and the logo in a custom hub image, but suddenly it started working. I can't tell when and what I changed that somehow broke it, as I just noticed it without touching code that (purposely) affects the logo.

[consideRatio]

I updated the the blank Option 3 with my suggested approach that works quite well unless many MB of static files should be passed to the templates.

[meeseeksmachine]

This issue has been mentioned on Jupyter Community Forum. There might be relevant details there:

https://discourse.jupyter.org/t/changing-the-logos-of-zero-to-jupyterhub-k8s/5575/8