Fix compatibility with Starlight v0.32.0

Author: louisescher

apps/docs/package.json

@@ -10,11 +10,11 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/starlight": "catalog:",
+    "@astrojs/starlight": "^0.32.1",
     "@fontsource-variable/space-grotesk": "^5.1.1",
     "@fontsource/space-mono": "^5.1.2",
     "@iconify-json/lucide": "^1.2.22",
-    "astro": "catalog:",
+    "astro": "^5.3.0",
     "sharp": "^0.33.5",
     "starlight-ion-theme": "workspace:",
     "starlight-package-managers": "^0.9.0",

apps/docs/src/content/docs/changelog.mdx

@@ -2,6 +2,14 @@
 title: "Changelog"
 ---
 
+## v2.2.0 (Feb. 22, 2025)
+
+Fixed compatibility issues with Starlight v0.32.0.
+
+### Breaking Changes
+
+- Ion now requires Starlight v0.32.0 or higher.
+
 ## v2.1.2 (Jan. 25, 2025)
 
 ### Bug Fixes

packages/starlight-ion-theme/components/Head.astro

@@ -8,7 +8,7 @@ import { createHead } from 'starlight-ion-theme/utils/head.js';
 import { localizedUrl } from 'starlight-ion-theme/utils/localizedUrl.js';
 import type { Props } from '@astrojs/starlight/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;

packages/starlight-ion-theme/components/Hero.astro

@@ -5,7 +5,7 @@ import type { Props } from '@astrojs/starlight/props';
 
 import { PAGE_TITLE_ID } from 'starlight-ion-theme/constants';
 
-const { data } = Astro.props.entry;
+const { data } = Astro.locals.starlightRoute.entry;
 const { title = data.title, tagline, image, actions = [] } = data.hero || {};
 
 const imageAttrs = {

packages/starlight-ion-theme/components/PageTitle.astro

@@ -4,7 +4,7 @@ import { PAGE_TITLE_ID } from 'starlight-ion-theme/constants';
 import type { Props } from '@astrojs/starlight/props';
 import { icons } from 'ion:globals';
 
-const { entry } = Astro.props;
+const { entry } = Astro.locals.starlightRoute;
 ---
 
 <h1 id={PAGE_TITLE_ID}>

packages/starlight-ion-theme/components/Pagination.astro

@@ -4,7 +4,7 @@ import { Icon as AstroIcon } from 'astro-icon/components';
 import type { Props } from '@astrojs/starlight/props';
 import { footer } from 'ion:globals';
 
-const { dir, labels, pagination } = Astro.props;
+const { dir, pagination } = Astro.locals.starlightRoute;
 const { prev, next } = pagination;
 const isRtl = dir === 'rtl';
 

packages/starlight-ion-theme/components/Sidebar.astro

@@ -4,7 +4,7 @@ import type { Props } from '@astrojs/starlight/props';
 import MobileMenuFooter from 'virtual:starlight/components/MobileMenuFooter';
 import SidebarSublist from 'starlight-ion-theme/components/SidebarSublist.astro';
 
-const { sidebar } = Astro.props;
+const { sidebar } = Astro.locals.starlightRoute;
 ---
 
 <SidebarSublist sublist={sidebar as any} nestedCount={0} />

packages/starlight-ion-theme/components/SidebarSublist.astro

@@ -11,6 +11,29 @@ interface Props {
 }
 
 const { sublist, nested, nestedCount } = Astro.props;
+
+// export interface StarlightRouteData extends Route {
+// 	/** Title of the site. */
+// 	siteTitle: string;
+// 	/** URL or path used as the link when clicking on the site title. */
+// 	siteTitleHref: string;
+// 	/** Array of Markdown headings extracted from the current page. */
+// 	headings: MarkdownHeading[];
+// 	/** Site navigation sidebar entries for this page. */
+// 	sidebar: SidebarEntry[];
+// 	/** Whether or not the sidebar should be displayed on this page. */
+// 	hasSidebar: boolean;
+// 	/** Links to the previous and next page in the sidebar if enabled. */
+// 	pagination: PaginationLinks;
+// 	/** Table of contents for this page if enabled. */
+// 	toc: { minHeadingLevel: number; maxHeadingLevel: number; items: TocItem[] } | undefined;
+// 	/** JS Date object representing when this page was last updated if enabled. */
+// 	lastUpdated: Date | undefined;
+// 	/** URL object for the address where this page can be edited if enabled. */
+// 	editUrl: URL | undefined;
+// 	/** An Astro component to render the current page’s content if this route is a Markdown page. */
+// 	Content?: RenderResult['Content'];
+// }
 ---
 
 <ul class:list={{ 'top-level': !nested }}>

packages/starlight-ion-theme/components/SiteTitle.astro

@@ -2,14 +2,11 @@
 import { logos } from 'virtual:starlight/user-images';
 import config from 'virtual:starlight/user-config';
 import type { Props } from '@astrojs/starlight/props';
-import { formatPath } from 'starlight-ion-theme/utils/format-path.js';
 
-const { siteTitle } = Astro.props;
-
-const href = formatPath(Astro.props.locale || '/');
+const { siteTitle, siteTitleHref } = Astro.locals.starlightRoute;
 ---
 
-<a href={href} class="site-title sl-flex">
+<a href={siteTitleHref} class="site-title sl-flex">
 	{
 		config.logo && logos.dark && (
 			<>

packages/starlight-ion-theme/locals.d.ts

@@ -0,0 +1,43 @@
+/**
+ * This namespace is reserved for Starlight (only used for i18n at the moment).
+ * It can be extended by plugins using module augmentation and interface merging.
+ * For an example, see: https://starlight.astro.build/reference/plugins/#injecttranslations
+ */
+declare namespace StarlightApp {
+	interface I18n {}
+}
+
+/**
+ * Extending Astro’s `App.Locals` interface registers types for the middleware added by Starlight.
+ */
+declare namespace App {
+	interface Locals {
+		/**
+		 * Starlight’s localization API, powered by i18next.
+		 *
+		 * @see https://starlight.astro.build/guides/i18n/#using-ui-translations
+		 *
+		 * @example
+		 * // Render a UI string for the current locale.
+		 * <p>{Astro.locals.t('404.text')}</p>
+		 */
+		t: import('./utils/createTranslationSystem').I18nT;
+
+		/**
+		 * Starlight’s data for the current route.
+		 *
+		 * @see https://starlight.astro.build/guides/route-data/
+		 *
+		 * @throws Will throw an error if accessed on non-Starlight routes.
+		 *
+		 * @example
+		 * // Render the title for the current page
+		 * <h1>{Astro.locals.starlightRoute.entry.data.title}</h1>
+		 *
+		 * @example
+		 * // Check if the current page should render the sidebar
+		 * const { hasSidebar } = Astro.locals.starlightRoute;
+		 */
+		starlightRoute: import('@astrojs/starlight/utils/routing/types').StarlightRouteData;
+	}
+}