@astrojs/starlight 0.9.1 → 0.10.1

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @astrojs/starlight
 
+## 0.10.1
+
+### Patch Changes
+
+- [#726](https://github.com/withastro/starlight/pull/726) [`f3157c6`](https://github.com/withastro/starlight/commit/f3157c6065943af39995b6dbae5f63cf424bd9a3) Thanks [@delucis](https://github.com/delucis)! - Fix a rare bug in table of contents when handling headings that increase by more than one level on a page.
+
+- [#729](https://github.com/withastro/starlight/pull/729) [`80c6ab1`](https://github.com/withastro/starlight/commit/80c6ab1c1ec48805e74c53b615a78d65127eeacb) Thanks [@delucis](https://github.com/delucis)! - Upgrade Pagefind to v1.0.3
+
+- [#715](https://github.com/withastro/starlight/pull/715) [`e726155`](https://github.com/withastro/starlight/commit/e7261559f2539a0ceefd36a28e4fbbc17f5970b8) Thanks [@itsmatteomanf](https://github.com/itsmatteomanf)! - feat: prevent scroll on body when search is open
+
+## 0.10.0
+
+### Minor Changes
+
+- [#692](https://github.com/withastro/starlight/pull/692) [`2a58e1a`](https://github.com/withastro/starlight/commit/2a58e1aa068d01833a0ab9e74e4b46cccaee1775) Thanks [@delucis](https://github.com/delucis)! - Upgrade Pagefind to v1 and display page headings in search results
+
+### Patch Changes
+
+- [#708](https://github.com/withastro/starlight/pull/708) [`136cfb1`](https://github.com/withastro/starlight/commit/136cfb180f22db116cfdb62fd93d21daff596946) Thanks [@julien-deramond](https://github.com/julien-deramond)! - Fix main content column width for pages without a table of contents
+
+- [#682](https://github.com/withastro/starlight/pull/682) [`660a5f5`](https://github.com/withastro/starlight/commit/660a5f57adf0340de21df3e364aada38255bb06c) Thanks [@vedmalex](https://github.com/vedmalex)! - Add Russian language support
+
 ## 0.9.1
 
 ### Patch Changes

package/components/Search.astro

@@ -58,31 +58,37 @@ const pagefindTranslations = {
 			const dialog = this.querySelector('dialog')!;
 			const dialogFrame = this.querySelector('.dialog-frame')!;
 
-			/** Close the modal if a user clicks outside of the modal. */
-			const onWindowClick = (event: MouseEvent) => {
+			/** Close the modal if a user clicks on a link or outside of the modal. */
+			const onClick = (event: MouseEvent) => {
+				const isLink = 'href' in (event.target || {});
 				if (
-					document.body.contains(event.target as Node) &&
-					!dialogFrame.contains(event.target as Node)
-				)
+					isLink ||
+					(document.body.contains(event.target as Node) &&
+						!dialogFrame.contains(event.target as Node))
+				) {
 					closeModal();
+				}
 			};
 
 			const openModal = (event?: MouseEvent) => {
 				dialog.showModal();
+				document.body.toggleAttribute('data-search-modal-open', true);
 				this.querySelector('input')?.focus();
 				event?.stopPropagation();
-				window.addEventListener('click', onWindowClick);
+				window.addEventListener('click', onClick);
 			};
 
-			const closeModal = () => {
-				dialog.close();
-				window.removeEventListener('click', onWindowClick);
-			};
+			const closeModal = () => dialog.close();
 
 			openBtn.addEventListener('click', openModal);
 			openBtn.disabled = false;
 			closeBtn.addEventListener('click', closeModal);
 
+			dialog.addEventListener('close', () => {
+				document.body.toggleAttribute('data-search-modal-open', false);
+				window.removeEventListener('click', onClick);
+			});
+
 			// Listen for `/` and `cmd + k` keyboard shortcuts.
 			window.addEventListener('keydown', (e) => {
 				const isInput =
@@ -113,6 +119,7 @@ const pagefindTranslations = {
 						bundlePath: import.meta.env.BASE_URL.replace(/\/$/, '') + '/pagefind/',
 						showImages: false,
 						translations,
+						showSubResults: true,
 					});
 				});
 			});
@@ -179,7 +186,7 @@ const pagefindTranslations = {
 	.dialog-frame {
 		flex-direction: column;
 		gap: 1rem;
-		padding: 1.5rem;
+		padding: 1rem;
 	}
 
 	button[data-close-modal] {
@@ -218,10 +225,35 @@ const pagefindTranslations = {
 			min-height: 15rem;
 			max-height: calc(100% - 8rem);
 		}
+
+		.dialog-frame {
+			padding: 1.5rem;
+		}
 	}
 </style>
 
 <style is:global>
+	[data-search-modal-open] {
+		overflow: hidden;
+	}
+
+	#starlight__search {
+		--sl-search-result-spacing: calc(1.25rem * var(--pagefind-ui-scale));
+		--sl-search-result-pad-inline-start: calc(3.75rem * var(--pagefind-ui-scale));
+		--sl-search-result-pad-inline-end: calc(1.25rem * var(--pagefind-ui-scale));
+		--sl-search-result-pad-block: calc(0.9375rem * var(--pagefind-ui-scale));
+		--sl-search-result-nested-pad-block: calc(0.625rem * var(--pagefind-ui-scale));
+		--sl-search-corners: calc(0.3125rem * var(--pagefind-ui-scale));
+		--sl-search-page-icon-size: calc(1.875rem * var(--pagefind-ui-scale));
+		--sl-search-page-icon-inline-start: calc(
+			(var(--sl-search-result-pad-inline-start) - var(--sl-search-page-icon-size)) / 2
+		);
+		--sl-search-tree-diagram-size: calc(2.5rem * var(--pagefind-ui-scale));
+		--sl-search-tree-diagram-inline-start: calc(
+			(var(--sl-search-result-pad-inline-start) - var(--sl-search-tree-diagram-size)) / 2
+		);
+	}
+
 	#starlight__search .pagefind-ui__form::before {
 		--pagefind-ui-text: var(--sl-color-gray-1);
 		opacity: 1;
@@ -260,22 +292,36 @@ const pagefindTranslations = {
 	}
 
 	#starlight__search .pagefind-ui__results > * + * {
-		margin-top: 0.5rem;
+		margin-top: var(--sl-search-result-spacing);
 	}
 	#starlight__search .pagefind-ui__result {
-		position: relative;
 		border: 0;
-		border-radius: 0.25rem;
-		padding: 1rem;
+		padding: 0;
+	}
+
+	#starlight__search .pagefind-ui__result-nested {
+		position: relative;
+		padding: var(--sl-search-result-nested-pad-block) var(--sl-search-result-pad-inline-end);
+		padding-inline-start: var(--sl-search-result-pad-inline-start);
+	}
+
+	#starlight__search .pagefind-ui__result-title:not(:where(.pagefind-ui__result-nested *)),
+	#starlight__search .pagefind-ui__result-nested {
+		position: relative;
 		background-color: var(--sl-color-black);
 	}
 
