@astrojs/starlight 0.23.3 → 0.24.0

package/404.astro

@@ -6,10 +6,12 @@ import Page from './components/Page.astro';
 import { generateRouteData } from './utils/route-data';
 import type { StarlightDocsEntry } from './utils/routing';
 import { useTranslations } from './utils/translations';
+import { BuiltInDefaultLocale } from './utils/i18n';
 
 export const prerender = true;
 
-const { lang = 'en', dir = 'ltr' } = config.defaultLocale || {};
+const { lang = BuiltInDefaultLocale.lang, dir = BuiltInDefaultLocale.dir } =
+	config.defaultLocale || {};
 let locale = config.defaultLocale?.locale;
 if (locale === 'root') locale = undefined;
 

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @astrojs/starlight
 
+## 0.24.0
+
+### Minor Changes
+
+- [#1841](https://github.com/withastro/starlight/pull/1841) [`ee0cd38a`](https://github.com/withastro/starlight/commit/ee0cd38a1fae31717fe820e779baeabe693cd67a) Thanks [@HiDeoo](https://github.com/HiDeoo)! - Adds support for `Astro.currentLocale` and Astro’s i18n routing.
+
+  ⚠️ **Potentially breaking change:** Starlight now configures Astro’s `i18n` option for you based on its `locales` config.
+
+  If you are currently using Astro’s `i18n` option as well as Starlight’s `locales` option, you will need to remove one of these.
+  In general we recommend using Starlight’s `locales`, but if you have a more advanced configuration you may choose to keep Astro’s `i18n` config instead.
+
+- [#1958](https://github.com/withastro/starlight/pull/1958) [`081d1a96`](https://github.com/withastro/starlight/commit/081d1a969462633e41ca95a18a1ec121cb4af5d2) Thanks [@delucis](https://github.com/delucis)! - Allows users to opt into displaying a “Built with Starlight” link in the site footer
+
+- [#1530](https://github.com/withastro/starlight/pull/1530) [`dd64836a`](https://github.com/withastro/starlight/commit/dd64836af45f33df4a99ab864eabb91fc9b8e204) Thanks [@kevinzunigacuellar](https://github.com/kevinzunigacuellar)! - Adds a new `<Badge>` component
+
+## 0.23.4
+
+### Patch Changes
+
+- [#1955](https://github.com/withastro/starlight/pull/1955) [`15ef1f4b`](https://github.com/withastro/starlight/commit/15ef1f4bdbf7174134121f4bbdf82ca3903c802a) Thanks [@HiDeoo](https://github.com/HiDeoo)! - Reverts a [change](https://github.com/withastro/starlight/pull/1948) to prevent a numbering issue with the `<Steps>` component in future versions of Chrome.
+
 ## 0.23.3
 
 ### Patch Changes

package/components/Footer.astro

@@ -4,26 +4,55 @@ import type { Props } from '../props';
 import EditLink from 'virtual:starlight/components/EditLink';
 import LastUpdated from 'virtual:starlight/components/LastUpdated';
 import Pagination from 'virtual:starlight/components/Pagination';
+import config from 'virtual:starlight/user-config';
+import { Icon } from '../components';
 ---
 
-<footer>
+<footer class="sl-flex">
 	<div class="meta sl-flex">
 		<EditLink {...Astro.props} />
 		<LastUpdated {...Astro.props} />
 	</div>
 	<Pagination {...Astro.props} />
+
+	{
+		config.credits && (
+			<a class="kudos sl-flex" href="https://starlight.astro.build">
+				<Icon name={'starlight'} /> {Astro.props.labels['builtWithStarlight.label']}
+			</a>
+		)
+	}
 </footer>
 
 <style>
+	footer {
+		flex-direction: column;
+		gap: 1.5rem;
+	}
 	.meta {
 		gap: 0.75rem 3rem;
 		justify-content: space-between;
 		flex-wrap: wrap;
-		margin-block: 3rem 1.5rem;
+		margin-top: 3rem;
 		font-size: var(--sl-text-sm);
 		color: var(--sl-color-gray-3);
 	}
 	.meta > :global(p:only-child) {
 		margin-inline-start: auto;
 	}
+
+	.kudos {
+		align-items: center;
+		gap: 0.5em;
+		margin: 1.5rem auto;
+		font-size: var(--sl-text-xs);
+		text-decoration: none;
+		color: var(--sl-color-gray-3);
+	}
+	.kudos :global(svg) {
+		color: var(--sl-color-orange);
+	}
+	.kudos:hover {
+		color: var(--sl-color-white);
+	}
 </style>

package/components/SidebarSublist.astro

@@ -1,7 +1,7 @@
 ---
 import { flattenSidebar, type SidebarEntry } from '../utils/navigation';
 import Icon from '../user-components/Icon.astro';
-import Badge from './Badge.astro';
+import Badge from '../user-components/Badge.astro';
 
 interface Props {
 	sublist: SidebarEntry[];
@@ -24,13 +24,11 @@ const { sublist, nested } = Astro.props;
 					>
 						<span>{entry.label}</span>
 						{entry.badge && (
-							<>
-								{' '}
-								<Badge
-									text={entry.badge.text}
-									variant={entry.isCurrent ? 'outline' : entry.badge.variant}
-								/>
-							</>
+							<Badge
+								variant={entry.badge.variant}
+								class={entry.badge.class}
+								text={entry.badge.text}
+							/>
 						)}
 					</a>
 				) : (
@@ -41,10 +39,11 @@ const { sublist, nested } = Astro.props;
 							<div class="group-label">
 								<span class="large">{entry.label}</span>
 								{entry.badge && (
-									<>
-										{' '}
-										<Badge text={entry.badge.text} variant={entry.badge.variant} />
-									</>
+									<Badge
+										variant={entry.badge.variant}
+										class={entry.badge.class}
+										text={entry.badge.text}
+									/>
 								)}
 							</div>
 							<Icon name="right-caret" class="caret" size="1.25rem" />

package/components.ts

@@ -1,4 +1,5 @@
 export { default as Aside } from './user-components/Aside.astro';
+export { default as Badge } from './user-components/Badge.astro';
 export { default as Card } from './user-components/Card.astro';
 export { default as CardGrid } from './user-components/CardGrid.astro';
 export { default as Icon } from './user-components/Icon.astro';

package/index.ts

@@ -10,6 +10,7 @@ import { vitePluginStarlightUserConfig } from './integrations/virtual-user-confi
 import { rehypeRtlCodeSupport } from './integrations/code-rtl-support';
 import { createTranslationSystemFromFs } from './utils/translations-fs';
 import { runPlugins, type StarlightUserConfigWithPlugins } from './utils/plugins';
+import { processI18nConfig } from './utils/i18n';
 import type { StarlightConfig } from './types';
 
 export default function StarlightIntegration({
@@ -28,18 +29,25 @@ export default function StarlightIntegration({
 				logger,
 				updateConfig,
 			}) => {
-				// Run plugins to get the final configuration and any extra Astro integrations to load.
-				const { integrations, starlightConfig } = await runPlugins(opts, plugins, {
+				// Run plugins to get the updated configuration and any extra Astro integrations to load.
+				const pluginResult = await runPlugins(opts, plugins, {
 					command,
 					config,
 					isRestart,
 					logger,
 				});
+				// Process the Astro and Starlight configurations for i18n and translations.
+				const { astroI18nConfig, starlightConfig } = processI18nConfig(
+					pluginResult.starlightConfig,
+					config.i18n
+				);
+
+				const { integrations } = pluginResult;
 				userConfig = starlightConfig;
 
 				const useTranslations = createTranslationSystemFromFs(starlightConfig, config);
 
-				if (!userConfig.disable404Route) {
+				if (!starlightConfig.disable404Route) {
 					injectRoute({
 						pattern: '404',
 						entrypoint: '@astrojs/starlight/404.astro',
@@ -92,6 +100,7 @@ export default function StarlightIntegration({
 					experimental: {
 						globalRoutePriority: true,
 					},
+					i18n: astroI18nConfig,
 				});
 			},
 

package/integrations/shared/localeToLang.ts

@@ -1,4 +1,5 @@
 import type { StarlightConfig } from '../../types';
+import { BuiltInDefaultLocale } from '../../utils/i18n';
 
 /**
  * Get the BCP-47 language tag for the given locale.
@@ -7,5 +8,5 @@ import type { StarlightConfig } from '../../types';
 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';
+	return lang || defaultLang || BuiltInDefaultLocale.lang;
 }

package/package.json

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

package/schemas/badge.ts

@@ -4,8 +4,17 @@ const badgeSchema = () =>
 	z.object({
 		variant: z.enum(['note', 'danger', 'success', 'caution', 'tip', 'default']).default('default'),
 		text: z.string(),
+		class: z.string().optional(),
 	});
 
+export const BadgeComponentSchema = badgeSchema()
+	.extend({
+		size: z.enum(['small', 'medium', 'large']).default('small'),
+	})
+	.passthrough();
+
+export type BadgeComponentProps = z.input<typeof BadgeComponentSchema>;
+
 export const BadgeConfigSchema = () =>
 	z
 		.union([z.string(), badgeSchema()])

package/schemas/i18n.ts

@@ -138,6 +138,12 @@ function starlightI18nSchema() {
 			'fileTree.directory': z
 				.string()
 				.describe('Label for the directory icon in the file tree component.'),
+
+			'builtWithStarlight.label': z
+				.string()
+				.describe(
+					'Label for the “Built with Starlight” badge optionally displayed in the site footer.'
+				),
 		})
 		.partial();
 }

package/translations/ar.json

@@ -24,5 +24,6 @@
   "aside.tip": "نصيحة",
   "aside.caution": "تنبيه",
   "aside.danger": "تحذير",
-  "fileTree.directory": "Directory"
+  "fileTree.directory": "Directory",
+  "builtWithStarlight.label": "Built with Starlight"
 }

package/translations/cs.json

@@ -24,5 +24,6 @@
   "aside.tip": "Tip",
   "aside.caution": "Caution",
   "aside.danger": "Danger",
-  "fileTree.directory": "Directory"
+  "fileTree.directory": "Directory",
+  "builtWithStarlight.label": "Built with Starlight"
 }

package/translations/da.json

@@ -24,5 +24,6 @@
   "aside.tip": "Tip",
   "aside.caution": "Caution",
   "aside.danger": "Danger",
-  "fileTree.directory": "Directory"
+  "fileTree.directory": "Directory",
+  "builtWithStarlight.label": "Built with Starlight"
 }

package/translations/de.json

@@ -24,5 +24,6 @@
   "aside.tip": "Tipp",
   "aside.caution": "Achtung",
   "aside.danger": "Gefahr",
-  "fileTree.directory": "Directory"
+  "fileTree.directory": "Directory",
+  "builtWithStarlight.label": "Erstellt mit Starlight"
 }

package/translations/en.json

@@ -24,5 +24,6 @@
   "aside.tip": "Tip",
   "aside.caution": "Caution",
   "aside.danger": "Danger",
-  "fileTree.directory": "Directory"
+  "fileTree.directory": "Directory",
+  "builtWithStarlight.label": "Built with Starlight"
 }

package/translations/es.json

@@ -27,5 +27,6 @@
   "expressiveCode.copyButtonCopied": "¡Copiado!",
   "expressiveCode.copyButtonTooltip": "Copiar al portapapeles",
   "expressiveCode.terminalWindowFallbackTitle": "Ventana de terminal",
-  "fileTree.directory": "Directory"
+  "fileTree.directory": "Directory",
+  "builtWithStarlight.label": "Hecho con Starlight"
 }

package/translations/fa.json

@@ -24,5 +24,6 @@
   "aside.tip": "نکته",
   "aside.caution": "احتیاط",
   "aside.danger": "خطر",
-  "fileTree.directory": "فهرست"
+  "fileTree.directory": "فهرست",
+  "builtWithStarlight.label": "Built with Starlight"
 }

package/translations/fr.json

@@ -27,5 +27,6 @@
   "expressiveCode.copyButtonCopied": "Copié !",
   "expressiveCode.copyButtonTooltip": "Copier dans le presse-papiers",
   "expressiveCode.terminalWindowFallbackTitle": "Fenêtre de terminal",
-  "fileTree.directory": "Répertoire"
+  "fileTree.directory": "Répertoire",
+  "builtWithStarlight.label": "Créé avec Starlight"
 }

package/translations/gl.json

@@ -24,5 +24,6 @@
   "aside.tip": "Tip",
   "aside.caution": "Caution",
   "aside.danger": "Danger",
-  "fileTree.directory": "Directory"
+  "fileTree.directory": "Directory",
+  "builtWithStarlight.label": "Built with Starlight"
 }

package/translations/he.json

@@ -24,5 +24,6 @@
   "aside.tip": "Tip",
   "aside.caution": "Caution",
   "aside.danger": "Danger",
-  "fileTree.directory": "Directory"
+  "fileTree.directory": "Directory",
+  "builtWithStarlight.label": "Built with Starlight"
 }

package/translations/hi.json

@@ -24,5 +24,6 @@
   "aside.tip": "संकेत",
   "aside.caution": "सावधानी",
   "aside.danger": "खतरा",
-  "fileTree.directory": "Directory"
+  "fileTree.directory": "Directory",
+  "builtWithStarlight.label": "Starlight द्वारा निर्मित"
 }

package/translations/id.json

@@ -24,5 +24,6 @@
   "aside.tip": "Tips",
   "aside.caution": "Perhatian",
   "aside.danger": "Bahaya",
-  "fileTree.directory": "Directory"
+  "fileTree.directory": "Directory",
+  "builtWithStarlight.label": "Built with Starlight"
 }

package/translations/it.json

@@ -24,5 +24,6 @@
   "aside.tip": "Consiglio",
   "aside.caution": "Attenzione",
   "aside.danger": "Pericolo",
-  "fileTree.directory": "Directory"
+  "fileTree.directory": "Directory",
+  "builtWithStarlight.label": "Built with Starlight"
 }

package/translations/ja.json

@@ -24,5 +24,6 @@
   "aside.tip": "ヒント",
   "aside.caution": "注意",
   "aside.danger": "危険",
-  "fileTree.directory": "ディレクトリ"
+  "fileTree.directory": "ディレクトリ",
+  "builtWithStarlight.label": "Built with Starlight"
 }

package/translations/ko.json

@@ -24,5 +24,6 @@
   "aside.tip": "팁",
   "aside.caution": "주의",
   "aside.danger": "위험",
-  "fileTree.directory": "Directory"
+  "fileTree.directory": "Directory",
+  "builtWithStarlight.label": "Built with Starlight"
 }

package/translations/nb.json

@@ -24,5 +24,6 @@
   "aside.tip": "Tip",
   "aside.caution": "Caution",
   "aside.danger": "Danger",
-  "fileTree.directory": "Directory"
+  "fileTree.directory": "Directory",
+  "builtWithStarlight.label": "Laget med Starlight"
 }

package/translations/nl.json

@@ -24,5 +24,6 @@
   "aside.tip": "Tip",
   "aside.caution": "Opgepast",
   "aside.danger": "Gevaar",
-  "fileTree.directory": "Directory"
+  "fileTree.directory": "Directory",
+  "builtWithStarlight.label": "Built with Starlight"
 }

package/translations/pl.json

@@ -27,5 +27,6 @@
   "fileTree.directory": "Folder",
   "expressiveCode.copyButtonCopied": "Skopiowane!",
   "expressiveCode.copyButtonTooltip": "Skopiuj do schowka",
-  "expressiveCode.terminalWindowFallbackTitle": "Okno terminala"
+  "expressiveCode.terminalWindowFallbackTitle": "Okno terminala",
+  "builtWithStarlight.label": "Built with Starlight"
 }

package/translations/pt.json

@@ -24,5 +24,6 @@
   "aside.tip": "Dica",
   "aside.caution": "Cuidado",
   "aside.danger": "Perigo",
-  "fileTree.directory": "Directory"
+  "fileTree.directory": "Directory",
+  "builtWithStarlight.label": "Feito com Starlight"
 }

package/translations/ro.json

@@ -24,5 +24,6 @@
   "aside.tip": "Sfat",
   "aside.caution": "Atenție",
   "aside.danger": "Pericol",
-  "fileTree.directory": "Directory"
+  "fileTree.directory": "Directory",
+  "builtWithStarlight.label": "Built with Starlight"
 }

package/translations/ru.json

@@ -27,5 +27,6 @@
   "fileTree.directory": "Директория",
   "expressiveCode.copyButtonCopied": "Скопировано!",
   "expressiveCode.copyButtonTooltip": "Копировать",
-  "expressiveCode.terminalWindowFallbackTitle": "Окно терминала"
+  "expressiveCode.terminalWindowFallbackTitle": "Окно терминала",
+  "builtWithStarlight.label": "Built with Starlight"
 }

package/translations/sv.json

@@ -24,5 +24,6 @@
   "aside.tip": "Tip",
   "aside.caution": "Caution",
   "aside.danger": "Danger",
-  "fileTree.directory": "Directory"
+  "fileTree.directory": "Directory",
+  "builtWithStarlight.label": "Built with Starlight"
 }

package/translations/tr.json

@@ -24,5 +24,6 @@
   "aside.tip": "İpucu",
   "aside.caution": "Dikkat",
   "aside.danger": "Tehlike",
-  "fileTree.directory": "Dizin"
+  "fileTree.directory": "Dizin",
+  "builtWithStarlight.label": "Built with Starlight"
 }

package/translations/uk.json

@@ -24,5 +24,6 @@
   "aside.tip": "Порада",
   "aside.caution": "Обережно",
   "aside.danger": "Небезпечно",
-  "fileTree.directory": "Directory"
+  "fileTree.directory": "Directory",
+  "builtWithStarlight.label": "Built with Starlight"
 }

package/translations/vi.json

@@ -24,5 +24,6 @@
   "aside.tip": "Mẹo",
   "aside.caution": "Thận trọng",
   "aside.danger": "Nguy hiểm",
-  "fileTree.directory": "Danh mục"
+  "fileTree.directory": "Danh mục",
+  "builtWithStarlight.label": "Built with Starlight"
 }

package/translations/zh-CN.json

@@ -24,5 +24,6 @@
   "aside.tip": "提示",
   "aside.caution": "警告",
   "aside.danger": "危险",
-  "fileTree.directory": "文件夹"
+  "fileTree.directory": "文件夹",
+  "builtWithStarlight.label": "基于 Starlight 构建"
 }

package/translations/zh-TW.json

@@ -24,5 +24,6 @@
   "aside.tip": "提示",
   "aside.caution": "警告",
   "aside.danger": "危險",
-  "fileTree.directory": "目錄"
+  "fileTree.directory": "目錄",
+  "builtWithStarlight.label": "Built with Starlight"
 }

package/user-components/Badge.astro

@@ -0,0 +1,141 @@
+---
+import { BadgeComponentSchema, type BadgeComponentProps } from '../schemas/badge';
+import { parseWithFriendlyErrors } from '../utils/error-map';
+import type { HTMLAttributes } from 'astro/types';
+
+type Props = BadgeComponentProps & HTMLAttributes<'span'>;
+
+const {
+	text,
+	variant,
+	size,
+	class: customClass,
+	...attrs
+} = parseWithFriendlyErrors(
+	BadgeComponentSchema,
+	Astro.props,
+	'Invalid prop passed to the `<Badge/>` component.'
+);
+---
+
+<span class:list={['sl-badge', variant, size, customClass]} {...attrs}>{text}</span>
+
+<style>
+	:global(:root) {
+		--sl-badge-default-border: var(--sl-color-accent);
+		--sl-badge-default-bg: var(--sl-color-accent-low);
+		--sl-badge-default-text: #fff;
+
+		--sl-badge-note-border: var(--sl-color-blue);
+		--sl-badge-note-bg: var(--sl-color-blue-low);
+		--sl-badge-note-text: #fff;
+
+		--sl-badge-danger-border: var(--sl-color-red);
+		--sl-badge-danger-bg: var(--sl-color-red-low);
+		--sl-badge-danger-text: #fff;
+
+		--sl-badge-success-border: var(--sl-color-green);
+		--sl-badge-success-bg: var(--sl-color-green-low);
+		--sl-badge-success-text: #fff;
+
+		--sl-badge-caution-border: var(--sl-color-orange);
+		--sl-badge-caution-bg: var(--sl-color-orange-low);
+		--sl-badge-caution-text: #fff;
+
+		--sl-badge-tip-border: var(--sl-color-purple);
+		--sl-badge-tip-bg: var(--sl-color-purple-low);
+		--sl-badge-tip-text: #fff;
+	}
+
+	:global([data-theme='light']:root) {
+		--sl-badge-default-bg: var(--sl-color-accent-high);
+		--sl-badge-note-bg: var(--sl-color-blue-high);
+		--sl-badge-danger-bg: var(--sl-color-red-high);
+		--sl-badge-success-bg: var(--sl-color-green-high);
+		--sl-badge-caution-bg: var(--sl-color-orange-high);
+		--sl-badge-tip-bg: var(--sl-color-purple-high);
+	}
+
+	.sl-badge {
+		display: inline-block;
+		border: 1px solid var(--sl-color-border-badge);
+		border-radius: 0.25rem;
+		font-family: var(--sl-font-system-mono);
+		line-height: normal;
+		color: var(--sl-color-text-badge);
+		background-color: var(--sl-color-bg-badge);
+		overflow-wrap: anywhere;
+	}
+
+	/* Sidebar overrides */
+	:global(.sidebar-content) .sl-badge {
+		line-height: 1;
+		font-size: var(--sl-text-xs);
+		padding: 0.125rem 0.375rem;
+	}
+
+	/* outline variant */
+	:global(.sidebar-content a[aria-current='page']) > .sl-badge {
+		--sl-color-bg-badge: transparent;
+		--sl-color-border-badge: currentColor;
+		color: inherit;
+	}
+
+	/* Color variants */
+	.default {
+		--sl-color-bg-badge: var(--sl-badge-default-bg);
+		--sl-color-border-badge: var(--sl-badge-default-border);
+		--sl-color-text-badge: var(--sl-badge-default-text);
+	}
+
+	.note {
+		--sl-color-bg-badge: var(--sl-badge-note-bg);
+		--sl-color-border-badge: var(--sl-badge-note-border);
+		--sl-color-text-badge: var(--sl-badge-note-text);
+	}
+
+	.danger {
+		--sl-color-bg-badge: var(--sl-badge-danger-bg);
+		--sl-color-border-badge: var(--sl-badge-danger-border);
+		--sl-color-text-badge: var(--sl-badge-danger-text);
+	}
+
+	.success {
+		--sl-color-bg-badge: var(--sl-badge-success-bg);
+		--sl-color-border-badge: var(--sl-badge-success-border);
+		--sl-color-text-badge: var(--sl-badge-success-text);
+	}
+
+	.tip {
+		--sl-color-bg-badge: var(--sl-badge-tip-bg);
+		--sl-color-border-badge: var(--sl-badge-tip-border);
+		--sl-color-text-badge: var(--sl-badge-tip-text);
+	}
+
+	.caution {
+		--sl-color-bg-badge: var(--sl-badge-caution-bg);
+		--sl-color-border-badge: var(--sl-badge-caution-border);
+		--sl-color-text-badge: var(--sl-badge-caution-text);
+	}
+
+	/* Size variants */
+	.small {
+		font-size: var(--sl-text-xs);
+		padding: 0.125rem 0.25rem;
+	}
+
+	.medium {
+		font-size: var(--sl-text-sm);
+		padding: 0.175rem 0.35rem;
+	}
+
+	.large {
+		font-size: var(--sl-text-base);
+		padding: 0.225rem 0.45rem;
+	}
+
+	/* Badge in headings */
+	:global(.sl-markdown-content :is(h1, h2, h3, h4, h5, h6)) .sl-badge {
+		vertical-align: middle;
+	}
+</style>

package/user-components/Steps.astro

@@ -23,8 +23,6 @@ const { html } = processSteps(content);
 		padding-bottom: 1px;
 		/* Prevent bullets from touching in short list items. */
 		min-height: calc(var(--bullet-size) + var(--bullet-margin));
-		/* Enforce style containment so that nested lists CSS counters are scoped to the contained element. */
-		contain: style;
 	}
 	.sl-steps > li + li {
 		/* Remove margin between steps. */

package/utils/createTranslationSystem.ts

@@ -1,5 +1,6 @@
 import type { i18nSchemaOutput } from '../schemas/i18n';
 import builtinTranslations from '../translations/index';
+import { BuiltInDefaultLocale } from './i18n';
 import type { StarlightConfig } from './user-config';
 
 export function createTranslationSystem<T extends i18nSchemaOutput>(
@@ -64,7 +65,7 @@ function localeToLang(
 ): string {
 	const lang = locale ? locales?.[locale]?.lang : locales?.root?.lang;
 	const defaultLang = defaultLocale?.lang || defaultLocale?.locale;
-	return lang || defaultLang || 'en';
+	return lang || defaultLang || BuiltInDefaultLocale.lang;
 }
 
 type BuiltInStrings = (typeof builtinTranslations)['en'];

package/utils/i18n.ts

@@ -1,3 +1,166 @@
+import type { AstroConfig } from 'astro';
+import { AstroError } from 'astro/errors';
+import type { StarlightConfig } from './user-config';
+
+/** Informations about the built-in default locale used as a fallback when no locales are defined. */
+export const BuiltInDefaultLocale = { ...getLocaleInfo('en'), lang: 'en' };
+
+/**
+ * Processes the Astro and Starlight i18n configurations to generate/update them accordingly:
+ *
+ * 	- If no Astro and Starlight i18n configurations are provided, the built-in default locale is
+ * used in Starlight and the generated Astro i18n configuration will match it.
+ * 	- If only a Starlight i18n configuration is provided, an equivalent Astro i18n configuration is
+ * generated.
+ * 	- If only an Astro i18n configuration is provided, an equivalent Starlight i18n configuration is
+ * used.
+ * 	- If both an Astro and Starlight i18n configurations are provided, an error is thrown.
+ */
+export function processI18nConfig(
+	starlightConfig: StarlightConfig,
+	astroI18nConfig: AstroConfig['i18n']
+) {
+	// We don't know what to do if both an Astro and Starlight i18n configuration are provided.
+	if (astroI18nConfig && !starlightConfig.isUsingBuiltInDefaultLocale) {
+		throw new AstroError(
+			'Cannot provide both an Astro `i18n` configuration and a Starlight `locales` configuration.',
+			'Remove one of the two configurations.\nSee more at https://starlight.astro.build/guides/i18n/'
+		);
+	} else if (astroI18nConfig) {
+		// If a Starlight compatible Astro i18n configuration is provided, we generate the matching
+		// Starlight configuration.
+		return {
+			astroI18nConfig,
+			starlightConfig: {
+				...starlightConfig,
+				...getStarlightI18nConfig(astroI18nConfig),
+			} as StarlightConfig,
+		};
+	}
+	// Otherwise, we generate the Astro i18n configuration based on the Starlight configuration.
+	return { astroI18nConfig: getAstroI18nConfig(starlightConfig), starlightConfig: starlightConfig };
+}
+
+/** Generate an Astro i18n configuration based on a Starlight configuration. */
+function getAstroI18nConfig(config: StarlightConfig): NonNullable<AstroConfig['i18n']> {
+	return {
+		defaultLocale:
+			config.defaultLocale.lang ?? config.defaultLocale.locale ?? BuiltInDefaultLocale.lang,
+		locales: config.locales
+			? Object.entries(config.locales).map(([locale, localeConfig]) => {
+					return {
+						codes: [localeConfig?.lang ?? locale],
+						path: locale === 'root' ? localeConfig?.lang ?? BuiltInDefaultLocale.lang : locale,
+					};
+			  })
+			: [BuiltInDefaultLocale.lang],
+		routing: {
+			prefixDefaultLocale:
+				// Sites with multiple languages without a root locale.
+				(config.isMultilingual && config.locales?.root === undefined) ||
+				// Sites with a single non-root language different from the built-in default locale.
+				(!config.isMultilingual && config.locales !== undefined),
+			redirectToDefaultLocale: false,
+		},
+	};
+}
+
+/** Generate a Starlight i18n configuration based on an Astro configuration. */
+function getStarlightI18nConfig(
+	astroI18nConfig: NonNullable<AstroConfig['i18n']>
+): Pick<StarlightConfig, 'isMultilingual' | 'locales' | 'defaultLocale'> {
+	if (astroI18nConfig.routing === 'manual') {
+		throw new AstroError(
+			'Starlight is not compatible with the `manual` routing option in the Astro i18n configuration.'
+		);
+	}
+
+	const prefixDefaultLocale = astroI18nConfig.routing.prefixDefaultLocale;
+	const isMultilingual = astroI18nConfig.locales.length > 1;
+	const isMonolingualWithRootLocale = !isMultilingual && !prefixDefaultLocale;
+
+	const locales = isMonolingualWithRootLocale
+		? undefined
+		: Object.fromEntries(
+				astroI18nConfig.locales.map((locale) => [
+					isDefaultAstroLocale(astroI18nConfig, locale) && !prefixDefaultLocale
+						? 'root'
+						: isAstroLocaleExtendedConfig(locale)
+						? locale.path
+						: locale,
+					inferStarlightLocaleFromAstroLocale(locale),
+				])
+		  );
+
+	const defaultAstroLocale = astroI18nConfig.locales.find((locale) =>
+		isDefaultAstroLocale(astroI18nConfig, locale)
+	);
+
+	// This should never happen as Astro validation should prevent this case.
+	if (!defaultAstroLocale) {
+		throw new AstroError(
+			'Astro default locale not found.',
+			'This should never happen. Please open a new issue: https://github.com/withastro/starlight/issues/new?template=---01-bug-report.yml'
+		);
+	}
+
+	return {
+		isMultilingual,
+		locales,
+		defaultLocale: {
+			...inferStarlightLocaleFromAstroLocale(defaultAstroLocale),
+			locale: isMonolingualWithRootLocale
+				? undefined
+				: isAstroLocaleExtendedConfig(defaultAstroLocale)
+				? defaultAstroLocale.codes[0]
+				: defaultAstroLocale,
+		},
+	};
+}
+
+/** Infer Starlight locale informations based on a locale from an Astro i18n configuration. */
+function inferStarlightLocaleFromAstroLocale(astroLocale: AstroLocale) {
+	const lang = isAstroLocaleExtendedConfig(astroLocale) ? astroLocale.codes[0] : astroLocale;
+	return { ...getLocaleInfo(lang), lang };
+}
+
+/** Check if the passed locale is the default locale in an Astro i18n configuration. */
+function isDefaultAstroLocale(
+	astroI18nConfig: NonNullable<AstroConfig['i18n']>,
+	locale: AstroLocale
+) {
+	return (
+		(isAstroLocaleExtendedConfig(locale) ? locale.path : locale) === astroI18nConfig.defaultLocale
+	);
+}
+
+/**
+ * Check if the passed Astro locale is using the object variant.
+ * @see AstroLocaleExtendedConfig
+ */
+function isAstroLocaleExtendedConfig(locale: AstroLocale): locale is AstroLocaleExtendedConfig {
+	return typeof locale !== 'string';
+}
+
+/** Returns the locale informations such as a label and a direction based on a BCP-47 tag. */
+function getLocaleInfo(lang: string) {
+	try {
+		const locale = new Intl.Locale(lang);
+		const label = new Intl.DisplayNames(locale, { type: 'language' }).of(lang);
+		if (!label || lang === label) throw new Error('Label not found.');
+		return {
+			label: label[0]?.toLocaleUpperCase(locale) + label.slice(1),
+			// @ts-expect-error - `textInfo` is not part of the `Intl.Locale` type but is available in Node.js 18.0.0+.
+			dir: locale.textInfo.direction as 'ltr' | 'rtl',
+		};
+	} catch (error) {
+		throw new AstroError(
+			`Failed to get locale informations for the '${lang}' locale.`,
+			'Make sure to provide a valid BCP-47 tags (e.g. en, ar, or zh-CN).'
+		);
+	}
+}
+
 /**
  * Get the string for the passed language from a dictionary object.
  *
@@ -14,3 +177,6 @@ export function pickLang<T extends Record<string, string>>(
 ): string | undefined {
 	return dictionary[lang];
 }
+
+type AstroLocale = NonNullable<AstroConfig['i18n']>['locales'][number];
+type AstroLocaleExtendedConfig = Exclude<AstroLocale, string>;

package/utils/routing.ts

@@ -9,6 +9,7 @@ import {
 	slugToParam,
 } from './slugs';
 import { validateLogoImports } from './validateLogoImports';
+import { BuiltInDefaultLocale } from './i18n';
 
 // Validate any user-provided logos imported correctly.
 // We do this here so all pages trigger it and at the top level so it runs just once.
@@ -86,7 +87,7 @@ function getRoutes(): Route[] {
 					slug,
 					id,
 					isFallback: true,
-					lang: localeConfig.lang || 'en',
+					lang: localeConfig.lang || BuiltInDefaultLocale.lang,
 					locale,
 					dir: localeConfig.dir,
 					entryMeta: slugToLocaleData(fallback.slug),

package/utils/slugs.ts

@@ -1,4 +1,5 @@
 import config from 'virtual:starlight/user-config';
+import { BuiltInDefaultLocale } from './i18n';
 
 export interface LocaleData {
 	/** Writing direction. */
@@ -35,7 +36,7 @@ export function slugToLocaleData(slug: string): LocaleData {
 export function localeToLang(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';
+	return lang || defaultLang || BuiltInDefaultLocale.lang;
 }
 
 /**

package/utils/user-config.ts

@@ -9,6 +9,7 @@ import { SidebarItemSchema } from '../schemas/sidebar';
 import { SocialLinksSchema } from '../schemas/social';
 import { TableOfContentsSchema } from '../schemas/tableOfContents';
 import { TitleConfigSchema, TitleTransformConfigSchema } from '../schemas/site-title';
+import { BuiltInDefaultLocale } from './i18n';
 
 const LocaleSchema = z.object({
 	/** The label for this language to show in UI, e.g. `"English"`, `"العربية"`, or `"简体中文"`. */
@@ -207,6 +208,12 @@ const UserConfigSchema = z.object({
 
 	/** Disable Starlight's default 404 page. */
 	disable404Route: z.boolean().default(false).describe("Disable Starlight's default 404 page."),
+
+	/** Enable displaying a “Built with Starlight” link in your site’s footer. */
+	credits: z
+		.boolean()
+		.default(false)
+		.describe('Enable displaying a “Built with Starlight” link in your site’s footer.'),
 });
 
 export const StarlightConfigSchema = UserConfigSchema.strict().transform(
@@ -244,6 +251,8 @@ export const StarlightConfigSchema = UserConfigSchema.strict().transform(
 				title: parsedTitle,
 				/** Flag indicating if this site has multiple locales set up. */
 				isMultilingual: configuredLocales.length > 1,
+				/** Flag indicating if the Starlight built-in default locale is used. */
+				isUsingBuiltInDefaultLocale: false,
 				/** Full locale object for this site’s default language. */
 				defaultLocale: { ...defaultLocaleConfig, locale: defaultLocale },
 				locales,
@@ -254,9 +263,9 @@ export const StarlightConfigSchema = UserConfigSchema.strict().transform(
 		// pretty simple.
 		/** Full locale object for this site’s default language. */
 		const defaultLocaleConfig = {
-			label: 'English',
-			lang: 'en',
-			dir: 'ltr' as const,
+			label: BuiltInDefaultLocale.label,
+			lang: BuiltInDefaultLocale.lang,
+			dir: BuiltInDefaultLocale.dir,
 			locale: undefined,
 			...locales?.root,
 		};
@@ -268,6 +277,8 @@ export const StarlightConfigSchema = UserConfigSchema.strict().transform(
 			title: parsedTitle,
 			/** Flag indicating if this site has multiple locales set up. */
 			isMultilingual: false,
+			/** Flag indicating if the Starlight built-in default locale is used. */
+			isUsingBuiltInDefaultLocale: locales?.root === undefined,
 			defaultLocale: defaultLocaleConfig,
 			locales: undefined,
 		} as const;

package/components/Badge.astro

@@ -1,87 +0,0 @@
----
-import type { Badge } from '../schemas/badge';
-
-interface Props {
-	variant?: Badge['variant'] | 'outline';
-	text?: string;
-}
-const { variant = 'default', text } = Astro.props;
----
-
-<span class:list={['sl-badge', variant]} set:html={text} />
-
-<style>
-	.sl-badge {
-		display: inline-block;
-		border: 1px solid var(--sl-color-border-badge);
-		border-radius: 0.25rem;
-		font-family: var(--sl-font-system-mono);
-		font-size: var(--sl-text-xs);
-		font-weight: 400;
-		padding: 0.125rem 0.375rem;
-		line-height: 1;
-		color: #fff;
-		background-color: var(--sl-color-bg-badge);
-		overflow-wrap: anywhere;
-	}
-
-	.outline {
-		--sl-color-bg-badge: transparent;
-		--sl-color-border-badge: currentColor;
-		color: inherit;
-	}
-
-	.default {
-		--sl-color-bg-badge: var(--sl-color-accent-low);
-		--sl-color-border-badge: var(--sl-color-accent);
-	}
-
-	.note {
-		--sl-color-bg-badge: var(--sl-color-blue-low);
-		--sl-color-border-badge: var(--sl-color-blue);
-	}
-
-	.danger {
-		--sl-color-bg-badge: var(--sl-color-red-low);
-		--sl-color-border-badge: var(--sl-color-red);
-	}
-
-	.success {
-		--sl-color-bg-badge: var(--sl-color-green-low);
-		--sl-color-border-badge: var(--sl-color-green);
-	}
-
-	.caution {
-		--sl-color-bg-badge: var(--sl-color-orange-low);
-		--sl-color-border-badge: var(--sl-color-orange);
-	}
-
-	.tip {
-		--sl-color-bg-badge: var(--sl-color-purple-low);
-		--sl-color-border-badge: var(--sl-color-purple);
-	}
-
-	:global([data-theme='light']) .default {
-		--sl-color-bg-badge: var(--sl-color-accent-high);
-	}
-
-	:global([data-theme='light']) .note {
-		--sl-color-bg-badge: var(--sl-color-blue-high);
-	}
-
-	:global([data-theme='light']) .danger {
-		--sl-color-bg-badge: var(--sl-color-red-high);
-	}
-
-	:global([data-theme='light']) .success {
-		--sl-color-bg-badge: var(--sl-color-green-high);
-	}
-
-	:global([data-theme='light']) .caution {
-		--sl-color-bg-badge: var(--sl-color-orange-high);
-	}
-
-	:global([data-theme='light']) .tip {
-		--sl-color-bg-badge: var(--sl-color-purple-high);
-	}
-</style>