The documentation includes a section named "About page customization" but it misses a section "Index page customization".
After #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 #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
The documentation includes a section named "About page customization" but it misses a section "Index page customization".
After #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 #1856,
binderhubmoved from use Jinja to use React.The React app looks for a HTML DOM element with ID equals to
rootto 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
@yuvipanda because I have not used React in the last couple of years, am I missing something? Thanks!
cc @arnim