[Sistent] In-page navigation is empty on Getting Started > About; `IntraPage` ignores the `contents` prop it is passed
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 1.1k
- Forks
- 1.6k
- Avg merge
- 2d 10h
- Merged PRs (30d)
- 18
Description
Description
https://layer5.io/projects/sistent/getting-started/about renders its right-hand "on this page" navigation as an empty list, even though the page has three anchored sections.
The cause is a mismatch between IntraPage and its caller.
src/components/SistentNavigation/intra-page.js:62 declares the component with no props and derives its list from the DOM instead:
function IntraPage() {
const [contents, setContents] = useState([]);
useEffect(() => {
const anchors = document.querySelectorAll(".main-content > a");
...
}, []);
But src/sections/Projects/Sistent/getting-started/about/index.js builds an explicit list and passes it in:
// line 13
const contents = [{ id: 0, link: "#About Sistent", text: "About Sistent" }];
// line 277
<IntraPage contents={contents} />
The prop is silently discarded. The DOM query is then the only source of entries, and it looks for anchors that are direct children of .main-content — a wrapper that exists only in src/templates/sistent-component.js:71, i.e. only on the MDX-driven component documentation pages. The About page has no .main-content element, so the query matches nothing and the list renders empty.
The About page does have anchors that a working implementation would pick up, at lines 40 (<a id="About Sistent">), 89 (<a id="Installation">), and 113 (<a id="Using local Sistent">) — note that the hand-written contents array only lists the first of the three, so the two sources disagree about what the nav should contain.
For contrast, src/components/handbook-navigation/intra-page.js:42 implements the same UI as function IntraPage({ contents }), correctly consuming the prop.
Expected Behavior
The About page's in-page navigation lists its sections and lets the reader jump to them, consistent with the component documentation pages.
Either approach works, as long as the component and its caller agree:
- Accept a
contentsprop and fall back to the DOM scan when it is absent — this preserves both call sites, includingSistentLayout's prop-less<IntraPage />; or - Keep the DOM scan as the single source of truth, widen the selector so it matches the anchors on non-template pages, and delete the now-dead
contentsarray from the About page.
Option 1 matches the existing handbook implementation and is the smaller change.
Two related issues were closed previously without covering this case: #5516 (positioning of the section navigator) and #5154 (removing an unused intra-page link).
Screenshots
N/A — visible as an empty column on the right of https://layer5.io/projects/sistent/getting-started/about at viewport widths above 1280px.
Environment:
- Host OS: any
- Browser: any
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with src/components/SistentNavigation/intra-page.js:62 and compare it with src/components/handbook-navigation/intra-page.js:42, then inspect the contents list and call in src/sections/Projects/Sistent/getting-started/about/index.js. Confirm the chosen approach also preserves the prop-less call in SistentLayout and that the About page navigation lists its anchored sections and jumps to them.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 86/100