Mini profiles tweaks #12919

simonbyford · 2024-11-27T10:07:26Z

What does this change?

Three separate tweaks to the mini profiles format:

Render titles as h3s (with font size 24px) for mini profiles articles which include sections. Continue to render titles as h2s for mini profiles articles which don't include sections. This should help distinguish titles from section headers. More info here (see "Option 2").
Don't display the bottom separator for mini profiles articles with sections. The bottom separator, borrowed from previous list elements, was intended to separate list elements from anything below them in the document (e.g. closing remarks), but was being mistakenly inserted between sections of mini profiles articles. This was happening because mini profiles articles with sections are actually multiple mini profiles elements with text elements between them.
Don't display empty bios. The logic for hiding empty bios was broken because <p></p> was considered non-empty.

Why?

This was in response to feedback from Rich and Theresa

Screenshots

before	after

dotcom-rendering/src/components/MiniProfile.tsx

github-actions · 2024-11-27T10:12:01Z

Size Change: 0 B

Total Size: 958 kB

ℹ️ View Unchanged

Filename	Size
`dotcom-rendering/dist/1000.client.web.********************.js`	999 B
`dotcom-rendering/dist/1026.client.web.********************.js`	784 B
`dotcom-rendering/dist/1090.client.web.********************.js`	752 B
`dotcom-rendering/dist/1261.client.web.********************.js`	1.89 kB
`dotcom-rendering/dist/1391.client.web.********************.js`	725 B
`dotcom-rendering/dist/1458.client.web.********************.js`	4.87 kB
`dotcom-rendering/dist/1476.client.web.********************.js`	784 B
`dotcom-rendering/dist/1483.client.web.********************.js`	3.19 kB
`dotcom-rendering/dist/152.client.web.********************.js`	5.3 kB
`dotcom-rendering/dist/1559.client.web.********************.js`	11.3 kB
`dotcom-rendering/dist/1667.client.web.********************.js`	918 B
`dotcom-rendering/dist/169.client.web.********************.js`	8.09 kB
`dotcom-rendering/dist/1940.client.web.********************.js`	507 B
`dotcom-rendering/dist/222.client.web.********************.js`	6.15 kB
`dotcom-rendering/dist/2283.client.web.********************.js`	3.03 kB
`dotcom-rendering/dist/2310.client.web.********************.js`	880 B
`dotcom-rendering/dist/2368.client.web.********************.js`	2.67 kB
`dotcom-rendering/dist/2462.client.web.********************.js`	3.87 kB
`dotcom-rendering/dist/2487.client.web.********************.js`	157 B
`dotcom-rendering/dist/249.client.web.********************.js`	3.69 kB
`dotcom-rendering/dist/2611.client.web.********************.js`	3.77 kB
`dotcom-rendering/dist/267.client.web.********************.js`	917 B
`dotcom-rendering/dist/2751.client.web.********************.js`	6.29 kB
`dotcom-rendering/dist/2784.client.web.********************.js`	3.64 kB
`dotcom-rendering/dist/281.client.web.********************.js`	642 B
`dotcom-rendering/dist/2927.client.web.********************.js`	441 B
`dotcom-rendering/dist/3004.client.web.********************.js`	3.29 kB
`dotcom-rendering/dist/302.client.web.********************.js`	4.52 kB
`dotcom-rendering/dist/3060.client.web.********************.js`	3.79 kB
`dotcom-rendering/dist/3109.client.web.********************.js`	803 B
`dotcom-rendering/dist/3270.client.web.********************.js`	961 B
`dotcom-rendering/dist/3304.client.web.********************.js`	853 B
`dotcom-rendering/dist/3539.client.web.********************.js`	2.17 kB
`dotcom-rendering/dist/3570.client.web.********************.js`	3.41 kB
`dotcom-rendering/dist/3613.client.web.********************.js`	3.42 kB
`dotcom-rendering/dist/3634.client.web.********************.js`	3.87 kB
`dotcom-rendering/dist/371.client.web.********************.js`	3.83 kB
`dotcom-rendering/dist/3769.client.web.********************.js`	999 B
`dotcom-rendering/dist/3777.client.web.********************.js`	3.21 kB
`dotcom-rendering/dist/3833.client.web.********************.js`	4.55 kB
`dotcom-rendering/dist/3839.client.web.********************.js`	3.71 kB
`dotcom-rendering/dist/403.client.web.********************.js`	3.64 kB
`dotcom-rendering/dist/4120.client.web.********************.js`	11.1 kB
`dotcom-rendering/dist/4132.client.web.********************.js`	3.51 kB
`dotcom-rendering/dist/4173.client.web.********************.js`	3.14 kB
`dotcom-rendering/dist/4215.client.web.********************.js`	10.3 kB
`dotcom-rendering/dist/4282.client.web.********************.js`	685 B
`dotcom-rendering/dist/4364.client.web.********************.js`	13 kB
`dotcom-rendering/dist/4501.client.web.********************.js`	4.29 kB
`dotcom-rendering/dist/4553.client.web.********************.js`	3.35 kB
`dotcom-rendering/dist/4556.client.web.********************.js`	4.15 kB
`dotcom-rendering/dist/456.client.web.********************.js`	2.42 kB
`dotcom-rendering/dist/4628.client.web.********************.js`	654 B
`dotcom-rendering/dist/4941.client.web.********************.js`	890 B
`dotcom-rendering/dist/4985.client.web.********************.js`	1.91 kB
`dotcom-rendering/dist/5019.client.web.********************.js`	619 B
`dotcom-rendering/dist/5209.client.web.********************.js`	22.7 kB
`dotcom-rendering/dist/5222.client.web.********************.js`	2.28 kB
`dotcom-rendering/dist/5400.client.web.********************.js`	4.94 kB
`dotcom-rendering/dist/5410.client.web.********************.js`	4.49 kB
`dotcom-rendering/dist/5658.client.web.********************.js`	750 B
`dotcom-rendering/dist/5695.client.web.********************.js`	2.59 kB
`dotcom-rendering/dist/5757.client.web.********************.js`	931 B
`dotcom-rendering/dist/576.client.web.********************.js`	11.2 kB
`dotcom-rendering/dist/5880.client.web.********************.js`	828 B
`dotcom-rendering/dist/5920.client.web.********************.js`	2.17 kB
`dotcom-rendering/dist/6042.client.web.********************.js`	4.04 kB
`dotcom-rendering/dist/6044.client.web.********************.js`	726 B
`dotcom-rendering/dist/6071.client.web.********************.js`	577 B
`dotcom-rendering/dist/6135.client.web.********************.js`	779 B
`dotcom-rendering/dist/632.client.web.********************.js`	6.86 kB
`dotcom-rendering/dist/6389.client.web.********************.js`	5.88 kB
`dotcom-rendering/dist/6390.client.web.********************.js`	529 B
`dotcom-rendering/dist/6505.client.web.********************.js`	1 kB
`dotcom-rendering/dist/6587.client.web.********************.js`	4.41 kB
`dotcom-rendering/dist/6598.client.web.********************.js`	780 B
`dotcom-rendering/dist/6638.client.web.********************.js`	907 B
`dotcom-rendering/dist/6655.client.web.********************.js`	3.64 kB
`dotcom-rendering/dist/6662.client.web.********************.js`	523 B
`dotcom-rendering/dist/678.client.web.********************.js`	804 B
`dotcom-rendering/dist/6976.client.web.********************.js`	2.87 kB
`dotcom-rendering/dist/6988.client.web.********************.js`	4.27 kB
`dotcom-rendering/dist/6990.client.web.********************.js`	3.41 kB
`dotcom-rendering/dist/7045.client.web.********************.js`	5.13 kB
`dotcom-rendering/dist/7047.client.web.********************.js`	44.3 kB
`dotcom-rendering/dist/7116.client.web.********************.js`	23 kB
`dotcom-rendering/dist/7366.client.web.********************.js`	1.91 kB
`dotcom-rendering/dist/7392.client.web.********************.js`	3.21 kB
`dotcom-rendering/dist/7691.client.web.********************.js`	853 B
`dotcom-rendering/dist/7729.client.web.********************.js`	20.3 kB
`dotcom-rendering/dist/7807.client.web.********************.js`	3.21 kB
`dotcom-rendering/dist/7824.client.web.********************.js`	2.86 kB
`dotcom-rendering/dist/7955.client.web.********************.js`	5.03 kB
`dotcom-rendering/dist/8122.client.web.********************.js`	6 kB
`dotcom-rendering/dist/83.client.web.********************.js`	750 B
`dotcom-rendering/dist/8347.client.web.********************.js`	4.37 kB
`dotcom-rendering/dist/8504.client.web.********************.js`	827 B
`dotcom-rendering/dist/8536.client.web.********************.js`	595 B
`dotcom-rendering/dist/8586.client.web.********************.js`	2 kB
`dotcom-rendering/dist/8590.client.web.********************.js`	4.01 kB
`dotcom-rendering/dist/8626.client.web.********************.js`	890 B
`dotcom-rendering/dist/8637.client.web.********************.js`	3.92 kB
`dotcom-rendering/dist/8697.client.web.********************.js`	956 B
`dotcom-rendering/dist/8833.client.web.********************.js`	829 B
`dotcom-rendering/dist/9184.client.web.********************.js`	493 B
`dotcom-rendering/dist/9203.client.web.********************.js`	3.06 kB
`dotcom-rendering/dist/9395.client.web.********************.js`	4.41 kB
`dotcom-rendering/dist/9460.client.web.********************.js`	7.27 kB
`dotcom-rendering/dist/9493.client.web.********************.js`	785 B
`dotcom-rendering/dist/9557.client.web.********************.js`	921 B
`dotcom-rendering/dist/9721.client.web.********************.js`	717 B
`dotcom-rendering/dist/9835.client.web.********************.js`	647 B
`dotcom-rendering/dist/9899.client.web.********************.js`	669 B
`dotcom-rendering/dist/Accessibility-importable.client.web.********************.js`	6.39 kB
`dotcom-rendering/dist/AdBlockAsk-importable.client.web.********************.js`	2.85 kB
`dotcom-rendering/dist/AdPortals-importable.client.web.********************.js`	3.71 kB
`dotcom-rendering/dist/AlreadyVisited-importable.client.web.********************.js`	422 B
`dotcom-rendering/dist/AppsEpic-importable.client.web.********************.js`	3.57 kB
`dotcom-rendering/dist/AppsFooter-importable.client.web.********************.js`	3.17 kB
`dotcom-rendering/dist/AppsLightboxImage-importable.client.web.********************.js`	3.46 kB
`dotcom-rendering/dist/AppsLightboxImageStore-importable.client.web.********************.js`	2.52 kB
`dotcom-rendering/dist/AudioAtomWrapper-importable.client.web.********************.js`	3.08 kB
`dotcom-rendering/dist/AudioPlayerWrapper-importable.client.web.********************.js`	6.32 kB
`dotcom-rendering/dist/AuEoy2024Wrapper-importable.client.web.********************.js`	5.04 kB
`dotcom-rendering/dist/AustralianTerritorySwitcher-importable.client.web.********************.js`	2.3 kB
`dotcom-rendering/dist/Branding-importable.client.web.********************.js`	2.54 kB
`dotcom-rendering/dist/braze-web-sdk-core.client.web.********************.js`	37.2 kB
`dotcom-rendering/dist/BrazeMessaging-importable.client.web.********************.js`	1.96 kB
`dotcom-rendering/dist/CalloutBlockComponent-importable.client.web.********************.js`	6.72 kB
`dotcom-rendering/dist/CalloutEmbedBlockComponent-importable.client.web.********************.js`	8.22 kB
`dotcom-rendering/dist/CardCommentCount-importable.client.web.********************.js`	2.95 kB
`dotcom-rendering/dist/Carousel-importable.client.web.********************.js`	6.73 kB
`dotcom-rendering/dist/CarouselForNewsletters-importable.client.web.********************.js`	4.53 kB
`dotcom-rendering/dist/ChartAtom-importable.client.web.********************.js`	541 B
`dotcom-rendering/dist/CommentCount-importable.client.web.********************.js`	2.8 kB
`dotcom-rendering/dist/DiscussionApps-importable.client.web.********************.js`	1.91 kB
`dotcom-rendering/dist/DiscussionMeta-importable.client.web.********************.js`	1.22 kB
`dotcom-rendering/dist/DiscussionWeb-importable.client.web.********************.js`	1.74 kB
`dotcom-rendering/dist/DocumentBlockComponent-importable.client.web.********************.js`	3.14 kB
`dotcom-rendering/dist/Dropdown-importable.client.web.********************.js`	1.72 kB
`dotcom-rendering/dist/EditionSwitcherBanner-importable.client.web.********************.js`	5.98 kB
`dotcom-rendering/dist/EmbedBlockComponent-importable.client.web.********************.js`	3.74 kB
`dotcom-rendering/dist/EnhancePinnedPost-importable.client.web.********************.js`	2.02 kB
`dotcom-rendering/dist/ExpandableMarketingCardWrapper-importable.client.web.********************.js`	4.38 kB
`dotcom-rendering/dist/FetchOnwardsData-importable.client.web.********************.js`	1.94 kB
`dotcom-rendering/dist/FilterKeyEventsToggle-importable.client.web.********************.js`	967 B
`dotcom-rendering/dist/FocusStyles-importable.client.web.********************.js`	619 B
`dotcom-rendering/dist/FollowWrapper-importable.client.web.********************.js`	3.44 kB
`dotcom-rendering/dist/FooterLabel-importable.client.web.********************.js`	345 B
`dotcom-rendering/dist/FooterReaderRevenueLinks-importable.client.web.********************.js`	3.71 kB
`dotcom-rendering/dist/frameworks.client.web.********************.js`	20.9 kB
`dotcom-rendering/dist/FrontSubNav-importable.client.web.********************.js`	7.63 kB
`dotcom-rendering/dist/GetCricketScoreboard-importable.client.web.********************.js`	3.81 kB
`dotcom-rendering/dist/GetMatchNav-importable.client.web.********************.js`	10.7 kB
`dotcom-rendering/dist/GetMatchStats-importable.client.web.********************.js`	7.41 kB
`dotcom-rendering/dist/GetMatchTabs-importable.client.web.********************.js`	2.22 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 kB
`dotcom-rendering/dist/GuideAtomWrapper-importable.client.web.********************.js`	782 B
`dotcom-rendering/dist/index.client.web.********************.js`	46.2 kB
`dotcom-rendering/dist/InstagramBlockComponent-importable.client.web.********************.js`	2.79 kB
`dotcom-rendering/dist/InteractiveAtomMessenger-importable.client.web.********************.js`	853 B
`dotcom-rendering/dist/InteractiveBlockComponent-importable.client.web.********************.js`	6.56 kB
`dotcom-rendering/dist/InteractiveContentsBlockComponent-importable.client.web.********************.js`	4.25 kB
`dotcom-rendering/dist/KeyEventsCarousel-importable.client.web.********************.js`	4.86 kB
`dotcom-rendering/dist/KnowledgeQuizAtom-importable.client.web.********************.js`	3.62 kB
`dotcom-rendering/dist/LatestLinks-importable.client.web.********************.js`	4.56 kB
`dotcom-rendering/dist/LightboxHash-importable.client.web.********************.js`	435 B
`dotcom-rendering/dist/LightboxLayout-importable.client.web.********************.js`	6.52 kB
`dotcom-rendering/dist/LiveBlogEpic-importable.client.web.********************.js`	3.82 kB
`dotcom-rendering/dist/LiveblogNotifications-importable.client.web.********************.js`	5.27 kB
`dotcom-rendering/dist/Liveness-importable.client.web.********************.js`	4.82 kB
`dotcom-rendering/dist/ManyNewsletterSignUp-importable.client.web.********************.js`	9.89 kB
`dotcom-rendering/dist/MapEmbedBlockComponent-importable.client.web.********************.js`	4.97 kB
`dotcom-rendering/dist/Metrics-importable.client.web.********************.js`	2.69 kB
`dotcom-rendering/dist/MostViewedFooter-importable.client.web.********************.js`	3.83 kB
`dotcom-rendering/dist/MostViewedFooterData-importable.client.web.********************.js`	6.07 kB
`dotcom-rendering/dist/MostViewedRightWithAd-importable.client.web.********************.js`	5.22 kB
`dotcom-rendering/dist/OnwardsUpper-importable.client.web.********************.js`	5.33 kB
`dotcom-rendering/dist/PersonalityQuizAtom-importable.client.web.********************.js`	3.77 kB
`dotcom-rendering/dist/ProfileAtom-importable.client.web.********************.js`	545 B
`dotcom-rendering/dist/ProfileAtomWrapper-importable.client.web.********************.js`	805 B
`dotcom-rendering/dist/PulsingDot-importable.client.web.********************.js`	749 B
`dotcom-rendering/dist/QandaAtom-importable.client.web.********************.js`	543 B
`dotcom-rendering/dist/ReaderRevenueDev-importable.client.web.********************.js`	469 B
`dotcom-rendering/dist/readerRevenueDevUtils.client.web.********************.js`	1.96 kB
`dotcom-rendering/dist/RelativeTime-importable.client.web.********************.js`	2.53 kB
`dotcom-rendering/dist/RichLinkComponent-importable.client.web.********************.js`	6.39 kB
`dotcom-rendering/dist/ScrollableFeature-importable.client.web.********************.js`	7.07 kB
`dotcom-rendering/dist/ScrollableHighlights-importable.client.web.********************.js`	5.17 kB
`dotcom-rendering/dist/ScrollableMedium-importable.client.web.********************.js`	3.75 kB
`dotcom-rendering/dist/ScrollableSmall-importable.client.web.********************.js`	3.74 kB
`dotcom-rendering/dist/SecureSignup-importable.client.web.********************.js`	6.98 kB
`dotcom-rendering/dist/SendTargetingParams-importable.client.web.********************.js`	2.19 kB
`dotcom-rendering/dist/sentry.client.web.********************.js`	794 B
`dotcom-rendering/dist/SetABTests-importable.client.web.********************.js`	3.86 kB
`dotcom-rendering/dist/SetAdTargeting-importable.client.web.********************.js`	485 B
`dotcom-rendering/dist/ShareButton-importable.client.web.********************.js`	3.94 kB
`dotcom-rendering/dist/shimport.client.web.********************.js`	2.8 kB
`dotcom-rendering/dist/ShowHideContainers-importable.client.web.********************.js`	728 B
`dotcom-rendering/dist/ShowMore-importable.client.web.********************.js`	1.82 kB
`dotcom-rendering/dist/SignInGateMain.client.web.********************.js`	4.51 kB
`dotcom-rendering/dist/SignInGateMainCheckoutComplete.client.web.********************.js`	5.6 kB
`dotcom-rendering/dist/SignInGateSelector-importable.client.web.********************.js`	3.16 kB
`dotcom-rendering/dist/SlideshowCarousel-importable.client.web.********************.js`	4.18 kB
`dotcom-rendering/dist/SlotBodyEnd-importable.client.web.********************.js`	3.61 kB
`dotcom-rendering/dist/SpotifyBlockComponent-importable.client.web.********************.js`	4.8 kB
`dotcom-rendering/dist/StickyBottomBanner-importable.client.web.********************.js`	4.23 kB
`dotcom-rendering/dist/StickyLiveblogAskWrapper-importable.client.web.********************.js`	7.68 kB
`dotcom-rendering/dist/SubNav-importable.client.web.********************.js`	2.9 kB
`dotcom-rendering/dist/TableOfContents-importable.client.web.********************.js`	3.17 kB
`dotcom-rendering/dist/TimelineAtom-importable.client.web.********************.js`	1.23 kB
`dotcom-rendering/dist/Titlepiece-importable.client.web.********************.js`	12.8 kB
`dotcom-rendering/dist/TopBar-importable.client.web.********************.js`	8.24 kB
`dotcom-rendering/dist/TopBarSupport-importable.client.web.********************.js`	2.73 kB
`dotcom-rendering/dist/TweetBlockComponent-importable.client.web.********************.js`	1.13 kB
`dotcom-rendering/dist/UnsafeEmbedBlockComponent-importable.client.web.********************.js`	2.8 kB
`dotcom-rendering/dist/UsEoy2024Wrapper-importable.client.web.********************.js`	5.48 kB
`dotcom-rendering/dist/VideoFacebookBlockComponent-importable.client.web.********************.js`	4.98 kB
`dotcom-rendering/dist/VineBlockComponent-importable.client.web.********************.js`	2.65 kB
`dotcom-rendering/dist/WeatherWrapper-importable.client.web.********************.js`	6.55 kB
`dotcom-rendering/dist/YoutubeBlockComponent-importable.client.web.********************.js`	6.3 kB

