Skip to content

Add table of contents and back-to-top button to blog posts - #13870

Closed
manuelzzz wants to merge 4 commits into
flutter:mainfrom
manuelzzz:blog-toc-and-back-to-top
Closed

Add table of contents and back-to-top button to blog posts#13870
manuelzzz wants to merge 4 commits into
flutter:mainfrom
manuelzzz:blog-toc-and-back-to-top

Conversation

@manuelzzz

Copy link
Copy Markdown

Adds a table of contents and a back-to-top button 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.
  • Back-to-top button: adds BackToTopButton (packages/site_shared/lib/components/common/client/back_to_top_button.dart), a floating button that appears once the reader scrolls past the hero and smooth-scrolls back to the top on click. It reuses the site's existing in-content scroll-spy signal, so no new scroll-tracking JS was needed.
  • 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.

Both features are implemented in the shared site_shared components (not sites/www or sites/docs directly) and only wired into the blog layout for now, so they're reusable for other long-form content later.

Closes #13737

@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 a table of contents component (BlogTableOfContents) and a floating "back to top" button (BackToTopButton) to the blog layout, along with their respective styling and configuration. A critical syntax error was found in the table of contents component where a leading dot was incorrectly placed before the text function call.

Comment thread packages/site_shared/lib/components/blog/blog_toc.dart Outdated
@abdallahshaban557

Copy link
Copy Markdown
Contributor

/gcbrun

@flutter-website-bot

flutter-website-bot commented Sep 9, 2026

Copy link
Copy Markdown
Collaborator

Staged preview of the updated docs.flutter.dev site (updated for commit 61e7ec5):

https://flutter-docs-prod--docs-pr13870-blog-toc-and-back-to-t-c50jekze.web.app

@parlough
parlough self-requested a review September 10, 2026 20:43
manuelzzz and others added 4 commits September 10, 2026 18:12
…osts

- 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.
- Add BackToTopButton, a floating scroll-to-top button shown once the
  reader scrolls past the hero, reusing the existing in-content
  scroll-spy signal.
- 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
manuelzzz force-pushed the blog-toc-and-back-to-top branch from 69b3ebd to 61e7ec5 Compare September 10, 2026 21:13
@sfshaza2

Copy link
Copy Markdown
Contributor

/gcbrun

@parlough

Copy link
Copy Markdown
Member

Thanks for tackling these additions! I will review it as soon as I can. Hopefully today or tomorrow.

If possible, could you do two things to help the process?

  1. Split this PR into two: One with the table of contents and heading fixes and another with the back-to-top button. That way they can be reviewed and landed independently.
  2. Add a screenshot of the relevant feature to the PR descriptions.

@flutter-website-bot

Copy link
Copy Markdown
Collaborator

Staged preview of the updated flutter.dev site (updated for commit 61e7ec5):

https://flutter-dev-230821--www-pr13870-blog-toc-and-back-to-t-z03wa0gx.web.app

@manuelzzz

Copy link
Copy Markdown
Author

Thanks for tackling these additions! I will review it as soon as I can. Hopefully today or tomorrow.

If possible, could you do two things to help the process?

  1. Split this PR into two: One with the table of contents and heading fixes and another with the back-to-top button. That way they can be reviewed and landed independently.
  2. Add a screenshot of the relevant feature to the PR descriptions.

I'm already working on this, in a few minutes i will open these two PR's

@manuelzzz

Copy link
Copy Markdown
Author

I will close this PR and open the second PR as recommended.

The first one is #13881 and is already opened.

@manuelzzz manuelzzz closed this Sep 11, 2026
@manuelzzz
manuelzzz deleted the blog-toc-and-back-to-top branch September 11, 2026 20:01
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

5 participants