Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

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

Aperta Adatta ai principianti
  • Qualcosa non va?
#7,992 2 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 2 giorni

@Ayush-1812 ci sta già lavorando.

Dal 27/8/2026.

  • #8003 di @Ayush-1812 — aperta

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
86/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
javascript
Ambito
frontend

Direzione di ricerca

Inizia da src/components/SistentNavigation/intra-page.js:62 e confrontalo con src/components/handbook-navigation/intra-page.js:42, quindi esamina l’elenco dei contenuti e la chiamata in src/sections/Projects/Sistent/getting-started/about/index.js. Conferma che l’approccio scelto preservi anche la chiamata senza props in SistentLayout e che la navigazione della pagina About elenchi le relative sezioni con ancora e vi conduca.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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
Lingua principale
JavaScript
Stelle
1.1k
Fork
1.7k
Merge medio
4g 23h
PR unite (30g)
27

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di layer5io/layer5

Tutte le issue di layer5io/layer5

Issue simili

Altre issue su JavaScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.