solara 1.29.1__py2.py3-none-any.whl → 1.30.1__py2.py3-none-any.whl

solara/website/pages/documentation/__init__.py

@@ -0,0 +1,184 @@
+from pathlib import Path
+
+import solara
+
+_title = "Documentation"
+
+HERE = Path(__file__).parent
+
+route_order = ["/", "getting_started", "examples", "components", "api", "advanced", "faq"]
+
+
+@solara.component_vue(str(HERE.parent.parent / "components" / "algolia_api.vue"))
+def Algolia():
+    pass
+
+
+@solara.component
+def Page(children=[]):
+    # show a gallery of all the api pages
+    router = solara.use_router()
+    route_current = router.path_routes[-2]
+
+    with solara.Column(style={"width": "100%"}, gap="75px"):
+        if route_current.path == "documentation":
+            with solara.Column(classes=["api-search-container"], gap="50px", style={"justify-content": "center"}, align="center"):
+                solara.Markdown("# Search the Solara Documentation", style={"text-align": "center"})
+                with solara.Row(style={"width": "100%", "min-width": "20rem", "justify-content": "center", "background-color": "transparent"}):
+                    Algolia()
+            with solara.Row(gap="20px", classes=["docs-card-container"]):
+                for route in route_current.children:
+                    if route.path in ["/", "advanced", "faq"]:
+                        continue
+                    with solara.Link("/documentation/" + route.path):
+                        with solara.Row(
+                            classes=["docs-card"],
+                            style={
+                                "background-color": f"var({'--docs-color-grey' if route.path != 'getting_started' else '--color-primary'})",
+                            },
+                        ):
+                            with solara.Column(style={"height": "100%", "flex-grow": "1", "background-color": "transparent"}):
+                                solara.HTML(tag="h2", unsafe_innerHTML=route.label, style={"color": "white", "padding": "1.5rem"})
+                            with solara.Column(style={"justify-content": "center", "height": "100%", "background-color": "transparent"}):
+                                solara.v.Icon(children=["mdi-arrow-right"], color="var(--color-grey-light)", x_large=True, class_="docs-card-icon")
+            with solara.Row(gap="75px", style={"flex-wrap": "wrap", "row-gap": "75px", "padding-bottom": "75px"}):
+                with solara.Column(style={"padding-left": "10%"}):
+                    solara.HTML(tag="h2", unsafe_innerHTML="How to use our documentation:", style={"padding": "1.5rem"})
+                    solara.Markdown(
+                        """
+* [Getting Started](/documentation/getting_started) - Learn how to install Solara and get started with building your app.
+    Also includes tutorials for you to get a hang of Solara workflow.
+* [Examples](/documentation/examples) - More complex and real world applicable examples of Solara apps.
+    For even more complexity you can see the [Showcase](/showcase) page.
+* [Components](/documentation/components) - All the components that are available in Solara.
+* [API](/documentation/api) - All the API functions that are available in Solara. Importantly, this includes routing and hooks.
+* [Advanced](/documentation/advanced) - Advanced topics like associated and underlying libraries.
+    If a component you would like to use is not available in Solara, you can use the underlying library directly.
+                    """
+                    )
+                with solara.Column(style={"justify-content": "center", "height": "100%"}):
+                    solara.HTML(tag="h2", unsafe_innerHTML="Also Check Out", style={"padding": "1.5rem"})
+                    with solara.Row(gap="20px", style={"flex-wrap": "wrap", "row-gap": "20px", "align-items": "center"}):
+                        with solara.v.Html(tag="a", attributes={"href": "https://discord.solara.dev", "target": "_blank"}):
+                            with solara.Div(classes=["social-logo-container"], style={"background-color": "var(--docs-social-discord)"}):
+                                solara.v.Html(tag="img", attributes={"src": "/static/public/social/discord.svg"}, style_="height: 1.5rem; width: auto;")
+                        solara.Text("We use discord to provide support and answer questions there actively.")
+                    with solara.Row(gap="20px", style={"flex-wrap": "wrap", "row-gap": "20px", "align-items": "center"}):
+                        with solara.v.Html(tag="a", attributes={"href": "https://github.com/widgetti/solara", "target": "_blank"}):
+                            with solara.Div(classes=["social-logo-container"], style={"background-color": "var(--docs-social-github)"}):
+                                solara.v.Html(tag="img", attributes={"src": "/static/public/social/github.svg"}, style_="height: 1.5rem; width: auto;")
+                        solara.Text("Search for solutions on Github issues, or report bugs.")
+                    with solara.Row(gap="20px", style={"flex-wrap": "wrap", "row-gap": "20px", "align-items": "center"}):
+                        with solara.v.Html(tag="a", attributes={"href": "https://twitter.com/solara_dev", "target": "_blank"}):
+                            with solara.Div(classes=["social-logo-container"], style={"background-color": "var(--docs-social-twitter)"}):
+                                solara.v.Html(tag="img", attributes={"src": "/static/public/social/twitter.svg"}, style_="height: 1.5rem; width: auto;")
+                        solara.Text("Get announcements about Solara features, showcases, and events!.")
+
+        else:
+            with solara.Column(align="center", children=children, style={"padding": "0"}):
+                pass
+
+
+@solara.component
+def Sidebar():
+    route_current, all_routes = solara.use_route()
+    router = solara.use_router()
+    if route_current is None:
+        return solara.Error("Page not found")
+
+    with solara.v.NavigationDrawer(
+        clipped=True, width="20rem", height="unset", style_="min-height: calc(100vh - 215.5px);", class_="d-none d-md-block"
+    ) as main:
+        with solara.v.List(expand=True, nav=True, style_="height: calc(100vh - 215.5px); display: flex; flex-direction: column;"):
+            with solara.v.ListItemGroup(v_model=router.path):
+                for route in all_routes:
+                    if len(route.children) == 1 or route.path == "/":
+                        with solara.Link("/documentation/" + route.path if route.path != "/" else "/documentation"):
+                            with solara.v.ListItem(value="/documentation/" + route.path if route.path != "/" else "/documentation"):
+                                if route.path == "/":
+                                    solara.v.ListItemIcon(children=[solara.v.Icon(children=["mdi-home"])])
+                                solara.v.ListItemTitle(style_="padding: 0 20px;", children=[route.label])
+                    else:
+                        with solara.v.ListGroup(
+                            v_slots=[
+                                {
+                                    "name": "activator",
+                                    "children": solara.v.ListItemTitle(
+                                        children=[route.label],
+                                        style_="padding: 0 20px;",
+                                    ),
+                                }
+                            ],
+                            value=router.path.startswith("/documentation/" + route.path),
+                        ):
+                            for item in route.children:
+                                if item.path == "/":
+                                    continue
+                                if item.children != [] and any([c.label is not None and c.path != "/" for c in item.children]):
+                                    with solara.v.ListGroup(
+                                        v_slots=[
+                                            {
+                                                "name": "activator",
+                                                "children": solara.v.ListItemTitle(
+                                                    children=[item.label],
+                                                ),
+                                            }
+                                        ],
+                                        sub_group=True,
+                                        no_action=True,
+                                        value=router.path.startswith("/documentation/" + route.path + "/" + item.path),
+                                    ):
+                                        for subitem in item.children:
+                                            # skip pages that are only used to demonstrate Link or Router usage
+                                            if subitem.path == "/" or subitem.label is None:
+                                                continue
+                                            path = (
+                                                "/documentation/" + route.path + "/" + item.path + "/" + subitem.path
+                                                if item.path != "fullscreen"
+                                                else "/apps/" + subitem.path
+                                            )
+                                            with solara.Link(
+                                                path,
+                                            ):
+                                                with solara.v.ListItem(dense=True, style_="padding: 0 20px;", value=path):
+                                                    solara.v.ListItemContent(
+                                                        children=[subitem.label],
+                                                    )
+                                else:
+                                    with solara.v.ListItemGroup(value="/documentation/" + route.path + "/" + item.path):
+                                        with solara.Link(
+                                            "/documentation/" + route.path + "/" + item.path,
+                                        ):
+                                            with solara.v.ListItem(dense=True, style_="padding: 0 20px;"):
+                                                solara.v.ListItemContent(
+                                                    children=[item.label],
+                                                )
+            solara.v.Spacer(style_="flex-grow: 1;")
+            with solara.v.ListItemGroup():
+                with solara.Link("/contact"):
+                    with solara.v.ListItem():
+                        solara.v.ListItemIcon(children=[solara.v.Icon(children=["mdi-email"])])
+                        solara.v.ListItemTitle(style_="padding: 0 20px;", children=["Contact"])
+                with solara.Link("/changelog"):
+                    with solara.v.ListItem():
+                        solara.v.ListItemIcon(children=[solara.v.Icon(children=["mdi-history"])])
+                        solara.v.ListItemTitle(style_="padding: 0 20px;", children=["Changelog"])
+
+    return main
+
+
+@solara.component
+def Layout(children=[]):
+    route_current, all_routes = solara.use_route()
+    if route_current is None:
+        return solara.Error("Page not found")
+
+    if route_current.path == "/":
+        return Page()
+    else:
+        return Page(children=children)
+
+
+@solara.component
+def Overview():
+    pass

