Docs: automatically screenshot examples as light/dark images#42329
Merged
julien-deramond merged 7 commits intov6-devfrom Apr 18, 2026
Merged
Docs: automatically screenshot examples as light/dark images#42329julien-deramond merged 7 commits intov6-devfrom
julien-deramond merged 7 commits intov6-devfrom
Conversation
Contributor
|
Images automagically compressed by Calibre's image-actions ✨ Compression reduced images by 75.3%, saving 919.3 KB. Displaying top 25 most improved images. 26 images processed.
|
julien-deramond
force-pushed
the
v6-dev-js-automatic-examples-screenshot-script
branch
from
b73d822 to
6a4ee8b
Compare
Contributor
|
Images automagically compressed by Calibre's image-actions ✨ Compression reduced images by 75.2%, saving 917.7 KB. Displaying top 25 most improved images. 26 images processed.
|
julien-deramond
commented
Apr 16, 2026
julien-deramond
force-pushed
the
v6-dev-js-automatic-examples-screenshot-script
branch
from
7e77a77 to
867c8a1
Compare
Contributor
|
Images automagically compressed by Calibre's image-actions ✨ Compression reduced images by 75.9%, saving 913.5 KB. Displaying top 25 most improved images. 26 images processed.
|
Contributor
|
Images automagically compressed by Calibre's image-actions ✨ Compression reduced images by 75.9%, saving 912.9 KB. Displaying top 25 most improved images. 26 images processed.
|
julien-deramond
commented
Apr 16, 2026
Member
Author
There was a problem hiding this comment.
This is the only issue I've spotted but this is the behavior I can observe when I load https://deploy-preview-42329--twbs-bootstrap.netlify.app/docs/6.0/examples/masonry/ when 1070x1070 and don't move anything. I don't think this is particularly an issue coming from Playwright. Maybe we can add a movement or something for this specific example. But if we plan to get rid of this example, nevermind, nothing to do.
julien-deramond
changed the title
Member
|
Maybe missing |
Member
Author
# - name: Menus
# description: 'Enhance your menus with filters, icons, custom styles, and more.'Do you want me to uncomment it?
There’s already a “Navbars drawer” example, and its images are being generated. Were you thinking of a different drawer example? 
|
Contributor
|
Images automagically compressed by Calibre's image-actions ✨ Compression reduced images by 12.1%, saving 30.8 KB.
4 images did not require optimisation. |
julien-deramond
deleted the
v6-dev-js-automatic-examples-screenshot-script
branch
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
This PR automates the creation of examples screenshots by running
npm run screenshots.Technically, the screenshot automation is handled by a Playwright script that reads the examples data, starts the docs server automatically, navigates to each internal example page, and captures screenshots for both theme states by emulating light and dark color schemes. Instead of capturing only a small crop, it captures a full-width viewport and then uses image resizing to generate consistent thumbnail assets at 480x300 and 960x600, including dark-mode variants with the same naming pattern.
On the rendering side, the examples grid now switches thumbnail sources dynamically based on the resolved theme applied on the html data-bs-theme attribute. That means when the docs are in light mode it serves the standard image set, when in dark mode it serves the dark set, and in auto mode it follows whatever the theme script resolves at runtime. This keeps behavior aligned with the existing docs color-mode system and avoids showing the wrong thumbnail after toggling.
Please note that the
.bd-mode-toggletheme selector is removed from each screenshot.Note
No effort has been done so that the script works on Windows too. Only tested with macOS.
Live previews
Warning
The color modes dropdown isn't working from the /examples page, but it's not due to this PR