Skip to content

Show ToC when there is at least 1 heading - #13743

Merged
simonbyford merged 1 commit into
mainfrom
show-toc-when-there-is-at-least-1-heading
Apr 8, 2025
Merged

simonbyford merged 1 commit into
mainfrom
show-toc-when-there-is-at-least-1-heading

Conversation

@simonbyford

@simonbyford simonbyford commented Apr 8, 2025

Copy link
Copy Markdown
Contributor

What does this change?

Reduces the minimum number of headings required to trigger a table of contents from 3 to 1.

Why?

We got this request from Rich:

We've noticed that the ToC is still not showing on our Sports Weekend piece, but that it is because it's only appearing when there are 3 or more h2s on the page. I wondered if we could update this logic? So if the ToC is on, it shows up when there is at least 1 h2 on the page. As we will only have two h2s on our sports piece.

Screenshots

Composer Before After
Screenshot 2025-04-08 at 10 36 08 Screenshot 2025-04-08 at 10 35 56 Screenshot 2025-04-08 at 10 33 28

@simonbyford
simonbyford requested a review from Copilot April 8, 2025 09:29

Copilot AI 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.

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

Comments suppressed due to low confidence (1)

dotcom-rendering/src/model/enhanceTableOfContents.test.ts:63

  • Consider adding a test case that has exactly one valid h2 heading (i.e. using a SubheadingBlockElement) to verify that the ToC is correctly returned.
