diff --git a/.changeset/thick-boxes-fail.md b/.changeset/thick-boxes-fail.md
new file mode 100644
index 00000000000..18b7aa870b6
--- /dev/null
+++ b/.changeset/thick-boxes-fail.md
@@ -0,0 +1,5 @@
+---
+"@astrojs/starlight": minor
+---
+
+Add i18n support for default aside labels
diff --git a/packages/starlight/__tests__/remark-rehype/asides.test.ts b/packages/starlight/__tests__/remark-rehype/asides.test.ts
index 7d1da5a6781..b3f792166ba 100644
--- a/packages/starlight/__tests__/remark-rehype/asides.test.ts
+++ b/packages/starlight/__tests__/remark-rehype/asides.test.ts
@@ -1,9 +1,29 @@
import { createMarkdownProcessor } from '@astrojs/markdown-remark';
import { describe, expect, test } from 'vitest';
import { starlightAsides } from '../../integrations/asides';
+import { createTranslationSystemFromFs } from '../../utils/translations-fs';
+import { StarlightConfigSchema, type StarlightUserConfig } from '../../utils/user-config';
+
+const starlightConfig = StarlightConfigSchema.parse({
+ title: 'Asides Tests',
+ locales: { en: { label: 'English' }, fr: { label: 'French' } },
+ defaultLocale: 'en',
+} satisfies StarlightUserConfig);
+
+const useTranslations = createTranslationSystemFromFs(
+ starlightConfig,
+ // Using non-existent `_src/` to ignore custom files in this test fixture.
+ { srcDir: new URL('./_src/', import.meta.url) }
+);
const processor = await createMarkdownProcessor({
- remarkPlugins: [...starlightAsides()],
+ remarkPlugins: [
+ ...starlightAsides({
+ starlightConfig,
+ astroConfig: { root: new URL(import.meta.url), srcDir: new URL('./_src/', import.meta.url) },
+ useTranslations,
+ }),
+ ],
});
test('generates
* ```
*/
-function remarkAsides(): Plugin<[], Root> {
+function remarkAsides(options: AsidesOptions): Plugin<[], Root> {
type Variant = 'note' | 'tip' | 'caution' | 'danger';
const variants = new Set(['note', 'tip', 'caution', 'danger']);
const isAsideVariant = (s: string): s is Variant => variants.has(s);
- // TODO: hook these up for i18n once the design for translating strings is ready
- const defaultTitles = {
- note: 'Note',
- tip: 'Tip',
- caution: 'Caution',
- danger: 'Danger',
- };
-
const iconPaths = {
// Information icon
note: [
@@ -95,7 +122,9 @@ function remarkAsides(): Plugin<[], Root> {
],
};
- const transformer: Transformer = (tree) => {
+ const transformer: Transformer = (tree, file) => {
+ const locale = getLocaleFromPath(file.history[0], options);
+ const t = options.useTranslations(locale);
visit(tree, (node, index, parent) => {
if (!parent || index === null || node.type !== 'containerDirective') {
return;
@@ -107,7 +136,7 @@ function remarkAsides(): Plugin<[], Root> {
// its children, but we want to pass it as the title prop to