Description
This is related with #1856.
We are using a combination of Jinja2 and React.
- Jinja2 renders https://github.com/jupyterhub/binderhub/blob/1a445a2903910670bbc654b66eae870f96ad65c1/binderhub/templates/page.html into HTML.
- HTML is sent to the user's web browser.
- User's web browser parsers the HTML and make requests for assets.
- User's web browser receives https://github.com/jupyterhub/binderhub/blob/1a445a2903910670bbc654b66eae870f96ad65c1/binderhub/static/js/App.jsx
- User's web browser executes React based app
- React based app appends CSS file https://github.com/jupyterhub/binderhub/blob/main/binderhub/static/js/index.scss to
<head>.
Because the CSS file is appended by React, this blocks users to customise the CSS.
Proposed change
I want to move
binderhub/binderhub/static/js/App.jsx
Lines 5 to 8 in 1a445a2
This will require to convert https://github.com/jupyterhub/binderhub/blob/main/binderhub/static/js/index.scss into CSS. This can be accomplished using webpack that is already a dependency of the project.
Alternative options
I could not think of viable alternative options.
User should not have to edit https://github.com/jupyterhub/binderhub/blob/1a445a2903910670bbc654b66eae870f96ad65c1/binderhub/static/js/App.jsx to change the style.
Edit https://github.com/jupyterhub/binderhub/blob/1a445a2903910670bbc654b66eae870f96ad65c1/binderhub/templates/page.html does not work because React will append the CSS and it will have precedence.
Who would use this feature?
This will be used by GESIS as part of the server migration mentioned in jupyterhub/mybinder.org-deploy#3264.
Other users of BinderHub also have interested in custom CSS as mentioned in #1949.