5.14.0 minor release docs (#12413)

Co-authored-by: Armand Philippot <[email protected]>
Co-authored-by: yanthomasdev <[email protected]>
Co-authored-by: Robin Bühler <[email protected]>
Co-authored-by: florian-lefebvre <[email protected]>
Co-authored-by: ArmandPhilippot <[email protected]>
Co-authored-by: Florian Lefebvre <[email protected]>
Co-authored-by: Luiz Ferraz <[email protected]>

Author: 6 people

astro.sidebar.ts

@@ -151,6 +151,7 @@ export const sidebar = [
 					'reference/experimental-flags/heading-id-compat',
 					'reference/experimental-flags/static-import-meta-env',
 					'reference/experimental-flags/chrome-devtools-workspace',
+					'reference/experimental-flags/fail-on-prerender-conflict',
 				],
 			}),
 			'reference/legacy-flags',

src/content/docs/en/guides/images.mdx

@@ -433,6 +433,33 @@ import Logo from '../assets/logo.svg';
 <Logo width={64} height={64} fill="currentColor" />
 ```
 
+#### `SvgComponent` Type
+
+<Since v="5.14.0" />
+
+You can also enforce type safety for your `.svg` assets using the `SvgComponent` type:
+
+```astro title="src/components/Logo.astro"
+---
+import type { SvgComponent } from "astro/types";
+import HomeIcon from './Home.svg'
+
+interface Link {
+	url: string
+	text: string
+	icon: SvgComponent
+}
+
+const links: Link[] = [
+	{
+		url: '/',
+		text: 'Home',
+		icon: HomeIcon
+	}
+]
+---
+```
+
 ### Creating custom image components
 
 You can create a custom, reusable image component by wrapping the `<Image />`  or `<Picture/>` component in another Astro component. This allows you to set default attributes and styles only once.

src/content/docs/en/guides/integrations-guide/react.mdx

@@ -115,30 +115,30 @@ To use your first React component in Astro, head to our [UI framework documentat
 * 💧 client-side hydration options, and
 * 🤝 opportunities to mix and nest frameworks together
 
-## Integrate Actions with `useActionState()` (experimental)
+## Integrate Actions with `useActionState()`
 
-The `@astrojs/react` integration provides two experimental functions for use with [Astro Actions][astro-actions]: `experimental_withState()` and `experimental_getActionState()`.
+The `@astrojs/react` integration provides two functions for use with [Astro Actions][astro-actions]: `withState()` and `getActionState()`.
 
 These are used with [React's useActionState() hook](https://react.dev/reference/react/useActionState) to read and update client-side state when triggering actions during form submission.
 
-### `experimental_withState()`
+### `withState()`
 
 <p>
 
 **Type:** `(action: FormFn<T>) => (state: T, formData: FormData) => FormFn<T>`<br />
-<Since v="4.3.2" />
+<Since v="4.4.0" pkg="@astrojs/react" />
 </p>
 
-You can pass `experimental_withState()` and the action you want to trigger to React's `useActionState()` hook as the form action function. The example below passes a `like` action to increase a counter along with an initial state of `0` likes.
+You can pass `withState()` and the action you want to trigger to React's `useActionState()` hook as the form action function. The example below passes a `like` action to increase a counter along with an initial state of `0` likes.
 
 ```jsx title="Like.tsx" ins={2,7} "useActionState"
 import { actions } from 'astro:actions';