-	#starlight__search .pagefind-ui__result:hover,
-	#starlight__search .pagefind-ui__result:focus-within {
+	#starlight__search .pagefind-ui__result-title:not(:where(.pagefind-ui__result-nested *)):hover,
+	#starlight__search
+		.pagefind-ui__result-title:not(:where(.pagefind-ui__result-nested *)):focus-within,
+	#starlight__search .pagefind-ui__result-nested:hover,
+	#starlight__search .pagefind-ui__result-nested:focus-within {
 		outline: 1px solid var(--sl-color-accent-high);
 	}
 
-	#starlight__search .pagefind-ui__result:focus-within {
+	#starlight__search
+		.pagefind-ui__result-title:not(:where(.pagefind-ui__result-nested *)):focus-within,
+	#starlight__search .pagefind-ui__result-nested:focus-within {
 		background-color: var(--sl-color-accent-low);
 	}
 
@@ -284,7 +330,37 @@ const pagefindTranslations = {
 		margin-top: 0;
 	}
 
+	#starlight__search .pagefind-ui__result-inner > :first-child {
+		border-radius: var(--sl-search-corners) var(--sl-search-corners) 0 0;
+	}
+	#starlight__search .pagefind-ui__result-inner > :last-child {
+		border-radius: 0 0 var(--sl-search-corners) var(--sl-search-corners);
+	}
+
+	#starlight__search .pagefind-ui__result-inner > .pagefind-ui__result-title {
+		padding: var(--sl-search-result-pad-block) var(--sl-search-result-pad-inline-end);
+		padding-inline-start: var(--sl-search-result-pad-inline-start);
+	}
+	#starlight__search .pagefind-ui__result-inner > .pagefind-ui__result-title::before {
+		content: '';
+		position: absolute;
+		inset-block: 0;
+		inset-inline-start: var(--sl-search-page-icon-inline-start);
+		width: var(--sl-search-page-icon-size);
+		background: var(--sl-color-gray-3);
+		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M9 10h1a1 1 0 1 0 0-2H9a1 1 0 0 0 0 2Zm0 2a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2H9Zm11-3V8l-6-6a1 1 0 0 0-1 0H7a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V9Zm-6-4 3 3h-2a1 1 0 0 1-1-1V5Zm4 14a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h5v3a3 3 0 0 0 3 3h3v9Zm-3-3H9a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2Z'/%3E%3C/svg%3E")
+			center no-repeat;
+		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M9 10h1a1 1 0 1 0 0-2H9a1 1 0 0 0 0 2Zm0 2a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2H9Zm11-3V8l-6-6a1 1 0 0 0-1 0H7a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V9Zm-6-4 3 3h-2a1 1 0 0 1-1-1V5Zm4 14a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h5v3a3 3 0 0 0 3 3h3v9Zm-3-3H9a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2Z'/%3E%3C/svg%3E")
+			center no-repeat;
+	}
+
+	#starlight__search .pagefind-ui__result-inner {
+		align-items: stretch;
+		gap: 1px;
+	}
+
 	#starlight__search .pagefind-ui__result-link {