solara/website/pages/{docs → documentation/advanced}/__init__.py

@@ -1,9 +1,9 @@
 from pathlib import Path
 
 from solara.autorouting import generate_routes_directory
+from solara.website.components.markdown import MarkdownWithMetadata
 
-title = "Docs"
 HERE = Path(__file__)
 # if we didn't put the content in the subdirectory, but pointed to the current file
 # we would include the current file recursively, causing an infinite loop
-routes = generate_routes_directory(HERE.parent / "content")
+routes = generate_routes_directory(HERE.parent / "content", MarkdownWithMetadata)

solara/website/pages/documentation/advanced/content/00-overview.md

@@ -0,0 +1 @@
+The entries are meant as deeper dives into specific topics. Although we try to write each as a standalone document, some parts may build on previous ones.

solara/website/pages/{docs → documentation/advanced}/content/10-howto/00-overview.md

@@ -1 +1,6 @@
+---
+title: Overview of how-to articles
+description: The how-tos are meant as deeper dives into specific topics from various perspectives
+---
+
 The how-tos are meant as deeper dives into specific topics. Although we try to write each how-to as a standalone document, some parts of a how-to may build on top of a previous one.

solara/website/pages/{docs/content/10-howto/20-multipage.md → documentation/advanced/content/10-howto/10-multipage.md}

