DOC: Add an interactive shell powered by JupyterLite to the website (p…

…andas-dev#47428)

* Add an interactive shell powered by JupyterLite

* Update to the dedicated JupyterLite deployment

* Add example code

* Move build files to the pandas repo

* Build the jupyterlite website

* Load relative terminal

* Update example code

* Update wording

* Fix trailing spaces

* Move build dependencies to the top-level environment.yml

* Move to `web/interactive_terminal`

* Remove example code

* Add note about the loading time

* Update instructions in the README

* Update build command on CI

* Fix typo in .gitignore

* Lint environment.yml

* Remove unused import

* Undo unrelated changes in environment.yml

* Fix pre-commit check

* Remove unused csv file

.github/workflows/docbuild-and-upload.yml

@@ -46,6 +46,11 @@ jobs:
     - name: Build documentation
       run: doc/make.py --warnings-are-errors
 
+    - name: Build the interactive terminal
+      run: |
+        cd web/interactive_terminal
+        jupyter lite build
+
     - name: Install ssh key
       run: |
         mkdir -m 700 -p ~/.ssh

.gitignore

@@ -122,3 +122,7 @@ doc/build/html/index.html
 doc/tmp.sv
 env/
 doc/source/savefig/
+
+# Interactive terminal generated files #
+########################################
+.jupyterlite.doit.db

environment.yml

@@ -123,3 +123,8 @@ dependencies:
   - feedparser
   - pyyaml
   - requests
+
+  # build the interactive terminal
+  - jupyterlab >=3.4,<4
+  - pip:
+      - jupyterlite==0.1.0b9

requirements-dev.txt

@@ -96,4 +96,6 @@ markdown
 feedparser
 pyyaml
 requests
+jupyterlab >=3.4,<4
+jupyterlite==0.1.0b9
 setuptools>=51.0.0

web/interactive_terminal/README.md

@@ -0,0 +1,35 @@
+# The interactive `pandas` terminal
+
+An interactive terminal to easily try `pandas` in the browser, powered by JupyterLite.
+
+![image](https://user-images.githubusercontent.com/591645/175000291-e8c69f6f-5f2c-48d7-817c-cff05ab2cde9.png)
+
+## Build
+
+The interactive terminal is built with the `jupyterlite` CLI.
+
+First make sure `jupyterlite` is installed:
+
+```bash
+python -m pip install jupyterlite
+```
+
+Then in `web/interactive_terminal`, run the following command:
+
+```bash
+jupyter lite build
+```
+
+## Configuration
+
+This folder contains configuration files for the interactive terminal powered by JupyterLite:
+
+- `jupyter_lite_config.json`: build time configuration, used when building the assets with the `jupyter lite build` command
+- `jupyter-lite.json` run time configuration applied when launching the application in the browser
+
+The interactive `pandas` terminal application enables a couple of optimizations to only include the `repl` app in the generated static assets.
+To learn more about it, check out the JupyterLite documentation:
+
+- Optimizations: https://jupyterlite.readthedocs.io/en/latest/howto/configure/advanced/optimizations.html
+- JupyterLite schema: https://jupyterlite.readthedocs.io/en/latest/reference/schema-v0.html
+- CLI reference: https://jupyterlite.readthedocs.io/en/latest/reference/cli.html

web/interactive_terminal/jupyter-lite.json

@@ -0,0 +1,13 @@
+{
+    "jupyter-lite-schema-version": 0,
+    "jupyter-config-data": {
+      "appName": "Pandas REPL",
+      "appUrl": "./repl",
+      "disabledExtensions": [
+        "@jupyter-widgets/jupyterlab-manager"
+      ],
+      "enableMemoryStorage": true,
+      "settingsStorageDrivers": ["memoryStorageDriver"],
+      "contentsStorageDrivers": ["memoryStorageDriver"]
+    }
+  }

web/interactive_terminal/jupyter_lite_config.json

@@ -0,0 +1,7 @@
+{
+    "LiteBuildConfig": {
+      "apps": ["repl"],
+      "no_unused_shared_packages": true,
+      "output_dir": "../build/lite"
+    }
+  }

web/pandas/getting_started.md

@@ -1,5 +1,18 @@
 # Getting started
 
+## Try it in your browser
+
+You can try `pandas` in your browser with the following interactive shell
+without installing anything on your computer.
+
+*Note it can take up to 30 seconds before the shell finishes loading and is ready to run commands.*
+
+<iframe
+  src="./lite/repl/index.html?toolbar=1&kernel=python&code=import%20pandas%20as%20pd&code=df%20=%20pd.DataFrame(%7B'num_legs':%20%5B2,%204%5D,%20'num_wings':%20%5B2,%200%5D%7D,%20index=%5B'falcon',%20'dog'%5D)"
+  width="100%"
+  height="500px"
+></iframe>
+
 ## Installation instructions
 
 The next steps provides the easiest and recommended way to set up your