_{compressed-size-action}

github-actions · 2024-11-27T10:15:59Z

Deploy build 39182 of `Mobile::mobile-apps-rendering` to CODE

All deployment options

From guardian/actions-riff-raff.

dotcom-rendering/src/components/MiniProfile.tsx

github-actions · 2024-11-27T10:19:40Z

Deploy build 15002 of `dotcom:rendering-all` to CODE

All deployment options

From guardian/actions-riff-raff.

github-actions bot added the dotcom-rendering label Nov 27, 2024

github-advanced-security bot found potential problems Nov 27, 2024

View reviewed changes

dotcom-rendering/src/components/MiniProfile.tsx Fixed Show resolved Hide resolved

github-advanced-security bot found potential problems Nov 27, 2024

View reviewed changes

dotcom-rendering/src/components/MiniProfile.tsx Fixed Show fixed Hide fixed

simonbyford force-pushed the mini-profiles-tweaks branch from 6691aba to 4dd15c8 Compare November 27, 2024 14:47

simonbyford added 3 commits November 27, 2024 14:56

Use h3 for titles when mini profiles are sectioned

6d1b957

Don't show separator for sectioned mini profiles

583e800

Don't render empty bios

0b0ccb4

simonbyford force-pushed the mini-profiles-tweaks branch from 4dd15c8 to 0b0ccb4 Compare November 27, 2024 14:56

