withastro · delucis · Sep 22, 2024 · Sep 22, 2024 · Sep 22, 2024 · Oct 19, 2024
diff --git a/packages/starlight/components/Banner.astro b/packages/starlight/components/Banner.astro
@@ -1,7 +1,5 @@
 ---
-import type { Props } from '../props';
-
-const { banner } = Astro.props.entry.data;
+const { banner } = Astro.locals.routeData!.entry.data;
 ---
 
 {banner && <div class="sl-banner" set:html={banner.content} />}

diff --git a/packages/starlight/components/ContentPanel.astro b/packages/starlight/components/ContentPanel.astro
@@ -1,7 +1,3 @@
----
-import type { Props } from '../props';
----
-
 <div class="content-panel">
 	<div class="sl-container"><slot /></div>
 </div>

diff --git a/packages/starlight/components/DraftContentNotice.astro b/packages/starlight/components/DraftContentNotice.astro
@@ -1,6 +1,5 @@
 ---
 import ContentNotice from './ContentNotice.astro';
-import type { Props } from '../props';
 ---
 
 <ContentNotice icon="warning" label={Astro.locals.t('page.draft')} />
diff --git a/packages/starlight/components/EditLink.astro b/packages/starlight/components/EditLink.astro
@@ -1,8 +1,7 @@
 ---
 import Icon from '../user-components/Icon.astro';
-import type { Props } from '../props';
 
