Update to astro 3.x

[alec-c4]

Hey!
Are there any plans to update the theme to support astro 3.x?

[satnaing]

Yes
I'm currently working on it.

[susanta96]

Great !! I am using this as well. It would be better to use, v3. However, I am upgrading it but when I tried to use ViewTransition API, which is the new one in v3. It's breaking the toggle theme functionality between pages.

Please try to resolve this, if possible. I am also trying to resolve this, Viewtranstions is also calling other pages beforehand as well.

[hanskalisvaart]

Can someone smarter than me tell me why Astro 3.x broke the header?

[tanishqmanuja]

@hanskalisvaart, can you try if scopedStyleStrategy: "where" in astro config fixes it ?
EDIT: also have to add transition:persist to header

<header transition:persist>
  ...
</header>

[nimrra]

i also want to use ViewTransition API,

[hanskalisvaart]

@hanskalisvaart, can you try if scopedStyleStrategy: "where" in astro config fixes it ? EDIT: also have to add transition:persist to header

<header transition:persist>
  ...
</header>

Putting Putting scopedStyleStrategy: "where" in the astro.config.mjs file at the location:
export default defineConfig({
scopedStyleStrategy: 'where',
fixed the header!

[satnaing]

Hello everyone!

I just made a PR for Astro v3 and ViewTransitions API; plus a few minor updates. You can give suggestions and try experimenting with it on version-3 branch or live URL
You can also give feedback on my implementation details, trade-offs I've made, or anything.

Thanks

[Jordain]

Hey Satnaing, if you are in dark mode and click on any of the header links it flashes white before changing back to black.

[satnaing]

Hello @Jordain
Does that problem still exist in AstroPaper v3?

On which browser does it happen?

[Jordain]

@satnaing Yep, Firefox

[satnaing]

Hey Satnaing, if you are in dark mode and click on any of the header links it flashes white before changing back to black.

Previously, commit fdabb82 introduced a transition effect for the background color when toggling between light and dark modes. This effect caused a white flash when clicking on header links in dark mode, especially in Firefox.
It appears that this theme switch transition effect was somehow triggered whenever navigating. To fix this, for now, I just removed the transition code in the body.

Thanks for pointing this out @Jordain