Upgrade to @astrojs/starlight 0.32.3

docs/astro.config.mjs

@@ -1,6 +1,7 @@
 import { defineConfig } from 'astro/config';
 import starlight from '@astrojs/starlight';
-import starlightThemeObsidian from 'starlight-theme-obsidian';
+// import starlightThemeObsidian from 'starlight-theme-obsidian';
+import starlightSiteGraph from 'starlight-site-graph';
 import starlightLinksValidator from 'starlight-links-validator';
 import markdocGrammar from './grammars/markdoc.tmLanguage.json';
 
@@ -26,7 +27,7 @@ export default defineConfig({
 				starlightLinksValidator({
 					errorOnInvalidHashes: false
 				}),
-				starlightThemeObsidian({
+				starlightSiteGraph({
 					debug: false,
 					graphConfig: {
 						depth: 1,

docs/package.json

@@ -13,13 +13,13 @@
 	},
 	"dependencies": {
 		"@astrojs/check": "0.9.4",
-		"@astrojs/starlight": "0.31.1",
+		"@astrojs/starlight": "0.32.3",
 		"astro": "5.1.8",
-		"astro-og-canvas": ">=0.5.4",
-		"starlight-links-validator": ">=0.12.3",
-		"starlight-package-managers": ">=0.6.0",
+		"astro-og-canvas": "^0.7.0",
+		"starlight-links-validator": "^0.14.3",
+		"starlight-package-managers": "^0.10.0",
 		"starlight-site-graph": "workspace:*",
-		"starlight-theme-obsidian": ">=0.1.0",
-		"typescript": "^5.5.4"
+		"starlight-theme-obsidian": "^0.1.1",
+		"typescript": "^5.8.2"
 	}
 }

docs/src/content/docs/components/pagebacklinks.mdx

@@ -56,15 +56,13 @@ The `<PageBacklinks>` component accepts the following props:
 **type:** `string` (optional)
 
 Determines the slug of the current page. If not provided, the slug will be determined by the current page's URL.
-When passing `{...Astro.props}` to this component, this is already set for you.
 
 ### `entry`
 
 **type:** `{ data: PageSiteGraphFrontmatter }` (optional)
 
 The frontmatter properties related to the current page, for more information of what
 properties can be passed via this object, check out the [frontmatter config](/starlight-site-graph/configuration/frontmatter).
-When passing `{...Astro.props}` to this component, this might already be set for you.
 
 ### `class`
 

docs/src/content/docs/components/pagegraph.mdx

@@ -55,7 +55,6 @@ The `<PageGraph>` component accepts the following props:
 **type:** `string` (optional)
 
 Determines the slug of the current page. If not provided, the slug will be determined by the current page's URL.
-When passing `{...Astro.props}` to this component, this is already set for you.
 
 
 ### `config`
@@ -69,7 +68,6 @@ This overrides any configuration applied via the plugin settings or frontmatter.
 
 The frontmatter properties related to the current page, for more information of what
 properties can be passed via this object, check out the [frontmatter config](/starlight-site-graph/configuration/frontmatter).
-When passing `{...Astro.props}` to this component, this might already be set for you.
 
 ### `class`
 **type:** `string` (optional)

docs/src/content/docs/components/pagesidebar.mdx

@@ -32,20 +32,19 @@ components, you can do so by creating your own override as follows:
 		// src/overrides/PageSidebar.astro
 		---
 		import Default from "@astrojs/starlight/components/PageSidebar.astro";
-		import type { Props } from '@astrojs/starlight/props';
 
 		import { PageGraph, PageBacklinks } from "starlight-site-graph/components";
 		---
 
-		<PageGraph {...Astro.props} class="right-sidebar-panel graph-panel">
+		<PageGraph class="right-sidebar-panel graph-panel">
 			<h2 slot="title">{Astro.locals.t('starlight-site-graph.graph')}</h2>
 		</PageGraph>
 
-		<Default {...Astro.props}>
+		<Default>
 			<slot />
 		</Default>
 
-		<PageBacklinks {...Astro.props} class="right-sidebar-panel backlinks-panel">
+		<PageBacklinks class="right-sidebar-panel backlinks-panel">
 			<h2 slot="title">{Astro.locals.t('starlight-site-graph.backlinks')}</h2>
 		</PageBacklinks>
 		```

docs/src/overrides/Head.astro

@@ -1,15 +1,14 @@
 ---
-import type { Props } from '@astrojs/starlight/props';
 import Default from '@astrojs/starlight/components/Head.astro';
 // Get the URL of the generated image for the current page using its
 // ID and replace the file extension with `.png`.
 const ogImageUrl = new URL(
-	`${import.meta.env.BASE_URL}/og/${Astro.props.id.replace(/\.\w+$/, '.png')}`,
+	`${import.meta.env.BASE_URL}/og/${Astro.locals.starlightRoute.entry.id.replace(/\.\w+$/, '.png')}`,
 	Astro.site
 );
 ---
 <!-- Render the default <Head/> component. -->
-<Default {...Astro.props}><slot /></Default>
+<Default><slot /></Default>
 <!-- Render the <meta/> tags for the Open Graph images. -->
 <meta property="og:image" content={ogImageUrl} />
 <meta name="twitter:image" content={ogImageUrl} />

packages/starlight-site-graph/components/backlinks/PageBacklinks.astro

@@ -18,16 +18,17 @@ interface Props {
 
 let backlinksData: Partial<PageGraphConfig> = {};
 let { slug, showBacklinks, class: className } = Astro.props;
+let { entry } = Astro.locals.starlightRoute;
 
 // If frontmatter is explicitly passed as 'entry' (happens in a Starlight context)
-if (Astro.props.entry) {
-	backlinksData = Astro.props.entry['data']?.backlinks;
+if (entry.id) {
+	backlinksData = entry.data?.backlinks;
 }
 
 // Infer slug from URL if not explicitly provided
 const slugWithBase = ensureTrailingSlash(stripSlashes((slug ? path.join(astroConfig.base, slug) : Astro.url.pathname).replaceAll("\\", "/")));
 
-const sitemap = config.sitemapConfig.sitemap;
+const sitemap = config.sitemapConfig!.sitemap;
 
 let backlinks: string[] = [];
 if (sitemap) {
@@ -40,14 +41,14 @@ if (showBacklinks === undefined) {
 	if (backlinksData?.visible !== undefined) {
 		showBacklinks = backlinksData.visible;
 	} else {
-		showBacklinks = config.backlinksConfig.visibilityRules ? firstMatchingPattern(slugWithBase, config.backlinksConfig.visibilityRules, false) : true;
+		showBacklinks = config.backlinksConfig!.visibilityRules ? firstMatchingPattern(slugWithBase, config.backlinksConfig!.visibilityRules, false) : true;
 	}
 }
 
 ---
 
 {showBacklinks && backlinks.length > 0 &&
-	<div class:list={className}>
+	<div class:list={className ?? ""}>
 		<slot name="title"/>
 		<Backlinks backlinks={backlinks} sitemap={sitemap} />
 	</div>

packages/starlight-site-graph/components/graph/PageGraph.astro

@@ -21,10 +21,11 @@ interface Props {
 
 let graphData: Partial<PageGraphConfig> = {};
 let { slug, class: className, showGraph, config: graphConfig } = Astro.props;
+let { entry } = Astro.locals.starlightRoute;
 
 // If frontmatter is explicitly passed as 'entry' (happens in a Starlight context)
-if (Astro.props.entry) {
-    graphData = Astro.props.entry['data']?.graph as PageGraphConfig;
+if (entry.id) {
+    graphData = entry.data?.graph as PageGraphConfig;
 }
 
 // Infer slug from URL if not explicitly provided
@@ -34,7 +35,7 @@ if (showGraph === undefined) {
     if (graphData?.visible !== undefined) {
         showGraph = graphData.visible;
     } else {
-        showGraph = config.graphConfig.visibilityRules ? firstMatchingPattern(slugWithBase, config.graphConfig.visibilityRules, false) : true;
+        showGraph = config.graphConfig!.visibilityRules ? firstMatchingPattern(slugWithBase, config.graphConfig!.visibilityRules, false) : true;
     }
 }
 ---
@@ -44,13 +45,13 @@ if (showGraph === undefined) {
         <slot name="title"/>
         <Graph
             slug={slugWithBase}
-            sitemap={import.meta.env.DEV ? config.sitemapConfig.sitemap : {}}
+            sitemap={import.meta.env.DEV ? config.sitemapConfig!.sitemap : {}}
             config={{
                 ...config.graphConfig,
                 ...graphData,
                 ...(graphConfig ?? {})
             }}
-            debug={config.debug}
+            debug={config.debug ?? false}
         />
     </div>
 }

packages/starlight-site-graph/components/graph/preprocess-sitemap.ts

@@ -257,8 +257,8 @@ function processStyle(style: Partial<NodeStyle>): NodeStyle {
 	}
 
 	if (style.cornerType === 'round' || style.cornerType === 'bevel') {
-		style.shapeCornerRadius = Math.min(Math.max(0, style.shapeCornerRadius ?? DEFAULT_CORNER_RADIUS), style.shapeSize!);
-		style.strokeCornerRadius = Math.min(Math.max(0, style.strokeCornerRadius ?? DEFAULT_CORNER_RADIUS), style.strokeWidth!);
+		style.shapeCornerRadius = Math.min(Math.max(0, Number(style.shapeCornerRadius ?? DEFAULT_CORNER_RADIUS)), style.shapeSize!);
+		style.strokeCornerRadius = Math.min(Math.max(0, Number(style.strokeCornerRadius ?? DEFAULT_CORNER_RADIUS)), style.strokeWidth!);
 	} else {
 		style.shapeCornerRadius = 0;
 		style.strokeCornerRadius = 0;

packages/starlight-site-graph/components/util.ts

@@ -116,11 +116,14 @@ export function isMobileDevice() {
 			)
 		)
 			check = true;
-	})(navigator.userAgent || navigator.vendor || window.opera);
+	})
+	// @ts-expect-error window.opera is not part of type definitions
+	(navigator.userAgent || navigator.vendor || window.opera);
 	return check;
 }
 
 export function hasTouch() {
+	// @ts-expect-error msMaxTouchPoints is old MS API, but still used in some places
 	return 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
 }