@astrojs/starlight 0.28.3 → 0.28.4

package/CHANGELOG.md

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

@@ -1,6 +1,6 @@
 {
   "name": "@astrojs/starlight",
-  "version": "0.28.3",
+  "version": "0.28.4",
   "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/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/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/translations.ts

@@ -31,8 +31,8 @@ async function loadTranslations() {
 }
 
 /**
- * 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'