simonbyford added the run_chromatic Runs chromatic when label is applied label Nov 27, 2024

simonbyford marked this pull request as ready for review November 27, 2024 15:10

simonbyford requested a review from a team as a code owner November 27, 2024 15:10

github-actions bot removed the run_chromatic Runs chromatic when label is applied label Nov 27, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Mini profiles tweaks #12919

Mini profiles tweaks #12919

simonbyford commented Nov 27, 2024 •

edited

Loading

github-actions bot commented Nov 27, 2024 •

edited

Loading

github-actions bot commented Nov 27, 2024 •

edited

Loading

github-actions bot commented Nov 27, 2024 •

edited

Loading

Mini profiles tweaks #12919

Are you sure you want to change the base?

Mini profiles tweaks #12919

Conversation

simonbyford commented Nov 27, 2024 • edited Loading

What does this change?

Why?

Screenshots

github-actions bot commented Nov 27, 2024 • edited Loading

github-actions bot commented Nov 27, 2024 • edited Loading

Deploy build 39182 of Mobile::mobile-apps-rendering to CODE

github-actions bot commented Nov 27, 2024 • edited Loading

Deploy build 15002 of dotcom:rendering-all to CODE

simonbyford commented Nov 27, 2024 •

edited

Loading

github-actions bot commented Nov 27, 2024 •

edited

Loading

github-actions bot commented Nov 27, 2024 •

edited

Loading

Deploy build 39182 of `Mobile::mobile-apps-rendering` to CODE

github-actions bot commented Nov 27, 2024 •

edited

Loading

Deploy build 15002 of `dotcom:rendering-all` to CODE