Jupyterlite button - patched, merged version of #655 (#914)

* Jupyterlite button

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* Add some documentation for JupyterLite

* Update docs/content/launch.md

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Co-authored-by: Chris Holdgraf <[email protected]>

Author: 3 people

docs/content/launch.md

@@ -2,11 +2,13 @@
 # Launch buttons for interactivity
 
 You can automatically add buttons that allow users to interact with your
-book's content. This is either by directing them to a BinderHub or JupyterHub
-that runs in the cloud, or by making your page interactive using Thebe.
+book's content. This is can be by directing them to
+a [JupyterLite](https://jupyterlite.readthedocs.io) installation (that runs in
+the user's browser) or one of BinderHub or JupyterHub (that runs in the
+cloud), or by making your page interactive using Thebe.
 
-To use either Binder or JupyterHub links, you'll first need to configure your
-documentation's repository url:
+To use any of JupyterLite or Binder or JupyterHub links, you'll first need to
+configure your documentation's repository url:
 
 ```python
 html_theme_options = {
@@ -26,6 +28,28 @@ folder as your content, then Binder/JupyterHub links will point to the ipynb
 file instead of the text file.
 ```
 
+## JupyterLite
+
+If you are adding [JupyterLite](https://github.com/jupyterlite/jupyterlite) links to your page, first work out where your
+JupyterLite instance will be serving from, then add the URL to your
+configuration. In the example below, we've set up JupyterLite pages at the
+base URL of the main pages site, and at subdirectory `interact/lab`:
+
+```python
+html_theme_options = {
+    ...
+    "launch_buttons": {
+        "jupyterlite_url": "interact/lab/index.html"
+    },
+    ...
+}
+```
+
+See <https://odsti.github.io/cfd-textbook> for an example
+[JupyterBook](https://jupyterbook.org) project serving JupyterLite using this
+configuration, and <https://github.com/odsti/cfd-textbook> for the driving
+repository.
+
 ## Binder / BinderHub
 
 To add Binder links to your page, add the following configuration:

src/sphinx_book_theme/header_buttons/launch.py

@@ -49,7 +49,13 @@ def add_launch_buttons(
         or not _is_notebook(app, context)
         or not any(
             launch_buttons.get(key)
-            for key in ("binderhub_url", "jupyterhub_url", "thebe", "colab_url")
+            for key in (
+                "binderhub_url",
+                "jupyterhub_url",
+                "thebe",
+                "colab_url",
+                "jupyterlite_url",
+            )
         )
     ):
         return
@@ -114,6 +120,9 @@ def add_launch_buttons(
     binderhub_url = launch_buttons.get("binderhub_url", "").strip("/")
     colab_url = launch_buttons.get("colab_url", "").strip("/")
     deepnote_url = launch_buttons.get("deepnote_url", "").strip("/")
+    # jupyterlite_url could be absolute but without a domain, so we only
+    # strip trailing slashes, not leading ones
+    jupyterlite_url = launch_buttons.get("jupyterlite_url", "").rstrip("/")
 
     # Loop through each provider and add a button for it if needed
     if binderhub_url:
@@ -187,6 +196,20 @@ def add_launch_buttons(
                 }
             )
 
+    if jupyterlite_url:
+        jl_ext = launch_buttons.get("jupyterlite_ext", extension).strip()
+        jl_rel_repo = f"{book_relpath}{pagename}{jl_ext}"
+        url = f"{jupyterlite_url}?path={jl_rel_repo}"
+        launch_buttons_list.append(
+            {
+                "type": "link",
+                "text": "JupyterLite",
+                "tooltip": "Launch via JupyterLite",
+                "icon": "_static/images/logo_jupyterlite.svg",
+                "url": url,
+            }
+        )
+
     # Add thebe flag in context
     if launch_buttons.get("thebe", False):
         launch_buttons_list.append(