docs tweaks, page names are now mandatory

README.md

@@ -140,6 +140,7 @@ class DallEPage(rio.Component):
 app = rio.App(
     pages=[
         rio.Page(
+            name="Home",
             page_url="",
             build=DallEPage,
         ),

package.json

@@ -24,6 +24,7 @@
         "micromark": "^4.0.0",
         "prettier": "^3.0.3",
         "sass": "^1.66.1",
+        "ts-migrate": "^0.1.35",
         "typescript": "^5.2.2",
         "vite": "^4.5.3",
         "vite-plugin-singlefile": "^0.13.5"

rio/cli/project_setup.py

@@ -67,18 +67,23 @@ def generate_root_init(
     # Prepare the different pages
     page_strings = []
     for snip in pages:
+        page_component_name = class_name_from_snippet(snip)
+
         # What's the URL segment for this page?
         if snip is main_page_snippet:
             url_segment = ""
+            page_nicename = "Home"
         else:
             assert snip.name.endswith(".py"), snip.name
             url_segment = snip.name[:-3].replace("_", "-").lower()
+            page_nicename = page_component_name
 
         page_strings.append(
             f"""
         rio.Page(
+            name="{page_nicename}",
             page_url={url_segment!r},
-            build=pages.{class_name_from_snippet(snip)},
+            build=pages.{page_component_name},
         ),"""
         )
 

rio/components/button.py

@@ -40,15 +40,15 @@ class Button(Component):
         icons work in Rio.
 
     `shape`: The shape of the button. This can be one of:
-    - `pill`: A rectangle where the left and right sides are completely round.
-    - `rounded`: A rectangle with rounded corners.
-    - `rectangle`: A rectangle with sharp corners.
+        - `pill`: A rectangle where the left and right sides are completely round.
+        - `rounded`: A rectangle with rounded corners.
+        - `rectangle`: A rectangle with sharp corners.
 
     `style`: Controls the button's appearance. This can be one of:
-    - `major`: A highly visible button with bold visuals.
-    - `minor`: A less visible button that blends into the background.
-    - `plain`: A button with no background or border. Use this to make
-            the button look like a link.
+        - `major`: A highly visible button with bold visuals.
+        - `minor`: A less visible button that blends into the background.
+        - `plain`: A button with no background or border. Use this to make
+                the button look like a link.
 
     `color`: The color scheme to use for the button.
 

rio/components/page_view.py

@@ -86,10 +86,12 @@ class PageView(Component):
         ),
         pages=[
             rio.Page(
+                "Home",
                 "",
                 build=lambda: rio.Text("This is the home page"),
             ),
             rio.Page(
+                "Subpage",
                 "subpage",
                 build=lambda: rio.Text("This is a subpage"),
             ),

rio/components/switcher_bar.py

@@ -99,9 +99,9 @@ class SwitcherBar(FundamentalComponent, Generic[T]):
                         ),
                         rio.Spacer(),
                         rio.SwitcherBar(
-                            # values are the page_urls, which are the same as the page_url
-                            # of the rio.Page instances, e.g.: rio.Page(page_url="first-page", ...)
-                            # rio.App -> rio.Page(page_url="first-page", ...) -> "first-page"
+                            # For the values, we'll use the URL segments of the
+                            # pages in the app. This makes it easy to navigate
+                            # to them.
                             values=["/", "first-page", "second-page"],
                             names=["Home", "First Page", "Second Page"],
                             selected_value=self.session.active_page_instances[0].page_url,

rio/docs/__init__.py

@@ -3,6 +3,14 @@ import rio
 from . import custom as custom
 
 
+def get_documentation_fragment(object_name: str) -> str:
+    """
+    Returns the fragment part of the URL corresponding to the documentation for
+    the given Rio object.
+    """
+    return object_name.lower()
+
+
 def build_documentation_url(
     object_name: str,
     *,
@@ -15,7 +23,7 @@ def build_documentation_url(
     """
 
     # Build the relative URL
-    result_string = f"/docs/object/{object_name.lower()}"
+    result_string = f"/docs/api/{get_documentation_fragment(object_name)}"
 
     # Make it absolute, if requested
     if not relative:

rio/routing.py

@@ -33,11 +33,13 @@ class Page:
             rio.Text("Welcome to my page!"), rio.PageView(
                 width="grow", height="grow",
             ),
-        ), pages=[
+        ),
+        pages=[
             rio.Page(
-                "", build=lambda: rio.Text("This is the home page"),
-            ), rio.Page(
-                "subpage", build=lambda: rio.Text("This is a subpage"),
+                "Home", "", build=lambda: rio.Text("This is the home page"),
+            ),
+            rio.Page(
+                "Subpage", "subpage", build=lambda: rio.Text("This is a subpage"),
             ),
         ],
     )
@@ -78,11 +80,11 @@ class Page:
             to a different page.
     """
 
+    name: str
     page_url: str
     build: Callable[[], rio.Component]
     _: KW_ONLY
-    name: str | None = None
-    icon: str | None = None
+    icon: str = "rio/logo:color"
     show_in_navigation = True
     children: list[Page] = field(default_factory=list)
     guard: (

rio/snippets/snippet-files/other-examples/simple_counter_app.py

@@ -58,7 +58,7 @@ class Counter(rio.Component):
 # <app>
 app = rio.App(
     pages=[
-        rio.Page("", Counter),
+        rio.Page("Home", "", Counter),
     ],
 )
 # </app>