Merge branch 'main' into i18n-ja-frontmatter-10

.prettierignore

@@ -17,3 +17,6 @@ pnpm-lock.yaml
 
 # https://github.com/withastro/prettier-plugin-astro/issues/337
 packages/starlight/user-components/Tabs.astro
+
+# Malformed YAML file used for testing
+packages/starlight/__tests__/i18n/malformed-yaml-src/content/i18n/*.yml

docs/src/content/docs/components/icons.mdx

@@ -64,7 +64,7 @@ The [`class`](#class) attribute can be used to add custom CSS classes to the ico
 <Preview>
 
 ```mdx
-import { Card } from '@astrojs/starlight/components';
+import { Icon } from '@astrojs/starlight/components';
 
 <Icon name="star" color="goldenrod" size="2rem" />
 <Icon name="rocket" color="var(--sl-color-text-accent)" />

docs/src/content/docs/de/components/icons.mdx

@@ -64,7 +64,7 @@ Das Attribut [`class`](#class) kann verwendet werden, um dem Symbol eigene CSS-K
 <Preview>
 
 ```mdx
-import { Card } from '@astrojs/starlight/components';
+import { Icon } from '@astrojs/starlight/components';
 
 <Icon name="star" color="goldenrod" size="2rem" />
 <Icon name="rocket" color="var(--sl-color-text-accent)" />

docs/src/content/docs/es/components/icons.mdx

@@ -64,7 +64,7 @@ El atributo [`class`](#class) se puede usar para agregar clases CSS personalizad
 <Preview>
 
 ```mdx
-import { Card } from '@astrojs/starlight/components';
+import { Icon } from '@astrojs/starlight/components';
 
 <Icon name="star" color="goldenrod" size="2rem" />
 <Icon name="rocket" color="var(--sl-color-text-accent)" />

docs/src/content/docs/fr/components/icons.mdx

@@ -64,7 +64,7 @@ L'attribut [`class`](#class) peut être utilisé pour ajouter des classes CSS pe
 <Preview>
 
 ```mdx
-import { Card } from '@astrojs/starlight/components';
+import { Icon } from '@astrojs/starlight/components';
 
 <Icon name="star" color="goldenrod" size="2rem" />
 <Icon name="rocket" color="var(--sl-color-text-accent)" />

docs/src/content/docs/ja/components/icons.mdx

@@ -62,7 +62,7 @@ import { Icon } from '@astrojs/starlight/components';
 <Preview>
 
 ```mdx
-import { Card } from '@astrojs/starlight/components';
+import { Icon } from '@astrojs/starlight/components';
 
 <Icon name="star" color="goldenrod" size="2rem" />
 <Icon name="rocket" color="var(--sl-color-text-accent)" />

docs/src/content/docs/ko/components/icons.mdx

@@ -64,7 +64,7 @@ CSS 단위와 색상 값을 사용하여 아이콘의 모양을 조정하는 데
 <Preview>
 
 ```mdx
-import { Card } from '@astrojs/starlight/components';
+import { Icon } from '@astrojs/starlight/components';
 
 <Icon name="star" color="goldenrod" size="2rem" />
 <Icon name="rocket" color="var(--sl-color-text-accent)" />

docs/src/content/docs/ru/components/icons.mdx

@@ -64,7 +64,7 @@ import { Icon } from '@astrojs/starlight/components';
 <Preview>
 
 ```mdx
-import { Card } from '@astrojs/starlight/components';
+import { Icon } from '@astrojs/starlight/components';
 
 <Icon name="star" color="goldenrod" size="2rem" />
 <Icon name="rocket" color="var(--sl-color-text-accent)" />

docs/src/content/docs/zh-cn/components/icons.mdx

@@ -64,7 +64,7 @@ import { Icon } from '@astrojs/starlight/components';
 <Preview>
 
 ```mdx
-import { Card } from '@astrojs/starlight/components';
+import { Icon } from '@astrojs/starlight/components';
 
 <Icon name="star" color="goldenrod" size="2rem" />
 <Icon name="rocket" color="var(--sl-color-text-accent)" />

examples/basics/package.json

@@ -11,7 +11,7 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/starlight": "^0.28.5",
+    "@astrojs/starlight": "^0.28.6",
     "astro": "^4.15.3",
     "sharp": "^0.32.5"
   }

examples/markdoc/package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@astrojs/markdoc": "^0.11.4",
-    "@astrojs/starlight": "^0.28.5",
+    "@astrojs/starlight": "^0.28.6",
     "@astrojs/starlight-markdoc": "^0.1.0",
     "astro": "^4.15.3",
     "sharp": "^0.32.5"

examples/tailwind/package.json

@@ -11,7 +11,7 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/starlight": "^0.28.5",
+    "@astrojs/starlight": "^0.28.6",
     "@astrojs/starlight-tailwind": "^2.0.3",
     "@astrojs/tailwind": "^5.1.0",
     "astro": "^4.15.3",

packages/starlight/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @astrojs/starlight
 
+## 0.28.6
+
+### Patch Changes
+
+- [#2565](https://github.com/withastro/starlight/pull/2565) [`236467b`](https://github.com/withastro/starlight/commit/236467bb745cea7a284ae3d398874d3edbcd846e) Thanks [@HiDeoo](https://github.com/HiDeoo)! - Fixes an issue with custom UI strings defined in YAML files not being loaded in some contexts.
+
 ## 0.28.5
 
 ### Patch Changes

packages/starlight/__tests__/i18n/malformed-yaml-src/content/i18n/en.yml

@@ -0,0 +1 @@
+test: 'Malformed YAML file with dangling trailing comma',

packages/starlight/__tests__/i18n/src/content/i18n/fr.yml

@@ -0,0 +1 @@
+page.editLink: Rendre cette page différente

packages/starlight/__tests__/i18n/translations-fs.test.ts

@@ -1,5 +1,6 @@
 import { describe, expect, test } from 'vitest';
 import { createTranslationSystemFromFs } from '../../utils/translations-fs';
+import { YAMLException } from 'js-yaml';
 
 describe('createTranslationSystemFromFs', () => {
 	test('creates a translation system that returns default strings', () => {
@@ -18,14 +19,21 @@ describe('createTranslationSystemFromFs', () => {
 	test('creates a translation system that uses custom strings', () => {
 		const useTranslations = createTranslationSystemFromFs(
 			{
-				locales: { en: { label: 'English', dir: 'ltr' } },
+				locales: {
+					en: { label: 'English', dir: 'ltr', lang: 'en' },
+					fr: { label: 'Français', dir: 'ltr', lang: 'fr' },
+				},
 				defaultLocale: { label: 'English', locale: 'en', dir: 'ltr' },
 			},
 			// Using `src/` to load custom files in this test fixture.
 			{ srcDir: new URL('./src/', import.meta.url) }
 		);
-		const t = useTranslations('en');
+		// From an i18n JSON file
+		let t = useTranslations('en');
 		expect(t('page.editLink')).toMatchInlineSnapshot('"Make this page different"');
+		// From an i18n YAML file
+		t = useTranslations('fr');
+		expect(t('page.editLink')).toMatchInlineSnapshot('"Rendre cette page différente"');
 	});
 
 	test('supports root locale', () => {
@@ -68,12 +76,22 @@ describe('createTranslationSystemFromFs', () => {
 		expect(() =>
 			createTranslationSystemFromFs(
 				{ locales: {}, defaultLocale: { label: 'English', locale: 'en', dir: 'ltr' } },
-				// Using `malformed-src/` to trigger syntax error in bad JSON file.
-				{ srcDir: new URL('./malformed-src/', import.meta.url) }
+				// Using `malformed-json-src/` to trigger syntax error in bad JSON file.
+				{ srcDir: new URL('./malformed-json-src/', import.meta.url) }
 			)
 		).toThrow(SyntaxError);
 	});
 
+	test('throws on malformed i18n YAML', () => {
+		expect(() =>
+			createTranslationSystemFromFs(
+				{ locales: {}, defaultLocale: { label: 'English', locale: 'en', dir: 'ltr' } },
+				// Using `malformed-yaml-src/` to trigger syntax error in bad YAML file.
+				{ srcDir: new URL('./malformed-yaml-src/', import.meta.url) }
+			)
+		).toThrow(YAMLException);
+	});
+
 	test('creates a translation system that uses custom strings injected by plugins', () => {
 		const useTranslations = createTranslationSystemFromFs(
 			{

packages/starlight/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astrojs/starlight",
-  "version": "0.28.5",
+  "version": "0.28.6",
   "description": "Build beautiful, high-performance documentation websites with Astro",
   "scripts": {
     "test": "vitest",
@@ -177,6 +177,7 @@
   "devDependencies": {
     "@astrojs/markdown-remark": "^5.1.0",
     "@playwright/test": "^1.45.0",
+    "@types/js-yaml": "^4.0.9",
     "@types/node": "^18.16.19",
     "@vitest/coverage-v8": "^1.6.0",
     "astro": "^4.15.3",
@@ -196,6 +197,7 @@
     "hast-util-to-string": "^3.0.0",
     "hastscript": "^9.0.0",
     "i18next": "^23.11.5",
+    "js-yaml": "^4.1.0",
     "mdast-util-directive": "^3.0.0",
     "mdast-util-to-markdown": "^2.1.0",
     "mdast-util-to-string": "^4.0.0",

packages/starlight/utils/translations-fs.ts

@@ -1,9 +1,14 @@
 import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import yaml from 'js-yaml';
 import type { i18nSchemaOutput } from '../schemas/i18n';
 import { createTranslationSystem } from './createTranslationSystem';
 import type { StarlightConfig } from './user-config';
 import type { AstroConfig } from 'astro';
 
+const contentCollectionFileExtensions = ['.json', '.yaml', '.yml'];
+
 /**
  * Loads and creates a translation system from the file system.
  * Only for use in integration code.
@@ -23,15 +28,18 @@ export function createTranslationSystemFromFs<T extends i18nSchemaOutput>(
 		// Load the user’s i18n directory
 		const files = fs.readdirSync(i18nDir, 'utf-8');
 		// Load the user’s i18n collection and ignore the error if it doesn’t exist.
-		userTranslations = Object.fromEntries(
-			files
-				.filter((file) => file.endsWith('.json'))
-				.map((file) => {
-					const id = file.slice(0, -5);
-					const data = JSON.parse(fs.readFileSync(new URL(file, i18nDir), 'utf-8'));
-					return [id, data] as const;
-				})
-		);
+		for (const file of files) {
+			const filePath = path.parse(file);
+			if (!contentCollectionFileExtensions.includes(filePath.ext)) continue;
+			const id = filePath.name;
+			const url = new URL(filePath.base, i18nDir);
+			const content = fs.readFileSync(new URL(file, i18nDir), 'utf-8');
+			const data =
+				filePath.ext === '.json'
+					? JSON.parse(content)
+					: yaml.load(content, { filename: fileURLToPath(url) });
+			userTranslations[id] = data as i18nSchemaOutput;
+		}
 	} catch (e: unknown) {
 		if (e instanceof Error && 'code' in e && e.code === 'ENOENT') {
 			// i18nDir doesn’t exist, so we ignore the error.