Fix Tutorial Issues (#6614)

README.md

@@ -39,7 +39,8 @@ Enjoying Panel? Show your support with a [Github star](https://github.com/holovi
 </tr>
 <tr>
 <td>Docs</td>
-<td><a href="https://github.com/holoviz/panel/tree/gh-pages"><img src="https://img.shields.io/github/last-commit/holoviz/panel/gh-pages.svg" alt="gh-pages"></a> <a href="https://panel.holoviz.org"><img src="https://img.shields.io/website-up-down-green-red/https/panel.holoviz.org.svg" alt="site"></a></td>
+<td><a href="https://github.com/holoviz/panel/tree/gh-pages"><img src="https://img.shields.io/github/last-commit/holoviz/panel/gh-pages.svg" alt="gh-pages"></a> <a href="https://panel.holoviz.org"><img src="https://img.shields.io/website-up-down-green-red/https/panel.holoviz.org.svg" alt="site"></a> <a href="https://holoviz.goatcounter.com/?filter=%2Fpanel.holoviz.org"><img src="https://img.shields.io/badge/GoatCounter-analytics-blue" alt="site"></a>
+</td>
 </tr>
 <tr>
 <td>Notebooks</td>

doc/how_to/concurrency/dask.md

@@ -142,8 +142,8 @@ pn.Column(
 
 You can now run `panel serve app.py` and the app will look like
 
-<video controls="" poster="../../_static/images/dask_fibonacci_queue.png">
-    <source src="https://assets.holoviz.org/panel/how_to/concurrency/dask-fibonacci-queue.mp4" type="video/mp4" style="max-height: 400px; max-width: 100%;">
+<video muted controls loop poster="../../_static/images/dask_fibonacci_queue.png" style="max-height: 400px; max-width: 100%;">
+    <source src="https://assets.holoviz.org/panel/how_to/concurrency/dask-fibonacci-queue.mp4" type="video/mp4">
     Your browser does not support the video tag.
 </video>
 

doc/how_to/concurrency/sync_to_async.md

@@ -26,8 +26,8 @@ async def create_result():
 pn.Column(widget.rx() + 1, create_result).servable()
 ```
 
-<video controls="" poster="../../_static/images/asyncify.png">
-    <source src="https://assets.holoviz.org/panel/how_to/concurrency/asyncify.mp4" type="video/mp4" style="max-height: 400px; max-width: 100%;">
+<video muted controls loop poster="../../_static/images/asyncify.png" style="max-height: 400px; max-width: 100%;">
+    <source src="https://assets.holoviz.org/panel/how_to/concurrency/asyncify.mp4" type="video/mp4">
     Your browser does not support the video tag.
 </video>
 

doc/how_to/state/url.md

@@ -69,8 +69,8 @@ Lets try to serve it as an app
 pn.Param(settings).servable()
 ```
 
-<video controls="" poster="../../_static/images/location_example_app.png">
-    <source src="https://assets.holoviz.org/panel/how_to/state/sync_url.mp4" type="video/mp4" style="max-height: 400px; max-width: 100%;">
+<video muted controls loop poster="../../_static/images/location_example_app.png" style="max-height: 400px; max-width: 100%;">
+    <source src="https://assets.holoviz.org/panel/how_to/state/sync_url.mp4" type="video/mp4">
     Your browser does not support the video tag.
 </video>
 

doc/how_to/streamlit_migration/chat.md

@@ -130,8 +130,8 @@ if prompt := st.chat_input():
         st.write(response)
 ```
 
-<video controls="" poster="../../_static/images/streamlit_callback_handler.png">
-    <source src="https://assets.holoviz.org/panel/how_to/streamlit_migration/streamlit_callback_handler.mp4" type="video/mp4" style="max-height: 400px; max-width: 100%;">
+<video muted controls loop poster="../../_static/images/streamlit_callback_handler.png" style="max-height: 400px; max-width: 100%;">
+    <source src="https://assets.holoviz.org/panel/how_to/streamlit_migration/streamlit_callback_handler.mp4" type="video/mp4">
     Your browser does not support the video tag.
 </video>
 
@@ -157,8 +157,8 @@ async def callback(contents, user, instance):
 pn.chat.ChatInterface(callback=callback).servable()
 ```
 
-<video controls="" poster="../../_static/images/panel_callback_handler.png">
-    <source src="https://assets.holoviz.org/panel/how_to/streamlit_migration/panel_callback_handler.mp4" type="video/mp4" style="max-height: 400px; max-width: 100%;">
+<video muted controls loop poster="../../_static/images/panel_callback_handler.png" style="max-height: 400px; max-width: 100%;">
+    <source src="https://assets.holoviz.org/panel/how_to/streamlit_migration/panel_callback_handler.mp4" type="video/mp4">
     Your browser does not support the video tag.
 </video>
 

doc/tutorials/basic/build_animation.md

@@ -2,8 +2,8 @@
 
 In this tutorial, we will create a *bar chart race* using the [Altair](https://altair-viz.github.io) plotting library and the [`Player`](../../reference/widgets/Player.ipynb) widget.
 
-<video controls="" poster="https://assets.holoviz.org/panel/tutorials/bar_chart_race.png">
-    <source src="https://assets.holoviz.org/panel/tutorials/bar_chart_race.mp4" type="video/mp4" style="max-height: 400px; max-width: 100%;">
+<video muted controls loop poster="https://assets.holoviz.org/panel/tutorials/bar_chart_race.png" style="max-height: 400px; max-width: 100%;">
+    <source src="https://assets.holoviz.org/panel/tutorials/bar_chart_race.mp4" type="video/mp4">
     Your browser does not support the video tag.
 </video>
 
@@ -279,8 +279,8 @@ Press the *play* button.
 
 It should resemble
 
-<video controls="" poster="https://assets.holoviz.org/panel/tutorials/bar_chart_race.png">
-    <source src="https://assets.holoviz.org/panel/tutorials/bar_chart_race.mp4" type="video/mp4" style="max-height: 400px; max-width: 100%;">
+<video muted controls loop poster="https://assets.holoviz.org/panel/tutorials/bar_chart_race.png" style="max-height: 400px; max-width: 100%;">
+    <source src="https://assets.holoviz.org/panel/tutorials/bar_chart_race.mp4" type="video/mp4">
     Your browser does not support the video tag.
 </video>
 

doc/tutorials/basic/build_report.md

@@ -6,8 +6,8 @@ In this section, we will collaboratively create a *Wind Turbine Report*. Togethe
 - Export the report to a static `.html` file using the `.save` method.
 - Distribute the report via email.
 
-<video controls="" poster="https://assets.holoviz.org/panel/tutorials/wind_turbine_report.png">
-    <source src="https://assets.holoviz.org/panel/tutorials/wind_turbine_report.mp4" type="video/mp4" style="max-height: 400px; max-width: 100%;">
+<video muted controls loop poster="https://assets.holoviz.org/panel/tutorials/wind_turbine_report.png" style="max-height: 400px; max-width: 100%;">
+    <source src="https://assets.holoviz.org/panel/tutorials/wind_turbine_report.mp4" type="video/mp4">
     Your browser does not support the video tag.
 </video>
 
@@ -386,8 +386,8 @@ Please verify that the file `report.html` has been created.
 
 Please open the `report.html` file in your browser. It should look like:
 
-<video controls="" poster="https://assets.holoviz.org/panel/tutorials/wind_turbine_report.png">
-    <source src="https://assets.holoviz.org/panel/tutorials/wind_turbine_report.mp4" type="video/mp4" style="max-height: 400px; max-width: 100%;">
+<video muted controls loop poster="https://assets.holoviz.org/panel/tutorials/wind_turbine_report.png" style="max-height: 400px; max-width: 100%;">
+    <source src="https://assets.holoviz.org/panel/tutorials/wind_turbine_report.mp4" type="video/mp4">
     Your browser does not support the video tag.
 </video>
 

doc/tutorials/basic/caching.md

@@ -52,8 +52,8 @@ Open the app in your browser and refresh it a few times.
 
 It should look like
 
-<video controls="" poster="https://assets.holoviz.org/panel/tutorials/page_load_end.png">
-    <source src="https://assets.holoviz.org/panel/tutorials/page_load.mp4" type="video/mp4" style="max-height: 400px; max-width: 100%;">
+<video muted controls loop poster="https://assets.holoviz.org/panel/tutorials/page_load_end.png" style="max-height: 400px; max-width: 100%;">
+    <source src="https://assets.holoviz.org/panel/tutorials/page_load.mp4" type="video/mp4">
     Your browser does not support the video tag.
 </video>
 

doc/tutorials/basic/develop_editor.md

@@ -57,8 +57,8 @@ Now change the
 
 It should look like
 
-<video controls="" poster="../../_static/images/develop_editor_panel_serve_after.png">
-    <source src="https://assets.holoviz.org/panel/tutorials/develop_editor_serve_app.mp4" type="video/mp4" style="max-height: 400px; max-width: 100%;">
+<video muted controls loop poster="../../_static/images/develop_editor_panel_serve_after.png" style="max-height: 400px; max-width: 100%;">
+    <source src="https://assets.holoviz.org/panel/tutorials/develop_editor_serve_app.mp4" type="video/mp4">
     Your browser does not support the video tag.
 </video>
 
@@ -89,7 +89,7 @@ print(layout)
 layout.servable()
 ```
 
-Serving this code will print information about the `component` object, revealing its structure and attributes.
+Serving this code will print information about the `layout` object, revealing its structure and attributes.
 
 Serve the app by running the below command in a terminal.
 

doc/tutorials/basic/develop_notebook.md

@@ -34,6 +34,14 @@ pn.panel("Hello Again")
 
 Run the cells and save the notebook as `app.ipynb`.
 
+:::{note}
+
+The Jupyter Panel Preview feature described below works exclusively within the JupyterLab interface. It does not support the Classic Jupyter Notebook interface.
+
+To use this preview feature, please ensure you are working within a JupyterLab environment.
+
+:::
+
 You can now preview the app by clicking the *Jupyter Panel Preview* icon. This icon can be found above the notebook.
 
 ![Jupyter Panel Preview](../../_static/images/develop_notebook_simple_example_open_preview.png)
@@ -50,9 +58,8 @@ You can enhance your workflow by enabling *auto-reload* with the *Render on Save
 
 The video shows how a larger app could be developed.
 
-<video controls="" poster="../../_static/images/jupyter_panel_preview_in_action.png">
-    <source src="https://assets.holoviz.org/panel/tutorials/jupyter_panel_preview_in_action.mp4" type="video/mp4" style="max-height: 400px; max-width: 100%;">
-    Your browser does not support the video tag.
+<video muted controls loop poster="../../_static/images/jupyter_panel_preview_in_action.png" style="max-height: 400px; max-width: 100%;">
+    <source src="https://assets.holoviz.org/panel/tutorials/jupyter_panel_preview_in_action.mp4">
 </video>
 
 ## Serve Your App with Autoreload
@@ -65,8 +72,8 @@ panel serve app.ipynb --autoreload
 
 This method provides a faster alternative to the *Jupyter Panel Preview*. Check out the video for inspiration.
 
-<video controls="" poster="../../_static/images/develop_notebook_panel_serve_after.png">
-    <source src="https://assets.holoviz.org/panel/tutorials/develop_notebook_panel_serve.mp4" type="video/mp4" style="max-height: 400px; max-width: 100%;">
+<video muted controls loop poster="../../_static/images/develop_notebook_panel_serve_after.png" style="max-height: 400px; max-width: 100%;">
+    <source src="https://assets.holoviz.org/panel/tutorials/develop_notebook_panel_serve.mp4" type="video/mp4">
     Your browser does not support the video tag.
 </video>
 

doc/tutorials/basic/size.md

@@ -154,8 +154,8 @@ pn.Row(fig, md, height=500, sizing_mode="stretch_width").servable()
 
 Test your solution by changing the window size of your browser. It should look like below.
 
-<video controls="" poster="https://assets.holoviz.org/panel/tutorials/exercise_configure_sizing_mode.png">
-    <source src="https://assets.holoviz.org/panel/tutorials/exercise_configure_sizing_mode.mp4" type="video/mp4" style="max-height: 400px; max-width: 100%;">
+<video muted controls loop poster="https://assets.holoviz.org/panel/tutorials/exercise_configure_sizing_mode.png" style="max-height: 400px; max-width: 100%;">
+    <source src="https://assets.holoviz.org/panel/tutorials/exercise_configure_sizing_mode.mp4" type="video/mp4">
     Your browser does not support the video tag.
 </video>
 

examples/reference/panes/Str.ipynb

@@ -60,6 +60,22 @@
    "source": [
     "str_pane.object = 1.3234232"
    ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Lets change the `object` back to its initial value:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "str_pane.object = 'This is a raw string which will not be formatted in any way except for the applied style.'"
+   ]
   }
  ],
  "metadata": {

examples/reference/panes/Textual.ipynb

@@ -1,16 +1,5 @@
 {
  "cells": [
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "import panel as pn\n",
-    "\n",
-    "pn.extension('terminal')"
-   ]
-  },
   {
    "cell_type": "markdown",
    "metadata": {},
@@ -22,6 +11,8 @@
     "- Once an `App` instance is bound to a `Textual` pane it cannot be reused in another pane or otherwise and you can only bind an App instance to a single session.\n",
     "- The application must be instantiated on the same thread as the server it will be running on, i.e. if you serve the app with `pn.serve(..., threaded=True)` you must instantiate the `App` inside a function.\n",
     "\n",
+    "![Panel Textual](../../assets/panel_textual.png)\n",
+    "\n",
     "#### Parameters:\n",
     "\n",
     "For details on other options for customizing the component see the [layout](../../how_to/layout/index.md) and [styling](../../how_to/styling/index.md) how-to guides.\n",
@@ -46,10 +37,14 @@
    "metadata": {},
    "outputs": [],
    "source": [
+    "import panel as pn\n",
+    "\n",
     "from textual.app import App, ComposeResult\n",
     "from textual.containers import Container, Horizontal\n",
     "from textual.widgets import Button, Footer, Header, Static\n",
     "\n",
+    "pn.extension(\"terminal\")\n",
+    "\n",
     "QUESTION = \"Do you want to learn about Textual CSS?\"\n",
     "\n",
     "class ExampleApp(App):\n",
@@ -84,7 +79,7 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "import pathlib\n",
+    "import panel as pn\n",
     "\n",
     "from decimal import Decimal\n",
     "\n",
@@ -95,11 +90,31 @@
     "from textual.reactive import var\n",
     "from textual.widgets import Button, Digits\n",
     "\n",
+    "from pathlib import Path\n",
+    "import requests\n",
+    "\n",
+    "pn.extension(\"terminal\")\n",
+    "\n",
+    "def _download_file_if_not_exists(url: str, local_path: str) -> Path:\n",
+    "    local_file_path = Path(local_path)\n",
+    "\n",
+    "    if not local_file_path.exists():\n",
+    "        response = requests.get(url)\n",
+    "        response.raise_for_status()\n",
+    "        local_file_path.write_bytes(response.content)\n",
+    "\n",
+    "    return local_file_path\n",
+    "\n",
+    "\n",
+    "file_url = \"https://raw.githubusercontent.com/holoviz/panel/main/examples/assets/calculator.tcss\"\n",
+    "local_file_path = \"calculator.tcss\"\n",
+    "calculator_tcss = _download_file_if_not_exists(file_url, local_file_path)\n",
+    "\n",
     "\n",
     "class CalculatorApp(App):\n",
     "    \"\"\"A working 'desktop' calculator.\"\"\"\n",
     "\n",
-    "    CSS_PATH = pathlib.Path(\"../../assets/calculator.tcss\").absolute()\n",
+    "    CSS_PATH = calculator_tcss.absolute()\n",
     "\n",
     "    numbers = var(\"0\")\n",
     "    show_ac = var(True)\n",
@@ -249,8 +264,16 @@
     "\n",
     "\n",
     "calculator = CalculatorApp()\n",
-    "\n",
-    "pn.pane.Textual(calculator, height=600, width=400)"
+    "textual_pane = pn.pane.Textual(calculator, height=600, width=400)\n",
+    "\n",
+    "pn.template.FastListTemplate(\n",
+    "    site=\"Panel\",\n",
+    "    title=\"Textual\",\n",
+    "    main=[textual_pane],\n",
+    "    main_max_width=\"610px\",\n",
+    "    main_layout=None,\n",
+    "    theme_toggle=False,   \n",
+    ").servable();"
    ]
   }
  ],

examples/reference/widgets/ButtonIcon.ipynb

@@ -16,6 +16,10 @@
    "source": [
     "The ``ButtonIcon`` widget allows triggering events when the button is clicked. In addition to a value parameter, which will button from `False` to `True` while the click event is being processed an additional ``clicks`` parameter that can be watched to subscribe to click events.\n",
     "\n",
+    "This widget displays a default `icon` initially. Upon being clicked, an `active_icon` appears for a specified `toggle_duration`.\n",
+    "\n",
+    "For instance, the `ButtonIcon` can be effectively utilized to implement a feature akin to ChatGPT's copy-to-clipboard button.\n",
+    "\n",
     "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.html).\n",
     "\n",
     "#### Parameters:\n",

panel/chat/input.py

@@ -21,15 +21,16 @@
 class ChatAreaInput(_PnTextAreaInput):
     """
     The `ChatAreaInput` allows entering any multiline string using a text input
-    box, with the ability to click enter to submit the message.
+    box, with the ability to press enter to submit the message.
 
     Unlike TextAreaInput, the `ChatAreaInput` defaults to auto_grow=True and
     max_rows=10, and the value is not synced to the server until the enter key
-    is pressed so key on `value_input` if you need to access the existing value.
+    is pressed so bind on `value_input` if you need to access the existing value.
 
-    Lines are joined with the newline character `\n`.
+    Lines are joined with the newline character `\\n`.
+
+    Reference: https://panel.holoviz.org/reference/chat/ChatAreaInput.html
 
-    Reference: https://panel.holoviz.org/reference/widgets/ChatAreaInput.html
     :Example:
 
     >>> ChatAreaInput(max_rows=10)

panel/layout/feed.py

@@ -20,6 +20,22 @@
 
 
 class Feed(Column):
+    """
+    The `Feed` class inherits from the `Column` layout, thereby enabling the arrangement of
+    multiple panel objects within a vertical container. However, it restrictively manages the number
+    of objects displayed at any moment. This layout is particularly useful for efficiently
+    rendering a substantial number of objects.
+
+    Similar to `Column`, the `Feed` provides a list-like API, including methods such as `append`,
+    `extend`, `clear`, `insert`, `pop`, `remove`, and `__setitem__`. These methods facilitate
+    interactive updates and modifications to the layout.
+
+    Reference: https://panel.holoviz.org/reference/layouts/Feed.html
+
+    :Example:
+
+    >>> pn.Feed(some_widget, some_pane, some_python_object, ..., python_object_1002)
+    """
 
     load_buffer = param.Integer(default=50, bounds=(0, None), doc="""
         The number of objects loaded on each side of the visible objects.

panel/pane/image.py

@@ -508,7 +508,7 @@ class WebP(ImageBase):
     provided a local path, or will link to a remote image if provided
     a URL.
 
-    Reference: https://developers.google.com/speed/webp/docs/riff_container
+    Reference: https://panel.holoviz.org/reference/panes/WebP.html
 
     :Example: