Fevol · Fevol · Mar 21, 2025 · Mar 20, 2025 · Mar 20, 2025 · Mar 20, 2025
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,23 @@
+## [0.2.0](https://github.com/Fevol/starlight-theme-obsidian/releases/tag/0.2.0) (2025/03/21)
+### Upgrades
+-   ⚠️ **Minor change:** The minimum supported version of Starlight is now `0.32.0`, and Astro `5.5.0`.<br>
+    No breaking changes are introduced in this upgrade, but it is recommended to update component overrides
+    snippets that were provided by this plugin: please remove the following lines:
+    ```diff
+    ---
+    -import type { Props } from '@astrojs/starlight/props';
+    import Default from "@astrojs/starlight/components/PageSidebar.astro";
+    ---
+
+    -<Default {...Astro.props}><slot /></Default>
+    +<Default><slot /></Default>
+    ```
+
+### Fixes
+-   Center header for full-screen pages
+-   Slightly improve rendering for dark reader extension users
+-   All fixes from [`starlight-site-graph` version `0.3.0`](https://github.com/Fevol/starlight-site-graph/releases/tag/0.3.0)
+
 ## [0.1.1](https://github.com/Fevol/starlight-theme-obsidian/releases/tag/0.1.1) (2025/01/23)
 ### Upgrades
 -   The minimum supported version of Starlight is now `0.31.0`, and Astro `5.1.5`.

diff --git a/bun.lockb b/bun.lockb
diff --git a/docs/package.json b/docs/package.json
@@ -13,12 +13,12 @@
 	},
 	"dependencies": {
 		"@astrojs/check": "^0.9.4",
-		"@astrojs/starlight": "0.31.1",
-		"astro": "5.1.8",
-		"astro-og-canvas": "^0.5.4",
+		"@astrojs/starlight": "^0.32.3",
+		"astro": "^5.5.3",
+		"astro-og-canvas": "^0.7.0",
 		"starlight-links-validator": "^0.12.3",
 		"starlight-package-managers": "^0.7.0",
 		"starlight-theme-obsidian": "workspace:*",
 		"typescript": "^5.6.2"
 	}
-}
+}
diff --git a/docs/src/content/docs/components/pageframe.mdx b/docs/src/content/docs/components/pageframe.mdx
@@ -26,13 +26,11 @@ Note that including the `<style>` tag is important, as none of the default style
 	1. Create your own `PageFrame.astro` component in the `src/overrides` directory (or `src/components` if you prefer).
 		```astro
 		---
-		import MobileMenuToggle from 'virtual:starlight/components/MobileMenuToggle';
-		import MobileTableOfContents from 'virtual:starlight/components/MobileTableOfContents';
-		import SiteTitle from 'virtual:starlight/components/SiteTitle';
+        import MobileTableOfContents from '@astrojs/starlight/components/MobileTableOfContents.astro';
+        import MobileMenuToggle from '@astrojs/starlight/components/MobileMenuToggle.astro';
+        import SiteTitle from '@astrojs/starlight/components/SiteTitle.astro';
 
-		import type { Props } from '../props';
-
-		const { hasSidebar } = Astro.props;
+		const { hasSidebar } = Astro.locals.starlightRoute;
 		---
 
 		<div class="page sl-flex">
@@ -51,10 +49,10 @@ Note that including the `<style>` tag is important, as none of the default style
 				{hasSidebar && (
 					<div class="mobile-header">
 						<div class="title-wrapper ">
-							<SiteTitle {...Astro.props} />
+							<SiteTitle/>
 						</div>
-						<MobileTableOfContents {...Astro.props} />
-						<MobileMenuToggle {...Astro.props} />
+						<MobileTableOfContents/>
+						<MobileMenuToggle/>
 					</div>
 				)}
 				<slot />

diff --git a/docs/src/content/docs/components/pagesidebar.mdx b/docs/src/content/docs/components/pagesidebar.mdx
@@ -38,27 +38,26 @@ Note that including the `<style>` tag is important, as none of the default style
 		// src/overrides/PageSidebar.astro
 		---
 		import TableOfContents from 'virtual:starlight/components/TableOfContents';
-		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>
 
 		{
-			Astro.props.toc && (
+            Astro.locals.starlightRoute.toc && (
 			<>
 				<div class="right-sidebar-panel sl-hidden lg:sl-block">
 					<div class="sl-container">
-						<TableOfContents {...Astro.props} />
+						<TableOfContents/>
 					</div>
 				</div>
 			</>
 			)
 		}
 
-		<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>
 

diff --git a/docs/src/content/docs/components/pagination.mdx b/docs/src/content/docs/components/pagination.mdx
@@ -25,9 +25,8 @@ If you want to extend the `<Pagination>` component for your own website, you can
 		```astro
 		---
 		import { Icon } from '@astrojs/starlight/components'