-const { editUrl } = Astro.props;
+const { editUrl } = Astro.locals.routeData!;
 ---
 
 {

diff --git a/packages/starlight/components/FallbackContentNotice.astro b/packages/starlight/components/FallbackContentNotice.astro
@@ -1,6 +1,5 @@
 ---
 import ContentNotice from './ContentNotice.astro';
-import type { Props } from '../props';
 ---
 
 <ContentNotice icon="warning" label={Astro.locals.t('i18n.untranslatedContent')} />
diff --git a/packages/starlight/components/Footer.astro b/packages/starlight/components/Footer.astro
@@ -1,6 +1,4 @@
 ---
-import type { Props } from '../props';
-
 import EditLink from 'virtual:starlight/components/EditLink';
 import LastUpdated from 'virtual:starlight/components/LastUpdated';
 import Pagination from 'virtual:starlight/components/Pagination';
@@ -10,10 +8,10 @@ import { Icon } from '../components';
 
 <footer class="sl-flex">
 	<div class="meta sl-flex">
-		<EditLink {...Astro.props} />
-		<LastUpdated {...Astro.props} />
+		<EditLink />
+		<LastUpdated />
 	</div>
-	<Pagination {...Astro.props} />
+	<Pagination />
 
 	{
 		config.credits && (

diff --git a/packages/starlight/components/Head.astro b/packages/starlight/components/Head.astro
@@ -6,9 +6,8 @@ import type { HeadConfigSchema } from '../schemas/head';
 import { fileWithBase } from '../utils/base';
 import { createHead } from '../utils/head';
 import { localizedUrl } from '../utils/localizedUrl';
-import type { Props } from '../props';
 
-const { entry, lang, siteTitle } = Astro.props;
+const { entry, lang, siteTitle } = Astro.locals.routeData!;
 const { data } = entry;
 
 const canonical = Astro.site ? new URL(Astro.url.pathname, Astro.site) : undefined;

diff --git a/packages/starlight/components/Header.astro b/packages/starlight/components/Header.astro
@@ -1,6 +1,5 @@
 ---
 import config from 'virtual:starlight/user-config';
-import type { Props } from '../props';
 
 import LanguageSelect from 'virtual:starlight/components/LanguageSelect';
 import Search from 'virtual:starlight/components/Search';
@@ -17,17 +16,17 @@ const shouldRenderSearch =
 
 <div class="header sl-flex">
 	<div class="title-wrapper sl-flex">
-		<SiteTitle {...Astro.props} />
+		<SiteTitle />
 	</div>
 	<div class="sl-flex">
-		{shouldRenderSearch && <Search {...Astro.props} />}
+		{shouldRenderSearch && <Search />}
 	</div>
 	<div class="sl-hidden md:sl-flex right-group">
 		<div class="sl-flex social-icons">
-			<SocialIcons {...Astro.props} />
+			<SocialIcons />
 		</div>
-		<ThemeSelect {...Astro.props} />
-		<LanguageSelect {...Astro.props} />
+		<ThemeSelect />
+		<LanguageSelect />
 	</div>
 </div>
 

diff --git a/packages/starlight/components/Hero.astro b/packages/starlight/components/Hero.astro
@@ -1,10 +1,9 @@
 ---
 import { Image } from 'astro:assets';
 import { PAGE_TITLE_ID } from '../constants';
-import type { Props } from '../props';
 import LinkButton from '../user-components/LinkButton.astro';
 
-const { data } = Astro.props.entry;
+const { data } = Astro.locals.routeData!.entry;
 const { title = data.title, tagline, image, actions = [] } = data.hero || {};
 
 const imageAttrs = {

diff --git a/packages/starlight/components/LanguageSelect.astro b/packages/starlight/components/LanguageSelect.astro
@@ -2,7 +2,6 @@
 import config from 'virtual:starlight/user-config';
 import { localizedUrl } from '../utils/localizedUrl';
 import Select from './Select.astro';
-import type { Props } from '../props';
 
 /**
  * Get the equivalent of the current page path for the passed locale.
@@ -18,10 +17,10 @@ function localizedPathname(locale: string | undefined): string {
 			<Select
 				icon="translate"
 				label={Astro.locals.t('languageSelect.accessibleLabel')}
-				value={localizedPathname(Astro.props.locale)}
+				value={localizedPathname(Astro.locals.routeData!.locale)}
 				options={Object.entries(config.locales).map(([code, locale]) => ({
 					value: localizedPathname(code),
-					selected: code === Astro.props.locale,
+					selected: code === Astro.locals.routeData!.locale,
 					label: locale!.label,
 				}))}
 				width="7em"

diff --git a/packages/starlight/components/LastUpdated.astro b/packages/starlight/components/LastUpdated.astro
@@ -1,7 +1,5 @@
 ---
-import type { Props } from '../props';
-
-const { lang, lastUpdated } = Astro.props;
+const { lang, lastUpdated } = Astro.locals.routeData!;
 ---
 
 {

diff --git a/packages/starlight/components/MarkdownContent.astro b/packages/starlight/components/MarkdownContent.astro
@@ -1,5 +1,4 @@
 ---
-import type { Props } from '../props';
 import '../style/markdown.css';
 ---
 

diff --git a/packages/starlight/components/MobileMenuFooter.astro b/packages/starlight/components/MobileMenuFooter.astro
@@ -2,15 +2,14 @@
 import LanguageSelect from 'virtual:starlight/components/LanguageSelect';
 import SocialIcons from 'virtual:starlight/components/SocialIcons';
 import ThemeSelect from 'virtual:starlight/components/ThemeSelect';
-import type { Props } from '../props';
 ---
 
 <div class="mobile-preferences sl-flex">
 	<div class="sl-flex social-icons">
-		<SocialIcons {...Astro.props} />
+		<SocialIcons />
 	</div>
-	<ThemeSelect {...Astro.props} />
-	<LanguageSelect {...Astro.props} />
+	<ThemeSelect />
+	<LanguageSelect />
 </div>
 
 <style>

diff --git a/packages/starlight/components/MobileMenuToggle.astro b/packages/starlight/components/MobileMenuToggle.astro
@@ -1,5 +1,4 @@
 ---
-import type { Props } from '../props';
 import Icon from '../user-components/Icon.astro';
 ---
 

diff --git a/packages/starlight/components/MobileTableOfContents.astro b/packages/starlight/components/MobileTableOfContents.astro
@@ -1,9 +1,8 @@
 ---
 import Icon from '../user-components/Icon.astro';
 import TableOfContentsList from './TableOfContents/TableOfContentsList.astro';
-import type { Props } from '../props';
 
-const { toc } = Astro.props;
+const { toc } = Astro.locals.routeData!;
 ---
 
 {

diff --git a/packages/starlight/components/Page.astro b/packages/starlight/components/Page.astro
@@ -1,6 +1,4 @@
 ---
-import type { Props } from '../props';
-
 // Built-in CSS styles.
 import '../style/props.css';
 import '../style/reset.css';
@@ -31,22 +29,24 @@ import '../style/asides.css';
 // Important that this is the last import so it can override built-in styles.
 import 'virtual:starlight/user-css';
 
+const routeData = Astro.locals.routeData!;
+
 const pagefindEnabled =
-	Astro.props.entry.slug !== '404' &&
-	!Astro.props.entry.slug.endsWith('/404') &&
-	Astro.props.entry.data.pagefind !== false;
+	routeData.entry.slug !== '404' &&
+	!routeData.entry.slug.endsWith('/404') &&
+	routeData.entry.data.pagefind !== false;
 ---
 
 <html
-	lang={Astro.props.lang}
-	dir={Astro.props.dir}
-	data-has-toc={Boolean(Astro.props.toc)}
-	data-has-sidebar={Astro.props.hasSidebar}
-	data-has-hero={Boolean(Astro.props.entry.data.hero)}
+	lang={routeData.lang}
+	dir={routeData.dir}
+	data-has-toc={Boolean(routeData.toc)}
+	data-has-sidebar={routeData.hasSidebar}
+	data-has-hero={Boolean(routeData.entry.data.hero)}
 	data-theme="dark"
 >
 	<head>
-		<Head {...Astro.props} />
+		<Head />
 		<style>
 			html:not([data-has-toc]) {
 				--sl-mobile-toc-height: 0rem;
@@ -73,44 +73,44 @@ const pagefindEnabled =
 				}
 			}
 		</style>
-		<ThemeProvider {...Astro.props} />
+		<ThemeProvider />
 	</head>
 	<body>
-		<SkipLink {...Astro.props} />
-		<PageFrame {...Astro.props}>
-			<Header slot="header" {...Astro.props} />
-			{Astro.props.hasSidebar && <Sidebar slot="sidebar" {...Astro.props} />}
+		<SkipLink />
+		<PageFrame>
+			<Header slot="header" />
+			{routeData.hasSidebar && <Sidebar slot="sidebar" />}
 			<script src="./SidebarPersistState"></script>
-			<TwoColumnContent {...Astro.props}>
-				<PageSidebar slot="right-sidebar" {...Astro.props} />
+			<TwoColumnContent>
+				<PageSidebar slot="right-sidebar" />
 				<main
 					data-pagefind-body={pagefindEnabled}
-					lang={Astro.props.entryMeta.lang}
-					dir={Astro.props.entryMeta.dir}
+					lang={routeData.entryMeta.lang}
+					dir={routeData.entryMeta.dir}
 				>
 					{/* TODO: Revisit how this logic flows. */}
-					<Banner {...Astro.props} />
+					<Banner />
 					{
-						Astro.props.entry.data.hero ? (
-							<ContentPanel {...Astro.props}>
-								<Hero {...Astro.props} />
-								<MarkdownContent {...Astro.props}>
+						routeData.entry.data.hero ? (
+							<ContentPanel>
+								<Hero />
+								<MarkdownContent>
 									<slot />
 								</MarkdownContent>
-								<Footer {...Astro.props} />
+								<Footer />
 							</ContentPanel>
 						) : (
 							<>
-								<ContentPanel {...Astro.props}>
-									<PageTitle {...Astro.props} />
-									{Astro.props.entry.data.draft && <DraftContentNotice {...Astro.props} />}
-									{Astro.props.isFallback && <FallbackContentNotice {...Astro.props} />}
+								<ContentPanel>
+									<PageTitle />
+									{routeData.entry.data.draft && <DraftContentNotice />}
+									{routeData.isFallback && <FallbackContentNotice />}
 								</ContentPanel>
-								<ContentPanel {...Astro.props}>
-									<MarkdownContent {...Astro.props}>
+								<ContentPanel>
+									<MarkdownContent>
 										<slot />
 									</MarkdownContent>
-									<Footer {...Astro.props} />
+									<Footer />
 								</ContentPanel>
 							</>
 						)

diff --git a/packages/starlight/components/PageFrame.astro b/packages/starlight/components/PageFrame.astro
@@ -1,16 +1,15 @@
 ---
 import MobileMenuToggle from 'virtual:starlight/components/MobileMenuToggle';
-import type { Props } from '../props';
 
-const { hasSidebar } = Astro.props;
+const { hasSidebar } = Astro.locals.routeData!;
 ---
 
 <div class="page sl-flex">
 	<header class="header"><slot name="header" /></header>
 	{
 		hasSidebar && (
 			<nav class="sidebar" aria-label={Astro.locals.t('sidebarNav.accessibleLabel')}>
-				<MobileMenuToggle {...Astro.props} />
+				<MobileMenuToggle />
 				<div id="starlight__sidebar" class="sidebar-pane">
 					<div class="sidebar-content sl-flex">
 						<slot name="sidebar" />

diff --git a/packages/starlight/components/PageSidebar.astro b/packages/starlight/components/PageSidebar.astro
@@ -1,19 +1,17 @@
 ---
-import type { Props } from '../props';
-
 import MobileTableOfContents from 'virtual:starlight/components/MobileTableOfContents';
 import TableOfContents from 'virtual:starlight/components/TableOfContents';
 ---
 
 {
-	Astro.props.toc && (
+	Astro.locals.routeData!.toc && (
 		<>
 			<div class="lg:sl-hidden">
-				<MobileTableOfContents {...Astro.props} />
+				<MobileTableOfContents />
 			</div>
 			<div class="right-sidebar-panel sl-hidden lg:sl-block">
 				<div class="sl-container">
-					<TableOfContents {...Astro.props} />
+					<TableOfContents />
 				</div>
 			</div>
 		</>

diff --git a/packages/starlight/components/PageTitle.astro b/packages/starlight/components/PageTitle.astro
@@ -1,9 +1,8 @@
 ---
 import { PAGE_TITLE_ID } from '../constants';
-import type { Props } from '../props';
 ---
 
-<h1 id={PAGE_TITLE_ID}>{Astro.props.entry.data.title}</h1>
+<h1 id={PAGE_TITLE_ID}>{Astro.locals.routeData!.entry.data.title}</h1>
 
 <style>
 	h1 {

diff --git a/packages/starlight/components/Pagination.astro b/packages/starlight/components/Pagination.astro
@@ -1,8 +1,7 @@
 ---
 import Icon from '../user-components/Icon.astro';
-import type { Props } from '../props';
 
-const { dir, pagination } = Astro.props;
+const { dir, pagination } = Astro.locals.routeData!;
 const { prev, next } = pagination;
 const isRtl = dir === 'rtl';
 ---

diff --git a/packages/starlight/components/Search.astro b/packages/starlight/components/Search.astro
@@ -2,7 +2,6 @@
 import '@pagefind/default-ui/css/ui.css';
 import Icon from '../user-components/Icon.astro';
 import project from 'virtual:starlight/project-context';
-import type { Props } from '../props';
 
 const pagefindTranslations = {
 	placeholder: Astro.locals.t('search.label'),

diff --git a/packages/starlight/components/Sidebar.astro b/packages/starlight/components/Sidebar.astro
@@ -1,17 +1,15 @@
 ---
-import type { Props } from '../props';
-
 import MobileMenuFooter from 'virtual:starlight/components/MobileMenuFooter';
 import SidebarPersister from './SidebarPersister.astro';
 import SidebarSublist from './SidebarSublist.astro';
 
-const { sidebar } = Astro.props;
+const { sidebar } = Astro.locals.routeData!;
 ---
 
-<SidebarPersister {...Astro.props}>
+<SidebarPersister>
 	<SidebarSublist sublist={sidebar} />
 </SidebarPersister>
 
 <div class="md:sl-hidden">
-	<MobileMenuFooter {...Astro.props} />
+	<MobileMenuFooter />
 </div>
diff --git a/packages/starlight/components/SidebarPersister.astro b/packages/starlight/components/SidebarPersister.astro
@@ -14,10 +14,9 @@
   - This is a progressive enhancement, so any errors are swallowed silently.
 */
 
-import type { Props } from '../props';
 import { getSidebarHash } from '../utils/navigation';
 
-const hash = getSidebarHash(Astro.props.sidebar);
+const hash = getSidebarHash(Astro.locals.routeData!.sidebar);
 
 declare global {
 	interface Window {