Add table of contents and back-to-top button to blog posts - #13870
Add table of contents and back-to-top button to blog posts#13870manuelzzz wants to merge 4 commits into
Conversation
There was a problem hiding this comment.
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.
|
/gcbrun |
|
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 |
…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>
69b3ebd to
61e7ec5
Compare
|
/gcbrun |
|
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?
|
|
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 |
I'm already working on this, in a few minutes i will open these two PR's |
|
I will close this PR and open the second PR as recommended. The first one is #13881 and is already opened. |
Adds a table of contents and a back-to-top button to long-form blog posts, to make navigating them easier.
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 onjaspr_content's existingTableOfContentsExtensionrather 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.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 existingin-contentscroll-spy signal, so no new scroll-tracking JS was needed.flutter.dev(for example, TOC links, or#some-headingURLs) were landing behind the fixed header instead of scrolling clear of it. The existingscroll-margin-toprule in_content.scssreferenced--site-header-height/--site-subheader-height, which are defined fordocs.flutter.devbut were never defined for this site, silently making the rule a no-op. Defines them, aliased to the existing--ui-header-heightvariable.Both features are implemented in the shared
site_sharedcomponents (notsites/wwworsites/docsdirectly) and only wired into the blog layout for now, so they're reusable for other long-form content later.Closes #13737