Add chapter navigation and table of contents

[DivyaShreeS09]

Summary

Implemented chapter navigation and content discovery improvements for NCERT chapter pages.

Fixes #90

Features Added

• Chapter Table of Contents (TOC)
• Breadcrumb navigation
• Previous/Next chapter navigation
• Anchor-based heading navigation in markdown content

---

Changes

New Components

• src/components/ChapterTOC.tsx

  • Extracts chapter headings from markdown.
  • Generates quick navigation links.

• src/components/ChapterBreadcrumb.tsx

  • Displays Class → Subject → Chapter hierarchy.

• src/components/ChapterNavigation.tsx

  • Provides Previous and Next chapter navigation.

Updated Files

src/app/ncert/[class]/[subject]/[chapter]/page.tsx

• Added chapter navigation state.
• Fetches chapter list for the current subject.
• Determines current chapter position.
• Passes previous and next chapter data to the content page.

src/components/ChapterContent.tsx

• Integrated:
  • Breadcrumb navigation
  • Table of Contents
  • Chapter navigation
• Added placeholders for future:
  • Quiz feature
  • Related Topics section

src/components/MarkdownRenderer.tsx

• Added heading ID generation.
• Added anchor support for markdown headings.
• Enabled TOC links to navigate directly to sections.

---

Testing

Verified successfully with:

npx tsc --noEmit

pnpm lint src/components/ChapterContent.tsx
pnpm lint src/components/MarkdownRenderer.tsx
pnpm lint src/app/ncert/[class]/[subject]/[chapter]/page.tsx

---

Issues Encountered

TypeScript Issues

• JSX structure errors
• Component reference errors
• any type lint violations

Resolved by:

• Fixing JSX structure
• Creating explicit navigation types
• Replacing any with typed interfaces

Formatting & Linting

• Prettier formatting violations
• ESLint failures

Resolved by:

• Running Prettier
• Updating types and formatting until lint passed

---

Files Added

src/components/ChapterBreadcrumb.tsx
src/components/ChapterNavigation.tsx
src/components/ChapterTOC.tsx

Files Modified

src/app/ncert/[class]/[subject]/[chapter]/page.tsx
src/components/ChapterContent.tsx
src/components/MarkdownRenderer.tsx

[vercel]

@DivyaShreeS09 is attempting to deploy a commit to the Adarsh's projects Team on Vercel.

A member of the Team first needs to authorize it.

[MRIARC-08]

@DivyaShreeS09 ci build fails here too

[DivyaShreeS09]

@MRIARC-08 ,

The CI build appears to be failing in authentication-related files such as "src/app/(auth)/login/page.tsx" and "src/app/(auth)/layout.tsx".

The lint check passes successfully for this PR, and these files are not part of my changes for Issue #90 (chapter navigation and table of contents).

Could you please confirm whether this failure is related to a recent change in the base branch or if any additional action is required from my side?

Thank you.

[MRIARC-08]

Thanks for the chapter navigation work. This needs a rebase before it can merge. Current main now renders chapter markdown through MarkdownViewer, but this PR changes ChapterContent back to MarkdownRenderer and adds heading IDs there. That would undo the newer renderer path merged earlier.

There is also a hook-order issue in ChapterTOC: it returns early on !content before calling useEffect, so the hook order can change between renders. Please rebase on latest main, integrate the TOC with MarkdownViewer, and move hooks before conditional returns.

[DivyaShreeS09]

@MRIARC-08 Kindly review my PR updates

[MRIARC-08]

@DivyaShreeS09 The latest branch still has an early return in the chapter page, leaving the new ChapterContent call with previous/next data unreachable, so the navigation feature is not actually rendered. It also continues to modify the legacy MarkdownRenderer path rather than the current reader path. Please remove the unreachable duplicate return and integrate the TOC/heading ids with the renderer used by the live chapter page.

[MRIARC-08]

@DivyaShreeS09 I retested the exact merge result against current main. It currently fails the production build: ChapterContent has malformed JSX near the Print button around line 144. The chapter page also still returns before the new previous/next ChapterContent render, so that navigation remains unreachable, and the TOC heading ids are still implemented in the unused MarkdownRenderer while the live page renders MarkdownViewer. Please fix those three points and rerun build/lint.

[DivyaShreeS09]

@MRIARC-08
Pulled the latest branch changes, resolved conflicts, and reran production build successfully. Could you please re-review the PR?

[MRIARC-08]

@DivyaShreeS09 This branch now conflicts with current main. After rebasing, please make the table of contents use the same duplicate-safe heading IDs as the active MarkdownViewer; changing the unused MarkdownRenderer does not fix the live chapter page. Also preserve the recently merged resume-reading progress behavior in ChapterContent.

[DivyaShreeS09]

@MRIARC-08 Kindly review my PR updates

[MRIARC-08]

