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.

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

Customize repl index.template.html questions #7

Open
ivanistheone opened this issue May 7, 2022 · 4 comments
Open

Customize repl index.template.html questions #7

ivanistheone opened this issue May 7, 2022 · 4 comments
Labels
question Further information is requested

Comments

@ivanistheone
Copy link
Collaborator

Hi @jtpio

Is there a way to provide a custom template for the repl app?
I'm guessint the default is this https://github.com/jupyterlite/jupyterlite/blob/main/app/repl/index.template.html

I would like to add some SymPy specific instructions in a sidebar, and generally make a custom repl that looks like the shell.html in #174.

I know we can do this with iframe, but I wonder if there is no better way to do in the same page.

Specific questions:

  1. Is there are setting to override repl/index.template.html with custom one
  2. Is there setting that tells the repl app which DOM element to inject itself into (currently it creates and inserts itself into <body>)
@ivanistheone ivanistheone added the question Further information is requested label May 7, 2022
@ivanistheone
Copy link
Collaborator Author

ivanistheone commented May 24, 2022

@jtpio Do you have any suggestions about this?

This is my next TODO for this project. For live.sympy.org index page, I want to have a customized version of the /live/repl, that looks like this:
custom_build_of_repl_app

(the assumption is that DNS live.sympy.org will be set to sympy.github.io/live/)

See specific questions 1 and 2 above, and to them add add a new question 3. maybe there is another route to do this? (create a custom jupyterlab extension?)

I know we used the iframe approach for the proof-of-concept shell on sympy.org, but for the main live site i'd like to have the real thing ;) [so python and js code can talk together, instead of being isolated in iframe]

@jtpio
Copy link
Contributor

jtpio commented Jun 1, 2022

I'm guessint the default is this https://github.com/jupyterlite/jupyterlite/blob/main/app/repl/index.template.html

  1. Is there are setting to override repl/index.template.html with custom one

Right. The page is created at webpack build time. And the pages are specified here: https://github.com/jupyterlite/jupyterlite/blob/c9846beca88cd84e15119547b00240515c7e6f6d/app/repl/package.json#L207

For now there is no clean way to modify these by site builders. The default apps are shipped in the jupyterlite archive and have already been compiled with webpack (which requires node.js). Agree it would be convenient to allow passing a custom html template, but it would be great if this does not require installing Node.js (unless it's optional).

  1. Is there setting that tells the repl app which DOM element to inject itself into (currently it creates and inserts itself into )

By default it inserts itself in body. This can be changed when starting the application with app.start() to specify a hostID:

https://lumino.readthedocs.io/en/latest/api/application/interfaces/application.istartoptions.html

Although in the case of repl the application is started here and is not easily customizable from the outside:

https://github.com/jupyterlite/jupyterlite/blob/c9846beca88cd84e15119547b00240515c7e6f6d/app/repl/index.template.js#L238

@ivanistheone
Copy link
Collaborator Author

ivanistheone commented Oct 4, 2022

Hi @jtpio

I modified this repo PR13 to change the default index.html in the root to load the basic header with logo and the side menu which we developed for https://www.sympy.org/en/shell.html (it loads the repl/ in iframe with sympy initcode in URL).

However, the jupyter lite seems to use index.html in the root as a place to store configs,
so I added this necessary paragraph:

<!--  # jupyter-config-data
      The JSON in `jupyter-lite.json` is the last that will be loaded by most
      child `index.html` pages, and every field can be overridden.
      See the recognized schema as described in the documentation:           -->
<script id="jupyter-config-data" type="application/json" data-jupyter-lite-root=".">
  {}
</script>

see https://github.com/sympy/live/blob/main/templates/index.html#L62-L68 taken from the original index.html#L53-L55

I didn't add the second part though, because I don't want to navigate to .repl/ I want to just stay put on this page.

    <script type="module">
      await import('./config-utils.js');
    </script>

https://github.com/sympy/live/blob/gh-pages/index.html.bak#L63-L66

It currently works, you can check it out here: https://www.sympy.org/live/ , but I see some Warnings in the console:

Screen Shot 2022-10-04 at 8 27 42 AM

@jtpio

Are these anything to worry about?

Is there anything wrong with the current setup (not running import ./config-utils.js parts)?

It seems to be all extension for the notebook interface, which doesn't conern us since we use only the repl

@jtpio
Copy link
Contributor

jtpio commented Oct 5, 2022

Are these anything to worry about?

Is there anything wrong with the current setup (not running import ./config-utils.js parts)?

@ivanistheone this does look fine in that case despite the errors in the dev tools console.

It's possible that because of these modifications the top-level jupyter-lite.json file is not properly fetched and merged into the global page config. I haven't looked closely yet but maybe you can try to add the settingsUrl parameter manually.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
question Further information is requested
Projects
None yet
Development

No branches or pull requests

2 participants