+		position: unset;
 		--pagefind-ui-text: var(--sl-color-white);
 		font-weight: 600;
 	}
@@ -293,6 +369,27 @@ const pagefindTranslations = {
 		text-decoration: none;
 	}
 
+	#starlight__search .pagefind-ui__result-nested .pagefind-ui__result-link::before {
+		content: unset;
+	}
+
+	#starlight__search .pagefind-ui__result-nested::before {
+		content: '';
+		position: absolute;
+		inset-block: 0;
+		inset-inline-start: var(--sl-search-tree-diagram-inline-start);
+		width: var(--sl-search-tree-diagram-size);
+		background: var(--sl-color-gray-4);
+		-webkit-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;
+		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 {
+		-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");
+	}
+
 	#starlight__search .pagefind-ui__result-link::after {
 		content: '';
 		position: absolute;
@@ -300,18 +397,13 @@ const pagefindTranslations = {
 	}
 
 	#starlight__search .pagefind-ui__result-excerpt {
-		font-size: var(--sl-text-body-sm);
+		font-size: calc(1rem * var(--pagefind-ui-scale));
 		word-break: break-word;
 	}
 
 	#starlight__search mark {
-		color: var(--sl-color-white);
-		background-color: var(--sl-color-accent-low);
-		font-weight: 500;
-		padding: 0.1em 0.2em;
-	}
-
-	#starlight__search .pagefind-ui__result:focus-within mark {
-		text-decoration: underline;
+		color: var(--sl-color-gray-2);
+		background-color: transparent;
+		font-weight: 600;
 	}
 </style>

package/components/TableOfContents/generateToC.ts

@@ -4,52 +4,29 @@ export interface TocItem extends MarkdownHeading {
 	children: TocItem[];
 }
 
-function diveChildren(item: TocItem, depth: number): TocItem[] {
-	if (depth === 1) {
-		return item.children;
-	} else if (item.children.length > 0) {
-		return diveChildren(item.children.at(-1)!, depth - 1);
-	} else {
-		return [];
-	}
-}
-
 interface TocOpts {
 	minHeadingLevel: number;
 	maxHeadingLevel: number;
-	title?: string;
+	title: string;
 }
 
+/** Convert the flat headings array generated by Astro into a nested tree structure. */
 export function generateToC(
 	headings: MarkdownHeading[],
-	{ minHeadingLevel, maxHeadingLevel, title = 'Overview' }: TocOpts
+	{ minHeadingLevel, maxHeadingLevel, title }: TocOpts
 ) {
-	const overview = { depth: 2, slug: '_top', text: title };
-	headings = [
-		overview,
-		...headings.filter(({ depth }) => depth >= minHeadingLevel && depth <= maxHeadingLevel),
-	];
-	const toc: Array<TocItem> = [];
+	headings = headings.filter(({ depth }) => depth >= minHeadingLevel && depth <= maxHeadingLevel);
+	const toc: Array<TocItem> = [{ depth: 2, slug: '_top', text: title, children: [] }];
+	for (const heading of headings) injectChild(toc, { ...heading, children: [] });
+	return toc;
+}
 
