Astro [email protected] — Release Notes & Engineering Impact

### Minor Changes - [#14932](https://github.com/withastro/astro/pull/14932) [`b19d816`](https://github.com/withastro/astro/commit/b19d816c914022c4e618d6012e09aed82be34213) Thanks [@patrickarlt](https://github.com/patrickarlt)! - Adds support for returning a Promise from the `parser()` option of the `file()` loader This enables you to run asynchronous code such as fetching remote data or using async parsers when loading files with the Content Layer API. For example: ```js import { defineCollection } from 'astro:content'; import { file } from 'astro/loaders'; const blog = defineCollection({ loader: file('src/data/blog.json', { parser: async (text) => { const data = JSON.parse(text); // Perform async operations like fetching additional data const enrichedData = await fetch(`https://api.example.com/enrich`, { method: 'POST', body: JSON.stringify(data), }).then((res) => res.json()); return enrichedData; }, }), }); export const collections = { blog }; ``` See [the `parser()` reference documentation](https://docs.astro.build/en/reference/content-loader-reference/#parser) for more information. - [#15171](https://github.com/withastro/astro/pull/15171) [`f220726`](https://github.com/withastro/astro/commit/f22072607c79f5ba3459ba7522cfdf2581f1869b) Thanks [@mark-ignacio](https://github.com/mark-ignacio)! - Adds a new, optional `kernel` configuration option to select a resize algorithm in the Sharp image service By default, Sharp resizes images with the `lanczos3` kernel. This new config option allows you to set the default resizing algorithm to any resizing option supported by [Sharp](https://sharp.pixelplumbing.com/api-resize/#resize) (e.g. `linear`, `mks2021`). Kernel selection can produce quite noticeable differences depending on various characteristics of the source image - especially drawn art - so changing the kernel gives you more control over the appearance of images on your site: ```js export default defineConfig({ image: { service: { entrypoint: 'astro/assets/services/sharp', config: { kernel: "mks2021" } } }) ``` This selection will apply to all images on your site, and is not yet configurable on a per-image basis. For more information, see [Sharps documentation on resizing images](https://sharp.pixelplumbing.com/api-resize/#resize). - [#15063](https://github.com/withastro/astro/pull/15063) [`08e0fd7`](https://github.com/withastro/astro/commit/08e0fd723742dda4126665f5e32f4065899af83e) Thanks [@jmortlock](https://github.com/jmortlock)! - Adds a new `partitioned` option when setting a cookie to allow creating partitioned cookies. [Partitioned cookies](https://developer.mozilla.org/en-US/docs/Web/Privacy/Guides/Privacy_sandbox/Partitioned_cookies) can only be read within the context of the top-level site on which they were set. This allows cross-site tracking to be blocked, while still enabling legitimate uses of third-party cookies. You can create a partitioned cookie by passing `partitioned: true` when setting a cookie. Note that partitioned cookies must also be set with `secure: true`: ```js Astro.cookies.set('my-cookie', 'value', { partitioned: true, secure: true, }); ``` For more information, see the [`AstroCookieSetOptions` API reference](https://docs.astro.build/en/reference/api-reference/#astrocookiesetoptions). - [#15022](https://github.com/withastro/astro/pull/15022) [`f1fce0e`](https://github.com/withastro/astro/commit/f1fce0e7cc3c1122bf5c4f1c5985ca716c8417db) Thanks [@ascorbic](https://github.com/ascorbic)! - Adds a new `retainBody` option to the `glob()` loader to allow reducing the size of the data store. Currently, the `glob()` loader stores the raw body of each content file in the entry, in addition to the rendered HTML. The `retainBody` option defaults to `true`, but you can set it to `false` to prevent the raw body of content files from being stored in the data store. This significantly reduces the deployed size of the data store and helps avoid hitting size limits for sites with very large collections. The rendered body will still be available in the `entry.rendered.html` property for markdown files, and the `entry.filePath` property will still point to the original file. ```js import { defineCollection } from 'astro:content'; import { glob } from 'astro/loaders'; const blog = defineCollection({ loader: glob({ pattern: '**/*.md', base: './src/content/blog', retainBody: false, }), }); ``` When `retainBody` is `false`, `entry.body` will be `undefined` instead of containing the raw file contents. - [#15153](https://github.com/withastro/astro/pull/15153) [`928529f`](https://github.com/withastro/astro/commit/928529f824d37e9bfb297ff931ebfcb3f0b56428) Thanks [@jcayzac](https://github.com/jcayzac)! - Adds a new `background` property to the `<Image />` component. This optional property lets you pass a background color to flatten the image with. By default, Sharp uses a black background when flattening an image that is being converted to a format that does not support transparency (e.g. `jpeg`). Providing a value for `background` on an `<Image />` component, or passing it to the `getImage()` helper, will flatten images using that color instead. This is especially useful when the requested output format doesn't support an alpha channel (e.g. `jpeg`) and can't support transparent backgrounds. ```astro --- import { Image } from 'astro:assets'; --- <Image src="/transparent.png" alt="A JPEG with a white background!" format="jpeg" background="#ffffff" /> ``` See more about this new property in [the image reference docs](https://docs.astro.build/en/reference/modules/astro-assets/#background) - [#15015](https://github.com/withastro/astro/pull/15015) [`54f6006`](https://github.com/withastro/astro/commit/54f6006c3ddae8935a5550e2c3b38d25bf662ea6) Thanks [@tony](https://github.com/tony)! - Adds optional `placement` config option for the dev toolbar. You can now configure the default toolbar position (`'bottom-left'`, `'bottom-center'`, or `'bottom-right'`) via `devToolbar.placement` in your Astro config. This option is helpful for sites with UI elements (chat widgets, cookie banners) that are consistently obscured by the toolbar in the dev environment. You can set a project default that is consistent across environments (e.g. dev machines, browser instances, team members): ```js // astro.config.mjs export default defineConfig({ devToolbar: { placement: 'bottom-left', }, }); ``` User preferences from the toolbar UI (stored in `localStorage`) still take priority, so this setting can be overridden in individual situations as necessary.