Revise screen shots in docs (#125)

* Custom styling for screenshot images, with box shadow

* Smaller images, subtler styling, fix bad admonition

* Smaller images, uses new CSS class

docs/source/_static/css/custom.css

@@ -0,0 +1,5 @@
+img.screenshot {
+    /* Copied from div.admonition */
+    box-shadow: 0 .2rem .5rem var(--pst-color-shadow),0 0 .0625rem var(--pst-color-shadow);
+    border-color: var(--pst-color-info);
+}

docs/source/conf.py

@@ -25,6 +25,10 @@
 html_theme = "pydata_sphinx_theme"
 html_static_path = ['_static']
 
+html_css_files = [
+    'css/custom.css',
+]
+
 # -- Jupyter theming -------------------------------------------------
 html_logo = "_static/jupyter_logo.png"
 

docs/source/users/index.md

@@ -131,11 +131,15 @@ The chat interface sends data to generative AI models hosted by third parties. P
 
 Once you have started JupyterLab, click the new "chat" icon in the left side panel to open the chat interface. You can right-click on the panel icon and move it to the other side, if you prefer.
 
-![Screen shot of the initial, blank, chat interface.](../_static/chat-icon-left-tab-bar.png)
+<img src="../_static/chat-icon-left-tab-bar.png"
+    alt="Screen shot of the initial, blank, chat interface."
+    class="screenshot" />
 
 To compose a message, type it in the text box at the bottom of the chat interface and press <kbd>SHIFT</kbd>+<kbd>ENTER</kbd> to send. You can press <kbd>ENTER</kbd> to add a new line. Once you have sent a message, you should see a response from Jupyter AI.
 
-![Screen shot of an example "Hello world" message sent to Jupyter AI, who responds with "Hello! Is there anything you would like to discuss or ask me?"](../_static/chat-hello-world.png)
+<img src="../_static/chat-hello-world.png"
+    alt='Screen shot of an example "Hello world" message sent to Jupyter AI, who responds with "Hello! Is there anything you would like to discuss or ask me?"'
+    class="screenshot" />
 
 ### Asking about something in your notebook
 
@@ -150,11 +154,15 @@ Review your model provider's cost policy before making large requests.
 
 After highlighting a portion of your notebook, check "Include selection" in the chat panel, type your message, and press <kbd>SHIFT</kbd>+<kbd>ENTER</kbd> to send your message. Your outgoing message will include your selection.
 
-![Screen shot of JupyterLab with Jupyter AI's chat panel active. A Python function is selected, the user has "What does this code do?" as their prompt, and the user has chosen to include the selection with their message.](../_static/chat-interface-selection.png)
+<img src="../_static/chat-interface-selection.png"
+    alt='Screen shot of JupyterLab with Jupyter AI&apos;s chat panel active. A Python function is selected, the user has "What does this code do?" as their prompt, and the user has chosen to include the selection with their message.'
+    class="screenshot" />
 
 Below your message, you will see Jupyter AI's response.
 
-![Screen shot of Jupyter AI's chat panel, showing an answer to the question asked above.](../_static/chat-explain-code-output.png)
+<img src="../_static/chat-explain-code-output.png"
+    alt="Screen shot of Jupyter AI's chat panel, showing an answer to the question asked above."
+    class="screenshot" />
 
 You can copy Jupyter AI's response to the clipboard so that you can paste it into your notebook, or into any other application. You can also choose to replace the selection with Jupyter AI's response by clicking "Replace selection" before you send your message.
 
@@ -165,23 +173,31 @@ sends its response to your message. Review any generated code carefully before
 you run it.
 :::
 
-![Screen shot of Jupyter AI with a Python function selected, the user having typed "Rewrite this function to be iterative, not recursive" as their prompt, and with the user having chosen to include the selection with their message and to replace the selection with the response.](../_static/chat-replace-selection-input.png)
+<img src="../_static/chat-replace-selection-input.png"
+    alt='Screen shot of Jupyter AI with a Python function selected, the user having typed "Rewrite this function to be iterative, not recursive" as their prompt, and with the user having chosen to include the selection with their message and to replace the selection with the response.'
+    class="screenshot" />
 
 After Jupyter AI sends a response, your notebook will be updated immediately with the response replacing the selection. You can also see the response in the chat panel.
 
-![Screen shot of Jupyter AI displaying a response in the chat panel and in the notebook.](../_static/chat-replace-selection-output.png)
+<img src="../_static/chat-replace-selection-output.png"
+    alt='Screen shot of Jupyter AI displaying a response in the chat panel and in the notebook.'
+    class="screenshot" />
 
 ### Generating a new notebook
 
 You can use Jupyter AI to generate an entire notebook from a text prompt. To get started, open the chat panel, and send it a message starting with `/generate`.
 
-![Screen shot of a prompt reading "/generate A demonstration of how to use Matplotlib" in Jupyter AI](../_static/chat-generate-input.png)
+<img src="../_static/chat-generate-input.png"
+    alt='Screen shot of a prompt reading "/generate A demonstration of how to use Matplotlib" in Jupyter AI'
+    class="screenshot" />
 
 Generating a notebook can take a substantial amount of time, so Jupyter AI will respond to your message immediately while it works. You can continue to ask it other questions in the meantime.
 
-![Screen shot of Jupyter AI responding to a generate message with a message that it is working on a notebook.](../_static/chat-generate-command-response.png)
+<img src="../_static/chat-generate-command-response.png"
+    alt="Screen shot of Jupyter AI responding to a generate message with a message that it is working on a notebook."
+    class="screenshot" />
 
-:::{info}
+:::{note}
 :name: generate-progress
 Especially if your prompt is detailed, it may take several minutes to generate
 your notebook. During this time, you can still use JupyterLab and Jupyter AI
@@ -191,7 +207,9 @@ Jupyter AI is working.
 
 When Jupyter AI is done generating your notebook, it will send you another message with the filename that it generated.
 
-![Screen shot of Jupyter AI response indicating the file name that it wrote.](../_static/chat-generate-file.png)
+<img src="../_static/chat-generate-file.png"
+    alt="Screen shot of Jupyter AI response indicating the file name that it wrote."
+    class="screenshot" />
 
 You can then open this file using the file browser.
 
@@ -202,23 +220,31 @@ you run the code contained in them. Please review all generated code carefully
 before you run it.
 :::
 
-![Screen shot of generated notebook built using Jupyter AI](../_static/chat-generate-notebook-opened.png)
+<img src="../_static/chat-generate-notebook-opened.png"
+    alt="Screen shot of generated notebook built using Jupyter AI"
+    class="screenshot" />
 
 ### Learning about local data
 
 Using the `/learn` command, you can teach Jupyter AI about local data so that it can include it when answering your questions. This data is **not** sent to remote AI model providers.
 
 To teach Jupyter AI about a folder full of documentation, for example, run `/learn docs/`. You will receive a response when Jupyter AI has indexed this documentation in a local vector database.
 
-![Screen shot of "/learn docs/" command and a response.](../_static/chat-learn-docs.png)
+<img src="../_static/chat-learn-docs.png"
+    alt='Screen shot of "/learn docs/" command and a response.'
+    class="screenshot" />
 
 You can then use `/ask` to ask a question specifically about the data that you taught Jupyter AI with `/learn`.
 
-![Screen shot of an "/ask" command and a response.](../_static/chat-ask-command.png)
+<img src="../_static/chat-ask-command.png"
+    alt='Screen shot of an "/ask" command and a response.'
+    class="screenshot" />
 
 To clear the local vector database, you can run `/learn -d` and Jupyter AI will forget all information that it learned from your `/learn` commands.
 
-![Screen shot of a "/learn -d" command and a response.](../_static/chat-learn-delete.png)
+<img src="../_static/chat-learn-delete.png"
+    alt='Screen shot of a "/learn -d" command and a response.'
+    class="screenshot" />
 
 ### Additional chat commands