@DivyaShreeS09 The remaining navigation issues are in the live path. The TOC IDs are still duplicate-prone, and the duplicate-ID handling was added to MarkdownRenderer while the chapter page uses MarkdownViewer. The observer also will not refresh when content changes, and first/last chapter state can remain stale. Please use one duplicate-safe slugger for the TOC and active viewer, rerun observer setup when content changes, reset navigation state on route changes, and remove the placeholder Start Quiz/related-topic actions.

[DivyaShreeS09]

@MRIARC-08 Addressed the review comments:

• Replaced duplicate-prone heading ID generation with a shared "github-slugger" implementation.
• Updated both "ChapterTOC" and "MarkdownViewer" to use the same duplicate-safe slug generation logic so TOC links and rendered heading IDs stay in sync.
• Updated the TOC observer effect to reinitialize when chapter content changes.
• Reset previous/next chapter navigation state before recalculating chapter navigation to avoid stale first/last chapter links.
• Removed the placeholder "Start Quiz" and "Related Topics" actions.
• Verified with a successful production build ("pnpm build").

[MRIARC-08]

@DivyaShreeS09 The shared duplicate-safe slugger, active viewer integration, observer refresh, navigation reset, and placeholder removal are now addressed. The merge result still regresses the audited lockfile by removing the security overrides and downgrading several packages; regenerate pnpm-lock.yaml from current main with only github-slugger added. Please also restore the existing “content not yet available” fallback and run the formatter: focused lint currently reports 46 errors.

[DivyaShreeS09]

@MRIARC-08 I've addressed the requested changes, merged the latest main branch, resolved the MarkdownRenderer conflict, removed the lint issues, regenerated the lockfile with github-slugger, and verified the project builds successfully.

[MRIARC-08]

@DivyaShreeS09 I rechecked this after the latest merges. The PR now has a merge conflict in src/components/MarkdownViewer.tsx against current main, likely because #199 changed the same renderer area. Please rebase or merge current main, keep the duplicate-safe slug/navigation work, and make sure the final diff still only adds the chapter navigation/TOC pieces plus the required slugger dependency. After that, rerun the formatter/build checks and I can review it again.

[DivyaShreeS09]

Hi @MRIARC-08,
I merged the latest "main", resolved the "MarkdownViewer.tsx" conflict, kept the duplicate-safe slugger/navigation changes, and reran formatting checks. The conflict is now resolved.
While testing locally, I noticed the build is still failing with:
"Cannot find module '../../../src/app/page.js'"
I also checked the current "upstream/main" tree and did not find a "src/app/page.tsx" file, so I'm not sure whether this build issue is related to my changes or to a recent change in main.
Could you please take a look and let me know if there is a specific issue in this PR that I should address further?

[MRIARC-08]

@DivyaShreeS09 I rechecked this against the current main. The earlier src/app/page.js/src/app/page.tsx build issue should be resolved now because main has been restored to include src/app/page.tsx again, and your branch merges cleanly locally.

The remaining blockers are still in the PR itself:

• pnpm-lock.yaml removes the security overrides block from current main while adding github-slugger. Please regenerate/update the lockfile from current main without dropping those overrides.

• Focused lint still reports 18 Prettier errors in the touched chapter/TOC files.

• The existing @next/next/no-img-element warning in MarkdownViewer is unrelated and not a blocker.Please restore the lockfile overrides and run the formatter on the touched files.

[DivyaShreeS09]

Addressed the review feedback:

• Restored the lockfile to match current main and kept only the required github-slugger addition.
• Restored the exact fallback copy ("Content not yet available").
• Cleaned unrelated changes from the PR scope.
• Kept chapter navigation, breadcrumbs, TOC, and duplicate-safe heading slug generation aligned with the requested functionality.

[MRIARC-08]

@DivyaShreeS09 This is much closer: the lockfile no longer removes the security overrides, and focused ESLint has no errors.

Local checks:

• Focused ESLint on the touched chapter/markdown files passes with only the existing Markdown image warning.
• pnpm test passes: 8 files / 35 tests.
• pnpm exec tsc --noEmit currently fails in my existing install because github-slugger is newly added and not installed in local node_modules; please make sure a fresh pnpm install --frozen-lockfile plus typecheck passes.

Remaining functional blocker: the chapter page still fetches the current chapter with only:
/api/ncert/chapter?chapter=${params.chapter}

Current main requires the parent class and subject context for this endpoint. Please add class/subject or classId/subjectId to that request, and also guard chaptersRes.message.chapters before reading it so a failed chapters response does not crash the page.

Since this is a visible chapter navigation/TOC UI change, it will still need manual UI review before merge.

[MRIARC-08]

@DivyaShreeS09 I rechecked the latest commit. It now merges cleanly, focused ESLint is clean apart from the existing Next <img> warning in MarkdownViewer.tsx, and the production build passes. Since this is a visible chapter navigation/UI change, I am holding it for maintainer manual UI review before merge.