@astrojs/starlight 0.28.3 → 0.28.5

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @astrojs/starlight
 
+## 0.28.5
+
+### Patch Changes
+
+- [#2546](https://github.com/withastro/starlight/pull/2546) [`bf42300`](https://github.com/withastro/starlight/commit/bf42300e76241a2df888dc458c59a7478a8b2d61) Thanks [@HiDeoo](https://github.com/HiDeoo)! - Fixes an issue where i18n content collection related errors, e.g. malformed JSON or YAML, would not be reported.
+
+- [#2548](https://github.com/withastro/starlight/pull/2548) [`07673c8`](https://github.com/withastro/starlight/commit/07673c80114021a269065e451e660337237f76e1) Thanks [@HiDeoo](https://github.com/HiDeoo)! - Fixes a URL localization edge case. In projects without a root locale configured, slugs without a locale prefix did not fall back to the default locale as expected.
+
+- [#2547](https://github.com/withastro/starlight/pull/2547) [`91e1dd7`](https://github.com/withastro/starlight/commit/91e1dd731a06657890a68b2d474199455df2756f) Thanks [@HiDeoo](https://github.com/HiDeoo)! - Fixes a Firefox Markdown content rendering issue for text sentences separated by a line break.
+
+- [#2524](https://github.com/withastro/starlight/pull/2524) [`1b46783`](https://github.com/withastro/starlight/commit/1b4678325fb10714fc3508bd87a7563b10a0f803) Thanks [@jsparkdev](https://github.com/jsparkdev)! - Fixes a broken link to Astro’s Docs in an error message
+
+## 0.28.4
+
+### Patch Changes
+
+- [#2444](https://github.com/withastro/starlight/pull/2444) [`d585b3e`](https://github.com/withastro/starlight/commit/d585b3e0485dd55b2ffab985a6c06d267d22fe51) Thanks [@HiDeoo](https://github.com/HiDeoo)! - Fixes a UI string translation issue for languages with a region subtag.
+
+- [#2518](https://github.com/withastro/starlight/pull/2518) [`0f69db8`](https://github.com/withastro/starlight/commit/0f69db8b806833a7160570a469ddcdc8c0dec5e0) Thanks [@morinokami](https://github.com/morinokami)! - Updates Japanese UI translations
+
+- [#2507](https://github.com/withastro/starlight/pull/2507) [`bd6ced5`](https://github.com/withastro/starlight/commit/bd6ced5bc46310b217c7bfe83a0f68ba4a03da45) Thanks [@HiDeoo](https://github.com/HiDeoo)! - Fixes a table of contents highlighting issue after resizing the window.
+
+- [#2444](https://github.com/withastro/starlight/pull/2444) [`d585b3e`](https://github.com/withastro/starlight/commit/d585b3e0485dd55b2ffab985a6c06d267d22fe51) Thanks [@HiDeoo](https://github.com/HiDeoo)! - Refactors various components to use the new built-in localization system to access translated UI strings.
+
 ## 0.28.3
 
 ### Patch Changes

package/components/TableOfContents/starlight-toc.ts

@@ -88,7 +88,10 @@ export class StarlightTOC extends HTMLElement {
 		let timeout: NodeJS.Timeout;
 		window.addEventListener('resize', () => {
 			// Disable intersection observer while window is resizing.
-			if (observer) observer.disconnect();
+			if (observer) {
+				observer.disconnect();
+				observer = undefined;
+			}
 			clearTimeout(timeout);
 			timeout = setTimeout(() => this.onIdle(observe), 200);
 		});

package/integrations/asides.ts

@@ -17,9 +17,10 @@ import { visit } from 'unist-util-visit';
 import type { StarlightConfig } from '../types';
 import type { createTranslationSystemFromFs } from '../utils/translations-fs';
 import { pathToLocale } from './shared/pathToLocale';
+import { localeToLang } from './shared/localeToLang';
 
 interface AsidesOptions {
-	starlightConfig: { locales: StarlightConfig['locales'] };
+	starlightConfig: Pick<StarlightConfig, 'defaultLocale' | 'locales'>;
 	astroConfig: { root: AstroConfig['root']; srcDir: AstroConfig['srcDir'] };
 	useTranslations: ReturnType<typeof createTranslationSystemFromFs>;
 }
@@ -151,7 +152,8 @@ function remarkAsides(options: AsidesOptions): Plugin<[], Root> {
 
 	const transformer: Transformer<Root> = (tree, file) => {
 		const locale = pathToLocale(file.history[0], options);
-		const t = options.useTranslations(locale);
+		const lang = localeToLang(options.starlightConfig, locale);
+		const t = options.useTranslations(lang);
 		visit(tree, (node, index, parent) => {
 			if (!parent || index === undefined || !isNodeDirective(node)) {
 				return;

package/integrations/expressive-code/translations.ts

@@ -22,7 +22,7 @@ function addTranslationsForLocale(
 	useTranslations: ReturnType<typeof createTranslationSystemFromFs>
 ) {
 	const lang = localeToLang(config, locale);
-	const t = useTranslations(locale);
+	const t = useTranslations(lang);
 	const translationKeys = [
 		'expressiveCode.copyButtonCopied',
 		'expressiveCode.copyButtonTooltip',

package/integrations/shared/localeToLang.ts

@@ -5,7 +5,10 @@ import { BuiltInDefaultLocale } from '../../utils/i18n';
  * 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 {
+export function localeToLang(
+	config: Pick<StarlightConfig, 'defaultLocale' | 'locales'>,
+	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 || BuiltInDefaultLocale.lang;

package/integrations/shared/pathToLocale.ts

@@ -1,14 +1,6 @@
 import type { AstroConfig } from 'astro';
 import type { StarlightConfig } from '../../types';
-
-function slugToLocale(
-	slug: string | undefined,
-	localesConfig: StarlightConfig['locales']
-): string | undefined {
-	const locales = Object.keys(localesConfig || {});
-	const baseSegment = slug?.split('/')[0];
-	return baseSegment && locales.includes(baseSegment) ? baseSegment : undefined;
-}
+import { slugToLocale } from './slugToLocale';
 
 /** Get current locale from the full file path. */
 export function pathToLocale(
@@ -17,7 +9,7 @@ export function pathToLocale(
 		starlightConfig,
 		astroConfig,
 	}: {
-		starlightConfig: { locales: StarlightConfig['locales'] };
+		starlightConfig: Pick<StarlightConfig, 'defaultLocale' | 'locales'>;
 		astroConfig: { root: AstroConfig['root']; srcDir: AstroConfig['srcDir'] };
 	}
 ): string | undefined {
@@ -31,5 +23,5 @@ export function pathToLocale(
 	// Strip docs path leaving only content collection file ID.
 	// Example: /Users/houston/repo/src/content/docs/en/guide.md => en/guide.md
 	const slug = path?.replace(docsDir.pathname, '');
-	return slugToLocale(slug, starlightConfig.locales);
+	return slugToLocale(slug, starlightConfig);
 }

package/integrations/shared/slugToLocale.ts

@@ -0,0 +1,18 @@
+import type { StarlightConfig } from '../../types';
+
+/**
+ * Get the “locale” of a slug. This is the base path at which a language is served.
+ * For example, if French docs are in `src/content/docs/french/`, the locale is `french`.
+ * Root locale slugs will return `undefined`.
+ * @param slug A collection entry slug
+ */
+export function slugToLocale(
+	slug: string | undefined,
+	config: Pick<StarlightConfig, 'defaultLocale' | 'locales'>
+): string | undefined {
+	const localesConfig = config.locales ?? {};
+	const baseSegment = slug?.split('/')[0];
+	if (baseSegment && localesConfig[baseSegment]) return baseSegment;
+	if (!localesConfig.root) return config.defaultLocale.locale;
+	return undefined;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astrojs/starlight",
-  "version": "0.28.3",
+  "version": "0.28.5",
   "description": "Build beautiful, high-performance documentation websites with Astro",
   "keywords": [
     "docs",

package/routes/static/404.astro

@@ -3,7 +3,6 @@ import { getEntry } from 'astro:content';
 import config from 'virtual:starlight/user-config';
 import EmptyContent from '../../components/EmptyMarkdown.md';
 import type { Route, StarlightDocsEntry } from '../../utils/routing';
-import { useTranslations } from '../../utils/translations';
 import { BuiltInDefaultLocale } from '../../utils/i18n';
 import CommonPage from '../common.astro';
 
@@ -15,7 +14,6 @@ let locale = config.defaultLocale?.locale;
 if (locale === 'root') locale = undefined;
 
 const entryMeta = { dir, lang, locale };
-const t = useTranslations(locale);
 
 const fallbackEntry: StarlightDocsEntry = {
 	slug: '404',
@@ -27,7 +25,7 @@ const fallbackEntry: StarlightDocsEntry = {
 		template: 'splash',
 		editUrl: false,
 		head: [],
-		hero: { tagline: t('404.text'), actions: [] },
+		hero: { tagline: Astro.locals.t('404.text'), actions: [] },
 		pagefind: false,
 		sidebar: { hidden: false, attrs: {} },
 		draft: false,

package/style/markdown.css

@@ -1,6 +1,6 @@
 .sl-markdown-content
-	:not(a, strong, em, del, span, input, code)
-	+ :not(a, strong, em, del, span, input, code, :where(.not-content *)) {
+	:not(a, strong, em, del, span, input, code, br)
+	+ :not(a, strong, em, del, span, input, code, br, :where(.not-content *)) {
 	margin-top: 1rem;
 }
 

package/translations/ja.json

@@ -18,12 +18,12 @@
   "page.lastUpdated": "最終更新日:",
   "page.previousLink": "前へ",
   "page.nextLink": "次へ",
-  "page.draft": "This content is a draft and will not be included in production builds.",
+  "page.draft": "このコンテンツは下書きです。プロダクションビルドには含まれません。",
   "404.text": "ページが見つかりません。 URL を確認するか、検索バーを使用してみてください。",
   "aside.note": "ノート",
   "aside.tip": "ヒント",
   "aside.caution": "注意",
   "aside.danger": "危険",
   "fileTree.directory": "ディレクトリ",
-  "builtWithStarlight.label": "Built with Starlight"
+  "builtWithStarlight.label": "Starlightで作成"
 }

package/user-components/Aside.astro

@@ -1,7 +1,5 @@
 ---
 import { AstroError } from 'astro/errors';
-import { slugToLocaleData, urlToSlug } from '../utils/slugs';
-import { useTranslations } from '../utils/translations';
 import Icon from './Icon.astro';
 
 const asideVariants = ['note', 'tip', 'caution', 'danger'] as const;
@@ -23,8 +21,7 @@ if (!asideVariants.includes(type)) {
 }
 
 if (!title) {
-	const { locale } = slugToLocaleData(urlToSlug(Astro.url));
-	title = useTranslations(locale)(`aside.${type}`);
+	title = Astro.locals.t(`aside.${type}`);
 }
 ---
 

package/user-components/FileTree.astro

@@ -1,14 +1,8 @@
 ---
-import { stripLeadingAndTrailingSlashes } from '../utils/path';
-import { slugToLocaleData } from '../utils/slugs';
-import { useTranslations } from '../utils/translations';
 import { processFileTree } from './rehype-file-tree';
 
-const slug = stripLeadingAndTrailingSlashes(Astro.url.pathname);
-const t = useTranslations(slugToLocaleData(slug).locale);
-
 const fileTreeHtml = await Astro.slots.render('default');
-const html = processFileTree(fileTreeHtml, t('fileTree.directory'));
+const html = processFileTree(fileTreeHtml, Astro.locals.t('fileTree.directory'));
 ---
 
 <starlight-file-tree set:html={html} class="not-content" data-pagefind-ignore />

package/utils/createTranslationSystem.ts

@@ -49,14 +49,14 @@ export function createTranslationSystem<T extends i18nSchemaOutput>(
 	});
 
 	/**
-	 * Generate a utility function that returns UI strings for the given `locale`.
+	 * Generate a utility function that returns UI strings for the given language.
 	 *
 	 * Also includes a few utility methods:
 	 * - `all()` method for getting the entire dictionary.
 	 * - `exists()` method for checking if a key exists in the dictionary.
 	 * - `dir()` method for getting the text direction of the locale.
 	 *
-	 * @param {string | undefined} [locale]
+	 * @param {string | undefined} [lang]
 	 * @example
 	 * const t = useTranslations('en');
 	 * const label = t('search.label');
@@ -68,8 +68,8 @@ export function createTranslationSystem<T extends i18nSchemaOutput>(
 	 * const dir = t.dir();
 	 * // => 'ltr'
 	 */
-	return (locale: string | undefined) => {
-		const lang = localeToLang(locale, config.locales, config.defaultLocale);
+	return (lang: string | undefined) => {
+		lang ??= config.defaultLocale?.lang || BuiltInDefaultLocale.lang;
 
 		const t = i18n.getFixedT(lang, I18nextNamespace) as I18nT;
 		t.all = () => i18n.getResourceBundle(lang, I18nextNamespace);

package/utils/navigation.ts

@@ -163,7 +163,7 @@ function linkFromInternalSidebarLinkItem(
 			throw new AstroError(
 				`The slug \`"${item.slug}"\` specified in the Starlight sidebar config does not exist.`,
 				'Update the Starlight config to reference a valid entry slug in the docs content collection.\n' +
-					'Learn more about Astro content collection slugs at https://docs.astro.build/en/reference/api-reference/#getentry'
+					'Learn more about Astro content collection slugs at https://docs.astro.build/en/reference/modules/astro-content/#getentry'
 			);
 		}
 	}

package/utils/route-data.ts

@@ -62,7 +62,7 @@ export function generateRouteData({
 	};
 }
 
-export function getToC({ entry, locale, headings }: PageProps) {
+export function getToC({ entry, lang, headings }: PageProps) {
 	const tocConfig =
 		entry.data.template === 'splash'
 			? false
@@ -70,7 +70,7 @@ export function getToC({ entry, locale, headings }: PageProps) {
 				? entry.data.tableOfContents
 				: config.tableOfContents;
 	if (!tocConfig) return;
-	const t = useTranslations(locale);
+	const t = useTranslations(lang);
 	return {
 		...tocConfig,
 		items: generateToC(headings, { ...tocConfig, title: t('tableOfContents.overview') }),

package/utils/slugs.ts

@@ -1,6 +1,7 @@
 import config from 'virtual:starlight/user-config';
 import { BuiltInDefaultLocale } from './i18n';
 import { stripTrailingSlash } from './path';
+import { slugToLocale as getLocaleFromSlug } from '../integrations/shared/slugToLocale';
 
 export interface LocaleData {
 	/** Writing direction. */
@@ -18,10 +19,7 @@ export interface LocaleData {
  * @param slug A collection entry slug
  */
 function slugToLocale(slug: string): string | undefined {
-	const locales = Object.keys(config.locales || {});
-	const baseSegment = slug.split('/')[0];
-	if (baseSegment && locales.includes(baseSegment)) return baseSegment;
-	return undefined;
+	return getLocaleFromSlug(slug, config);
 }
 
 /** Get locale information for a given slug. */

package/utils/translations.ts

@@ -14,25 +14,21 @@ export type UserI18nKeys = keyof RemoveIndexSignature<UserI18nSchema>;
 
 /** Get all translation data from the i18n collection, keyed by `id`, which matches locale. */
 async function loadTranslations() {
-	let userTranslations: Record<string, UserI18nSchema> = {};
 	// Briefly override `console.warn()` to silence logging when a project has no i18n collection.
 	const warn = console.warn;
 	console.warn = () => {};
-	try {
-		// Load the user’s i18n collection and ignore the error if it doesn’t exist.
-		userTranslations = Object.fromEntries(
-			// @ts-ignore — may be an error in projects without an i18n collection
-			(await getCollection('i18n')).map(({ id, data }) => [id, data] as const)
-		);
-	} catch {}
+	const userTranslations: Record<string, UserI18nSchema> = Object.fromEntries(
+		// @ts-ignore — may be a type error in projects without an i18n collection
+		(await getCollection('i18n')).map(({ id, data }) => [id, data] as const)
+	);
 	// Restore the original warn implementation.
 	console.warn = warn;
 	return userTranslations;
 }
 
 /**
- * Generate a utility function that returns UI strings for the given `locale`.
- * @param {string | undefined} [locale]
+ * Generate a utility function that returns UI strings for the given language.
+ * @param {string | undefined} [lang]
  * @example
  * const t = useTranslations('en');
  * const label = t('search.label'); // => 'Search'