Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Document how to customise index / root page #1907

Open
rgaiacs opened this issue Jan 9, 2025 · 0 comments
Open

Document how to customise index / root page #1907

rgaiacs opened this issue Jan 9, 2025 · 0 comments
Assignees
@rgaiacs
Labels
enhancement

Comments

@rgaiacs
Copy link
Contributor

rgaiacs commented Jan 9, 2025

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
@rgaiacs rgaiacs self-assigned this Jan 9, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@rgaiacs rgaiacs

Labels
enhancement
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@rgaiacs