docs: cleanup the hoisting guide (#124)

gsoft-inc · Dec 4, 2023 · 4bfa48c · 4bfa48c
1 parent 58f4fc3
commit 4bfa48c
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 67 deletions.
diff --git a/docs/getting-started/create-host.md b/docs/getting-started/create-host.md
@@ -132,7 +132,7 @@ export function App() {
 
 ### Navigation items
 
-Next, create a layout component to [render the navigation items](/reference/routing/useRenderedNavigationItems.md):
+Next, create a layout component to [render the navigation items](/reference/routing/useRenderedNavigationItems.md). In many applications, multiple pages often share a **common layout** that includes elements such as a navigation bar, a user profile menu, and a main content section. In a [React Router](https://reactrouter.com/en/main) application, this shared layout is commonly referred to as a `RootLayout`:
 
 ```tsx !#38,41 host/src/RootLayout.tsx
 import { Suspense } from "react";
@@ -188,6 +188,8 @@ export function RootLayout() {
 }
 ```
 
+In the previous code sample, the `RootLayout` will serves as the default layout for the homepage as well as for every page (route) registered by a module that are not nested under a parent route with either the [parentPath](../reference/runtime/runtime-class.md#register-nested-routes-under-an-existing-route) or the [parentName](../reference/runtime/runtime-class.md#register-a-named-route) option.
+
 ### Homepage
 
 Next, create the `HomePage` component that will serve as the homepage for this application:

diff --git a/docs/getting-started/learn-the-api.md b/docs/getting-started/learn-the-api.md
@@ -1,5 +1,5 @@
 ---
-order: 60
+order: 50
 ---
 
 # Learn the API

diff --git a/docs/guides/override-the-host-layout.md b/docs/guides/override-the-host-layout.md
@@ -4,71 +4,7 @@ order: 880
 
 # Override the host layout
 
-## Define a root layout
-
-In many applications, multiple pages often share a **common layout** that includes elements such as a navigation bar, a user profile menu, and a main content section. In a [React Router](https://reactrouter.com/en/main) application, this shared layout is commonly referred to as a `RootLayout`:
-
-```tsx !#9,11,14,16 host/src/register.tsx
-import { ManagedRoutes, type ModuleRegisterFunction, type FireflyRuntime } from "@squide/firefly";
-import { HomePage } from "./HomePage.tsx";
-import { AuthenticationBoundary } from "./AuthenticationBoundary.tsx";
-import { RootLayout } from "./RootLayout.tsx";
-import { RootErrorBoundary } from "./RootErrorBoundary.tsx";
-
-export const registerHost: ModuleRegisterFunction<FireflyRuntime> = runtime => {
-    runtime.registerRoute({
-        element: <AuthenticationBoundary />,
-        children: [
-            element: <RootLayout />,
-            children: [
-                {
-                    errorElement: <RootErrorBoundary />,
-                    children: [
-                        ManagedRoutes
-                    ]
-                }
-            ]
-        ]
-    }, {
-        // We will talk about this in the next section of this guide.
-        hoist: true
-    });
-
-    runtime.registerRoute({
-        index: true,
-        element: <HomePage />
-    });
-};
-```
-
-```tsx host/src/RootLayout.tsx
-import { Suspense } from "react";
-import { Outlet } from "react-router-dom";
-import { useNavigationItems, useRenderedNavigationItems } from "@squide/firefly";
-import { UserMenu } from "./UserMenu.tsx";
-
-export function RootLayout() {
-    const navigationItems = useNavigationItems();
-
-    // To keep things simple, we are omitting the definition of "renderItem" and "renderSection".
-    // For a full example, view: https://gsoft-inc.github.io/wl-squide/reference/routing/userenderednavigationitems/.
-    const navigationElements = useRenderedNavigationItems(navigationItems, renderItem, renderSection);
-
-    return (
-        <>
-            <div>
-                <nav>{navigationElements}</nav>
-                <UserMenu />
-            </div>
-            <Suspense fallback={<div>Loading...</div>}>
-                <Outlet />
-            </Suspense>
-        </>
-    );
-}
-```
-
-In the previous code sample, the `RootLayout` serves as the default layout for the homepage as well as for every page (route) registered by a module that are not nested under a parent route with either the [parentPath](../reference/runtime/runtime-class.md#register-nested-routes-under-an-existing-route) or the [parentName](../reference/runtime/runtime-class.md#register-a-named-route) option.
+The `RootLayout` component that as been defined in the [create an host application](../getting-started/create-host.md#navigation-items) starting guide serves as the default layout for the homepage as well as for every page (route) registered by a module that are not nested under a parent route with either the [parentPath](../reference/runtime/runtime-class.md#register-nested-routes-under-an-existing-route) or the [parentName](../reference/runtime/runtime-class.md#register-a-named-route) option.
 
 For most pages, this is the behavior expected by the author. However, for pages such as a login, the default `RootLayout` isn't suitable because the page is not bound to a user session (the user is not even authenticated yet).