binderhub
binderhub copied to clipboard
jupyterhub
Document how to customise index / root page
The documentation includes a section named "About page customization" but it misses a section "Index page customization".
After https://github.com/jupyterhub/binderhub/pull/545, it was possible to customise the index page. GESIS has used it, see screenshot from https://notebooks.gesis.org.
After the frontend rewrite in https://github.com/jupyterhub/binderhub/pull/1856, binderhub moved from use Jinja to use React.
The React app looks for a HTML DOM element with ID equals to root to construct the page.
Given the component nature of React, should be possible for GESIS to reuse the new <LinkGenerator> and <BuilderLauncher> components.
I will start testing by overwriting https://github.com/jupyterhub/binderhub/blob/3b3743b65a7cc7016a2823a4ea1ca3f1aacd03f3/binderhub/templates/page.html with
<body>
<div id="link-generator"></div>
</body>
<script src="{{static_url("dist/bundle.js")}}"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
const root = ReactDOM.createRoot(document.getElementById('link-generator'));
root.render(React.createElement(LinkGenerator));
});
</script>
@yuvipanda because I have not used React in the last couple of years, am I missing something? Thanks!
cc @arnim
hi @rgaiacs!
We'll have to build in whatever we need. I think the process we should take is:
- Figure out what you wanna actually change
- Decide if the existing system allows for that
- If not, build that out.
So, what do you wanna change?
Thanks @yuvipanda.
@arnim and @rgaiacs must have https://notebooks.gesis.org fitting https://www.gesis.org/styleguide/layout/microsite/basic-architecture.
I will experiment a little and comment here.
I did some experimentation, see https://github.com/jupyterhub/mybinder.org-deploy/pull/3186, and I can use a copy of the template and add HTML elements around https://github.com/jupyterhub/binderhub/blob/3b3743b65a7cc7016a2823a4ea1ca3f1aacd03f3/binderhub/templates/page.html#L24 without do any change to the JavaScript.
I will later send a PR to document this.