[Docs Site] Upgrade Astro to 5.4.1 and Starlight to 0.32.2 (#20478)

Author: KianNH

package-lock.json

@@ -29,11 +29,11 @@
 		"@actions/github": "6.0.0",
 		"@apidevtools/swagger-parser": "10.1.1",
 		"@astrojs/check": "0.9.4",
-		"@astrojs/react": "4.2.0",
+		"@astrojs/react": "4.2.1",
 		"@astrojs/rss": "4.0.11",
 		"@astrojs/sitemap": "3.2.1",
-		"@astrojs/starlight": "0.31.1",
-		"@astrojs/starlight-docsearch": "0.5.0",
+		"@astrojs/starlight": "0.32.2",
+		"@astrojs/starlight-docsearch": "0.6.0",
 		"@astrojs/starlight-tailwind": "3.0.0",
 		"@astrojs/tailwind": "5.1.5",
 		"@cloudflare/vitest-pool-workers": "0.7.5",
@@ -51,7 +51,7 @@
 		"@types/react-dom": "19.0.4",
 		"@typescript-eslint/parser": "8.25.0",
 		"algoliasearch": "5.20.3",
-		"astro": "5.2.1",
+		"astro": "5.4.1",
 		"astro-breadcrumbs": "3.3.1",
 		"astro-icon": "1.1.5",
 		"astro-live-code": "0.0.5",
@@ -66,6 +66,7 @@
 		"eslint-plugin-jsx-a11y": "6.10.2",
 		"eslint-plugin-react": "7.37.4",
 		"fast-glob": "3.3.3",
+		"fast-xml-parser": "5.0.8",
 		"github-slugger": "2.0.0",
 		"globals": "16.0.0",
 		"hastscript": "9.0.1",
@@ -98,7 +99,7 @@
 		"remark": "15.0.1",
 		"sharp": "0.33.5",
 		"solarflare-theme": "0.0.4",
-		"starlight-image-zoom": "0.10.1",
+		"starlight-image-zoom": "0.11.1",
 		"starlight-links-validator": "0.14.3",
 		"starlight-package-managers": "0.10.0",
 		"strip-markdown": "6.0.0",

package.json

@@ -1,3 +1,3 @@
-<div class="text-xl leading-6 mb-4" style="color: var(--sl-color-white);">
+<div class="mb-4 text-xl leading-6" style="color: var(--sl-color-white);">
 	<slot />
 </div>

src/components/Description.astro

@@ -1,3 +1,3 @@
-<div class="flex flex-col md:flex-row justify-between gap-x-2 [&_p]:!mt-0">
+<div class="flex flex-col justify-between gap-x-2 md:flex-row [&_p]:!mt-0">
 	<slot />
 </div>

src/components/Flex.astro

@@ -1,9 +1,8 @@
 ---
 import { Image } from "astro:assets";
-import type { Props } from "@astrojs/starlight/props";
 import type { ImageMetadata } from "astro";
 
-const { data } = Astro.props.entry;
+const { data } = Astro.locals.starlightRoute.entry;
 const { title = data.title, tagline, image } = data.hero || {};
 
 const imageAttrs = {
@@ -45,15 +44,15 @@ if (image) {
 	{rawHtml && <div class="hero-html sl-flex" set:html={rawHtml} />}
 	<div class="sl-flex stack">
 		<div class="sl-flex copy">
-			<div class="sl-flex copy links">
-				<a class="px-2" href="/products/">Products</a>
-				<a class="px-2" href="/fundamentals/subscriptions-and-billing/"
+			<div class="sl-flex copy links space-x-4">
+				<a href="/products/">Products</a>
+				<a href="/fundamentals/subscriptions-and-billing/"
 					>Subscriptions and billing</a
 				>
-				<a class="px-2" href="/api/">API</a>
-				<a class="px-2" href="/changelog/">Changelog</a>
-				<a class="px-2" href="/glossary/">Glossary</a>
-				<a class="px-2" href="/reference-architecture/">Architectures</a>
+				<a href="/api/">API</a>
+				<a href="/changelog/">Changelog</a>
+				<a href="/glossary/">Glossary</a>
+				<a href="/reference-architecture/">Architectures</a>
 			</div>
 			<h1 id={"_top"} data-page-title set:html={title} />
 			{tagline && <div class="tagline" set:html={tagline} />}

src/components/HomepageHero.astro

@@ -12,4 +12,4 @@ const props = z
 const { text } = props.parse(Astro.props);
 ---
 
-<span class="text-xs align-middle">{text}</span>
+<span class="align-middle text-xs">{text}</span>

src/components/MetaInfo.astro

@@ -13,10 +13,10 @@ const props = z.object({
 const { header, href, product } = props.parse(Astro.props);
 ---
 
-<div class="grid grid-cols-[32px_auto] gap-x-2 items-start">
+<div class="grid grid-cols-[32px_auto] items-start gap-x-2">
 	<AstroIcon
 		name={product}
-		class="text-[color:var(--orange-accent-200)] text-7xl"
+		class="text-7xl text-[color:var(--orange-accent-200)]"
 	/>
 	<div class="!mt-0">
 		<strong>

src/components/RelatedProduct.astro

@@ -59,7 +59,7 @@ const blocks = [
 ---
 
 <div
-	class="flex bg-gray-100 dark:bg-gray-800 bleed *:!mt-0 items-start justify-between py-10"
+	class="bleed flex items-start justify-between bg-gray-100 py-10 *:!mt-0 dark:bg-gray-800"
 >
 	{
 		blocks.map(({ title, text, links }) => (
@@ -68,13 +68,13 @@ const blocks = [
 				<p class="w-80">{text}</p>
 				<ul class="list-none pl-0">
 					{links.map((link) => (
-						<li class="flex !mt-4">
+						<li class="!mt-4 flex">
 							<Icon
 								name={link.icon}
 								size="1.5rem"
 								color="var(--sl-color-white)"
 							/>
-							<a href={link.href} class="pl-2 no-underline !text-black">
+							<a href={link.href} class="pl-2 !text-black no-underline">
 								{link.text}
 							</a>
 						</li>

src/components/homepage/FooterHeroBlock.astro

@@ -14,7 +14,7 @@ import Render from "~/components/Render.astro";
 
 		<div class="tryit-sidebar">
 			<Card title="">
-				<div class="*:block *:p-2 *:rounded">
+				<div class="*:block *:rounded *:p-2">
 					<label for="section1" id="section1Label">
 						<strong>Return HTML</strong>
 					</label>
@@ -34,7 +34,7 @@ import Render from "~/components/Render.astro";
 			</Card>
 		</div>
 
-		<div class="tryit-code ml-8 w-full !mt-0">
+		<div class="tryit-code !mt-0 ml-8 w-full">
 			<div id="section1Content" class="!mt-0 hidden">
 				<Render file="return-html-example-js" product="workers" />
 			</div>

src/components/homepage/TryItSection.astro

@@ -53,7 +53,7 @@ const jsonSchemaTree = new SchemaTree(schema, {
 jsonSchemaTree.populate();
 ---
 
-<ul class="list-none m-0 p-0">
+<ul class="m-0 list-none p-0">
 	{
 		(jsonSchemaTree.root.children[0] as RegularNode).children?.map(
 			(node: SchemaNode) => <SchemaRow node={node} root />,