it('will not return a toc if there are no h2s', () => {

@github-actions

github-actions Bot commented Apr 8, 2025

Copy link
Copy Markdown

Size Change: 0 B

Total Size: 959 kB

ℹ️ View Unchanged
Filename Size
dotcom-rendering/dist/1111.client.web.********************.js 4.31 kB
dotcom-rendering/dist/1182.client.web.********************.js 3.9 kB
dotcom-rendering/dist/1259.client.web.********************.js 3.77 kB
dotcom-rendering/dist/1290.client.web.********************.js 13.2 kB
dotcom-rendering/dist/1300.client.web.********************.js 3.63 kB
dotcom-rendering/dist/1325.client.web.********************.js 2.63 kB
dotcom-rendering/dist/1443.client.web.********************.js 6.68 kB
dotcom-rendering/dist/1447.client.web.********************.js 2.87 kB
dotcom-rendering/dist/1763.client.web.********************.js 4.77 kB
dotcom-rendering/dist/1791.client.web.********************.js 4.22 kB
dotcom-rendering/dist/1928.client.web.********************.js 5.41 kB
dotcom-rendering/dist/2166.client.web.********************.js 4.5 kB
dotcom-rendering/dist/2431.client.web.********************.js 8.18 kB
dotcom-rendering/dist/2450.client.web.********************.js 2.86 kB
dotcom-rendering/dist/2602.client.web.********************.js 5.03 kB
dotcom-rendering/dist/2641.client.web.********************.js 3.65 kB
dotcom-rendering/dist/2807.client.web.********************.js 15.2 kB
dotcom-rendering/dist/2903.client.web.********************.js 2.73 kB
dotcom-rendering/dist/307.client.web.********************.js 4.76 kB
dotcom-rendering/dist/3095.client.web.********************.js 4.49 kB
dotcom-rendering/dist/3337.client.web.********************.js 4.17 kB
dotcom-rendering/dist/3380.client.web.********************.js 618 B
dotcom-rendering/dist/3488.client.web.********************.js 4.48 kB
dotcom-rendering/dist/353.client.web.********************.js 532 B
dotcom-rendering/dist/3738.client.web.********************.js 17.9 kB
dotcom-rendering/dist/3775.client.web.********************.js 525 B
dotcom-rendering/dist/3784.client.web.********************.js 2.84 kB
dotcom-rendering/dist/3836.client.web.********************.js 2.11 kB
dotcom-rendering/dist/4227.client.web.********************.js 4.8 kB
dotcom-rendering/dist/4229.client.web.********************.js 6.24 kB
dotcom-rendering/dist/4453.client.web.********************.js 3.69 kB
dotcom-rendering/dist/4501.client.web.********************.js 2.87 kB
dotcom-rendering/dist/4595.client.web.********************.js 7.88 kB
dotcom-rendering/dist/485.client.web.********************.js 156 B
dotcom-rendering/dist/4936.client.web.********************.js 4.02 kB
dotcom-rendering/dist/4972.client.web.********************.js 3.27 kB
dotcom-rendering/dist/5154.client.web.********************.js 3.08 kB
dotcom-rendering/dist/5158.client.web.********************.js 7.76 kB
dotcom-rendering/dist/5309.client.web.********************.js 3.54 kB
dotcom-rendering/dist/535.client.web.********************.js 2.67 kB
dotcom-rendering/dist/552.client.web.********************.js 3.31 kB
dotcom-rendering/dist/569.client.web.********************.js 3.85 kB
dotcom-rendering/dist/5800.client.web.********************.js 2.51 kB
dotcom-rendering/dist/5850.client.web.********************.js 22.7 kB
dotcom-rendering/dist/6081.client.web.********************.js 4.6 kB
dotcom-rendering/dist/6137.client.web.********************.js 3.1 kB
dotcom-rendering/dist/6688.client.web.********************.js 44.8 kB
dotcom-rendering/dist/6882.client.web.********************.js 4.29 kB
dotcom-rendering/dist/7009.client.web.********************.js 3.3 kB
dotcom-rendering/dist/7116.client.web.********************.js 23 kB
dotcom-rendering/dist/7256.client.web.********************.js 3.17 kB
dotcom-rendering/dist/7443.client.web.********************.js 3.38 kB
dotcom-rendering/dist/7784.client.web.********************.js 4.33 kB
dotcom-rendering/dist/7809.client.web.********************.js 2.62 kB
dotcom-rendering/dist/8261.client.web.********************.js 3.31 kB
dotcom-rendering/dist/8410.client.web.********************.js 3.04 kB
dotcom-rendering/dist/8468.client.web.********************.js 4.45 kB
dotcom-rendering/dist/8482.client.web.********************.js 440 B
dotcom-rendering/dist/8891.client.web.********************.js 3.64 kB
dotcom-rendering/dist/9.client.web.********************.js 20.4 kB
dotcom-rendering/dist/9275.client.web.********************.js 3.07 kB
dotcom-rendering/dist/932.client.web.********************.js 3.55 kB
dotcom-rendering/dist/9338.client.web.********************.js 3.39 kB
dotcom-rendering/dist/9471.client.web.********************.js 3.53 kB
dotcom-rendering/dist/9577.client.web.********************.js 3.76 kB
dotcom-rendering/dist/9628.client.web.********************.js 3.63 kB
dotcom-rendering/dist/992.client.web.********************.js 2.89 kB
dotcom-rendering/dist/9923.client.web.********************.js 4.15 kB
dotcom-rendering/dist/9935.client.web.********************.js 11.5 kB
dotcom-rendering/dist/9939.client.web.********************.js 16.5 kB
dotcom-rendering/dist/Accessibility-importable.client.web.********************.js 8.41 kB
dotcom-rendering/dist/AdBlockAsk-importable.client.web.********************.js 3 kB
dotcom-rendering/dist/AdPortals-importable.client.web.********************.js 4.76 kB
dotcom-rendering/dist/AlreadyVisited-importable.client.web.********************.js 426 B
dotcom-rendering/dist/AppsEpic-importable.client.web.********************.js 3.62 kB
dotcom-rendering/dist/AppsFooter-importable.client.web.********************.js 2.7 kB
dotcom-rendering/dist/AppsLightboxImage-importable.client.web.********************.js 2.66 kB
dotcom-rendering/dist/AppsLightboxImageStore-importable.client.web.********************.js 2.59 kB
dotcom-rendering/dist/AudioAtomWrapper-importable.client.web.********************.js 2.76 kB
dotcom-rendering/dist/AudioPlayerWrapper-importable.client.web.********************.js 6.61 kB
dotcom-rendering/dist/AustralianTerritorySwitcher-importable.client.web.********************.js 4.6 kB
dotcom-rendering/dist/Branding-importable.client.web.********************.js 2.88 kB
dotcom-rendering/dist/braze-web-sdk-core.client.web.********************.js 66.8 kB
dotcom-rendering/dist/BrazeMessaging-importable.client.web.********************.js 1.67 kB
dotcom-rendering/dist/CalloutBlockComponent-importable.client.web.********************.js 6.74 kB
dotcom-rendering/dist/CalloutEmbedBlockComponent-importable.client.web.********************.js 5.77 kB
dotcom-rendering/dist/CardCommentCount-importable.client.web.********************.js 2.67 kB
dotcom-rendering/dist/Carousel-importable.client.web.********************.js 6.67 kB
dotcom-rendering/dist/CarouselForNewsletters-importable.client.web.********************.js 4.55 kB
dotcom-rendering/dist/ChartAtom-importable.client.web.********************.js 540 B
dotcom-rendering/dist/CommentCount-importable.client.web.********************.js 2.29 kB
dotcom-rendering/dist/CrosswordComponent-importable.client.web.********************.js 2.73 kB
dotcom-rendering/dist/DiscussionApps-importable.client.web.********************.js 1.07 kB
dotcom-rendering/dist/DiscussionMeta-importable.client.web.********************.js 2.4 kB
dotcom-rendering/dist/DiscussionWeb-importable.client.web.********************.js 3.45 kB
dotcom-rendering/dist/DocumentBlockComponent-importable.client.web.********************.js 2.82 kB
dotcom-rendering/dist/Dropdown-importable.client.web.********************.js 955 B
dotcom-rendering/dist/EditionSwitcherBanner-importable.client.web.********************.js 4.43 kB
dotcom-rendering/dist/EmbedBlockComponent-importable.client.web.********************.js 3.94 kB
dotcom-rendering/dist/EnhancePinnedPost-importable.client.web.********************.js 2.01 kB
dotcom-rendering/dist/FetchOnwardsData-importable.client.web.********************.js 1.95 kB
dotcom-rendering/dist/FilterKeyEventsToggle-importable.client.web.********************.js 3.72 kB
dotcom-rendering/dist/FocusStyles-importable.client.web.********************.js 620 B
dotcom-rendering/dist/FollowWrapper-importable.client.web.********************.js 2.52 kB
dotcom-rendering/dist/FootballMatchesPageWrapper-importable.client.web.********************.js 7.05 kB
dotcom-rendering/dist/FootballTablesCompetitionSelect-importable.client.web.********************.js 3.25 kB
dotcom-rendering/dist/FooterLabel-importable.client.web.********************.js 346 B
dotcom-rendering/dist/FooterReaderRevenueLinks-importable.client.web.********************.js 3.43 kB
dotcom-rendering/dist/frameworks.client.web.********************.js 20.8 kB
dotcom-rendering/dist/FrontSubNav-importable.client.web.********************.js 7.47 kB
dotcom-rendering/dist/GetCricketScoreboard-importable.client.web.********************.js 6.28 kB
dotcom-rendering/dist/GetMatchNav-importable.client.web.********************.js 11.4 kB
dotcom-rendering/dist/GetMatchStats-importable.client.web.********************.js 8.07 kB
dotcom-rendering/dist/GetMatchTabs-importable.client.web.********************.js 2.58 kB
dotcom-rendering/dist/guardian-braze-components-banner.client.web.********************.js 15.8 kB
dotcom-rendering/dist/guardian-braze-components-end-of-article.client.web.********************.js 10.2 kB
dotcom-rendering/dist/GuideAtomWrapper-importable.client.web.********************.js 782 B
dotcom-rendering/dist/index.client.web.********************.js 46.3 kB
dotcom-rendering/dist/InstagramBlockComponent-importable.client.web.********************.js 2.9 kB
dotcom-rendering/dist/InteractiveAtomMessenger-importable.client.web.********************.js 852 B
dotcom-rendering/dist/InteractiveBlockComponent-importable.client.web.********************.js 8.77 kB
dotcom-rendering/dist/InteractiveContentsBlockComponent-importable.client.web.********************.js 3.77 kB
dotcom-rendering/dist/KeyEventsCarousel-importable.client.web.********************.js 5.71 kB
dotcom-rendering/dist/KnowledgeQuizAtom-importable.client.web.********************.js 3.2 kB
dotcom-rendering/dist/LatestLinks-importable.client.web.********************.js 6.41 kB
dotcom-rendering/dist/LightboxHash-importable.client.web.********************.js 437 B
dotcom-rendering/dist/LightboxLayout-importable.client.web.********************.js 6.54 kB
dotcom-rendering/dist/LiveBlogEpic-importable.client.web.********************.js 3.6 kB
dotcom-rendering/dist/LiveblogGutterAskWrapper-importable.client.web.********************.js 2.51 kB
dotcom-rendering/dist/LiveblogNotifications-importable.client.web.********************.js 4.82 kB
dotcom-rendering/dist/Liveness-importable.client.web.********************.js 4.72 kB
dotcom-rendering/dist/ManyNewsletterSignUp-importable.client.web.********************.js 7.69 kB
dotcom-rendering/dist/MapEmbedBlockComponent-importable.client.web.********************.js 6.04 kB
dotcom-rendering/dist/Metrics-importable.client.web.********************.js 2.69 kB
dotcom-rendering/dist/MostViewedFooter-importable.client.web.********************.js 4.01 kB
dotcom-rendering/dist/MostViewedFooterData-importable.client.web.********************.js 6.11 kB
dotcom-rendering/dist/MostViewedRightWithAd-importable.client.web.********************.js 5.26 kB
dotcom-rendering/dist/OnwardsUpper-importable.client.web.********************.js 5.38 kB
dotcom-rendering/dist/PersonalityQuizAtom-importable.client.web.********************.js 3.36 kB
dotcom-rendering/dist/ProfileAtom-importable.client.web.********************.js 543 B
dotcom-rendering/dist/ProfileAtomWrapper-importable.client.web.********************.js 802 B
dotcom-rendering/dist/PulsingDot-importable.client.web.********************.js 751 B
dotcom-rendering/dist/QandaAtom-importable.client.web.********************.js 541 B
dotcom-rendering/dist/ReaderRevenueDev-importable.client.web.********************.js 468 B
dotcom-rendering/dist/readerRevenueDevUtils.client.web.********************.js 1.69 kB
dotcom-rendering/dist/RelativeTime-importable.client.web.********************.js 2.55 kB
dotcom-rendering/dist/RichLinkComponent-importable.client.web.********************.js 6.11 kB
dotcom-rendering/dist/ScrollableFeature-importable.client.web.********************.js 6.4 kB
dotcom-rendering/dist/ScrollableHighlights-importable.client.web.********************.js 5.82 kB
dotcom-rendering/dist/ScrollableMedium-importable.client.web.********************.js 2.1 kB
dotcom-rendering/dist/ScrollableSmall-importable.client.web.********************.js 2.07 kB
dotcom-rendering/dist/SecureSignup-importable.client.web.********************.js 4.23 kB
dotcom-rendering/dist/SendTargetingParams-importable.client.web.********************.js 2.22 kB
dotcom-rendering/dist/sentry.client.web.********************.js 804 B
dotcom-rendering/dist/SetABTests-importable.client.web.********************.js 3.93 kB
dotcom-rendering/dist/SetAdTargeting-importable.client.web.********************.js 485 B
dotcom-rendering/dist/ShareButton-importable.client.web.********************.js 2.17 kB
dotcom-rendering/dist/shimport.client.web.********************.js 2.8 kB
dotcom-rendering/dist/ShowHideContainers-importable.client.web.********************.js 895 B
dotcom-rendering/dist/ShowMore-importable.client.web.********************.js 918 B
dotcom-rendering/dist/SignInGateMain.client.web.********************.js 4.38 kB
dotcom-rendering/dist/SignInGateMainCheckoutComplete.client.web.********************.js 5.48 kB
dotcom-rendering/dist/SignInGateSelector-importable.client.web.********************.js 8.58 kB
dotcom-rendering/dist/SlideshowCarousel-importable.client.web.********************.js 4.51 kB
dotcom-rendering/dist/SlotBodyEnd-importable.client.web.********************.js 4.78 kB
dotcom-rendering/dist/SpotifyBlockComponent-importable.client.web.********************.js 5.78 kB
dotcom-rendering/dist/StickyBottomBanner-importable.client.web.********************.js 6.07 kB
dotcom-rendering/dist/SubNav-importable.client.web.********************.js 2.44 kB
dotcom-rendering/dist/TableOfContents-importable.client.web.********************.js 3.5 kB
dotcom-rendering/dist/TimelineAtom-importable.client.web.********************.js 1.23 kB
dotcom-rendering/dist/Titlepiece-importable.client.web.********************.js 14.8 kB
dotcom-rendering/dist/TopBar-importable.client.web.********************.js 8.09 kB
dotcom-rendering/dist/TopBarSupport-importable.client.web.********************.js 2.51 kB
dotcom-rendering/dist/TweetBlockComponent-importable.client.web.********************.js 1.13 kB
dotcom-rendering/dist/UnsafeEmbedBlockComponent-importable.client.web.********************.js 2.91 kB
dotcom-rendering/dist/VideoFacebookBlockComponent-importable.client.web.********************.js 6.05 kB
dotcom-rendering/dist/VineBlockComponent-importable.client.web.********************.js 3.3 kB
dotcom-rendering/dist/YoutubeBlockComponent-importable.client.web.********************.js 842 B

compressed-size-action

@simonbyford simonbyford added the run_chromatic Runs chromatic when label is applied label Apr 8, 2025
@simonbyford
simonbyford marked this pull request as ready for review April 8, 2025 09:39
@github-actions github-actions Bot removed the run_chromatic Runs chromatic when label is applied label Apr 8, 2025

@DanielCliftonGuardian DanielCliftonGuardian 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.

Looks good. Why one H2 and not two ? Seems redundant to show a toc for one item.

@simonbyford

Copy link
Copy Markdown
Contributor Author

Looks good. Why one H2 and not two ? Seems redundant to show a toc for one item.

Thanks for the review Daniel, I agree a one-item ToC doesn't really make sense but I don't see any harm leaving this up to the user. I'll leave it in as it's what Rich asked for 👍

@simonbyford
simonbyford merged commit 0c700fd into main Apr 8, 2025
@simonbyford
simonbyford deleted the show-toc-when-there-is-at-least-1-heading branch April 8, 2025 10:51
@prout-bot

Copy link
Copy Markdown

Seen on PROD (merged by @simonbyford 10 minutes and 3 seconds ago) Please check your changes!

@groakland groakland added this to the Visuals milestone Apr 10, 2025
@groakland groakland added the fix label Oct 4, 2025
@groakland groakland added maintenance Departmental tracking: maintenance work, not a fix or a feature and removed fix Departmental tracking: fix labels Sep 2, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

dotcom-rendering maintenance Departmental tracking: maintenance work, not a fix or a feature Seen-on-PROD

Projects

None yet

Development

Successfully merging this pull request may close these issues.

7 participants