feat: ViewTransition Astro component

[abosch19]

What kind of changes does this PR include?

Allow user to set a new user configuration: viewTransitions (boolean)
This config sets Astro ViewTransitions component on Page layout if true

• Changes to Starlight code

Description

• What does this PR change? User configuration and Page layout

[changeset-bot]

⚠️ No Changeset found

Latest commit: 3718419

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[netlify]

✅ Deploy Preview for astro-starlight ready!

Name	Link
🔨 Latest commit	3718419
🔍 Latest deploy log	https://app.netlify.com/sites/astro-starlight/deploys/64fc6a516a047f0008947bda
😎 Deploy Preview	https://deploy-preview-694--astro-starlight.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 100 (no change from production) Accessibility: 100 (no change from production) Best Practices: 100 (no change from production) SEO: 100 (no change from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[turbek]

It looks like this currently breaks the pagefind/search functionality and also needs an astro version update. (checked on a forked version)

[delucis]

It looks like this currently breaks the pagefind/search functionality and also needs an astro version update.

Thanks for testing that @turbek! Yes, View Transitions require all client-side scripts to include special handling, so it may be more involved than the changes currently in this PR. We might be able to solve this with transition:persist, but I’m not sure — it could also require more complex updates to our scripts.

[turbek]

transition:persist="site-search" and a littlebit of extra code for the initialization solves the problem:

document.addEventListener('astro:page-load', () => {
	if (import.meta.env.DEV) return;

	const pageFind = document.querySelector('.pagefind-ui__search-input');

	if (pageFind) return;

	const onIdle = window.requestIdleCallback || ((cb) => setTimeout(cb, 1));
	onIdle(async () => {
		const { PagefindUI } = await import('@pagefind/default-ui');
		new PagefindUI({
			element: '#starlight__search',
			baseUrl: import.meta.env.BASE_URL,
			bundlePath: import.meta.env.BASE_URL.replace(/\/$/, '') + '/pagefind/',
			showImages: false,
			translations,
			showSubResults: true,
		});
	});
}, { once: true });

Although I'm not sure how ideal it is

[delucis]

Thanks for testing — I’d also assume other client-side scripts are impacted? Like table of contents highlighting and language/theme switching?

[turbek]

Actually we removed the language switching because we currently support 1 language and since our website doesn't support dark theme atm, we removed theme switching as well. So we never tested theme/language switching features with the SPA mode.

ToC highlighting seems to work as expected though.