Add @ui.page('/') to fix output_selected_row (#4572)

fixes #4570 

TL-DR: Wrap everything in `@ui.page`, so that we do not run_javascript
on auto-index page, leading to "Cannot await JavaScript responses on the
auto-index page"

---

We need to think systematically about how we can make this occur less
often, potentially with a screening mechanism to show a warning when the
documentation attempts to await JavaScript response anywhere (even in a
method which internally calls it) without using the `# @ui.page('/')`
and `page() # HIDE`

Moreover, perhaps the functionalities of doc.demo can be better
documented itself. This also took me quite some time to figure out the
syntax, which parses the source code of the demo code 🤯

website/documentation/content/aggrid_documentation.py

@@ -42,36 +42,39 @@ def main_demo() -> None:
     See the [AG Grid documentation](https://www.ag-grid.com/javascript-data-grid/row-selection/#example-single-row-selection) for more information.
 ''')
 def aggrid_with_selectable_rows():
-    grid = ui.aggrid({
-        'columnDefs': [
-            {'headerName': 'Name', 'field': 'name', 'checkboxSelection': True},
-            {'headerName': 'Age', 'field': 'age'},
-        ],
-        'rowData': [
-            {'name': 'Alice', 'age': 18},
-            {'name': 'Bob', 'age': 21},
-            {'name': 'Carol', 'age': 42},
-        ],
-        'rowSelection': 'multiple',
-    }).classes('max-h-40')
-
-    async def output_selected_rows():
-        rows = await grid.get_selected_rows()
-        if rows:
-            for row in rows:
+    # @ui.page('/')
+    def page():
+        grid = ui.aggrid({
+            'columnDefs': [
+                {'headerName': 'Name', 'field': 'name', 'checkboxSelection': True},
+                {'headerName': 'Age', 'field': 'age'},
+            ],
+            'rowData': [
+                {'name': 'Alice', 'age': 18},
+                {'name': 'Bob', 'age': 21},
+                {'name': 'Carol', 'age': 42},
+            ],
+            'rowSelection': 'multiple',
+        }).classes('max-h-40')
+
+        async def output_selected_rows():
+            rows = await grid.get_selected_rows()
+            if rows:
+                for row in rows:
+                    ui.notify(f"{row['name']}, {row['age']}")
+            else:
+                ui.notify('No rows selected.')
+
+        async def output_selected_row():
+            row = await grid.get_selected_row()
+            if row:
                 ui.notify(f"{row['name']}, {row['age']}")
-        else:
-            ui.notify('No rows selected.')
-
-    async def output_selected_row():
-        row = await grid.get_selected_row()
-        if row:
-            ui.notify(f"{row['name']}, {row['age']}")
-        else:
-            ui.notify('No row selected!')
-
-    ui.button('Output selected rows', on_click=output_selected_rows)
-    ui.button('Output selected row', on_click=output_selected_row)
+            else:
+                ui.notify('No row selected!')
+
+        ui.button('Output selected rows', on_click=output_selected_rows)
+        ui.button('Output selected row', on_click=output_selected_row)
+    page()  # HIDE
 
 
 @doc.demo('Filter Rows using Mini Filters', '''