Zenn
Open1

astro starlight のサイドバーに現在のページを表示する

Astro
Starlight
まめせぶんまめせぶん

astro starlight のサイドバーに現在のページを表示する

サイドバーのページ数が多いときに、最後のほうのページを選択すると、サイドバーで現在のページを確認できない。下のほうへスクロールする必要がある。

Sidebar.astroを上書き

ページを移動したときや、ウインドウサイズを変更したときに、現在のページがサイドバーに表示されてないなら、スクロールして表示するようにする。

Sidebar.astro
---
import type { Props } from '@astrojs/starlight/props';
import Default from '@astrojs/starlight/components/Sidebar.astro';
---

<Default {...Astro.props} />

<script>
	async function moveCurrentPage(){
		const elements = document.getElementsByTagName('a');
		for (const element of elements) {
			const status = element.getAttribute('aria-current');
			if (status === 'page') {
				const rect = element.getBoundingClientRect();
				const isInView = 0 < rect.bottom && rect.top < window.innerHeight;
				if (!isInView) {
					element?.scrollIntoView({
						//behavior: 'smooth',
					});
				}
				return;
			}
		}
	}

	window.addEventListener('load', async () => {
		await moveCurrentPage();
	});

	window.addEventListener('resize', async () => {
		await moveCurrentPage();
	});
</script>

astro.config.mjsにオーバーライドの設定

astro.config.mjs
components: {
    // デフォルトの`SocialIcons`コンポーネントをオーバーライドします。
    Sidebar: './src/components/Sidebar.astro',
},

Sidebar.astroは上記のフォルダに配置する。

サイドバーの最後のほうのページを選択して、遷移後に、現在のハイライトしたページが表示されるようになった。

しかし効率が悪いような気がする。