Skip to content

Document how to customise index / root page #1907

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
Open
rgaiacs opened this issue Jan 9, 2025 · 4 comments · May be fixed by #1923
Open

Document how to customise index / root page #1907

rgaiacs opened this issue Jan 9, 2025 · 4 comments · May be fixed by #1923
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
@yuvipanda
Copy link
Collaborator

hi @rgaiacs!

We'll have to build in whatever we need. I think the process we should take is:

  1. Figure out what you wanna actually change
  2. Decide if the existing system allows for that
  3. If not, build that out.

So, what do you wanna change?

@rgaiacs
Copy link
Contributor Author

rgaiacs commented Jan 14, 2025

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.

@rgaiacs
Copy link
Contributor Author

rgaiacs commented Jan 22, 2025

I did some experimentation, see jupyterhub/mybinder.org-deploy#3186, and I can use a copy of the template and add HTML elements around

binderhub/binderhub/templates/page.html

Line 24 in 3b3743b

<div id="root"></div>
without do any change to the JavaScript.

I will later send a PR to document this.

@yuvipanda
Copy link
Collaborator

that's excellent @rgaiacs!

rgaiacs added a commit to rgaiacs/binderhub that referenced this issue Jan 30, 2025
@rgaiacs
Document how to customize page
aa98ac4 
Closes jupyterhub#1907
@rgaiacs rgaiacs linked a pull request Jan 30, 2025 that will close this issue
Open
rgaiacs added a commit to rgaiacs/binderhub that referenced this issue Mar 28, 2025
@rgaiacs
Document how to customize page
d61da81 
Closes jupyterhub#1907
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

Successfully merging a pull request may close this issue.

Document how to customize page rgaiacs/binderhub
2 participants
@yuvipanda @rgaiacs