@astrojs/starlight 0.31.1 → 0.32.0

package/CHANGELOG.md

@@ -1,5 +1,98 @@
 # @astrojs/starlight
 
+## 0.32.0
+
+### Minor Changes
+
+- [#2390](https://github.com/withastro/starlight/pull/2390) [`f493361`](https://github.com/withastro/starlight/commit/f493361d7b64a3279980e0f046c3a52196ab94e0) Thanks [@delucis](https://github.com/delucis)! - Moves route data to `Astro.locals` instead of passing it down via component props
+
+  ⚠️ **Breaking change:**
+  Previously, all of Starlight’s templating components, including user or plugin overrides, had access to a data object for the current route via `Astro.props`.
+  This data is now available as `Astro.locals.starlightRoute` instead.
+
+  To update, refactor any component overrides you have:
+
+  - Remove imports of `@astrojs/starlight/props`, which is now deprecated.
+  - Update code that accesses `Astro.props` to use `Astro.locals.starlightRoute` instead.
+  - Remove any spreading of `{...Astro.props}` into child components, which is no longer required.
+
+  In the following example, a custom override for Starlight’s `LastUpdated` component is updated for the new style:
+
+  ```diff
+  ---
+  import Default from '@astrojs/starlight/components/LastUpdated.astro';
+  - import type { Props } from '@astrojs/starlight/props';
+
+  - const { lastUpdated } = Astro.props;
+  + const { lastUpdated } = Astro.locals.starlightRoute;
+
+  const updatedThisYear = lastUpdated?.getFullYear() === new Date().getFullYear();
+  ---
+
+  {updatedThisYear && (
+  -   <Default {...Astro.props}><slot /></Default>
+  +   <Default><slot /></Default>
+  )}
+  ```
+
+  _Community Starlight plugins may also need to be manually updated to work with Starlight 0.32. If you encounter any issues, please reach out to the plugin author to see if it is a known issue or if an updated version is being worked on._
+
+- [#2578](https://github.com/withastro/starlight/pull/2578) [`f895f75`](https://github.com/withastro/starlight/commit/f895f75b17f36c826cc871ba1826e5ae1dff44ca) Thanks [@HiDeoo](https://github.com/HiDeoo)! - Deprecates the Starlight plugin `setup` hook in favor of the new `config:setup` hook which provides the same functionality.
+
+  ⚠️ **BREAKING CHANGE:**
+
+  The Starlight plugin `setup` hook is now deprecated and will be removed in a future release. Please update your plugins to use the new `config:setup` hook instead.
+
+  ```diff
+  export default {
+    name: 'plugin-with-translations',
+    hooks: {
+  -   'setup'({ config }) {
+  +   'config:setup'({ config }) {
+        // Your plugin configuration setup code
+      },
+    },
+  };
+  ```
+
+- [#2578](https://github.com/withastro/starlight/pull/2578) [`f895f75`](https://github.com/withastro/starlight/commit/f895f75b17f36c826cc871ba1826e5ae1dff44ca) Thanks [@HiDeoo](https://github.com/HiDeoo)! - Exposes the built-in localization system in the Starlight plugin `config:setup` hook.
+
+  ⚠️ **BREAKING CHANGE:**
+
+  This addition changes how Starlight plugins add or update translation strings used in Starlight’s localization APIs.
+  Plugins previously using the [`injectTranslations()`](https://starlight.astro.build/reference/plugins/#injecttranslations) callback function from the plugin [`config:setup`](https://starlight.astro.build/reference/plugins/#configsetup) hook should now use the same function available in the [`i18n:setup`](https://starlight.astro.build/reference/plugins/#i18nsetup) hook.
+
+  ```diff
+  export default {
+    name: 'plugin-with-translations',
+    hooks: {
+  -   'config:setup'({ injectTranslations }) {
+  +   'i18n:setup'({ injectTranslations }) {
+        injectTranslations({
+          en: {
+            'myPlugin.doThing': 'Do the thing',
+          },
+          fr: {
+            'myPlugin.doThing': 'Faire le truc',
+          },
+        });
+      },
+    },
+  };
+  ```
+
+- [#2858](https://github.com/withastro/starlight/pull/2858) [`2df9d05`](https://github.com/withastro/starlight/commit/2df9d05fe7b61282809aa85a1d77662fdd3b748f) Thanks [@XREvo](https://github.com/XREvo)! - Adds support for Pagefind’s multisite search features
+
+- [#2578](https://github.com/withastro/starlight/pull/2578) [`f895f75`](https://github.com/withastro/starlight/commit/f895f75b17f36c826cc871ba1826e5ae1dff44ca) Thanks [@HiDeoo](https://github.com/HiDeoo)! - Adds a new [`HookParameters`](https://starlight.astro.build/reference/plugins/#hooks) utility type to get the type of a plugin hook’s arguments.
+
+- [#2578](https://github.com/withastro/starlight/pull/2578) [`f895f75`](https://github.com/withastro/starlight/commit/f895f75b17f36c826cc871ba1826e5ae1dff44ca) Thanks [@HiDeoo](https://github.com/HiDeoo)! - Adds a new [`useTranslations()`](https://starlight.astro.build/reference/plugins/#usetranslations) callback function to the Starlight plugin `config:setup` hook to generate a utility function to access UI strings for a given language.
+
+- [#2578](https://github.com/withastro/starlight/pull/2578) [`f895f75`](https://github.com/withastro/starlight/commit/f895f75b17f36c826cc871ba1826e5ae1dff44ca) Thanks [@HiDeoo](https://github.com/HiDeoo)! - Adds a new [`absolutePathToLang()`](https://starlight.astro.build/reference/plugins/#absolutepathtolang) callback function to the Starlight plugin `config:setup` to get the language for a given absolute file path.
+
+### Patch Changes
+
+- [#2848](https://github.com/withastro/starlight/pull/2848) [`9b32ba9`](https://github.com/withastro/starlight/commit/9b32ba967c5741354bc99ba0bcff3f454b8117ad) Thanks [@HiDeoo](https://github.com/HiDeoo)! - Fixes styling of [filter](https://pagefind.app/docs/filtering/) and [metadata](https://pagefind.app/docs/metadata/) elements in Pagefind search UI.
+
 ## 0.31.1
 
 ### Patch Changes

package/components/Banner.astro

@@ -1,7 +1,5 @@
 ---
-import type { Props } from '../props';
-
-const { banner } = Astro.props.entry.data;
+const { banner } = Astro.locals.starlightRoute.entry.data;
 ---
 
 {banner && <div class="sl-banner" set:html={banner.content} />}

package/components/ContentPanel.astro

@@ -1,7 +1,3 @@
----
-import type { Props } from '../props';
----
-
 <div class="content-panel">
 	<div class="sl-container"><slot /></div>
 </div>

package/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')} />

package/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.starlightRoute;
 ---
 
 {

package/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')} />

package/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 && (

package/components/Head.astro

@@ -7,9 +7,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.starlightRoute;
 const { data } = entry;
 
 const canonical = Astro.site ? new URL(Astro.url.pathname, Astro.site) : undefined;

package/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 print:hidden">
-		{shouldRenderSearch && <Search {...Astro.props} />}
+		{shouldRenderSearch && <Search />}
 	</div>
 	<div class="sl-hidden md:sl-flex print:hidden right-group">
 		<div class="sl-flex social-icons">
-			<SocialIcons {...Astro.props} />
+			<SocialIcons />
 		</div>
-		<ThemeSelect {...Astro.props} />
-		<LanguageSelect {...Astro.props} />
+		<ThemeSelect />
+		<LanguageSelect />
 	</div>
 </div>
 

package/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.starlightRoute.entry;
 const { title = data.title, tagline, image, actions = [] } = data.hero || {};
 
 const imageAttrs = {

package/components/LanguageSelect.astro

@@ -3,7 +3,6 @@ import context from 'virtual:starlight/project-context';
 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.
@@ -19,10 +18,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.starlightRoute.locale)}
 				options={Object.entries(config.locales).map(([code, locale]) => ({
 					value: localizedPathname(code),
-					selected: code === Astro.props.locale,
+					selected: code === Astro.locals.starlightRoute.locale,
 					label: locale!.label,
 				}))}
 				width="7em"

package/components/LastUpdated.astro

@@ -1,7 +1,5 @@
 ---
-import type { Props } from '../props';
-
-const { lang, lastUpdated } = Astro.props;
+const { lang, lastUpdated } = Astro.locals.starlightRoute;
 ---
 
 {

package/components/MarkdownContent.astro

@@ -1,5 +1,4 @@
 ---
-import type { Props } from '../props';
 import '../style/markdown.css';
 ---
 

package/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>

package/components/MobileMenuToggle.astro

@@ -1,5 +1,4 @@
 ---
-import type { Props } from '../props';
 import Icon from '../user-components/Icon.astro';
 ---
 

package/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.starlightRoute;
 ---
 
 {

package/components/Page.astro

@@ -1,6 +1,4 @@
 ---
-import type { Props } from '../props';
-
 // Built-in CSS styles.
 import '../style/props.css';
 import '../style/reset.css';
@@ -33,23 +31,25 @@ import 'virtual:starlight/user-css';
 
 import printHref from '../style/print.css?url&no-inline';
 
+const { starlightRoute } = Astro.locals;
+
 const pagefindEnabled =
-	Astro.props.entry.slug !== '404' &&
-	!Astro.props.entry.slug.endsWith('/404') &&
-	Astro.props.entry.data.pagefind !== false;
+	starlightRoute.entry.slug !== '404' &&
+	!starlightRoute.entry.slug.endsWith('/404') &&
+	starlightRoute.entry.data.pagefind !== false;
 
 const htmlDataAttributes: DOMStringMap = { 'data-theme': 'dark' };
-if (Boolean(Astro.props.toc)) htmlDataAttributes['data-has-toc'] = '';
-if (Astro.props.hasSidebar) htmlDataAttributes['data-has-sidebar'] = '';
-if (Boolean(Astro.props.entry.data.hero)) htmlDataAttributes['data-has-hero'] = '';
+if (Boolean(starlightRoute.toc)) htmlDataAttributes['data-has-toc'] = '';
+if (starlightRoute.hasSidebar) htmlDataAttributes['data-has-sidebar'] = '';
+if (Boolean(starlightRoute.entry.data.hero)) htmlDataAttributes['data-has-hero'] = '';
 
 const mainDataAttributes: DOMStringMap = {};
 if (pagefindEnabled) mainDataAttributes['data-pagefind-body'] = '';
 ---
 
-<html lang={Astro.props.lang} dir={Astro.props.dir} {...htmlDataAttributes}>
+<html lang={starlightRoute.lang} dir={starlightRoute.dir} {...htmlDataAttributes}>
 	<head>
-		<Head {...Astro.props} />
+		<Head />
 		<style>
 			html:not([data-has-toc]) {
 				--sl-mobile-toc-height: 0rem;
@@ -76,45 +76,45 @@ if (pagefindEnabled) mainDataAttributes['data-pagefind-body'] = '';
 				}
 			}
 		</style>
-		<ThemeProvider {...Astro.props} />
+		<ThemeProvider />
 		<link rel="stylesheet" href={printHref} media="print" />
 	</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" />
+			{starlightRoute.hasSidebar && <Sidebar slot="sidebar" />}
 			<script src="./SidebarPersistState"></script>
-			<TwoColumnContent {...Astro.props}>
-				<PageSidebar slot="right-sidebar" {...Astro.props} />
+			<TwoColumnContent>
+				<PageSidebar slot="right-sidebar" />
 				<main
 					{...mainDataAttributes}
-					lang={Astro.props.entryMeta.lang}
-					dir={Astro.props.entryMeta.dir}
+					lang={starlightRoute.entryMeta.lang}
+					dir={starlightRoute.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}>
+						starlightRoute.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 />
+									{starlightRoute.entry.data.draft && <DraftContentNotice />}
+									{starlightRoute.isFallback && <FallbackContentNotice />}
 								</ContentPanel>
-								<ContentPanel {...Astro.props}>
-									<MarkdownContent {...Astro.props}>
+								<ContentPanel>
+									<MarkdownContent>
 										<slot />
 									</MarkdownContent>
-									<Footer {...Astro.props} />
+									<Footer />
 								</ContentPanel>
 							</>
 						)

package/components/PageFrame.astro

@@ -1,8 +1,7 @@
 ---
 import MobileMenuToggle from 'virtual:starlight/components/MobileMenuToggle';
-import type { Props } from '../props';
 
-const { hasSidebar } = Astro.props;
+const { hasSidebar } = Astro.locals.starlightRoute;
 ---
 
 <div class="page sl-flex">
@@ -10,7 +9,7 @@ const { hasSidebar } = Astro.props;
 	{
 		hasSidebar && (
 			<nav class="sidebar print:hidden" 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" />

package/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.starlightRoute.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>
 		</>

package/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.starlightRoute.entry.data.title}</h1>
 
 <style>
 	h1 {

package/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.starlightRoute;
 const { prev, next } = pagination;
 const isRtl = dir === 'rtl';
 ---

package/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'),
@@ -256,15 +255,20 @@ if (project.trailingSlash === 'never') dataAttributes['data-strip-trailing-slash
 	}
 
 	#starlight__search {
-		--pagefind-ui-primary: var(--sl-color-accent-light);
+		--pagefind-ui-primary: var(--sl-color-text);
 		--pagefind-ui-text: var(--sl-color-gray-2);
 		--pagefind-ui-font: var(--__sl-font);
 		--pagefind-ui-background: var(--sl-color-black);
 		--pagefind-ui-border: var(--sl-color-gray-5);
 		--pagefind-ui-border-width: 1px;
+		--pagefind-ui-tag: var(--sl-color-gray-5);
 		--sl-search-cancel-space: 5rem;
 	}
 
+	:root[data-theme='light'] #starlight__search {
+		--pagefind-ui-tag: var(--sl-color-gray-6);
+	}
+
 	@media (min-width: 50rem) {
 		#starlight__search {
 			--sl-search-cancel-space: 0px;
@@ -439,7 +443,7 @@ if (project.trailingSlash === 'never') dataAttributes['data-strip-trailing-slash
 		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' viewBox='0 0 16 1000' preserveAspectRatio='xMinYMin slice'%3E%3Cpath d='M8 0v1000m6-988H8'/%3E%3C/svg%3E")
 			0% 0% / 100% no-repeat;
 	}
-	#starlight__search .pagefind-ui__result-nested:last-child::before {
+	#starlight__search .pagefind-ui__result-nested:last-of-type::before {
 		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 16 16'%3E%3Cpath d='M8 0v12m6 0H8'/%3E%3C/svg%3E");
 		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 16 16'%3E%3Cpath d='M8 0v12m6 0H8'/%3E%3C/svg%3E");
 	}
@@ -466,4 +470,14 @@ if (project.trailingSlash === 'never') dataAttributes['data-strip-trailing-slash
 		background-color: transparent;
 		font-weight: 600;
 	}
+
+	#starlight__search .pagefind-ui__filter-value::before {
+		border-color: var(--sl-color-text-invert);
+	}
+
+	#starlight__search .pagefind-ui__result-tags {
+		background-color: var(--sl-color-black);
+		margin-top: 0;
+		padding: var(--sl-search-result-nested-pad-block) var(--sl-search-result-pad-inline-end);
+	}
 </style>

package/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.starlightRoute;
 ---
 
-<SidebarPersister {...Astro.props}>
+<SidebarPersister>
 	<SidebarSublist sublist={sidebar} />
 </SidebarPersister>
 
 <div class="md:sl-hidden">
-	<MobileMenuFooter {...Astro.props} />
+	<MobileMenuFooter />
 </div>

package/components/SidebarPersister.astro

@@ -19,10 +19,9 @@
   @see https://github.com/withastro/starlight/pull/2633
 */
 
-import type { Props } from '../props';
 import { getSidebarHash } from '../utils/navigation';
 
-const hash = getSidebarHash(Astro.props.sidebar);
+const hash = getSidebarHash(Astro.locals.starlightRoute.sidebar);
 
 declare global {
 	interface Window {

package/components/SidebarSublist.astro

@@ -1,5 +1,6 @@
 ---
-import { flattenSidebar, type SidebarEntry } from '../utils/navigation';
+import { flattenSidebar } from '../utils/navigation';
+import type { SidebarEntry } from '../utils/routing/types';
 import Icon from '../user-components/Icon.astro';
 import Badge from '../user-components/Badge.astro';
 import SidebarRestorePoint from './SidebarRestorePoint.astro';

package/components/SiteTitle.astro

@@ -1,8 +1,7 @@
 ---
 import { logos } from 'virtual:starlight/user-images';
 import config from 'virtual:starlight/user-config';
-import type { Props } from '../props';
-const { siteTitle, siteTitleHref } = Astro.props;
+const { siteTitle, siteTitleHref } = Astro.locals.starlightRoute;
 ---
 
 <a href={siteTitleHref} class="site-title sl-flex">

package/components/SkipLink.astro

@@ -1,6 +1,5 @@
 ---
 import { PAGE_TITLE_ID } from '../constants';
-import type { Props } from '../props';
 ---
 
 <a href={`#${PAGE_TITLE_ID}`}>{Astro.locals.t('skipLink.label')}</a>

package/components/SocialIcons.astro

@@ -1,7 +1,6 @@
 ---
 import config from 'virtual:starlight/user-config';
 import Icon from '../user-components/Icon.astro';
-import type { Props } from '../props';
 
 type Platform = keyof NonNullable<typeof config.social>;
 type SocialConfig = NonNullable<NonNullable<typeof config.social>[Platform]>;

package/components/StarlightPage.astro

@@ -1,4 +1,5 @@
 ---
+import { attachRouteDataAndRunMiddleware } from '../utils/routing/middleware';
 import {
 	generateStarlightPageRouteData,
 	type StarlightPageProps as Props,
@@ -6,8 +7,11 @@ import {
 import Page from './Page.astro';
 
 export type StarlightPageProps = Props;
+
+await attachRouteDataAndRunMiddleware(
+	Astro,
+	await generateStarlightPageRouteData({ props: Astro.props, url: Astro.url })
+);
 ---
 
-<Page {...await generateStarlightPageRouteData({ props: Astro.props, url: Astro.url })}>
-	<slot />
-</Page>
+<Page><slot /></Page>

package/components/TableOfContents.astro

@@ -1,8 +1,7 @@
 ---
 import TableOfContentsList from './TableOfContents/TableOfContentsList.astro';
-import type { Props } from '../props';
 
-const { toc } = Astro.props;
+const { toc } = Astro.locals.starlightRoute;
 ---
 
 {

package/components/ThemeProvider.astro

@@ -1,5 +1,4 @@
 ---
-import type { Props } from '../props';
 import Icon from '../user-components/Icon.astro';
 ---
 

package/components/ThemeSelect.astro

@@ -1,6 +1,5 @@
 ---
 import Select from './Select.astro';
-import type { Props } from '../props';
 ---
 
 <starlight-theme-select>