@@ -1,6 +1,11 @@
+---
+title: Building multi-page apps in Solara
+description: The simplest way to create a multi-page app is to create a directory with multiple scripts.
+---
+
 # Multi-page support
 
-In the [Web App tutorial](/docs/tutorial/web-app), we created an application consisting of a single page. Web applications generally have multiple pages, and Solara supports this as well.
+In the [Web App tutorial](/documentation/getting_started/tutorials/web-app), we created an application consisting of a single page. Web applications generally have multiple pages, and Solara supports this as well.
 
 
 ## Multiple scripts
@@ -42,8 +47,7 @@ Solara now:
    * Generate a nice URL by stripping of prefix, splitting the filename taking out `-`, `_` and spaces, and join them together using a `-`  (e.g. "/markdown-editor").
    * Generate a nice default title similar to the link, but now capitalize the first letter and join with a space instead  (e.g. "Mardown Editor").
    * The first page will be the default (and its URL will be empty instead, i.e., the empty string `""`)
-   * Since the first script does not define a `Layout` component, nor did we add a `__init__.py` with a `Layout` component, Solara will add a [default
-     Layout component](/api/default_layout) which includes a navigation sidebar.
+   * Since the first script does not define a `Layout` component, nor did we add a `__init__.py` with a `Layout` component, Solara will add a [Layout component](/documentation/components/layout/app_layout) which includes a navigation sidebar.
    * If a path is a directory, Solara will recursively scan the subdirectory and include it in the navigation. Read more on this in the [Layout section](layout)
 
 Solara will render two pages:
@@ -148,7 +152,7 @@ routes = [
 ]
 ```
 
-See more details in the [Route section](/docs/understanding/routing).
+See more details in the [Route section](/documentation/advanced/understanding/routing).
 
 ## Dynamic pages
 
@@ -189,4 +193,4 @@ By giving the name argument a default value of `"foo"`, Solara will also accept
 
 # What next?
 
-  * Also check out the [Multipage example](/apps/multipage) for more inspiration.
+  * Also check out the [Multipage example](/documentation/examples/fullscreen/multipage) for more inspiration.

solara/website/pages/{docs/content/10-howto/30-layout.md → documentation/advanced/content/10-howto/20-layout.md}

@@ -1,3 +1,8 @@
+---
+title: Making different layouts in Solara
+description: Solara comes with a layout system ideal for data apps. Learn how to use them in this short guide.
+---
+
 # Layout
 
 Solara comes with a layout system ideal for data apps.
@@ -33,29 +38,29 @@ def Page():
                     solara.Info("two per column on small screens, three per column on large screens")
 ```
 
