Move v3 markdown components onto boostlook

[julioest]

⚠️ Reviewers, read first: This PR is stacked on #2411 (the Boostlook v3 vendor PR). Its styles live in boostlook-v3.css, which isn't on develop yet, so on this branch alone the markdown renders unstyled. To see the real result, pull those two files in from #2411 while on this branch:

git fetch https://github.com/boostorg/website-v2.git jc/integrate-boostlook-v3
git checkout FETCH_HEAD -- static/css/v3/boostlook-v3.css templates/base.html

Issue: #2491

Summary & Context

Moves the v3 components that render markdown / rich text off their temporary component-level CSS and onto Boostlook. Each rich-text container gets the boostlook class, and its markdown styling moves into Boostlook's 17-site-components.css, scoped under .boostlook.<class>; the component CSS is reduced to a pointer comment. This is a pure move: the rendered markdown is unchanged, the styling just lives in one place now.

This is the component-side half of the Boostlook v3 sweep. It depends on the Boostlook v3 vendor PR (#2411), which adds the vendored static/css/v3/boostlook-v3.css and the base.html wiring that loads it. Develop does not yet contain that file, so on its own these components would be unstyled - this should land after, or together with, #2411.

• Figma link: N/A (CSS / markup refactor, no visual change intended)
• Link to components/page: testimonial content modal, a news post detail (http://localhost:8000/news/entry/boost-c-libraries-and-fiscal-sponsorship/), the release highlights card http://localhost:8000/releases/latest/, and the user-profile bio (http://localhost:8000/users/me/)

Changes

• Adds the boostlook class to each rich-text container: _content_modal.html, _markdown_card.html, _release_highlights_card.html, _user_profile_bio_card.html, and the news post body (news/v3/detail.html).
• Removes the temporary component-level markdown CSS from content-modal.css, markdown-card.css, post-detail.css, and release-highlights-card.css. Those rules now live in Boostlook's 17-site-components.css under .boostlook.<class>, and each component file is reduced to a pointer comment.
• Net: +23 / -241 across 9 files (4 component CSS files + the 5 templates).

Components covered: content modal, markdown card (shared with the user-profile bio), post detail (news body), and release highlights.

‼️ Risks & Considerations ‼️

Please list any potential risks or areas that need extra attention during review/testing

• Depends on Story: Add support for boostlook v3 and vendor the file #2411 (the Boostlook v3 vendor PR). Develop does not yet contain boostlook-v3.css, so merging this alone would leave these components unstyled. Land it after or together with Story: Add support for boostlook v3 and vendor the file #2411.
• Behavior-preserving: the markdown output is identical; only the source of the styling moved (component CSS to Boostlook). No markup semantics changed beyond adding the boostlook class.
• Out of scope by design: the release notes card, user profile page, and bio card reuse the shared markdown card and need no port of their own; the legal pages and |safe-HTML cards are not markdown and are outside a markdown sweep.

Screenshots

No visual change intended - this is a styling move, so before and after render identically. Verified locally with before/after compare pages for each component.

Peer-review testing steps

1. Make sure the Boostlook v3 vendor PR (Story: Add support for boostlook v3 and vendor the file #2411) is present (merge it first, or test the two together) - this PR depends on boostlook-v3.css being loaded.
2. Enable the v3 Waffle flag.
3. Open each surface and confirm the markdown renders as before (headings, lists, links, inline code, bold):
   • a testimonial content modal
   • a news post detail (markdown body)
   • the release highlights card on /releases/latest/
   • the user-profile bio on /users/me/
4. Confirm there is no doubled spacing, missing bullets, or unstyled text (i.e. the .boostlook.<class> rules are applying).
5. Toggle light and dark mode on each.

Self-review Checklist

• Tag at least one team member from each team to review this PR
• Link this PR to the related GitHub Project ticket

Frontend

• UI implementation matches Figma design
• Tested in light and dark mode
• Responsive / mobile verified
• Accessibility checked (keyboard navigation, etc.)
• Ensure design tokens are used for colors, spacing, typography, etc. - No hardcoded values
• Test without JavaScript (if applicable): N/A - CSS / markup only
• No console errors or warnings

[coderabbitai]

📝 Walkthrough

Walkthrough

The v3 templates add boostlook to rendered prose and markdown containers. Local rich-text typography overrides are removed from component stylesheets, while remaining layout rules are preserved.

Changes

Boostlook rich-text styling

Layer / File(s)	Summary
Delegate rich-text styling to Boostlook static/css/v3/content-modal.css, static/css/v3/markdown-card.css, static/css/v3/post-detail.css, static/css/v3/release-highlights-card.css	Local prose, markdown, post-detail, and release-highlight typography rules are removed or reduced to layout rules, with Boostlook identified as the styling source.
Apply Boostlook classes templates/news/v3/detail.html, templates/v3/includes/*	Post bodies and rendered prose or markdown containers add the boostlook class while retaining existing rendering behavior.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Possibly related issues

• Task:Markdown Card — Style Improvements #2491 — Covers removing component-level markdown overrides and adding scoped boostlook classes to affected templates.

Possibly related PRs

• boostorg/website-v2#2100 — Modifies the v3 post-detail presentation stack and related markdown rendering styles.
• boostorg/website-v2#2411 — Introduces the Boostlook stylesheet dependency for delegated v3 rich-text styling.

Suggested reviewers: herzog0, jlchilders11

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Title check	✅ Passed	The title clearly matches the main change: migrating v3 markdown components onto Boostlook.
Description check	✅ Passed	The description covers the required sections, change summary, risks, screenshots note, and testing guidance, with only minor checklist gaps.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@templates/v3/includes/_release_highlights_card.html`:
- Line 43: Update the release-highlight description markup around the
inline_markdown call so it does not receive Boostlook’s painted background:
either move the boostlook class to a non-painted wrapper or add a scoped
transparent-background override in Boostlook’s release-highlight styling.
Preserve the existing description rendering and card theme appearance.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: c16edda4-28f3-4e22-a350-a0637b622033

📥 Commits

Reviewing files that changed from the base of the PR and between f5d611f and ed2a7ac.

📒 Files selected for processing (9)

• static/css/v3/content-modal.css
• static/css/v3/markdown-card.css
• static/css/v3/post-detail.css
• static/css/v3/release-highlights-card.css
• templates/news/v3/detail.html
• templates/v3/includes/_content_modal.html
• templates/v3/includes/_markdown_card.html
• templates/v3/includes/_release_highlights_card.html
• templates/v3/includes/_user_profile_bio_card.html

[julhoang]

Hi @julioest ! Thanks for your help with tackling this task.

Currently there are still a couple of issue with integrating Boostlook that I noticed:

1. The post detail body section has a white background.
2. From the sample post (that I created from the WYSIWIG post page), I also happened to notice that the highlightjs class are not added to <pre> elements – can we add that so that the code syntax will get coloured?

3. On the Download page, the documentation card is missing an overflow scroll and some horizontal padding.

[julioest]

Hey @julhoang! That ugly rendering is expected on this PR by itself. The styles live in boostlook.css over in #2411 (the vendor PR), and this one just wires the components up to it, so without that stylesheet loaded the markdown falls back to unstyled.

Pull these files in from #2411's branch:

git fetch https://github.com/boostorg/website-v2.git jc/integrate-boostlook-v3
git checkout FETCH_HEAD -- static/css/v3/boostlook-v3.css templates/base.html

Then just hard-refresh. No rebuild or migrate needed. Check again

cc @javiercoronadonarvaez

[javiercoronadonarvaez]

LGTM! Great work. Thanks for those instructions at the end.

[julhoang]

This is looking great, thanks again for adding the testing instructions @julioest!

I can pre-approve this now, but I also have 2 questions:

1. I noticed that the inline code in the What's New section is blue (set by styles.css), while the inline code inside the Release Note card is grey (set by boostlook). I'm wondering if we should stop setting the code color in styles.css altogether, or whether it's safer to set it specifically in release-highlights-card.css to narrow the scope of impact? 🤔

2. I understand this one comes from the boostlook rules, but the line gap between the title and description in the sect1 div currently feels a bit too narrow. There's a margin-bottom: 0.5rem; rule on the h2 that ends up being overridden by margin: 0. I realize exceptions to boostlook may be hard to grant, so maybe we can just log a note about this case in boostlook for now, and revisit it later?

[julioest]

Comrade @julhoang, thank ya and great questions.

I'm wondering if we should stop setting the code color in styles.css altogether

Yep, I think those styles should live in boostlook.

so maybe we can just log a note about this case in boostlook for now, and revisit it later?

I'm taking a quick look

[julioest]

Kept the styles.css and fixed it in boostlook

The heading gap isn't a boostlook exception: that margin: 0 is the rule I ported out of the old markdown-card.css, and asciidoctor's .sect1 puts the heading out of reach of the card's flex gap. Scoped so flat markdown doesn't double up.