Streamline jupyter setup and checks

Author: julesvanrie

_partials/es/nbextensions.md

@@ -1,64 +1,12 @@
-## Mejora `jupyter` notebook y chequeo
-
-### CSS personalizado
+## Mejora `jupyter` notebook
 
 Mejora la visualización del [elemento `details` para revelación de información](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) en tus notebooks.
 
-Abre `custom/custom.css` en el directorio config:
-```bash
-cd $(jupyter --config-dir)
-mkdir -p custom
-touch custom/custom.css
-<CODE_EDITOR_CMD> custom/custom.css
-```
-Edita `custom.css` con la siguiente información:
-
-```css
-summary {
-    cursor: pointer;
-    display:list-item;
-}
-summary::marker {
-    font-size: 1em;
-}
-```
-
-Puedes cerrar <CODE_EDITOR>.
-
-### Chequeo de `jupyter`
-
-Reinicia tu terminal:
-
-```bash
-exec zsh
-```
-
-Ahora verifica que puedas iniciar un servidor de notebook en tu máquina:
+Ejecuta las siguientes líneas para crear una hoja de estilos `custom.css` en tu directorio de configuración de Jupyter:
 
 ```bash
-jupyter notebook
+LOCATION=$(jupyter --config-dir)/custom
+SOURCE=https://raw.githubusercontent.com/lewagon/data-setup/refs/heads/master/specs/jupyter/custom.css
+mkdir -p $LOCATION
+curl $SOURCE > $LOCATION/custom.css
 ```
-
-Tu navegador web debería abrir en una ventana `jupyter`:
-
-![jupyter.png](images/jupyter.png)
-
-Haz clic en `New`:
-
-![jupyter_new.png](images/jupyter_new.png)
-
-Debería abrirse una pestaña en un nuevo notebook:
-
-![jupyter_notebook.png](images/jupyter_notebook.png)
-
-### Chequeo de `nbextensions`
-
-Haz una revisión de las `jupyter notebooks nbextensions`. Haz clic en `Nbextensions`:
-
-![jupyter_nbextensions.png](images/jupyter_nbextensions.png)
-
-Deselecciona _"disable configuration for nbextensions without explicit compatibility"_. Esto significa deshabilitar la configuración de nbextensions sin compatibilidad explícita. Luego verifica que _al menos_ las `nbextensions` marcadas en rojo estén habilitadas:
-
-![nbextensions.png](images/nbextensions.png)
-
-Puedes cerrar tu navegador web y luego cerrar el servidor jupyter con `CTRL` + `C`.

_partials/es/python_checkup.md

@@ -1,5 +1,11 @@
 ### Chqueo de la configuración de Python
 
+Reinicia tu terminal:
+
+```bash
+cd ~/code && exec zsh
+```
+
 Verifica tu versión de Python con los siguientes comandos:
 ```bash
 zsh -c "$(curl -fsSL <PYTHON_CHECKER_URL>)" <PYTHON_VERSION>
@@ -15,17 +21,31 @@ Ahora ejecuta el siguiente comando para verificar que puedas cargar estos paquet
 python -c "$(curl -fsSL <PIP_LOADER_URL>)"
 ```
 
-Asegúrate de que puedas usar Jupyter:
+Ahora verifica que puedas iniciar un servidor de notebook en tu máquina:
 
 ```bash
 jupyter notebook
 ```
 
-Y abre un notebook `Python 3`.
+Tu navegador web debería abrir en una ventana `jupyter`:
+
+![jupyter.png](images/jupyter.png)
+
+Haz clic en `New` y, en el menú desplegable, selecciona Python 3 (ipykernel):
+
+![jupyter_new.png](images/jupyter_new.png)
+
+Debería abrirse una pestaña en un nuevo notebook:
+
+![jupyter_notebook.png](images/jupyter_notebook.png)
 
 Asegúrate de que estés usando la versión correcta de python en el notebook. Abre una celda y ejecuta lo siguiente:
 ``` python
 import sys; sys.version
 ```
 
+Debería mostrar <PYTHON_VERSION> seguido de algunos detalles adicionales. Si no es así, consulta con un TA.
+
+Puedes cerrar tu navegador web y luego cerrar el servidor jupyter con `CTRL` + `C`.
+
 ¡Listo! Ya tienes un virtual env de python completo con todos los paquetes tercerizados que necesitarás en el bootcamp.

_partials/nbextensions.md

@@ -1,54 +1,12 @@
-## `jupyter` notebook tweaking and check up
+## `jupyter` notebook tweaking
 