-[Navigate here to watch this layout in a full browser window](/apps/layout-demo)
+[Navigate here to watch this layout in a full browser window](/documentation/examples/fullscreen/layout-demo)
 
 The key takeaways are:
 
-  * By default, Solara will wrap your component in an [AppLayout](/api/app_layout), which will give you:
-    * Room for a sidebar, that you can populate using the [Sidebar](/api/sidebar) component.
-    * A toolbar showing the [Title](/api/title).
-    * Not visible here: In the case of [multiple pages](/docs/howto/multipage) will include page navigation tabs. See [The multipage demo app](/app/multipage) for an example.
-  * Use [Card](/api/card) to put related components together with a title.
-  * Use [Column](/api/column) to simply layout components under each other.
-  * Use [Columns](/api/columns) if you want to have a few columns with relative sizes next to each other.
-  * Use [ColumnsResponsive](/api/columns_responsive) to have the column widths respond to screen size.
+  * By default, Solara will wrap your component in an [AppLayout](/documentation/components/layout/app_layout), which will give you:
+    * Room for a sidebar, that you can populate using the [Sidebar](/documentation/components/layout/sidebar) component.
+    * A toolbar showing the [Title](/documentation/components/page/title).
+    * Not visible here: In the case of [multiple pages](/documentation/advanced/howto/multipage) will include page navigation tabs. See [The multipage demo app](/documentation/examples/fullscreen/multipage) for an example.
+  * Use [Card](/documentation/components/layout/card) to put related components together with a title.
+  * Use [Column](/documentation/components/layout/column) to simply layout components under each other.
+  * Use [Columns](/documentation/components/layout/columns) if you want to have a few columns with relative sizes next to each other.
+  * Use [ColumnsResponsive](/documentation/components/layout/columns_responsive) to have the column widths respond to screen size.
 
 
 
 ## Changing the default layout
 
-While [AppLayout](/api/app_layout) may be sufficient in 80% of the cases. Solara provides a way to change this default layout in [Solara server](/docs/understanding/solara-server).
+While [AppLayout](/documentation/components/layout/app_layout) may be sufficient in 80% of the cases. Solara provides a way to change this default layout in [Solara server](/documentation/advanced/understanding/solara-server).
 
 You can define your own `Layout` component in the `__init__.py` file in the same directory of your app script.
 
 
-For instance, putting the following `Layout` component in `__init__.py` will give you effectively the same [AppLayout](/api/app_layout):
+For instance, putting the following `Layout` component in `__init__.py` will give you effectively the same [AppLayout](/documentation/components/layout/app_layout):
 ```python
 @solara.component
 def Layout(children=[]):
@@ -80,7 +85,7 @@ This layout leaves every page responsible for creating its own header, footer, a
 ### Layout with navigation
 
 In case you want to set up your own layout system, which sets up navigation as well, this example may get you started. It may help
-to [understand routing](/docs/understanding/routing).
+to [understand routing](/documentation/advanced/understanding/routing).
 ```python
 @solara.component
 def Layout(children=[]):
@@ -108,13 +113,13 @@ This is useful for larger apps where each subdirectory may add a bit of layout/c
 
 ## Components
 
-The following [Container components](/docs/understanding/containers) can be used to define the layout of you app.
+The following [Container components](/documentation/advanced/understanding/containers) can be used to define the layout of you app.
 
