Skip to content

Add auto-generated table of contents to blog posts - #13881

Open
manuelzzz wants to merge 2 commits into
flutter:mainfrom
manuelzzz:blog-toc
Open

Add auto-generated table of contents to blog posts#13881
manuelzzz wants to merge 2 commits into
flutter:mainfrom
manuelzzz:blog-toc

Conversation

@manuelzzz

Copy link
Copy Markdown

Adds a table of contents to long-form blog posts, to make navigating them easier.

  • Table of contents: adds BlogTableOfContents (packages/site_shared/lib/components/blog/blog_toc.dart), which renders an automatically generated, collapsible "On this page" nav from the post's rendered headings. It's built on jaspr_content's existing TableOfContentsExtension rather than a custom implementation, so it correctly builds anchor links relative to the current page path. Posts with fewer than 2 top-level headings don't show a TOC.
  • Fix: heading anchors on flutter.dev (for example, TOC links, or #some-heading URLs) were landing behind the fixed header instead of scrolling clear of it. The existing scroll-margin-top rule in _content.scss referenced --site-header-height/--site-subheader-height, which are defined for docs.flutter.dev but were never defined for this site, silently making the rule a no-op. Defines them, aliased to the existing --ui-header-height variable.

Fixes #13737

Requested to split from #13870

image

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request introduces an automatically generated table of contents for blog posts. It adds a new BlogTableOfContents component, registers the TableOfContentsExtension on the server, integrates the component into the blog layout, and adds the corresponding SCSS styles. The review feedback suggests improving type safety in the new component by replacing a direct cast with an is check, and updating the SCSS selectors to ensure the material icon classes are correctly targeted for transition and rotation effects.

Comment thread packages/site_shared/lib/components/blog/blog_toc.dart Outdated
Comment thread sites/www/lib/styles/pages/_blog_page.scss
Comment thread sites/www/lib/styles/pages/_blog_page.scss
manuelzzz and others added 2 commits September 11, 2026 16:59
- Add BlogTableOfContents, built on jaspr_content's built-in
  TableOfContentsExtension, showing a collapsible "On this page" nav
  for posts with at least 2 top-level headings.
- Fix scroll-margin-top for heading anchors on www, which was silently
  a no-op because --site-header-height/--site-subheader-height were
  never defined for this site.
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
@manuelzzz

Copy link
Copy Markdown
Author

@parlough First things first, sorry for pinging you directly.

Following your recommendations from #13870, I split the PR into two: this one (#13870) and #13882.

The screenshot is available in the description, and the two PRs are independent.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Adding TOC to blog posts

1 participant