-		import type { Props } from '@astrojs/starlight/props'
 
-		const { dir, pagination } = Astro.props
+		const { dir, pagination } = Astro.locals.starlightRoute
 		const { prev, next } = pagination
 		const isRtl = dir === 'rtl'
 		---

diff --git a/docs/src/content/docs/components/sidebar.mdx b/docs/src/content/docs/components/sidebar.mdx
@@ -25,7 +25,6 @@ If you want to extend the `<Sidebar>` component for your own website, you can do
 	1. Create your own `Sidebar.astro` component in the `src/overrides` directory (or `src/components` if you prefer).
 		```astro
 		---
-		import type { Props } from '@astrojs/starlight/props';
 		import Default from '@astrojs/starlight/components/Sidebar.astro';
 		import Search from 'virtual:starlight/components/Search';
 		import SiteTitle from 'virtual:starlight/components/SiteTitle';
@@ -38,15 +37,15 @@ If you want to extend the `<Sidebar>` component for your own website, you can do
 
 		<div class="sidebar-top">
 			<div class="title-wrapper ">
-				<SiteTitle {...Astro.props} />
+				<SiteTitle/>
 			</div>
 
-			{shouldRenderSearch && <Search {...Astro.props} />}
+			{shouldRenderSearch && <Search/>}
 
-			<MobileMenuFooter {...Astro.props} />
+			<MobileMenuFooter/>
 		</div>
 
-		<Default {...Astro.props}><slot /></Default>
+		<Default><slot /></Default>
 		```
 	2. Add the `Sidebar` override to your `astro.config.mjs` file.
 		```diff lang="js"

diff --git a/docs/src/content/docs/components/themeselect.mdx b/docs/src/content/docs/components/themeselect.mdx
@@ -28,8 +28,6 @@ If you want to extend the `<ThemeSelect>` component for your own website, you ca
 		---
 		import crypto from 'node:crypto'
 
-		import type { Props } from '@astrojs/starlight/props'
-
 		const id = `moon-mask-${crypto.randomBytes(4).toString('hex')}`
 
 		// Used code:

diff --git a/docs/src/overrides/Head.astro b/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.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} />
diff --git a/package.json b/package.json
@@ -37,7 +37,7 @@
 		"release-major": "bun run scripts/bump-version.ts major"
 	},
 	"dependencies": {
-		"@types/node": "^22.10.2",
-		"prettier": "^3.4.2"
+		"@types/node": "^22.13.11",
+		"prettier": "^3.5.3"
 	}
 }
diff --git a/packages/starlight-theme-obsidian/index.ts b/packages/starlight-theme-obsidian/index.ts
@@ -1,59 +1,77 @@
 import type { StarlightPlugin } from '@astrojs/starlight/types';
 import starlightSiteGraph from 'starlight-site-graph';
-import {type StarlightThemeObsidianConfig, validateConfig} from 'starlight-theme-obsidian/config';
+import { type StarlightThemeObsidianConfig, validateConfig } from 'starlight-theme-obsidian/config';
 
 export default function plugin(userConfig?: StarlightThemeObsidianConfig): StarlightPlugin {
-    const parsedConfig = validateConfig(userConfig);
-    return {
-        name: 'starlight-theme-obsidian',
-        hooks: {
-            setup: async (args) => {
-                const { config, logger, updateConfig } = args;
-                // TODO: Temporary implementation of graph/backlinks exclusion from theme
-                //       Eventually, starlight-site-graph should be an optional dependency
-                if (!parsedConfig.graph) {
-                    parsedConfig.graphConfig.visibilityRules = [];
-                }
-                if (!parsedConfig.backlinks) {
-                    parsedConfig.backlinksConfig.visibilityRules = [];
-                }
-                if (!(parsedConfig.graph || parsedConfig.backlinks)) {
-                    // This bypasses the sitemap generation, so page contents don't have to be parsed
-                    parsedConfig.sitemapConfig.pageInclusionRules = [];
-                }
+	const parsedConfig = validateConfig(userConfig);
 
-                // TODO: This is a temporary bodge until `addPlugin` PR is created
-                if (config.plugins?.some(plugin => plugin.name === 'starlight-site-graph')) {
-                    logger.warn("`starlight-site-graph` is already included in the `astro.config.mjs`. Skipping integration.");
-                } else {
-                    await (starlightSiteGraph(parsedConfig).hooks).setup(args);
-                }
-                const customCss: typeof config.customCss = ['starlight-theme-obsidian/styles/common.css',
-                    'starlight-site-graph/styles/common.css',
-                ];
+	let i18nArgs = null;
+	return {
+		name: 'starlight-theme-obsidian',
+		hooks: {
+			'i18n:setup': async args => {
+				i18nArgs = args;
+			},
+			'config:setup': async args => {
+				const { config, logger, updateConfig } = args;
+				// TODO: Temporary implementation of graph/backlinks exclusion from theme
+				//       Eventually, starlight-site-graph should be an optional dependency
+				if (!parsedConfig.graph) {
+					parsedConfig.graphConfig.visibilityRules = [];
+				}
+				if (!parsedConfig.backlinks) {
+					parsedConfig.backlinksConfig.visibilityRules = [];
+				}
+				if (!(parsedConfig.graph || parsedConfig.backlinks)) {
+					// This bypasses the sitemap generation, so page contents don't have to be parsed
+					parsedConfig.sitemapConfig.pageInclusionRules = [];
+				}
 
+				// TODO: This is a temporary bodge until `addPlugin` PR is created
+				if (config.plugins?.some(plugin => plugin.name === 'starlight-site-graph')) {
+					logger.warn(
+						'`starlight-site-graph` is already included in the `astro.config.mjs`. Skipping integration.',
+					);
+				} else {
+					// TODO: This is dumb, bad, and I should really start work on that `addPlugin` PR...
+					const starlightPlugin = starlightSiteGraph(parsedConfig);
+					await starlightPlugin.hooks['i18n:setup']?.(i18nArgs);
+					await starlightPlugin.hooks['config:setup']?.(args);
+				}
+				const customCss: typeof config.customCss = [
+					'starlight-theme-obsidian/styles/common.css',
+					'starlight-site-graph/styles/common.css',
+				];
 
-                const componentOverrides: typeof config.components = {};
+				const componentOverrides: typeof config.components = {};
 
-                const overridableComponents = ['Sidebar', 'PageFrame', 'Pagination', 'ThemeSelect', 'PageSidebar'];
-                for (const component of overridableComponents) {
-                    if (config.components?.[component]) {
-                        logger.warn(
-                            `It looks like you already have a \`${component}\` component override in your Starlight configuration.`,
-                        );
-                    } else {
-                        componentOverrides[component] = `starlight-theme-obsidian/overrides/${component}.astro`;
-                    }
-                }
+				type OverridableComponent = 'Sidebar' | 'PageFrame' | 'Pagination' | 'ThemeSelect' | 'PageSidebar';
+				const overridableComponents: OverridableComponent[] = [
+					'Sidebar',
+					'PageFrame',
+					'Pagination',
+					'ThemeSelect',
+					'PageSidebar',
+				];
+				for (const component of overridableComponents) {
+					if (config.components?.[component]) {
+						logger.warn(
+							`It looks like you already have a \`${component}\` component override in your Starlight configuration.`,
+						);
+					} else {
+						componentOverrides[component] = `starlight-theme-obsidian/overrides/${component}.astro`;
+					}
+				}
 
