Repository: withastro/astro.build
Pull request #1505: 5.7 blog
Author: login: ascorbic
Created: 2025-04-07T10:07:48Z | Merged: 2025-04-15T11:30:46Z

<!-- Briefly describe what this PR does in a few words or more, for future readers to understand the context of this change. -->

## Browser Test Checklist

<!--
Test on as many of these browsers as you can, ideally 3+ of them.

Tests for all browsers are **strongly recommended** if this PR includes:

- Large gradients or the usage of `mask-image`, which can cause perf issues on Firefox Android (https://github.com/withastro/astro.build/pull/780)
- Font changes, which can behave strangely on Safari (https://github.com/withastro/astro.build/pull/1028)
- Adding SVGs, which can behave strangely on Safari (https://github.com/withastro/astro.build/pull/769)
-->

I have tested this PR on at least three of the following browsers:

- [ ] Chrome / Chromium
- [ ] Firefox
- [ ] Android Firefox
- [ ] Safari
- [ ] iOS Safari




Diff:
diff --git a/src/content/blog/_images/astro-570/blog-post-5-7.webp b/src/content/blog/_images/astro-570/blog-post-5-7.webp
new file mode 100644
index 0000000000..3daab57b19
Binary files /dev/null and b/src/content/blog/_images/astro-570/blog-post-5-7.webp differ
diff --git a/src/content/blog/_images/astro-570/og-astro-5-7.webp b/src/content/blog/_images/astro-570/og-astro-5-7.webp
new file mode 100644
index 0000000000..12137db0cd
Binary files /dev/null and b/src/content/blog/_images/astro-570/og-astro-5-7.webp differ
diff --git a/src/content/blog/astro-570.mdx b/src/content/blog/astro-570.mdx
new file mode 100644
index 0000000000..23598b848c
--- /dev/null
+++ b/src/content/blog/astro-570.mdx
@@ -0,0 +1,305 @@
+---
+title: 'Astro 5.7'
+description: 'Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.'
+homepageLink:
+  title: 'Astro 5.7'
+  subtitle: 'Available now!'
+publishDate: '2025-04-15'
+authors:
+  - matt
+  - florian
+  - ema
+  - nate
+coverImage: '/src/content/blog/_images/astro-570/blog-post-5-7.webp'
+socialImage: '/src/content/blog/_images/astro-570/og-astro-5-7.webp'
+lang: 'en'
+---
+
+import BlogContentImage from '/src/components/BlogContentImage.astro';
+import Note from '~/components/Note.astro';
+import Mention from '/src/components/Mention.astro';
+
+**Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.**
+
+🐣 Full of the joys of northern-hemisphere spring, Astro 5.7 is here with goodies galore:
+
+- [**Experimental Fonts API**](#experimental-fonts-api)
+- [**Sessions API**](#sessions-api)
+- [**SVG Components**](#svg-components)
+- [**Config Imports**](#config-imports)
+
+To upgrade an existing project, use the automated `@astrojs/upgrade` CLI tool. Alternatively, upgrade manually by running the upgrade command for your package manager:
+
+```sh
+# Recommended:
+npx @astrojs/upgrade
+
+# Manual:
+npm install astro@latest
+pnpm upgrade astro --latest
+yarn upgrade astro --latest
+```
+
+## Experimental Fonts API
+
+Almost every website these days uses custom fonts. However, it can be surprisingly complicated to get them right: Why do I get a Flash of Unstyled Text? Should I add a preload link? What about preconnect links? Do I self-host or rely on a third-party provider?
+
+Fonts can have significant performance implications on your site, affecting your visitors' browsing experience and important Core Web Vitals (CWV) metrics. Fortunately, web APIs have greatly improved recently and thanks to amazing initiatives of the open source community (eg. [`unifont`](https://github.com/unjs/unifont/) and [`capsize`](https://github.com/seek-oss/capsize)), we've been able to start working on a great way to use fonts in Astro!
+
+This experimental feature allows you to use fonts from both your file system and several built-in supported providers (e.g. Google, Fontsource, Bunny) through a unified API. Keep your site performant thanks to sensible defaults and automatic optimizations including fallback font generation.
+
+To enable this feature, configure an `experimental.fonts` object with one or more fonts:
+
+```js title="astro.config.mjs"
+import { defineConfig, fontProviders } from "astro/config";
+
+export default defineConfig({
+    experimental: {
+        fonts: [{
+            provider: fontProviders.google(),
+            name: "Roboto",
+            cssVariable: "--font-roboto"
+        }]
+    }
+});
+```
+
+Then, add a `<Font />` component and site-wide styling in your `<head>`:
+
+```astro title="src/components/Head.astro"
+---
+import { Font } from 'astro:assets'
+---
+
+<Font cssVariable='--font-roboto' preload />
+<style>
+body {
+    font-family: var(--font-roboto);
+}
+</style>
+
+There's so much more to discover! Head over to [the experimental Fonts documentation](https://docs.astro.build/en/reference/experimental-flags/fonts/) for the full API, how to get started, and even how to build your own custom `AstroFontProvider` if we don't yet support your preferred font service.
+
+We'd also appreciate your feedback. Participate in the ongoing development of this feature on the [Fonts RFC](https://github.com/withastro/roadmap/pull/1039) and help shape its future.
+
+## Sessions API
+
+The Astro Sessions API is now stable and ready for production!
+
+Sessions let you securely store data tied to a specific user as they navigate between pages on your site. Unlike cookies, sessions are stored on the server, so you can store larger amounts of data without worrying about size limits or security issues. They are useful for storing things like user data, shopping carts, and form state, and they work without any client-side JavaScript:
+
+
+```astro title="src/components/CartButton.astro" {2}
+---
+const cart = await Astro.session.get('cart');
+export const prerender = false;
+---
+
+<a href="/checkout">🛒 {cart?.length ?? 0} items</a>
+```
+
+They can be used in Astro components, pages, API endpoints, actions, and middleware. The API is the same for all of them:
+
+```ts title="src/actions/addToCart.ts" {9,10}
+import { defineAction } from "astro:actions";
+import { z } from "astro:schema";
+
+export const server = {
+  addToCart: defineAction({
+    input: z.object({
+      product: z.string(),
+    }),
+    async handler({ product }, { session }) {
+      const cart = await session.get('cart');
+      session.set('cart', [...cart, product]);
+    },
+  }),
+};
+```
+
+### Type-safety
+
+Of course, as this is Astro, your sessions can be type-safe too. Define an interface and you will get type-checking and auto-completion for all of your session data:
+
+
+```ts title="src/env.d.ts"
+declare namespace App {
+  interface SessionData {
+    user: {
+      id: string;
+      name: string;
+    };
+    cart: string[];
+  }
+}
+```
+
+### Cookie-less sessions
+
+The session ID is automatically tracked using a cookie, but you can also use the `session.load()` method to access sessions without cookies. This is useful for things like APIs, where you might want to use a custom header or params to track the session ID:
+
+```ts title="src/pages/api/cart.ts" "session.load(sessionId)"
+export async function POST({ session, request }: APIContext) {
+  const sessionId = request.headers.get('x-session-id');
+
+  // If there is an existing session ID, load it. Otherwise, one will be created
+  if (sessionId) {
+    await session.load(sessionId);
+  } 
+
+  const cart = await session.get('cart');
+  const data = await request.json<{ item: string }>();
+
+  if (!data?.item) {
+    return new Response('Item is required', { status: 400 });
+  }
+  session.set('cart', [...cart, data.item]);
+  // Return the cart and session ID
+  return Response.json({ cart, sessionId: session.sessionId });
+}
+```
+
+
+### Storage drivers
+
+Astro sessions use storage drivers to persist the data, and these are either zero-config or require minimal setup for all official Astro adapters. Alternatively, you can use any [unstorage](https://unstorage.unjs.io/) driver, which supports dozens of storage backends such as Redis and MongoDB.
+
+- **[Node](https://docs.astro.build/en/guides/integrations-guide/node/#sessions)**: zero-config filesystem driver
+- **[Netlify](https://docs.astro.build/en/guides/integrations-guide/netlify/#sessions)**: zero-config Netlify Blobs driver
+- **[Cloudflare](https://docs.astro.build/en/guides/integrations-guide/cloudflare/#sessions)**: minimal-config Workers KV driver
+- **[Vercel](https://docs.astro.build/en/guides/integrations-guide/vercel/#sessions)**: minimal-config Redis/Upstash driver
+
+On any of these platforms, you can easily switch out the driver for a different one if you don't want to use the default.
+
+```js title="astro.config.mjs" {5-10}
+import { defineConfig } from 'astro/config';
+import netlify from '@astrojs/netlify';
+
+export default defineConfig({
+  // ...
+  adapter: netlify(),
+  session: {
+    driver: 'redis',
+    options: {
+      url: process.env.REDIS_URL,
+    },
+  },
+});
+```
+
+### Upgrading from experimental sessions
+
+If you were using the experimental sessions API, you should remove the experimental flag from your `astro.config.mjs` file:
+
+```js title="astro.config.mjs" del={6}
+import { defineConfig } from 'astro/config';
+
+export default defineConfig({
+  // ...
+  experimental: {
+    session: false,
+  },
+});
+```
+Check out the [sessions guide](https://docs.astro.build/en/guides/sessions/) to learn more about how to use them in your Astro project.
+
+## SVG Components
+
+Astro now supports local SVG files as components! Inlining SVGs directly into your HTML had previously required extra steps like manually converting the SVG to an Astro component or installing a third-party integration. Now, Astro supports using the default import of any `.svg` file as you would use any other `.astro` component. SVG components automatically inline an `<svg>` tag directly into your HTML.
+
+You can pass props such as `width`, `height`, `fill`, `stroke`, and any other attribute accepted by the [native `<svg>` element](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg). 
+
+```astro title="src/components/MyAstroComponent.astro"
+---
+import Logo from './path/to/svg/file.svg';
+---
+
+<Logo width={64} height={64} fill="currentColor" />
+```
+
+Take a look at [the SVG components documentation](https://docs.astro.build/en/guides/images#svg-components) for more details.
+
+Special thanks to [Michael Stramel](https://github.com/stramel) for his work on this feature!
+
+### Upgrading from experimental SVG
+
+If you were previously using the experimental SVG API, you must remove the experimental flag from your `astro.config.mjs` file.
+
+```js title="astro.config.mjs" del={6}
+import { defineConfig } from 'astro/config';
+
+export default defineConfig({
+  // ...
+  experimental: {
+    svg: true,
+  },
+});
+```
+
+Note that [Astro 5.6](/blog/astro-560) introduced [some breaking changes to this flag](/blog/astro-560/#breaking-changes-to-the-experimental-svg-api). Please check that your code is up-to-date with the latest, stable version of this API.
+
+## Config Imports
+
+The new virtual module `astro:config` is now stable!
+
+The virtual module allows you to import a subset of the Astro configuration, with type-safety in mind. Two sub-paths are exposed for controlled access to your configuration:
+
+- `astro:config/client`: exposes config information that is safe to expose to the client.
+- `astro:config/server`: exposes additional information that is safe to expose to the server, such as file/dir paths.
+
+For example, you can now build your own path utilities without relying on an integration. Properties like `base` and `trailingSlash` set in your configuration can be imported and used in a `.js` file:
+
+```js title="astro.config.mjs"
+export default defineConfig({
+    base: "store/",
+    trailingSlash: "always"
+});
+```
+
+```js title="src/utils.js"
+import { trailingSlash, base } from 'astro:config/client';
+
+// This method adds a forward slash to paths, and prepends the `base`
+function addForwardSlashAndBase(path) {
+    let finalPath;
+    if (trailingSlash === 'always') {
+      finalPath = path.endsWith('/') ? path : path + '/';
+    } else {
+      finalPath = path;
+    }
+    if (base !== "/") {
+        return base + finalPath
+    }
+    return finalPath
+}
+```
+
+Use this path utility that depends on your configuration settings throughout your project, for example, for more control over page links: 
+```astro title="src/pages/index.astro"
+---
+import { addForwardSlashAndBase } from "@src/utils.js";
+
+const cartUrl = addForwardSlashAndBase("cart"); // it will return "store/cart/"
+---
+
+<a href={cartUrl}>Cart</a>
+```
+
+We `config`ured you'd enjoy this new ability to access your settings, with Astro's trademark type safety to help you get it right!
+## Bug fixes
+
+As always, we've been working hard on fixing issues since the [5.6 release](/blog/astro-560). See [the changelog](https://github.com/withastro/astro/blob/main/packages/astro/CHANGELOG.md) for all the details.
+
+## Community
+
+The Astro core team is:
+
+<Mention name="ben" />, <Mention name="caleb" />, <Mention name="chris" />, <Mention name="ema" />, <Mention name="erika" />, <Mention name="florian" />, <Mention name="fuzzy" />, <Mention name="hideoo" />, <Mention name="luiz" />, <Mention name="matt" />, <Mention name="matthew" />, <Mention name="nate" />, <Mention name="reuben" />, <Mention name="sarah" />, and <Mention name="yan" />.
+
+Thanks to all the other contributors who helped make Astro 5.7 possible, including: [Roberto Molina](https://github.com/robertoms99), [Junseong Park](https://github.com/jsparkdev), [ryu](https://github.com/ryuapp), [Martin Trapp](https://github.com/martrapp), [Michael Stramel](https://github.com/stramel), [Armand Philippot](https://github.com/ArmandPhilippot), [Nin3](https://github.com/Nin3lee), [viniciusdeliz](https://github.com/viniciusdeliz), [Juan Diaz](https://github.com/JuanPabloDiaz), [Marcos Corrochano Arroyo](https://github.com/drixswe), [Paul Valladares](https://github.com/dreyfus92), [Bugo](https://github.com/dragomano), [liruifengv](https://github.com/liruifengv), [Thomas Bonnet](https://github.com/thomasbnt), [Ming-jun Lu](https://github.com/mingjunlu), [CHEZ](https://github.com/choonse), [omoyx](https://github.com/omoyx), [emily-shen](https://github.com/emily-shen), [Ariel K](https://github.com/anaxite), [Maciek Palmowski](https://github.com/palmiak), [Matthew Justice](https://github.com/justicematthew), [Adam Matthiesen](https://github.com/Adammatthiesen), and [Louis Escher](https://github.com/louisescher).
+
+We look forward to seeing what you build with Astro 5.7! If you have questions, comments, or just want to say hi, drop by the [Astro Discord](https://astro.build/chat).
+
+import RelatedPosts from './_components/RelatedPosts.astro';
+
+<RelatedPosts slugs={['astro-560', 'astro-550']} />


Reviews:
user: login: sarah11918
body: Review only for `astro:config` section, with some tiny fixes and thoughts!
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-04-09T14:46:55Z
user: login: sarah11918
body: Just some tiny Sessions comments! Looking great! 💪 
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-04-09T15:35:51Z
user: login: ascorbic
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-10T12:56:01Z
user: login: florian-lefebvre
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-04-10T16:26:03Z
user: login: sarah11918
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-04-10T16:40:03Z
user: login: sarah11918
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-04-10T16:50:18Z
user: login: florian-lefebvre
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-04-10T16:55:34Z
user: login: sarah11918
body: Just a couple of thoughts here on the Fonts section, Florian!
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-04-10T18:17:48Z
user: login: florian-lefebvre
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-04-10T18:47:29Z
user: login: sarah11918
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-04-11T01:31:58Z
user: login: sarah11918
body: Review for SVG section:

Looks great, @natemoo-re ! I made a commit directly so I could reorder some things for flow, to break up sentences with links etc. but didn't change anything of substance. Please feel free to check and comment as necessary!

The only other comment I have is that the first sentence is so excited and exciting! You can now use SVG as components in Astro! Then it goes *right* into usage, and I'm wondering if there's even one more sentence you can say first about *why* this is cool, helpful, convenient...

Comment below, but again, completely optional!
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-04-13T12:12:13Z
user: login: sarah11918
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-04-13T13:31:10Z
user: login: sarah11918
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-04-14T20:20:03Z
user: login: sarah11918
body: Aproooooove!
state: APPROVED
author_association: MEMBER
submitted_at: 2025-04-14T21:04:20Z
user: login: yanthomasdev
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-04-14T21:26:04Z
user: login: ascorbic
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-14T21:55:17Z
user: login: sarah11918
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-04-14T23:18:33Z

Review comments:
diff_hunk: @@ -0,0 +1,235 @@
+---
+title: 'Astro 5.7'
+description: 'Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.'
+homepageLink:
+  title: 'Astro 5.7'
+  subtitle: 'Available now!'
+publishDate: '2025-04-15'
+authors:
+  - matt
+  - florian
+  - ema
+  - nate
+coverImage: '/src/content/blog/_images/astro-570/blog-post-5-7.webp'
+socialImage: '/src/content/blog/_images/astro-570/og-astro-5-7.webp'
+lang: 'en'
+---
+
+import BlogContentImage from '/src/components/BlogContentImage.astro';
+import Note from '~/components/Note.astro';
+import Mention from '/src/components/Mention.astro';
+
+**Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.**
+
+🐣 Full of the joys of northern-hemisphere spring, Astro 5.7 is here with goodies galore:
+
+- [**Experimental Fonts API**](#experimental-fonts-api)
+- [**Sessions API**](#sessions-api)
+- [**SVG Components**](#svg-components)
+- [**Config Imports**](#config-imports)
+
+To upgrade an existing project, use the automated `@astrojs/upgrade` CLI tool. Alternatively, upgrade manually by running the upgrade command for your package manager:
+
+```sh
+# Recommended:
+npx @astrojs/upgrade
+
+# Manual:
+npm install astro@latest
+pnpm upgrade astro --latest
+yarn upgrade astro --latest
+```
+
+## Experimental Fonts API
+
+...
+
+## Sessions API
+
+The Astro Sessions API is now stable and ready for production!
+
+Sessions let you securely store data tied to a specific user as they navigate between pages on your site. Unlike cookies, sessions are stored on the server, so you can store larger amounts of data without worrying about size limits or security issues. They are useful for storing things like user data, shopping carts, and form state, and they work without any client-side JavaScript:
+
+
+```astro title="src/components/CartButton.astro" {2}
+---
+const cart = await Astro.session.get('cart');
+export const prerender = false;
+---
+
+<a href="/checkout">🛒 {cart?.length ?? 0} items</a>
+```
+
+They can be used in Astro components, pages, API endpoints, actions, and middleware. The API is the same for all of them:
+
+```ts title="src/actions/addToCart.ts" {9,10}
+import { defineAction } from "astro:actions";
+import { z } from "astro:schema";
+export const server = {
+  addToCart: defineAction({
+    input: z.object({
+      product: z.string(),
+    }),
+    async handler({ product }, { session }) {
+      const cart = await session.get('cart');
+      session.set('cart', [...cart, product]);
+    },
+  }),
+};
+```
+
+### Type-safety
+
+Of course, as this is Astro, your sessions can be type-safe too. Define an interface and you will get type-checking and auto-completion for all of your session data:
+
+
+```ts title="src/env.d.ts"
+declare namespace App {
+  interface SessionData {
+    user: {
+      id: string;
+      name: string;
+    };
+    cart: string[];
+  }
+}
+```
+
+### Cookie-less sessions
+
+The session ID is automatically tracked using a cookie, but you can also use them without cookies by using the `session.load()` method. This is useful for things like APIs, where you might want to use a custom header or params to track the session ID:
+
+```ts title="src/pages/api/cart.ts" "session.load(sessionId)"
+export async function POST({ session, request }: APIContext) {
+  const sessionId = request.headers.get('x-session-id');
+
+  // If there is an existing session ID, load it. Otherwise one will be created
+  if (sessionId) {
+    await session.load(sessionId);
+  } 
+
+  const cart = await session.get('cart');
+  const data = await request.json<{ item: string }>();
+
+  if (!data?.item) {
+    return new Response('Item is required', { status: 400 });
+  }
+  session.set('cart', [...cart, data.item]);
+  // Return the cart and session ID
+  return Response.json({ cart, sessionId: session.sessionId });
+}
+```
+
+
+### Storage drivers
+
+Astro sessions use storage drivers to persist the data, and these are either zero-config or require minimal setup for all official Astro adapters. Alternatively you can use any [unstorage](https://unstorage.unjs.io/) driver, which supports dozens of storage backends such as Redis and MongoDB.
+
+- **[Node](https://docs.astro.build/en/guides/integrations-guide/node/#sessions)**: zero-config filesystem driver
+- **[Netlify](https://docs.astro.build/en/guides/integrations-guide/netlify/#sessions)**: zero-config Netlify Blobs driver
+- **[Cloudflare](https://docs.astro.build/en/guides/integrations-guide/cloudflare/#sessions)**: minimal-config Workers KV driver
+- **[Vercel](https://docs.astro.build/en/guides/integrations-guide/vercel/#sessions)**: minimal-config Redis/Upstash driver
+
+On any of these platforms you can easily switch out the driver for a different one if you don't want to use the default.
+
+```js title="astro.config.mjs" {5-10}
+import { defineConfig } from 'astro/config';
+
+export default defineConfig({
+  // ...
+  session: {
+    driver: 'redis',
+    options: {
+      url: process.env.REDIS_URL,
+    },
+  },
+});
+
+```
+
+### Upgrading from experimental sessions
+
+If you were using the experimental sessions API, you should remove the experimental flag from your `astro.config.mjs` file:
+
+```js title="astro.config.mjs" del={6}
+import { defineConfig } from 'astro/config';
+
+export default defineConfig({
+  // ...
+  experimental: {
+    session: false,
+  },
+});
+```
+Check out the [sessions guide](https://docs.astro.build/en/guides/sessions/) to learn more about how to use them in your Astro project.
+
+## SVG Components
+
+...
+
+## Config Imports
+
+The new virtual module `astro:config` is now stable!
+
+The virtual module allows to import a subset of the Astro configuration, with type-safety in mind. Two sub-paths are exposed for controlled access to your configuration:
path: src/content/blog/astro-570.mdx
user: login: sarah11918
body: ```suggestion
The virtual module allows you to import a subset of the Astro configuration, with type-safety in mind. Two sub-paths are exposed for controlled access to your configuration:
```
created_at: 2025-04-09T14:31:20Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,235 @@
+---
+title: 'Astro 5.7'
+description: 'Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.'
+homepageLink:
+  title: 'Astro 5.7'
+  subtitle: 'Available now!'
+publishDate: '2025-04-15'
+authors:
+  - matt
+  - florian
+  - ema
+  - nate
+coverImage: '/src/content/blog/_images/astro-570/blog-post-5-7.webp'
+socialImage: '/src/content/blog/_images/astro-570/og-astro-5-7.webp'
+lang: 'en'
+---
+
+import BlogContentImage from '/src/components/BlogContentImage.astro';
+import Note from '~/components/Note.astro';
+import Mention from '/src/components/Mention.astro';
+
+**Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.**
+
+🐣 Full of the joys of northern-hemisphere spring, Astro 5.7 is here with goodies galore:
+
+- [**Experimental Fonts API**](#experimental-fonts-api)
+- [**Sessions API**](#sessions-api)
+- [**SVG Components**](#svg-components)
+- [**Config Imports**](#config-imports)
+
+To upgrade an existing project, use the automated `@astrojs/upgrade` CLI tool. Alternatively, upgrade manually by running the upgrade command for your package manager:
+
+```sh
+# Recommended:
+npx @astrojs/upgrade
+
+# Manual:
+npm install astro@latest
+pnpm upgrade astro --latest
+yarn upgrade astro --latest
+```
+
+## Experimental Fonts API
+
+...
+
+## Sessions API
+
+The Astro Sessions API is now stable and ready for production!
+
+Sessions let you securely store data tied to a specific user as they navigate between pages on your site. Unlike cookies, sessions are stored on the server, so you can store larger amounts of data without worrying about size limits or security issues. They are useful for storing things like user data, shopping carts, and form state, and they work without any client-side JavaScript:
+
+
+```astro title="src/components/CartButton.astro" {2}
+---
+const cart = await Astro.session.get('cart');
+export const prerender = false;
+---
+
+<a href="/checkout">🛒 {cart?.length ?? 0} items</a>
+```
+
+They can be used in Astro components, pages, API endpoints, actions, and middleware. The API is the same for all of them:
+
+```ts title="src/actions/addToCart.ts" {9,10}
+import { defineAction } from "astro:actions";
+import { z } from "astro:schema";
+export const server = {
+  addToCart: defineAction({
+    input: z.object({
+      product: z.string(),
+    }),
+    async handler({ product }, { session }) {
+      const cart = await session.get('cart');
+      session.set('cart', [...cart, product]);
+    },
+  }),
+};
+```
+
+### Type-safety
+
+Of course, as this is Astro, your sessions can be type-safe too. Define an interface and you will get type-checking and auto-completion for all of your session data:
+
+
+```ts title="src/env.d.ts"
+declare namespace App {
+  interface SessionData {
+    user: {
+      id: string;
+      name: string;
+    };
+    cart: string[];
+  }
+}
+```
+
+### Cookie-less sessions
+
+The session ID is automatically tracked using a cookie, but you can also use them without cookies by using the `session.load()` method. This is useful for things like APIs, where you might want to use a custom header or params to track the session ID:
+
+```ts title="src/pages/api/cart.ts" "session.load(sessionId)"
+export async function POST({ session, request }: APIContext) {
+  const sessionId = request.headers.get('x-session-id');
+
+  // If there is an existing session ID, load it. Otherwise one will be created
+  if (sessionId) {
+    await session.load(sessionId);
+  } 
+
+  const cart = await session.get('cart');
+  const data = await request.json<{ item: string }>();
+
+  if (!data?.item) {
+    return new Response('Item is required', { status: 400 });
+  }
+  session.set('cart', [...cart, data.item]);
+  // Return the cart and session ID
+  return Response.json({ cart, sessionId: session.sessionId });
+}
+```
+
+
+### Storage drivers
+
+Astro sessions use storage drivers to persist the data, and these are either zero-config or require minimal setup for all official Astro adapters. Alternatively you can use any [unstorage](https://unstorage.unjs.io/) driver, which supports dozens of storage backends such as Redis and MongoDB.
+
+- **[Node](https://docs.astro.build/en/guides/integrations-guide/node/#sessions)**: zero-config filesystem driver
+- **[Netlify](https://docs.astro.build/en/guides/integrations-guide/netlify/#sessions)**: zero-config Netlify Blobs driver
+- **[Cloudflare](https://docs.astro.build/en/guides/integrations-guide/cloudflare/#sessions)**: minimal-config Workers KV driver
+- **[Vercel](https://docs.astro.build/en/guides/integrations-guide/vercel/#sessions)**: minimal-config Redis/Upstash driver
+
+On any of these platforms you can easily switch out the driver for a different one if you don't want to use the default.
+
+```js title="astro.config.mjs" {5-10}
+import { defineConfig } from 'astro/config';
+
+export default defineConfig({
+  // ...
+  session: {
+    driver: 'redis',
+    options: {
+      url: process.env.REDIS_URL,
+    },
+  },
+});
+
+```
+
+### Upgrading from experimental sessions
+
+If you were using the experimental sessions API, you should remove the experimental flag from your `astro.config.mjs` file:
+
+```js title="astro.config.mjs" del={6}
+import { defineConfig } from 'astro/config';
+
+export default defineConfig({
+  // ...
+  experimental: {
+    session: false,
+  },
+});
+```
+Check out the [sessions guide](https://docs.astro.build/en/guides/sessions/) to learn more about how to use them in your Astro project.
+
+## SVG Components
+
+...
+
+## Config Imports
+
+The new virtual module `astro:config` is now stable!
+
+The virtual module allows to import a subset of the Astro configuration, with type-safety in mind. Two sub-paths are exposed for controlled access to your configuration:
+
+- `astro:config/client`: exposes config information that is safe to expose to the client.
+- `astro:config/server`: exposes additional information that is safe to expose to the server, such as file/dir paths.
+
+For example, you can now build your own path utilities without relying on an integrations:
+
+```js title="astro.config.mjs"
+// astro.config.mjs
+export default defineConfig({
+    base: "store/",
+    trailingSlash: "always"
+})
+```
+
+```js title="src/utils.js"
+// src/utils.js
path: src/content/blog/astro-570.mdx
user: login: sarah11918
body: ``````suggestion
export default defineConfig({
    base: "store/",
    trailingSlash: "always"
})
```

```js title="src/utils.js"
``````
We don't need these anymore, since the `title` prop now creates a frame in Expressive Code with Chris's latest update!

(They were duplicating in the preview
![Screenshot 2025-04-09 11 32 14](https://github.com/user-attachments/assets/e4a1bcf2-f3db-461c-a1c8-af1cde69b7c4)

created_at: 2025-04-09T14:34:42Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,235 @@
+---
+title: 'Astro 5.7'
+description: 'Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.'
+homepageLink:
+  title: 'Astro 5.7'
+  subtitle: 'Available now!'
+publishDate: '2025-04-15'
+authors:
+  - matt
+  - florian
+  - ema
+  - nate
+coverImage: '/src/content/blog/_images/astro-570/blog-post-5-7.webp'
+socialImage: '/src/content/blog/_images/astro-570/og-astro-5-7.webp'
+lang: 'en'
+---
+
+import BlogContentImage from '/src/components/BlogContentImage.astro';
+import Note from '~/components/Note.astro';
+import Mention from '/src/components/Mention.astro';
+
+**Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.**
+
+🐣 Full of the joys of northern-hemisphere spring, Astro 5.7 is here with goodies galore:
+
+- [**Experimental Fonts API**](#experimental-fonts-api)
+- [**Sessions API**](#sessions-api)
+- [**SVG Components**](#svg-components)
+- [**Config Imports**](#config-imports)
+
+To upgrade an existing project, use the automated `@astrojs/upgrade` CLI tool. Alternatively, upgrade manually by running the upgrade command for your package manager:
+
+```sh
+# Recommended:
+npx @astrojs/upgrade
+
+# Manual:
+npm install astro@latest
+pnpm upgrade astro --latest
+yarn upgrade astro --latest
+```
+
+## Experimental Fonts API
+
+...
+
+## Sessions API
+
+The Astro Sessions API is now stable and ready for production!
+
+Sessions let you securely store data tied to a specific user as they navigate between pages on your site. Unlike cookies, sessions are stored on the server, so you can store larger amounts of data without worrying about size limits or security issues. They are useful for storing things like user data, shopping carts, and form state, and they work without any client-side JavaScript:
+
+
+```astro title="src/components/CartButton.astro" {2}
+---
+const cart = await Astro.session.get('cart');
+export const prerender = false;
+---
+
+<a href="/checkout">🛒 {cart?.length ?? 0} items</a>
+```
+
+They can be used in Astro components, pages, API endpoints, actions, and middleware. The API is the same for all of them:
+
+```ts title="src/actions/addToCart.ts" {9,10}
+import { defineAction } from "astro:actions";
+import { z } from "astro:schema";
+export const server = {
+  addToCart: defineAction({
+    input: z.object({
+      product: z.string(),
+    }),
+    async handler({ product }, { session }) {
+      const cart = await session.get('cart');
+      session.set('cart', [...cart, product]);
+    },
+  }),
+};
+```
+
+### Type-safety
+
+Of course, as this is Astro, your sessions can be type-safe too. Define an interface and you will get type-checking and auto-completion for all of your session data:
+
+
+```ts title="src/env.d.ts"
+declare namespace App {
+  interface SessionData {
+    user: {
+      id: string;
+      name: string;
+    };
+    cart: string[];
+  }
+}
+```
+
+### Cookie-less sessions
+
+The session ID is automatically tracked using a cookie, but you can also use them without cookies by using the `session.load()` method. This is useful for things like APIs, where you might want to use a custom header or params to track the session ID:
+
+```ts title="src/pages/api/cart.ts" "session.load(sessionId)"
+export async function POST({ session, request }: APIContext) {
+  const sessionId = request.headers.get('x-session-id');
+
+  // If there is an existing session ID, load it. Otherwise one will be created
+  if (sessionId) {
+    await session.load(sessionId);
+  } 
+
+  const cart = await session.get('cart');
+  const data = await request.json<{ item: string }>();
+
+  if (!data?.item) {
+    return new Response('Item is required', { status: 400 });
+  }
+  session.set('cart', [...cart, data.item]);
+  // Return the cart and session ID
+  return Response.json({ cart, sessionId: session.sessionId });
+}
+```
+
+
+### Storage drivers
+
+Astro sessions use storage drivers to persist the data, and these are either zero-config or require minimal setup for all official Astro adapters. Alternatively you can use any [unstorage](https://unstorage.unjs.io/) driver, which supports dozens of storage backends such as Redis and MongoDB.
+
+- **[Node](https://docs.astro.build/en/guides/integrations-guide/node/#sessions)**: zero-config filesystem driver
+- **[Netlify](https://docs.astro.build/en/guides/integrations-guide/netlify/#sessions)**: zero-config Netlify Blobs driver
+- **[Cloudflare](https://docs.astro.build/en/guides/integrations-guide/cloudflare/#sessions)**: minimal-config Workers KV driver
+- **[Vercel](https://docs.astro.build/en/guides/integrations-guide/vercel/#sessions)**: minimal-config Redis/Upstash driver
+
+On any of these platforms you can easily switch out the driver for a different one if you don't want to use the default.
+
+```js title="astro.config.mjs" {5-10}
+import { defineConfig } from 'astro/config';
+
+export default defineConfig({
+  // ...
+  session: {
+    driver: 'redis',
+    options: {
+      url: process.env.REDIS_URL,
+    },
+  },
+});
+
+```
+
+### Upgrading from experimental sessions
+
+If you were using the experimental sessions API, you should remove the experimental flag from your `astro.config.mjs` file:
+
+```js title="astro.config.mjs" del={6}
+import { defineConfig } from 'astro/config';
+
+export default defineConfig({
+  // ...
+  experimental: {
+    session: false,
+  },
+});
+```
+Check out the [sessions guide](https://docs.astro.build/en/guides/sessions/) to learn more about how to use them in your Astro project.
+
+## SVG Components
+
+...
+
+## Config Imports
+
+The new virtual module `astro:config` is now stable!
+
+The virtual module allows to import a subset of the Astro configuration, with type-safety in mind. Two sub-paths are exposed for controlled access to your configuration:
+
+- `astro:config/client`: exposes config information that is safe to expose to the client.
+- `astro:config/server`: exposes additional information that is safe to expose to the server, such as file/dir paths.
+
+For example, you can now build your own path utilities without relying on an integrations:
+
+```js title="astro.config.mjs"
+// astro.config.mjs
+export default defineConfig({
+    base: "store/",
+    trailingSlash: "always"
+})
+```
+
+```js title="src/utils.js"
+// src/utils.js
+import { trailingSlash, base } from 'astro:config/client';
+
+// This method adds a forwards slash to paths, and prepends the `base`
+function addForwardSlashAndBase(path) {
+    let finalPath;
+    if (trailingSlash === 'always') {
+      finalPath = path.endsWith('/') ? path : path + '/';
+    } else {
+      finalPath = path;
+    }
+    if (base !== "/") {
+        return base + finalPath
+    }
+    return finalPath
+}
+```
+
+```astro title="src/pages/index.astro"
+---
+// src/pages/index.astro
path: src/content/blog/astro-570.mdx
user: login: sarah11918
body: ```suggestion
```
created_at: 2025-04-09T14:35:42Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,235 @@
+---
+title: 'Astro 5.7'
+description: 'Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.'
+homepageLink:
+  title: 'Astro 5.7'
+  subtitle: 'Available now!'
+publishDate: '2025-04-15'
+authors:
+  - matt
+  - florian
+  - ema
+  - nate
+coverImage: '/src/content/blog/_images/astro-570/blog-post-5-7.webp'
+socialImage: '/src/content/blog/_images/astro-570/og-astro-5-7.webp'
+lang: 'en'
+---
+
+import BlogContentImage from '/src/components/BlogContentImage.astro';
+import Note from '~/components/Note.astro';
+import Mention from '/src/components/Mention.astro';
+
+**Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.**
+
+🐣 Full of the joys of northern-hemisphere spring, Astro 5.7 is here with goodies galore:
+
+- [**Experimental Fonts API**](#experimental-fonts-api)
+- [**Sessions API**](#sessions-api)
+- [**SVG Components**](#svg-components)
+- [**Config Imports**](#config-imports)
+
+To upgrade an existing project, use the automated `@astrojs/upgrade` CLI tool. Alternatively, upgrade manually by running the upgrade command for your package manager:
+
+```sh
+# Recommended:
+npx @astrojs/upgrade
+
+# Manual:
+npm install astro@latest
+pnpm upgrade astro --latest
+yarn upgrade astro --latest
+```
+
+## Experimental Fonts API
+
+...
+
+## Sessions API
+
+The Astro Sessions API is now stable and ready for production!
+
+Sessions let you securely store data tied to a specific user as they navigate between pages on your site. Unlike cookies, sessions are stored on the server, so you can store larger amounts of data without worrying about size limits or security issues. They are useful for storing things like user data, shopping carts, and form state, and they work without any client-side JavaScript:
+
+
+```astro title="src/components/CartButton.astro" {2}
+---
+const cart = await Astro.session.get('cart');
+export const prerender = false;
+---
+
+<a href="/checkout">🛒 {cart?.length ?? 0} items</a>
+```
+
+They can be used in Astro components, pages, API endpoints, actions, and middleware. The API is the same for all of them:
+
+```ts title="src/actions/addToCart.ts" {9,10}
+import { defineAction } from "astro:actions";
+import { z } from "astro:schema";
+export const server = {
+  addToCart: defineAction({
+    input: z.object({
+      product: z.string(),
+    }),
+    async handler({ product }, { session }) {
+      const cart = await session.get('cart');
+      session.set('cart', [...cart, product]);
+    },
+  }),
+};
+```
+
+### Type-safety
+
+Of course, as this is Astro, your sessions can be type-safe too. Define an interface and you will get type-checking and auto-completion for all of your session data:
+
+
+```ts title="src/env.d.ts"
+declare namespace App {
+  interface SessionData {
+    user: {
+      id: string;
+      name: string;
+    };
+    cart: string[];
+  }
+}
+```
+
+### Cookie-less sessions
+
+The session ID is automatically tracked using a cookie, but you can also use them without cookies by using the `session.load()` method. This is useful for things like APIs, where you might want to use a custom header or params to track the session ID:
+
+```ts title="src/pages/api/cart.ts" "session.load(sessionId)"
+export async function POST({ session, request }: APIContext) {
+  const sessionId = request.headers.get('x-session-id');
+
+  // If there is an existing session ID, load it. Otherwise one will be created
+  if (sessionId) {
+    await session.load(sessionId);
+  } 
+
+  const cart = await session.get('cart');
+  const data = await request.json<{ item: string }>();
+
+  if (!data?.item) {
+    return new Response('Item is required', { status: 400 });
+  }
+  session.set('cart', [...cart, data.item]);
+  // Return the cart and session ID
+  return Response.json({ cart, sessionId: session.sessionId });
+}
+```
+
+
+### Storage drivers
+
+Astro sessions use storage drivers to persist the data, and these are either zero-config or require minimal setup for all official Astro adapters. Alternatively you can use any [unstorage](https://unstorage.unjs.io/) driver, which supports dozens of storage backends such as Redis and MongoDB.
+
+- **[Node](https://docs.astro.build/en/guides/integrations-guide/node/#sessions)**: zero-config filesystem driver
+- **[Netlify](https://docs.astro.build/en/guides/integrations-guide/netlify/#sessions)**: zero-config Netlify Blobs driver
+- **[Cloudflare](https://docs.astro.build/en/guides/integrations-guide/cloudflare/#sessions)**: minimal-config Workers KV driver
+- **[Vercel](https://docs.astro.build/en/guides/integrations-guide/vercel/#sessions)**: minimal-config Redis/Upstash driver
+
+On any of these platforms you can easily switch out the driver for a different one if you don't want to use the default.
+
+```js title="astro.config.mjs" {5-10}
+import { defineConfig } from 'astro/config';
+
+export default defineConfig({
+  // ...
+  session: {
+    driver: 'redis',
+    options: {
+      url: process.env.REDIS_URL,
+    },
+  },
+});
+
+```
+
+### Upgrading from experimental sessions
+
+If you were using the experimental sessions API, you should remove the experimental flag from your `astro.config.mjs` file:
+
+```js title="astro.config.mjs" del={6}
+import { defineConfig } from 'astro/config';
+
+export default defineConfig({
+  // ...
+  experimental: {
+    session: false,
+  },
+});
+```
+Check out the [sessions guide](https://docs.astro.build/en/guides/sessions/) to learn more about how to use them in your Astro project.
+
+## SVG Components
+
+...
+
+## Config Imports
+
+The new virtual module `astro:config` is now stable!
+
+The virtual module allows to import a subset of the Astro configuration, with type-safety in mind. Two sub-paths are exposed for controlled access to your configuration:
+
+- `astro:config/client`: exposes config information that is safe to expose to the client.
+- `astro:config/server`: exposes additional information that is safe to expose to the server, such as file/dir paths.
+
+For example, you can now build your own path utilities without relying on an integrations:
path: src/content/blog/astro-570.mdx
user: login: sarah11918
body: ```suggestion
For example, you can now build your own path utilities without relying on an integration. Properties like `base` and `trailingSlash` set in your configuration can be imported and used in a `.js` file:
```
It just seemed like a long string of code samples without any indication what is happening, so I'm adding something to break them up.
created_at: 2025-04-09T14:39:12Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,235 @@
+---
+title: 'Astro 5.7'
+description: 'Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.'
+homepageLink:
+  title: 'Astro 5.7'
+  subtitle: 'Available now!'
+publishDate: '2025-04-15'
+authors:
+  - matt
+  - florian
+  - ema
+  - nate
+coverImage: '/src/content/blog/_images/astro-570/blog-post-5-7.webp'
+socialImage: '/src/content/blog/_images/astro-570/og-astro-5-7.webp'
+lang: 'en'
+---
+
+import BlogContentImage from '/src/components/BlogContentImage.astro';
+import Note from '~/components/Note.astro';
+import Mention from '/src/components/Mention.astro';
+
+**Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.**
+
+🐣 Full of the joys of northern-hemisphere spring, Astro 5.7 is here with goodies galore:
+
+- [**Experimental Fonts API**](#experimental-fonts-api)
+- [**Sessions API**](#sessions-api)
+- [**SVG Components**](#svg-components)
+- [**Config Imports**](#config-imports)
+
+To upgrade an existing project, use the automated `@astrojs/upgrade` CLI tool. Alternatively, upgrade manually by running the upgrade command for your package manager:
+
+```sh
+# Recommended:
+npx @astrojs/upgrade
+
+# Manual:
+npm install astro@latest
+pnpm upgrade astro --latest
+yarn upgrade astro --latest
+```
+
+## Experimental Fonts API
+
+...
+
+## Sessions API
+
+The Astro Sessions API is now stable and ready for production!
+
+Sessions let you securely store data tied to a specific user as they navigate between pages on your site. Unlike cookies, sessions are stored on the server, so you can store larger amounts of data without worrying about size limits or security issues. They are useful for storing things like user data, shopping carts, and form state, and they work without any client-side JavaScript:
+
+
+```astro title="src/components/CartButton.astro" {2}
+---
+const cart = await Astro.session.get('cart');
+export const prerender = false;
+---
+
+<a href="/checkout">🛒 {cart?.length ?? 0} items</a>
+```
+
+They can be used in Astro components, pages, API endpoints, actions, and middleware. The API is the same for all of them:
+
+```ts title="src/actions/addToCart.ts" {9,10}
+import { defineAction } from "astro:actions";
+import { z } from "astro:schema";
+export const server = {
+  addToCart: defineAction({
+    input: z.object({
+      product: z.string(),
+    }),
+    async handler({ product }, { session }) {
+      const cart = await session.get('cart');
+      session.set('cart', [...cart, product]);
+    },
+  }),
+};
+```
+
+### Type-safety
+
+Of course, as this is Astro, your sessions can be type-safe too. Define an interface and you will get type-checking and auto-completion for all of your session data:
+
+
+```ts title="src/env.d.ts"
+declare namespace App {
+  interface SessionData {
+    user: {
+      id: string;
+      name: string;
+    };
+    cart: string[];
+  }
+}
+```
+
+### Cookie-less sessions
+
+The session ID is automatically tracked using a cookie, but you can also use them without cookies by using the `session.load()` method. This is useful for things like APIs, where you might want to use a custom header or params to track the session ID:
+
+```ts title="src/pages/api/cart.ts" "session.load(sessionId)"
+export async function POST({ session, request }: APIContext) {
+  const sessionId = request.headers.get('x-session-id');
+
+  // If there is an existing session ID, load it. Otherwise one will be created
+  if (sessionId) {
+    await session.load(sessionId);
+  } 
+
+  const cart = await session.get('cart');
+  const data = await request.json<{ item: string }>();
+
+  if (!data?.item) {
+    return new Response('Item is required', { status: 400 });
+  }
+  session.set('cart', [...cart, data.item]);
+  // Return the cart and session ID
+  return Response.json({ cart, sessionId: session.sessionId });
+}
+```
+
+
+### Storage drivers
+
+Astro sessions use storage drivers to persist the data, and these are either zero-config or require minimal setup for all official Astro adapters. Alternatively you can use any [unstorage](https://unstorage.unjs.io/) driver, which supports dozens of storage backends such as Redis and MongoDB.
+
+- **[Node](https://docs.astro.build/en/guides/integrations-guide/node/#sessions)**: zero-config filesystem driver
+- **[Netlify](https://docs.astro.build/en/guides/integrations-guide/netlify/#sessions)**: zero-config Netlify Blobs driver
+- **[Cloudflare](https://docs.astro.build/en/guides/integrations-guide/cloudflare/#sessions)**: minimal-config Workers KV driver
+- **[Vercel](https://docs.astro.build/en/guides/integrations-guide/vercel/#sessions)**: minimal-config Redis/Upstash driver
+
+On any of these platforms you can easily switch out the driver for a different one if you don't want to use the default.
+
+```js title="astro.config.mjs" {5-10}
+import { defineConfig } from 'astro/config';
+
+export default defineConfig({
+  // ...
+  session: {
+    driver: 'redis',
+    options: {
+      url: process.env.REDIS_URL,
+    },
+  },
+});
+
+```
+
+### Upgrading from experimental sessions
+
+If you were using the experimental sessions API, you should remove the experimental flag from your `astro.config.mjs` file:
+
+```js title="astro.config.mjs" del={6}
+import { defineConfig } from 'astro/config';
+
+export default defineConfig({
+  // ...
+  experimental: {
+    session: false,
+  },
+});
+```
+Check out the [sessions guide](https://docs.astro.build/en/guides/sessions/) to learn more about how to use them in your Astro project.
+
+## SVG Components
+
+...
+
+## Config Imports
+
+The new virtual module `astro:config` is now stable!
+
+The virtual module allows to import a subset of the Astro configuration, with type-safety in mind. Two sub-paths are exposed for controlled access to your configuration:
+
+- `astro:config/client`: exposes config information that is safe to expose to the client.
+- `astro:config/server`: exposes additional information that is safe to expose to the server, such as file/dir paths.
+
+For example, you can now build your own path utilities without relying on an integrations:
+
+```js title="astro.config.mjs"
+// astro.config.mjs
+export default defineConfig({
+    base: "store/",
+    trailingSlash: "always"
+})
+```
+
+```js title="src/utils.js"
+// src/utils.js
+import { trailingSlash, base } from 'astro:config/client';
+
+// This method adds a forwards slash to paths, and prepends the `base`
+function addForwardSlashAndBase(path) {
+    let finalPath;
+    if (trailingSlash === 'always') {
+      finalPath = path.endsWith('/') ? path : path + '/';
+    } else {
+      finalPath = path;
+    }
+    if (base !== "/") {
+        return base + finalPath
+    }
+    return finalPath
+}
+```
+
path: src/content/blog/astro-570.mdx
user: login: sarah11918
body: ```suggestion

Use this path utility that depends on your configuration settings throughout your project, for example, for more control over page links: 
```
Just an idea for something to guide the reader a bit.
created_at: 2025-04-09T14:42:03Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,235 @@
+---
+title: 'Astro 5.7'
+description: 'Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.'
+homepageLink:
+  title: 'Astro 5.7'
+  subtitle: 'Available now!'
+publishDate: '2025-04-15'
+authors:
+  - matt
+  - florian
+  - ema
+  - nate
+coverImage: '/src/content/blog/_images/astro-570/blog-post-5-7.webp'
+socialImage: '/src/content/blog/_images/astro-570/og-astro-5-7.webp'
+lang: 'en'
+---
+
+import BlogContentImage from '/src/components/BlogContentImage.astro';
+import Note from '~/components/Note.astro';
+import Mention from '/src/components/Mention.astro';
+
+**Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.**
+
+🐣 Full of the joys of northern-hemisphere spring, Astro 5.7 is here with goodies galore:
+
+- [**Experimental Fonts API**](#experimental-fonts-api)
+- [**Sessions API**](#sessions-api)
+- [**SVG Components**](#svg-components)
+- [**Config Imports**](#config-imports)
+
+To upgrade an existing project, use the automated `@astrojs/upgrade` CLI tool. Alternatively, upgrade manually by running the upgrade command for your package manager:
+
+```sh
+# Recommended:
+npx @astrojs/upgrade
+
+# Manual:
+npm install astro@latest
+pnpm upgrade astro --latest
+yarn upgrade astro --latest
+```
+
+## Experimental Fonts API
+
+...
+
+## Sessions API
+
+The Astro Sessions API is now stable and ready for production!
+
+Sessions let you securely store data tied to a specific user as they navigate between pages on your site. Unlike cookies, sessions are stored on the server, so you can store larger amounts of data without worrying about size limits or security issues. They are useful for storing things like user data, shopping carts, and form state, and they work without any client-side JavaScript:
+
+
+```astro title="src/components/CartButton.astro" {2}
+---
+const cart = await Astro.session.get('cart');
+export const prerender = false;
+---
+
+<a href="/checkout">🛒 {cart?.length ?? 0} items</a>
+```
+
+They can be used in Astro components, pages, API endpoints, actions, and middleware. The API is the same for all of them:
+
+```ts title="src/actions/addToCart.ts" {9,10}
+import { defineAction } from "astro:actions";
+import { z } from "astro:schema";
+export const server = {
+  addToCart: defineAction({
+    input: z.object({
+      product: z.string(),
+    }),
+    async handler({ product }, { session }) {
+      const cart = await session.get('cart');
+      session.set('cart', [...cart, product]);
+    },
+  }),
+};
+```
+
+### Type-safety
+
+Of course, as this is Astro, your sessions can be type-safe too. Define an interface and you will get type-checking and auto-completion for all of your session data:
+
+
+```ts title="src/env.d.ts"
+declare namespace App {
+  interface SessionData {
+    user: {
+      id: string;
+      name: string;
+    };
+    cart: string[];
+  }
+}
+```
+
+### Cookie-less sessions
+
+The session ID is automatically tracked using a cookie, but you can also use them without cookies by using the `session.load()` method. This is useful for things like APIs, where you might want to use a custom header or params to track the session ID:
+
+```ts title="src/pages/api/cart.ts" "session.load(sessionId)"
+export async function POST({ session, request }: APIContext) {
+  const sessionId = request.headers.get('x-session-id');
+
+  // If there is an existing session ID, load it. Otherwise one will be created
+  if (sessionId) {
+    await session.load(sessionId);
+  } 
+
+  const cart = await session.get('cart');
+  const data = await request.json<{ item: string }>();
+
+  if (!data?.item) {
+    return new Response('Item is required', { status: 400 });
+  }
+  session.set('cart', [...cart, data.item]);
+  // Return the cart and session ID
+  return Response.json({ cart, sessionId: session.sessionId });
+}
+```
+
+
+### Storage drivers
+
+Astro sessions use storage drivers to persist the data, and these are either zero-config or require minimal setup for all official Astro adapters. Alternatively you can use any [unstorage](https://unstorage.unjs.io/) driver, which supports dozens of storage backends such as Redis and MongoDB.
+
+- **[Node](https://docs.astro.build/en/guides/integrations-guide/node/#sessions)**: zero-config filesystem driver
+- **[Netlify](https://docs.astro.build/en/guides/integrations-guide/netlify/#sessions)**: zero-config Netlify Blobs driver
+- **[Cloudflare](https://docs.astro.build/en/guides/integrations-guide/cloudflare/#sessions)**: minimal-config Workers KV driver
+- **[Vercel](https://docs.astro.build/en/guides/integrations-guide/vercel/#sessions)**: minimal-config Redis/Upstash driver
+
+On any of these platforms you can easily switch out the driver for a different one if you don't want to use the default.
+
+```js title="astro.config.mjs" {5-10}
+import { defineConfig } from 'astro/config';
+
+export default defineConfig({
+  // ...
+  session: {
+    driver: 'redis',
+    options: {
+      url: process.env.REDIS_URL,
+    },
+  },
+});
+
+```
+
+### Upgrading from experimental sessions
+
+If you were using the experimental sessions API, you should remove the experimental flag from your `astro.config.mjs` file:
+
+```js title="astro.config.mjs" del={6}
+import { defineConfig } from 'astro/config';
+
+export default defineConfig({
+  // ...
+  experimental: {
+    session: false,
+  },
+});
+```
+Check out the [sessions guide](https://docs.astro.build/en/guides/sessions/) to learn more about how to use them in your Astro project.
+
+## SVG Components
+
+...
+
+## Config Imports
+
+The new virtual module `astro:config` is now stable!
+
+The virtual module allows to import a subset of the Astro configuration, with type-safety in mind. Two sub-paths are exposed for controlled access to your configuration:
+
+- `astro:config/client`: exposes config information that is safe to expose to the client.
+- `astro:config/server`: exposes additional information that is safe to expose to the server, such as file/dir paths.
+
+For example, you can now build your own path utilities without relying on an integrations:
+
+```js title="astro.config.mjs"
+// astro.config.mjs
+export default defineConfig({
+    base: "store/",
+    trailingSlash: "always"
+})
+```
+
+```js title="src/utils.js"
+// src/utils.js
+import { trailingSlash, base } from 'astro:config/client';
+
+// This method adds a forwards slash to paths, and prepends the `base`
+function addForwardSlashAndBase(path) {
+    let finalPath;
+    if (trailingSlash === 'always') {
+      finalPath = path.endsWith('/') ? path : path + '/';
+    } else {
+      finalPath = path;
+    }
+    if (base !== "/") {
+        return base + finalPath
+    }
+    return finalPath
+}
+```
+
+```astro title="src/pages/index.astro"
+---
+// src/pages/index.astro
+import { addForwardSlashAndBase } from "@src/utils.js";
+
+const cartUrl = addForwardSlashAndBase("cart"); // it will return "store/cart/"
+---
+
+<a href={cartUrl}>Cart</a>
+```
+
path: src/content/blog/astro-570.mdx
user: login: sarah11918
body: ```suggestion

We `config`ured you'd enjoy this new ability to access your settings, with Astro's trademark type safety to help you get it right!
```
OK, doesn't HAVE to be a jokey sentence, but I think it might be nice to close this off with *something* about this being a requested feature, or we hope you enjoy it etc. Especially given it's the last entry, and it finished off with a lot of code samples. A conclusion of some sort would be nice here, I think.
created_at: 2025-04-09T14:46:20Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,235 @@
+---
+title: 'Astro 5.7'
+description: 'Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.'
+homepageLink:
+  title: 'Astro 5.7'
+  subtitle: 'Available now!'
+publishDate: '2025-04-15'
+authors:
+  - matt
+  - florian
+  - ema
+  - nate
+coverImage: '/src/content/blog/_images/astro-570/blog-post-5-7.webp'
+socialImage: '/src/content/blog/_images/astro-570/og-astro-5-7.webp'
+lang: 'en'
+---
+
+import BlogContentImage from '/src/components/BlogContentImage.astro';
+import Note from '~/components/Note.astro';
+import Mention from '/src/components/Mention.astro';
+
+**Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.**
+
+🐣 Full of the joys of northern-hemisphere spring, Astro 5.7 is here with goodies galore:
+
+- [**Experimental Fonts API**](#experimental-fonts-api)
+- [**Sessions API**](#sessions-api)
+- [**SVG Components**](#svg-components)
+- [**Config Imports**](#config-imports)
+
+To upgrade an existing project, use the automated `@astrojs/upgrade` CLI tool. Alternatively, upgrade manually by running the upgrade command for your package manager:
+
+```sh
+# Recommended:
+npx @astrojs/upgrade
+
+# Manual:
+npm install astro@latest
+pnpm upgrade astro --latest
+yarn upgrade astro --latest
+```
+
+## Experimental Fonts API
+
+...
+
+## Sessions API
+
+The Astro Sessions API is now stable and ready for production!
+
+Sessions let you securely store data tied to a specific user as they navigate between pages on your site. Unlike cookies, sessions are stored on the server, so you can store larger amounts of data without worrying about size limits or security issues. They are useful for storing things like user data, shopping carts, and form state, and they work without any client-side JavaScript:
+
+
+```astro title="src/components/CartButton.astro" {2}
+---
+const cart = await Astro.session.get('cart');
+export const prerender = false;
+---
+
+<a href="/checkout">🛒 {cart?.length ?? 0} items</a>
+```
+
+They can be used in Astro components, pages, API endpoints, actions, and middleware. The API is the same for all of them:
+
+```ts title="src/actions/addToCart.ts" {9,10}
+import { defineAction } from "astro:actions";
+import { z } from "astro:schema";
+export const server = {
+  addToCart: defineAction({
+    input: z.object({
+      product: z.string(),
+    }),
+    async handler({ product }, { session }) {
+      const cart = await session.get('cart');
+      session.set('cart', [...cart, product]);
+    },
+  }),
+};
+```
+
+### Type-safety
+
+Of course, as this is Astro, your sessions can be type-safe too. Define an interface and you will get type-checking and auto-completion for all of your session data:
+
+
+```ts title="src/env.d.ts"
+declare namespace App {
+  interface SessionData {
+    user: {
+      id: string;
+      name: string;
+    };
+    cart: string[];
+  }
+}
+```
+
+### Cookie-less sessions
+
+The session ID is automatically tracked using a cookie, but you can also use them without cookies by using the `session.load()` method. This is useful for things like APIs, where you might want to use a custom header or params to track the session ID:
path: src/content/blog/astro-570.mdx
user: login: sarah11918
body: ```suggestion
The session ID is automatically tracked using a cookie, but you can also refer to sessions without cookies by using the `session.load()` method. This is useful for things like APIs, where you might want to use a custom header or params to track the session ID:
```
refer to sessions?
call sessions?
load sessions?
access a session?

Just trying to avoid a double "use"/"using" here and being a bit more precise. Is there anything here that works?

Alternatively, something like:

> but you can instead use the `session.load()` method to (description of action here: refer to/access/identify...
created_at: 2025-04-09T15:30:27Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,235 @@
+---
+title: 'Astro 5.7'
+description: 'Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.'
+homepageLink:
+  title: 'Astro 5.7'
+  subtitle: 'Available now!'
+publishDate: '2025-04-15'
+authors:
+  - matt
+  - florian
+  - ema
+  - nate
+coverImage: '/src/content/blog/_images/astro-570/blog-post-5-7.webp'
+socialImage: '/src/content/blog/_images/astro-570/og-astro-5-7.webp'
+lang: 'en'
+---
+
+import BlogContentImage from '/src/components/BlogContentImage.astro';
+import Note from '~/components/Note.astro';
+import Mention from '/src/components/Mention.astro';
+
+**Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.**
+
+🐣 Full of the joys of northern-hemisphere spring, Astro 5.7 is here with goodies galore:
+
+- [**Experimental Fonts API**](#experimental-fonts-api)
+- [**Sessions API**](#sessions-api)
+- [**SVG Components**](#svg-components)
+- [**Config Imports**](#config-imports)
+
+To upgrade an existing project, use the automated `@astrojs/upgrade` CLI tool. Alternatively, upgrade manually by running the upgrade command for your package manager:
+
+```sh
+# Recommended:
+npx @astrojs/upgrade
+
+# Manual:
+npm install astro@latest
+pnpm upgrade astro --latest
+yarn upgrade astro --latest
+```
+
+## Experimental Fonts API
+
+...
+
+## Sessions API
+
+The Astro Sessions API is now stable and ready for production!
+
+Sessions let you securely store data tied to a specific user as they navigate between pages on your site. Unlike cookies, sessions are stored on the server, so you can store larger amounts of data without worrying about size limits or security issues. They are useful for storing things like user data, shopping carts, and form state, and they work without any client-side JavaScript:
path: src/content/blog/astro-570.mdx
user: login: sarah11918
body: This is a great paragraph, and I've updated docs with some of this exact wording! 🚀 
created_at: 2025-04-09T15:30:50Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,235 @@
+---
+title: 'Astro 5.7'
+description: 'Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.'
+homepageLink:
+  title: 'Astro 5.7'
+  subtitle: 'Available now!'
+publishDate: '2025-04-15'
+authors:
+  - matt
+  - florian
+  - ema
+  - nate
+coverImage: '/src/content/blog/_images/astro-570/blog-post-5-7.webp'
+socialImage: '/src/content/blog/_images/astro-570/og-astro-5-7.webp'
+lang: 'en'
+---
+
+import BlogContentImage from '/src/components/BlogContentImage.astro';
+import Note from '~/components/Note.astro';
+import Mention from '/src/components/Mention.astro';
+
+**Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.**
+
+🐣 Full of the joys of northern-hemisphere spring, Astro 5.7 is here with goodies galore:
+
+- [**Experimental Fonts API**](#experimental-fonts-api)
+- [**Sessions API**](#sessions-api)
+- [**SVG Components**](#svg-components)
+- [**Config Imports**](#config-imports)
+
+To upgrade an existing project, use the automated `@astrojs/upgrade` CLI tool. Alternatively, upgrade manually by running the upgrade command for your package manager:
+
+```sh
+# Recommended:
+npx @astrojs/upgrade
+
+# Manual:
+npm install astro@latest
+pnpm upgrade astro --latest
+yarn upgrade astro --latest
+```
+
+## Experimental Fonts API
+
+...
+
+## Sessions API
+
+The Astro Sessions API is now stable and ready for production!
+
+Sessions let you securely store data tied to a specific user as they navigate between pages on your site. Unlike cookies, sessions are stored on the server, so you can store larger amounts of data without worrying about size limits or security issues. They are useful for storing things like user data, shopping carts, and form state, and they work without any client-side JavaScript:
+
+
+```astro title="src/components/CartButton.astro" {2}
+---
+const cart = await Astro.session.get('cart');
+export const prerender = false;
+---
+
+<a href="/checkout">🛒 {cart?.length ?? 0} items</a>
+```
+
+They can be used in Astro components, pages, API endpoints, actions, and middleware. The API is the same for all of them:
+
+```ts title="src/actions/addToCart.ts" {9,10}
+import { defineAction } from "astro:actions";
+import { z } from "astro:schema";
+export const server = {
+  addToCart: defineAction({
+    input: z.object({
+      product: z.string(),
+    }),
+    async handler({ product }, { session }) {
+      const cart = await session.get('cart');
+      session.set('cart', [...cart, product]);
+    },
+  }),
+};
+```
+
+### Type-safety
+
+Of course, as this is Astro, your sessions can be type-safe too. Define an interface and you will get type-checking and auto-completion for all of your session data:
+
+
+```ts title="src/env.d.ts"
+declare namespace App {
+  interface SessionData {
+    user: {
+      id: string;
+      name: string;
+    };
+    cart: string[];
+  }
+}
+```
+
+### Cookie-less sessions
+
+The session ID is automatically tracked using a cookie, but you can also use them without cookies by using the `session.load()` method. This is useful for things like APIs, where you might want to use a custom header or params to track the session ID:
+
+```ts title="src/pages/api/cart.ts" "session.load(sessionId)"
+export async function POST({ session, request }: APIContext) {
+  const sessionId = request.headers.get('x-session-id');
+
+  // If there is an existing session ID, load it. Otherwise one will be created
+  if (sessionId) {
+    await session.load(sessionId);
+  } 
+
+  const cart = await session.get('cart');
+  const data = await request.json<{ item: string }>();
+
+  if (!data?.item) {
+    return new Response('Item is required', { status: 400 });
+  }
+  session.set('cart', [...cart, data.item]);
+  // Return the cart and session ID
+  return Response.json({ cart, sessionId: session.sessionId });
+}
+```
+
+
+### Storage drivers
+
+Astro sessions use storage drivers to persist the data, and these are either zero-config or require minimal setup for all official Astro adapters. Alternatively you can use any [unstorage](https://unstorage.unjs.io/) driver, which supports dozens of storage backends such as Redis and MongoDB.
+
+- **[Node](https://docs.astro.build/en/guides/integrations-guide/node/#sessions)**: zero-config filesystem driver
+- **[Netlify](https://docs.astro.build/en/guides/integrations-guide/netlify/#sessions)**: zero-config Netlify Blobs driver
+- **[Cloudflare](https://docs.astro.build/en/guides/integrations-guide/cloudflare/#sessions)**: minimal-config Workers KV driver
+- **[Vercel](https://docs.astro.build/en/guides/integrations-guide/vercel/#sessions)**: minimal-config Redis/Upstash driver
+
+On any of these platforms you can easily switch out the driver for a different one if you don't want to use the default.
+
+```js title="astro.config.mjs" {5-10}
+import { defineConfig } from 'astro/config';
+
+export default defineConfig({
+  // ...
+  session: {
path: src/content/blog/astro-570.mdx
user: login: sarah11918
body: ```suggestion
import { defineConfig } from 'astro/config';
import netlify from '@astrojs/netlify';

export default defineConfig({
  // ...
  adapter: netlify(),
  session: {
```
I think this does a few things:
- reinforces that an adapter is needed (and that `server` output is not!)
- shows an official adapter configured with a non-default storage system
- is a nice nod to Netlify 😄 
created_at: 2025-04-09T15:34:48Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,235 @@
+---
+title: 'Astro 5.7'
+description: 'Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.'
+homepageLink:
+  title: 'Astro 5.7'
+  subtitle: 'Available now!'
+publishDate: '2025-04-15'
+authors:
+  - matt
+  - florian
+  - ema
+  - nate
+coverImage: '/src/content/blog/_images/astro-570/blog-post-5-7.webp'
+socialImage: '/src/content/blog/_images/astro-570/og-astro-5-7.webp'
+lang: 'en'
+---
+
+import BlogContentImage from '/src/components/BlogContentImage.astro';
+import Note from '~/components/Note.astro';
+import Mention from '/src/components/Mention.astro';
+
+**Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.**
+
+🐣 Full of the joys of northern-hemisphere spring, Astro 5.7 is here with goodies galore:
+
+- [**Experimental Fonts API**](#experimental-fonts-api)
+- [**Sessions API**](#sessions-api)
+- [**SVG Components**](#svg-components)
+- [**Config Imports**](#config-imports)
+
+To upgrade an existing project, use the automated `@astrojs/upgrade` CLI tool. Alternatively, upgrade manually by running the upgrade command for your package manager:
+
+```sh
+# Recommended:
+npx @astrojs/upgrade
+
+# Manual:
+npm install astro@latest
+pnpm upgrade astro --latest
+yarn upgrade astro --latest
+```
+
+## Experimental Fonts API
+
+...
+
+## Sessions API
+
+The Astro Sessions API is now stable and ready for production!
+
+Sessions let you securely store data tied to a specific user as they navigate between pages on your site. Unlike cookies, sessions are stored on the server, so you can store larger amounts of data without worrying about size limits or security issues. They are useful for storing things like user data, shopping carts, and form state, and they work without any client-side JavaScript:
+
+
+```astro title="src/components/CartButton.astro" {2}
+---
+const cart = await Astro.session.get('cart');
+export const prerender = false;
+---
+
+<a href="/checkout">🛒 {cart?.length ?? 0} items</a>
+```
+
+They can be used in Astro components, pages, API endpoints, actions, and middleware. The API is the same for all of them:
+
+```ts title="src/actions/addToCart.ts" {9,10}
+import { defineAction } from "astro:actions";
+import { z } from "astro:schema";
+export const server = {
+  addToCart: defineAction({
+    input: z.object({
+      product: z.string(),
+    }),
+    async handler({ product }, { session }) {
+      const cart = await session.get('cart');
+      session.set('cart', [...cart, product]);
+    },
+  }),
+};
+```
+
+### Type-safety
+
+Of course, as this is Astro, your sessions can be type-safe too. Define an interface and you will get type-checking and auto-completion for all of your session data:
+
+
+```ts title="src/env.d.ts"
+declare namespace App {
+  interface SessionData {
+    user: {
+      id: string;
+      name: string;
+    };
+    cart: string[];
+  }
+}
+```
+
+### Cookie-less sessions
+
+The session ID is automatically tracked using a cookie, but you can also use them without cookies by using the `session.load()` method. This is useful for things like APIs, where you might want to use a custom header or params to track the session ID:
path: src/content/blog/astro-570.mdx
user: login: ascorbic
body: ```suggestion
The session ID is automatically tracked using a cookie, but you can also use the `session.load()` method to access sessions without cookies . This is useful for things like APIs, where you might want to use a custom header or params to track the session ID:
```
created_at: 2025-04-10T12:56:00Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,273 @@
+---
+title: 'Astro 5.7'
+description: 'Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.'
+homepageLink:
+  title: 'Astro 5.7'
+  subtitle: 'Available now!'
+publishDate: '2025-04-15'
+authors:
+  - matt
+  - florian
+  - ema
+  - nate
+coverImage: '/src/content/blog/_images/astro-570/blog-post-5-7.webp'
+socialImage: '/src/content/blog/_images/astro-570/og-astro-5-7.webp'
+lang: 'en'
+---
+
+import BlogContentImage from '/src/components/BlogContentImage.astro';
+import Note from '~/components/Note.astro';
+import Mention from '/src/components/Mention.astro';
+
+**Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.**
+
+🐣 Full of the joys of northern-hemisphere spring, Astro 5.7 is here with goodies galore:
+
+- [**Experimental Fonts API**](#experimental-fonts-api)
+- [**Sessions API**](#sessions-api)
+- [**SVG Components**](#svg-components)
+- [**Config Imports**](#config-imports)
+
+To upgrade an existing project, use the automated `@astrojs/upgrade` CLI tool. Alternatively, upgrade manually by running the upgrade command for your package manager:
+
+```sh
+# Recommended:
+npx @astrojs/upgrade
+
+# Manual:
+npm install astro@latest
+pnpm upgrade astro --latest
+yarn upgrade astro --latest
+```
+
+## Experimental Fonts API
+
+Almost every website these days use custom fonts. However, it can be surprisingly complicated to get them right: how many font faces should I include? Why do I get a Flash of Unstyled Text? Should I preload?
path: src/content/blog/astro-570.mdx
user: login: florian-lefebvre
body: > how many font faces should I include?

I'm not happy about this one but I feel like fonts are complicated except I can't find examples...
created_at: 2025-04-10T16:26:02Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,273 @@
+---
+title: 'Astro 5.7'
+description: 'Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.'
+homepageLink:
+  title: 'Astro 5.7'
+  subtitle: 'Available now!'
+publishDate: '2025-04-15'
+authors:
+  - matt
+  - florian
+  - ema
+  - nate
+coverImage: '/src/content/blog/_images/astro-570/blog-post-5-7.webp'
+socialImage: '/src/content/blog/_images/astro-570/og-astro-5-7.webp'
+lang: 'en'
+---
+
+import BlogContentImage from '/src/components/BlogContentImage.astro';
+import Note from '~/components/Note.astro';
+import Mention from '/src/components/Mention.astro';
+
+**Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.**
+
+🐣 Full of the joys of northern-hemisphere spring, Astro 5.7 is here with goodies galore:
+
+- [**Experimental Fonts API**](#experimental-fonts-api)
+- [**Sessions API**](#sessions-api)
+- [**SVG Components**](#svg-components)
+- [**Config Imports**](#config-imports)
+
+To upgrade an existing project, use the automated `@astrojs/upgrade` CLI tool. Alternatively, upgrade manually by running the upgrade command for your package manager:
+
+```sh
+# Recommended:
+npx @astrojs/upgrade
+
+# Manual:
+npm install astro@latest
+pnpm upgrade astro --latest
+yarn upgrade astro --latest
+```
+
+## Experimental Fonts API
+
+Almost every website these days use custom fonts. However, it can be surprisingly complicated to get them right: how many font faces should I include? Why do I get a Flash of Unstyled Text? Should I preload?
path: src/content/blog/astro-570.mdx
user: login: sarah11918
body: I did a quick web search, and this article came up for "fonts best practices" -- is there something here that feels like something you'd point out that's helpful for justifying that fonts are tricky/have potentially performance effects on your site? https://web.dev/articles/font-best-practices
created_at: 2025-04-10T16:40:03Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,273 @@
+---
+title: 'Astro 5.7'
+description: 'Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.'
+homepageLink:
+  title: 'Astro 5.7'
+  subtitle: 'Available now!'
+publishDate: '2025-04-15'
+authors:
+  - matt
+  - florian
+  - ema
+  - nate
+coverImage: '/src/content/blog/_images/astro-570/blog-post-5-7.webp'
+socialImage: '/src/content/blog/_images/astro-570/og-astro-5-7.webp'
+lang: 'en'
+---
+
+import BlogContentImage from '/src/components/BlogContentImage.astro';
+import Note from '~/components/Note.astro';
+import Mention from '/src/components/Mention.astro';
+
+**Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.**
+
+🐣 Full of the joys of northern-hemisphere spring, Astro 5.7 is here with goodies galore:
+
+- [**Experimental Fonts API**](#experimental-fonts-api)
+- [**Sessions API**](#sessions-api)
+- [**SVG Components**](#svg-components)
+- [**Config Imports**](#config-imports)
+
+To upgrade an existing project, use the automated `@astrojs/upgrade` CLI tool. Alternatively, upgrade manually by running the upgrade command for your package manager:
+
+```sh
+# Recommended:
+npx @astrojs/upgrade
+
+# Manual:
+npm install astro@latest
+pnpm upgrade astro --latest
+yarn upgrade astro --latest
+```
+
+## Experimental Fonts API
+
+Almost every website these days use custom fonts. However, it can be surprisingly complicated to get them right: how many font faces should I include? Why do I get a Flash of Unstyled Text? Should I preload?
+
+Fortunately, web APIs have greatly improved recently and thanks to amazing initiatives of the Open-Source community (eg. [`unifont`](https://github.com/unjs/unifont/) and [`capsize`](https://github.com/seek-oss/capsize)), it's now easier than ever to use fonts in Astro!
+
+This experimental feature allows you to use fonts from your filesystem and various providers (eg. Google, Fontsource, Bunny...) through a unified API. Keep your site performant thanks to sensible defaults and automatic optimizations.
+
+To enable this feature, configure an `experimental.fonts` object:
+
+```js title="astro.config.mjs"
+import { defineConfig, fontProviders } from "astro/config"
+
+export default defineConfig({
+    experimental: {
+        fonts: [{
+            provider: fontProviders.google(),
+            name: "Roboto",
+            cssVariable: "--font-roboto",
+        }]
+    }
+})
+```
+
+Then, add a `<Font />` component and site-wide styling in your `<head>`:
+
+```astro title="src/components/Head.astro"
+---
+import { Font } from 'astro:assets'
+---
+<Font cssVariable='--font-roboto' preload />
+<style>
+body {
+    font-family: var(--font-roboto);
+}
+</style>
+```
+
+There's more to discover! Head to [documentation for this experimental feature](https://docs.astro.build/en/reference/experimental-flags/fonts/) for more information. We'd also appreciate your feedback. Participate in the development of the feature on the [Fonts RFC](https://github.com/withastro/roadmap/pull/1039).
path: src/content/blog/astro-570.mdx
user: login: sarah11918
body: ```suggestion
There's so much more to discover! Head over to [the experimental Fonts documentation](https://docs.astro.build/en/reference/experimental-flags/fonts/) for the full API, how to get started, and even how to build your own custom `AstroFontProvider` if we don't yet support your preferred font service.

We'd also appreciate your feedback. Participate in the ongoing development of this feature on the [Fonts RFC](https://github.com/withastro/roadmap/pull/1039) and help shape its future.
```
Not doing a full review yet, just massaging the ending a bit! Something like this maybe?
created_at: 2025-04-10T16:50:18Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,273 @@
+---
+title: 'Astro 5.7'
+description: 'Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.'
+homepageLink:
+  title: 'Astro 5.7'
+  subtitle: 'Available now!'
+publishDate: '2025-04-15'
+authors:
+  - matt
+  - florian
+  - ema
+  - nate
+coverImage: '/src/content/blog/_images/astro-570/blog-post-5-7.webp'
+socialImage: '/src/content/blog/_images/astro-570/og-astro-5-7.webp'
+lang: 'en'
+---
+
+import BlogContentImage from '/src/components/BlogContentImage.astro';
+import Note from '~/components/Note.astro';
+import Mention from '/src/components/Mention.astro';
+
+**Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.**
+
+🐣 Full of the joys of northern-hemisphere spring, Astro 5.7 is here with goodies galore:
+
+- [**Experimental Fonts API**](#experimental-fonts-api)
+- [**Sessions API**](#sessions-api)
+- [**SVG Components**](#svg-components)
+- [**Config Imports**](#config-imports)
+
+To upgrade an existing project, use the automated `@astrojs/upgrade` CLI tool. Alternatively, upgrade manually by running the upgrade command for your package manager:
+
+```sh
+# Recommended:
+npx @astrojs/upgrade
+
+# Manual:
+npm install astro@latest
+pnpm upgrade astro --latest
+yarn upgrade astro --latest
+```
+
+## Experimental Fonts API
+
+Almost every website these days use custom fonts. However, it can be surprisingly complicated to get them right: how many font faces should I include? Why do I get a Flash of Unstyled Text? Should I preload?
path: src/content/blog/astro-570.mdx
user: login: florian-lefebvre
body: Maybe we can talk about preconnect instead

```suggestion
Almost every website these days uses custom fonts. However, it can be surprisingly complicated to get them right: Why do I get a Flash of Unstyled Text? Should I add a preload link? What about preconnect links? Am I really getting better performance from a self-hosted font?
```
SARAH EDIT:

? (Just read this in the article and thought it was interesting because counterintuitve that you don't always get better performance by self hosting, so maybe interesting here!)
created_at: 2025-04-10T16:55:34Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,273 @@
+---
+title: 'Astro 5.7'
+description: 'Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.'
+homepageLink:
+  title: 'Astro 5.7'
+  subtitle: 'Available now!'
+publishDate: '2025-04-15'
+authors:
+  - matt
+  - florian
+  - ema
+  - nate
+coverImage: '/src/content/blog/_images/astro-570/blog-post-5-7.webp'
+socialImage: '/src/content/blog/_images/astro-570/og-astro-5-7.webp'
+lang: 'en'
+---
+
+import BlogContentImage from '/src/components/BlogContentImage.astro';
+import Note from '~/components/Note.astro';
+import Mention from '/src/components/Mention.astro';
+
+**Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.**
+
+🐣 Full of the joys of northern-hemisphere spring, Astro 5.7 is here with goodies galore:
+
+- [**Experimental Fonts API**](#experimental-fonts-api)
+- [**Sessions API**](#sessions-api)
+- [**SVG Components**](#svg-components)
+- [**Config Imports**](#config-imports)
+
+To upgrade an existing project, use the automated `@astrojs/upgrade` CLI tool. Alternatively, upgrade manually by running the upgrade command for your package manager:
+
+```sh
+# Recommended:
+npx @astrojs/upgrade
+
+# Manual:
+npm install astro@latest
+pnpm upgrade astro --latest
+yarn upgrade astro --latest
+```
+
+## Experimental Fonts API
+
+Almost every website these days use custom fonts. However, it can be surprisingly complicated to get them right: how many font faces should I include? Why do I get a Flash of Unstyled Text? Should I preload?
+
+Fortunately, web APIs have greatly improved recently and thanks to amazing initiatives of the Open-Source community (eg. [`unifont`](https://github.com/unjs/unifont/) and [`capsize`](https://github.com/seek-oss/capsize)), it's now easier than ever to use fonts in Astro!
path: src/content/blog/astro-570.mdx
user: login: sarah11918
body: ```suggestion
 Fonts can have significant performance implications on your site, affecting your visitors' browsing experience and important Core Web Vitals (CWV) metrics. Fortunately, web APIs have greatly improved recently and thanks to amazing initiatives of the open source community (eg. [`unifont`](https://github.com/unjs/unifont/) and [`capsize`](https://github.com/seek-oss/capsize)), we've been able to start working on a great way to use fonts in Astro!
```
I think that's true 😅 Do you want something like that here?
created_at: 2025-04-10T18:09:48Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,273 @@
+---
+title: 'Astro 5.7'
+description: 'Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.'
+homepageLink:
+  title: 'Astro 5.7'
+  subtitle: 'Available now!'
+publishDate: '2025-04-15'
+authors:
+  - matt
+  - florian
+  - ema
+  - nate
+coverImage: '/src/content/blog/_images/astro-570/blog-post-5-7.webp'
+socialImage: '/src/content/blog/_images/astro-570/og-astro-5-7.webp'
+lang: 'en'
+---
+
+import BlogContentImage from '/src/components/BlogContentImage.astro';
+import Note from '~/components/Note.astro';
+import Mention from '/src/components/Mention.astro';
+
+**Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.**
+
+🐣 Full of the joys of northern-hemisphere spring, Astro 5.7 is here with goodies galore:
+
+- [**Experimental Fonts API**](#experimental-fonts-api)
+- [**Sessions API**](#sessions-api)
+- [**SVG Components**](#svg-components)
+- [**Config Imports**](#config-imports)
+
+To upgrade an existing project, use the automated `@astrojs/upgrade` CLI tool. Alternatively, upgrade manually by running the upgrade command for your package manager:
+
+```sh
+# Recommended:
+npx @astrojs/upgrade
+
+# Manual:
+npm install astro@latest
+pnpm upgrade astro --latest
+yarn upgrade astro --latest
+```
+
+## Experimental Fonts API
+
+Almost every website these days use custom fonts. However, it can be surprisingly complicated to get them right: how many font faces should I include? Why do I get a Flash of Unstyled Text? Should I preload?
+
+Fortunately, web APIs have greatly improved recently and thanks to amazing initiatives of the Open-Source community (eg. [`unifont`](https://github.com/unjs/unifont/) and [`capsize`](https://github.com/seek-oss/capsize)), it's now easier than ever to use fonts in Astro!
+
+This experimental feature allows you to use fonts from your filesystem and various providers (eg. Google, Fontsource, Bunny...) through a unified API. Keep your site performant thanks to sensible defaults and automatic optimizations.
path: src/content/blog/astro-570.mdx
user: login: sarah11918
body: ```suggestion
This experimental feature allows you to use fonts from both your filesystem and several built-in supported providers (e.g. Google, Fontsource, Bunny) through a unified API. Keep your site performant thanks to sensible defaults and automatic optimizations including fallback font generation.
```
Is this the right way to say it? I think the sentence could use a nod to fallbacks here.
created_at: 2025-04-10T18:13:59Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,273 @@
+---
+title: 'Astro 5.7'
+description: 'Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.'
+homepageLink:
+  title: 'Astro 5.7'
+  subtitle: 'Available now!'
+publishDate: '2025-04-15'
+authors:
+  - matt
+  - florian
+  - ema
+  - nate
+coverImage: '/src/content/blog/_images/astro-570/blog-post-5-7.webp'
+socialImage: '/src/content/blog/_images/astro-570/og-astro-5-7.webp'
+lang: 'en'
+---
+
+import BlogContentImage from '/src/components/BlogContentImage.astro';
+import Note from '~/components/Note.astro';
+import Mention from '/src/components/Mention.astro';
+
+**Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.**
+
+🐣 Full of the joys of northern-hemisphere spring, Astro 5.7 is here with goodies galore:
+
+- [**Experimental Fonts API**](#experimental-fonts-api)
+- [**Sessions API**](#sessions-api)
+- [**SVG Components**](#svg-components)
+- [**Config Imports**](#config-imports)
+
+To upgrade an existing project, use the automated `@astrojs/upgrade` CLI tool. Alternatively, upgrade manually by running the upgrade command for your package manager:
+
+```sh
+# Recommended:
+npx @astrojs/upgrade
+
+# Manual:
+npm install astro@latest
+pnpm upgrade astro --latest
+yarn upgrade astro --latest
+```
+
+## Experimental Fonts API
+
+Almost every website these days use custom fonts. However, it can be surprisingly complicated to get them right: how many font faces should I include? Why do I get a Flash of Unstyled Text? Should I preload?
+
+Fortunately, web APIs have greatly improved recently and thanks to amazing initiatives of the Open-Source community (eg. [`unifont`](https://github.com/unjs/unifont/) and [`capsize`](https://github.com/seek-oss/capsize)), it's now easier than ever to use fonts in Astro!
+
+This experimental feature allows you to use fonts from your filesystem and various providers (eg. Google, Fontsource, Bunny...) through a unified API. Keep your site performant thanks to sensible defaults and automatic optimizations.
+
+To enable this feature, configure an `experimental.fonts` object:
path: src/content/blog/astro-570.mdx
user: login: sarah11918
body: ```suggestion
To enable this feature, configure an `experimental.fonts` object with one or more fonts:
```
created_at: 2025-04-10T18:14:29Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,273 @@
+---
+title: 'Astro 5.7'
+description: 'Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.'
+homepageLink:
+  title: 'Astro 5.7'
+  subtitle: 'Available now!'
+publishDate: '2025-04-15'
+authors:
+  - matt
+  - florian
+  - ema
+  - nate
+coverImage: '/src/content/blog/_images/astro-570/blog-post-5-7.webp'
+socialImage: '/src/content/blog/_images/astro-570/og-astro-5-7.webp'
+lang: 'en'
+---
+
+import BlogContentImage from '/src/components/BlogContentImage.astro';
+import Note from '~/components/Note.astro';
+import Mention from '/src/components/Mention.astro';
+
+**Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.**
+
+🐣 Full of the joys of northern-hemisphere spring, Astro 5.7 is here with goodies galore:
+
+- [**Experimental Fonts API**](#experimental-fonts-api)
+- [**Sessions API**](#sessions-api)
+- [**SVG Components**](#svg-components)
+- [**Config Imports**](#config-imports)
+
+To upgrade an existing project, use the automated `@astrojs/upgrade` CLI tool. Alternatively, upgrade manually by running the upgrade command for your package manager:
+
+```sh
+# Recommended:
+npx @astrojs/upgrade
+
+# Manual:
+npm install astro@latest
+pnpm upgrade astro --latest
+yarn upgrade astro --latest
+```
+
+## Experimental Fonts API
+
+Almost every website these days use custom fonts. However, it can be surprisingly complicated to get them right: how many font faces should I include? Why do I get a Flash of Unstyled Text? Should I preload?
+
+Fortunately, web APIs have greatly improved recently and thanks to amazing initiatives of the Open-Source community (eg. [`unifont`](https://github.com/unjs/unifont/) and [`capsize`](https://github.com/seek-oss/capsize)), it's now easier than ever to use fonts in Astro!
path: src/content/blog/astro-570.mdx
user: login: florian-lefebvre
body: Can't wait for some charts drama
created_at: 2025-04-10T18:47:29Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,275 @@
+---
+title: 'Astro 5.7'
+description: 'Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.'
+homepageLink:
+  title: 'Astro 5.7'
+  subtitle: 'Available now!'
+publishDate: '2025-04-15'
+authors:
+  - matt
+  - florian
+  - ema
+  - nate
+coverImage: '/src/content/blog/_images/astro-570/blog-post-5-7.webp'
+socialImage: '/src/content/blog/_images/astro-570/og-astro-5-7.webp'
+lang: 'en'
+---
+
+import BlogContentImage from '/src/components/BlogContentImage.astro';
+import Note from '~/components/Note.astro';
+import Mention from '/src/components/Mention.astro';
+
+**Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.**
+
+🐣 Full of the joys of northern-hemisphere spring, Astro 5.7 is here with goodies galore:
+
+- [**Experimental Fonts API**](#experimental-fonts-api)
+- [**Sessions API**](#sessions-api)
+- [**SVG Components**](#svg-components)
+- [**Config Imports**](#config-imports)
+
+To upgrade an existing project, use the automated `@astrojs/upgrade` CLI tool. Alternatively, upgrade manually by running the upgrade command for your package manager:
+
+```sh
+# Recommended:
+npx @astrojs/upgrade
+
+# Manual:
+npm install astro@latest
+pnpm upgrade astro --latest
+yarn upgrade astro --latest
+```
+
+## Experimental Fonts API
+
+Almost every website these days uses custom fonts. However, it can be surprisingly complicated to get them right: Why do I get a Flash of Unstyled Text? Should I add a preload link? What about preconnect links? Do I self-host or rely on a third-party provider?
+
+ Fonts can have significant performance implications on your site, affecting your visitors' browsing experience and important Core Web Vitals (CWV) metrics. Fortunately, web APIs have greatly improved recently and thanks to amazing initiatives of the open source community (eg. [`unifont`](https://github.com/unjs/unifont/) and [`capsize`](https://github.com/seek-oss/capsize)), we've been able to start working on a great way to use fonts in Astro!
path: src/content/blog/astro-570.mdx
user: login: sarah11918
body: ```suggestion
Fonts can have significant performance implications on your site, affecting your visitors' browsing experience and important Core Web Vitals (CWV) metrics. Fortunately, web APIs have greatly improved recently and thanks to amazing initiatives of the open source community (eg. [`unifont`](https://github.com/unjs/unifont/) and [`capsize`](https://github.com/seek-oss/capsize)), we've been able to start working on a great way to use fonts in Astro!
```
created_at: 2025-04-11T01:31:58Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,304 @@
+---
+title: 'Astro 5.7'
+description: 'Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.'
+homepageLink:
+  title: 'Astro 5.7'
+  subtitle: 'Available now!'
+publishDate: '2025-04-15'
+authors:
+  - matt
+  - florian
+  - ema
+  - nate
+coverImage: '/src/content/blog/_images/astro-570/blog-post-5-7.webp'
+socialImage: '/src/content/blog/_images/astro-570/og-astro-5-7.webp'
+lang: 'en'
+---
+
+import BlogContentImage from '/src/components/BlogContentImage.astro';
+import Note from '~/components/Note.astro';
+import Mention from '/src/components/Mention.astro';
+
+**Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.**
+
+🐣 Full of the joys of northern-hemisphere spring, Astro 5.7 is here with goodies galore:
+
+- [**Experimental Fonts API**](#experimental-fonts-api)
+- [**Sessions API**](#sessions-api)
+- [**SVG Components**](#svg-components)
+- [**Config Imports**](#config-imports)
+
+To upgrade an existing project, use the automated `@astrojs/upgrade` CLI tool. Alternatively, upgrade manually by running the upgrade command for your package manager:
+
+```sh
+# Recommended:
+npx @astrojs/upgrade
+
+# Manual:
+npm install astro@latest
+pnpm upgrade astro --latest
+yarn upgrade astro --latest
+```
+
+## Experimental Fonts API
+
+Almost every website these days uses custom fonts. However, it can be surprisingly complicated to get them right: Why do I get a Flash of Unstyled Text? Should I add a preload link? What about preconnect links? Do I self-host or rely on a third-party provider?
+
+Fonts can have significant performance implications on your site, affecting your visitors' browsing experience and important Core Web Vitals (CWV) metrics. Fortunately, web APIs have greatly improved recently and thanks to amazing initiatives of the open source community (eg. [`unifont`](https://github.com/unjs/unifont/) and [`capsize`](https://github.com/seek-oss/capsize)), we've been able to start working on a great way to use fonts in Astro!
+
+This experimental feature allows you to use fonts from both your filesystem and several built-in supported providers (e.g. Google, Fontsource, Bunny) through a unified API. Keep your site performant thanks to sensible defaults and automatic optimizations including fallback font generation.
+
+To enable this feature, configure an `experimental.fonts` object with one or more fonts:
+
+```js title="astro.config.mjs"
+import { defineConfig, fontProviders } from "astro/config"
+
+export default defineConfig({
+    experimental: {
+        fonts: [{
+            provider: fontProviders.google(),
+            name: "Roboto",
+            cssVariable: "--font-roboto",
+        }]
+    }
+})
+```
+
+Then, add a `<Font />` component and site-wide styling in your `<head>`:
+
+```astro title="src/components/Head.astro"
+---
+import { Font } from 'astro:assets'
+---
+<Font cssVariable='--font-roboto' preload />
+<style>
+body {
+    font-family: var(--font-roboto);
+}
+</style>
+```
+
+There's so much more to discover! Head over to [the experimental Fonts documentation](https://docs.astro.build/en/reference/experimental-flags/fonts/) for the full API, how to get started, and even how to build your own custom `AstroFontProvider` if we don't yet support your preferred font service.
+
+We'd also appreciate your feedback. Participate in the ongoing development of this feature on the [Fonts RFC](https://github.com/withastro/roadmap/pull/1039) and help shape its future.
+
+## Sessions API
+
+The Astro Sessions API is now stable and ready for production!
+
+Sessions let you securely store data tied to a specific user as they navigate between pages on your site. Unlike cookies, sessions are stored on the server, so you can store larger amounts of data without worrying about size limits or security issues. They are useful for storing things like user data, shopping carts, and form state, and they work without any client-side JavaScript:
+
+
+```astro title="src/components/CartButton.astro" {2}
+---
+const cart = await Astro.session.get('cart');
+export const prerender = false;
+---
+
+<a href="/checkout">🛒 {cart?.length ?? 0} items</a>
+```
+
+They can be used in Astro components, pages, API endpoints, actions, and middleware. The API is the same for all of them:
+
+```ts title="src/actions/addToCart.ts" {9,10}
+import { defineAction } from "astro:actions";
+import { z } from "astro:schema";
+export const server = {
+  addToCart: defineAction({
+    input: z.object({
+      product: z.string(),
+    }),
+    async handler({ product }, { session }) {
+      const cart = await session.get('cart');
+      session.set('cart', [...cart, product]);
+    },
+  }),
+};
+```
+
+### Type-safety
+
+Of course, as this is Astro, your sessions can be type-safe too. Define an interface and you will get type-checking and auto-completion for all of your session data:
+
+
+```ts title="src/env.d.ts"
+declare namespace App {
+  interface SessionData {
+    user: {
+      id: string;
+      name: string;
+    };
+    cart: string[];
+  }
+}
+```
+
+### Cookie-less sessions
+
+The session ID is automatically tracked using a cookie, but you can also use the `session.load()` method to access sessions without cookies . This is useful for things like APIs, where you might want to use a custom header or params to track the session ID:
+
+```ts title="src/pages/api/cart.ts" "session.load(sessionId)"
+export async function POST({ session, request }: APIContext) {
+  const sessionId = request.headers.get('x-session-id');
+
+  // If there is an existing session ID, load it. Otherwise one will be created
+  if (sessionId) {
+    await session.load(sessionId);
+  } 
+
+  const cart = await session.get('cart');
+  const data = await request.json<{ item: string }>();
+
+  if (!data?.item) {
+    return new Response('Item is required', { status: 400 });
+  }
+  session.set('cart', [...cart, data.item]);
+  // Return the cart and session ID
+  return Response.json({ cart, sessionId: session.sessionId });
+}
+```
+
+
+### Storage drivers
+
+Astro sessions use storage drivers to persist the data, and these are either zero-config or require minimal setup for all official Astro adapters. Alternatively you can use any [unstorage](https://unstorage.unjs.io/) driver, which supports dozens of storage backends such as Redis and MongoDB.
+
+- **[Node](https://docs.astro.build/en/guides/integrations-guide/node/#sessions)**: zero-config filesystem driver
+- **[Netlify](https://docs.astro.build/en/guides/integrations-guide/netlify/#sessions)**: zero-config Netlify Blobs driver
+- **[Cloudflare](https://docs.astro.build/en/guides/integrations-guide/cloudflare/#sessions)**: minimal-config Workers KV driver
+- **[Vercel](https://docs.astro.build/en/guides/integrations-guide/vercel/#sessions)**: minimal-config Redis/Upstash driver
+
+On any of these platforms you can easily switch out the driver for a different one if you don't want to use the default.
+
+```js title="astro.config.mjs" {5-10}
+import { defineConfig } from 'astro/config';
+import netlify from '@astrojs/netlify';
+
+export default defineConfig({
+  // ...
+  adapter: netlify(),
+  session: {
+    driver: 'redis',
+    options: {
+      url: process.env.REDIS_URL,
+    },
+  },
+});
+
+```
+
+### Upgrading from experimental sessions
+
+If you were using the experimental sessions API, you should remove the experimental flag from your `astro.config.mjs` file:
+
+```js title="astro.config.mjs" del={6}
+import { defineConfig } from 'astro/config';
+
+export default defineConfig({
+  // ...
+  experimental: {
+    session: false,
+  },
+});
+```
+Check out the [sessions guide](https://docs.astro.build/en/guides/sessions/) to learn more about how to use them in your Astro project.
+
+## SVG Components
+
+Astro now supports local SVG files as components! Reference the default import of any `.svg` file and use it as you would use any `.astro` component. The content will be inlined directly into your HTML.
+
+You can pass props such as `width`, `height`, `fill`, `stroke`, and any other attribute accepted by the [native `<svg>` element](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg). 
path: src/content/blog/astro-570.mdx
user: login: sarah11918
body: Per my comment above, fine as is!

But, if you want to add an extra "why you should be excited and why we just used an exclamation point" sentence, then I'd probably restructure closer to this, maybe?

> Astro now supports local SVG files as components! **[MOAR HYPE like, "This allows you to/avoids... " or "No more struggling with..."]** (incorporating "The content will be inlined directly into your HTML.")
>
> Reference the default import of any `.svg` file and use it as you would use any `.astro` component. You can pass props such as `width`, `height`, `fill`, `stroke`, and any other attribute accepted by the [native `<svg>` element](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg). 
```
created_at: 2025-04-13T12:11:36Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,304 @@
+---
+title: 'Astro 5.7'
+description: 'Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.'
+homepageLink:
+  title: 'Astro 5.7'
+  subtitle: 'Available now!'
+publishDate: '2025-04-15'
+authors:
+  - matt
+  - florian
+  - ema
+  - nate
+coverImage: '/src/content/blog/_images/astro-570/blog-post-5-7.webp'
+socialImage: '/src/content/blog/_images/astro-570/og-astro-5-7.webp'
+lang: 'en'
+---
+
+import BlogContentImage from '/src/components/BlogContentImage.astro';
+import Note from '~/components/Note.astro';
+import Mention from '/src/components/Mention.astro';
+
+**Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.**
+
+🐣 Full of the joys of northern-hemisphere spring, Astro 5.7 is here with goodies galore:
+
+- [**Experimental Fonts API**](#experimental-fonts-api)
+- [**Sessions API**](#sessions-api)
+- [**SVG Components**](#svg-components)
+- [**Config Imports**](#config-imports)
+
+To upgrade an existing project, use the automated `@astrojs/upgrade` CLI tool. Alternatively, upgrade manually by running the upgrade command for your package manager:
+
+```sh
+# Recommended:
+npx @astrojs/upgrade
+
+# Manual:
+npm install astro@latest
+pnpm upgrade astro --latest
+yarn upgrade astro --latest
+```
+
+## Experimental Fonts API
+
+Almost every website these days uses custom fonts. However, it can be surprisingly complicated to get them right: Why do I get a Flash of Unstyled Text? Should I add a preload link? What about preconnect links? Do I self-host or rely on a third-party provider?
+
+Fonts can have significant performance implications on your site, affecting your visitors' browsing experience and important Core Web Vitals (CWV) metrics. Fortunately, web APIs have greatly improved recently and thanks to amazing initiatives of the open source community (eg. [`unifont`](https://github.com/unjs/unifont/) and [`capsize`](https://github.com/seek-oss/capsize)), we've been able to start working on a great way to use fonts in Astro!
+
+This experimental feature allows you to use fonts from both your filesystem and several built-in supported providers (e.g. Google, Fontsource, Bunny) through a unified API. Keep your site performant thanks to sensible defaults and automatic optimizations including fallback font generation.
path: src/content/blog/astro-570.mdx
user: login: sarah11918
body: ```suggestion
This experimental feature allows you to use fonts from both your file system and several built-in supported providers (e.g. Google, Fontsource, Bunny) through a unified API. Keep your site performant thanks to sensible defaults and automatic optimizations including fallback font generation.
```
created_at: 2025-04-13T13:31:10Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,305 @@
+---
+title: 'Astro 5.7'
+description: 'Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.'
+homepageLink:
+  title: 'Astro 5.7'
+  subtitle: 'Available now!'
+publishDate: '2025-04-15'
+authors:
+  - matt
+  - florian
+  - ema
+  - nate
+coverImage: '/src/content/blog/_images/astro-570/blog-post-5-7.webp'
+socialImage: '/src/content/blog/_images/astro-570/og-astro-5-7.webp'
+lang: 'en'
+---
+
+import BlogContentImage from '/src/components/BlogContentImage.astro';
+import Note from '~/components/Note.astro';
+import Mention from '/src/components/Mention.astro';
+
+**Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.**
+
+🐣 Full of the joys of northern-hemisphere spring, Astro 5.7 is here with goodies galore:
+
+- [**Experimental Fonts API**](#experimental-fonts-api)
+- [**Sessions API**](#sessions-api)
+- [**SVG Components**](#svg-components)
+- [**Config Imports**](#config-imports)
+
+To upgrade an existing project, use the automated `@astrojs/upgrade` CLI tool. Alternatively, upgrade manually by running the upgrade command for your package manager:
+
+```sh
+# Recommended:
+npx @astrojs/upgrade
+
+# Manual:
+npm install astro@latest
+pnpm upgrade astro --latest
+yarn upgrade astro --latest
+```
+
+## Experimental Fonts API
+
+Almost every website these days uses custom fonts. However, it can be surprisingly complicated to get them right: Why do I get a Flash of Unstyled Text? Should I add a preload link? What about preconnect links? Do I self-host or rely on a third-party provider?
+
+Fonts can have significant performance implications on your site, affecting your visitors' browsing experience and important Core Web Vitals (CWV) metrics. Fortunately, web APIs have greatly improved recently and thanks to amazing initiatives of the open source community (eg. [`unifont`](https://github.com/unjs/unifont/) and [`capsize`](https://github.com/seek-oss/capsize)), we've been able to start working on a great way to use fonts in Astro!
+
+This experimental feature allows you to use fonts from both your file system and several built-in supported providers (e.g. Google, Fontsource, Bunny) through a unified API. Keep your site performant thanks to sensible defaults and automatic optimizations including fallback font generation.
+
+To enable this feature, configure an `experimental.fonts` object with one or more fonts:
+
+```js title="astro.config.mjs"
+import { defineConfig, fontProviders } from "astro/config"
+
+export default defineConfig({
+    experimental: {
+        fonts: [{
+            provider: fontProviders.google(),
+            name: "Roboto",
+            cssVariable: "--font-roboto",
+        }]
+    }
+})
+```
+
+Then, add a `<Font />` component and site-wide styling in your `<head>`:
+
+```astro title="src/components/Head.astro"
+---
+import { Font } from 'astro:assets'
+---
+<Font cssVariable='--font-roboto' preload />
+<style>
+body {
+    font-family: var(--font-roboto);
+}
+</style>
+```
+
+There's so much more to discover! Head over to [the experimental Fonts documentation](https://docs.astro.build/en/reference/experimental-flags/fonts/) for the full API, how to get started, and even how to build your own custom `AstroFontProvider` if we don't yet support your preferred font service.
+
+We'd also appreciate your feedback. Participate in the ongoing development of this feature on the [Fonts RFC](https://github.com/withastro/roadmap/pull/1039) and help shape its future.
+
+## Sessions API
+
+The Astro Sessions API is now stable and ready for production!
+
+Sessions let you securely store data tied to a specific user as they navigate between pages on your site. Unlike cookies, sessions are stored on the server, so you can store larger amounts of data without worrying about size limits or security issues. They are useful for storing things like user data, shopping carts, and form state, and they work without any client-side JavaScript:
+
+
+```astro title="src/components/CartButton.astro" {2}
+---
+const cart = await Astro.session.get('cart');
+export const prerender = false;
+---
+
+<a href="/checkout">🛒 {cart?.length ?? 0} items</a>
+```
+
+They can be used in Astro components, pages, API endpoints, actions, and middleware. The API is the same for all of them:
+
+```ts title="src/actions/addToCart.ts" {9,10}
+import { defineAction } from "astro:actions";
+import { z } from "astro:schema";
+export const server = {
+  addToCart: defineAction({
+    input: z.object({
+      product: z.string(),
+    }),
+    async handler({ product }, { session }) {
+      const cart = await session.get('cart');
+      session.set('cart', [...cart, product]);
+    },
+  }),
+};
+```
+
+### Type-safety
+
+Of course, as this is Astro, your sessions can be type-safe too. Define an interface and you will get type-checking and auto-completion for all of your session data:
+
+
+```ts title="src/env.d.ts"
+declare namespace App {
+  interface SessionData {
+    user: {
+      id: string;
+      name: string;
+    };
+    cart: string[];
+  }
+}
+```
+
+### Cookie-less sessions
+
+The session ID is automatically tracked using a cookie, but you can also use the `session.load()` method to access sessions without cookies . This is useful for things like APIs, where you might want to use a custom header or params to track the session ID:
+
+```ts title="src/pages/api/cart.ts" "session.load(sessionId)"
+export async function POST({ session, request }: APIContext) {
+  const sessionId = request.headers.get('x-session-id');
+
+  // If there is an existing session ID, load it. Otherwise one will be created
+  if (sessionId) {
+    await session.load(sessionId);
+  } 
+
+  const cart = await session.get('cart');
+  const data = await request.json<{ item: string }>();
+
+  if (!data?.item) {
+    return new Response('Item is required', { status: 400 });
+  }
+  session.set('cart', [...cart, data.item]);
+  // Return the cart and session ID
+  return Response.json({ cart, sessionId: session.sessionId });
+}
+```
+
+
+### Storage drivers
+
+Astro sessions use storage drivers to persist the data, and these are either zero-config or require minimal setup for all official Astro adapters. Alternatively you can use any [unstorage](https://unstorage.unjs.io/) driver, which supports dozens of storage backends such as Redis and MongoDB.
+
+- **[Node](https://docs.astro.build/en/guides/integrations-guide/node/#sessions)**: zero-config filesystem driver
+- **[Netlify](https://docs.astro.build/en/guides/integrations-guide/netlify/#sessions)**: zero-config Netlify Blobs driver
+- **[Cloudflare](https://docs.astro.build/en/guides/integrations-guide/cloudflare/#sessions)**: minimal-config Workers KV driver
+- **[Vercel](https://docs.astro.build/en/guides/integrations-guide/vercel/#sessions)**: minimal-config Redis/Upstash driver
+
+On any of these platforms you can easily switch out the driver for a different one if you don't want to use the default.
+
+```js title="astro.config.mjs" {5-10}
+import { defineConfig } from 'astro/config';
+import netlify from '@astrojs/netlify';
+
+export default defineConfig({
+  // ...
+  adapter: netlify(),
+  session: {
+    driver: 'redis',
+    options: {
+      url: process.env.REDIS_URL,
+    },
+  },
+});
+
+```
+
+### Upgrading from experimental sessions
+
+If you were using the experimental sessions API, you should remove the experimental flag from your `astro.config.mjs` file:
+
+```js title="astro.config.mjs" del={6}
+import { defineConfig } from 'astro/config';
+
+export default defineConfig({
+  // ...
+  experimental: {
+    session: false,
+  },
+});
+```
+Check out the [sessions guide](https://docs.astro.build/en/guides/sessions/) to learn more about how to use them in your Astro project.
+
+## SVG Components
+
+Astro now supports local SVG files as components! Reference the default import of any `.svg` file and use it as you would use any `.astro` component. The content will be inlined directly into your HTML.
+
+You can pass props such as `width`, `height`, `fill`, `stroke`, and any other attribute accepted by the [native `<svg>` element](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg). 
+
+```astro title="src/components/MyAstroComponent.astro"
+---
+import Logo from './path/to/svg/file.svg';
+---
+
+<Logo width={64} height={64} fill="currentColor" />
+```
+
+Take a look at [the SVG components documentation](https://docs.astro.build/en/guides/images#svg-components) for more details.
+
+Special thanks to [Michael Stramel](https://github.com/stramel) for his work on this feature!
+
+### Upgrading from experimental SVG
+
+If you were previously using the experimental SVG API, you must remove the experimental flag from your `astro.config.mjs` file.
+
+```js title="astro.config.mjs" del={6}
+import { defineConfig } from 'astro/config';
+
+export default defineConfig({
+  // ...
+  experimental: {
+    svg: true,
+  },
+});
+```
+
+Note that [Astro 5.6](/blog/astro-560) introduced [some breaking changes to this flag](/blog/astro-560/#breaking-changes-to-the-experimental-svg-api). Please check that your code is up-to-date with the latest, stable version of this API.
+
+## Config Imports
+
+The new virtual module `astro:config` is now stable!
+
+The virtual module allows you to import a subset of the Astro configuration, with type-safety in mind. Two sub-paths are exposed for controlled access to your configuration:
+
+- `astro:config/client`: exposes config information that is safe to expose to the client.
+- `astro:config/server`: exposes additional information that is safe to expose to the server, such as file/dir paths.
+
+For example, you can now build your own path utilities without relying on an integration. Properties like `base` and `trailingSlash` set in your configuration can be imported and used in a `.js` file:
+
+```js title="astro.config.mjs"
+export default defineConfig({
+    base: "store/",
+    trailingSlash: "always"
+})
+```
+
+```js title="src/utils.js"
+import { trailingSlash, base } from 'astro:config/client';
+
+// This method adds a forwards slash to paths, and prepends the `base`
+function addForwardSlashAndBase(path) {
+    let finalPath;
+    if (trailingSlash === 'always') {
+      finalPath = path.endsWith('/') ? path : path + '/';
+    } else {
+      finalPath = path;
+    }
+    if (base !== "/") {
+        return base + finalPath
+    }
+    return finalPath
+}
+```
+
+Use this path utility that depends on your configuration settings throughout your project, for example, for more control over page links: 
+```astro title="src/pages/index.astro"
+---
+import { addForwardSlashAndBase } from "@src/utils.js";
+
+const cartUrl = addForwardSlashAndBase("cart"); // it will return "store/cart/"
+---
+
+<a href={cartUrl}>Cart</a>
+```
+
+We `config`ured you'd enjoy this new ability to access your settings, with Astro's trademark type safety to help you get it right!
+## Bug fixes
+
+As always, we've been working hard on fixing issues since the [5.6 release](/blog/astro-560). See [the changelog](https://github.com/withastro/astro/blob/main/packages/astro/CHANGELOG.md) for all the details.
+
+## Community
+
+The Astro core team is:
+
+<Mention name="ben" />, <Mention name="caleb" />, <Mention name="chris" />, <Mention name="ema" />, <Mention name="erika" />, <Mention name="florian" />, <Mention name="fuzzy" />, <Mention name="hideoo" />, <Mention name="luiz" />, <Mention name="matt" />, <Mention name="matthew" />, <Mention name="nate" />, <Mention name="reuben" />, <Mention name="sarah" />, and <Mention name="yan" />.
+
+Thanks to all the other contributors who helped make Astro 5.7 possible, including: [Roberto Molina](https://github.com/robertoms99), [Junseong Park](https://github.com/jsparkdev), [ryu](https://github.com/ryuapp), [Martin Trapp](https://github.com/martrapp) and [Michael Stramel](https://github.com/stramel).
path: src/content/blog/astro-570.mdx
user: login: sarah11918
body: ```suggestion
Thanks to all the other contributors who helped make Astro 5.7 possible, including: [Roberto Molina](https://github.com/robertoms99), [Junseong Park](https://github.com/jsparkdev), [ryu](https://github.com/ryuapp), [Martin Trapp](https://github.com/martrapp), [Michael Stramel](https://github.com/stramel), [Armand Philippot](https://github.com/ArmandPhilippot), [Nin3](https://github.com/Nin3lee), [viniciusdeliz](https://github.com/viniciusdeliz), [Juan Diaz](https://github.com/JuanPabloDiaz), [Marcos Corrochano Arroyo](https://github.com/drixswe), [Paul Valladares](https://github.com/dreyfus92), [Bugo](https://github.com/dragomano), [liruifengv](https://github.com/liruifengv), [Thomas Bonnet](https://github.com/thomasbnt), [Ming-jun Lu](https://github.com/mingjunlu), [CHEZ](https://github.com/choonse), [omoyx](https://github.com/omoyx), [emily-shen](https://github.com/emily-shen), [Ariel K](https://github.com/anaxite), [Maciek Palmowski](https://github.com/palmiak), [Matthew Justice](https://github.com/justicematthew), [Adam Matthiesen](https://github.com/Adammatthiesen), and [Louis Escher](https://github.com/louisescher).
```
This is our list! 😅 

We could say "contributors to code and docs" so people themselves aren't surprised, but they are all contributors!
created_at: 2025-04-14T20:20:02Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,305 @@
+---
+title: 'Astro 5.7'
+description: 'Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.'
+homepageLink:
+  title: 'Astro 5.7'
+  subtitle: 'Available now!'
+publishDate: '2025-04-15'
+authors:
+  - matt
+  - florian
+  - ema
+  - nate
+coverImage: '/src/content/blog/_images/astro-570/blog-post-5-7.webp'
+socialImage: '/src/content/blog/_images/astro-570/og-astro-5-7.webp'
+lang: 'en'
+---
+
+import BlogContentImage from '/src/components/BlogContentImage.astro';
+import Note from '~/components/Note.astro';
+import Mention from '/src/components/Mention.astro';
+
+**Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.**
path: src/content/blog/astro-570.mdx
user: login: yanthomasdev
body: nit: these are two words
```suggestion
**Astro 5.7 has a basket load of treats, including stable Sessions and SVG components and a new Experimental Fonts API.**
```
created_at: 2025-04-14T21:11:09Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,305 @@
+---
+title: 'Astro 5.7'
+description: 'Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.'
+homepageLink:
+  title: 'Astro 5.7'
+  subtitle: 'Available now!'
+publishDate: '2025-04-15'
+authors:
+  - matt
+  - florian
+  - ema
+  - nate
+coverImage: '/src/content/blog/_images/astro-570/blog-post-5-7.webp'
+socialImage: '/src/content/blog/_images/astro-570/og-astro-5-7.webp'
+lang: 'en'
+---
+
+import BlogContentImage from '/src/components/BlogContentImage.astro';
+import Note from '~/components/Note.astro';
+import Mention from '/src/components/Mention.astro';
+
+**Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.**
+
+🐣 Full of the joys of northern-hemisphere spring, Astro 5.7 is here with goodies galore:
+
+- [**Experimental Fonts API**](#experimental-fonts-api)
+- [**Sessions API**](#sessions-api)
+- [**SVG Components**](#svg-components)
+- [**Config Imports**](#config-imports)
+
+To upgrade an existing project, use the automated `@astrojs/upgrade` CLI tool. Alternatively, upgrade manually by running the upgrade command for your package manager:
+
+```sh
+# Recommended:
+npx @astrojs/upgrade
+
+# Manual:
+npm install astro@latest
+pnpm upgrade astro --latest
+yarn upgrade astro --latest
+```
+
+## Experimental Fonts API
+
+Almost every website these days uses custom fonts. However, it can be surprisingly complicated to get them right: Why do I get a Flash of Unstyled Text? Should I add a preload link? What about preconnect links? Do I self-host or rely on a third-party provider?
+
+Fonts can have significant performance implications on your site, affecting your visitors' browsing experience and important Core Web Vitals (CWV) metrics. Fortunately, web APIs have greatly improved recently and thanks to amazing initiatives of the open source community (eg. [`unifont`](https://github.com/unjs/unifont/) and [`capsize`](https://github.com/seek-oss/capsize)), we've been able to start working on a great way to use fonts in Astro!
+
+This experimental feature allows you to use fonts from both your file system and several built-in supported providers (e.g. Google, Fontsource, Bunny) through a unified API. Keep your site performant thanks to sensible defaults and automatic optimizations including fallback font generation.
+
+To enable this feature, configure an `experimental.fonts` object with one or more fonts:
+
+```js title="astro.config.mjs"
+import { defineConfig, fontProviders } from "astro/config"
+
+export default defineConfig({
+    experimental: {
+        fonts: [{
+            provider: fontProviders.google(),
+            name: "Roboto",
+            cssVariable: "--font-roboto",
+        }]
+    }
+})
+```
+
+Then, add a `<Font />` component and site-wide styling in your `<head>`:
+
+```astro title="src/components/Head.astro"
+---
+import { Font } from 'astro:assets'
+---
+<Font cssVariable='--font-roboto' preload />
+<style>
+body {
+    font-family: var(--font-roboto);
+}
+</style>
+```
+
+There's so much more to discover! Head over to [the experimental Fonts documentation](https://docs.astro.build/en/reference/experimental-flags/fonts/) for the full API, how to get started, and even how to build your own custom `AstroFontProvider` if we don't yet support your preferred font service.
+
+We'd also appreciate your feedback. Participate in the ongoing development of this feature on the [Fonts RFC](https://github.com/withastro/roadmap/pull/1039) and help shape its future.
+
+## Sessions API
+
+The Astro Sessions API is now stable and ready for production!
+
+Sessions let you securely store data tied to a specific user as they navigate between pages on your site. Unlike cookies, sessions are stored on the server, so you can store larger amounts of data without worrying about size limits or security issues. They are useful for storing things like user data, shopping carts, and form state, and they work without any client-side JavaScript:
+
+
+```astro title="src/components/CartButton.astro" {2}
+---
+const cart = await Astro.session.get('cart');
+export const prerender = false;
+---
+
+<a href="/checkout">🛒 {cart?.length ?? 0} items</a>
+```
+
+They can be used in Astro components, pages, API endpoints, actions, and middleware. The API is the same for all of them:
+
+```ts title="src/actions/addToCart.ts" {9,10}
+import { defineAction } from "astro:actions";
+import { z } from "astro:schema";
+export const server = {
+  addToCart: defineAction({
+    input: z.object({
+      product: z.string(),
+    }),
+    async handler({ product }, { session }) {
+      const cart = await session.get('cart');
+      session.set('cart', [...cart, product]);
+    },
+  }),
+};
+```
+
+### Type-safety
+
+Of course, as this is Astro, your sessions can be type-safe too. Define an interface and you will get type-checking and auto-completion for all of your session data:
+
+
+```ts title="src/env.d.ts"
+declare namespace App {
+  interface SessionData {
+    user: {
+      id: string;
+      name: string;
+    };
+    cart: string[];
+  }
+}
+```
+
+### Cookie-less sessions
+
+The session ID is automatically tracked using a cookie, but you can also use the `session.load()` method to access sessions without cookies . This is useful for things like APIs, where you might want to use a custom header or params to track the session ID:
path: src/content/blog/astro-570.mdx
user: login: yanthomasdev
body: whitespace
```suggestion
The session ID is automatically tracked using a cookie, but you can also use the `session.load()` method to access sessions without cookies. This is useful for things like APIs, where you might want to use a custom header or params to track the session ID:
```
created_at: 2025-04-14T21:12:11Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,305 @@
+---
+title: 'Astro 5.7'
+description: 'Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.'
+homepageLink:
+  title: 'Astro 5.7'
+  subtitle: 'Available now!'
+publishDate: '2025-04-15'
+authors:
+  - matt
+  - florian
+  - ema
+  - nate
+coverImage: '/src/content/blog/_images/astro-570/blog-post-5-7.webp'
+socialImage: '/src/content/blog/_images/astro-570/og-astro-5-7.webp'
+lang: 'en'
+---
+
+import BlogContentImage from '/src/components/BlogContentImage.astro';
+import Note from '~/components/Note.astro';
+import Mention from '/src/components/Mention.astro';
+
+**Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.**
+
+🐣 Full of the joys of northern-hemisphere spring, Astro 5.7 is here with goodies galore:
+
+- [**Experimental Fonts API**](#experimental-fonts-api)
+- [**Sessions API**](#sessions-api)
+- [**SVG Components**](#svg-components)
+- [**Config Imports**](#config-imports)
+
+To upgrade an existing project, use the automated `@astrojs/upgrade` CLI tool. Alternatively, upgrade manually by running the upgrade command for your package manager:
+
+```sh
+# Recommended:
+npx @astrojs/upgrade
+
+# Manual:
+npm install astro@latest
+pnpm upgrade astro --latest
+yarn upgrade astro --latest
+```
+
+## Experimental Fonts API
+
+Almost every website these days uses custom fonts. However, it can be surprisingly complicated to get them right: Why do I get a Flash of Unstyled Text? Should I add a preload link? What about preconnect links? Do I self-host or rely on a third-party provider?
+
+Fonts can have significant performance implications on your site, affecting your visitors' browsing experience and important Core Web Vitals (CWV) metrics. Fortunately, web APIs have greatly improved recently and thanks to amazing initiatives of the open source community (eg. [`unifont`](https://github.com/unjs/unifont/) and [`capsize`](https://github.com/seek-oss/capsize)), we've been able to start working on a great way to use fonts in Astro!
+
+This experimental feature allows you to use fonts from both your file system and several built-in supported providers (e.g. Google, Fontsource, Bunny) through a unified API. Keep your site performant thanks to sensible defaults and automatic optimizations including fallback font generation.
+
+To enable this feature, configure an `experimental.fonts` object with one or more fonts:
+
+```js title="astro.config.mjs"
+import { defineConfig, fontProviders } from "astro/config"
+
+export default defineConfig({
+    experimental: {
+        fonts: [{
+            provider: fontProviders.google(),
+            name: "Roboto",
+            cssVariable: "--font-roboto",
+        }]
+    }
+})
+```
+
+Then, add a `<Font />` component and site-wide styling in your `<head>`:
+
+```astro title="src/components/Head.astro"
+---
+import { Font } from 'astro:assets'
+---
+<Font cssVariable='--font-roboto' preload />
+<style>
+body {
+    font-family: var(--font-roboto);
+}
+</style>
+```
+
+There's so much more to discover! Head over to [the experimental Fonts documentation](https://docs.astro.build/en/reference/experimental-flags/fonts/) for the full API, how to get started, and even how to build your own custom `AstroFontProvider` if we don't yet support your preferred font service.
+
+We'd also appreciate your feedback. Participate in the ongoing development of this feature on the [Fonts RFC](https://github.com/withastro/roadmap/pull/1039) and help shape its future.
+
+## Sessions API
+
+The Astro Sessions API is now stable and ready for production!
+
+Sessions let you securely store data tied to a specific user as they navigate between pages on your site. Unlike cookies, sessions are stored on the server, so you can store larger amounts of data without worrying about size limits or security issues. They are useful for storing things like user data, shopping carts, and form state, and they work without any client-side JavaScript:
+
+
+```astro title="src/components/CartButton.astro" {2}
+---
+const cart = await Astro.session.get('cart');
+export const prerender = false;
+---
+
+<a href="/checkout">🛒 {cart?.length ?? 0} items</a>
+```
+
+They can be used in Astro components, pages, API endpoints, actions, and middleware. The API is the same for all of them:
+
+```ts title="src/actions/addToCart.ts" {9,10}
+import { defineAction } from "astro:actions";
+import { z } from "astro:schema";
+export const server = {
+  addToCart: defineAction({
+    input: z.object({
+      product: z.string(),
+    }),
+    async handler({ product }, { session }) {
+      const cart = await session.get('cart');
+      session.set('cart', [...cart, product]);
+    },
+  }),
+};
+```
+
+### Type-safety
+
+Of course, as this is Astro, your sessions can be type-safe too. Define an interface and you will get type-checking and auto-completion for all of your session data:
+
+
+```ts title="src/env.d.ts"
+declare namespace App {
+  interface SessionData {
+    user: {
+      id: string;
+      name: string;
+    };
+    cart: string[];
+  }
+}
+```
+
+### Cookie-less sessions
+
+The session ID is automatically tracked using a cookie, but you can also use the `session.load()` method to access sessions without cookies . This is useful for things like APIs, where you might want to use a custom header or params to track the session ID:
+
+```ts title="src/pages/api/cart.ts" "session.load(sessionId)"
+export async function POST({ session, request }: APIContext) {
+  const sessionId = request.headers.get('x-session-id');
+
+  // If there is an existing session ID, load it. Otherwise one will be created
path: src/content/blog/astro-570.mdx
user: login: yanthomasdev
body: comma nit
```suggestion
  // If there is an existing session ID, load it. Otherwise, one will be created
```
created_at: 2025-04-14T21:12:38Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,305 @@
+---
+title: 'Astro 5.7'
+description: 'Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.'
+homepageLink:
+  title: 'Astro 5.7'
+  subtitle: 'Available now!'
+publishDate: '2025-04-15'
+authors:
+  - matt
+  - florian
+  - ema
+  - nate
+coverImage: '/src/content/blog/_images/astro-570/blog-post-5-7.webp'
+socialImage: '/src/content/blog/_images/astro-570/og-astro-5-7.webp'
+lang: 'en'
+---
+
+import BlogContentImage from '/src/components/BlogContentImage.astro';
+import Note from '~/components/Note.astro';
+import Mention from '/src/components/Mention.astro';
+
+**Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.**
+
+🐣 Full of the joys of northern-hemisphere spring, Astro 5.7 is here with goodies galore:
+
+- [**Experimental Fonts API**](#experimental-fonts-api)
+- [**Sessions API**](#sessions-api)
+- [**SVG Components**](#svg-components)
+- [**Config Imports**](#config-imports)
+
+To upgrade an existing project, use the automated `@astrojs/upgrade` CLI tool. Alternatively, upgrade manually by running the upgrade command for your package manager:
+
+```sh
+# Recommended:
+npx @astrojs/upgrade
+
+# Manual:
+npm install astro@latest
+pnpm upgrade astro --latest
+yarn upgrade astro --latest
+```
+
+## Experimental Fonts API
+
+Almost every website these days uses custom fonts. However, it can be surprisingly complicated to get them right: Why do I get a Flash of Unstyled Text? Should I add a preload link? What about preconnect links? Do I self-host or rely on a third-party provider?
+
+Fonts can have significant performance implications on your site, affecting your visitors' browsing experience and important Core Web Vitals (CWV) metrics. Fortunately, web APIs have greatly improved recently and thanks to amazing initiatives of the open source community (eg. [`unifont`](https://github.com/unjs/unifont/) and [`capsize`](https://github.com/seek-oss/capsize)), we've been able to start working on a great way to use fonts in Astro!
+
+This experimental feature allows you to use fonts from both your file system and several built-in supported providers (e.g. Google, Fontsource, Bunny) through a unified API. Keep your site performant thanks to sensible defaults and automatic optimizations including fallback font generation.
+
+To enable this feature, configure an `experimental.fonts` object with one or more fonts:
+
+```js title="astro.config.mjs"
+import { defineConfig, fontProviders } from "astro/config"
+
+export default defineConfig({
+    experimental: {
+        fonts: [{
+            provider: fontProviders.google(),
+            name: "Roboto",
+            cssVariable: "--font-roboto",
+        }]
+    }
+})
+```
+
+Then, add a `<Font />` component and site-wide styling in your `<head>`:
+
+```astro title="src/components/Head.astro"
+---
+import { Font } from 'astro:assets'
+---
+<Font cssVariable='--font-roboto' preload />
+<style>
+body {
+    font-family: var(--font-roboto);
+}
+</style>
+```
+
+There's so much more to discover! Head over to [the experimental Fonts documentation](https://docs.astro.build/en/reference/experimental-flags/fonts/) for the full API, how to get started, and even how to build your own custom `AstroFontProvider` if we don't yet support your preferred font service.
+
+We'd also appreciate your feedback. Participate in the ongoing development of this feature on the [Fonts RFC](https://github.com/withastro/roadmap/pull/1039) and help shape its future.
+
+## Sessions API
+
+The Astro Sessions API is now stable and ready for production!
+
+Sessions let you securely store data tied to a specific user as they navigate between pages on your site. Unlike cookies, sessions are stored on the server, so you can store larger amounts of data without worrying about size limits or security issues. They are useful for storing things like user data, shopping carts, and form state, and they work without any client-side JavaScript:
+
+
+```astro title="src/components/CartButton.astro" {2}
+---
+const cart = await Astro.session.get('cart');
+export const prerender = false;
+---
+
+<a href="/checkout">🛒 {cart?.length ?? 0} items</a>
+```
+
+They can be used in Astro components, pages, API endpoints, actions, and middleware. The API is the same for all of them:
+
+```ts title="src/actions/addToCart.ts" {9,10}
+import { defineAction } from "astro:actions";
+import { z } from "astro:schema";
+export const server = {
+  addToCart: defineAction({
+    input: z.object({
+      product: z.string(),
+    }),
+    async handler({ product }, { session }) {
+      const cart = await session.get('cart');
+      session.set('cart', [...cart, product]);
+    },
+  }),
+};
+```
+
+### Type-safety
+
+Of course, as this is Astro, your sessions can be type-safe too. Define an interface and you will get type-checking and auto-completion for all of your session data:
+
+
+```ts title="src/env.d.ts"
+declare namespace App {
+  interface SessionData {
+    user: {
+      id: string;
+      name: string;
+    };
+    cart: string[];
+  }
+}
+```
+
+### Cookie-less sessions
+
+The session ID is automatically tracked using a cookie, but you can also use the `session.load()` method to access sessions without cookies . This is useful for things like APIs, where you might want to use a custom header or params to track the session ID:
+
+```ts title="src/pages/api/cart.ts" "session.load(sessionId)"
+export async function POST({ session, request }: APIContext) {
+  const sessionId = request.headers.get('x-session-id');
+
+  // If there is an existing session ID, load it. Otherwise one will be created
+  if (sessionId) {
+    await session.load(sessionId);
+  } 
+
+  const cart = await session.get('cart');
+  const data = await request.json<{ item: string }>();
+
+  if (!data?.item) {
+    return new Response('Item is required', { status: 400 });
+  }
+  session.set('cart', [...cart, data.item]);
+  // Return the cart and session ID
+  return Response.json({ cart, sessionId: session.sessionId });
+}
+```
+
+
+### Storage drivers
+
+Astro sessions use storage drivers to persist the data, and these are either zero-config or require minimal setup for all official Astro adapters. Alternatively you can use any [unstorage](https://unstorage.unjs.io/) driver, which supports dozens of storage backends such as Redis and MongoDB.
path: src/content/blog/astro-570.mdx
user: login: yanthomasdev
body: ```suggestion
Astro sessions use storage drivers to persist the data, and these are either zero-config or require minimal setup for all official Astro adapters. Alternatively, you can use any [unstorage](https://unstorage.unjs.io/) driver, which supports dozens of storage backends such as Redis and MongoDB.
```
created_at: 2025-04-14T21:13:24Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,305 @@
+---
+title: 'Astro 5.7'
+description: 'Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.'
+homepageLink:
+  title: 'Astro 5.7'
+  subtitle: 'Available now!'
+publishDate: '2025-04-15'
+authors:
+  - matt
+  - florian
+  - ema
+  - nate
+coverImage: '/src/content/blog/_images/astro-570/blog-post-5-7.webp'
+socialImage: '/src/content/blog/_images/astro-570/og-astro-5-7.webp'
+lang: 'en'
+---
+
+import BlogContentImage from '/src/components/BlogContentImage.astro';
+import Note from '~/components/Note.astro';
+import Mention from '/src/components/Mention.astro';
+
+**Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.**
+
+🐣 Full of the joys of northern-hemisphere spring, Astro 5.7 is here with goodies galore:
+
+- [**Experimental Fonts API**](#experimental-fonts-api)
+- [**Sessions API**](#sessions-api)
+- [**SVG Components**](#svg-components)
+- [**Config Imports**](#config-imports)
+
+To upgrade an existing project, use the automated `@astrojs/upgrade` CLI tool. Alternatively, upgrade manually by running the upgrade command for your package manager:
+
+```sh
+# Recommended:
+npx @astrojs/upgrade
+
+# Manual:
+npm install astro@latest
+pnpm upgrade astro --latest
+yarn upgrade astro --latest
+```
+
+## Experimental Fonts API
+
+Almost every website these days uses custom fonts. However, it can be surprisingly complicated to get them right: Why do I get a Flash of Unstyled Text? Should I add a preload link? What about preconnect links? Do I self-host or rely on a third-party provider?
+
+Fonts can have significant performance implications on your site, affecting your visitors' browsing experience and important Core Web Vitals (CWV) metrics. Fortunately, web APIs have greatly improved recently and thanks to amazing initiatives of the open source community (eg. [`unifont`](https://github.com/unjs/unifont/) and [`capsize`](https://github.com/seek-oss/capsize)), we've been able to start working on a great way to use fonts in Astro!
+
+This experimental feature allows you to use fonts from both your file system and several built-in supported providers (e.g. Google, Fontsource, Bunny) through a unified API. Keep your site performant thanks to sensible defaults and automatic optimizations including fallback font generation.
+
+To enable this feature, configure an `experimental.fonts` object with one or more fonts:
+
+```js title="astro.config.mjs"
+import { defineConfig, fontProviders } from "astro/config"
+
+export default defineConfig({
+    experimental: {
+        fonts: [{
+            provider: fontProviders.google(),
+            name: "Roboto",
+            cssVariable: "--font-roboto",
+        }]
+    }
+})
+```
+
+Then, add a `<Font />` component and site-wide styling in your `<head>`:
+
+```astro title="src/components/Head.astro"
+---
+import { Font } from 'astro:assets'
+---
+<Font cssVariable='--font-roboto' preload />
+<style>
+body {
+    font-family: var(--font-roboto);
+}
+</style>
+```
+
+There's so much more to discover! Head over to [the experimental Fonts documentation](https://docs.astro.build/en/reference/experimental-flags/fonts/) for the full API, how to get started, and even how to build your own custom `AstroFontProvider` if we don't yet support your preferred font service.
+
+We'd also appreciate your feedback. Participate in the ongoing development of this feature on the [Fonts RFC](https://github.com/withastro/roadmap/pull/1039) and help shape its future.
+
+## Sessions API
+
+The Astro Sessions API is now stable and ready for production!
+
+Sessions let you securely store data tied to a specific user as they navigate between pages on your site. Unlike cookies, sessions are stored on the server, so you can store larger amounts of data without worrying about size limits or security issues. They are useful for storing things like user data, shopping carts, and form state, and they work without any client-side JavaScript:
+
+
+```astro title="src/components/CartButton.astro" {2}
+---
+const cart = await Astro.session.get('cart');
+export const prerender = false;
+---
+
+<a href="/checkout">🛒 {cart?.length ?? 0} items</a>
+```
+
+They can be used in Astro components, pages, API endpoints, actions, and middleware. The API is the same for all of them:
+
+```ts title="src/actions/addToCart.ts" {9,10}
+import { defineAction } from "astro:actions";
+import { z } from "astro:schema";
+export const server = {
+  addToCart: defineAction({
+    input: z.object({
+      product: z.string(),
+    }),
+    async handler({ product }, { session }) {
+      const cart = await session.get('cart');
+      session.set('cart', [...cart, product]);
+    },
+  }),
+};
+```
+
+### Type-safety
+
+Of course, as this is Astro, your sessions can be type-safe too. Define an interface and you will get type-checking and auto-completion for all of your session data:
+
+
+```ts title="src/env.d.ts"
+declare namespace App {
+  interface SessionData {
+    user: {
+      id: string;
+      name: string;
+    };
+    cart: string[];
+  }
+}
+```
+
+### Cookie-less sessions
+
+The session ID is automatically tracked using a cookie, but you can also use the `session.load()` method to access sessions without cookies . This is useful for things like APIs, where you might want to use a custom header or params to track the session ID:
+
+```ts title="src/pages/api/cart.ts" "session.load(sessionId)"
+export async function POST({ session, request }: APIContext) {
+  const sessionId = request.headers.get('x-session-id');
+
+  // If there is an existing session ID, load it. Otherwise one will be created
+  if (sessionId) {
+    await session.load(sessionId);
+  } 
+
+  const cart = await session.get('cart');
+  const data = await request.json<{ item: string }>();
+
+  if (!data?.item) {
+    return new Response('Item is required', { status: 400 });
+  }
+  session.set('cart', [...cart, data.item]);
+  // Return the cart and session ID
+  return Response.json({ cart, sessionId: session.sessionId });
+}
+```
+
+
+### Storage drivers
+
+Astro sessions use storage drivers to persist the data, and these are either zero-config or require minimal setup for all official Astro adapters. Alternatively you can use any [unstorage](https://unstorage.unjs.io/) driver, which supports dozens of storage backends such as Redis and MongoDB.
+
+- **[Node](https://docs.astro.build/en/guides/integrations-guide/node/#sessions)**: zero-config filesystem driver
+- **[Netlify](https://docs.astro.build/en/guides/integrations-guide/netlify/#sessions)**: zero-config Netlify Blobs driver
+- **[Cloudflare](https://docs.astro.build/en/guides/integrations-guide/cloudflare/#sessions)**: minimal-config Workers KV driver
+- **[Vercel](https://docs.astro.build/en/guides/integrations-guide/vercel/#sessions)**: minimal-config Redis/Upstash driver
+
+On any of these platforms you can easily switch out the driver for a different one if you don't want to use the default.
path: src/content/blog/astro-570.mdx
user: login: yanthomasdev
body: comma nit
```suggestion
On any of these platforms, you can easily switch out the driver for a different one if you don't want to use the default.
```
created_at: 2025-04-14T21:13:56Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,305 @@
+---
+title: 'Astro 5.7'
+description: 'Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.'
+homepageLink:
+  title: 'Astro 5.7'
+  subtitle: 'Available now!'
+publishDate: '2025-04-15'
+authors:
+  - matt
+  - florian
+  - ema
+  - nate
+coverImage: '/src/content/blog/_images/astro-570/blog-post-5-7.webp'
+socialImage: '/src/content/blog/_images/astro-570/og-astro-5-7.webp'
+lang: 'en'
+---
+
+import BlogContentImage from '/src/components/BlogContentImage.astro';
+import Note from '~/components/Note.astro';
+import Mention from '/src/components/Mention.astro';
+
+**Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.**
+
+🐣 Full of the joys of northern-hemisphere spring, Astro 5.7 is here with goodies galore:
+
+- [**Experimental Fonts API**](#experimental-fonts-api)
+- [**Sessions API**](#sessions-api)
+- [**SVG Components**](#svg-components)
+- [**Config Imports**](#config-imports)
+
+To upgrade an existing project, use the automated `@astrojs/upgrade` CLI tool. Alternatively, upgrade manually by running the upgrade command for your package manager:
+
+```sh
+# Recommended:
+npx @astrojs/upgrade
+
+# Manual:
+npm install astro@latest
+pnpm upgrade astro --latest
+yarn upgrade astro --latest
+```
+
+## Experimental Fonts API
+
+Almost every website these days uses custom fonts. However, it can be surprisingly complicated to get them right: Why do I get a Flash of Unstyled Text? Should I add a preload link? What about preconnect links? Do I self-host or rely on a third-party provider?
+
+Fonts can have significant performance implications on your site, affecting your visitors' browsing experience and important Core Web Vitals (CWV) metrics. Fortunately, web APIs have greatly improved recently and thanks to amazing initiatives of the open source community (eg. [`unifont`](https://github.com/unjs/unifont/) and [`capsize`](https://github.com/seek-oss/capsize)), we've been able to start working on a great way to use fonts in Astro!
+
+This experimental feature allows you to use fonts from both your file system and several built-in supported providers (e.g. Google, Fontsource, Bunny) through a unified API. Keep your site performant thanks to sensible defaults and automatic optimizations including fallback font generation.
+
+To enable this feature, configure an `experimental.fonts` object with one or more fonts:
+
+```js title="astro.config.mjs"
+import { defineConfig, fontProviders } from "astro/config"
+
+export default defineConfig({
+    experimental: {
+        fonts: [{
+            provider: fontProviders.google(),
+            name: "Roboto",
+            cssVariable: "--font-roboto",
+        }]
+    }
+})
+```
+
+Then, add a `<Font />` component and site-wide styling in your `<head>`:
+
+```astro title="src/components/Head.astro"
+---
+import { Font } from 'astro:assets'
+---
+<Font cssVariable='--font-roboto' preload />
+<style>
+body {
+    font-family: var(--font-roboto);
+}
+</style>
+```
+
+There's so much more to discover! Head over to [the experimental Fonts documentation](https://docs.astro.build/en/reference/experimental-flags/fonts/) for the full API, how to get started, and even how to build your own custom `AstroFontProvider` if we don't yet support your preferred font service.
+
+We'd also appreciate your feedback. Participate in the ongoing development of this feature on the [Fonts RFC](https://github.com/withastro/roadmap/pull/1039) and help shape its future.
+
+## Sessions API
+
+The Astro Sessions API is now stable and ready for production!
+
+Sessions let you securely store data tied to a specific user as they navigate between pages on your site. Unlike cookies, sessions are stored on the server, so you can store larger amounts of data without worrying about size limits or security issues. They are useful for storing things like user data, shopping carts, and form state, and they work without any client-side JavaScript:
+
+
+```astro title="src/components/CartButton.astro" {2}
+---
+const cart = await Astro.session.get('cart');
+export const prerender = false;
+---
+
+<a href="/checkout">🛒 {cart?.length ?? 0} items</a>
+```
+
+They can be used in Astro components, pages, API endpoints, actions, and middleware. The API is the same for all of them:
+
+```ts title="src/actions/addToCart.ts" {9,10}
+import { defineAction } from "astro:actions";
+import { z } from "astro:schema";
+export const server = {
+  addToCart: defineAction({
+    input: z.object({
+      product: z.string(),
+    }),
+    async handler({ product }, { session }) {
+      const cart = await session.get('cart');
+      session.set('cart', [...cart, product]);
+    },
+  }),
+};
+```
+
+### Type-safety
+
+Of course, as this is Astro, your sessions can be type-safe too. Define an interface and you will get type-checking and auto-completion for all of your session data:
+
+
+```ts title="src/env.d.ts"
+declare namespace App {
+  interface SessionData {
+    user: {
+      id: string;
+      name: string;
+    };
+    cart: string[];
+  }
+}
+```
+
+### Cookie-less sessions
+
+The session ID is automatically tracked using a cookie, but you can also use the `session.load()` method to access sessions without cookies . This is useful for things like APIs, where you might want to use a custom header or params to track the session ID:
+
+```ts title="src/pages/api/cart.ts" "session.load(sessionId)"
+export async function POST({ session, request }: APIContext) {
+  const sessionId = request.headers.get('x-session-id');
+
+  // If there is an existing session ID, load it. Otherwise one will be created
+  if (sessionId) {
+    await session.load(sessionId);
+  } 
+
+  const cart = await session.get('cart');
+  const data = await request.json<{ item: string }>();
+
+  if (!data?.item) {
+    return new Response('Item is required', { status: 400 });
+  }
+  session.set('cart', [...cart, data.item]);
+  // Return the cart and session ID
+  return Response.json({ cart, sessionId: session.sessionId });
+}
+```
+
+
+### Storage drivers
+
+Astro sessions use storage drivers to persist the data, and these are either zero-config or require minimal setup for all official Astro adapters. Alternatively you can use any [unstorage](https://unstorage.unjs.io/) driver, which supports dozens of storage backends such as Redis and MongoDB.
+
+- **[Node](https://docs.astro.build/en/guides/integrations-guide/node/#sessions)**: zero-config filesystem driver
+- **[Netlify](https://docs.astro.build/en/guides/integrations-guide/netlify/#sessions)**: zero-config Netlify Blobs driver
+- **[Cloudflare](https://docs.astro.build/en/guides/integrations-guide/cloudflare/#sessions)**: minimal-config Workers KV driver
+- **[Vercel](https://docs.astro.build/en/guides/integrations-guide/vercel/#sessions)**: minimal-config Redis/Upstash driver
+
+On any of these platforms you can easily switch out the driver for a different one if you don't want to use the default.
+
+```js title="astro.config.mjs" {5-10}
+import { defineConfig } from 'astro/config';
+import netlify from '@astrojs/netlify';
+
+export default defineConfig({
+  // ...
+  adapter: netlify(),
+  session: {
+    driver: 'redis',
+    options: {
+      url: process.env.REDIS_URL,
+    },
+  },
+});
+
+```
+
+### Upgrading from experimental sessions
+
+If you were using the experimental sessions API, you should remove the experimental flag from your `astro.config.mjs` file:
+
+```js title="astro.config.mjs" del={6}
+import { defineConfig } from 'astro/config';
+
+export default defineConfig({
+  // ...
+  experimental: {
+    session: false,
+  },
+});
+```
+Check out the [sessions guide](https://docs.astro.build/en/guides/sessions/) to learn more about how to use them in your Astro project.
+
+## SVG Components
+
+Astro now supports local SVG files as components! Reference the default import of any `.svg` file and use it as you would use any `.astro` component. The content will be inlined directly into your HTML.
+
+You can pass props such as `width`, `height`, `fill`, `stroke`, and any other attribute accepted by the [native `<svg>` element](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg). 
+
+```astro title="src/components/MyAstroComponent.astro"
+---
+import Logo from './path/to/svg/file.svg';
+---
+
+<Logo width={64} height={64} fill="currentColor" />
+```
+
+Take a look at [the SVG components documentation](https://docs.astro.build/en/guides/images#svg-components) for more details.
+
+Special thanks to [Michael Stramel](https://github.com/stramel) for his work on this feature!
+
+### Upgrading from experimental SVG
+
+If you were previously using the experimental SVG API, you must remove the experimental flag from your `astro.config.mjs` file.
+
+```js title="astro.config.mjs" del={6}
+import { defineConfig } from 'astro/config';
+
+export default defineConfig({
+  // ...
+  experimental: {
+    svg: true,
+  },
+});
+```
+
+Note that [Astro 5.6](/blog/astro-560) introduced [some breaking changes to this flag](/blog/astro-560/#breaking-changes-to-the-experimental-svg-api). Please check that your code is up-to-date with the latest, stable version of this API.
+
+## Config Imports
+
+The new virtual module `astro:config` is now stable!
+
+The virtual module allows you to import a subset of the Astro configuration, with type-safety in mind. Two sub-paths are exposed for controlled access to your configuration:
+
+- `astro:config/client`: exposes config information that is safe to expose to the client.
+- `astro:config/server`: exposes additional information that is safe to expose to the server, such as file/dir paths.
+
+For example, you can now build your own path utilities without relying on an integration. Properties like `base` and `trailingSlash` set in your configuration can be imported and used in a `.js` file:
+
+```js title="astro.config.mjs"
+export default defineConfig({
+    base: "store/",
+    trailingSlash: "always"
+})
+```
+
+```js title="src/utils.js"
+import { trailingSlash, base } from 'astro:config/client';
+
+// This method adds a forwards slash to paths, and prepends the `base`
path: src/content/blog/astro-570.mdx
user: login: yanthomasdev
body: ```suggestion
// This method adds a forward slash to paths, and prepends the `base`
```
created_at: 2025-04-14T21:14:43Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,305 @@
+---
+title: 'Astro 5.7'
+description: 'Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.'
+homepageLink:
+  title: 'Astro 5.7'
+  subtitle: 'Available now!'
+publishDate: '2025-04-15'
+authors:
+  - matt
+  - florian
+  - ema
+  - nate
+coverImage: '/src/content/blog/_images/astro-570/blog-post-5-7.webp'
+socialImage: '/src/content/blog/_images/astro-570/og-astro-5-7.webp'
+lang: 'en'
+---
+
+import BlogContentImage from '/src/components/BlogContentImage.astro';
+import Note from '~/components/Note.astro';
+import Mention from '/src/components/Mention.astro';
+
+**Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.**
+
+🐣 Full of the joys of northern-hemisphere spring, Astro 5.7 is here with goodies galore:
+
+- [**Experimental Fonts API**](#experimental-fonts-api)
+- [**Sessions API**](#sessions-api)
+- [**SVG Components**](#svg-components)
+- [**Config Imports**](#config-imports)
+
+To upgrade an existing project, use the automated `@astrojs/upgrade` CLI tool. Alternatively, upgrade manually by running the upgrade command for your package manager:
+
+```sh
+# Recommended:
+npx @astrojs/upgrade
+
+# Manual:
+npm install astro@latest
+pnpm upgrade astro --latest
+yarn upgrade astro --latest
+```
+
+## Experimental Fonts API
+
+Almost every website these days uses custom fonts. However, it can be surprisingly complicated to get them right: Why do I get a Flash of Unstyled Text? Should I add a preload link? What about preconnect links? Do I self-host or rely on a third-party provider?
+
+Fonts can have significant performance implications on your site, affecting your visitors' browsing experience and important Core Web Vitals (CWV) metrics. Fortunately, web APIs have greatly improved recently and thanks to amazing initiatives of the open source community (eg. [`unifont`](https://github.com/unjs/unifont/) and [`capsize`](https://github.com/seek-oss/capsize)), we've been able to start working on a great way to use fonts in Astro!
+
+This experimental feature allows you to use fonts from both your file system and several built-in supported providers (e.g. Google, Fontsource, Bunny) through a unified API. Keep your site performant thanks to sensible defaults and automatic optimizations including fallback font generation.
+
+To enable this feature, configure an `experimental.fonts` object with one or more fonts:
+
+```js title="astro.config.mjs"
+import { defineConfig, fontProviders } from "astro/config"
+
+export default defineConfig({
+    experimental: {
+        fonts: [{
+            provider: fontProviders.google(),
+            name: "Roboto",
+            cssVariable: "--font-roboto",
+        }]
+    }
+})
+```
+
+Then, add a `<Font />` component and site-wide styling in your `<head>`:
+
+```astro title="src/components/Head.astro"
+---
+import { Font } from 'astro:assets'
+---
+<Font cssVariable='--font-roboto' preload />
+<style>
+body {
+    font-family: var(--font-roboto);
+}
+</style>
+```
+
+There's so much more to discover! Head over to [the experimental Fonts documentation](https://docs.astro.build/en/reference/experimental-flags/fonts/) for the full API, how to get started, and even how to build your own custom `AstroFontProvider` if we don't yet support your preferred font service.
+
+We'd also appreciate your feedback. Participate in the ongoing development of this feature on the [Fonts RFC](https://github.com/withastro/roadmap/pull/1039) and help shape its future.
+
+## Sessions API
+
+The Astro Sessions API is now stable and ready for production!
+
+Sessions let you securely store data tied to a specific user as they navigate between pages on your site. Unlike cookies, sessions are stored on the server, so you can store larger amounts of data without worrying about size limits or security issues. They are useful for storing things like user data, shopping carts, and form state, and they work without any client-side JavaScript:
+
+
+```astro title="src/components/CartButton.astro" {2}
+---
+const cart = await Astro.session.get('cart');
+export const prerender = false;
+---
+
+<a href="/checkout">🛒 {cart?.length ?? 0} items</a>
+```
+
+They can be used in Astro components, pages, API endpoints, actions, and middleware. The API is the same for all of them:
+
+```ts title="src/actions/addToCart.ts" {9,10}
+import { defineAction } from "astro:actions";
+import { z } from "astro:schema";
+export const server = {
+  addToCart: defineAction({
+    input: z.object({
+      product: z.string(),
+    }),
+    async handler({ product }, { session }) {
+      const cart = await session.get('cart');
+      session.set('cart', [...cart, product]);
+    },
+  }),
+};
+```
+
+### Type-safety
+
+Of course, as this is Astro, your sessions can be type-safe too. Define an interface and you will get type-checking and auto-completion for all of your session data:
+
+
+```ts title="src/env.d.ts"
+declare namespace App {
+  interface SessionData {
+    user: {
+      id: string;
+      name: string;
+    };
+    cart: string[];
+  }
+}
+```
+
+### Cookie-less sessions
+
+The session ID is automatically tracked using a cookie, but you can also use the `session.load()` method to access sessions without cookies . This is useful for things like APIs, where you might want to use a custom header or params to track the session ID:
+
+```ts title="src/pages/api/cart.ts" "session.load(sessionId)"
+export async function POST({ session, request }: APIContext) {
+  const sessionId = request.headers.get('x-session-id');
+
+  // If there is an existing session ID, load it. Otherwise one will be created
+  if (sessionId) {
+    await session.load(sessionId);
+  } 
+
+  const cart = await session.get('cart');
+  const data = await request.json<{ item: string }>();
+
+  if (!data?.item) {
+    return new Response('Item is required', { status: 400 });
+  }
+  session.set('cart', [...cart, data.item]);
+  // Return the cart and session ID
+  return Response.json({ cart, sessionId: session.sessionId });
+}
+```
+
+
+### Storage drivers
+
+Astro sessions use storage drivers to persist the data, and these are either zero-config or require minimal setup for all official Astro adapters. Alternatively you can use any [unstorage](https://unstorage.unjs.io/) driver, which supports dozens of storage backends such as Redis and MongoDB.
+
+- **[Node](https://docs.astro.build/en/guides/integrations-guide/node/#sessions)**: zero-config filesystem driver
+- **[Netlify](https://docs.astro.build/en/guides/integrations-guide/netlify/#sessions)**: zero-config Netlify Blobs driver
+- **[Cloudflare](https://docs.astro.build/en/guides/integrations-guide/cloudflare/#sessions)**: minimal-config Workers KV driver
+- **[Vercel](https://docs.astro.build/en/guides/integrations-guide/vercel/#sessions)**: minimal-config Redis/Upstash driver
+
+On any of these platforms you can easily switch out the driver for a different one if you don't want to use the default.
+
+```js title="astro.config.mjs" {5-10}
+import { defineConfig } from 'astro/config';
+import netlify from '@astrojs/netlify';
+
+export default defineConfig({
+  // ...
+  adapter: netlify(),
+  session: {
+    driver: 'redis',
+    options: {
+      url: process.env.REDIS_URL,
+    },
+  },
+});
+
+```
+
+### Upgrading from experimental sessions
+
+If you were using the experimental sessions API, you should remove the experimental flag from your `astro.config.mjs` file:
+
+```js title="astro.config.mjs" del={6}
+import { defineConfig } from 'astro/config';
+
+export default defineConfig({
+  // ...
+  experimental: {
+    session: false,
+  },
+});
+```
+Check out the [sessions guide](https://docs.astro.build/en/guides/sessions/) to learn more about how to use them in your Astro project.
+
+## SVG Components
+
+Astro now supports local SVG files as components! Reference the default import of any `.svg` file and use it as you would use any `.astro` component. The content will be inlined directly into your HTML.
+
+You can pass props such as `width`, `height`, `fill`, `stroke`, and any other attribute accepted by the [native `<svg>` element](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg). 
+
+```astro title="src/components/MyAstroComponent.astro"
+---
+import Logo from './path/to/svg/file.svg';
+---
+
+<Logo width={64} height={64} fill="currentColor" />
+```
+
+Take a look at [the SVG components documentation](https://docs.astro.build/en/guides/images#svg-components) for more details.
+
+Special thanks to [Michael Stramel](https://github.com/stramel) for his work on this feature!
+
+### Upgrading from experimental SVG
+
+If you were previously using the experimental SVG API, you must remove the experimental flag from your `astro.config.mjs` file.
+
+```js title="astro.config.mjs" del={6}
+import { defineConfig } from 'astro/config';
+
+export default defineConfig({
+  // ...
+  experimental: {
+    svg: true,
+  },
+});
+```
+
+Note that [Astro 5.6](/blog/astro-560) introduced [some breaking changes to this flag](/blog/astro-560/#breaking-changes-to-the-experimental-svg-api). Please check that your code is up-to-date with the latest, stable version of this API.
+
+## Config Imports
+
+The new virtual module `astro:config` is now stable!
+
+The virtual module allows you to import a subset of the Astro configuration, with type-safety in mind. Two sub-paths are exposed for controlled access to your configuration:
+
+- `astro:config/client`: exposes config information that is safe to expose to the client.
+- `astro:config/server`: exposes additional information that is safe to expose to the server, such as file/dir paths.
+
+For example, you can now build your own path utilities without relying on an integration. Properties like `base` and `trailingSlash` set in your configuration can be imported and used in a `.js` file:
+
+```js title="astro.config.mjs"
+export default defineConfig({
+    base: "store/",
+    trailingSlash: "always"
+})
+```
+
+```js title="src/utils.js"
+import { trailingSlash, base } from 'astro:config/client';
+
+// This method adds a forwards slash to paths, and prepends the `base`
+function addForwardSlashAndBase(path) {
+    let finalPath;
+    if (trailingSlash === 'always') {
+      finalPath = path.endsWith('/') ? path : path + '/';
+    } else {
+      finalPath = path;
+    }
+    if (base !== "/") {
+        return base + finalPath
+    }
+    return finalPath
+}
+```
+
+Use this path utility that depends on your configuration settings throughout your project, for example, for more control over page links: 
+```astro title="src/pages/index.astro"
+---
+import { addForwardSlashAndBase } from "@src/utils.js";
+
+const cartUrl = addForwardSlashAndBase("cart"); // it will return "store/cart/"
+---
+
+<a href={cartUrl}>Cart</a>
+```
+
+We `config`ured you'd enjoy this new ability to access your settings, with Astro's trademark type safety to help you get it right!
path: src/content/blog/astro-570.mdx
user: login: yanthomasdev
body: Thanks for the inspiration for a future first-time contributor alert!
created_at: 2025-04-14T21:15:53Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,305 @@
+---
+title: 'Astro 5.7'
+description: 'Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.'
+homepageLink:
+  title: 'Astro 5.7'
+  subtitle: 'Available now!'
+publishDate: '2025-04-15'
+authors:
+  - matt
+  - florian
+  - ema
+  - nate
+coverImage: '/src/content/blog/_images/astro-570/blog-post-5-7.webp'
+socialImage: '/src/content/blog/_images/astro-570/og-astro-5-7.webp'
+lang: 'en'
+---
+
+import BlogContentImage from '/src/components/BlogContentImage.astro';
+import Note from '~/components/Note.astro';
+import Mention from '/src/components/Mention.astro';
+
+**Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.**
+
+🐣 Full of the joys of northern-hemisphere spring, Astro 5.7 is here with goodies galore:
+
+- [**Experimental Fonts API**](#experimental-fonts-api)
+- [**Sessions API**](#sessions-api)
+- [**SVG Components**](#svg-components)
+- [**Config Imports**](#config-imports)
+
+To upgrade an existing project, use the automated `@astrojs/upgrade` CLI tool. Alternatively, upgrade manually by running the upgrade command for your package manager:
+
+```sh
+# Recommended:
+npx @astrojs/upgrade
+
+# Manual:
+npm install astro@latest
+pnpm upgrade astro --latest
+yarn upgrade astro --latest
+```
+
+## Experimental Fonts API
+
+Almost every website these days uses custom fonts. However, it can be surprisingly complicated to get them right: Why do I get a Flash of Unstyled Text? Should I add a preload link? What about preconnect links? Do I self-host or rely on a third-party provider?
+
+Fonts can have significant performance implications on your site, affecting your visitors' browsing experience and important Core Web Vitals (CWV) metrics. Fortunately, web APIs have greatly improved recently and thanks to amazing initiatives of the open source community (eg. [`unifont`](https://github.com/unjs/unifont/) and [`capsize`](https://github.com/seek-oss/capsize)), we've been able to start working on a great way to use fonts in Astro!
+
+This experimental feature allows you to use fonts from both your file system and several built-in supported providers (e.g. Google, Fontsource, Bunny) through a unified API. Keep your site performant thanks to sensible defaults and automatic optimizations including fallback font generation.
+
+To enable this feature, configure an `experimental.fonts` object with one or more fonts:
+
+```js title="astro.config.mjs"
+import { defineConfig, fontProviders } from "astro/config"
+
+export default defineConfig({
+    experimental: {
+        fonts: [{
+            provider: fontProviders.google(),
+            name: "Roboto",
+            cssVariable: "--font-roboto",
+        }]
+    }
+})
+```
+
+Then, add a `<Font />` component and site-wide styling in your `<head>`:
+
+```astro title="src/components/Head.astro"
+---
+import { Font } from 'astro:assets'
+---
+<Font cssVariable='--font-roboto' preload />
+<style>
+body {
+    font-family: var(--font-roboto);
+}
+</style>
+```
+
+There's so much more to discover! Head over to [the experimental Fonts documentation](https://docs.astro.build/en/reference/experimental-flags/fonts/) for the full API, how to get started, and even how to build your own custom `AstroFontProvider` if we don't yet support your preferred font service.
+
+We'd also appreciate your feedback. Participate in the ongoing development of this feature on the [Fonts RFC](https://github.com/withastro/roadmap/pull/1039) and help shape its future.
+
+## Sessions API
+
+The Astro Sessions API is now stable and ready for production!
+
+Sessions let you securely store data tied to a specific user as they navigate between pages on your site. Unlike cookies, sessions are stored on the server, so you can store larger amounts of data without worrying about size limits or security issues. They are useful for storing things like user data, shopping carts, and form state, and they work without any client-side JavaScript:
+
+
+```astro title="src/components/CartButton.astro" {2}
+---
+const cart = await Astro.session.get('cart');
+export const prerender = false;
+---
+
+<a href="/checkout">🛒 {cart?.length ?? 0} items</a>
+```
+
+They can be used in Astro components, pages, API endpoints, actions, and middleware. The API is the same for all of them:
+
+```ts title="src/actions/addToCart.ts" {9,10}
+import { defineAction } from "astro:actions";
+import { z } from "astro:schema";
+export const server = {
+  addToCart: defineAction({
+    input: z.object({
+      product: z.string(),
+    }),
+    async handler({ product }, { session }) {
+      const cart = await session.get('cart');
+      session.set('cart', [...cart, product]);
+    },
+  }),
+};
+```
path: src/content/blog/astro-570.mdx
user: login: yanthomasdev
body: Adding some breathing space between imports and code to be consistent with other samples.
````suggestion
```ts title="src/actions/addToCart.ts" {9,10}
import { defineAction } from "astro:actions";
import { z } from "astro:schema";

export const server = {
  addToCart: defineAction({
    input: z.object({
      product: z.string(),
    }),
    async handler({ product }, { session }) {
      const cart = await session.get('cart');
      session.set('cart', [...cart, product]);
    },
  }),
};
```
````
created_at: 2025-04-14T21:19:19Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,305 @@
+---
+title: 'Astro 5.7'
+description: 'Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.'
+homepageLink:
+  title: 'Astro 5.7'
+  subtitle: 'Available now!'
+publishDate: '2025-04-15'
+authors:
+  - matt
+  - florian
+  - ema
+  - nate
+coverImage: '/src/content/blog/_images/astro-570/blog-post-5-7.webp'
+socialImage: '/src/content/blog/_images/astro-570/og-astro-5-7.webp'
+lang: 'en'
+---
+
+import BlogContentImage from '/src/components/BlogContentImage.astro';
+import Note from '~/components/Note.astro';
+import Mention from '/src/components/Mention.astro';
+
+**Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.**
+
+🐣 Full of the joys of northern-hemisphere spring, Astro 5.7 is here with goodies galore:
+
+- [**Experimental Fonts API**](#experimental-fonts-api)
+- [**Sessions API**](#sessions-api)
+- [**SVG Components**](#svg-components)
+- [**Config Imports**](#config-imports)
+
+To upgrade an existing project, use the automated `@astrojs/upgrade` CLI tool. Alternatively, upgrade manually by running the upgrade command for your package manager:
+
+```sh
+# Recommended:
+npx @astrojs/upgrade
+
+# Manual:
+npm install astro@latest
+pnpm upgrade astro --latest
+yarn upgrade astro --latest
+```
+
+## Experimental Fonts API
+
+Almost every website these days uses custom fonts. However, it can be surprisingly complicated to get them right: Why do I get a Flash of Unstyled Text? Should I add a preload link? What about preconnect links? Do I self-host or rely on a third-party provider?
+
+Fonts can have significant performance implications on your site, affecting your visitors' browsing experience and important Core Web Vitals (CWV) metrics. Fortunately, web APIs have greatly improved recently and thanks to amazing initiatives of the open source community (eg. [`unifont`](https://github.com/unjs/unifont/) and [`capsize`](https://github.com/seek-oss/capsize)), we've been able to start working on a great way to use fonts in Astro!
+
+This experimental feature allows you to use fonts from both your file system and several built-in supported providers (e.g. Google, Fontsource, Bunny) through a unified API. Keep your site performant thanks to sensible defaults and automatic optimizations including fallback font generation.
+
+To enable this feature, configure an `experimental.fonts` object with one or more fonts:
+
+```js title="astro.config.mjs"
+import { defineConfig, fontProviders } from "astro/config"
+
+export default defineConfig({
+    experimental: {
+        fonts: [{
+            provider: fontProviders.google(),
+            name: "Roboto",
+            cssVariable: "--font-roboto",
+        }]
+    }
+})
path: src/content/blog/astro-570.mdx
user: login: yanthomasdev
body: code sample consistency nit
```suggestion
import { defineConfig, fontProviders } from "astro/config";

export default defineConfig({
    experimental: {
        fonts: [{
            provider: fontProviders.google(),
            name: "Roboto",
            cssVariable: "--font-roboto"
        }]
    }
});
```
created_at: 2025-04-14T21:20:03Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,305 @@
+---
+title: 'Astro 5.7'
+description: 'Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.'
path: src/content/blog/astro-570.mdx
user: login: yanthomasdev
body: ```suggestion
description: 'Astro 5.7 has a basket load of treats, including stable Sessions and SVG components and a new Experimental Fonts API.'
```
created_at: 2025-04-14T21:20:36Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,305 @@
+---
+title: 'Astro 5.7'
+description: 'Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.'
+homepageLink:
+  title: 'Astro 5.7'
+  subtitle: 'Available now!'
+publishDate: '2025-04-15'
+authors:
+  - matt
+  - florian
+  - ema
+  - nate
+coverImage: '/src/content/blog/_images/astro-570/blog-post-5-7.webp'
+socialImage: '/src/content/blog/_images/astro-570/og-astro-5-7.webp'
+lang: 'en'
+---
+
+import BlogContentImage from '/src/components/BlogContentImage.astro';
+import Note from '~/components/Note.astro';
+import Mention from '/src/components/Mention.astro';
+
+**Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.**
+
+🐣 Full of the joys of northern-hemisphere spring, Astro 5.7 is here with goodies galore:
+
+- [**Experimental Fonts API**](#experimental-fonts-api)
+- [**Sessions API**](#sessions-api)
+- [**SVG Components**](#svg-components)
+- [**Config Imports**](#config-imports)
+
+To upgrade an existing project, use the automated `@astrojs/upgrade` CLI tool. Alternatively, upgrade manually by running the upgrade command for your package manager:
+
+```sh
+# Recommended:
+npx @astrojs/upgrade
+
+# Manual:
+npm install astro@latest
+pnpm upgrade astro --latest
+yarn upgrade astro --latest
+```
+
+## Experimental Fonts API
+
+Almost every website these days uses custom fonts. However, it can be surprisingly complicated to get them right: Why do I get a Flash of Unstyled Text? Should I add a preload link? What about preconnect links? Do I self-host or rely on a third-party provider?
+
+Fonts can have significant performance implications on your site, affecting your visitors' browsing experience and important Core Web Vitals (CWV) metrics. Fortunately, web APIs have greatly improved recently and thanks to amazing initiatives of the open source community (eg. [`unifont`](https://github.com/unjs/unifont/) and [`capsize`](https://github.com/seek-oss/capsize)), we've been able to start working on a great way to use fonts in Astro!
+
+This experimental feature allows you to use fonts from both your file system and several built-in supported providers (e.g. Google, Fontsource, Bunny) through a unified API. Keep your site performant thanks to sensible defaults and automatic optimizations including fallback font generation.
+
+To enable this feature, configure an `experimental.fonts` object with one or more fonts:
+
+```js title="astro.config.mjs"
+import { defineConfig, fontProviders } from "astro/config"
+
+export default defineConfig({
+    experimental: {
+        fonts: [{
+            provider: fontProviders.google(),
+            name: "Roboto",
+            cssVariable: "--font-roboto",
+        }]
+    }
+})
+```
+
+Then, add a `<Font />` component and site-wide styling in your `<head>`:
+
+```astro title="src/components/Head.astro"
+---
+import { Font } from 'astro:assets'
+---
+<Font cssVariable='--font-roboto' preload />
+<style>
+body {
+    font-family: var(--font-roboto);
+}
+</style>
+```
+
+There's so much more to discover! Head over to [the experimental Fonts documentation](https://docs.astro.build/en/reference/experimental-flags/fonts/) for the full API, how to get started, and even how to build your own custom `AstroFontProvider` if we don't yet support your preferred font service.
+
+We'd also appreciate your feedback. Participate in the ongoing development of this feature on the [Fonts RFC](https://github.com/withastro/roadmap/pull/1039) and help shape its future.
+
+## Sessions API
+
+The Astro Sessions API is now stable and ready for production!
+
+Sessions let you securely store data tied to a specific user as they navigate between pages on your site. Unlike cookies, sessions are stored on the server, so you can store larger amounts of data without worrying about size limits or security issues. They are useful for storing things like user data, shopping carts, and form state, and they work without any client-side JavaScript:
+
+
+```astro title="src/components/CartButton.astro" {2}
+---
+const cart = await Astro.session.get('cart');
+export const prerender = false;
+---
+
+<a href="/checkout">🛒 {cart?.length ?? 0} items</a>
+```
+
+They can be used in Astro components, pages, API endpoints, actions, and middleware. The API is the same for all of them:
+
+```ts title="src/actions/addToCart.ts" {9,10}
+import { defineAction } from "astro:actions";
+import { z } from "astro:schema";
+export const server = {
+  addToCart: defineAction({
+    input: z.object({
+      product: z.string(),
+    }),
+    async handler({ product }, { session }) {
+      const cart = await session.get('cart');
+      session.set('cart', [...cart, product]);
+    },
+  }),
+};
+```
+
+### Type-safety
+
+Of course, as this is Astro, your sessions can be type-safe too. Define an interface and you will get type-checking and auto-completion for all of your session data:
+
+
+```ts title="src/env.d.ts"
+declare namespace App {
+  interface SessionData {
+    user: {
+      id: string;
+      name: string;
+    };
+    cart: string[];
+  }
+}
+```
+
+### Cookie-less sessions
+
+The session ID is automatically tracked using a cookie, but you can also use the `session.load()` method to access sessions without cookies . This is useful for things like APIs, where you might want to use a custom header or params to track the session ID:
+
+```ts title="src/pages/api/cart.ts" "session.load(sessionId)"
+export async function POST({ session, request }: APIContext) {
+  const sessionId = request.headers.get('x-session-id');
+
+  // If there is an existing session ID, load it. Otherwise one will be created
+  if (sessionId) {
+    await session.load(sessionId);
+  } 
+
+  const cart = await session.get('cart');
+  const data = await request.json<{ item: string }>();
+
+  if (!data?.item) {
+    return new Response('Item is required', { status: 400 });
+  }
+  session.set('cart', [...cart, data.item]);
+  // Return the cart and session ID
+  return Response.json({ cart, sessionId: session.sessionId });
+}
+```
+
+
+### Storage drivers
+
+Astro sessions use storage drivers to persist the data, and these are either zero-config or require minimal setup for all official Astro adapters. Alternatively you can use any [unstorage](https://unstorage.unjs.io/) driver, which supports dozens of storage backends such as Redis and MongoDB.
+
+- **[Node](https://docs.astro.build/en/guides/integrations-guide/node/#sessions)**: zero-config filesystem driver
+- **[Netlify](https://docs.astro.build/en/guides/integrations-guide/netlify/#sessions)**: zero-config Netlify Blobs driver
+- **[Cloudflare](https://docs.astro.build/en/guides/integrations-guide/cloudflare/#sessions)**: minimal-config Workers KV driver
+- **[Vercel](https://docs.astro.build/en/guides/integrations-guide/vercel/#sessions)**: minimal-config Redis/Upstash driver
+
+On any of these platforms you can easily switch out the driver for a different one if you don't want to use the default.
+
+```js title="astro.config.mjs" {5-10}
+import { defineConfig } from 'astro/config';
+import netlify from '@astrojs/netlify';
+
+export default defineConfig({
+  // ...
+  adapter: netlify(),
+  session: {
+    driver: 'redis',
+    options: {
+      url: process.env.REDIS_URL,
+    },
+  },
+});
+
+```
+
+### Upgrading from experimental sessions
+
+If you were using the experimental sessions API, you should remove the experimental flag from your `astro.config.mjs` file:
+
+```js title="astro.config.mjs" del={6}
+import { defineConfig } from 'astro/config';
+
+export default defineConfig({
+  // ...
+  experimental: {
+    session: false,
+  },
+});
+```
+Check out the [sessions guide](https://docs.astro.build/en/guides/sessions/) to learn more about how to use them in your Astro project.
+
+## SVG Components
+
+Astro now supports local SVG files as components! Reference the default import of any `.svg` file and use it as you would use any `.astro` component. The content will be inlined directly into your HTML.
+
+You can pass props such as `width`, `height`, `fill`, `stroke`, and any other attribute accepted by the [native `<svg>` element](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg). 
+
+```astro title="src/components/MyAstroComponent.astro"
+---
+import Logo from './path/to/svg/file.svg';
+---
+
+<Logo width={64} height={64} fill="currentColor" />
+```
+
+Take a look at [the SVG components documentation](https://docs.astro.build/en/guides/images#svg-components) for more details.
+
+Special thanks to [Michael Stramel](https://github.com/stramel) for his work on this feature!
+
+### Upgrading from experimental SVG
+
+If you were previously using the experimental SVG API, you must remove the experimental flag from your `astro.config.mjs` file.
+
+```js title="astro.config.mjs" del={6}
+import { defineConfig } from 'astro/config';
+
+export default defineConfig({
+  // ...
+  experimental: {
+    svg: true,
+  },
+});
+```
+
+Note that [Astro 5.6](/blog/astro-560) introduced [some breaking changes to this flag](/blog/astro-560/#breaking-changes-to-the-experimental-svg-api). Please check that your code is up-to-date with the latest, stable version of this API.
+
+## Config Imports
+
+The new virtual module `astro:config` is now stable!
+
+The virtual module allows you to import a subset of the Astro configuration, with type-safety in mind. Two sub-paths are exposed for controlled access to your configuration:
+
+- `astro:config/client`: exposes config information that is safe to expose to the client.
+- `astro:config/server`: exposes additional information that is safe to expose to the server, such as file/dir paths.
+
+For example, you can now build your own path utilities without relying on an integration. Properties like `base` and `trailingSlash` set in your configuration can be imported and used in a `.js` file:
+
+```js title="astro.config.mjs"
+export default defineConfig({
+    base: "store/",
+    trailingSlash: "always"
+})
path: src/content/blog/astro-570.mdx
user: login: yanthomasdev
body: code nit
```suggestion
export default defineConfig({
    base: "store/",
    trailingSlash: "always"
});
```
created_at: 2025-04-14T21:22:45Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,305 @@
+---
+title: 'Astro 5.7'
+description: 'Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.'
+homepageLink:
+  title: 'Astro 5.7'
+  subtitle: 'Available now!'
+publishDate: '2025-04-15'
+authors:
+  - matt
+  - florian
+  - ema
+  - nate
+coverImage: '/src/content/blog/_images/astro-570/blog-post-5-7.webp'
+socialImage: '/src/content/blog/_images/astro-570/og-astro-5-7.webp'
+lang: 'en'
+---
+
+import BlogContentImage from '/src/components/BlogContentImage.astro';
+import Note from '~/components/Note.astro';
+import Mention from '/src/components/Mention.astro';
+
+**Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.**
+
+🐣 Full of the joys of northern-hemisphere spring, Astro 5.7 is here with goodies galore:
+
+- [**Experimental Fonts API**](#experimental-fonts-api)
+- [**Sessions API**](#sessions-api)
+- [**SVG Components**](#svg-components)
+- [**Config Imports**](#config-imports)
+
+To upgrade an existing project, use the automated `@astrojs/upgrade` CLI tool. Alternatively, upgrade manually by running the upgrade command for your package manager:
+
+```sh
+# Recommended:
+npx @astrojs/upgrade
+
+# Manual:
+npm install astro@latest
+pnpm upgrade astro --latest
+yarn upgrade astro --latest
+```
+
+## Experimental Fonts API
+
+Almost every website these days uses custom fonts. However, it can be surprisingly complicated to get them right: Why do I get a Flash of Unstyled Text? Should I add a preload link? What about preconnect links? Do I self-host or rely on a third-party provider?
+
+Fonts can have significant performance implications on your site, affecting your visitors' browsing experience and important Core Web Vitals (CWV) metrics. Fortunately, web APIs have greatly improved recently and thanks to amazing initiatives of the open source community (eg. [`unifont`](https://github.com/unjs/unifont/) and [`capsize`](https://github.com/seek-oss/capsize)), we've been able to start working on a great way to use fonts in Astro!
+
+This experimental feature allows you to use fonts from both your file system and several built-in supported providers (e.g. Google, Fontsource, Bunny) through a unified API. Keep your site performant thanks to sensible defaults and automatic optimizations including fallback font generation.
+
+To enable this feature, configure an `experimental.fonts` object with one or more fonts:
+
+```js title="astro.config.mjs"
+import { defineConfig, fontProviders } from "astro/config"
+
+export default defineConfig({
+    experimental: {
+        fonts: [{
+            provider: fontProviders.google(),
+            name: "Roboto",
+            cssVariable: "--font-roboto",
+        }]
+    }
+})
+```
+
+Then, add a `<Font />` component and site-wide styling in your `<head>`:
+
+```astro title="src/components/Head.astro"
+---
+import { Font } from 'astro:assets'
+---
+<Font cssVariable='--font-roboto' preload />
+<style>
+body {
+    font-family: var(--font-roboto);
+}
+</style>
+```
+
+There's so much more to discover! Head over to [the experimental Fonts documentation](https://docs.astro.build/en/reference/experimental-flags/fonts/) for the full API, how to get started, and even how to build your own custom `AstroFontProvider` if we don't yet support your preferred font service.
+
+We'd also appreciate your feedback. Participate in the ongoing development of this feature on the [Fonts RFC](https://github.com/withastro/roadmap/pull/1039) and help shape its future.
+
+## Sessions API
+
+The Astro Sessions API is now stable and ready for production!
+
+Sessions let you securely store data tied to a specific user as they navigate between pages on your site. Unlike cookies, sessions are stored on the server, so you can store larger amounts of data without worrying about size limits or security issues. They are useful for storing things like user data, shopping carts, and form state, and they work without any client-side JavaScript:
+
+
+```astro title="src/components/CartButton.astro" {2}
+---
+const cart = await Astro.session.get('cart');
+export const prerender = false;
+---
+
+<a href="/checkout">🛒 {cart?.length ?? 0} items</a>
+```
+
+They can be used in Astro components, pages, API endpoints, actions, and middleware. The API is the same for all of them:
+
+```ts title="src/actions/addToCart.ts" {9,10}
+import { defineAction } from "astro:actions";
+import { z } from "astro:schema";
+export const server = {
+  addToCart: defineAction({
+    input: z.object({
+      product: z.string(),
+    }),
+    async handler({ product }, { session }) {
+      const cart = await session.get('cart');
+      session.set('cart', [...cart, product]);
+    },
+  }),
+};
+```
+
+### Type-safety
+
+Of course, as this is Astro, your sessions can be type-safe too. Define an interface and you will get type-checking and auto-completion for all of your session data:
+
+
+```ts title="src/env.d.ts"
+declare namespace App {
+  interface SessionData {
+    user: {
+      id: string;
+      name: string;
+    };
+    cart: string[];
+  }
+}
+```
+
+### Cookie-less sessions
+
+The session ID is automatically tracked using a cookie, but you can also use the `session.load()` method to access sessions without cookies . This is useful for things like APIs, where you might want to use a custom header or params to track the session ID:
+
+```ts title="src/pages/api/cart.ts" "session.load(sessionId)"
+export async function POST({ session, request }: APIContext) {
+  const sessionId = request.headers.get('x-session-id');
+
+  // If there is an existing session ID, load it. Otherwise one will be created
+  if (sessionId) {
+    await session.load(sessionId);
+  } 
+
+  const cart = await session.get('cart');
+  const data = await request.json<{ item: string }>();
+
+  if (!data?.item) {
+    return new Response('Item is required', { status: 400 });
+  }
+  session.set('cart', [...cart, data.item]);
+  // Return the cart and session ID
+  return Response.json({ cart, sessionId: session.sessionId });
+}
+```
+
+
+### Storage drivers
+
+Astro sessions use storage drivers to persist the data, and these are either zero-config or require minimal setup for all official Astro adapters. Alternatively you can use any [unstorage](https://unstorage.unjs.io/) driver, which supports dozens of storage backends such as Redis and MongoDB.
+
+- **[Node](https://docs.astro.build/en/guides/integrations-guide/node/#sessions)**: zero-config filesystem driver
+- **[Netlify](https://docs.astro.build/en/guides/integrations-guide/netlify/#sessions)**: zero-config Netlify Blobs driver
+- **[Cloudflare](https://docs.astro.build/en/guides/integrations-guide/cloudflare/#sessions)**: minimal-config Workers KV driver
+- **[Vercel](https://docs.astro.build/en/guides/integrations-guide/vercel/#sessions)**: minimal-config Redis/Upstash driver
+
+On any of these platforms you can easily switch out the driver for a different one if you don't want to use the default.
+
+```js title="astro.config.mjs" {5-10}
+import { defineConfig } from 'astro/config';
+import netlify from '@astrojs/netlify';
+
+export default defineConfig({
+  // ...
+  adapter: netlify(),
+  session: {
+    driver: 'redis',
+    options: {
+      url: process.env.REDIS_URL,
+    },
+  },
+});
+
path: src/content/blog/astro-570.mdx
user: login: yanthomasdev
body: unnecessary line
```suggestion
```
created_at: 2025-04-14T21:23:58Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,305 @@
+---
+title: 'Astro 5.7'
+description: 'Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.'
+homepageLink:
+  title: 'Astro 5.7'
+  subtitle: 'Available now!'
+publishDate: '2025-04-15'
+authors:
+  - matt
+  - florian
+  - ema
+  - nate
+coverImage: '/src/content/blog/_images/astro-570/blog-post-5-7.webp'
+socialImage: '/src/content/blog/_images/astro-570/og-astro-5-7.webp'
+lang: 'en'
+---
+
+import BlogContentImage from '/src/components/BlogContentImage.astro';
+import Note from '~/components/Note.astro';
+import Mention from '/src/components/Mention.astro';
+
+**Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.**
+
+🐣 Full of the joys of northern-hemisphere spring, Astro 5.7 is here with goodies galore:
+
+- [**Experimental Fonts API**](#experimental-fonts-api)
+- [**Sessions API**](#sessions-api)
+- [**SVG Components**](#svg-components)
+- [**Config Imports**](#config-imports)
+
+To upgrade an existing project, use the automated `@astrojs/upgrade` CLI tool. Alternatively, upgrade manually by running the upgrade command for your package manager:
+
+```sh
+# Recommended:
+npx @astrojs/upgrade
+
+# Manual:
+npm install astro@latest
+pnpm upgrade astro --latest
+yarn upgrade astro --latest
+```
+
+## Experimental Fonts API
+
+Almost every website these days uses custom fonts. However, it can be surprisingly complicated to get them right: Why do I get a Flash of Unstyled Text? Should I add a preload link? What about preconnect links? Do I self-host or rely on a third-party provider?
+
+Fonts can have significant performance implications on your site, affecting your visitors' browsing experience and important Core Web Vitals (CWV) metrics. Fortunately, web APIs have greatly improved recently and thanks to amazing initiatives of the open source community (eg. [`unifont`](https://github.com/unjs/unifont/) and [`capsize`](https://github.com/seek-oss/capsize)), we've been able to start working on a great way to use fonts in Astro!
+
+This experimental feature allows you to use fonts from both your file system and several built-in supported providers (e.g. Google, Fontsource, Bunny) through a unified API. Keep your site performant thanks to sensible defaults and automatic optimizations including fallback font generation.
+
+To enable this feature, configure an `experimental.fonts` object with one or more fonts:
+
+```js title="astro.config.mjs"
+import { defineConfig, fontProviders } from "astro/config"
+
+export default defineConfig({
+    experimental: {
+        fonts: [{
+            provider: fontProviders.google(),
+            name: "Roboto",
+            cssVariable: "--font-roboto",
+        }]
+    }
+})
+```
+
+Then, add a `<Font />` component and site-wide styling in your `<head>`:
+
+```astro title="src/components/Head.astro"
+---
+import { Font } from 'astro:assets'
+---
+<Font cssVariable='--font-roboto' preload />
+<style>
+body {
+    font-family: var(--font-roboto);
+}
+</style>
+```
path: src/content/blog/astro-570.mdx
user: login: yanthomasdev
body: code breathing air nit
```suggestion
```astro title="src/components/Head.astro"
---
import { Font } from 'astro:assets'
---

<Font cssVariable='--font-roboto' preload />
<style>
body {
    font-family: var(--font-roboto);
}
</style>
```
```
created_at: 2025-04-14T21:25:17Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,305 @@
+---
+title: 'Astro 5.7'
+description: 'Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.'
+homepageLink:
+  title: 'Astro 5.7'
+  subtitle: 'Available now!'
+publishDate: '2025-04-15'
+authors:
+  - matt
+  - florian
+  - ema
+  - nate
+coverImage: '/src/content/blog/_images/astro-570/blog-post-5-7.webp'
+socialImage: '/src/content/blog/_images/astro-570/og-astro-5-7.webp'
+lang: 'en'
+---
+
+import BlogContentImage from '/src/components/BlogContentImage.astro';
+import Note from '~/components/Note.astro';
+import Mention from '/src/components/Mention.astro';
+
+**Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.**
path: src/content/blog/astro-570.mdx
user: login: ascorbic
body: I'm pretty sure it's fine to keep as a compound word
created_at: 2025-04-14T21:55:17Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,305 @@
+---
+title: 'Astro 5.7'
+description: 'Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.'
+homepageLink:
+  title: 'Astro 5.7'
+  subtitle: 'Available now!'
+publishDate: '2025-04-15'
+authors:
+  - matt
+  - florian
+  - ema
+  - nate
+coverImage: '/src/content/blog/_images/astro-570/blog-post-5-7.webp'
+socialImage: '/src/content/blog/_images/astro-570/og-astro-5-7.webp'
+lang: 'en'
+---
+
+import BlogContentImage from '/src/components/BlogContentImage.astro';
+import Note from '~/components/Note.astro';
+import Mention from '/src/components/Mention.astro';
+
+**Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API.**
path: src/content/blog/astro-570.mdx
user: login: sarah11918
body: I had way too many tabs open trying to verify one way or the other. Confirmed that *basketload* is one word, so we can use that as our model here and stick to one word.
created_at: 2025-04-14T23:18:33Z
author_association: MEMBER

PR comments:
user: login: netlify[bot]
created_at: 2025-04-07T10:08:12Z
body: ### <span aria-hidden="true">✅</span> Deploy Preview for *astro-www-2* ready!


|  Name | Link |
|:-:|------------------------|
|<span aria-hidden="true">🔨</span> Latest commit | 3607b537ff2206664a84bd1c6e9e56c002c09f17 |
|<span aria-hidden="true">🔍</span> Latest deploy log | https://app.netlify.com/sites/astro-www-2/deploys/67fe41f9ffa35c0008cad658 |
|<span aria-hidden="true">😎</span> Deploy Preview | [https://deploy-preview-1505--astro-www-2.netlify.app](https://deploy-preview-1505--astro-www-2.netlify.app) |
|<span aria-hidden="true">📱</span> Preview on mobile | <details><summary> Toggle QR Code... </summary><br /><br />![QR Code](https://app.netlify.com/qr-code/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL2RlcGxveS1wcmV2aWV3LTE1MDUtLWFzdHJvLXd3dy0yLm5ldGxpZnkuYXBwIn0.hUsqZA9yq6H5-eZinkXhkqDqcVfxkvcBfQ5tdOZJsnY)<br /><br />_Use your smartphone camera to open QR code link._</details> |
|<span aria-hidden="true">![Lighthouse](https://app.netlify.com/public/external-usage/git-comments/lighthouse-sm.png)</span><br />Lighthouse | 5 paths audited<br />**Performance**: 99 (no change from production)<br />**Accessibility**: 100 (no change from production)<br />**Best Practices**: 92 (no change from production)<br />**SEO**: 100 (no change from production)<br />**PWA**: -<br />[View the detailed breakdown and full score reports](https://app.netlify.com/sites/astro-www-2/deploys/67fe41f9ffa35c0008cad658) |
---
<!-- [astro-www-2 Preview](https://deploy-preview-1505--astro-www-2.netlify.app) -->
_To edit notification comments on pull requests, go to your [Netlify site configuration](https://app.netlify.com/sites/astro-www-2/configuration/notifications#deploy-webhooks)._
author_association: NONE
user: login: natemoo-re
created_at: 2025-04-11T14:24:38Z
body: Just added the SVG section in [bd6edb9](https://github.com/withastro/astro.build/pull/1505/commits/bd6edb97a3e1c3313ffdf6eab0dc028a00c3055c)!
author_association: MEMBER