- * [Row](/api/row)
- * [Column](/api/column)
- * [ColumnsResponsive](/api/columns_responsive)
- * [GridFixed](/api/gridfixed)
- * [GridDraggable](/api/griddraggable)
- * [VBox](/api/vbox) (kept for ipywidgets compatibility, please use Column)
- * [HBox](/api/hbox) (kept for ipywidgets compatibility, please use Row)
- * [AppLayout](/api/app_layout) Not often used directly, since Solara will already wrap your page in it. Sometimes re-used in a new `Layout` component.
+ * [Row](/documentation/components/layout/row)
+ * [Column](/documentation/components/layout/column)
+ * [ColumnsResponsive](/documentation/components/layout/columns_responsive)
+ * [GridFixed](/documentation/components/layout/gridfixed)
+ * [GridDraggable](/documentation/components/layout/griddraggable)
+ * [VBox](/documentation/components/layout/vbox) (kept for ipywidgets compatibility, please use Column)
+ * [HBox](/documentation/components/layout/hbox) (kept for ipywidgets compatibility, please use Row)
+ * [AppLayout](/documentation/components/layout/app_layout) Not often used directly, since Solara will already wrap your page in it. Sometimes re-used in a new `Layout` component.

solara/website/pages/{docs/content/10-howto/50-testing.md → documentation/advanced/content/10-howto/30-testing.md}

@@ -1,3 +1,8 @@
+---
+title: Testing your Solara application, both front and back end
+description: Using solara you can test both the front and back end functionalities of your application.
+---
+
 # Testing with Solara
 # Testing Application Logic
 

solara/website/pages/{docs/content/10-howto/51-debugging.md → documentation/advanced/content/10-howto/31-debugging.md}

@@ -1,4 +1,7 @@
-
+---
+title: Debugging Solara applications
+description: You can use the Python debugger to debug your Solara app.
+---
 # Debugging
 
 ## PDB

solara/website/pages/{docs/content/10-howto/80-embed.md → documentation/advanced/content/10-howto/40-embed.md}

@@ -1,3 +1,9 @@
+---
+title: Embedding Solara applications into existing websites
+description: Solara can be embedded into existing websites. Although it is technically possible to embed a Solara app into an existing webpage,
+    we currently support embedding primarily via iframes.
+---
+
 # Embedding in existing websites
 
 Solara can be embedded into existing websites. Although it is technically possible to embed a Solara app into an existing webpage, we currently support embedding primarily via iframes.
@@ -40,4 +46,4 @@ Solara uses a cookie to implement sessions. To support cookies settings in an if
 
 ## Embed into an existing page
 
-If embedding into an iframe does not suit your needs (for example, dialogs not being fullscreen), [please contact us](/docs/contact) and we can discuss other options.
+If embedding into an iframe does not suit your needs (for example, dialogs not being fullscreen), [please contact us](/contact) and we can discuss other options.

solara/website/pages/{docs/content/10-howto/ipywidget_libraries.md → documentation/advanced/content/10-howto/50-ipywidget_libraries.md}

