Skip to content

Document how to customise index / root page #1907

Open
@rgaiacs

Description

@rgaiacs

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.

Screenshot 2025-01-09 at 16-45-16 Binder

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

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions