Upgrade docs site to Astro v3

[ElianCodes]

What kind of changes does this PR include?

• Changes to the docs site code

Description

• upgrades Astro and integrations to v3

Todo:

• wait on astro-og-canvas to catch up with v3 compatible version
• import all as types
• change endpoints to uppercase
• FileTree fails
• Make sure everything works

---

Known Bugs

• Image source is [object object]
• Theme not working (localStorage)
• Sometimes weird tabbing behaviour (localStorage)
• Some spacing seems off (asides and chevrons) (compressHTML issue)

---

Preview URL: https://deploy-preview-4461--astro-docs-2.netlify.app/

[netlify]

✅ Deploy Preview for astro-docs-2 ready!

Name	Link
🔨 Latest commit	a7ddbf5
🔍 Latest deploy log	https://app.netlify.com/sites/astro-docs-2/deploys/64f9d57348f03500084831c6
😎 Deploy Preview	https://deploy-preview-4461--astro-docs-2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[delucis]

Thanks for this @ElianCodes! Looks surprisingly mostly OK on a quick browse around.

We might want to set scopedStyleStrategy: 'where' in astro.config.mjs just to be safe. I’ve only spotted one CSS detail off so far caused by specificity shifts with the new attribute default, but there might be some others lurking and shouldn’t do any harm to switch back to the :where() approach.

I haven’t seen anything yet, but we should also keep an eye out for issues caused by compressHTML now being enabled by default. Spotted a few issues in Starlight where spaces between inline elements were getting collapsed due to withastro/compiler#852

[itsmatteomanf]

Very minor thing, but on Safari latest /en/guides/upgrade-to/v3/ doesn't have a fully working scroll-spy (works on current deployed).

Stops at https://deploy-preview-4461--astro-docs-2.netlify.app/en/guides/upgrade-to/v3/#moved-astro-check-now-requires-an-external-package.

[ElianCodes]

Very minor thing, but on Safari latest /en/guides/upgrade-to/v3/ doesn't have a fully working scroll-spy (works on current deployed).

@itsmatteomanf, weird! It seems to work fine on my Safari!

[itsmatteomanf]

Another, even more minor thing, the chevrons on the sidebar are closer to the text. Tested on Chrome and Safari latest.

[itsmatteomanf]

Very minor thing, but on Safari latest /en/guides/upgrade-to/v3/ doesn't have a fully working scroll-spy (works on current deployed).

@itsmatteomanf, weird! It seems to work fine on my Safari!

And now works for me, too. I tried refreshing, changing page, hard refreshing, and it stayed, but now decided to work. It's so interesting sometimes.

[itsmatteomanf]

Actually important thing.

The theme selector default loads to unselected.

If you select the other option compared to current then works fine, but doesn't save for the next load, which resets to system settings. Both Chrome latest and Safari latest.

Checked, the theme local storage is not set.

[Alynva]

I found a weird tab synchronization behaviour:

[itsmatteomanf]

I found a weird tab synchronization behaviour:

That works fine for me, the snap to the top of the code block scroll wise is jarring, but it's the same as v2.

Ok, now I see that, too. It doesn't happen all the time, but it does.

[itsmatteomanf]

the chevrons on the sidebar are closer to the text

Same with the language "tags" for not translated pages.

[sarah11918]

Not sure whether this was happening before but confirming the site and new port works fine in Gitpod, but with these error messages in the terminal:

[Alynva]

I found a weird tab synchronization behaviour:

That works fine for me, the snap to the top of the code block scroll wise is jarring, but it's the same as v2.

Ok, now I see that, too.

I think it happens on components after the page's fold, here its possible to test both (before and after the fold)

[itsmatteomanf]

I found a weird tab synchronization behaviour:

That works fine for me, the snap to the top of the code block scroll wise is jarring, but it's the same as v2.
Ok, now I see that, too.

I think it happens on components after the page's fold, here its possible to test both (before and after the fold)

Yeah, it looks like some sort of issue with loading of the component.

[Fryuni]

I just tried every behavior I could remember and every combination of odd actions I could think of, with some special care on the tutorials. Everything is behaving correctly as far as I can tell, but I found a single asset problem.

The confirmation for the feedback form is broken.

How it was supposed to be:

What happened:

[VoxelMC]

Very very minor thing I noticed a little while ago - some faulty styling here.

[sarah11918]

@VoxelMC That issue is in the live docs right now! Sharp eye, but it's not related to the v3 upgrade and needs its own fix.

Would you like to make a separate PR to fix the indentation there? https://github.com/withastro/docs/edit/main/src/content/docs/en/guides/middleware.mdx

[Fryuni]

Seems like the same problem is present in all translations, same fix for all of them.

[VoxelMC]

@VoxelMC That issue is in the live docs right now! Sharp eye, but it's not related to the v3 upgrade and needs its own fix.

Would you like to make a separate PR to fix the indentation there? https://github.com/withastro/docs/edit/main/src/content/docs/en/guides/middleware.mdx

@sarah11918 I will do just that!

[itsmatteomanf]

@ElianCodes looks good now to me, the toggle for light/dark works perfectly.

[TheOtterlord]

All other client:visible component usage seems to work 👍

[delucis]

LGTM! Thanks for all the work on this @ElianCodes and everyone for checking in and reporting problems!