From d86b14ab4590d055fa119256d486eadcb099a85b Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Wed, 17 Jun 2026 19:34:34 +0200 Subject: [PATCH 01/23] missing props --- src/content/docs/en/guides/view-transitions.mdx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/content/docs/en/guides/view-transitions.mdx b/src/content/docs/en/guides/view-transitions.mdx index 0f30c5ac2fc83..e4bd37e7082d7 100644 --- a/src/content/docs/en/guides/view-transitions.mdx +++ b/src/content/docs/en/guides/view-transitions.mdx @@ -44,9 +44,13 @@ Import and add the `` component to your common `` or share The example below shows adding Astro's default page navigation animations site-wide, including the default fallback control option for non-supporting browsers, by importing and adding this component to a `` Astro component: -```astro title="src/components/CommonHead.astro" ins={2,12} +```astro title="src/components/CommonHead.astro" ins={2,16} --- import { ClientRouter } from "astro:transitions"; + +type Props = { title: string; description: string }; + +const { title, description } = Astro.props; --- From e3ce8fcd0155d635a4671b02d3b34059595e2482 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Wed, 17 Jun 2026 19:43:29 +0200 Subject: [PATCH 02/23] select can be null, value not available without narrowing --- src/content/docs/en/guides/view-transitions.mdx | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/content/docs/en/guides/view-transitions.mdx b/src/content/docs/en/guides/view-transitions.mdx index e4bd37e7082d7..ae27640fad49a 100644 --- a/src/content/docs/en/guides/view-transitions.mdx +++ b/src/content/docs/en/guides/view-transitions.mdx @@ -332,11 +332,16 @@ The following example shows an Astro component that navigates a visitor to anoth @@ -462,7 +453,7 @@ One way to implement this safely is to ensure only a set of known paths can be r const redirect = params.get('redirect'); const allowedPaths = ['/home', '/about', '/contact']; - if (redirect && allowedPaths.includes(redirect)) { + if (allowedPaths.includes(redirect)) { navigate(redirect); } @@ -724,7 +715,7 @@ The following example demonstrates how to use these functions to recreate Astro' document.addEventListener("astro:before-swap", (event) => { event.swap = () => mySwap(event.newDocument); }); - + +```js +document.addEventListener("astro:after-swap", () => + window.scrollTo({ left: 0, top: 0, behavior: "instant" }), +); ``` ### `astro:page-load` @@ -758,8 +747,6 @@ You can use this event to run code on every page navigation, for example to set ```astro