layer5io / layer5io/layer5

[Sistent] In-page navigation is empty on Getting Started > About; `IntraPage` ignores the `contents` prop it is passed

Open Beginner friendly
#7,992 2 comments 0 reactions 0 assignees View on GitHub

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:

  1. Accept a contents prop and fall back to the DOM scan when it is absent — this preserves both call sites, including SistentLayout's prop-less <IntraPage />; or
  2. 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 contents array 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.