Fix a bunch of Vale issues in admonitions

vizro-ai/docs/pages/user-guides/customize-vizro-ai.md

@@ -18,16 +18,16 @@ vizro_ai = VizroAI(model="<chosen model>")
     For the string settings to work, you must supply your API key via environment variables. The relevant variable names to be set are noted in each vendor tab.
 
 === "OpenAI"
-    | Env variable | Name(s)           |
-    | ------------ | ----------------- |
-    | API key      | `OPENAI_API_KEY`  |
-    | Base API URL | `OPENAI_API_BASE` |
+| Environment variable | Name(s)           |
+| -------------------- | ----------------- |
+| API key              | `OPENAI_API_KEY`  |
+| Base API URL         | `OPENAI_API_BASE` |
 
-    To use OpenAI with Vizro-AI, you must have an account with paid-for credits available. None of the free accounts will suffice. [Check the OpenAI models and pricing on their website](https://platform.openai.com/docs/models). Before using a model, please review OpenAI's guidelines on risk mitigation to understand potential model limitations and best practices. [See the OpenAI site for more details on responsible usage](https://platform.openai.com/docs/guides/safety-best-practices).
+To use OpenAI with Vizro-AI, you must have an account with paid-for credits available. None of the free accounts will suffice. [Check the OpenAI models and pricing on their website](https://platform.openai.com/docs/models). Before using a model, please review OpenAI's guidelines on risk mitigation to understand potential model limitations and best practices. [See the OpenAI site for more details on responsible usage](https://platform.openai.com/docs/guides/safety-best-practices).
 
-    - `gpt-4o-mini` **default**
-    - `gpt-4-turbo`
-    - `gpt-4o`
+- `gpt-4o-mini` **default**
+- `gpt-4-turbo`
+- `gpt-4o`
 
 === "Anthropic"
     _Currently works only for `VizroAI.plot` - we are working on making it available for `VizroAI.dashboard`_

vizro-ai/docs/pages/user-guides/install.md

@@ -85,7 +85,7 @@ By default, `vizro-ai` automatically loads the `.env` file, by searching the cur
 If you would like to customize the `.env` file location and name, you can manually customize the search to override the default and specify the path and name of a custom `.env` file.
 
 ??? example "How to override the default location of the .`env` file:"
-    ```py
+    ```python
     from dotenv import load_dotenv, find_dotenv
     from pathlib import Path
 

vizro-ai/docs/pages/user-guides/run-vizro-ai.md

@@ -11,7 +11,7 @@ This guide offers insights into different ways of running `VizroAI.plot` to gene
 To run Vizro-AI code in a Jupyter Notebook, create a new cell and execute the code below to render the described visualization as output.
 
 ??? note "Note: API key"
-    Make sure you have followed the [LLM setup guide](../user-guides/install.md#set-up-access-to-a-large-language-model) and thatyour api key is set up in a `.env` file in the same folder as your Notebook file (`.ipynb`).
+    Make sure you have followed the [LLM setup guide](../user-guides/install.md#set-up-access-to-a-large-language-model) and that your api key is set up in a `.env` file in the same folder as your Notebook file (`.ipynb`).
 
 !!! example "Ask Vizro-AI to generate a bar chart"
     === "Code for the cell"

vizro-ai/docs/pages/user-guides/vizro-ai-langchain-guide.md

@@ -117,86 +117,86 @@ Now you can use the chain to generate charts or dashboards based on natural lang
 
 !!! example "Generate chart code"
     === "Code"
-        ```py
-        # Load sample data
-        df = px.data.gapminder()
+    ```python
+    # Load sample data
+    df = px.data.gapminder()
 
-        plot_response = chain.invoke("Plot GDP per capita for each continent")
-        print(plot_response[0].content)
-        ```
+    plot_response = chain.invoke("Plot GDP per capita for each continent")
+    print(plot_response[0].content)
+    ```
 
     === "Vizro-AI Generated Code"
-        ```py
-        import plotly.graph_objects as go
-        from vizro.models.types import capture
-
-        @capture("graph")
-        def custom_chart(data_frame):
-            continent_gdp = data_frame.groupby("continent")["gdpPercap"].mean().reset_index()
-            fig = go.Figure(
-                data=[go.Bar(x=continent_gdp["continent"], y=continent_gdp["gdpPercap"])]
-            )
-            fig.update_layout(
-                title="GDP per Capita by Continent",
-                xaxis_title="Continent",
-                yaxis_title="GDP per Capita",
-            )
-            return fig
-        ```
+    ```python
+    import plotly.graph_objects as go
+    from vizro.models.types import capture
+
+    @capture("graph")
+    def custom_chart(data_frame):
+        continent_gdp = data_frame.groupby("continent")["gdpPercap"].mean().reset_index()
+        fig = go.Figure(
+            data=[go.Bar(x=continent_gdp["continent"], y=continent_gdp["gdpPercap"])]
+        )
+        fig.update_layout(
+            title="GDP per Capita by Continent",
+            xaxis_title="Continent",
+            yaxis_title="GDP per Capita",
+        )
+        return fig
+    ```
 
 !!! example "Generate dashboard code"
     === "Code"
-        ```py
-        dfs = [px.data.gapminder()]
+    ```python
+    dfs = [px.data.gapminder()]
 
-        dashboard_response = chain.invoke("Create a dashboard. This dashboard has a chart showing the correlation between gdpPercap and lifeExp.")
-        print(dashboard_response[0].content)
-        ```
+    dashboard_response = chain.invoke("Create a dashboard. This dashboard has a chart showing the correlation between gdpPercap and lifeExp.")
+    print(dashboard_response[0].content)
+    ```
 
     === "Vizro-AI Generated Code"
-        ```py
-        ############ Imports ##############
-        import vizro.models as vm
-        from vizro.models.types import capture
-        import plotly.graph_objects as go
-
-
-        ####### Function definitions ######
-        @capture("graph")
-        def gdp_life_exp_graph(data_frame):
-            fig = go.Figure()
-            fig.add_trace(
-                go.Scatter(x=data_frame["gdpPercap"], y=data_frame["lifeExp"], mode="markers")
-            )
-            fig.update_layout(
-                title="GDP per Capita vs Life Expectancy",
-                xaxis_title="GDP per Capita",
-                yaxis_title="Life Expectancy",
-            )
-            return fig
-
-
-        ####### Data Manager Settings #####
-        #######!!! UNCOMMENT BELOW !!!#####
-        # from vizro.managers import data_manager
-        # data_manager["gdp_life_exp"] = ===> Fill in here <===
-
-
-        ########### Model code ############
-        model = vm.Dashboard(
-            pages=[
-                vm.Page(
-                    components=[
-                        vm.Graph(
-                            id="gdp_life_exp_graph",
-                            figure=gdp_life_exp_graph(data_frame="gdp_life_exp"),
-                        )
-                    ],
-                    title="GDP vs Life Expectancy Correlation",
-                    layout=vm.Layout(grid=[[0]]),
-                    controls=[],
-                )
-            ],
+    ```py
+    ############ Imports ##############
+    import vizro.models as vm
+    from vizro.models.types import capture
+    import plotly.graph_objects as go
+
+
+    ####### Function definitions ######
+    @capture("graph")
+    def gdp_life_exp_graph(data_frame):
+        fig = go.Figure()
+        fig.add_trace(
+            go.Scatter(x=data_frame["gdpPercap"], y=data_frame["lifeExp"], mode="markers")
+        )
+        fig.update_layout(
             title="GDP per Capita vs Life Expectancy",
+            xaxis_title="GDP per Capita",
+            yaxis_title="Life Expectancy",
         )
-        ```
+        return fig
+
+
+    ####### Data Manager Settings #####
+    #######!!! UNCOMMENT BELOW !!!#####
+    # from vizro.managers import data_manager
+    # data_manager["gdp_life_exp"] = ===> Fill in here <===
+
+
+    ########### Model code ############
+    model = vm.Dashboard(
+        pages=[
+            vm.Page(
+                components=[
+                    vm.Graph(
+                        id="gdp_life_exp_graph",
+                        figure=gdp_life_exp_graph(data_frame="gdp_life_exp"),
+                    )
+                ],
+                title="GDP vs Life Expectancy Correlation",
+                layout=vm.Layout(grid=[[0]]),
+                controls=[],
+            )
+        ],
+        title="GDP per Capita vs Life Expectancy",
+    )
+    ```

vizro-core/docs/pages/explanation/contributing.md

@@ -90,7 +90,7 @@ Examples are run with the following settings:
 `hatch run lint` checks and fixes code quality and formatting. This is included in CI checks. All linting and associated dependencies are controlled by [pre-commit](https://pre-commit.com/) hooks. We use the [pre-commit.ci](https://pre-commit.ci/) to automatically fix all the linting checks that we can when a PR is pushed. Other linting failures (such as `mypy`) need manual intervention from the developer.
 
 !!! note
-    The first time you run `hatch run lint` it may take a couple of minutes, since pre-commit needs to setup linting environments. Subsequent runs reuse these environments and are much faster.
+    The first time you run `hatch run lint` it may take a couple of minutes, since pre-commit needs to setup linting environments. Further runs reuse these environments and are much faster.
 
 `hatch run lint` runs the pre-commit hooks on all (not only staged) files. You can run an individual hook, for example `mypy`, on all files by running `hatch run lint mypy`.
 
@@ -105,7 +105,7 @@ The format of our changelog is based on [Keep a Changelog](https://keepachangelo
 Run `hatch run changelog:add` to create a changelog fragment and then uncomment the relevant section(s). If you are uncertain about what to add or whether to add anything at all, refer to [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). The rule of thumb is that if Vizro users would be affected in any way then the changes should be described in the changelog.
 
 !!! note
-    Changes that do not affect source code do not need a changelog fragment. This facilitates simple modifications to documentation [made directly on GitHub](https://docs.github.com/en/repositories/working-with-files/managing-files/editing-files) or with the [github.dev](https://docs.github.com/en/codespaces/the-githubdev-web-based-editor), where no terminal is available to run `hatch changelog:add`. Any changes to source code require a changelog fragment to be generated. If your changes do not require a changelog entry then you still need to generate the fragment but can leave it all commented out.
+    Changes that do not affect source code do not need a changelog fragment. This simplifies modifications to documentation [made directly on GitHub](https://docs.github.com/en/repositories/working-with-files/managing-files/editing-files) or within the [github.dev](https://docs.github.com/en/codespaces/the-githubdev-web-based-editor), where no terminal is available to run `hatch changelog:add`. Any changes to source code require a changelog fragment to be generated. If your changes do not require a changelog entry then you still need to generate the fragment but can leave it all commented out.
 
 ### `hatch run test-unit`
 

vizro-core/docs/pages/tutorials/explore-components.md

@@ -470,7 +470,7 @@ The code below illustrates a functional dashboard where you can navigate from th
 
 !!! example "Final dashboard"
     === "Code"
-        ```py
+        ```python
         home_page = vm.Page(
             title="Homepage",
             components=[
@@ -498,7 +498,7 @@ The code below illustrates a functional dashboard where you can navigate from th
         )
         ```
 
-        ```py
+        ```python
         dashboard = vm.Dashboard(pages=[home_page, first_page, second_page])
         ```
 
@@ -622,7 +622,7 @@ Congratulations on completing this tutorial! You have acquired the knowledge to
 
 After completing the tutorial you now have a solid understanding of the main elements of Vizro and how to bring them together to create dynamic and interactive data visualizations.
 
-You can find out more about the Vizro by reading the [components overview page](../user-guides/components.md). To gain more in-depth knowledge about the usage and configuration details of individual controls, check out the guides dedicated to [Filters](../user-guides/filters.md), [Parameters](../user-guides/parameters.md) and [Selectors](../user-guides/selectors.md). If you'd like to understand more about different ways to configure the navigation of your dashboard, head to [Navigation](../user-guides/navigation.md).
+You can find out more about the Vizro by reading the [components overview page](../user-guides/components.md). To gain more in-depth knowledge about the usage and configuration details of individual controls, check out the guides dedicated to [Filters](../user-guides/filters.md), [Parameters](../user-guides/parameters.md), and [Selectors](../user-guides/selectors.md). If you'd like to understand more about different ways to configure the navigation of your dashboard, head to [Navigation](../user-guides/navigation.md).
 
 Vizro doesn't end here, and we only covered the key features, but there is still much more to explore! You can learn:
 

vizro-core/docs/pages/user-guides/actions.md

@@ -22,68 +22,69 @@ The below sections are guides on how to use pre-defined action functions.
 
 To enable downloading data, you can add the [`export_data`][vizro.actions.export_data] action function to the [`Button`][vizro.models.Button] component. Hence, as a result, when a dashboard user now clicks the button, all data on the page will be downloaded.
 
+
 !!! example "`export_data`"
     === "app.py"
-        ```{.python pycafe-link}
-        import vizro.models as vm
-        import vizro.plotly.express as px
-        from vizro import Vizro
-        from vizro.actions import export_data
-
-        iris = px.data.iris()
-
-        page = vm.Page(
-            title="Using actions",
-            components=[
-                vm.Graph(
-                    figure=px.scatter(iris, x="petal_length", y="sepal_length", color="sepal_width"),
-                ),
-                vm.Graph(
-                    figure=px.histogram(iris, x="petal_length", color="species"),
-                ),
-                vm.Button(
-                    text="Export data",
-                    actions=[
-                        vm.Action(
-                            function=export_data()
-                        ),
-                    ],
-                ),
-            ],
-        )
-
-        dashboard = vm.Dashboard(pages=[page])
-
-        Vizro().build(dashboard).run()
-        ```
+    ```{.python pycafe-link}
+    import vizro.models as vm
+    import vizro.plotly.express as px
+    from vizro import Vizro
+    from vizro.actions import export_data
+
+    iris = px.data.iris()
+
+    page = vm.Page(
+        title="Using actions",
+        components=[
+            vm.Graph(
+                figure=px.scatter(iris, x="petal_length", y="sepal_length", color="sepal_width"),
+            ),
+            vm.Graph(
+                figure=px.histogram(iris, x="petal_length", color="species"),
+            ),
+            vm.Button(
+                text="Export data",
+                actions=[
+                    vm.Action(
+                        function=export_data()
+                    ),
+                ],
+            ),
+        ],
+    )
+
+    dashboard = vm.Dashboard(pages=[page])
+
+    Vizro().build(dashboard).run()
+    ```
 
     === "app.yaml"
-        ```yaml
-        # Still requires a .py to add data to the data manager and parse YAML configuration
-        # See yaml_version example
-        pages:
-          - components:
-              - type: graph
-                figure:
-                  _target_: scatter
-                  data_frame: iris
-                  color: sepal_width
-                  x: petal_length
-                  y: sepal_length
-              - type: graph
-                figure:
-                  _target_: histogram
-                  data_frame: iris
-                  color: species
-                  x: petal_length
-              - type: button
-                text: Export data
-                id: export_data_button
-                actions:
-                  - function:
-                      _target_: export_data
-            title: Exporting
-        ```
+    ```yaml
+    # Still requires a .py to add data to the data manager and parse YAML configuration
+    # See yaml_version example
+    pages:
+      - components:
+          - type: graph
+            figure:
+              _target_: scatter
+              data_frame: iris
+              color: sepal_width
+              x: petal_length
+              y: sepal_length
+          - type: graph
+            figure:
+              _target_: histogram
+              data_frame: iris
+              color: species
+              x: petal_length
+          - type: button
+            text: Export data
+            id: export_data_button
+            actions:
+              - function:
+                  _target_: export_data
+        title: Exporting
+    ```
 
     === "Result"
         [![Graph]][graph]