Merge branch 'main' into hd-refactor-astro-i18n

* main: i18n(zh-cn): Update docs about synced-tabs (withastro#1834) i18n(zh-cn): Update some docs about withastro#1620 & withastro#1613 (withastro#1835) Add more diagnostic help to error messages thrown by `<Steps>` (withastro#1838) i18n(zh-cn): Update components.mdx (withastro#1836) i18n(zh-cn): Update community-content.mdx (withastro#1833) Improve type checking job (withastro#1831) [ci] format [ci] release (withastro#1832) i18n(ru): update ru.json (withastro#1826) Fix `<Tabs>` sync issue with inconsistent use of `icon` on `<TabItem>` components (withastro#1811) Enable `BASE_URL` tests (withastro#1828)
HiDeoo · May 8, 2024 · c193d55 · c193d55
2 parents f8e36b2 + 0e4d04e
commit c193d55
Show file tree

Hide file tree

Showing 31 changed files with 655 additions and 55 deletions.
diff --git a/.changeset/breezy-cats-taste.md b/.changeset/breezy-cats-taste.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/starlight': patch
+---
+
+Adds extra information to the errors thrown by the `<Steps>` component to help locate misformatted code
diff --git a/.gitignore b/.gitignore
@@ -18,4 +18,7 @@ pnpm-debug.log*
 __coverage__/
 
 # Vercel output
-.vercel
+.vercel
+
+# Created by @astrojs/check
+/src/
diff --git a/docs/src/content/docs/zh-cn/getting-started.mdx b/docs/src/content/docs/zh-cn/getting-started.mdx
@@ -15,7 +15,7 @@ Starlight 是一个基于 [Astro](https://astro.build) 框架构建的全功能
 
 在你的终端中运行以下命令来创建一个新的 Astro + Starlight 项目：
 
-<Tabs>
+<Tabs syncKey="pkg">
 <TabItem label="npm">
 
 ```sh
@@ -52,7 +52,7 @@ yarn create astro --template starlight
 
 在你的项目目录中，运行以下命令来启动开发服务器：
 
-<Tabs>
+<Tabs syncKey="pkg">
 <TabItem label="npm">
 
 ```sh
@@ -104,7 +104,7 @@ Starlight 已经准备好让你添加新内容或导入你现有的文件！
 
 Starlight 是一个 Astro 集成。你可以通过在终端中运行以下命令来更新它和其他 Astro 软件包：
 
-<Tabs>
+<Tabs syncKey="pkg">
 <TabItem label="npm">
 
 ```sh

diff --git a/docs/src/content/docs/zh-cn/guides/components.mdx b/docs/src/content/docs/zh-cn/guides/components.mdx
@@ -86,6 +86,50 @@ import { Tabs, TabItem } from '@astrojs/starlight/components';
 	</TabItem>
 </Tabs>
 
+#### 同步选项卡
+
+通过添加 `syncKey` 属性来保持多个选项卡组同步。
+
+页面上拥有相同的 `syncKey` 值的所有 `<Tabs>` 都将展示相同的活动标签。这使得你的读者只需选择一次（例如他们的操作系统或包管理器），就可以看到他们的选择反映在整个页面中。
+
+若要同步相关的选项卡，请为每个 `<Tabs>` 组件添加相同的 `syncKey` 属性，并确保它们都使用相同的 `<TabItem>` 标签：
+
+```mdx 'syncKey="constellations"'
+# src/content/docs/example.mdx
+
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+
+_一些星座:_
+
+<Tabs syncKey="星座">
+	<TabItem label="猎户座">Bellatrix, Rigel, Betelgeuse</TabItem>
+	<TabItem label="双子座">Pollux, Castor A, Castor B</TabItem>
+</Tabs>
+
+_一些系外行星:_
+
+<Tabs syncKey="星座">
+	<TabItem label="猎户座">HD 34445 b, Gliese 179 b, Wasp-82 b</TabItem>
+	<TabItem label="双子座">Pollux b, HAT-P-24b, HD 50554 b</TabItem>
+</Tabs>
+```
+
+以上代码在页面上生成了以下内容：
+
+_一些星座:_
+
+<Tabs syncKey="星座">
+	<TabItem label="猎户座">Bellatrix, Rigel, Betelgeuse</TabItem>
+	<TabItem label="双子座">Pollux, Castor A, Castor B</TabItem>
+</Tabs>
+
+_一些系外行星:_
+
+<Tabs syncKey="星座">
+	<TabItem label="猎户座">HD 34445 b, Gliese 179 b, Wasp-82 b</TabItem>
+	<TabItem label="双子座">Pollux b, HAT-P-24b, HD 50554 b</TabItem>
+</Tabs>
+
 ### 卡片
 
 import { Card, CardGrid } from '@astrojs/starlight/components';

diff --git a/docs/src/content/docs/zh-cn/guides/css-and-tailwind.mdx b/docs/src/content/docs/zh-cn/guides/css-and-tailwind.mdx
@@ -63,7 +63,7 @@ Starlight Tailwind 插件应用了以下配置：
 
 使用 `create astro` 创建一个预配置了 Tailwind CSS 的新 Starlight 项目：
 
-<Tabs>
+<Tabs syncKey="pkg">
 <TabItem label="npm">
 
 ```sh
@@ -95,7 +95,7 @@ yarn create astro --template starlight/tailwind
 
 1. 将 Astro 的 Tailwind 集成添加到项目中：
 
-   <Tabs>
+   <Tabs syncKey="pkg">
 
    <TabItem label="npm">
 
@@ -125,7 +125,7 @@ yarn create astro --template starlight/tailwind
 
 2. 安装 Starlight Tailwind 插件：
 
-   <Tabs>
+   <Tabs syncKey="pkg">
 
    <TabItem label="npm">
 

diff --git a/docs/src/content/docs/zh-cn/guides/customization.mdx b/docs/src/content/docs/zh-cn/guides/customization.mdx
@@ -128,7 +128,7 @@ Starlight 在每个页面上显示目录，使读者更容易跳转到他们正
 
 默认情况下，目录中包含 `<h2>` 和 `<h3>` 标题。使用全局 `tableOfContents` 中的 `minHeadingLevel` 和 `maxHeadingLevel` 选项更改要包含的标题级别。通过添加相应的 frontmatter 中的 `tableOfContents` 属性，在单个页面上覆盖这些默认值：
 
-<Tabs>
+<Tabs syncKey="config-type">
   <TabItem label="Frontmatter">
 
 ```md {4-6}
@@ -162,8 +162,8 @@ defineConfig({
 
 通过将 `tableOfContents` 选项设置为 `false` 来完全禁用目录：
 
-<Tabs>
-  <TabItem label=" frontmatter ">
+<Tabs syncKey="config-type">
+  <TabItem label="Frontmatter ">
 
 ```md {4}
 ---

diff --git a/docs/src/content/docs/zh-cn/guides/i18n.mdx b/docs/src/content/docs/zh-cn/guides/i18n.mdx
@@ -143,6 +143,34 @@ Starlight 期望你在所有语言中创建等效的页面。例如，如果你
 
 如果某种语言尚未提供翻译，Starlight 将为读者显示该页面的默认语言（通过 `defaultLocale` 设置）的内容。例如，如果你尚未创建关于你的法语版本，并且你的默认语言是英语，那么访问 `/fr/about` 的访问者将看到来自 `/en/about` 的英语内容，并显示该页面尚未翻译的通知。这有助于你在默认语言中添加内容，然后在翻译人员有时间时逐步翻译它。
 
+## 翻译网站标题
+
+默认情况下，Starlight 会为所有语言使用相同的站点标题。
+如果你需要为每种语言自定义标题，你可以在 Starlight 的选项中将一个对象传递给 [`title`](/zh-cn/reference/configuration/#title-必填)：
+
+```diff lang="js"
+// astro.config.mjs
+import { defineConfig } from 'astro/config';
+import starlight from '@astrojs/starlight';
+
+export default defineConfig({
+	integrations: [
+		starlight({
+-			title: 'My Docs',
++			title: {
++				en: 'My Docs',
++				'zh-CN': '我的文档',
++			},
+			defaultLocale: 'en',
+			locales: {
+				en: { label: 'English' },
+				'zh-cn': { label: '简体中文', lang: 'zh-CN' },
+			},
+		}),
+	],
+});
+```
+
 ## 翻译 Starlight 的 UI
 
 import LanguagesList from '~/components/languages-list.astro';

diff --git a/docs/src/content/docs/zh-cn/guides/pages.mdx b/docs/src/content/docs/zh-cn/guides/pages.mdx
@@ -107,6 +107,7 @@ import CustomComponent from './CustomComponent.astro';
 - [`slug`](/zh-cn/reference/frontmatter/#slug) 属性不受支持，并且会根据自定义页面的 URL 自动设置。
 - [`editUrl`](/zh-cn/reference/frontmatter/#editurl) 选项需要一个 URL 来显示编辑链接。
 - 用于自定义页面如何在 [自动生成的链接组](/zh-cn/reference/configuration/#sidebar) 中显示的 [`sidebar`](/zh-cn/reference/frontmatter/#sidebar) frontmatter 属性不可用。使用 `<StarlightPage />` 组件的页面不是集合的一部分，不能添加到自动生成的侧边栏组中。
+- [`draft`](/zh-cn/reference/frontmatter/#draft) 选项仅会显示页面为草稿的 [通知](/zh-cn/reference/overrides/#draftcontentnotice)，但不会自动将其从生产版本中排除。
 
 ##### `sidebar`
 

diff --git a/docs/src/content/docs/zh-cn/reference/configuration.mdx b/docs/src/content/docs/zh-cn/reference/configuration.mdx
@@ -25,10 +25,22 @@ export default defineConfig({
 
 ### `title` (必填)
 
-**类型：** `string`
+**类型：** `string | Record<string, string>`
 
 设置你的网站标题。将用于元数据和浏览器标签标题。
 
+这个值可以是一个字符串，或者对于多语言网站，可以是一个包含每种不同语言值的对象。
+当使用对象形式时，键必须是 BCP-47 标签（例如 `en`，`ar` 或 `zh-CN`）：
+
+```ts
+starlight({
+	title: {
+		en: 'My delightful docs site',
+		de: 'Meine bezaubernde Dokumentationsseite',
+	},
+});
+```
+
 ### `description`
 
 **类型：** `string`

diff --git a/docs/src/content/docs/zh-cn/reference/frontmatter.md b/docs/src/content/docs/zh-cn/reference/frontmatter.md
@@ -267,6 +267,21 @@ pagefind: false
 ---
 ```
 
+### `draft`
+
+**类型：** `boolean`  
+**默认值：** `false`
+
+设置此页面是否应被视为草稿，并且不包含在 [生产版本](https://docs.astro.build/zh-cn/reference/cli-reference/#astro-build) 和 [自动生成的链接组](/zh-cn/guides/sidebar/#自动生成的分组) 中。设置为 `true` 可将页面标记为草稿，并使其仅在开发过程中可见。
+
+```md
+---
+# src/content/docs/example.md
+# 从生产版本中排除此页面
+draft: true
+---
+```
+
 ### `sidebar`
 
 **类型：** [`SidebarConfig`](#sidebarconfig)

diff --git a/docs/src/content/docs/zh-cn/reference/overrides.md b/docs/src/content/docs/zh-cn/reference/overrides.md
@@ -50,6 +50,12 @@ Starlight 会将以下参数传递给你的自定义组件。
 
 当前语言的根路径。对于默认语言来说是 `undefined`。
 
+#### `siteTitle`
+
+**类型：** `string`
+
+根据页面语言设置的网站标题。
+
 #### `slug`
 
 **类型：** `string`
@@ -218,7 +224,7 @@ entry: {
 **默认组件：** [`Header.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/components/Header.astro)
 
 在每个页面顶部显示的导航栏组件。
-默认实现显示了 [`<SiteTitle />`](#sitetitle)、[`<Search />`](#search)、[`<SocialIcons />`](#socialicons)、[`<ThemeSelect />`](#themeselect) 和 [`<LanguageSelect />`](#languageselect)。
+默认实现显示了 [`<SiteTitle />`](#sitetitle-1)、[`<Search />`](#search)、[`<SocialIcons />`](#socialicons)、[`<ThemeSelect />`](#themeselect) 和 [`<LanguageSelect />`](#languageselect)。
 
 #### `SiteTitle`
 
@@ -332,6 +338,12 @@ Starlight 的页面侧边栏负责显示当前页面的子标题的目录。
 
 自定义实现应确保在 `<h1>` 元素上设置 `id="_top"`，就像默认实现中一样。
 
+#### `DraftContentNotice`
+
+**默认组件：** [`DraftContentNotice.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/components/DraftContentNotice.astro)
+
+在开发过程中，当当前页面被标记为草稿时，向用户显示的通知。
+
 #### `FallbackContentNotice`
 
 **默认组件：** [`FallbackContentNotice.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/components/FallbackContentNotice.astro)

diff --git a/docs/src/content/docs/zh-cn/resources/community-content.mdx b/docs/src/content/docs/zh-cn/resources/community-content.mdx
@@ -124,5 +124,10 @@ import YouTubeGrid from '~/components/youtube-grid.astro';
 			title: 'Astro Starlight 文档模板（构建自定义 app 文档！）',
 			description: '在大约 5 分钟内启动并运行新的 Starlight 网站',
 		},
+		{
+			href: 'https://www.youtube.com/watch?v=12o7WxjAxjM',
+			title: '使用代理将 Starlight 文档包含在 Next.js 项目中',
+			description: '将 Starlight 设置为 Next.js 网站内的子目录项目',
+		},
 	]}
 />
diff --git a/examples/basics/package.json b/examples/basics/package.json
@@ -11,7 +11,7 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/starlight": "^0.22.1",
+    "@astrojs/starlight": "^0.22.2",
     "astro": "^4.4.5",
     "sharp": "^0.32.5"
   }

diff --git a/examples/tailwind/package.json b/examples/tailwind/package.json
@@ -11,7 +11,7 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/starlight": "^0.22.1",
+    "@astrojs/starlight": "^0.22.2",
     "@astrojs/starlight-tailwind": "^2.0.2",
     "@astrojs/tailwind": "^5.1.0",
     "astro": "^4.4.5",

diff --git a/package.json b/package.json
@@ -8,10 +8,11 @@
     "size": "size-limit",
     "version": "pnpm changeset version && pnpm i --no-frozen-lockfile",
     "format": "prettier -w --cache --plugin prettier-plugin-astro .",
-    "typecheck": "tsc -p tsconfig.typecheck.json"
+    "typecheck": "astro check"
   },
   "license": "MIT",
   "devDependencies": {
+    "@astrojs/check": "^0.5.10",
     "@changesets/changelog-github": "^0.4.8",
     "@changesets/cli": "^2.26.1",
     "@size-limit/file": "^8.2.4",

diff --git a/packages/starlight/404.astro b/packages/starlight/404.astro
@@ -31,6 +31,7 @@ const fallbackEntry: StarlightDocsEntry = {
 		hero: { tagline: t('404.text'), actions: [] },
 		pagefind: false,
 		sidebar: { hidden: false, attrs: {} },
+		draft: false,
 	},
 	render: async () => ({
 		Content: EmptyContent,

diff --git a/packages/starlight/CHANGELOG.md b/packages/starlight/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @astrojs/starlight
 
+## 0.22.2
+
+### Patch Changes
+
+- [#1811](https://github.com/withastro/starlight/pull/1811) [`fe06aa13`](https://github.com/withastro/starlight/commit/fe06aa1307208ef9f5b249181ec29837f96940c2) Thanks [@HiDeoo](https://github.com/HiDeoo)! - Fixes a `<Tabs>` sync issue when inconsistently using the `icon` prop or not on `<TabItem>` components.
+
+- [#1826](https://github.com/withastro/starlight/pull/1826) [`52ea7381`](https://github.com/withastro/starlight/commit/52ea7381e131338a03cffb3499ba1699951cea1e) Thanks [@dragomano](https://github.com/dragomano)! - Updates Russian UI translations
+
 ## 0.22.1
 
 ### Patch Changes

diff --git a/packages/starlight/__e2e__/fixtures/basics/src/content/docs/tabs.mdx b/packages/starlight/__e2e__/fixtures/basics/src/content/docs/tabs.mdx
@@ -35,3 +35,20 @@ A set of tabs using the `style` sync key.
 	<TabItem label="css">css code</TabItem>
 	<TabItem label="tailwind">tailwind code</TabItem>
 </Tabs>
+
+Another set of tabs using the `pkg` sync key and using icons.
+
+<Tabs syncKey="pkg">
+	<TabItem label="npm" icon="seti:npm">
+		another npm command
+	</TabItem>
+	<TabItem label="pnpm" icon="pnpm">
+		another pnpm command
+	</TabItem>
+	<TabItem label="bun" icon="bun">
+		another bun command
+	</TabItem>
+	<TabItem label="yarn" icon="seti:yarn">
+		another yarn command
+	</TabItem>
+</Tabs>
diff --git a/packages/starlight/__e2e__/tabs.test.ts b/packages/starlight/__e2e__/tabs.test.ts
@@ -116,6 +116,29 @@ test('preserves tabs position when alternating between tabs with different conte
 	expect((await tabs.boundingBox())?.y).toBe(initialBoundingBox?.y);
 });
 
+test('syncs tabs with the same sync key if they do not consistenly use icons', async ({
+	page,
+	starlight,
+}) => {
+	await starlight.goto('/tabs');
+
+	const tabs = page.locator('starlight-tabs');
+	const pkgTabsA = tabs.nth(0); // This set does not use icons for tab items.
+	const pkgTabsB = tabs.nth(4); // This set uses icons for tab items.
+
+	// Select the pnpm tab in the first set of synced tabs.
+	await pkgTabsA.getByRole('tab').filter({ hasText: 'pnpm' }).click();
+
+	await expectSelectedTab(pkgTabsA, 'pnpm', 'pnpm command');
+	await expectSelectedTab(pkgTabsB, 'pnpm', 'another pnpm command');
+
+	// Select the yarn tab in the second set of synced tabs.
+	await pkgTabsB.getByRole('tab').filter({ hasText: 'yarn' }).click();
+
+	await expectSelectedTab(pkgTabsB, 'yarn', 'another yarn command');
+	await expectSelectedTab(pkgTabsA, 'yarn', 'yarn command');
+});
+
 async function expectSelectedTab(tabs: Locator, label: string, panel: string) {
 	expect((await tabs.getByRole('tab', { selected: true }).textContent())?.trim()).toBe(label);
 	expect((await tabs.getByRole('tabpanel').textContent())?.trim()).toBe(panel);