Releases · withastro/astro

Patch Changes

#12480 c3b7e7c Thanks @matthewp! - Removes the default throw behavior in astro:env
#12444 28dd3ce Thanks @ematipico! - Fixes an issue where a server island hydration script might fail case the island ID misses from the DOM.
#12476 80a9a52 Thanks @florian-lefebvre! - Fixes a case where the Content Layer glob() loader would not update when renaming or deleting an entry
#12418 25baa4e Thanks @oliverlynch! - Fix cached image redownloading if it is the first asset
#12477 46f6b38 Thanks @ematipico! - Fixes an issue where the SSR build was emitting the dist/server/entry.mjs file with an incorrect import at the top of the file/
#12365 a23985b Thanks @apatel369! - Fixes an issue where Astro.currentLocale was not correctly returning the locale for 404 and 500 pages.

Minor Changes

#12067 c48916c Thanks @stramel! - Adds experimental support for built-in SVG components.

This feature allows you to import SVG files directly into your Astro project as components. By default, Astro will inline the SVG content into your HTML output.

To enable this feature, set experimental.svg to true in your Astro config:
```
{
  experimental: {
    svg: true,
  },
}
```
To use this feature, import an SVG file in your Astro project, passing any common SVG attributes to the imported component. Astro also provides a size attribute to set equal height and width properties:
```
---
import Logo from './path/to/svg/file.svg';
---

<Logo size={24} />
```
For a complete overview, and to give feedback on this experimental API, see the Feature RFC.

#12329 8309c61 Thanks @florian-lefebvre! - Adds a new astro:routes:resolved hook to the Integration API. Also update the astro:build:done hook by deprecating routes and adding a new assets map.

When building an integration, you can now get access to routes inside the astro:routes:resolved hook:

const integration = () => {
  return {
    name: 'my-integration',
    hooks: {
      'astro:routes:resolved': ({ routes }) => {
        console.log(routes);
      },
    },
  };
};

This hook runs before astro:config:done, and whenever a route changes in development.

The routes array from astro:build:done is now deprecated, and exposed properties are now available on astro:routes:resolved, except for distURL. For this, you can use the newly exposed assets map:

const integration = () => {
+    let routes
    return {
        name: 'my-integration',
        hooks: {
+            'astro:routes:resolved': (params) => {
+                routes = params.routes
+            },
            'astro:build:done': ({
-                routes
+                assets
            }) => {
+                for (const route of routes) {
+                    const distURL = assets.get(route.pattern)
+                    if (distURL) {
+                        Object.assign(route, { distURL })
+                    }
+                }
                console.log(routes)
            }
        }
    }
}

#12377 af867f3 Thanks @ascorbic! - Adds experimental support for automatic responsive images

This feature is experimental and may change in future versions. To enable it, set experimental.responsiveImages to true in your astro.config.mjs file.
```
{
   experimental: {
      responsiveImages: true,
   },
}
```
When this flag is enabled, you can pass a layout prop to any <Image /> or <Picture /> component to create a responsive image. When a layout is set, images have automatically generated srcset and sizes attributes based on the image's dimensions and the layout type. Images with responsive and full-width layouts will have styles applied to ensure they resize according to their container.
```
---
import { Image, Picture } from 'astro:assets';
import myImage from '../assets/my_image.png';
---

<Image
  src={myImage}
  alt="A description of my image."
  layout="responsive"
  width={800}
  height={600}
/>
<Picture
  src={myImage}
  alt="A description of my image."
  layout="full-width"
  formats={['avif', 'webp', 'jpeg']}
/>
```
This <Image /> component will generate the following HTML output:
```
<img
  src="/_astro/my_image.hash3.webp"
  srcset="
    /_astro/my_image.hash1.webp  640w,
    /_astro/my_image.hash2.webp  750w,
    /_astro/my_image.hash3.webp  800w,
    /_astro/my_image.hash4.webp  828w,
    /_astro/my_image.hash5.webp 1080w,
    /_astro/my_image.hash6.webp 1280w,
    /_astro/my_image.hash7.webp 1600w
  "
  alt="A description of my image"
  sizes="(min-width: 800px) 800px, 100vw"
  loading="lazy"
  decoding="async"
  fetchpriority="auto"
  width="800"
  height="600"
  style="--w: 800; --h: 600; --fit: cover; --pos: center;"
  data-astro-image="responsive"
/>
```
Responsive image properties

These are additional properties available to the <Image /> and <Picture /> components when responsive images are enabled:
- layout: The layout type for the image. Can be responsive, fixed, full-width or none. Defaults to value of image.experimentalLayout.
- fit: Defines how the image should be cropped if the aspect ratio is changed. Values match those of CSS object-fit. Defaults to cover, or the value of image.experimentalObjectFit if set.
- position: Defines the position of the image crop if the aspect ratio is changed. Values match those of CSS object-position. Defaults to center, or the value of image.experimentalObjectPosition if set.
- priority: If set, eagerly loads the image. Otherwise images will be lazy-loaded. Use this for your largest above-the-fold image. Defaults to false.
Default responsive image settings

You can enable responsive images for all <Image /> and <Picture /> components by setting image.experimentalLayout with a default value. This can be overridden by the layout prop on each component.

Example:
```
{
    image: {
      // Used for all `<Image />` and `<Picture />` components unless overridden
      experimentalLayout: 'responsive',
    },
    experimental: {
      responsiveImages: true,
    },
}
```
```
---
import { Image } from 'astro:assets';
import myImage from '../assets/my_image.png';
---

<Image src={myImage} alt="This will use responsive layout" width={800} height={600} />

<Image src={myImage} alt="This will use full-width layout" layout="full-width" />

<Image src={myImage} alt="This will disable responsive images" layout="none" />
```
For a complete overview, and to give feedback on this experimental API, see the Responsive Images RFC.
#12475 3f02d5f Thanks @ascorbic! - Changes the default content config location from src/content/config.* to src/content.config.*.

The previous location is still supported, and is required if the legacy.collections flag is enabled.

Patch Changes

#12424 4364bff Thanks @ematipico! - Fixes an issue where an incorrect usage of Astro actions was lost when porting the fix from v4 to v5
#12438 c8f877c Thanks @ascorbic! - Fixes a bug where legacy content types were generated for content layer collections if they were in the content directory

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Minor Changes

Responsive image properties

Default responsive image settings

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Releases: withastro/astro

[email protected]

Patch Changes

@astrojs/[email protected]

Patch Changes

@astrojs/[email protected]

Patch Changes

@astrojs/[email protected]

Patch Changes

@astrojs/[email protected]

Patch Changes

@astrojs/[email protected]

Patch Changes

[email protected]

Minor Changes

Responsive image properties

Default responsive image settings

Patch Changes

[email protected]

Patch Changes

@astrojs/[email protected]

Patch Changes

@astrojs/[email protected]

Patch Changes