-                updateConfig({
-                    components: {
-                        ...componentOverrides,
-                        ...config.components,
-                    },
-                    customCss: [...customCss, ...(config.customCss ?? [])],
-                });
-            },
-        },
-    };
+				updateConfig({
+					components: {
+						...componentOverrides,
+						...config.components,
+					},
+					customCss: [...customCss, ...(config.customCss ?? [])],
+				});
+			},
+		},
+	};
 }
+
diff --git a/packages/starlight-theme-obsidian/overrides/PageFrame.astro b/packages/starlight-theme-obsidian/overrides/PageFrame.astro
@@ -1,11 +1,9 @@
 ---
-import MobileMenuToggle from 'virtual:starlight/components/MobileMenuToggle';
-import MobileTableOfContents from 'virtual:starlight/components/MobileTableOfContents';
-import SiteTitle from 'virtual:starlight/components/SiteTitle';
+import MobileTableOfContents from '@astrojs/starlight/components/MobileTableOfContents.astro';
+import MobileMenuToggle from '@astrojs/starlight/components/MobileMenuToggle.astro';
+import SiteTitle from '@astrojs/starlight/components/SiteTitle.astro';
 
-import type { Props } from '../props';
-
-const { hasSidebar } = Astro.props;
+const { hasSidebar } = Astro.locals.starlightRoute;
 ---
 
 {/* (STARLIGHT-THEME-OBSIDIAN): Do not show header component if page has no sidebar, create a separate mobile-header component */}
