Last updated: First published:
The Jotter on Starlight
At some point I realized that I needed to structure my bits & pieces better and make them searchable to make them useful.
The desire to add view transitions to Starlight is a logical, but not trivial venture. Others have done it before. Chapeau @Fryuni! This Jotter is also a tech demo for Starlight on View Transitions.
Starlight does a great job of supporting documentation sites. You really don’t need view transitions on a documentation site to distract your audience from the content unless you are a site about view transitions. Starlight is an opinionated framework. It works best when you use it as it is intended and only customize what is designated to be customized.
Supporting view transitions for Starlight is not just about cross-fade navigation. There is a wide range of design options. Everyone has different preferences.
Will the Bag offer Support for Starlight?
Yes, it has already started. The 👜 Bag of Tricks ✨ provides initial basic support for view transitions for Starlight sites!
In the future, in the best of all worlds, The Bag can provide small, independent gadgets that developers can combine as they wish. Keep your fingers crossed ;-) and stay tuned.
The future is here, and so are the first additional components to choose from!
There are a few things that need to be configured to enable view transitions in Starlight. Others are more optional. The mandatory changes are covered by the initial view transition support for Starlight sites by The Bag. Other features followed.
| Kind | Option | Component |
|---|---|---|
| Mandatory | The basic view transition support in just three steps | Vtbot Starlight Support |
| Optional | Indicate that the system is processing the click | LoadingIndicator |
| Optional | Eliminate the pseudo scrolling of the main area | PageOffset |
| Optional | Derive the direction of view transitions from the order of pages in the sidebar | PageOrder |
| Optional | Simple way to declaratively add morph transitions to elements by just defining a CSS selector | AutoNameSelected |
| Optional | Make incoming view transitions reload instead, e.g. to properly reinitialize ReplacementSwap realms | BorderControl |
| Optional | Change the default handling of the sidebar | Vtbot Starlight |
Select your preferred mix from the custom combo options now!
Read on if you want to know what encounters I had on my journey to a Starlight website with view transitions.