[Docs] Fix permanent project links to py.cafe (#642)

Co-authored-by: Antony Milne <[email protected]>
Co-authored-by: huong-li-nguyen <[email protected]>

Author: 3 people

vizro-core/docs/assets/user_guides/run/pycafe_editor.png

@@ -2,9 +2,9 @@
 
 There is no setup needed for your first dashboard, thanks to the amazing [Py.Cafe](https://py.cafe/).
 
-Follow the [Edit live on Py.Cafe](https://py.cafe/stichbury/vizro-iris-analysis) link below the dashboard to see the code and experiment with it.
+Follow the [Edit live on Py.Cafe](https://py.cafe/vizro-official/vizro-iris-analysis-0) link and you can see the code of the below dashboard and experiment with it.
 
-<iframe src="https://py.cafe/stichbury/vizro-iris-analysis" width="100%" height="600px"></iframe>
+<iframe src="https://py.cafe/embed/vizro-official/vizro-iris-analysis-0" width="100%" height="600px"></iframe>
 
 <!-- vale off -->
 ## Can I break your code?
@@ -14,7 +14,7 @@ When you click the link to "Edit live on Py.Cafe" the dashboard is running insid
 <!-- vale off -->
 ## How can I make my own dashboards?
 <!-- vale on -->
-You can use [Py.Cafe](https://py.cafe/) to experiment with your own Vizro dashboards by dropping code onto a new project.
+You can use [Py.Cafe](https://py.cafe/snippet/vizro/v1) to experiment with your own Vizro dashboards by dropping code onto a new project.
 
 If you need inspiration or a starting point, we make all our examples available for you to try out on Py.Cafe. Throughout our documentation, follow the "**Run and edit this code in Py.Cafe**" link below the code snippets to open them in Py.Cafe.
 

vizro-core/docs/pages/tutorials/first-dashboard.md

@@ -102,7 +102,7 @@ For reference, see the [Vizro CSS files](https://github.com/mckinsey/vizro/tree/
         Vizro().build(dashboard).run()
         ```
 
-        <img src=https://py.cafe/logo.png alt="py.cafe logo" width="30"><b><a target="_blank" href="https://py.cafe/stichbury/vizro-custom-header-colors">Run and edit this code in Py.Cafe</a></b>
+        <img src=https://py.cafe/logo.png alt="py.cafe logo" width="30"><b><a target="_blank" href="https://py.cafe/vizro-official/vizro-custom-header-colors-0">Run and edit this code in Py.Cafe</a></b>
 
     === "app.yaml"
         ```yaml
@@ -164,7 +164,7 @@ Suppose you want to hide the page title on one page only. Here's how you can ach
         Vizro().build(dashboard).run()
         ```
 
-        <img src=https://py.cafe/logo.png alt="py.cafe logo" width="30"><b><a target="_blank" href="https://py.cafe/stichbury/vizro-multi-page-example">Run and edit this code in Py.Cafe</a></b>
+        <img src=https://py.cafe/logo.png alt="py.cafe logo" width="30"><b><a target="_blank" href="https://py.cafe/vizro-official/vizro-multi-page-example">Run and edit this code in Py.Cafe</a></b>
 
     === "app.yaml"
         ```yaml
@@ -250,7 +250,7 @@ It's essential to understand the relationship between the targeted CSS class or
         Vizro().build(dashboard).run()
         ```
 
-        <img src=https://py.cafe/logo.png alt="py.cafe logo" width="30"><b><a target="_blank" href="https://py.cafe/stichbury/vizro-custom-card-styling">Run and edit this code in Py.Cafe</a></b>
+        <img src=https://py.cafe/logo.png alt="py.cafe logo" width="30"><b><a target="_blank" href="https://py.cafe/vizro-official/vizro-custom-card-styling">Run and edit this code in Py.Cafe</a></b>
 
     === "app.yaml"
         ```yaml

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

@@ -226,7 +226,7 @@ accessibility of your app. Providing an image ALT text is optional.
         Vizro().build(dashboard).run()
         ```
 
-        <img src=https://py.cafe/logo.png alt="py.cafe logo" width="30"><b><a target="_blank" href="https://py.cafe/app/stichbury/vizro-placing-images">Run and edit this code in Py.Cafe</a></b>
+        <img src=https://py.cafe/logo.png alt="py.cafe logo" width="30"><b><a target="_blank" href="https://py.cafe/vizro-official/vizro-placing-images">Run and edit this code in Py.Cafe</a></b>
 
 
     === "app.yaml"
@@ -306,7 +306,7 @@ and give an attribute selector to select images with that matching URL hash.
         Vizro().build(dashboard).run()
         ```
 
-        <img src=https://py.cafe/logo.png alt="py.cafe logo" width="30"><b><a target="_blank" href="https://py.cafe/stichbury/vizro-styling-images">Run and edit this code in Py.Cafe</a></b>
+        <img src=https://py.cafe/logo.png alt="py.cafe logo" width="30"><b><a target="_blank" href="https://py.cafe/vizro-official/vizro-styling-images">Run and edit this code in Py.Cafe</a></b>
 
     === "app.yaml"
         ```yaml
@@ -382,7 +382,7 @@ Use the following pre-defined URL hashes in your image path to apply Vizro's def
         Vizro().build(dashboard).run()
         ```
 
-        <img src=https://py.cafe/logo.png alt="py.cafe logo" width="30"><b><a target="_blank" href="https://py.cafe/stichbury/vizro-floating-images-explorer">Run and edit this code in Py.Cafe</a></b>
+        <img src=https://py.cafe/logo.png alt="py.cafe logo" width="30"><b><a target="_blank" href="https://py.cafe/vizro-official/vizro-floating-images-explorer">Run and edit this code in Py.Cafe</a></b>
 
     === "app.yaml"
         ```yaml

vizro-core/docs/pages/user-guides/card-button.md

@@ -472,7 +472,7 @@ As mentioned above, custom components can trigger action. To enable the custom c
 
         Vizro().build(dashboard).run()
         ```
-        <img src=https://py.cafe/logo.png alt="py.cafe logo" width="30"><b><a target="_blank" href="https://py.cafe/stichbury/vizro-custom-carousel-component">Run and edit this code in Py.Cafe</a></b>
+        <img src=https://py.cafe/logo.png alt="py.cafe logo" width="30"><b><a target="_blank" href="https://py.cafe/vizro-official/vizro-custom-carousel-component">Run and edit this code in Py.Cafe</a></b>
     === "yaml"
         ```yaml
         # Custom components are currently only possible via python configuration

vizro-core/docs/pages/user-guides/custom-components.md

@@ -245,7 +245,7 @@ number of cards displayed dynamically adjusts based on a `vm.Parameter`.
            The parameter targets the `n_rows` argument of the `multiple_cards` function, determining the number of rows
            taken from the data.
 
-        <img src=https://py.cafe/logo.png alt="py.cafe logo" width="30"><b><a target="_blank" href="https://py.cafe/stichbury/vizro-dynamic-cards">Run and edit this code in Py.Cafe</a></b>
+        <img src=https://py.cafe/logo.png alt="py.cafe logo" width="30"><b><a target="_blank" href="https://py.cafe/vizro-official/vizro-dynamic-cards">Run and edit this code in Py.Cafe</a></b>
 
     === "styling.css"
         ```css

vizro-core/docs/pages/user-guides/custom-figures.md

@@ -4,13 +4,16 @@ This guide shows you how to launch your dashboard in different ways. By default,
 
 ## Py.Cafe
 
-You can launch your dashboard and edit the code live on [Py.Cafe](https://py.cafe/).
+The easiest way to launch your dashboard is to edit the code live on [Py.Cafe](https://py.cafe/).
 
-For this basic example, follow the [Edit live on Py.Cafe](https://py.cafe/stichbury/vizro-iris-analysis) link below the dashboard to experiment with the code.
+Most of our examples have a link below the code, [Run and edit this code in Py.Cafe](https://py.cafe/vizro-official/vizro-iris-analysis-0), which you can follow to experiment with the code. This will lead you to an editor such as the one below, which displays the dashboard and the code side by side.
 
-<iframe src="https://py.cafe/stichbury/vizro-iris-viz" width="100%" height="600px"></iframe>
+<figure markdown="span">
+  ![Py.Cafe editor](../../assets/user_guides/run/pycafe_editor.png)
+  <figcaption>Enter your dashboard code on the left, and see the results immediately reflected in the app on the right.</figcaption>
+</figure>
 
-You can use [Py.Cafe](https://py.cafe/) to experiment with your own Vizro dashboards by dropping code into a new project.
+You can use [Py.Cafe](https://py.cafe/snippet/vizro/v1) snippet mode to experiment with your own Vizro dashboards by dropping code into a new project.
 
 
 ## Default built-in Flask development server

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

@@ -109,7 +109,7 @@ markdown_extensions:
             kwds:
               type: vizro
               requirements: |
-                vizro
+                vizro==0.1.20
                 ruff==0.6.1  # mock
   - pymdownx.tabbed:
       alternate_style: true