From edfe43c9a1c2cd59e4d2212080d9d093c0edee0a Mon Sep 17 00:00:00 2001 From: Junseong Park Date: Thu, 19 Sep 2024 16:44:09 +0900 Subject: [PATCH 01/22] i18n(ko-KR): create `/reference/icons.mdx` (#2363) --- docs/src/content/docs/ko/reference/icons.mdx | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 docs/src/content/docs/ko/reference/icons.mdx diff --git a/docs/src/content/docs/ko/reference/icons.mdx b/docs/src/content/docs/ko/reference/icons.mdx new file mode 100644 index 00000000000..8b197a2a36e --- /dev/null +++ b/docs/src/content/docs/ko/reference/icons.mdx @@ -0,0 +1,19 @@ +--- +title: 아이콘 참조 +description: Starlight에서 사용할 수 있는 모든 아이콘에 대한 개요입니다. +--- + +Starlight는 `` 컴포넌트를 사용하여 콘텐츠에 표시할 수 있는 내장 아이콘 세트를 제공합니다. + +## 아이콘 사용 + +아이콘은 [``](/ko/components/icons/) 컴포넌트를 사용하여 표시할 수 있습니다. +또한 [카드](/ko/components/cards/)와 같은 다른 컴포넌트나 [히어로 액션](/ko/reference/frontmatter/#hero)과 같은 설정에서도 자주 사용됩니다. + +## 모든 아이콘 + +사용 가능한 모든 아이콘의 목록과 관련 이름이 아래에 나와 있습니다. 아이콘을 클릭하면 해당 이름을 클립보드에 복사할 수 있습니다. + +import IconsList from '~/components/icons-list.astro'; + + From e1c1253215c84820e8bea12319c1486e0aa2350e Mon Sep 17 00:00:00 2001 From: Junseong Park Date: Thu, 19 Sep 2024 16:49:56 +0900 Subject: [PATCH 02/22] i18n(ko-KR): update `authoring-content.mdx` (#2351) Co-authored-by: HiDeoo <494699+HiDeoo@users.noreply.github.com> --- docs/src/content/docs/ko/guides/authoring-content.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/content/docs/ko/guides/authoring-content.mdx b/docs/src/content/docs/ko/guides/authoring-content.mdx index 6e826fa4c9f..de4770edd35 100644 --- a/docs/src/content/docs/ko/guides/authoring-content.mdx +++ b/docs/src/content/docs/ko/guides/authoring-content.mdx @@ -389,7 +389,7 @@ Starlight는 목록 및 테이블과 같은 다른 모든 Markdown 작성 구문 ## 고급 Markdown 및 MDX 구성 -Starlight는 remark 및 rehype를 기반으로 구축된 Astro의 Markdown 및 MDX 렌더러를 사용합니다. Astro 구성 파일에 `remarkPlugins` 또는 `rehypePlugins`를 추가하여 사용자 정의 구문 및 동작에 대한 지원을 추가할 수 있습니다. 자세한 내용은 Astro 문서의 [Markdown 및 MDX 구성](https://docs.astro.build/ko/guides/markdown-content/#configuring-markdown-and-mdx)을 참조하세요. +Starlight는 remark 및 rehype를 기반으로 구축된 Astro의 Markdown 및 MDX 렌더러를 사용합니다. Astro 구성 파일에 `remarkPlugins` 또는 `rehypePlugins`를 추가하여 사용자 정의 구문 및 동작에 대한 지원을 추가할 수 있습니다. 자세한 내용은 Astro 문서의 [Markdown 플러그인](https://docs.astro.build/ko/guides/markdown-content/#markdown-플러그인)을 참조하세요. ## Markdoc From 160236828b43c89adf2ee5b0fb6d253d8b7fe0b0 Mon Sep 17 00:00:00 2001 From: Junseong Park Date: Thu, 19 Sep 2024 17:02:28 +0900 Subject: [PATCH 03/22] i18n(ko-KR): create `using-components.mdx` (#2362) Co-authored-by: HiDeoo <494699+HiDeoo@users.noreply.github.com> --- .../docs/ko/components/using-components.mdx | 94 +++++++++++++++++++ 1 file changed, 94 insertions(+) create mode 100644 docs/src/content/docs/ko/components/using-components.mdx diff --git a/docs/src/content/docs/ko/components/using-components.mdx b/docs/src/content/docs/ko/components/using-components.mdx new file mode 100644 index 00000000000..08582129ec2 --- /dev/null +++ b/docs/src/content/docs/ko/components/using-components.mdx @@ -0,0 +1,94 @@ +--- +title: 컴포넌트 사용 +description: Starlight와 함께 MDX 및 Markdoc에서 컴포넌트 사용. +sidebar: + order: 1 +--- + +컴포넌트를 사용하면 쉽고 일관되게 UI 조각이나 스타일을 재사용할 수 있습니다. +링크 카드나 YouTube 삽입 등을 예로 들 수 있습니다. +Starlight는 [MDX](https://mdxjs.com/) 및 [Markdoc](https://markdoc.dev/) 파일에서 컴포넌트 사용을 지원하며 사용할 수 있는 몇 가지 공통 컴포넌트를 제공합니다. + +[Astro 문서에서 컴포넌트 구축에 대해 자세히 알아보세요](https://docs.astro.build/ko/core-concepts/astro-components/). + +## MDX에서 컴포넌트 사용 + +MDX 파일에서 컴포넌트를 가져온 다음 JSX 태그로 렌더링하여 사용할 수 있습니다. +이는 HTML 태그처럼 보이지만 `import` 문에 있는 이름과 일치하는 대문자로 시작합니다. + +```mdx +--- +# src/content/docs/example.mdx +title: 내 문서에 오신 것을 환영합니다 +--- + +import { Icon } from '@astrojs/starlight/components'; +import CustomCard from '../../components/CustomCard.astro'; + + + +컴포넌트에는 **중첩된 콘텐츠**가 포함될 수도 있습니다. +``` + +Starlight는 Astro로 구동되므로 [지원되는 UI 프레임워크(React, Preact, Svelte, Vue, Solid, Alpine)](https://docs.astro.build/ko/core-concepts/framework-components/)로 빌드된 컴포넌트를 MDX 파일에 추가할 수 있습니다. +Astro 문서에서 [MDX에서 컴포넌트 사용](https://docs.astro.build/ko/guides/integrations-guide/mdx/#mdx에서-컴포넌트-사용)에 대해 자세히 알아보세요. + +## Markdoc에서 컴포넌트 사용 + +[Markdoc 설정 가이드](/ko/guides/authoring-content/#markdoc)에 따라 Markdoc에서 콘텐츠 작성에 대한 지원을 추가하세요. + +Starlight Markdoc 프리셋을 사용하면 Starlight의 내장 컴포넌트를 Markdoc의 `{% %}` 태그 구문과 함께 사용할 수 있습니다. +MDX와 달리 Markdoc에서는 컴포넌트를 가져올 필요가 없습니다. +다음 예시는 Starlight의 [카드 컴포넌트](/ko/components/cards/)를 Markdoc 파일에서 렌더링합니다: + +```markdoc +--- +# src/content/docs/example.mdoc +title: 내 문서에 오신 것을 환영합니다 +--- + +{% card title="별" icon="star" %} +시리우스, 베가, 베텔게우스 +{% /card %} +``` + +Markdoc 파일에서 컴포넌트를 사용하는 방법에 대한 자세한 내용은 [Astro Markdoc 통합 문서](https://docs.astro.build/ko/guides/integrations-guide/markdoc/#컴포넌트-렌더링)를 참조하세요. + +## 내장 컴포넌트 + +Starlight는 일반적인 문서 사용 사례를 위한 내장 컴포넌트를 제공합니다. +이러한 컴포넌트는 MDX 파일의 `@astrojs/starlight/components` 패키지와 Markdoc 파일의 [Starlight Markdoc 프리셋](/ko/guides/authoring-content/#markdoc)에서 사용할 수 있습니다. + +사용 가능한 컴포넌트 목록과 사용 방법은 사이드바를 참조하세요. + +## Starlight 스타일과의 호환성 + +Starlight는 요소 사이에 여백을 추가하는 등 Markdown 콘텐츠에 기본 스타일을 적용합니다. +이러한 스타일이 컴포넌트의 모양과 충돌하는 경우 컴포넌트에 `not-content` 클래스를 추가하여 비활성화하세요. + +```astro 'class="not-content"' +--- +// src/components/Example.astro +--- + +
+

Starlight의 기본 콘텐츠 스타일링의 영향을 받지 않습니다.

+
+``` + +## 컴포넌트 속성 + +컴포넌트 자체에서 내보내지 않더라도 컴포넌트에서 허용하는 `Props`를 참조하려면 `astro/types`의 [`ComponentProps`](https://docs.astro.build/ko/guides/typescript/#componentprops-타입) 타입을 사용합니다. +이는 기존 컴포넌트를 래핑하거나 확장할 때 유용할 수 있습니다. + +다음 예시는 `ComponentProps`를 사용하여 Starlight의 내장 `Icon` 컴포넌트가 허용하는 속성의 타입을 가져옵니다: + +```astro +--- +// src/components/Example.astro +import type { ComponentProps } from 'astro/types'; +import { Icon } from '@astrojs/starlight/icon'; + +type IconProps = ComponentProps; +--- +``` \ No newline at end of file From 5c7c39977a5b538f41a4bd1803655f3681661bf3 Mon Sep 17 00:00:00 2001 From: HiDeoo Date: Thu, 19 Sep 2024 08:03:04 +0000 Subject: [PATCH 04/22] [ci] format --- docs/src/content/docs/ko/components/using-components.mdx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/src/content/docs/ko/components/using-components.mdx b/docs/src/content/docs/ko/components/using-components.mdx index 08582129ec2..2521fa4247d 100644 --- a/docs/src/content/docs/ko/components/using-components.mdx +++ b/docs/src/content/docs/ko/components/using-components.mdx @@ -5,15 +5,15 @@ sidebar: order: 1 --- -컴포넌트를 사용하면 쉽고 일관되게 UI 조각이나 스타일을 재사용할 수 있습니다. -링크 카드나 YouTube 삽입 등을 예로 들 수 있습니다. +컴포넌트를 사용하면 쉽고 일관되게 UI 조각이나 스타일을 재사용할 수 있습니다. +링크 카드나 YouTube 삽입 등을 예로 들 수 있습니다. Starlight는 [MDX](https://mdxjs.com/) 및 [Markdoc](https://markdoc.dev/) 파일에서 컴포넌트 사용을 지원하며 사용할 수 있는 몇 가지 공통 컴포넌트를 제공합니다. [Astro 문서에서 컴포넌트 구축에 대해 자세히 알아보세요](https://docs.astro.build/ko/core-concepts/astro-components/). ## MDX에서 컴포넌트 사용 -MDX 파일에서 컴포넌트를 가져온 다음 JSX 태그로 렌더링하여 사용할 수 있습니다. +MDX 파일에서 컴포넌트를 가져온 다음 JSX 태그로 렌더링하여 사용할 수 있습니다. 이는 HTML 태그처럼 보이지만 `import` 문에 있는 이름과 일치하는 대문자로 시작합니다. ```mdx @@ -91,4 +91,4 @@ import { Icon } from '@astrojs/starlight/icon'; type IconProps = ComponentProps; --- -``` \ No newline at end of file +``` From 631c1c33500b53e6e925951d752d7d95704a4b6d Mon Sep 17 00:00:00 2001 From: Junseong Park Date: Thu, 19 Sep 2024 17:34:20 +0900 Subject: [PATCH 05/22] i18n(ko-KR): create `card-grid.mdx` (#2353) Co-authored-by: HiDeoo <494699+HiDeoo@users.noreply.github.com> --- .../content/docs/ko/components/card-grids.mdx | 173 ++++++++++++++++++ 1 file changed, 173 insertions(+) create mode 100644 docs/src/content/docs/ko/components/card-grids.mdx diff --git a/docs/src/content/docs/ko/components/card-grids.mdx b/docs/src/content/docs/ko/components/card-grids.mdx new file mode 100644 index 00000000000..f9775ebd621 --- /dev/null +++ b/docs/src/content/docs/ko/components/card-grids.mdx @@ -0,0 +1,173 @@ +--- +title: 카드 그리드 +description: Starlight에서 여러 카드를 그리드로 묶는 방법을 알아보세요. +sidebar: + order: 4 +--- + +import { Card, CardGrid, LinkCard } from '@astrojs/starlight/components'; + +여러 개의 [``](/ko/components/cards/) 또는 [``](/ko/components/link-cards/) 컴포넌트를 그리드에 래핑하려면 `` 컴포넌트를 사용합니다. + +import Preview from '~/components/component-preview.astro'; + + + + + + 시리우스, 베가, 베텔게우스 + + + 이오, 유로파, 가니메데 + + + + + +## 가져오기 + +```tsx +import { CardGrid } from '@astrojs/starlight/components'; +``` + +## 사용 + +### 카드 그룹화 + +충분한 공간이 있을 때 여러 개의 [``](/ko/components/cards/) 컴포넌트를 `` 컴포넌트로 그룹화하여 나란히 표시합니다. + + + +```mdx {3,10} +import { Card, CardGrid } from '@astrojs/starlight/components'; + + + + 강조하고 싶은 흥미로운 콘텐츠. + + + 공유하고 싶은 추가 정보. + + +``` + + + +```markdoc {1,9} +{% cardgrid %} +{% card title="확인하세요" icon="open-book" %} +강조하고 싶은 흥미로운 콘텐츠. +{% /card %} + +{% card title="기타 기능" icon="information" %} +공유하고 싶은 추가 정보. +{% /card %} +{% /cardgrid %} +``` + + + + + + 강조하고 싶은 흥미로운 콘텐츠. + + + 공유하고 싶은 추가 정보. + + + + + +### 링크 카드 그룹화 + +충분한 공간이 있을 때 여러 개의 [``](/ko/components/link-cards/) 컴포넌트를 `` 컴포넌트를 사용하여 그룹화하여 나란히 표시합니다. + + + +```mdx {3,6} +import { LinkCard, CardGrid } from '@astrojs/starlight/components'; + + + + + +``` + + + +```markdoc {1,5} +{% cardgrid %} +{% linkcard title="Markdown으로 콘텐츠 작성" href="/ko/guides/authoring-content/" /%} + +{% linkcard title="컴포넌트" href="/ko/components/using-components/" /%} +{% /cardgrid %} +``` + + + + + + + + + + +### 카드를 엇갈리게 배치 + +그리드의 두 번째 열을 수직으로 이동하여 시각적 흥미를 더하려면 `` 컴포넌트에 [`stagger`](#stagger) 속성을 추가합니다. + +이 속성은 홈 페이지에서 프로젝트의 주요 기능을 표시하는 데 유용합니다. + + + +```mdx "stagger" +import { Card, CardGrid } from '@astrojs/starlight/components'; + + + + 강조하고 싶은 흥미로운 콘텐츠. + + + 공유하고 싶은 추가 정보. + + +``` + + + +```markdoc "stagger=true" +{% cardgrid stagger=true %} +{% card title="확인하세요" icon="open-book" %} +강조하고 싶은 흥미로운 콘텐츠. +{% /card %} + +{% card title="기타 기능" icon="information" %} +공유하고 싶은 추가 정보. +{% /card %} +{% /cardgrid %} +``` + + + + + + 강조하고 싶은 흥미로운 콘텐츠. + + + 공유하고 싶은 추가 정보. + + + + + +## `` 속성 + +**구현:** [`CardGrid.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/user-components/CardGrid.astro) + +`` 컴포넌트는 다음과 같은 속성을 허용합니다: + +### `stagger` + +**타입:** `boolean` + +그리드에 카드를 엇갈리게 배치할지 여부를 정의합니다. \ No newline at end of file From 98f07dedb56a8d8c6eb5730b23342b3f9dd6b1d5 Mon Sep 17 00:00:00 2001 From: HiDeoo Date: Thu, 19 Sep 2024 08:35:02 +0000 Subject: [PATCH 06/22] [ci] format --- docs/src/content/docs/ko/components/card-grids.mdx | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/docs/src/content/docs/ko/components/card-grids.mdx b/docs/src/content/docs/ko/components/card-grids.mdx index f9775ebd621..7e4743fe5ac 100644 --- a/docs/src/content/docs/ko/components/card-grids.mdx +++ b/docs/src/content/docs/ko/components/card-grids.mdx @@ -14,7 +14,7 @@ import Preview from '~/components/component-preview.astro'; - + 시리우스, 베가, 베텔게우스 @@ -88,7 +88,10 @@ import { Card, CardGrid } from '@astrojs/starlight/components'; import { LinkCard, CardGrid } from '@astrojs/starlight/components'; - + ``` @@ -106,7 +109,10 @@ import { LinkCard, CardGrid } from '@astrojs/starlight/components'; - + @@ -170,4 +176,4 @@ import { Card, CardGrid } from '@astrojs/starlight/components'; **타입:** `boolean` -그리드에 카드를 엇갈리게 배치할지 여부를 정의합니다. \ No newline at end of file +그리드에 카드를 엇갈리게 배치할지 여부를 정의합니다. From a657d6d08b30ada405c72c9a1c33b9aeeb6bfa51 Mon Sep 17 00:00:00 2001 From: Junseong Park Date: Thu, 19 Sep 2024 17:42:20 +0900 Subject: [PATCH 07/22] i18n(ko-KR): create `cards.mdx` (#2354) Co-authored-by: HiDeoo <494699+HiDeoo@users.noreply.github.com> --- docs/src/content/docs/ko/components/cards.mdx | 108 ++++++++++++++++++ 1 file changed, 108 insertions(+) create mode 100644 docs/src/content/docs/ko/components/cards.mdx diff --git a/docs/src/content/docs/ko/components/cards.mdx b/docs/src/content/docs/ko/components/cards.mdx new file mode 100644 index 00000000000..269eddd9236 --- /dev/null +++ b/docs/src/content/docs/ko/components/cards.mdx @@ -0,0 +1,108 @@ +--- +title: 카드 +description: Starlight에서 카드를 사용하여 상자에 콘텐츠를 표시하는 방법을 알아보세요. +sidebar: + order: 2 +--- + +import { Card } from '@astrojs/starlight/components'; + +Starlight의 스타일과 일치하는 상자에 콘텐츠를 표시하려면 `` 컴포넌트를 사용합니다. + +import Preview from '~/components/component-preview.astro'; + + + + + 이오, 유로파, 가니메데 + + + + +## 가져오기 + +```tsx +import { Card } from '@astrojs/starlight/components'; +``` + +## 사용 + +`` 컴포넌트를 사용하여 카드를 표시하고 카드의 [`title`](#title)을 입력합니다. + + + +```mdx +import { Card } from '@astrojs/starlight/components'; + +강조하고 싶은 흥미로운 콘텐츠. +``` + + + +```markdoc +{% card title="확인하세요" %} +강조하고 싶은 흥미로운 콘텐츠. +{% /card %} +``` + + + + + 강조하고 싶은 흥미로운 콘텐츠. + + + + +### 카드에 아이콘 추가 + +[Starlight 내장 아이콘 중 하나](/ko/reference/icons/#모든-아이콘)의 이름으로 설정된 [`icon`](#icon) 속성을 사용하여 카드에 아이콘을 포함하세요. + + + +```mdx 'icon="star"' +import { Card } from '@astrojs/starlight/components'; + + + 시리우스, 베가, 베텔게우스 + +``` + + + +```markdoc 'icon="star"' +{% card title="별" icon="star" %} +시리우스, 베가, 베텔게우스 +{% /card %} +``` + + + + + 시리우스, 베가, 베텔게우스 + + + + +### 카드 그룹화 + +[``](/ko/components/card-grids/) 컴포넌트를 사용해 카드를 그룹화하여 공간이 충분할 때 여러 카드를 나란히 표시합니다. +예시는 [“카드 그룹화”](/ko/components/card-grids/#카드-그룹화) 가이드를 참조하세요. + +## `` 속성 + +**구현:** [`Card.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/user-components/Card.astro) + +`` 컴포넌트는 다음과 같은 속성을 허용합니다: + +### `title` + +**필수** +**타입:** `string` + +표시할 카드의 제목입니다. + +### `icon` + +**타입:** `string` + +카드에는 [Starlight 내장 아이콘 중 하나](/ko/reference/icons/#모든-아이콘)의 이름으로 설정된 `icon` 속성을 포함할 수 있습니다. \ No newline at end of file From cf0f0cd02145a4abb257b3607d2adad57dc87f0b Mon Sep 17 00:00:00 2001 From: HiDeoo Date: Thu, 19 Sep 2024 08:42:56 +0000 Subject: [PATCH 08/22] [ci] format --- docs/src/content/docs/ko/components/cards.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/content/docs/ko/components/cards.mdx b/docs/src/content/docs/ko/components/cards.mdx index 269eddd9236..cb58891aadd 100644 --- a/docs/src/content/docs/ko/components/cards.mdx +++ b/docs/src/content/docs/ko/components/cards.mdx @@ -105,4 +105,4 @@ import { Card } from '@astrojs/starlight/components'; **타입:** `string` -카드에는 [Starlight 내장 아이콘 중 하나](/ko/reference/icons/#모든-아이콘)의 이름으로 설정된 `icon` 속성을 포함할 수 있습니다. \ No newline at end of file +카드에는 [Starlight 내장 아이콘 중 하나](/ko/reference/icons/#모든-아이콘)의 이름으로 설정된 `icon` 속성을 포함할 수 있습니다. From e3b739f67d8933f44f88ee014eee18798a409776 Mon Sep 17 00:00:00 2001 From: Junseong Park Date: Thu, 19 Sep 2024 17:50:09 +0900 Subject: [PATCH 09/22] i18n(ko-KR): create `link-cards.mdx` (#2359) Co-authored-by: HiDeoo <494699+HiDeoo@users.noreply.github.com> --- .../content/docs/ko/components/link-cards.mdx | 125 ++++++++++++++++++ 1 file changed, 125 insertions(+) create mode 100644 docs/src/content/docs/ko/components/link-cards.mdx diff --git a/docs/src/content/docs/ko/components/link-cards.mdx b/docs/src/content/docs/ko/components/link-cards.mdx new file mode 100644 index 00000000000..523eba93be6 --- /dev/null +++ b/docs/src/content/docs/ko/components/link-cards.mdx @@ -0,0 +1,125 @@ +--- +title: 링크 카드 +description: Starlight에서 링크를 카드로 눈에 잘 띄게 표시하는 방법을 알아보세요. +sidebar: + order: 3 +--- + +import { LinkCard } from '@astrojs/starlight/components'; + +다른 페이지로 연결되는 링크를 눈에 잘 띄게 표시하려면 `` 컴포넌트를 사용하세요. + +import Preview from '~/components/component-preview.astro'; + + + + + + + +## 가져오기 + +```tsx +import { LinkCard } from '@astrojs/starlight/components'; +``` + +## 사용 + +`` 컴포넌트를 사용하여 링크를 눈에 잘 띄게 표시합니다. +각 ``에는 [`title`](#title) 및 [`href`](#href) 속성이 필요합니다. + + + +```mdx +import { LinkCard } from '@astrojs/starlight/components'; + + +``` + + + +```markdoc +{% linkcard title="Markdown으로 콘텐츠 작성" href="/ko/guides/authoring-content/" /%} +``` + + + + + + + +### 링크 설명 추가 + +[`description`](#description) 속성을 사용하여 링크 카드에 간단한 설명을 추가합니다. + + + +```mdx {6} +import { LinkCard } from '@astrojs/starlight/components'; + + +``` + + + +```markdoc {4} +{% linkcard + title="국제화" + href="/ko/guides/i18n/" + description="여러 언어를 지원하도록 Starlight를 구성합니다." /%} +``` + + + + + + + +### 링크 카드 그룹화 + +[``](/ko/components/card-grids/) 컴포넌트를 사용해 여러 개의 링크 카드를 그룹화하여 충분한 공간이 있을 때 나란히 표시합니다. +예시는 [“링크 카드 그룹화”](/ko/components/card-grids/#링크-카드-그룹화) 가이드를 참조하세요. + +## `` 속성 + +**구현:** [`LinkCard.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/user-components/LinkCard.astro) + +`` 컴포넌트는 다음 속성과 기타 [`` 요소의 속성](https://developer.mozilla.org/ko/docs/Web/HTML/Element/a)도 허용합니다: + +### `title` + +**필수** +**타입:** `string` + +표시할 링크 카드의 제목입니다. + +### `href` + +**필수** +**타입:** `string` + +카드와 상호 작용할 때 연결할 URL입니다. + +### `description` + +**타입:** `string` + +제목 아래에 표시할 설명 (선택 사항)입니다. \ No newline at end of file From 50bdbafe3cd14031c30cec9872ee434886a278f9 Mon Sep 17 00:00:00 2001 From: HiDeoo Date: Thu, 19 Sep 2024 08:50:48 +0000 Subject: [PATCH 10/22] [ci] format --- docs/src/content/docs/ko/components/link-cards.mdx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/docs/src/content/docs/ko/components/link-cards.mdx b/docs/src/content/docs/ko/components/link-cards.mdx index 523eba93be6..c4099553a87 100644 --- a/docs/src/content/docs/ko/components/link-cards.mdx +++ b/docs/src/content/docs/ko/components/link-cards.mdx @@ -38,7 +38,10 @@ import { LinkCard } from '@astrojs/starlight/components'; ```mdx import { LinkCard } from '@astrojs/starlight/components'; - + ``` @@ -122,4 +125,4 @@ import { LinkCard } from '@astrojs/starlight/components'; **타입:** `string` -제목 아래에 표시할 설명 (선택 사항)입니다. \ No newline at end of file +제목 아래에 표시할 설명 (선택 사항)입니다. From 1186f3f28f796df136c660678da6bc1821fa20a0 Mon Sep 17 00:00:00 2001 From: Junseong Park Date: Thu, 19 Sep 2024 17:58:17 +0900 Subject: [PATCH 11/22] i18n(ko-KR): create `badges.mdx` (#2352) Co-authored-by: HiDeoo <494699+HiDeoo@users.noreply.github.com> --- .../src/content/docs/ko/components/badges.mdx | 150 ++++++++++++++++++ 1 file changed, 150 insertions(+) create mode 100644 docs/src/content/docs/ko/components/badges.mdx diff --git a/docs/src/content/docs/ko/components/badges.mdx b/docs/src/content/docs/ko/components/badges.mdx new file mode 100644 index 00000000000..bd8c2da3910 --- /dev/null +++ b/docs/src/content/docs/ko/components/badges.mdx @@ -0,0 +1,150 @@ +--- +title: 배지 +description: Starlight에서 배지를 사용하여 추가 정보를 표시하는 방법을 알아보세요. +--- + +import { Badge } from '@astrojs/starlight/components'; + +상태나 카테고리와 같은 작은 정보를 표시하려면 `` 컴포넌트를 사용합니다. + +import Preview from '~/components/component-preview.astro'; + + + + + + + +## 가져오기 + +```tsx +import { Badge } from '@astrojs/starlight/components'; +``` + +## 사용 + +`` 컴포넌트를 사용하여 배지를 표시하고 표시할 콘텐츠를 `` 컴포넌트의 [`text`](#text) 속성에 전달합니다. + +기본적으로 배지는 사이트의 테마 강조 색상을 사용합니다. +기본적으로 제공되는 배지 색상을 사용하려면 [`variant`](#variant) 속성을 지원되는 값 중 하나로 설정하세요. + + + +```mdx +import { Badge } from '@astrojs/starlight/components'; + + + + + + +``` + + + +```markdoc +{% badge text="노트" variant="note" /%} +{% badge text="성공" variant="success" /%} +{% badge text="팁" variant="tip" /%} +{% badge text="주의" variant="caution" /%} +{% badge text="위험" variant="danger" /%} +``` + + + + + + + + + + + + + +### 다른 크기 사용 + +[`size`](#size) 속성을 사용하여 배지 텍스트의 크기를 조절할 수 있습니다. + + + +```mdx /size="\w+"/ +import { Badge } from '@astrojs/starlight/components'; + + + + +``` + + + +```markdoc /size="\w+"/ +{% badge text="새 항목" size="small" /%} +{% badge text="개선된 새 항목" size="medium" /%} +{% badge text="더 큰 개선된 새 항목" size="large" /%} +``` + + + + + + + + + + + +### 배지 사용자 정의 + +`class` 또는 `style`과 같은 다른 `` 속성을 사용자 정의 CSS와 함께 사용하여 배지를 사용자 정의합니다. + + + +```mdx "style={{ fontStyle: 'italic' }}" +import { Badge } from '@astrojs/starlight/components'; + + +``` + + + +```markdoc 'style="font-style: italic;"' +{% badge text="사용자 정의" variant="success" style="font-style: italic;" /%} +``` + + + + + + + +## `` 속성 + +**구현:** [`Badge.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/user-components/Badge.astro) + +`` 컴포넌트는 다음 속성과 [기타 `` 속성](https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes)도 허용합니다: + +### `text` + +**필수** +**타입:** `string` + +배지에 표시할 텍스트 콘텐츠입니다. + +### `variant` + +**타입:** `'note' | 'danger' | 'success' | 'caution' | 'tip' | 'default'` +**기본값:** `'default'` + +사용할 배지 색상 변형: `note` (파란색), `tip` (보라색), `danger` (빨간색), `caution` (오렌지색), `success` (초록색), `default` (테마 강조 색상). + +### `size` + +**타입:** `'small' | 'medium' | 'large'` + +표시할 배지의 크기를 정의합니다. \ No newline at end of file From 28fa2b8ede7130069409b55b101790fa5097d5cd Mon Sep 17 00:00:00 2001 From: HiDeoo Date: Thu, 19 Sep 2024 08:58:53 +0000 Subject: [PATCH 12/22] [ci] format --- docs/src/content/docs/ko/components/badges.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/content/docs/ko/components/badges.mdx b/docs/src/content/docs/ko/components/badges.mdx index bd8c2da3910..fcab703d7f7 100644 --- a/docs/src/content/docs/ko/components/badges.mdx +++ b/docs/src/content/docs/ko/components/badges.mdx @@ -147,4 +147,4 @@ import { Badge } from '@astrojs/starlight/components'; **타입:** `'small' | 'medium' | 'large'` -표시할 배지의 크기를 정의합니다. \ No newline at end of file +표시할 배지의 크기를 정의합니다. From 34486b089343addeea2a527dbc4f96159f0546db Mon Sep 17 00:00:00 2001 From: Junseong Park Date: Thu, 19 Sep 2024 18:17:53 +0900 Subject: [PATCH 13/22] i18n(ko-KR): create `file-tree.mdx` (#2356) Co-authored-by: HiDeoo <494699+HiDeoo@users.noreply.github.com> --- .../content/docs/ko/components/file-tree.mdx | 225 ++++++++++++++++++ 1 file changed, 225 insertions(+) create mode 100644 docs/src/content/docs/ko/components/file-tree.mdx diff --git a/docs/src/content/docs/ko/components/file-tree.mdx b/docs/src/content/docs/ko/components/file-tree.mdx new file mode 100644 index 00000000000..2555da74819 --- /dev/null +++ b/docs/src/content/docs/ko/components/file-tree.mdx @@ -0,0 +1,225 @@ +--- +title: 파일 트리 +description: Starlight에서 파일 아이콘과 접을 수 있는 하위 디렉터리를 사용하여 디렉터리 구조를 표시하는 방법을 알아보세요. +--- + +import { FileTree } from '@astrojs/starlight/components'; + +파일 아이콘과 접을 수 있는 하위 디렉터리가 있는 디렉터리의 구조를 표시하려면 `` 컴포넌트를 사용하세요. + +import Preview from '~/components/component-preview.astro'; + + + + + +- astro.config.mjs **중요** 파일 +- package.json +- README.md +- src + - components + - **Header.astro** + - … +- pages/ + + + + + +## 가져오기 + +```tsx +import { FileTree } from '@astrojs/starlight/components'; +``` + +## 사용 + +`` 컴포넌트를 사용하여 파일 아이콘과 접을 수 있는 하위 디렉터리가 있는 파일 트리를 표시합니다. + +``에서 [순서가 지정되지 않은 Markdown 목록](https://www.markdownguide.org/basic-syntax/#unordered-lists)을 사용하여 파일 및 디렉터리의 구조를 지정하세요. +중첩된 목록을 사용하여 하위 디렉터리를 생성하거나 목록 항목 끝에 `/`를 추가하여 특정 내용이 없는 디렉터리로 렌더링합니다. + + + +```mdx +import { FileTree } from '@astrojs/starlight/components'; + + + +- astro.config.mjs +- package.json +- src + - components + - Header.astro + - Title.astro + - pages/ + + +``` + + + +```markdoc +{% filetree %} +- astro.config.mjs +- package.json +- src + - components + - Header.astro + - Title.astro + - pages/ +{% /filetree %} +``` + + + + + +- astro.config.mjs +- package.json +- src + - components + - Header.astro + - Title.astro + - pages/ + + + + + +### 항목 강조 표시 + +파일이나 디렉터리의 이름을 굵은 글씨로 만들어 눈에 띄게 만드세요 (예: `**README.md**`). + + + +```mdx {7} +import { FileTree } from '@astrojs/starlight/components'; + + + +- src + - components + - **Header.astro** + - Title.astro + + +``` + + + +```markdoc {4} +{% filetree %} +- src + - components + - **Header.astro** + - Title.astro +{% /filetree %} +``` + + + + + +- src + - components + - **Header.astro** + - Title.astro + + + + + +### 주석 추가 + +이름 뒤에 텍스트를 더 추가하여 파일이나 디렉터리에 주석을 추가합니다. +주석에서 굵게 및 기울임꼴과 같은 인라인 Markdown 서식이 지원됩니다. + + + +```mdx {7} +import { FileTree } from '@astrojs/starlight/components'; + + + +- src + - components + - Header.astro **중요** 파일 + - Title.astro + + +``` + + + +```markdoc {4} +{% filetree %} +- src + - components + - Header.astro **중요** 파일 + - Title.astro +{% /filetree %} +``` + + + + + +- src + - components + - Header.astro **중요** 파일 + - Title.astro + + + + + +### 자리 표시자 추가 + +`...` 또는 `…`을 이름으로 사용하여 자리 표시자 파일과 디렉터리를 추가합니다. +이는 폴더에 더 많은 항목이 포함될 수 있음을 모든 항목을 일일이 명시하지 않고도 독자에게 알려주는 데 유용할 수 있습니다. + + + +```mdx {8} +import { FileTree } from '@astrojs/starlight/components'; + + + +- src + - components + - Header.astro + - … + + +``` + + + +```markdoc {5} +{% filetree %} +- src + - components + - Header.astro + - … +{% /filetree %} +``` + + + + + +- src + - components + - Header.astro + - … + + + + + +## `` 속성 + +**구현:** [`FileTree.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/user-components/FileTree.astro) + +`` 컴포넌트는 어떤 속성도 허용하지 않습니다. \ No newline at end of file From e50a02bfb6bbe6eab20f87ecc7bff9313b6718ce Mon Sep 17 00:00:00 2001 From: HiDeoo Date: Thu, 19 Sep 2024 09:18:38 +0000 Subject: [PATCH 14/22] [ci] format --- docs/src/content/docs/ko/components/file-tree.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/content/docs/ko/components/file-tree.mdx b/docs/src/content/docs/ko/components/file-tree.mdx index 2555da74819..415b299a28d 100644 --- a/docs/src/content/docs/ko/components/file-tree.mdx +++ b/docs/src/content/docs/ko/components/file-tree.mdx @@ -222,4 +222,4 @@ import { FileTree } from '@astrojs/starlight/components'; **구현:** [`FileTree.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/user-components/FileTree.astro) -`` 컴포넌트는 어떤 속성도 허용하지 않습니다. \ No newline at end of file +`` 컴포넌트는 어떤 속성도 허용하지 않습니다. From 26e920b3597aaa39383867a17b8dc62abf785f20 Mon Sep 17 00:00:00 2001 From: Junseong Park Date: Thu, 19 Sep 2024 18:32:23 +0900 Subject: [PATCH 15/22] i18n(ko-KR): create `icons.mdx` (#2357) Co-authored-by: HiDeoo <494699+HiDeoo@users.noreply.github.com> --- docs/src/content/docs/ko/components/icons.mdx | 128 ++++++++++++++++++ 1 file changed, 128 insertions(+) create mode 100644 docs/src/content/docs/ko/components/icons.mdx diff --git a/docs/src/content/docs/ko/components/icons.mdx b/docs/src/content/docs/ko/components/icons.mdx new file mode 100644 index 00000000000..44421fc6646 --- /dev/null +++ b/docs/src/content/docs/ko/components/icons.mdx @@ -0,0 +1,128 @@ +--- +title: 아이콘 +description: Starlight에서 아이콘을 표시하는 방법을 알아보세요. +--- + +import { Icon } from '@astrojs/starlight/components'; + +Starlight의 [기본 제공 아이콘 세트](/ko/reference/icons/#모든-아이콘)의 아이콘을 표시하려면 `` 컴포넌트를 사용하세요. + +import Preview from '~/components/component-preview.astro'; + + + + + + + +## 가져오기 + +```tsx +import { Icon } from '@astrojs/starlight/components'; +``` + +## 사용 + +`` 컴포넌트를 사용하여 아이콘을 표시합니다. +아이콘에는 [Starlight의 기본 제공 아이콘 중 하나](/ko/reference/icons/#모든-아이콘)로 설정된 [`name`](#name)이 필요하며, 화면 리더에 컨텍스트를 제공하기 위해 선택적으로 [`label`](#label)을 포함할 수 있습니다. + + + +```mdx +import { Icon } from '@astrojs/starlight/components'; + + + +``` + + + +```markdoc +{% icon name="star" /%} +{% icon name="starlight" label="Starlight 로고" /%} +``` + + + + + + + + + + +### 아이콘 사용자 정의 + +CSS 단위와 색상 값을 사용하여 아이콘의 모양을 조정하는 데 [`size`](#size) 및 [`color`](#color) 속성을 사용할 수 있습니다. +[`class`](#class) 속성을 사용하여 아이콘에 사용자 정의 CSS 클래스를 추가할 수 있습니다. + + + +```mdx +import { Card } from '@astrojs/starlight/components'; + + + +``` + + + +```markdoc +{% icon name="star" color="goldenrod" size="2rem" /%} +{% icon name="rocket" color="var(--sl-color-text-accent)" /%} +``` + + + + + + + + + + +## `` 속성 + +**구현:** [`Icon.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/user-components/Icon.astro) + +`` 컴포넌트는 다음 속성을 허용합니다: + +### `name` + +**필수** +**타입:** `string` + +표시할 아이콘의 이름을 [Starlight의 기본 제공 아이콘 중 하나](/ko/reference/icons/#모든-아이콘)로 설정합니다. + +### `label` + +**타입:** `string` + +화면 리더와 같은 보조 기술에 컨텍스트를 제공하기 위한 선택적 레이블입니다. + +`label`을 설정하지 않으면 보조 기술에서 아이콘이 완전히 숨겨집니다. +이 경우 아이콘 없이도 문맥을 이해할 수 있는지 확인하세요. +예를 들어 아이콘만 포함된 링크는 `label` 속성을 **포함해야** 액세스할 수 있지만, 링크에 텍스트가 포함되어 있고 아이콘이 순전히 장식용인 경우에는 `label`을 생략해도 괜찮습니다. + +### `size` + +**타입:** `string` + +CSS 단위를 사용한 아이콘 크기입니다. + +### `color` + +**타입:** `string` + +CSS 색상 값을 사용하는 아이콘의 색상입니다. + +### `class` + +**타입:** `string` + +아이콘에 추가할 사용자 정의 CSS 클래스입니다. \ No newline at end of file From ddc19d67ddf9d5ecdee24176ce4f0c043cba820d Mon Sep 17 00:00:00 2001 From: HiDeoo Date: Thu, 19 Sep 2024 09:33:01 +0000 Subject: [PATCH 16/22] [ci] format --- docs/src/content/docs/ko/components/icons.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/content/docs/ko/components/icons.mdx b/docs/src/content/docs/ko/components/icons.mdx index 44421fc6646..74a400c692c 100644 --- a/docs/src/content/docs/ko/components/icons.mdx +++ b/docs/src/content/docs/ko/components/icons.mdx @@ -125,4 +125,4 @@ CSS 색상 값을 사용하는 아이콘의 색상입니다. **타입:** `string` -아이콘에 추가할 사용자 정의 CSS 클래스입니다. \ No newline at end of file +아이콘에 추가할 사용자 정의 CSS 클래스입니다. From f81a4a4884aecefddf187cebf61656f895979f24 Mon Sep 17 00:00:00 2001 From: Junseong Park Date: Thu, 19 Sep 2024 18:41:31 +0900 Subject: [PATCH 17/22] i18n(ko-KR): create `link-buttons.mdx` (#2358) Co-authored-by: HiDeoo <494699+HiDeoo@users.noreply.github.com> --- .../docs/ko/components/link-buttons.mdx | 145 ++++++++++++++++++ 1 file changed, 145 insertions(+) create mode 100644 docs/src/content/docs/ko/components/link-buttons.mdx diff --git a/docs/src/content/docs/ko/components/link-buttons.mdx b/docs/src/content/docs/ko/components/link-buttons.mdx new file mode 100644 index 00000000000..4de72703b3a --- /dev/null +++ b/docs/src/content/docs/ko/components/link-buttons.mdx @@ -0,0 +1,145 @@ +--- +title: 링크 버튼 +description: 시각적으로 뚜렷한 콜투액션 링크를 위해 Starlight에서 링크 버튼을 만드는 방법을 알아보세요. +--- + +import { LinkButton } from '@astrojs/starlight/components'; + +시각적으로 뚜렷한 콜투액션 링크를 표시하려면 `` 컴포넌트를 사용합니다. + +import Preview from '~/components/component-preview.astro'; + + + + + 문서 읽기 + + + + +## 가져오기 + +```tsx +import { LinkButton } from '@astrojs/starlight/components'; +``` + +## 사용 + +시각적으로 구분되는 콜투액션 링크를 표시하려면 `` 컴포넌트를 사용합니다. +링크 버튼은 가장 관련성이 높거나 실행 가능한 콘텐츠로 사용자를 안내하는 데 유용하며 랜딩 페이지에서 자주 사용됩니다. + +``에는 [`href`](#href) 속성이 필요합니다. +선택적으로 `primary` (기본값), `secondary`, `minimal`로 설정할 수 있는 [`variant`](#variant) 속성을 사용하여 링크 버튼의 모양을 사용자 정의합니다. + + + +```mdx +import { LinkButton } from '@astrojs/starlight/components'; + +시작하기 + + 구성 참조 + +``` + + + +```markdoc +{% linkbutton href="/ko/getting-started/" %}시작하기{% /linkbutton %} + +{% linkbutton href="/ko/reference/configuration/" variant="secondary" %} +구성 참조 +{% /linkbutton %} +``` + + + + + 시작하기 + + 구성 참조 + + + + + +### 카드에 아이콘 추가 + +[Starlight의 내장 아이콘 중 하나](/ko/reference/icons/#모든-아이콘)의 이름으로 설정된 [`icon`](#icon) 속성을 사용하여 링크 버튼에 아이콘을 포함시킵니다. + +텍스트 앞에 아이콘을 배치하기 위해 [`iconPlacement`](#iconplacement) 속성을 `start`로 설정할 수 있습니다 (기본값은 `end`). + + + +```mdx {6-7} +import { LinkButton } from '@astrojs/starlight/components'; + + + 관련: Astro + +``` + + + +```markdoc {4-5} +{% linkbutton + href="https://docs.astro.build/ko" + variant="secondary" + icon="external" + iconPlacement="start" %} +관련: Astro +{% /linkbutton %} +``` + + + + + 관련: Astro + + + + +## `` 속성 + +**구현:** [`LinkButton.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/user-components/LinkButton.astro) + +`` 컴포넌트는 다음 속성과 [기타 `` 속성](https://developer.mozilla.org/ko/docs/Web/HTML/Element/a)도 허용합니다: + +### `href` + +**필수** +**타입:** `string` + +링크 버튼이 가리키는 URL입니다. + +### `variant` + +**타입:** `'primary' | 'secondary' | 'minimal'` +**기본값:** `'primary'` + +링크 버튼의 모양입니다. +테마 강조 색상을 사용하여 눈에 잘 띄는 콜투액션 링크를 만들려면 `primary`, 덜 눈에 띄는 링크를 만들려면 `secondary`, 최소한의 스타일을 적용한 링크를 만들려면 `minimal`로 설정합니다. + +### `icon` + +**타입:** `string` + +링크 버튼에는 [Starlight의 기본 제공 아이콘 중 하나](/ko/reference/icons/#모든-아이콘)의 이름으로 설정된 `icon` 속성을 포함할 수 있습니다. + +### `iconPlacement` + +**타입:** `'start' | 'end'` +**기본값:** `'end'` + +링크 버튼 텍스트에 상대적인 아이콘의 위치를 결정합니다. \ No newline at end of file From 55ba589c1ebc0c69b9de16c3b98f53c33d5fa5bb Mon Sep 17 00:00:00 2001 From: HiDeoo Date: Thu, 19 Sep 2024 09:42:13 +0000 Subject: [PATCH 18/22] [ci] format --- docs/src/content/docs/ko/components/link-buttons.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/content/docs/ko/components/link-buttons.mdx b/docs/src/content/docs/ko/components/link-buttons.mdx index 4de72703b3a..f2529346111 100644 --- a/docs/src/content/docs/ko/components/link-buttons.mdx +++ b/docs/src/content/docs/ko/components/link-buttons.mdx @@ -142,4 +142,4 @@ import { LinkButton } from '@astrojs/starlight/components'; **타입:** `'start' | 'end'` **기본값:** `'end'` -링크 버튼 텍스트에 상대적인 아이콘의 위치를 결정합니다. \ No newline at end of file +링크 버튼 텍스트에 상대적인 아이콘의 위치를 결정합니다. From 02c29a427af261ccb79553e77d70270417852bc8 Mon Sep 17 00:00:00 2001 From: Junseong Park Date: Thu, 19 Sep 2024 18:48:39 +0900 Subject: [PATCH 19/22] i18n(ko-KR): create `steps.mdx` (#2360) Co-authored-by: HiDeoo <494699+HiDeoo@users.noreply.github.com> --- docs/src/content/docs/ko/components/steps.mdx | 120 ++++++++++++++++++ 1 file changed, 120 insertions(+) create mode 100644 docs/src/content/docs/ko/components/steps.mdx diff --git a/docs/src/content/docs/ko/components/steps.mdx b/docs/src/content/docs/ko/components/steps.mdx new file mode 100644 index 00000000000..c35eff0dbea --- /dev/null +++ b/docs/src/content/docs/ko/components/steps.mdx @@ -0,0 +1,120 @@ +--- +title: 단계 +description: Starlight에서 단계별 가이드를 만들기 위해 작업의 번호가 매겨진 목록에 스타일을 지정하는 방법을 알아보세요. +--- + +import { Tabs, TabItem, Steps } from '@astrojs/starlight/components'; + +번호가 매겨진 작업 목록에 스타일을 지정하여 단계별 가이드를 만들려면 `` 컴포넌트를 사용하세요. + +import Preview from '~/components/component-preview.astro'; + + + + + +1. 새 Starlight 프로젝트를 만듭니다: + + + + + + ```sh + npm create astro@latest -- --template starlight + ``` + + + + + + ```sh + pnpm create astro --template starlight + ``` + + + + + + ```sh + yarn create astro --template starlight + ``` + + + + + +2. 첫 번째 문서 페이지를 작성합니다. + + + + + +## 가져오기 + +```tsx +import { Steps } from '@astrojs/starlight/components'; +``` + +## 사용 + +`` 컴포넌트를 사용하여 번호가 매겨진 작업 목록의 스타일을 지정합니다. +이는 각 단계를 명확하게 강조해야 하는 보다 복잡한 단계별 가이드에 유용합니다. + +표준 Markdown 정렬 목록을 ``로 묶습니다. +모든 일반적인 Markdown 구문은 `` 내에서 적용 가능합니다. + + + +````mdx +import { Steps } from '@astrojs/starlight/components'; + + + +1. 컴포넌트를 MDX 파일로 가져옵니다. + + ```js + import { Steps } from '@astrojs/starlight/components'; + ``` + +2. 순서가 매겨진 목록 항목을 ``로 묶습니다. + + +```` + + + +````markdoc +{% steps %} + +1. 컴포넌트를 MDX 파일로 가져옵니다. + + ```js + import { Steps } from '@astrojs/starlight/components'; + ``` + +2. 순서가 매겨진 목록 항목을 ``로 묶습니다. + +{% /steps %} +```` + + + + + +1. 컴포넌트를 MDX 파일로 가져옵니다. + + ```js + import { Steps } from '@astrojs/starlight/components'; + ``` + +2. 순서가 매겨진 목록 항목을 ``로 묶습니다. + + + + + +## `` 속성 + +**구현:** [`Steps.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/user-components/Steps.astro) + +`` 컴포넌트는 어떤 속성도 허용하지 않습니다. \ No newline at end of file From d92cfd061b3a532bff6e947271318d113b887256 Mon Sep 17 00:00:00 2001 From: HiDeoo Date: Thu, 19 Sep 2024 09:49:16 +0000 Subject: [PATCH 20/22] [ci] format --- docs/src/content/docs/ko/components/steps.mdx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/src/content/docs/ko/components/steps.mdx b/docs/src/content/docs/ko/components/steps.mdx index c35eff0dbea..5072faad64e 100644 --- a/docs/src/content/docs/ko/components/steps.mdx +++ b/docs/src/content/docs/ko/components/steps.mdx @@ -57,10 +57,10 @@ import { Steps } from '@astrojs/starlight/components'; ## 사용 -`` 컴포넌트를 사용하여 번호가 매겨진 작업 목록의 스타일을 지정합니다. +`` 컴포넌트를 사용하여 번호가 매겨진 작업 목록의 스타일을 지정합니다. 이는 각 단계를 명확하게 강조해야 하는 보다 복잡한 단계별 가이드에 유용합니다. -표준 Markdown 정렬 목록을 ``로 묶습니다. +표준 Markdown 정렬 목록을 ``로 묶습니다. 모든 일반적인 Markdown 구문은 `` 내에서 적용 가능합니다. @@ -70,7 +70,7 @@ import { Steps } from '@astrojs/starlight/components'; -1. 컴포넌트를 MDX 파일로 가져옵니다. +1. 컴포넌트를 MDX 파일로 가져옵니다. ```js import { Steps } from '@astrojs/starlight/components'; @@ -86,7 +86,7 @@ import { Steps } from '@astrojs/starlight/components'; ````markdoc {% steps %} -1. 컴포넌트를 MDX 파일로 가져옵니다. +1. 컴포넌트를 MDX 파일로 가져옵니다. ```js import { Steps } from '@astrojs/starlight/components'; @@ -101,7 +101,7 @@ import { Steps } from '@astrojs/starlight/components'; -1. 컴포넌트를 MDX 파일로 가져옵니다. +1. 컴포넌트를 MDX 파일로 가져옵니다. ```js import { Steps } from '@astrojs/starlight/components'; @@ -117,4 +117,4 @@ import { Steps } from '@astrojs/starlight/components'; **구현:** [`Steps.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/user-components/Steps.astro) -`` 컴포넌트는 어떤 속성도 허용하지 않습니다. \ No newline at end of file +`` 컴포넌트는 어떤 속성도 허용하지 않습니다. From 3d2bb7dec7359e2e0140dbb442fe4cafe365c060 Mon Sep 17 00:00:00 2001 From: Thomas Bonnet Date: Thu, 19 Sep 2024 12:03:34 +0200 Subject: [PATCH 21/22] i18n(fr): Add `components/asides.mdx` in French language (#2350) Co-authored-by: HiDeoo <494699+HiDeoo@users.noreply.github.com> --- .../src/content/docs/fr/components/asides.mdx | 158 ++++++++++++++++++ 1 file changed, 158 insertions(+) create mode 100644 docs/src/content/docs/fr/components/asides.mdx diff --git a/docs/src/content/docs/fr/components/asides.mdx b/docs/src/content/docs/fr/components/asides.mdx new file mode 100644 index 00000000000..5e669bc2750 --- /dev/null +++ b/docs/src/content/docs/fr/components/asides.mdx @@ -0,0 +1,158 @@ +--- +title: Encarts +description: Apprenez à utiliser les encarts dans Starlight pour afficher des informations secondaires à côté du contenu principal d'une page. +--- + +import { Aside } from '@astrojs/starlight/components'; + +Pour afficher des informations secondaires à côté du contenu principal d'une page, utilisez le composant `