-import { experimental_withState } from '@astrojs/react/actions';
+import { withState } from '@astrojs/react/actions';
 import { useActionState } from "react";
 
 export function Like({ postId }: { postId: string }) {
   const [state, action, pending] = useActionState(
-    experimental_withState(actions.like),
+    withState(actions.like),
     { data: 0, error: undefined }, // initial likes and errors
   );
 
@@ -151,32 +151,32 @@ export function Like({ postId }: { postId: string }) {
 }
 ```
 
-The `experimental_withState()` function will match the action's types with React's expectations and preserve metadata used for progressive enhancement, allowing it to work even when JavaScript is disabled on the user's device.
+The `withState()` function will match the action's types with React's expectations and preserve metadata used for progressive enhancement, allowing it to work even when JavaScript is disabled on the user's device.
 
-### `experimental_getActionState()`
+### `getActionState()`
 
 <p>
 
 **Type:** `(context: ActionAPIContext) => Promise<T>`<br />
-<Since v="4.3.2" />
+<Since v="4.4.0" pkg="@astrojs/react" />
 </p>
 
-You can access the state stored by `useActionState()` on the server in your action `handler` with `experimental_getActionState()`. It accepts the [Astro API context](/en/reference/api-reference/#the-context-object), and optionally, you can apply a type to the result. 
+You can access the state stored by `useActionState()` on the server in your action `handler` with `getActionState()`. It accepts the [Astro API context](/en/reference/api-reference/#the-context-object), and optionally, you can apply a type to the result. 
 
 The example below gets the current value of likes from a counter, typed as a number, in order to create an incrementing `like` action:
 
 ```ts title="actions.ts" ins={3,11}
 import { defineAction, type SafeResult } from 'astro:actions';
 import { z } from 'astro:schema';
-import { experimental_getActionState } from '@astrojs/react/actions';
+import { getActionState } from '@astrojs/react/actions';
 
 export const server = {
   like: defineAction({
     input: z.object({
       postId: z.string(),
     }),
     handler: async ({ postId }, ctx) => {
-      const { data: currentLikes = 0, error } = await experimental_getActionState<SafeResult<any, number>>(ctx);
+      const { data: currentLikes = 0, error } = await getActionState<SafeResult<any, number>>(ctx);
 
       // handle errors
       if (error) throw error;

src/content/docs/en/reference/experimental-flags/fail-on-prerender-conflict.mdx

@@ -0,0 +1,37 @@
+---
+title: Experimental prerender conflict error
+sidebar:
+  label: Prerender conflict error
+i18nReady: true
+---
+
+import Since from '~/components/Since.astro'
+
+<p>
+
+**Type:** `boolean`<br />
+**Default:** `false`<br />
+<Since v="5.14.0" />
+</p>
+
+Turns prerender conflict warnings into errors during the build process.
+
+Astro currently warns you during the build about any conflicts between multiple dynamic routes that can result in the same output path. For example `/blog/[slug]` and `/blog/[...all]` both could try to prerender the `/blog/post-1` path. In such cases, Astro renders only the [highest priority route](/en/guides/routing/#route-priority-order) for the conflicting path. This allows your site to build successfully, although you may discover that some pages are rendered by unexpected routes.
+
+With this experimental flag set, the build will instead fail immediately with an error. This will require you to resolve any routing conflicts immediately, and will ensure that Astro is building your routes as you intend.
+
+To enable this behavior, add the `experimental.failOnPrerenderConflict` feature flag to your Astro config:
+
+```js title="astro.config.mjs" ins={4-6}
+import { defineConfig } from "astro/config"
+
+defineConfig({
+	experimental: {
+		failOnPrerenderConflict: true,
+	},
+});
+```
+
+## Usage
+
+After enabling this flag, you may encounter errors about conflicting prerendered routes when you attempt to build your project. If this happens, you will need to update one or more of your [dynamic routes](/en/guides/routing/#dynamic-routes) to avoid ambiguous routing.

src/content/docs/en/reference/experimental-flags/fonts.mdx

@@ -325,6 +325,49 @@ import { Font } from 'astro:assets';
 <Font cssVariable="--font-roboto" preload />
 ```
 
+## Accessing font data programmatically
+
+The `getFontData()` function is intended for retrieving lower-level font family data programmatically, for example, in an [API Route](/en/guides/endpoints/#server-endpoints-api-routes) or to generate your own meta tags.
+
+### `getFontData()`
+<p>
+
+**Type:** `(cssVariable: CssVariable) => FontData[]`<br />
+<Since v="5.14.0" />
+</p>
+
+Returns an array of `FontData` objects for the provided [`cssVariable`](#cssvariable-1), which contains `src`, `weight` and `style`.
+
+The following example uses `getFontData()` to get the font buffer from the URL when using [satori](https://github.com/vercel/satori) to generate OpenGraph images:
+
+```tsx title="src/pages/og.png.ts" "getFontData(\"--font-roboto\")" "data[0].src[0].url"
+import type{ APIRoute } from "astro"
+import { getFontData } from "astro:assets"
+import satori from "satori"
+
+export const GET: APIRoute = (context) => {
+  const data = getFontData("--font-roboto")
+
+  const svg = await satori(
+    <div style={{ color: "black" }}>hello, world</div>,
+    {
+      width: 600,
+      height: 400,
+      fonts: [
+        {
+          name: "Roboto",
+          data: await fetch(new URL(data[0].src[0].url, context.url.origin)).then(res => res.arrayBuffer()),
+          weight: 400,
+          style: "normal",
+        },
+      ],
+    },
+  )
+
+  // ...
+}
+```
+
 ## Font configuration reference
 
 All properties of your fonts must be configured in the Astro config. Some properties are common to both remote and local fonts, and other properties are available depending on your chosen font provider.

src/content/docs/en/reference/routing-reference.mdx

@@ -170,6 +170,41 @@ const { post } = Astro.props;
 <h1>{id}: {post.name}</h1>
 ```
 
+### `routePattern`
+
+<p>
+
+**Type:** `string` <br />
+<Since v="5.14.0" />
+</p>
+
+A property available in [`getStaticPaths()`](#getstaticpaths) options to access the current [`routePattern`](/en/reference/api-reference/#routepattern) as a string.
+
+This provides data from the [Astro render context](/en/reference/api-reference/) that would not otherwise be available within the scope of `getStaticPaths()` and can be useful to calculate the `params` and `props` for each page route.
+
+`routePattern` always reflects the original dynamic segment definition in the file path (e.g. `/[...locale]/[files]/[slug]`), unlike `params`, which are explicit values for a page (e.g. `/fr/fichiers/article-1/`).
+
+The following example shows how to localize your route segments and return an array of static paths by passing `routePattern` to a custom `getLocalizedData()` helper function. The [params](https://github.com/en/reference/routing-reference/#params) object will be set with explicit values for each route segment: `locale`, `files`, and `slug`. Then, these values will be used to generate the routes and can be used in your page template via `Astro.params`.
+
+
+```astro title="src/pages/[...locale]/[files]/[slug].astro" "routePattern" "getLocalizedData"
+---
+import { getLocalizedData } from "../../../utils/i18n";
+
+export async function getStaticPaths({ routePattern }) {
+  const response = await fetch('...');
+  const data = await response.json();
+
+  console.log(routePattern); // [...locale]/[files]/[slug]
+
+  // Call your custom helper with `routePattern` to generate the static paths
+  return data.flatMap((file) => getLocalizedData(file, routePattern));
+}
+
+const { locale, files, slug } = Astro.params;
+---
+```
+
 ### `paginate()`
 
 <p>