-### Custom CSS
+Let's improve the display of the [`details` disclosure elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) in your notebooks.
 
-Improve the display of the [`details` disclosure elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) in your notebooks.
+Run the following lines to create a `custom.css` stylesheet in your Jupyter config directory:
 
-Open `custom/custom.css` in the config directory:
 ```bash
-cd $(jupyter --config-dir)
-mkdir -p custom
-touch custom/custom.css
-<CODE_EDITOR_CMD> custom/custom.css
+LOCATION=$(jupyter --config-dir)/custom
+SOURCE=https://raw.githubusercontent.com/lewagon/data-setup/refs/heads/master/specs/jupyter/custom.css
+mkdir -p $LOCATION
+curl $SOURCE > $LOCATION/custom.css
 ```
-Edit `custom.css` with:
-
-```css
-summary {
-    cursor: pointer;
-    display:list-item;
-}
-summary::marker {
-    font-size: 1em;
-}
-```
-
-You can close <CODE_EDITOR>.
-
-### `jupyter` check up
-
-Let's reset your terminal:
-
-```bash
-exec zsh
-```
-
-Now, check you can launch a notebook server on your machine:
-
-```bash
-jupyter notebook
-```
-
-Your web browser should open on a `jupyter` window:
-
-![jupyter.png](images/jupyter.png)
-
-Click on `New`:
-
-![jupyter_new.png](images/jupyter_new.png)
-
-A tab should open on a new notebook:
-
-![jupyter_notebook.png](images/jupyter_notebook.png)
-
-You can close your web browser then terminate the jupyter server with `CTRL` + `C`.

_partials/python_checkup.md

@@ -1,5 +1,11 @@
 ### Python setup check up
 
+Let's reset your terminal:
+
+```bash
+cd ~/code && exec zsh
+```
+
 Check your Python version with the following commands:
 ```bash
 zsh -c "$(curl -fsSL <PYTHON_CHECKER_URL>)" <PYTHON_VERSION>
@@ -21,11 +27,25 @@ Make sure you can run Jupyter:
 jupyter notebook
 ```
 
-And open a `Python 3` notebook.
+Your web browser should open on a `jupyter` window:
+
+![jupyter.png](images/jupyter.png)
+
+Click on `New` and in the dropdown menu select `Python 3 (ipykernel)`:
 
-Make sure that you are running the correct python version in the notebook. Open a cell and run :
+![jupyter_new.png](images/jupyter_new.png)
+
+A tab should open on a new notebook:
+
+![jupyter_notebook.png](images/jupyter_notebook.png)
+
+Make sure that you are running the correct python version in the notebook. Open a cell and run:
 ``` python
 import sys; sys.version
 ```
 
+It should output `<PYTHON_VERSION>` followed by some more details. If not, check with a TA.
+
+You can close your web browser then terminate the jupyter server with `CTRL` + `C`.
+
 Here you have it! A complete python virtual env with all the third-party packages you'll need for the whole bootcamp.

images/jupyter.png

@@ -0,0 +1,57 @@
+/* Custom CSS for Jupyter Notebook
+
+   Should go into ~/.jupyter/custom/custom.css
+
+   Only impacts the Jupyter Notebook interface, not VS Code for example
+*/
+
+
+/* Prettify disclosure elements used for hints and solutions
+   - Use same color as cell editor background
+   - Add padding and margin to make it look like a card
+   - Make the summary element bold
+   - Add a marker to the summary element
+*/
+
+details {
+  padding: 5px 10px 5px;
+  margin-bottom: 1em;
+}
+
+details[open]{
+}
+
+body[data-jp-theme-light=true] details {
+  background-color: var(--jp-cell-editor-background);
+}
+
+body[data-jp-theme-light=false] details {
+  background-color: var(--jp-cell-editor-background);
+}
+
+summary {
+  cursor: pointer;
+  display: list-item;
+  font-weight: bold;
+  background-color: var(--jp-cell-editor-background);
+}
+
+summary::marker {
+  font-size: 1em;
+}
+
+details > p {
+  margin-top: 5px !important;
+  margin-bottom: 0 !important;
+}
+
+/* Reference for future use
+*/
+
+body[data-jp-theme-light=true] .jp-InputArea-editor {
+  /* To change code and markdown input cells in light mode */
+}
+
+body[data-jp-theme-light=false] .jp-InputArea-editor {
+  /* To change code and markdown input cells in dark mode */
+}