Some way to allow for modifying the branding in Binder

[choldgraf]

We should make it possible to modify / extend the branding for Binder sessions. Both for Binder branding itself, but also in case other groups want to add their own logos etc for hosted BinderHubs. Right now I can think of three primary areas:

1. The landing page (e.g. the binder logo at the top of mybinder.org)
2. A loading / building page (while the spinner is spinning)
3. Within a live Binder session

Numbers 1 and 2 should be a matter of letting people provide a path to a PNG file that will be displayed somewhere on the page (e.g. "Binder, Powered by UC Berkeley").

Number 3 will be tricky as we support more and more UIs. But maybe possible with the appendix PR that @minrk added?

I believe that @gouarin and @enolfc were both interested in this, so perhaps they can chime in with their thoughts as well.

[choldgraf]

another ping on this one since it came up a few times over the last few weeks, in particular @enolfc and @gouarin and maybe @nthiery who mentioned this at the orsay meeting

[betatim]

We now have support for appending to a Dockerfile (see #459). This means that we have the infrastructure for making this happen inside the live binder. We can inject our own themes for the single user notebook that include some binder branding/advice/link to original repo/GA tracking

Has someone tried modifying the look of the singleuser notebook server already?

[bitnik]

For numbers 1 and 2, do you think is it a good idea to enable having custom/extended templates similar to https://github.com/jupyterhub/jupyterhub/pull/1601? If you think so, I can try to bring the same feature to BinderHub.

[choldgraf]

Good question - @minrk do you have an intuition for whether we'd be well-off to make templates for BinderHub pages?

[minrk]

Yes, I think we can and should. We're already using jinja, so it's mostly a matter of exposing the right configuration, and good use of blocks in our templates, to make it easy to customize the right stuff.

[bitnik]

@minrk I made a PR (https://github.com/jupyterhub/binderhub/pull/545) for this.

@betatim I didn't really change the look of single user server but while trying out build appendix feature, I added a button by using custom.js. This button (next to logout button) copies sharable user server link (with token) into clipboard. An example repo built after this feature is https://notebooks.gesis.org/binder/v2/gh/binder-examples/requirements/master.

[choldgraf]

@bitnik wow that's great!

We've been talking about something like this in Binder for quite some time (#160 )

Though there's an interesting difference - you're actually sharing a link to the live binder session, as opposed to the "build link" for a new binder. Cool!

Would love to see the lines where you added that in, as I think we could spot-check #160 pretty easily with this (however it'd be more challenging if we needed the same support for jupyterlab + Rstudio etc)

[bitnik]

@choldgraf I had myself some difficulties about sharing binder links, so that was the first thing I tried when I saw build.appendix is implemented :)

The code is here.

run-appendix script adds the content of static/custom.js into ~/.jupyter/custom/custom.js inside user notebook server. And this ~/.jupyter/custom/custom.js is executed, when notebook app starts.

What static/custom.js does is basicly that it adds a button next to logout and every time when that button is clicked, it copies the url of jupyter logo (on top left, it actually holds url to share binder session) into clipboard.

I think we could add repo and build links in the same way, since they are already hold as environment variables.

[bitnik]

Btw I just updated the code to add buttons for repo and build links.

[jhamman]

I took a hack at using the approach in #545 today. The templates functionality works great. I wasn't able to hook up the static dependencies (logos, etc). A few notes on what I did as it may be useful to others:

binder deployment: http://binder.pangeo.io/

• new repo holding templates/static resources: https://github.com/pangeo-data/pangeo-custom-binderhub-templates/tree/aef402d181aafb84502edd4c8246de41faeb5a39
• Updated values section in binderhub helm chart: https://github.com/pangeo-data/pangeo-binder/blob/b37e99a700689a1f784ef56882c59a8ea382f61a/deploy/binder_config.yml#L14-L40

Like I said, this worked pretty well for the templates but it seems the static resources are clearly handled differently. I think this feature will be used fairly often by new deployments so I really encourage working up some proper documentation. I'm curious if there are any known uses of this PR and if they can be shared (@bitnik - I image you had a use case for the features in #545).

[bitnik]

@jhamman your url prefix for static files is the same as default url prefix and it is overridden by it. You have to set it different than it, e.g. extra_static/. Then you have to change url of your static files in templates, in this case for your logo: src="/extra_static/pangeo.svg"

I think even better you can define a template variable and use it in templates as url prefix for extra static files:

template:
  path: "/etc/binderhub/templates/templates/templates"
  static:
    path: "/etc/binderhub/templates/templates/templates"
    urlPrefix: extra_static/
  variables:
    EXTRA_STATIC_URL_PREFIX: "<binderhub_base_url>extra_static/"

and then you can use: src="{{ EXTRA_STATIC_URL_PREFIX }}pangeo.svg"

I hope this works. And you are right, i will try to document it soon!

[jhamman]

Thanks @bitnik - this is up and working now (thanks also to @dsludwig).