@@ -1,3 +1,7 @@
+---
+title: Using various ipywidgets libraries within a Solara application
+description: Solara can work with virtually any ipywidget library, and enables powerful interactivity with libraries like ipyleaflet, ipydatagrid, and bqplot.
+---
 # How can I use ipywidget library X?
 
 Solara can work with any ipywidget library, such as [ipyleaflet](https://github.com/jupyter-widgets/ipyleaflet), [ipydatagrid](https://github.com/bloomberg/ipydatagrid) or [bqplot](https://github.com/bqplot/bqplot).

solara/website/pages/documentation/advanced/content/20-understanding/00-introduction.md

@@ -0,0 +1,10 @@
+---
+title: Understanding Solara's functionality
+description: Solara builds on existing technologies. If you are new to Solara or some of the underlying technologies, you may feel lost at times.
+    These 'understanding' guides are meant to help you understand topics at a deeper level and how they connect to Solara.
+---
+
+# Introduction
+
+Solara builds on existing technologies. If you are new to Solara or some of the underlying technologies, you may feel lost at times.
+These 'understanding' guides are meant to help you understand topics at a deeper level and how they connect to Solara.

solara/website/pages/{docs → documentation/advanced}/content/20-understanding/05-ipywidgets.md

@@ -1,3 +1,8 @@
+---
+title: Understanding how ipywidgets work together with Solara
+description: Solara's primarily standalone app approach differs from the ipywidgets one. This article dives deeper into the different approaches and adapting to using
+    ipywidgets within Solara.
+---
 # IPywidgets
 
  * [Documentation](https://ipywidgets.readthedocs.io/en/stable/)

solara/website/pages/{docs → documentation/advanced}/content/20-understanding/06-ipyvuetify.md

@@ -1,3 +1,7 @@
+---
+title: Using ipyvuetify widgets with Solara
+description: Ipyvuetify is an ipywidgets based library that wraps the Vuetify javascript framework for use with python widgets. Learn how to use these to build apps with Solara.
+---
 # ipyvuetify
 
  * [Documentation](https://ipyvuetify.readthedocs.io/)
@@ -11,7 +15,7 @@ material design based widgets.
 
 ## Reacton and ipyvuetify
 
-We consider ipyvuetify one of the most essential ipywidget libraries, and that is the reason why [Reacton](/docs/understanding/reacton) ships with
+We consider ipyvuetify one of the most essential ipywidget libraries, and that is the reason why [Reacton](/documentation/advanced/understanding/reacton) ships with
 generated ipyvuetify components to make your app type safe.
 
 ```solara

solara/website/pages/{docs → documentation/advanced}/content/20-understanding/10-reacton.md

@@ -1,3 +1,7 @@
+---
+title: Understanding how Solara builds on Reacton
+description: Solara adapts the React way of using components declaratively to build UIs and brings it to Python.
+---
 # Reacton
 
  * [Documentation](https://reacton.solara.dev/)

solara/website/pages/{docs → documentation/advanced}/content/20-understanding/12-reacton-basics.md

@@ -1,3 +1,7 @@
+---
+title: Understanding the basics of Reacton
+description: Using your favorite component, we try to understand better how it works to improve your understanding of Reacton and, thus, how to use Solara.
+---
 # Reacton basic understanding
 
 
@@ -90,7 +94,7 @@ In words
    1. Solara create `el = ButtonClick()` from your component.
    1. The `display(el)` triggers the call to Reacton.
    1. The render call enters the render phase, which will call the function body (which we call render function) of the `ButtonClick` component.
-   1. Our ButtonClick render function calls [`use_state`](/api/use_state). Because this is our first render phase, this returns the initial value (0).
+   1. Our ButtonClick render function calls [`use_state`](/documentation/api/hooks/use_state). Because this is our first render phase, this returns the initial value (0).
    1. The ButtonClick render function returns a Button element (not a widget!) with `description="Clicked: 0 times"`.
    1. The Reacton render call is done with the render phase, and enters the reconciliation phase, where it looks at the difference between the real widgets and the virtual widgets tree (represented by the Reacton elements). We find there is no previous widget associated with the virtual widget (or element) and decide to create a widget.
    1. Asynchronously via the Jupyter protocol, a widget model and view are created and displayed to the user in the browser.

solara/website/pages/{docs → documentation/advanced}/content/20-understanding/15-anatomy.md

@@ -1,3 +1,7 @@
+---
+title: The anatomy of Solara's functionality
+description: Dive deep into how Solara uses the technologies it builds on.
+---
 # Anatomy
 
 For communication, it is useful to speak the same language and use the same idiom.
@@ -9,10 +13,10 @@ As a reference, we provide this "anatomy" image of our favorite `ClickButton` co
 
  * Import `solara` and you also get the `reacton` namespace with it (saves typing, and finding/remembering which hooks is in which packages)
  * Add a `@solara.component` decorator to turn your function into a component.
- * Start with `use_state` hooks and other hooks. This avoids issues with [conditional hooks](/docs/understanding/rules-of-hooks) or hooks in loops.
+ * Start with `use_state` hooks and other hooks. This avoids issues with [conditional hooks](/documentation/advanced/understanding/rules-of-hooks) or hooks in loops.
  * Data/state flows down (to children)
  * Information (events, data) flows up from children via events and callbacks (`on_<some_event_name>=my_callback`).
- * If you need multiple components, use a [parent container component](/api#layout) as context manager. A good default name to give this context manager is `main`. Don't forget to return it in your render function!
+ * If you need multiple components, use a [parent container component](/documentation/components/layout/app_layout) as context manager. A good default name to give this context manager is `main`. Don't forget to return it in your render function!
  * The body of your component (the function you wrote) is called the render function.
  * In between the hooks as defining all your elements, you put your custom code, like checking variables, defining callbacks, and other logic.
  * The only way for a component to cause itself to rerender is to have state (using `use_state`) and change it (calling the second return value with a different value).

solara/website/pages/documentation/advanced/content/20-understanding/17-rules-of-hooks.md

@@ -0,0 +1,7 @@
+---
+title: The rules of hooks in Solara
+description: Learn the rules that govern the usage of hooks in your Solara application.
+----
+# Rules of hooks
+
+For now, we refer to the [ReactJS documentation](https://reactjs.org/docs/hooks-rules.html).

solara/website/pages/{docs → documentation/advanced}/content/20-understanding/18-containers.md

@@ -1,3 +1,9 @@
+---
+title: Using Solara with containers to build complex UIs
+description: Solara allows for using python with statements to populate your UIs in a structured manner. This makes it easy to compose different components to build cohesive
+    wholes.
+---
+
 # Laying out components with containers
 
 ## Introduction
@@ -51,7 +57,7 @@ Page = FancyClickButton
 ```
 
 
-Here we use an [HBox](/api/hbox) to lay out two child components horizontally.
+Here we use an [HBox](/documentation/components/layout/hbox) to lay out two child components horizontally.
 
 
 ## Cleaner way to add children to containers
@@ -96,7 +102,7 @@ with some_named_context_manager() as this_is_my_name:
     print("some other code")
 ```
 
-Where the last example assigns the context manager to a variable. In Solara we only need to do that to the top context manager, since we need to return that in our [render function](/docs/understanding/anatomy).
+Where the last example assigns the context manager to a variable. In Solara we only need to do that to the top context manager, since we need to return that in our [render function](/documentation/advanced/understanding/anatomy).
 
 All Reacton or Solara components return elements that can be used as context managers. Context managers allow for code to be executed before and after your code block inside of the context manager. This allows us to capture all elements created inside of the context manager. If you want to know more about context managers, consult the Python documentation since this is not Solara specific.
 
@@ -138,7 +144,7 @@ Page = FancyClickButton
 Instead of returning the main container, Solara also allows you to not have a return value (or return `None`).
 If that is the case, Solara will look at what elements you created. If you created one, that element will be taken
 as a return value instead. If you make more than one element, those elements will be automatically wrapped by
-a [Column](/api/column). The only benefit of returning an element, is that we can infer the correct return type,
+a [Column](/documentation/components/layout/column). The only benefit of returning an element, is that we can infer the correct return type,
 which can be useful for testing purposes. Users should probably never return an element, but use the automatic
 container feature.
 

solara/website/pages/{docs → documentation/advanced}/content/20-understanding/20-solara.md

@@ -1,3 +1,8 @@
+---
+title: Understanding different parts of Solara
+description: Solara is made of two main components, the bulk of the Solara package with UI elements that can be used together with Jupyter, and Solara server, which
+    allows for these UI elements to be used in standalone apps and dashboards
+---
 # Solara
 
 Solara combines [ipywidgets](./ipywidgets), [reacton](./reacton) and puts it into a opinionated framework to make web apps with a focus on data (data apps for short).

solara/website/pages/{docs → documentation/advanced}/content/20-understanding/40-routing.md

@@ -1,3 +1,7 @@
+---
+title: Understanding routing in multi-page solara apps
+description: Dive into Solara's routing, which provides a powerful way to compose multiple pages or dashboards into an integrated app.
+---
 # Routing
 
 Routing takes care of linking a web address (more specifically the [pathname](https://developer.mozilla.org/en-US/docs/Web/API/Location), e.g. "/docs/basics/solara") to a state of the UI,
@@ -13,15 +17,15 @@ Setting up routing can be repetitive, and therefore Solara comes also with a mor
 
 ### Based on a directory
 
-Using [`generate_routes_directory(path: Path) -> List[solara.Route]:`](/api/generate_routes_directory) we can request Solara to give us a list of
+Using [`generate_routes_directory(path: Path) -> List[solara.Route]:`](/documentation/api/routing/generate_routes_directory) we can request Solara to give us a list of
 routes by scanning a directory for Python scripts, Notebooks and Markdown files.
 
-This function is being used by Solara if you run solara server with a directory as argument name, as used in [our Multi Page guide](/docs/howto/multipage). More details can be found there.
+This function is being used by Solara if you run solara server with a directory as argument name, as used in [our Multi Page guide](/documentation/advanced/howto/multipage). More details can be found there.
 
 
 ### Based on a Python package
 
-Similar to the previous section [`generate_routes(module: ModuleType) -> List[solara.Route]:`](/api/generate_routes) will return a list of routes by scanning a Python package or module for `Page` components, or `app` elements. Again, more information can be found at [our Multi Page guide](/docs/howto/multipage).
+Similar to the previous section [`generate_routes(module: ModuleType) -> List[solara.Route]:`](/documentation/api/routing/generate_routes) will return a list of routes by scanning a Python package or module for `Page` components, or `app` elements. Again, more information can be found at [our Multi Page guide](/documentation/advanced/howto/multipage).
 
 ## Manually defining routes
 
@@ -59,7 +63,7 @@ routes = [
 
 ### Defining route components
 
-If you do define a `Page` component, you are fully responsible for how routing is done, but we recommend using [use_route](/api/use_route).
+If you do define a `Page` component, you are fully responsible for how routing is done, but we recommend using [use_route](/documentation/api/routing/use_route).
 
 An example route definition could be something like this:
 
@@ -180,9 +184,9 @@ routes = [
 ]
 ```
 
-In the case where you did not specify a `Page` component, label is used for the [Title](/api/title) component.
+In the case where you did not specify a `Page` component, label is used for the [Title](/documentation/components/page/title) component.
 
-If you need to store more data in the route, you are free to put whatever you want in the `data` attribute, see also [Route](/api/route).
+If you need to store more data in the route, you are free to put whatever you want in the `data` attribute, see also [Route](/documentation/api/routing/route).
 
 
 
@@ -194,14 +198,14 @@ Note that all routes are relative, since a component does not know if it is embe
 Therefore you should never use the `route.path` for navigation since the route object has no knowledge of the full url
 (e.g. `/docs/basics/ipywigets`) but only knows its small piece of the pathname (e.g. `ipywidgets`)
 
-Using [`resolve_path`](/api/resolve_path) we can request the full url for navigation.
+Using [`resolve_path`](/documentation/api/routing/resolve_path) we can request the full url for navigation.
 
 ```python
 def resolve_path(path_or_route: Union[str, solara.Route], level=0) -> str:
     ...
 ```
 
-We can pass this full URL to the [`solara.Link`](/api/link) component, e.g. like:
+We can pass this full URL to the [`solara.Link`](/documentation/components/advanced/link) component, e.g. like:
 
 ```python
 @solara.component
@@ -217,7 +221,7 @@ def LinkToIpywidgets():
 
 ## Fully manual routing
 
-If you want to do routing fully manually, you can use the [`solara.use_router`](/api/use_router) hook, and use the `.path` attribute.
+If you want to do routing fully manually, you can use the [`solara.use_router`](/documentation/api/routing/use_router) hook, and use the `.path` attribute.
 
 ```python
 import solara

solara/website/pages/{docs → documentation/advanced}/content/20-understanding/50-solara-server.md

@@ -1,3 +1,8 @@
+---
+title: Understanding the way Solara server works
+description: Solara server enables running ipywidgets-based applications as standalone dashboards and apps, allowing multiple "Virtual kernels" to share
+   the same process for better performance and scalability.
+---
 # Solara server
 
 The solara server enables running ipywidgets based applications without a real Jupyter kernel, allowing multiple "Virtual kernels" to share the same process for better performance and scalability.
@@ -67,7 +72,7 @@ The JSON format may be subject to change.
 
 By default, solara runs in development mode. This means, it will:
 
-   * Automatically [reload your project files](docs/reference/reloading) by watching files on the filesystemn
+   * Automatically [reload your project files](/documentation/getting_started/reference/reloading) by watching files on the filesystemn
    * Load debug version of the CSS files and JavaScript files for improved error messages (which leads to larger asset files).
 
 To disabled all of these option, pass the `--production` flag, or set the environment variable `SOLARA_MODE=production`.

solara/website/pages/{docs → documentation/advanced}/content/20-understanding/60-voila.md

@@ -1,3 +1,8 @@
+---
+title: Working together with Voilà
+description: Voilà, together with `voila-vuetify` is an alternative to Solara server. The most significant difference is that Voilà will start one kernel/process
+    per page request, while Solara server is more scalable.
+---
 # Voilà
 
 [Voilà](https://voila.readthedocs.io/) allows you to convert a Jupyter Notebook into an interactive dashboard that allows you to share your work with others.