From eef1d55b2d3b60fd3d362d111ebbd911acf281d5 Mon Sep 17 00:00:00 2001
From: Ayush-1812 <ayushjangid5102@gmail.com>
Date: Thu, 27 Aug 2026 13:58:57 +0530
Subject: [PATCH] fix(sistent): honour the contents prop in IntraPage

The Sistent IntraPage component declared no props and built its list
solely by scanning the DOM for anchors under `.main-content`. That
wrapper is rendered only by the MDX component template, so on the
Getting Started > About page - which builds its own layout - the query
matched nothing and the in-page navigation rendered empty, even though
the page passed an explicit contents array that the component discarded.

IntraPage now uses the contents it is given and falls back to the DOM
scan when no list is supplied, so the prop-less usage in SistentLayout
keeps working unchanged. This matches how the handbook and legal
variants of the component already behave.

The About page's contents array listed only the first of its three
anchored sections, so it is completed with Installation and Using local
Sistent.

Fixes #7992

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Signed-off-by: Ayush-1812 <ayushjangid5102@gmail.com>
---
 src/components/SistentNavigation/intra-page.js | 18 ++++++++++++++----
 .../Sistent/getting-started/about/index.js     |  6 +++++-
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/components/SistentNavigation/intra-page.js b/src/components/SistentNavigation/intra-page.js
index 6c74497a95bbb0..dd098b2b7e9cae 100644
--- a/src/components/SistentNavigation/intra-page.js
+++ b/src/components/SistentNavigation/intra-page.js
@@ -60,14 +60,22 @@ const JoinCommunityWrapper = styled.div`
   }
 `;
 
-function IntraPage() {
-  const [contents, setContents] = useState([]);
+function IntraPage({ contents: providedContents }) {
+  const [scannedContents, setScannedContents] = useState([]);
+
+  // Pages that build their own layout pass an explicit list of sections.
+  // Pages rendered through the MDX template instead expose their sections
+  // as anchors inside `.main-content`, which are discovered here.
+  const hasProvidedContents = Boolean(providedContents && providedContents.length);
 
   useEffect(() => {
+    if (hasProvidedContents) {
+      return;
+    }
     const anchors = document.querySelectorAll(".main-content > a");
     console.log(anchors);
     if (anchors) {
-      setContents(
+      setScannedContents(
         Array.from(anchors).map((a) => ({
           id: a.id,
           link: `#${a.id}`,
@@ -75,7 +83,9 @@ function IntraPage() {
         }))
       );
     }
-  }, []);
+  }, [hasProvidedContents]);
+
+  const contents = hasProvidedContents ? providedContents : scannedContents;
 
   const [intapath, setIntapath] = useState(null);
   useEffect(() => {
diff --git a/src/sections/Projects/Sistent/getting-started/about/index.js b/src/sections/Projects/Sistent/getting-started/about/index.js
index 7acf547dc94cc6..dd2c224f07022a 100644
--- a/src/sections/Projects/Sistent/getting-started/about/index.js
+++ b/src/sections/Projects/Sistent/getting-started/about/index.js
@@ -10,7 +10,11 @@ import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
 import CodeBlock from "../../../../../components/CodeBlock";
 import { SistentThemeProvider, Button } from "@sistent/sistent";
 
-const contents = [{ id: 0, link: "#About Sistent", text: "About Sistent" }];
+const contents = [
+  { id: 0, link: "#About Sistent", text: "About Sistent" },
+  { id: 1, link: "#Installation", text: "Installation" },
+  { id: 2, link: "#Using local Sistent", text: "Using local Sistent" },
+];
 
 const codes = [
   "npm i @sistent/sistent",