brittle mirage
I'm seeking some guidance with implementing ViewTransitions in Starlight in my project. Here's what I've done so far:
Created a simple layout component:
---
import { ViewTransitions } from "astro:transitions";
---
<html lang="en">
<head>
<ViewTransitions />
</head>
<body>
<slot />
</body>
</html>
Added the layout property to MDX files in the docs directory:
---
layout: ../../../../layouts/StarlightLayout.astro
---
The issue I'm encountering is that when I click on any sidebar links, the page flashes and momentarily resets the styles. Other languages without custom layouts work fine, with a standard page reload (although I'm not entirely sure anymore if this is normal)
To troubleshoot, I tried the following:
- Removed
customCss: ["./src/styles/starlight.css"]from the astro.configo and imported the CSS directly into the layout. However, the issue persisted. - Checked the console and noticed some CSP errors from Vercel. Adjusted the configuration to eliminate the errors, issue persisted.
- Reverted all changes, including removing the CSS import and restoring the default Starlight theme, issue persisted
- Removed custom Tailwind plugins, issue persisted.
Interestingly, everything works smoothly in local development mode without any flashes or style resets.
Additionally, I'm encountering a "Failed to load resource" error for TableOfContents.astro, although the TOC is displaying fine on the page.
floral trail