Title: Bump astro from 4.16.7 to 5.7.6 by dependabot[bot] · Pull Request #355 · emeraldjava/emeraldjava.github.io · GitHub
Open Graph Title: Bump astro from 4.16.7 to 5.7.6 by dependabot[bot] · Pull Request #355 · emeraldjava/emeraldjava.github.io
X Title: Bump astro from 4.16.7 to 5.7.6 by dependabot[bot] · Pull Request #355 · emeraldjava/emeraldjava.github.io
Description: Bumps astro from 4.16.7 to 5.7.6.
Release notes
Sourced from astro's releases.
astro@5.7.6
Patch Changes
#13703 659904b Thanks @ascorbic! - Fixes a bug where empty fallbacks could not be provided when using the experimental fonts API
#13680 18e1b97 Thanks @florian-lefebvre! - Improves the UnsupportedExternalRedirect error message to include more details such as the concerned destination
#13703 659904b Thanks @ascorbic! - Simplifies styles for experimental responsive images
⚠️ BREAKING CHANGE FOR EXPERIMENTAL RESPONSIVE IMAGES ONLY ⚠️
The generated styles for image layouts are now simpler and easier to override. Previously the responsive image component used CSS to set the size and aspect ratio of the images, but this is no longer needed. Now the styles just include object-fit and object-position for all images, and sets max-width: 100% for constrained images and width: 100% for full-width images.
This is an implementation change only, and most users will see no change. However, it may affect any custom styles you have added to your responsive images. Please check your rendered images to determine whether any change to your CSS is needed.
The styles now use the :where() pseudo-class, which has a specificity of 0, meaning that it is easy to override with your own styles. You can now be sure that your own classes will always override the applied styles, as will global styles on img.
An exception is Tailwind 4, which uses cascade layers, meaning the rules are always lower specificity. Astro supports browsers that do not support cascade layers, so we cannot use this. If you need to override the styles using Tailwind 4, you must use !important classes. Do check if this is needed though: there may be a layout that is more appropriate for your use case.
#13703 659904b Thanks @ascorbic! - Adds warnings about using local font files in the publicDir when the experimental fonts API is enabled.
#13703 659904b Thanks @ascorbic! - Renames experimental responsive image layout option from "responsive" to "constrained"
⚠️ BREAKING CHANGE FOR EXPERIMENTAL RESPONSIVE IMAGES ONLY ⚠️
The layout option called "responsive" is renamed to "constrained" to better reflect its behavior.
The previous name was causing confusion, because it is also the name of the feature. The responsive layout option is specifically for images that are displayed at the requested size, unless they do not fit the width of their container, at which point they would be scaled down to fit. They do not get scaled beyond the intrinsic size of the source image, or the width prop if provided.
It became clear from user feedback that many people (understandably) thought that they needed to set layout to responsive if they wanted to use responsive images. They then struggled with overriding styles to make the image scale up for full-width hero images, for example, when they should have been using full-width layout. Renaming the layout to constrained should make it clearer that this layout is for when you want to constrain the maximum size of the image, but allow it to scale-down.
Upgrading
If you set a default image.experimentalLayout in your astro.config.mjs, or set it on a per-image basis using the layout prop, you will need to change all occurences to constrained:
// astro.config.mjs
export default {
image: {
- experimentalLayout: 'responsive',
+ experimentalLayout: 'constrained',
},
}
// src/pages/index.astro
---
import { Image } from 'astro:assets';
---
... (truncated)
Changelog
Sourced from astro's changelog.
5.7.6
Patch Changes
#13703 659904b Thanks @ascorbic! - Fixes a bug where empty fallbacks could not be provided when using the experimental fonts API
#13680 18e1b97 Thanks @florian-lefebvre! - Improves the UnsupportedExternalRedirect error message to include more details such as the concerned destination
#13703 659904b Thanks @ascorbic! - Simplifies styles for experimental responsive images
⚠️ BREAKING CHANGE FOR EXPERIMENTAL RESPONSIVE IMAGES ONLY ⚠️
The generated styles for image layouts are now simpler and easier to override. Previously the responsive image component used CSS to set the size and aspect ratio of the images, but this is no longer needed. Now the styles just include object-fit and object-position for all images, and sets max-width: 100% for constrained images and width: 100% for full-width images.
This is an implementation change only, and most users will see no change. However, it may affect any custom styles you have added to your responsive images. Please check your rendered images to determine whether any change to your CSS is needed.
The styles now use the :where() pseudo-class, which has a specificity of 0, meaning that it is easy to override with your own styles. You can now be sure that your own classes will always override the applied styles, as will global styles on img.
An exception is Tailwind 4, which uses cascade layers, meaning the rules are always lower specificity. Astro supports browsers that do not support cascade layers, so we cannot use this. If you need to override the styles using Tailwind 4, you must use !important classes. Do check if this is needed though: there may be a layout that is more appropriate for your use case.
#13703 659904b Thanks @ascorbic! - Adds warnings about using local font files in the publicDir when the experimental fonts API is enabled.
#13703 659904b Thanks @ascorbic! - Renames experimental responsive image layout option from "responsive" to "constrained"
⚠️ BREAKING CHANGE FOR EXPERIMENTAL RESPONSIVE IMAGES ONLY ⚠️
The layout option called "responsive" is renamed to "constrained" to better reflect its behavior.
The previous name was causing confusion, because it is also the name of the feature. The responsive layout option is specifically for images that are displayed at the requested size, unless they do not fit the width of their container, at which point they would be scaled down to fit. They do not get scaled beyond the intrinsic size of the source image, or the width prop if provided.
It became clear from user feedback that many people (understandably) thought that they needed to set layout to responsive if they wanted to use responsive images. They then struggled with overriding styles to make the image scale up for full-width hero images, for example, when they should have been using full-width layout. Renaming the layout to constrained should make it clearer that this layout is for when you want to constrain the maximum size of the image, but allow it to scale-down.
Upgrading
If you set a default image.experimentalLayout in your astro.config.mjs, or set it on a per-image basis using the layout prop, you will need to change all occurences to constrained:
// astro.config.mjs
export default {
image: {
- experimentalLayout: 'responsive',
+ experimentalLayout: 'constrained',
},
}
// src/pages/index.astro
---
import { Image } from 'astro:assets';
... (truncated)
Commits
6a2cfd8 [ci] release (#13702)
659904b Revert "[ci] release (#13676)" (#13703)
34cdd98 [ci] release (#13676)
97eec83 [ci] format
18e1b97 fix: improve external redirects message (#13680)
5f470fd [ci] format
6d0e382 Fonts: fix typing for disabled fallbacks (empty array) (#13681)
6ed8360 [ci] format
b16b5ef feat: rename layout and refactor styles (#13677)
2e528cb feat(fonts): warn if local font is in public dir (#13678)
Additional commits viewable in compare view
Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.
Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase will rebase this PR
@dependabot recreate will recreate this PR, overwriting any edits that have been made to it
@dependabot merge will merge this PR after your CI passes on it
@dependabot squash and merge will squash and merge this PR after your CI passes on it
@dependabot cancel merge will cancel a previously requested merge and block automerging
@dependabot reopen will reopen this PR if it is closed
@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
@dependabot show
Open Graph Description: Bumps astro from 4.16.7 to 5.7.6. Release notes Sourced from astro's releases. astro@5.7.6 Patch Changes #13703 659904b Thanks @ascorbic! - Fixes a bug where empty fallbacks could not be p...
X Description: Bumps astro from 4.16.7 to 5.7.6. Release notes Sourced from astro's releases. astro@5.7.6 Patch Changes #13703 659904b Thanks @ascorbic! - Fixes a bug where empty fallbacks could not ...
Opengraph URL: https://github.com/emeraldjava/emeraldjava.github.io/pull/355
X: @github
Domain: github.com
| route-pattern | /:user_id/:repository/pull/:id/files(.:format) |
| route-controller | pull_requests |
| route-action | files |
| fetch-nonce | v2:da110d98-568d-94ff-59cb-a0558e65a86d |
| current-catalog-service-hash | ae870bc5e265a340912cde392f23dad3671a0a881730ffdadd82f2f57d81641b |
| request-id | 9DCA:373B32:C3F88C:110C68E:6970F638 |
| html-safe-nonce | 5cf29f47b6e83454e04c94ca67ad4e5406ccfa42c6591630a8be302bc5ef7dbd |
| visitor-payload | eyJyZWZlcnJlciI6IiIsInJlcXVlc3RfaWQiOiI5RENBOjM3M0IzMjpDM0Y4OEM6MTEwQzY4RTo2OTcwRjYzOCIsInZpc2l0b3JfaWQiOiI2MjM4NTY4ODAwOTgzMjUwNDg4IiwicmVnaW9uX2VkZ2UiOiJpYWQiLCJyZWdpb25fcmVuZGVyIjoiaWFkIn0= |
| visitor-hmac | e507f12ebc26d4e03dd8418ce7cf15e6007b972c8e3a0d3d831b7f949e5e58cd |
| hovercard-subject-tag | pull_request:2485018728 |
| github-keyboard-shortcuts | repository,pull-request-list,pull-request-conversation,pull-request-files-changed,copilot |
| google-site-verification | Apib7-x98H0j5cPqHWwSMm6dNU4GmODRoqxLiDzdx9I |
| octolytics-url | https://collector.github.com/github/collect |
| analytics-location | / |
| fb:app_id | 1401488693436528 |
| apple-itunes-app | app-id=1477376905, app-argument=https://github.com/emeraldjava/emeraldjava.github.io/pull/355/files |
| twitter:image | https://avatars.githubusercontent.com/in/29110?s=400&v=4 |
| twitter:card | summary_large_image |
| og:image | https://avatars.githubusercontent.com/in/29110?s=400&v=4 |
| og:image:alt | Bumps astro from 4.16.7 to 5.7.6. Release notes Sourced from astro's releases. astro@5.7.6 Patch Changes #13703 659904b Thanks @ascorbic! - Fixes a bug where empty fallbacks could not be p... |
| og:site_name | GitHub |
| og:type | object |
| hostname | github.com |
| expected-hostname | github.com |
| None | 1b239ebed690c3053869ff31a3b7597834c25673659d63e7b6fd6a9b5d7853de |
| turbo-cache-control | no-preview |
| diff-view | unified |
| go-import | github.com/emeraldjava/emeraldjava.github.io git https://github.com/emeraldjava/emeraldjava.github.io.git |
| octolytics-dimension-user_id | 229760 |
| octolytics-dimension-user_login | emeraldjava |
| octolytics-dimension-repository_id | 17636941 |
| octolytics-dimension-repository_nwo | emeraldjava/emeraldjava.github.io |
| octolytics-dimension-repository_public | true |
| octolytics-dimension-repository_is_fork | false |
| octolytics-dimension-repository_network_root_id | 17636941 |
| octolytics-dimension-repository_network_root_nwo | emeraldjava/emeraldjava.github.io |
| turbo-body-classes | logged-out env-production page-responsive full-width |
| disable-turbo | true |
| browser-stats-url | https://api.github.com/_private/browser/stats |
| browser-errors-url | https://api.github.com/_private/browser/errors |
| release | aeacfd55297f3de5395c83f200ac35d1f474115e |
| ui-target | full |
| theme-color | #1e2327 |
| color-scheme | light dark |
Links:
Viewport: width=device-width