Show table of contents on pages with toc: true - #232
Conversation
Render the TableOfContents sidebar for content pages (achievements, history, current) and documentation pages when their frontmatter has toc: true, matching the blog article behavior.
There was a problem hiding this comment.
Pull request overview
This PR restores Table of Contents rendering for non-blog Markdown pages by introducing a shared layout component that mirrors the existing blog TOC UX, and wiring it into several top-level pages plus all documentation detail pages.
Changes:
- Added
ContentWithToccomponent andshouldShowTochelper to conditionally render a responsive TOC layout based on frontmattertoc: true. - Updated
/achievements,/history,/currentpages to use the shared TOC-capable renderer. - Updated documentation detail pages (
/documentation/[doc]) to use the shared TOC-capable renderer and widened the layout container to accommodate the sidebar.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| components/content-with-toc.tsx | New shared wrapper that renders TableOfContents + MarkdownRenderer when toc: true. |
| app/achievements/page.tsx | Switched to ContentWithToc and widened container to support a TOC sidebar. |
| app/history/page.tsx | Switched to ContentWithToc and widened container to support a TOC sidebar. |
| app/current/page.tsx | Switched to ContentWithToc and widened container to support a TOC sidebar. |
| app/documentation/[doc]/page.tsx | Switched doc detail rendering to ContentWithToc and widened container to support a TOC sidebar. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
| <div className="lg:hidden w-full"> | ||
| <TableOfContents content={content} /> | ||
| </div> | ||
| <div className="w-full lg:flex-1 lg:min-w-0"> | ||
| <MarkdownRenderer content={content} showMeta={showMeta} noCard={noCard} /> |
|
Thanks for the PR. It seems that you have activated TOC support only for the 3 sub-pages of "About Us" and the pages in the |
|
Makes sense, thank you! I'll update the PR. |
…down pages - Extend TableOfContents to extract raw HTML headings (<hN id=...>) with explicit ids, falling back to github-slugger for id-less HTML headings. Reconstructs inline-split headings inside lists/paragraphs (doc 02 pattern). - Wire ContentWithToc into all remaining markdown-driven pages (21 files). GSoC project pages already rendered TableOfContents, no change needed. Now all 8 pages with toc: true (achievements, history, current, 5 docs) show complete TOCs matching rendered heading ids; existing anchor links recover.
|
Another question: Why do you need to modify so many files? Is there no way to set a global default for the whole site? And if I add a new page, will it automatically support a ToC? Or do I need to modify an additional file |
|
Each route in app/ independently reads its markdown and chooses its renderer, there's no shared base layout for markdown pages. The 22 changes wire ContentWithToc into every existing page that renders markdown bodies. And the new pages: They won't auto-get ToC. You'll need to import ContentWithToc in the new page file (3 lines: import, destructure data, swap renderer). No global default exists today. If you'd like to avoid that boilerplate for future pages, I can add a tiny withToc wrapper helper? |
|
For the blog pages ( OK, the withToc wrapper is perhaps a good idea. @gativarshney @rudra-iitm WDYT is there an easier and cleaner way to let all markdown or HTML pages support a ToC, by just having |
Fixes #226.
Pages and documentation articles with
toc: truein their frontmatter no longerdisplay a table of contents, it only worked for blog articles.
ContentWithToccomponent (sticky right sidebar on desktop,"On This Page" box above content on mobile), matching the blog layout.
/achievements,/history,/current, and all documentationpages.
yarn buildpasses.