Skip to content

Commit

Permalink
Merge branch 'main' into hd-refactor-astro-i18n
Browse files Browse the repository at this point in the history
* 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)
  • Loading branch information
HiDeoo committed May 8, 2024
2 parents f8e36b2 + 0e4d04e commit c193d55
Show file tree
Hide file tree
Showing 31 changed files with 655 additions and 55 deletions.
5 changes: 5 additions & 0 deletions .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
5 changes: 4 additions & 1 deletion .gitignore
Expand Up @@ -18,4 +18,7 @@ pnpm-debug.log*
__coverage__/

# Vercel output
.vercel
.vercel

# Created by @astrojs/check
/src/
6 changes: 3 additions & 3 deletions docs/src/content/docs/zh-cn/getting-started.mdx
Expand Up @@ -15,7 +15,7 @@ Starlight 是一个基于 [Astro](https://astro.build) 框架构建的全功能

在你的终端中运行以下命令来创建一个新的 Astro + Starlight 项目:

<Tabs>
<Tabs syncKey="pkg">
<TabItem label="npm">

```sh
Expand Down Expand Up @@ -52,7 +52,7 @@ yarn create astro --template starlight

在你的项目目录中,运行以下命令来启动开发服务器:

<Tabs>
<Tabs syncKey="pkg">
<TabItem label="npm">

```sh
Expand Down Expand Up @@ -104,7 +104,7 @@ Starlight 已经准备好让你添加新内容或导入你现有的文件!

Starlight 是一个 Astro 集成。你可以通过在终端中运行以下命令来更新它和其他 Astro 软件包:

<Tabs>
<Tabs syncKey="pkg">
<TabItem label="npm">

```sh
Expand Down
44 changes: 44 additions & 0 deletions docs/src/content/docs/zh-cn/guides/components.mdx
Expand Up @@ -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';
Expand Down
6 changes: 3 additions & 3 deletions docs/src/content/docs/zh-cn/guides/css-and-tailwind.mdx
Expand Up @@ -63,7 +63,7 @@ Starlight Tailwind 插件应用了以下配置:

使用 `create astro` 创建一个预配置了 Tailwind CSS 的新 Starlight 项目:

<Tabs>
<Tabs syncKey="pkg">
<TabItem label="npm">

```sh
Expand Down Expand Up @@ -95,7 +95,7 @@ yarn create astro --template starlight/tailwind

1. 将 Astro 的 Tailwind 集成添加到项目中:

<Tabs>
<Tabs syncKey="pkg">

<TabItem label="npm">

Expand Down Expand Up @@ -125,7 +125,7 @@ yarn create astro --template starlight/tailwind

2. 安装 Starlight Tailwind 插件:

<Tabs>
<Tabs syncKey="pkg">

<TabItem label="npm">

Expand Down
6 changes: 3 additions & 3 deletions docs/src/content/docs/zh-cn/guides/customization.mdx
Expand Up @@ -128,7 +128,7 @@ Starlight 在每个页面上显示目录,使读者更容易跳转到他们正

默认情况下,目录中包含 `<h2>``<h3>` 标题。使用全局 `tableOfContents` 中的 `minHeadingLevel``maxHeadingLevel` 选项更改要包含的标题级别。通过添加相应的 frontmatter 中的 `tableOfContents` 属性,在单个页面上覆盖这些默认值:

<Tabs>
<Tabs syncKey="config-type">
<TabItem label="Frontmatter">

```md {4-6}
Expand Down Expand Up @@ -162,8 +162,8 @@ defineConfig({

通过将 `tableOfContents` 选项设置为 `false` 来完全禁用目录:

<Tabs>
<TabItem label=" frontmatter ">
<Tabs syncKey="config-type">
<TabItem label="Frontmatter ">

```md {4}
---
Expand Down
28 changes: 28 additions & 0 deletions docs/src/content/docs/zh-cn/guides/i18n.mdx
Expand Up @@ -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';
Expand Down
1 change: 1 addition & 0 deletions docs/src/content/docs/zh-cn/guides/pages.mdx
Expand Up @@ -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`

Expand Down
14 changes: 13 additions & 1 deletion docs/src/content/docs/zh-cn/reference/configuration.mdx
Expand Up @@ -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`
Expand Down
15 changes: 15 additions & 0 deletions docs/src/content/docs/zh-cn/reference/frontmatter.md
Expand Up @@ -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)
Expand Down
14 changes: 13 additions & 1 deletion docs/src/content/docs/zh-cn/reference/overrides.md
Expand Up @@ -50,6 +50,12 @@ Starlight 会将以下参数传递给你的自定义组件。

当前语言的根路径。对于默认语言来说是 `undefined`

#### `siteTitle`

**类型:** `string`

根据页面语言设置的网站标题。

#### `slug`

**类型:** `string`
Expand Down Expand Up @@ -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`

Expand Down Expand Up @@ -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)
Expand Down
5 changes: 5 additions & 0 deletions docs/src/content/docs/zh-cn/resources/community-content.mdx
Expand Up @@ -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 网站内的子目录项目',
},
]}
/>
2 changes: 1 addition & 1 deletion examples/basics/package.json
Expand Up @@ -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"
}
Expand Down
2 changes: 1 addition & 1 deletion examples/tailwind/package.json
Expand Up @@ -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",
Expand Down
3 changes: 2 additions & 1 deletion package.json
Expand Up @@ -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",
Expand Down
1 change: 1 addition & 0 deletions packages/starlight/404.astro
Expand Up @@ -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,
Expand Down
8 changes: 8 additions & 0 deletions 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
Expand Down
Expand Up @@ -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>
23 changes: 23 additions & 0 deletions packages/starlight/__e2e__/tabs.test.ts
Expand Up @@ -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);
Expand Down

0 comments on commit c193d55

Please sign in to comment.