@astrojs/starlight 0.21.3 → 0.21.4

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @astrojs/starlight
 
+## 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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astrojs/starlight",
-  "version": "0.21.3",
+  "version": "0.21.4",
   "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"
   },