Merge branch 'main' into patch-2

src/components/starlight/Head.astro

@@ -8,6 +8,7 @@ const { isFallback, lang } = Astro.props;
 const ogImageUrl = getOgImageUrl(Astro.url.pathname, !!isFallback);
 const imageSrc = ogImageUrl ?? '/default-og-image.png';
 const canonicalImageSrc = new URL(imageSrc, Astro.site);
+const is404 = Astro.url.pathname.endsWith('/404/');
 ---
 
 <Default {...Astro.props}><slot /></Default>
@@ -19,4 +20,8 @@ const canonicalImageSrc = new URL(imageSrc, Astro.site);
 <meta name="twitter:site" content="astrodotbuild" />
 
 <!-- Fathom analytics -->
-<script src="https://cdn.usefathom.com/script.js" data-site="EZBHTSIG" defer></script>
+<script
+	src="https://cdn.usefathom.com/script.js"
+	data-site="EZBHTSIG"
+	data-canonical={is404 ? 'false' : 'true'}
+	defer></script>

src/content/docs/en/guides/deploy/render.mdx

@@ -19,7 +19,7 @@ You can deploy your Astro project to [Render](https://render.com/), a service to
 
 4. Give your website a name, select the branch and specify the build command and publish directory
    - **build command:** `npm run build`
-   - **publish directory:** `dist`
+   - **publish directory:** `dist`, for static sites; `dist/client` if you're using `server` or `hybrid` server-rendering modes.
    - **Environment variables (advanced)**: By default, Render uses Node.js 14.17.0, but Astro [requires a higher version](/en/install-and-setup/#prerequisites). Add an environment variable with a **Variable key** of `NODE_VERSION` and a **Value** of  `v18.17.1` or `v20.3.0` or higher to tell Render to use a compatible Node.js version. Alternatively, add a [`.node-version`](https://render.com/docs/node-version) or [`.nvmrc`](https://render.com/docs/node-version) file to your project to specify a Node.js version.
 
 5. Click the **Create Static Site** button

src/content/docs/en/guides/markdown-content.mdx

@@ -448,7 +448,7 @@ export default defineConfig({
 
 In order to customize a plugin, provide an options object after it in a nested array.
 
-The example below adds the [heading option to the `remarkToc` plugin](https://github.com/remarkjs/remark-toc#optionsheading) to change where the table of contents is placed, and the [`behavior` option to the `rehype-autolink-headings` plugin](https://github.com/rehypejs/rehype-autolink-headings#optionsbehavior) in order to add the anchor tag after the headline text.
+The example below adds the [heading option to the `remarkToc` plugin](https://github.com/remarkjs/remark-toc#options) to change where the table of contents is placed, and the [`behavior` option to the `rehype-autolink-headings` plugin](https://github.com/rehypejs/rehype-autolink-headings#options) in order to add the anchor tag after the headline text.
 
 ```js title="astro.config.mjs"
 import remarkToc from 'remark-toc';

src/content/docs/en/guides/view-transitions.mdx

@@ -146,7 +146,7 @@ This allows you to control whether or not an island's props should be persisted
 
 By default, when you add `transition:persist` to an island, the state is retained upon navigation, but your component will re-render with new props. This is useful, for example, when a component receives page-specific props such as the current page's `title`.
 
-You can override this behavior with `transition:persist-props`. Adding this directive will keep an island's existing props (not re-render with new values) in addition to maintaining its existing state.
+You can override this behavior by setting `transition:persist-props` in addition to `transition:persist`. Adding this directive will keep an island's existing props (not re-render with new values) in addition to maintaining its existing state.
 
 ### Built-in Animation Directives
 
@@ -659,4 +659,4 @@ We strongly recommend you always include a `<title>` in each page for accessibil
 
 ### `prefers-reduced-motion`
 
-Astro's `<ViewTransitions />` component includes a CSS media query that disables *all* view transition animations, including fallback animation, whenever the [`prefer-reduced-motion`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) setting is detected. Instead, the browser will simply swap the DOM elements without an animation.
+Astro's `<ViewTransitions />` component includes a CSS media query that disables *all* view transition animations, including fallback animation, whenever the [`prefer-reduced-motion`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) setting is detected. Instead, the browser will simply swap the DOM elements without an animation.

src/content/docs/en/recipes/i18n.mdx

@@ -409,6 +409,10 @@ Create links to the different languages you support so users can choose the lang
     ---
     // src/components/LanguagePicker.astro
     import { languages } from '../i18n/ui';
+    import { getLangFromUrl, useTranslatedPath } from '../i18n/utils';
+    
+    const lang = getLangFromUrl(Astro.url);
+    const translatePath = useTranslatedPath(lang);
     ---
     <ul>
       {Object.entries(languages).map(([lang, label]) => (

src/content/docs/es/recipes/i18n.mdx

@@ -398,6 +398,10 @@ Crea enlaces a los diferentes idiomas que admites para que los usuarios puedan e
     ---
     // src/components/LanguagePicker.astro
     import { languages } from '../i18n/ui';
+    import { getLangFromUrl, useTranslatedPath } from '../i18n/utils';
+    
+    const lang = getLangFromUrl(Astro.url);
+    const translatePath = useTranslatedPath(lang);
     ---
     <ul>
       {Object.entries(languages).map(([lang, label]) => (