[Docs Site] Upgrade Astro to 5.4.1 and Starlight to 0.32.2

KianNH · KianNH · commit b910a4a76722 · 2025-03-03T14:10:34.000Z
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -28,11 +28,11 @@
 		"@actions/core": "1.11.1",
 		"@actions/github": "6.0.0",
 		"@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.6.14",
@@ -50,7 +50,7 @@
 		"@types/react-dom": "19.0.4",
 		"@typescript-eslint/parser": "8.25.0",
 		"algoliasearch": "5.20.2",
-		"astro": "5.2.1",
+		"astro": "5.4.1",
 		"astro-breadcrumbs": "3.3.1",
 		"astro-icon": "1.1.5",
 		"astro-live-code": "0.0.5",
@@ -94,7 +94,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",
diff --git a/src/components/Description.astro b/src/components/Description.astro
@@ -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>
diff --git a/src/components/Flex.astro b/src/components/Flex.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>
diff --git a/src/components/HomepageHero.astro b/src/components/HomepageHero.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} />}
diff --git a/src/components/MetaInfo.astro b/src/components/MetaInfo.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>
diff --git a/src/components/RelatedProduct.astro b/src/components/RelatedProduct.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>
diff --git a/src/components/homepage/FeaturedContentSection.astro b/src/components/homepage/FeaturedContentSection.astro
@@ -32,7 +32,7 @@ const { title, text, image, cards, imagePosition } = props.parse(Astro.props);
 <div class="flex h-1/3 items-center">
 	{
 		imagePosition === "before" && (
-			<div class="w-full m-8">
+			<div class="m-8 w-full">
 				<Image
 					src={image.light}
 					alt={`${title} section image`}
@@ -61,7 +61,10 @@ const { title, text, image, cards, imagePosition } = props.parse(Astro.props);
 							moreVideosLink="false"
 						/>
 
-						<LinkCard title={"Explore our Developer Platform"} href={"/products/?product-group=Developer+platform"} />
+						<LinkCard
+							title={"Explore our Developer Platform"}
+							href={"/products/?product-group=Developer+platform"}
+						/>
 					</Card>
 				</div>
 			) : (
@@ -80,7 +83,7 @@ const { title, text, image, cards, imagePosition } = props.parse(Astro.props);
 
 	{
 		imagePosition === "after" && (
-			<div class="w-full m-8">
+			<div class="m-8 w-full">
 				<Image
 					src={image.light}
 					alt={`${title} section image`}
diff --git a/src/components/homepage/FooterHeroBlock.astro b/src/components/homepage/FooterHeroBlock.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>
diff --git a/src/components/homepage/TryItSection.astro b/src/components/homepage/TryItSection.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>
diff --git a/src/components/models/SchemaViewer.astro b/src/components/models/SchemaViewer.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 />,
diff --git a/src/components/overrides/Footer.astro b/src/components/overrides/Footer.astro
@@ -1,5 +1,4 @@
 ---
-import type { Props } from "@astrojs/starlight/props";
 import Default from "@astrojs/starlight/components/Footer.astro";
 import OneTrust from "../OneTrust.astro";
 import FeedbackPrompt from "../FeedbackPrompt.tsx";
@@ -69,7 +68,7 @@ const homepageLegalLinks = Object.entries({
 	Trademark: "https://www.cloudflare.com/trademark/",
 });
 
-const isHomepage = Astro.props.id === "";
+const isHomepage = Astro.locals.starlightRoute.id === "";
 
 let isProduction = false;
 
@@ -128,7 +127,7 @@ if (
 			<div class="feedback-prompt">
 				<FeedbackPrompt client:idle />
 			</div>
-			<Default {...Astro.props} />
+			<Default />
 			<div id="footer-links" class="mt-6 flex flex-wrap items-center space-x-4">
 				{Object.entries(links).map(([text, href]) => (
 					<a href={href} class="text-xs text-black decoration-accent">
diff --git a/src/components/overrides/Head.astro b/src/components/overrides/Head.astro
@@ -1,5 +1,4 @@
 ---
-import type { Props } from "@astrojs/starlight/props";
 import Default from "@astrojs/starlight/components/Head.astro";
 import { differenceInCalendarDays } from "date-fns";
 import "tippy.js/dist/tippy.css";
@@ -10,7 +9,7 @@ import type { CollectionEntry } from "astro:content";
 
 // grab the current top-level folder. Remove . characters for 1.1.1.1 URL
 const currentSection = Astro.url.pathname.split("/")[1].replaceAll(".", "");
-const head = Astro.props.entry.data.head;
+const head = Astro.locals.starlightRoute.entry.data.head;
 
 if (currentSection) {
 	const product = await getEntry("products", currentSection);
@@ -31,7 +30,7 @@ if (currentSection) {
 					content: title,
 				};
 			} else {
-				title = `${Astro.props.entry.data.title} · ${product.data.meta.title}`;
+				title = `${Astro.locals.starlightRoute.entry.data.title} · ${product.data.meta.title}`;
 				head.push({
 					tag: "title",
 					attrs: {},
@@ -92,7 +91,7 @@ if (currentSection) {
 
 // Add noindex tag if present in frontmatter
 
-if (Astro.props.entry.data.noindex) {
+if (Astro.locals.starlightRoute.entry.data.noindex) {
 	head.push({
 		tag: "meta",
 		attrs: {
@@ -105,8 +104,8 @@ if (Astro.props.entry.data.noindex) {
 
 // Adding metadata used for reporting and search indexing
 // content type
-if (Astro.props.entry.data.pcx_content_type) {
-	const contentType = Astro.props.entry.data.pcx_content_type;
+if (Astro.locals.starlightRoute.entry.data.pcx_content_type) {
+	const contentType = Astro.locals.starlightRoute.entry.data.pcx_content_type;
 	head.push({
 		tag: "meta",
 		attrs: {
@@ -126,8 +125,8 @@ if (Astro.props.entry.data.pcx_content_type) {
 }
 
 // other products
-if (Astro.props.entry.data.products) {
-	const additionalProducts = Astro.props.entry.data.products;
+if (Astro.locals.starlightRoute.entry.data.products) {
+	const additionalProducts = Astro.locals.starlightRoute.entry.data.products;
 	head.push({
 		tag: "meta",
 		attrs: {
@@ -139,8 +138,8 @@ if (Astro.props.entry.data.products) {
 }
 
 // other products
-if (Astro.props.entry.data.tags) {
-	const pageTags = Astro.props.entry.data.tags;
+if (Astro.locals.starlightRoute.entry.data.tags) {
+	const pageTags = Astro.locals.starlightRoute.entry.data.tags;
 	head.push({
 		tag: "meta",
 		attrs: {
@@ -151,10 +150,10 @@ if (Astro.props.entry.data.tags) {
 	});
 }
 
-if (Astro.props.entry.data.updated) {
+if (Astro.locals.starlightRoute.entry.data.updated) {
 	const daysBetween = differenceInCalendarDays(
 		new Date(),
-		Astro.props.entry.data.updated,
+		Astro.locals.starlightRoute.entry.data.updated,
 	);
 	head.push({
 		tag: "meta",
@@ -168,9 +167,9 @@ if (Astro.props.entry.data.updated) {
 
 // end metadata
 
-if (Astro.props.entry.data.pcx_content_type === "changelog") {
+if (Astro.locals.starlightRoute.entry.data.pcx_content_type === "changelog") {
 	const href = new URL(Astro.site ?? "");
-	href.pathname = Astro.props.entry.slug.concat("/index.xml");
+	href.pathname = Astro.locals.starlightRoute.entry.slug.concat("/index.xml");
 
 	head.push({
 		tag: "link",
@@ -183,7 +182,7 @@ if (Astro.props.entry.data.pcx_content_type === "changelog") {
 	});
 }
 
-if (Astro.props.entry.data.external_link) {
+if (Astro.locals.starlightRoute.entry.data.external_link) {
 	head.push({
 		tag: "meta",
 		attrs: {
@@ -195,16 +194,16 @@ if (Astro.props.entry.data.external_link) {
 	head.push({
 		tag: "meta",
 		attrs: {
-			content: `0; url=${Astro.props.entry.data.external_link}`,
+			content: `0; url=${Astro.locals.starlightRoute.entry.data.external_link}`,
 			"http-equiv": "refresh",
 		},
 		content: "",
 	});
 }
 
 const ogImagePath = await getOgImage(
-	(Astro.props.originalEntry as CollectionEntry<"changelog">) ??
-		Astro.props.entry,
+	(Astro.locals.starlightRoute.originalEntry as CollectionEntry<"changelog">) ??
+		Astro.locals.starlightRoute.entry,
 );
 const ogImageUrl = new URL(ogImagePath, Astro.url.origin).toString();
 
@@ -241,4 +240,4 @@ head.push(...ogImageTags);
 <script src="src/scripts/footnotes.ts"></script>
 <script src="src/scripts/mermaid.ts"></script>
 <script src="src/scripts/analytics.ts"></script>
-<Default {...Astro.props}><slot /></Default>
+<Default><slot /></Default>
diff --git a/src/components/overrides/Hero.astro b/src/components/overrides/Hero.astro
@@ -1,9 +1,8 @@
 ---
-import type { Props } from "@astrojs/starlight/props";
 import Default from "@astrojs/starlight/components/Hero.astro";
 import HomepageHero from "../HomepageHero.astro";
 
-const isHomepage = Astro.props.id === "";
+const isHomepage = Astro.locals.starlightRoute.id === "";
 ---
 
-{isHomepage ? <HomepageHero {...Astro.props} /> : <Default {...Astro.props} />}
+{isHomepage ? <HomepageHero /> : <Default />}
diff --git a/src/components/overrides/Page.astro b/src/components/overrides/Page.astro
@@ -1,13 +1,10 @@
 ---
-import type { Props } from "@astrojs/starlight/props";
 import Default from "@astrojs/starlight/components/Page.astro";
 
 import { generateDescription, generateTableOfContents } from "~/util/props";
-import { getSidebar, flattenSidebar, type SidebarEntry } from "~/util/sidebar";
+import { getSidebar, flattenSidebar } from "~/util/sidebar";
 
-type Group = Extract<Props["sidebar"][0], { type: "group" }>;
-
-const props = Astro.props;
+const props = Astro.locals.starlightRoute;
 const data = props.entry.data;
 
 const html = await Astro.slots.render("default");
@@ -17,12 +14,11 @@ if (props.toc) {
 }
 
 if (props.hasSidebar) {
-	(props.sidebar as unknown as Group) = await getSidebar(Astro);
+	const group = await getSidebar(Astro);
+	props.sidebar = group.entries;
 
 	if (props.pagination) {
-		const flattened = flattenSidebar(
-			props.sidebar.entries as unknown as SidebarEntry[],
-		);
+		const flattened = flattenSidebar(props.sidebar);
 
 		const idx = flattened.findIndex((entry) => entry.isCurrent);
 
@@ -61,7 +57,7 @@ if (data.updated) {
 }
 ---
 
-<Default {...Astro.props} set:html={html} />
+<Default set:html={html} />
 
 <style>
 	html:not([data-has-toc]) {
diff --git a/src/components/overrides/PageTitle.astro b/src/components/overrides/PageTitle.astro
diff --git a/src/components/overrides/Sidebar.astro b/src/components/overrides/Sidebar.astro
diff --git a/src/components/overrides/SocialIcons.astro b/src/components/overrides/SocialIcons.astro
diff --git a/src/components/overrides/TableOfContents.astro b/src/components/overrides/TableOfContents.astro
diff --git a/src/util/props.ts b/src/util/props.ts
diff --git a/src/util/sidebar.ts b/src/util/sidebar.ts