-	for (const heading of headings) {
-		if (toc.length === 0) {
-			toc.push({ ...heading, children: [] });
-		} else {
-			const lastItemInToc = toc.at(-1)!;
-			if (heading.depth < lastItemInToc.depth) {
-				throw new Error(`Orphan heading found: ${heading.text}.`);
-			}
-			if (heading.depth === lastItemInToc.depth) {
-				// same depth
-				toc.push({ ...heading, children: [] });
-			} else {
-				// higher depth
-				// push into children, or children's children alike
-				const gap = heading.depth - lastItemInToc.depth;
-				const target = diveChildren(lastItemInToc, gap);
-				target.push({ ...heading, children: [] });
-			}
-		}
+/** Inject a ToC entry as deep in the tree as its `depth` property requires. */
+function injectChild(items: TocItem[], item: TocItem): void {
+	const lastItem = items.at(-1);
+	if (!lastItem || lastItem.depth >= item.depth) {
+		items.push(item);
+	} else {
+		return injectChild(lastItem.children, item);
 	}
-	return toc;
 }

package/layout/TwoColumnContent.astro

@@ -46,7 +46,7 @@ interface Props {
 			width: 100%;
 		}
 
-		:global([data-has-sidebar]) .main-pane {
+		:global([data-has-sidebar][data-has-toc]) .main-pane {
 			--sl-content-margin-inline: auto 0;
 
 			order: 1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astrojs/starlight",
-  "version": "0.9.1",
+  "version": "0.10.1",
   "description": "Build beautiful, high-performance documentation websites with Astro",
   "keywords": [
     "docs",
@@ -39,13 +39,13 @@
   "dependencies": {
     "@astrojs/mdx": "^1.0.0",
     "@astrojs/sitemap": "^3.0.0",
-    "@pagefind/default-ui": "1.0.0-beta.2",
+    "@pagefind/default-ui": "^1.0.3",
     "@types/mdast": "^3.0.11",
     "bcp-47": "^2.1.0",
     "execa": "^7.1.1",
     "hast-util-select": "^5.0.5",
     "hastscript": "^7.2.0",
-    "pagefind": "1.0.0-beta.2",
+    "pagefind": "^1.0.3",
     "rehype": "^12.0.1",
     "remark-directive": "^2.0.1",
     "unified": "^10.1.2",

package/translations/index.ts

@@ -16,11 +16,12 @@ import nb from './nb.json';
 import zh from './zh.json';
 import ko from './ko.json';
 import sv from './sv.json';
+import ru from './ru.json';
 
 const { parse } = builtinI18nSchema();
 
 export default Object.fromEntries(
-	Object.entries({ cs, en, es, de, ja, pt, fa, fr, it, nl, da, tr, ar, nb, zh, ko, sv }).map(
+	Object.entries({ cs, en, es, de, ja, pt, fa, fr, it, nl, da, tr, ar, nb, zh, ko, sv, ru }).map(
 		([key, dict]) => [key, parse(dict)]
 	)
 );

package/translations/ru.json

@@ -0,0 +1,22 @@
+{
+  "skipLink.label": "Пропустить до содержимого",
+  "search.label": "Поиск",
+  "search.shortcutLabel": "(Нажмите / для Поиска)",
+  "search.cancelLabel": "Отменить",
+  "search.devWarning": "Поиск доступен только в производственных сборках. \nПопробуйте выполнить сборку и просмотреть сайт, чтобы протестировать его локально.",
+  "themeSelect.accessibleLabel": "Выберите тему",
+  "themeSelect.dark": "Темная",
+  "themeSelect.light": "Светлая",
+  "themeSelect.auto": "Авто",
+  "languageSelect.accessibleLabel": "Выберите язык",
+  "menuButton.accessibleLabel": "Меню",
+  "sidebarNav.accessibleLabel": "Основное",
+  "tableOfContents.onThisPage": "На странице",
+  "tableOfContents.overview": "Обзор",
+  "i18n.untranslatedContent": "Этот содержимое пока не доступно на вашем языке.",
+  "page.editLink": "Редактировать странице",
+  "page.lastUpdated": "Последнее обновление:",
+  "page.previousLink": "Предыдущая",
+  "page.nextLink": "Следующая",
+  "404.text": "Страница не найдена. Проверьтье  URL или используйте поиск по сайту"
+}