Customize repl index.template.html questions

ivanistheone commented 2 years ago

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:

Is there are setting to override repl/index.template.html with custom one
Is there setting that tells the repl app which DOM element to inject itself into (currently it creates and inserts itself into <body>)

ivanistheone commented 2 years ago

@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:

(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 commented 2 years ago

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

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).

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 commented 2 years ago

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:

@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 commented 2 years ago

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.

sympy / live

Customize repl index.template.html questions #7