@@ -25,10 +23,10 @@ const { hasSidebar } = Astro.props;
         {hasSidebar && (
             <div class="mobile-header">
                 <div class="title-wrapper ">
-                    <SiteTitle {...Astro.props} />
+                    <SiteTitle/>
                 </div>
-                <MobileTableOfContents {...Astro.props} />
-                <MobileMenuToggle {...Astro.props} />
+                <MobileTableOfContents/>
+                <MobileMenuToggle/>
             </div>
         )}
         <slot />

diff --git a/packages/starlight-theme-obsidian/overrides/PageSidebar.astro b/packages/starlight-theme-obsidian/overrides/PageSidebar.astro
@@ -1,31 +1,28 @@
 ---
 import TableOfContents from 'virtual:starlight/components/TableOfContents';
 
-import type { Props } from '@astrojs/starlight/props';
-
 import { PageGraph, PageBacklinks } from "starlight-site-graph/components";
-
 ---
 
 {/* (STARLIGHT-THEME-OBSIDIAN): Add page graph and backlink 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>
 
 {
-    Astro.props.toc && (
+    Astro.locals.starlightRoute.toc && (
     <>
         <div class="right-sidebar-panel sl-hidden lg:sl-block">
             {/* (STARLIGHT-THEME-OBSIDIAN): Removed mobile ToC, moved to PageFrame */}
             <div class="sl-container">
-                <TableOfContents {...Astro.props} />
+                <TableOfContents/>
             </div>
         </div>
     </>
     )
 }
 
-<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>
 

diff --git a/packages/starlight-theme-obsidian/overrides/Pagination.astro b/packages/starlight-theme-obsidian/overrides/Pagination.astro
@@ -1,9 +1,8 @@
 ---
 import { Icon } from '@astrojs/starlight/components'
-import type { Props } from '@astrojs/starlight/props'
 
-const { dir, pagination } = Astro.props
-const { prev, next } = pagination
+const { dir, pagination } = Astro.locals.starlightRoute;
+const { prev, next } = pagination;
 const isRtl = dir === 'rtl'
 
 ---