@astrojs/starlight 0.21.3 → 0.21.5

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @astrojs/starlight
 
+## 0.21.5
+
+### Patch Changes
+
+- [#1728](https://github.com/withastro/starlight/pull/1728) [`0a75680d`](https://github.com/withastro/starlight/commit/0a75680ddd2f3325ab9ad7ac910f7c884b89a9ed) Thanks [@delucis](https://github.com/delucis)! - Adds 1 new icon: `pkl`
+
+- [#1709](https://github.com/withastro/starlight/pull/1709) [`c5cd1811`](https://github.com/withastro/starlight/commit/c5cd181186b42422f3e47052bf8182cb490bda6b) Thanks [@HiDeoo](https://github.com/HiDeoo)! - Fixes a UI strings translation issue for sites configured with a single non-root language different from English.
+
+- [#1723](https://github.com/withastro/starlight/pull/1723) [`3b29b3ab`](https://github.com/withastro/starlight/commit/3b29b3ab824f538f27e20310cb08786a92c7bd65) Thanks [@OliverSpeir](https://github.com/OliverSpeir)! - Fixes accessibility by using `aria-selected="false"` for inactive tabs instead of removing `aria-selected="true"` in the tablist of Starlight’s `<Tabs>` component
+
+- [#1706](https://github.com/withastro/starlight/pull/1706) [`f171ac4d`](https://github.com/withastro/starlight/commit/f171ac4d6396eb2538598d85957670df50938b6a) Thanks [@jorenbroekema](https://github.com/jorenbroekema)! - Fixes some minor type errors
+
+## 0.21.4
+
+### Patch Changes
+
+- [#1703](https://github.com/withastro/starlight/pull/1703) [`b26238f2`](https://github.com/withastro/starlight/commit/b26238f22990dcf8ba002bea6a50c66f20ad5786) Thanks [@HiDeoo](https://github.com/HiDeoo)! - Fixes aside custom titles rendering for nested asides.
+
+- [#1708](https://github.com/withastro/starlight/pull/1708) [`a72cb966`](https://github.com/withastro/starlight/commit/a72cb96600798c1fbc7558f8fd24556ca442d312) Thanks [@HiDeoo](https://github.com/HiDeoo)! - Fixes translation issues with Expressive Code when using a default language other than English
+
 ## 0.21.3
 
 ### Patch Changes

package/components/Icons.ts

@@ -125,6 +125,7 @@ export const BuiltInIcons = {
 	nix: '<path d="M7.4 1.6H6l-.7 1.1L7 5.5H3.7L2.4 7.8h11.7l-1.3-2.3H9.6l-2.2-4zm6.1 0h-2.7l5.9 10.1L18 9.4l-1.6-2.8 2.3-3.8-.7-1.2h-1.3L15 4.3l-1.6-2.7zm7 4.2-6 10.1h2.8l1.6-2.8h4.4L24 12l-.7-1.2h-3.1l1.6-2.7-1.4-2.3zM9.4 8H6.6L5 10.8H.7L0 12l.7 1.2h3.1l-1.6 2.7 1.4 2.3zm-2.2 4.2L6 14.6l1.6 2.8-2.3 3.8.7 1.2h1.3L9 19.7l1.6 2.7h2.7zm2.6 3.9 1.3 2.3h3.2l2.2 3.9H18l.7-1.2-1.6-2.7h3.2l1.3-2.3z"/>',
 	starlight:
 		'<path fill-rule="evenodd" d="M15.19 6.75 12 0 8.81 6.75l-.19.38-1.68-1.88a1.2 1.2 0 1 0-1.69 1.69L7.13 8.8h-.38L0 12l6.75 3.19h.38l-1.88 1.87a1.2 1.2 0 1 0 1.69 1.69l1.68-1.88.2.38L12 24l3.19-6.75v-.38l1.69 1.88a1.2 1.2 0 1 0 1.68-1.69l-1.68-1.68.37-.2L24 12l-6.75-3.19-.38-.19 1.7-1.68a1.2 1.2 0 1 0-1.7-1.69L15.2 7.13v-.38ZM12 7.13l-.38.93a8.18 8.18 0 0 1-3.56 3.56l-.94.38.94.38a8.18 8.18 0 0 1 3.56 3.56l.38.94.38-.94a8.18 8.18 0 0 1 3.56-3.56l.94-.38-.94-.38a8.18 8.18 0 0 1-3.56-3.56L12 7.12Z"/><path d="M22.12 3.56a1.2 1.2 0 1 0-1.68-1.69l-.57.57a1.2 1.2 0 0 0 1.7 1.68l.55-.56Zm-18 .75c-.37.38-1.12.38-1.68 0l-.57-.56a1.2 1.2 0 0 1 1.7-1.69l.55.56c.57.38.57 1.13 0 1.7Zm0 15.38c-.37-.38-1.12-.38-1.68 0l-.57.56a1.2 1.2 0 1 0 1.7 1.69l.55-.57c.57-.37.57-1.12 0-1.68Zm18 .75a1.2 1.2 0 1 1-1.68 1.68l-.57-.56a1.2 1.2 0 0 1 1.7-1.69l.55.57Z"/>',
+	pkl: '<path fill-rule="evenodd" d="M18.7 1.8 18 5a9 9 0 0 1 2 2.4l3.2.2c.4 1 .6 2 .7 3.1L21 12.2a9 9 0 0 1-.7 3l1.9 2.7c-.6 1-1.2 1.7-2 2.5l-3-1.3c-.9.6-1.9 1-2.9 1.4l-.9 3c-1 .2-2.1.2-3.2 0l-.8-3c-1-.4-2-.8-2.9-1.5l-3 1.3a12 12 0 0 1-2-2.5l2-2.6a9 9 0 0 1-.8-3L0 10.5c.1-1.1.3-2.1.7-3.1L4 7.3A9 9 0 0 1 6 5l-.6-3.2c1-.6 2-1 3-1.3l2 2.4c1.1-.2 2.2-.2 3.2 0L15.8.4c1 .3 2 .8 2.9 1.4Zm1 9.8c0 4.2-3.3 7.5-7.5 7.5a7.5 7.5 0 0 1-7.6-7.5c0-4.1 3.4-7.5 7.6-7.5 4.2 0 7.6 3.4 7.6 7.5Z"></path><path fill-opacity=".5" d="M11.4 10.8c-6.6-2.7-3.6-5.5.4-5.5 4.3 0 7.8 2.5 1.2 5.5a2 2 0 0 1-1.6 0Zm.4 1.9c1 7-3 5.8-5 2.5-2.1-3.7-1.7-8 4.2-3.9a2 2 0 0 1 .8 1.4Zm6.2 1.7c2-3.3 1-7.3-4.7-3a2 2 0 0 0-.8 1.4c-.7 7.1 3.3 5.4 5.5 1.7Z"/>',
 };
 
 export const Icons = {

package/integrations/asides.ts

@@ -12,7 +12,6 @@ import {
 import { toMarkdown } from 'mdast-util-to-markdown';
 import remarkDirective from 'remark-directive';
 import type { Plugin, Transformer } from 'unified';
-import { remove } from 'unist-util-remove';
 import { visit } from 'unist-util-visit';
 import type { StarlightConfig } from '../types';
 import type { createTranslationSystemFromFs } from '../utils/translations-fs';
@@ -153,23 +152,24 @@ function remarkAsides(options: AsidesOptions): Plugin<[], Root> {
 			const variant = node.name;
 			if (!isAsideVariant(variant)) return;
 
-			// remark-directive converts a container’s “label” to a paragraph in
-			// its children, but we want to pass it as the title prop to <Aside>, so
-			// we iterate over the children, find a directive label, store it for the
-			// title prop, and remove the paragraph from children.
+			// remark-directive converts a container’s “label” to a paragraph added as the head of its
+			// children with the `directiveLabel` property set to true. We want to pass it as the title
+			// prop to <Aside>, so when we find a directive label, we store it for the title prop and
+			// remove the paragraph from the container’s children.
 			let title = t(`aside.${variant}`);
-			remove(node, (child): boolean | void => {
-				if (child.data && 'directiveLabel' in child.data && child.data.directiveLabel) {
-					if (
-						'children' in child &&
-						Array.isArray(child.children) &&
-						'value' in child.children[0]
-					) {
-						title = child.children[0].value;
-					}
-					return true;
+			const firstChild = node.children[0];
+			if (
+				firstChild?.type === 'paragraph' &&
+				firstChild.data &&
+				'directiveLabel' in firstChild.data
+			) {
+				const firstGrandChild = firstChild.children[0];
+				if (firstGrandChild?.type === 'text') {
+					title = firstGrandChild.value;
 				}
-			});
+				// The first paragraph contains a directive label, we can safely remove it.
+				node.children.splice(0, 1);
+			}
 
 			const aside = h(
 				'aside',

package/integrations/expressive-code/index.ts

@@ -77,7 +77,6 @@ export function getStarlightEcConfigPreprocessor({
 	return (input): AstroExpressiveCodeOptions => {
 		const astroConfig = input.astroConfig;
 		const ecConfig = input.ecConfig as StarlightExpressiveCodeOptions;
-		const { locales } = starlightConfig;
 
 		const {
 			themes: themesInput,
@@ -111,7 +110,7 @@ export function getStarlightEcConfigPreprocessor({
 		});
 
 		// Add Expressive Code UI translations (if any) for all defined locales
-		if (useTranslations) addTranslations(locales, useTranslations);
+		if (useTranslations) addTranslations(starlightConfig, useTranslations);
 
 		return {
 			themes,
@@ -124,6 +123,7 @@ export function getStarlightEcConfigPreprocessor({
 				}
 				return theme;
 			},
+			defaultLocale: starlightConfig.defaultLocale?.lang ?? starlightConfig.defaultLocale?.locale,
 			themeCssSelector: (theme, { styleVariants }) => {
 				// If one dark and one light theme are available, and the user has not disabled it,
 				// generate theme CSS selectors compatible with Starlight's dark mode switch

package/integrations/expressive-code/translations.ts

@@ -1,26 +1,37 @@
 import { pluginFramesTexts } from 'astro-expressive-code';
 import type { StarlightConfig } from '../../types';
 import type { createTranslationSystemFromFs } from '../../utils/translations-fs';
+import { localeToLang } from '../shared/localeToLang';
 
 export function addTranslations(
-	locales: StarlightConfig['locales'],
+	config: StarlightConfig,
 	useTranslations: ReturnType<typeof createTranslationSystemFromFs>
 ) {
-	for (const locale in locales) {
-		const lang = locales[locale]?.lang;
-		if (!lang) continue;
-
-		const t = useTranslations(locale);
-		const translationKeys = [
-			'expressiveCode.copyButtonCopied',
-			'expressiveCode.copyButtonTooltip',
-			'expressiveCode.terminalWindowFallbackTitle',
-		] as const;
-		translationKeys.forEach((key) => {
-			const translation = t(key);
-			if (!translation) return;
-			const ecId = key.replace(/^expressiveCode\./, '');
-			pluginFramesTexts.overrideTexts(lang, { [ecId]: translation });
-		});
+	addTranslationsForLocale(config.defaultLocale.locale, config, useTranslations);
+	if (config.isMultilingual) {
+		for (const locale in config.locales) {
+			if (locale === config.defaultLocale.locale || locale === 'root') continue;
+			addTranslationsForLocale(locale, config, useTranslations);
+		}
 	}
 }
+
+function addTranslationsForLocale(
+	locale: string | undefined,
+	config: StarlightConfig,
+	useTranslations: ReturnType<typeof createTranslationSystemFromFs>
+) {
+	const lang = localeToLang(config, locale);
+	const t = useTranslations(locale);
+	const translationKeys = [
+		'expressiveCode.copyButtonCopied',
+		'expressiveCode.copyButtonTooltip',
+		'expressiveCode.terminalWindowFallbackTitle',
+	] as const;
+	translationKeys.forEach((key) => {
+		const translation = t(key);
+		if (!translation) return;
+		const ecId = key.replace(/^expressiveCode\./, '');
+		pluginFramesTexts.overrideTexts(lang, { [ecId]: translation });
+	});
+}

package/integrations/shared/localeToLang.ts

@@ -0,0 +1,11 @@
+import type { StarlightConfig } from '../../types';
+
+/**
+ * Get the BCP-47 language tag for the given locale.
+ * @param locale Locale string or `undefined` for the root locale.
+ */
+export function localeToLang(config: StarlightConfig, locale: string | undefined): string {
+	const lang = locale ? config.locales?.[locale]?.lang : config.locales?.root?.lang;
+	const defaultLang = config.defaultLocale?.lang || config.defaultLocale?.locale;
+	return lang || defaultLang || 'en';
+}

package/integrations/shared/pathToLocale.ts

@@ -1,3 +1,4 @@
+import type { AstroConfig } from 'astro';
 import type { StarlightConfig } from '../../types';
 
 function slugToLocale(
@@ -17,7 +18,7 @@ export function pathToLocale(
 		astroConfig,
 	}: {
 		starlightConfig: { locales: StarlightConfig['locales'] };
-		astroConfig: { root: URL; srcDir: URL };
+		astroConfig: { root: AstroConfig['root']; srcDir: AstroConfig['srcDir'] };
 	}
 ): string | undefined {
 	const srcDir = new URL(astroConfig.srcDir, astroConfig.root);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astrojs/starlight",
-  "version": "0.21.3",
+  "version": "0.21.5",
   "description": "Build beautiful, high-performance documentation websites with Astro",
   "keywords": [
     "docs",
@@ -194,7 +194,6 @@
     "rehype": "^13.0.1",
     "remark-directive": "^3.0.0",
     "unified": "^11.0.4",
-    "unist-util-remove": "^4.0.0",
     "unist-util-visit": "^5.0.0",
     "vfile": "^6.0.1"
   },

package/user-components/Tabs.astro

@@ -17,7 +17,7 @@ const { html, panels } = processPanels(panelHtml);
 								role="tab"
 								href={'#' + panelId}
 								id={tabId}
-								aria-selected={idx === 0 && 'true'}
+								aria-selected={idx === 0 ? 'true' : 'false'}
 								tabindex={idx !== 0 ? -1 : 0}
 							>
 								{icon && <Icon name={icon} />}
@@ -61,7 +61,7 @@ const { html, panels } = processPanels(panelHtml);
 		color: var(--sl-color-gray-3);
 		outline-offset: var(--sl-outline-offset-inside);
 	}
-	.tab [role='tab'][aria-selected] {
+	.tab [role='tab'][aria-selected='true'] {
 		color: var(--sl-color-white);
 		border-color: var(--sl-color-text-accent);
 		font-weight: 600;
@@ -87,7 +87,7 @@ const { html, panels } = processPanels(panelHtml);
 				// Handle clicks for mouse users
 				tab.addEventListener('click', (e) => {
 					e.preventDefault();
-					const currentTab = tablist.querySelector('[aria-selected]');
+					const currentTab = tablist.querySelector('[aria-selected="true"]');
 					if (e.currentTarget !== currentTab) {
 						this.switchTab(e.currentTarget as HTMLAnchorElement, i);
 					}
@@ -122,7 +122,7 @@ const { html, panels } = processPanels(panelHtml);
 
 			// Mark all tabs as unselected and hide all tab panels.
 			this.tabs.forEach((tab) => {
-				tab.removeAttribute('aria-selected');
+				tab.setAttribute('aria-selected', 'false');
 				tab.setAttribute('tabindex', '-1');
 			});
 			this.panels.forEach((oldPanel) => {

package/user-components/file-tree-icons.ts

@@ -113,6 +113,7 @@ export const definitions: Definitions = {
 	extensions: {
 		'.astro': 'astro',
 		'.mdx': 'mdx',
+		'.pkl': 'pkl',
 		'.bsl': 'seti:bsl',
 		'.mdo': 'seti:mdo',
 		'.cls': 'seti:salesforce',

package/user-components/rehype-file-tree.ts

@@ -168,7 +168,7 @@ function getFileIcon(fileName: string) {
 
 /** Return the icon name for a file based on its file name. */
 function getFileIconName(fileName: string) {
-	let icon = definitions.files[fileName];
+	let icon: string | undefined = definitions.files[fileName];
 	if (icon) return icon;
 	icon = getFileIconTypeFromExtension(fileName);
 	if (icon) return icon;

package/utils/user-config.ts

@@ -212,16 +212,20 @@ const UserConfigSchema = z.object({
 
 export const StarlightConfigSchema = UserConfigSchema.strict().transform(
 	({ locales, defaultLocale, ...config }, ctx) => {
-		if (locales !== undefined && Object.keys(locales).length > 1) {
-			// This is a multilingual site (more than one locale configured).
+		const configuredLocales = Object.keys(locales ?? {});
+
+		// This is a multilingual site (more than one locale configured) or a monolingual site with
+		// only one locale configured (not a root locale).
+		// Monolingual sites with only one non-root locale needs their configuration to be defined in
+		// `config.locales` so that slugs can be correctly generated by taking into consideration the
+		// base path at which a language is served which is the key of the `config.locales` object.
+		if (locales !== undefined && configuredLocales.length >= 1) {
 			// Make sure we can find the default locale and if not, help the user set it.
 			// We treat the root locale as the default if present and no explicit default is set.
 			const defaultLocaleConfig = locales[defaultLocale || 'root'];
 
 			if (!defaultLocaleConfig) {
-				const availableLocales = Object.keys(locales)
-					.map((l) => `"${l}"`)
-					.join(', ');
+				const availableLocales = configuredLocales.map((l) => `"${l}"`).join(', ');
 				ctx.addIssue({
 					code: 'custom',
 					message:
@@ -235,14 +239,15 @@ export const StarlightConfigSchema = UserConfigSchema.strict().transform(
 			return {
 				...config,
 				/** Flag indicating if this site has multiple locales set up. */
-				isMultilingual: true,
+				isMultilingual: configuredLocales.length > 1,
 				/** Full locale object for this site’s default language. */
 				defaultLocale: { ...defaultLocaleConfig, locale: defaultLocale },
 				locales,
 			} as const;
 		}
 
-		// This is a monolingual site, so things are pretty simple.
+		// This is a monolingual site with no locales configured or only a root locale, so things are
+		// pretty simple.
 		return {
 			...config,
 			/** Flag indicating if this site has multiple locales set up. */