Introduce Navigation Topics

Author: djhi

docs_headless/astro.config.mjs

@@ -15,6 +15,7 @@
     "@tailwindcss/vite": "^4.1.11",
     "astro": "^5.6.1",
     "sharp": "^0.34.2",
+    "starlight-sidebar-topics": "^0.6.0",
     "tailwindcss": "^4.1.11"
   },
   "devDependencies": {

docs_headless/package.json

@@ -1,31 +1,34 @@
 ---
-import MobileMenuFooter from "@astrojs/starlight/components/MobileMenuFooter.astro";
-import SidebarPersister from "@astrojs/starlight/components/SidebarPersister.astro";
-import SidebarSublist from "@astrojs/starlight/components/SidebarSublist.astro";
+import MobileMenuFooter from '@astrojs/starlight/components/MobileMenuFooter.astro';
+import SidebarPersister from '@astrojs/starlight/components/SidebarPersister.astro';
+import SidebarSublist from '@astrojs/starlight/components/SidebarSublist.astro';
+import StarlightSidebarTopicsSidebar from 'starlight-sidebar-topics/components/Sidebar.astro';
 
 const { sidebar } = Astro.locals.starlightRoute;
 ---
 
 <script is:inline aria-hidden="true">
-  // This script scrolls the sidebar to the link matching the current page when the page loads
-  window.addEventListener("load", () => {
-    const sidebarContainer = document.getElementById("starlight__sidebar");
-    const currentItem = sidebarContainer.querySelector(
-      "a[aria-current='page']"
-    );
-    if (currentItem) {
-      sidebarContainer.scrollTo({
-        top: currentItem.offsetTop - sidebarContainer.offsetTop,
-        behavior: "smooth",
-      });
-    }
-  });
+    // This script scrolls the sidebar to the link matching the current page when the page loads
+    window.addEventListener('load', () => {
+        const sidebarContainer = document.getElementById('starlight__sidebar');
+        const currentItem = sidebarContainer.querySelector(
+            "a[aria-current='page']"
+        );
+        if (currentItem) {
+            sidebarContainer.scrollTo({
+                top: currentItem.offsetTop - sidebarContainer.offsetTop,
+                behavior: 'smooth',
+            });
+        }
+    });
 </script>
 
+<StarlightSidebarTopicsSidebar />
+
 <SidebarPersister>
-  <SidebarSublist sublist={sidebar} />
+    <SidebarSublist sublist={sidebar} />
 </SidebarPersister>
 
 <div class="md:sl-hidden">
-  <MobileMenuFooter />
+    <MobileMenuFooter />
 </div>

docs_headless/src/components/CustomSidebar.astro

@@ -8,7 +8,7 @@ React-admin relies on a several design decisions that structure its codebase.
 
 React-admin is specifically designed to build [Single-Page Applications (SPA)](https://en.wikipedia.org/wiki/Single-page_application). In a react-admin app, the browser fetches the required HTML, CSS, and JavaScript to render the application only once. Subsequently, data is fetched from APIs through AJAX calls. This is in contrast to traditional web applications, where the browser fetches a new HTML page for each screen.
 
-![SPA lifecycle](../../../assets/SPA-lifecycle.png)
+![SPA lifecycle](../../../../assets/SPA-lifecycle.png)
 
 The SPA architecture ensures that react-admin apps are [exceptionally fast](./Features.md#fast), easy to host, and compatible with existing APIs without requiring a dedicated backend. 
 
@@ -58,7 +58,7 @@ The `<Resource>` component allows react-admin to automatically link CRUD pages b
 
 React-admin does not make any assumptions about the specific structure of your API. Instead, it defines its own syntax for data fetching, authentication, internationalization, and preferences. To interact with your API, react-admin relies on adapters called **providers**.
 
-![Providers](../../../assets/providers.png)
+![Providers](../../../../assets/providers.png)
 
 For example, to fetch a list of records from the API, you would use the `dataProvider` object as follows:
 

…/src/content/docs/guides/Architecture.md …ent/docs/headless/guides/Architecture.mddocs_headless/src/content/docs/guides/Architecture.md renamed to docs_headless/src/content/docs/headless/guides/Architecture.md docs_headless/src/content/docs/guides/Architecture.md renamed to docs_headless/src/content/docs/headless/guides/Architecture.md

@@ -414,7 +414,7 @@ const App = () => (
 
 Guesser components start by fetching data from the API, analyzing the shape of the response, and then picking up Field and Input components that match the data type. They also dump the generated code in the console to let you start customizing the UI.
 
-![ListGuesser](../../../assets/tutorial_guessed_list.png)
+![ListGuesser](../../../../assets/tutorial_guessed_list.png)
 
 Check the following components to learn more about guessers:
 

…headless/src/content/docs/guides/CRUD.md …src/content/docs/headless/guides/CRUD.mddocs_headless/src/content/docs/guides/CRUD.md renamed to docs_headless/src/content/docs/headless/guides/CRUD.md docs_headless/src/content/docs/guides/CRUD.md renamed to docs_headless/src/content/docs/headless/guides/CRUD.md

@@ -9,7 +9,7 @@ You can build a react-admin app on top of any API, whether it uses REST, GraphQL
 
 In a react-admin app, you don't write API calls using `fetch` or `axios`. Instead, you communicate with your API through an object called the `dataProvider`.
 
-![Backend agnostic](../../../assets/data-provider.png)
+![Backend agnostic](../../../../assets/data-provider.png)
 
 The `dataProvider` exposes a predefined interface that allows react-admin to query any API in a normalized way.
 

…content/docs/guides/DataFetchingGuide.md …ocs/headless/guides/DataFetchingGuide.mddocs_headless/src/content/docs/guides/DataFetchingGuide.md renamed to docs_headless/src/content/docs/headless/guides/DataFetchingGuide.md docs_headless/src/content/docs/guides/DataFetchingGuide.md renamed to docs_headless/src/content/docs/headless/guides/DataFetchingGuide.md

@@ -8,7 +8,7 @@ hero:
     file: ../../assets/houston.webp
   actions:
     - text: Guides & concepts
-      link: /guides/architecture/
+      link: /mui/guides/architecture/
       icon: right-arrow
 ---