feat: ViewTransition Astro component #694
Conversation
|
✅ Deploy Preview for astro-starlight ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
It looks like this currently breaks the pagefind/search functionality and also needs an astro version update. (checked on a forked version) |
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 |
|
Although I'm not sure how ideal it is |
|
Thanks for testing — I’d also assume other client-side scripts are impacted? Like table of contents highlighting and language/theme switching? |
|
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. |
|
I was able to activate I omitted translations since i don't have any. Add this custom ---
import Default from '@starlight/components/Head.astro';
import type { Props } from '@starlight/props';
import { ViewTransitions } from 'astro:transitions';
---
<Default {...Astro.props}><slot /></Default>
<ViewTransitions />
<script>
// Skip PagefindUI on initial page load since it's already run by Search.astro.
// Flag to track initial page load
let initialLoad = true;
document.addEventListener('astro:page-load', () => {
// Skip PagefindUI on initial page load (and only execute on subsequent loads)
if (initialLoad) {
initialLoad = false;
return;
}
// Code to initialize PagefindUI on subsequent loads (if needed)
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 () => {
// @ts-expect-error — Missing types for @pagefind/default-ui package.
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,
});
});
});
</script>
|
|
Super easy to add Using ---
import Default from '@astrojs/starlight/components/Head.astro'
import type { Props } from '@astrojs/starlight/props'
import { ViewTransitions } from 'astro:transitions'
---
<Default {...Astro.props}><slot /></Default>
<ViewTransitions />import { defineConfig } from 'astro/config'
import starlight from '@astrojs/starlight'
// https://astro.build/config
export default defineConfig({
integrations: [
starlight({
components: {
Head: './src/components/Head.astro',
}
}),
],
}) |
|
Adding VT to Starlight is quite simple, getting everything to behave correctly when VT is being used is the part that needs more work. Specifically:
If your Starlight site is unaffected by those or if you think the compromise in those case is fine, then you can enable VT by adding the component to the head. |
|
Adding view transition to a starlight side might involve more than enabling the basic transitions.
It might be possible to add all this and a lot of options to control that to starlight itself. For all being interested in a community solution for adding view transitions to starlight, have a look at the guide in the 👜 Bag of Tricks ✨: |
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
Description