@intlayer/docs 9.0.0-canary.2 → 9.0.0-canary.4

package/blog/ko/intlayer_with_next-intl.md

@@ -53,28 +53,46 @@ Intlayer는 훌륭한 독립형 i18n 솔루션을 제공하지만(자세한 내
 
 ## next-intl과 함께 Intlayer 설정 단계별 가이드
 
-### 1단계: 의존성 설치
+<Steps>
+
+<Step number={1} title="의존성 설치">
 
 필요한 패키지를 설치하세요:
 
+```bash packageManager="npm"
+npx intlayer-cli init --interactive
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="bun"
+bunx intlayer-cli init --interactive
+```
+
+> `--interactive` 플래그는 선택 사항입니다. AI 에이전트인 경우 `intlayer-cli init`를 사용하세요.
+
+> 이 명령은 환경을 감지하고 필요한 패키지를 설치합니다. 예를 들어:
+
 ```bash packageManager="npm"
 npm install intlayer @intlayer/sync-json-plugin --save-dev
-npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer @intlayer/sync-json-plugin --save-dev
-pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer @intlayer/sync-json-plugin --dev
-yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer @intlayer/sync-json-plugin --dev
-bun x intlayer init
 ```
 
 **패키지 설명:**
@@ -82,7 +100,9 @@ bun x intlayer init
 - **intlayer**: 국제화 관리, 콘텐츠 선언 및 빌드를 위한 핵심 라이브러리
 - **@intlayer/sync-json-plugin**: Intlayer 콘텐츠 선언을 next-intl 호환 JSON 형식으로 내보내는 플러그인
 
-### 2단계: JSON을 래핑하기 위한 Intlayer 플러그인 구현
+</Step>
+
+<Step number={2} title="JSON을 래핑하기 위한 Intlayer 플러그인 구현">
 
 지원하는 로케일을 정의하기 위해 Intlayer 구성 파일을 만듭니다:
 
@@ -120,7 +140,9 @@ CLI를 사용하여 JSON을 번역하거나 CMS를 통해 변경 사항이 이
 
 `syncJSON` 플러그인에 대한 자세한 내용은 [syncJSON 플러그인 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/plugins/sync-json.md)를 참조하세요.
 
-### (선택 사항) 3단계: 컴포넌트별 JSON 번역 구현
+</Step>
+
+<Step number={3} title="컴포넌트별 JSON 번역 구현" isOptional={true}>
 
 기본적으로 Intlayer는 JSON 파일과 콘텐츠 선언 파일을 모두 로드, 병합 및 동기화합니다. 자세한 내용은 [콘텐츠 선언 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dictionary/content_file.md)를 참조하세요. 하지만 원한다면 Intlayer 플러그인을 사용하여 코드베이스 어디에서나 JSON을 컴포넌트별로 관리하는 기능을 구현할 수도 있습니다.
 
@@ -162,6 +184,10 @@ export default config;
 
 이 설정은 `src` 디렉토리 내에서 `{key}.i18n.json` 패턴과 일치하는 모든 JSON 파일을 로드하여 Intlayer 사전으로 불러옵니다.
 
+</Step>
+
+</Steps>
+
 ## Git 구성
 
 자동 생성된 Intlayer 파일은 무시하는 것이 권장됩니다:

package/blog/ko/intlayer_with_react-i18next.md

@@ -57,28 +57,46 @@ Intlayer는 훌륭한 독립형 i18n 솔루션을 제공하지만(자세한 내
 
 ## react-i18next와 함께 Intlayer 설정 단계별 가이드
 
-### 1단계: 의존성 설치
+<Steps>
+
+<Step number={1} title="의존성 설치">
 
 필요한 패키지를 설치하세요:
 
+```bash packageManager="npm"
+npx intlayer-cli init --interactive
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="bun"
+bunx intlayer-cli init --interactive
+```
+
+> `--interactive` 플래그는 선택 사항입니다. AI 에이전트인 경우 `intlayer-cli init`를 사용하세요.
+
+> 이 명령은 환경을 감지하고 필요한 패키지를 설치합니다. 예를 들어:
+
 ```bash packageManager="npm"
 npm install intlayer @intlayer/sync-json-plugin --save-dev
-npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer @intlayer/sync-json-plugin --save-dev
-pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer @intlayer/sync-json-plugin --dev
-yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer @intlayer/sync-json-plugin --dev
-bun x intlayer init
 ```
 
 **패키지 설명:**
@@ -86,7 +104,9 @@ bun x intlayer init
 - **intlayer**: 국제화 관리, 콘텐츠 선언 및 빌드를 위한 핵심 라이브러리
 - **@intlayer/sync-json-plugin**: Intlayer 콘텐츠 선언을 react-i18next 호환 JSON 형식으로 내보내는 플러그인
 
-### 2단계: JSON을 감싸기 위한 Intlayer 플러그인 구현
+</Step>
+
+<Step number={2} title="JSON을 감싸기 위한 Intlayer 플러그인 구현">
 
 지원하는 로케일을 정의하기 위해 Intlayer 구성 파일을 만듭니다:
 
@@ -123,7 +143,9 @@ CLI를 사용하여 JSON을 번역하거나 CMS를 통해 변경이 이루어지
 
 `syncJSON` 플러그인에 대한 자세한 내용은 [syncJSON 플러그인 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/plugins/sync-json.md)를 참조하세요.
 
-### (선택 사항) 3단계: 컴포넌트별 JSON 번역 구현
+</Step>
+
+<Step number={3} title="컴포넌트별 JSON 번역 구현" isOptional={true}>
 
 기본적으로 Intlayer는 JSON 파일과 콘텐츠 선언 파일을 모두 로드, 병합 및 동기화합니다. 자세한 내용은 [콘텐츠 선언 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dictionary/content_file.md)를 참조하세요. 하지만 원한다면 Intlayer 플러그인을 사용하여 코드베이스 어디에서나 로컬라이즈된 JSON을 컴포넌트별로 관리할 수도 있습니다.
 
@@ -164,6 +186,10 @@ export default config;
 
 이 설정은 `src` 디렉토리 내에서 `{key}.i18n.json` 패턴과 일치하는 모든 JSON 파일을 로드하여 Intlayer 사전으로 불러옵니다.
 
+</Step>
+
+</Steps>
+
 ## Git 설정
 
 자동 생성되는 Intlayer 파일은 무시하는 것이 권장됩니다:

package/blog/ko/intlayer_with_react-intl.md

@@ -55,28 +55,46 @@ Intlayer는 훌륭한 독립형 i18n 솔루션을 제공하지만(자세한 내
 
 ## react-intl과 함께 Intlayer를 설정하는 단계별 가이드
 
-### 1단계: 의존성 설치
+<Steps>
+
+<Step number={1} title="의존성 설치">
 
 필요한 패키지를 설치하세요:
 
+```bash packageManager="npm"
+npx intlayer-cli init --interactive
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="bun"
+bunx intlayer-cli init --interactive
+```
+
+> `--interactive` 플래그는 선택 사항입니다. AI 에이전트인 경우 `intlayer-cli init`를 사용하세요.
+
+> 이 명령은 환경을 감지하고 필요한 패키지를 설치합니다. 예를 들어:
+
 ```bash packageManager="npm"
 npm install intlayer @intlayer/sync-json-plugin --save-dev
-npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer @intlayer/sync-json-plugin --save-dev
-pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer @intlayer/sync-json-plugin --dev
-yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer @intlayer/sync-json-plugin --dev
-bun x intlayer init
 ```
 
 **패키지 설명:**
@@ -84,7 +102,9 @@ bun x intlayer init
 - **intlayer**: 국제화 관리, 콘텐츠 선언 및 빌드를 위한 핵심 라이브러리
 - **@intlayer/sync-json-plugin**: Intlayer 콘텐츠 선언을 react-intl 호환 JSON 형식으로 내보내는 플러그인
 
-### 2단계: JSON을 래핑하기 위한 Intlayer 플러그인 구현
+</Step>
+
+<Step number={2} title="JSON을 래핑하기 위한 Intlayer 플러그인 구현">
 
 지원하는 로케일을 정의하기 위해 Intlayer 구성 파일을 만듭니다:
 
@@ -121,7 +141,9 @@ CLI를 사용해 JSON을 번역하거나 CMS를 통해 변경이 이루어지면
 
 `syncJSON` 플러그인에 대한 자세한 내용을 보려면 [syncJSON 플러그인 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/plugins/sync-json.md)를 참조하세요.
 
-### (선택 사항) 3단계: 컴포넌트별 JSON 번역 구현
+</Step>
+
+<Step number={3} title="컴포넌트별 JSON 번역 구현" isOptional={true}>
 
 기본적으로 Intlayer는 JSON 파일과 콘텐츠 선언 파일을 모두 로드, 병합 및 동기화합니다. 자세한 내용은 [콘텐츠 선언 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dictionary/content_file.md)를 참조하세요. 하지만 원한다면 Intlayer 플러그인을 사용하여 코드베이스 어디에서나 지역화된 JSON을 컴포넌트별로 관리할 수도 있습니다.
 
@@ -163,6 +185,10 @@ export default config;
 
 이 설정은 `src` 디렉토리 내에서 `{key}.i18n.json` 패턴과 일치하는 모든 JSON 파일을 로드하여 Intlayer 사전으로 불러옵니다.
 
+</Step>
+
+</Steps>
+
 ## Git 설정
 
 자동 생성되는 Intlayer 파일은 무시하는 것이 권장됩니다:

package/blog/ko/intlayer_with_vue-i18n.md

@@ -57,28 +57,46 @@ Intlayer는 훌륭한 독립형 i18n 솔루션을 제공하지만(자세한 내
 
 ## vue-i18n과 함께 Intlayer 설정 단계별 가이드
 
-### 1단계: 의존성 설치
+<Steps>
+
+<Step number={1} title="의존성 설치">
 
 선호하는 패키지 관리자를 사용하여 필요한 패키지를 설치하세요:
 
+```bash packageManager="npm"
+npx intlayer-cli init --interactive
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="bun"
+bunx intlayer-cli init --interactive
+```
+
+> `--interactive` 플래그는 선택 사항입니다. AI 에이전트인 경우 `intlayer-cli init`를 사용하세요.
+
+> 이 명령은 환경을 감지하고 필요한 패키지를 설치합니다. 예를 들어:
+
 ```bash packageManager="npm"
 npm install intlayer @intlayer/sync-json-plugin --save-dev
-npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer @intlayer/sync-json-plugin --save-dev
-pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer @intlayer/sync-json-plugin --dev
-yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer @intlayer/sync-json-plugin --dev
-bun x intlayer init
 ```
 
 **패키지 설명:**
@@ -86,7 +104,9 @@ bun x intlayer init
 - **intlayer**: 콘텐츠 선언 및 관리를 위한 핵심 라이브러리
   /// **@intlayer/sync-json-plugin**: Intlayer 콘텐츠 선언을 vue-i18n JSON 형식과 동기화하는 플러그인
 
-### 2단계: JSON을 래핑하기 위한 Intlayer 플러그인 구현
+</Step>
+
+<Step number={2} title="JSON을 래핑하기 위한 Intlayer 플러그인 구현">
 
 지원하는 로케일을 정의하기 위해 Intlayer 구성 파일을 만듭니다:
 
@@ -125,7 +145,9 @@ CLI를 사용하여 JSON을 번역하거나 CMS를 통해 변경이 이루어지
 
 ---
 
-### (선택 사항) 3단계: 컴포넌트별 JSON 번역 구현
+</Step>
+
+<Step number={3} title="컴포넌트별 JSON 번역 구현" isOptional={true}>
 
 기본적으로 Intlayer는 JSON 파일과 콘텐츠 선언 파일을 모두 로드, 병합 및 동기화합니다. 자세한 내용은 [콘텐츠 선언 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dictionary/content_file.md)를 참조하세요. 하지만 원한다면 Intlayer 플러그인을 사용하여 코드베이스 어디에서나 지역화된 JSON을 컴포넌트별로 관리할 수도 있습니다.
 
@@ -169,6 +191,10 @@ export default config;
 
 ---
 
+</Step>
+
+</Steps>
+
 ## Git 설정
 
 생성된 파일을 버전 관리에서 제외하세요:

package/blog/pl/intlayer_with_i18next.md

@@ -65,24 +65,40 @@ Ten przewodnik pokazuje, jak wykorzystać zaawansowany system deklaracji treści
 
 Zainstaluj niezbędne pakiety:
 
+```bash packageManager="npm"
+npx intlayer-cli init --interactive
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="bun"
+bunx intlayer-cli init --interactive
+```
+
+> flaga `--interactive` jest opcjonalna. Użyj `intlayer-cli init`, jeśli jesteś agentem AI.
+
+> To polecenie wykryje Twoje środowisko i zainstaluje wymagane pakiety. Na przykład:
+
 ```bash packageManager="npm"
 npm install intlayer @intlayer/sync-json-plugin --save-dev
-npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer @intlayer/sync-json-plugin --save-dev
-pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer @intlayer/sync-json-plugin --dev
-yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer @intlayer/sync-json-plugin --dev
-bun x intlayer init
 ```
 
 **Opis pakietów:**

package/blog/pl/intlayer_with_next-i18next.md

@@ -73,24 +73,40 @@ Ten przewodnik pokazuje, jak wykorzystać zaawansowany system deklaracji treści
 
 Zainstaluj niezbędne pakiety, używając preferowanego menedżera pakietów:
 
+```bash packageManager="npm"
+npx intlayer-cli init --interactive
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="bun"
+bunx intlayer-cli init --interactive
+```
+
+> flaga `--interactive` jest opcjonalna. Użyj `intlayer-cli init`, jeśli jesteś agentem AI.
+
+> To polecenie wykryje Twoje środowisko i zainstaluje wymagane pakiety. Na przykład:
+
 ```bash packageManager="npm"
 npm install intlayer @intlayer/sync-json-plugin --save-dev
-npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer @intlayer/sync-json-plugin --save-dev
-pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer @intlayer/sync-json-plugin --dev
-yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer @intlayer/sync-json-plugin --dev
-bun x intlayer init
 ```
 
 **Wyjaśnienie pakietów:**

package/blog/pl/intlayer_with_next-intl.md

@@ -60,24 +60,40 @@ Ten przewodnik pokazuje, jak wykorzystać zaawansowany system deklaracji treści
 
 Zainstaluj niezbędne pakiety:
 
+```bash packageManager="npm"
+npx intlayer-cli init --interactive
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="bun"
+bunx intlayer-cli init --interactive
+```
+
+> flaga `--interactive` jest opcjonalna. Użyj `intlayer-cli init`, jeśli jesteś agentem AI.
+
+> To polecenie wykryje Twoje środowisko i zainstaluje wymagane pakiety. Na przykład:
+
 ```bash packageManager="npm"
 npm install intlayer @intlayer/sync-json-plugin --save-dev
-npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer @intlayer/sync-json-plugin --save-dev
-pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer @intlayer/sync-json-plugin --dev
-yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer @intlayer/sync-json-plugin --dev
-bun x intlayer init
 ```
 
 **Opis pakietów:**

package/blog/pl/intlayer_with_react-i18next.md

@@ -63,24 +63,40 @@ Ten przewodnik pokazuje, jak wykorzystać zaawansowany system deklaracji treści
 
 Zainstaluj niezbędne pakiety:
 
+```bash packageManager="npm"
+npx intlayer-cli init --interactive
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="bun"
+bunx intlayer-cli init --interactive
+```
+
+> flaga `--interactive` jest opcjonalna. Użyj `intlayer-cli init`, jeśli jesteś agentem AI.
+
+> To polecenie wykryje Twoje środowisko i zainstaluje wymagane pakiety. Na przykład:
+
 ```bash packageManager="npm"
 npm install intlayer @intlayer/sync-json-plugin --save-dev
-npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer @intlayer/sync-json-plugin --save-dev
-pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer @intlayer/sync-json-plugin --dev
-yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer @intlayer/sync-json-plugin --dev
-bun x intlayer init
 ```
 
 **Opis pakietów:**

package/blog/pl/intlayer_with_react-intl.md

@@ -61,24 +61,40 @@ Ten przewodnik pokazuje, jak wykorzystać zaawansowany system deklaracji treści
 
 Zainstaluj niezbędne pakiety:
 
+```bash packageManager="npm"
+npx intlayer-cli init --interactive
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="bun"
+bunx intlayer-cli init --interactive
+```
+
+> flaga `--interactive` jest opcjonalna. Użyj `intlayer-cli init`, jeśli jesteś agentem AI.
+
+> To polecenie wykryje Twoje środowisko i zainstaluje wymagane pakiety. Na przykład:
+
 ```bash packageManager="npm"
 npm install intlayer @intlayer/sync-json-plugin --save-dev
-npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer @intlayer/sync-json-plugin --save-dev
-pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer @intlayer/sync-json-plugin --dev
-yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer @intlayer/sync-json-plugin --dev
-bun x intlayer init
 ```
 
 **Opis pakietów:**

package/blog/pl/intlayer_with_vue-i18n.md

@@ -63,24 +63,40 @@ Ten przewodnik pokazuje, jak wykorzystać zaawansowany system deklaracji treści
 
 Zainstaluj niezbędne pakiety, używając preferowanego menedżera pakietów:
 
+```bash packageManager="npm"
+npx intlayer-cli init --interactive
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="bun"
+bunx intlayer-cli init --interactive
+```
+
+> flaga `--interactive` jest opcjonalna. Użyj `intlayer-cli init`, jeśli jesteś agentem AI.
+
+> To polecenie wykryje Twoje środowisko i zainstaluje wymagane pakiety. Na przykład:
+
 ```bash packageManager="npm"
 npm install intlayer @intlayer/sync-json-plugin --save-dev
-npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer @intlayer/sync-json-plugin --save-dev
-pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer @intlayer/sync-json-plugin --dev
-yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer @intlayer/sync-json-plugin --dev
-bun x intlayer init
 ```
 
 **Wyjaśnienie pakietów:**

package/blog/pt/intlayer_with_i18next.md

@@ -59,28 +59,46 @@ Este guia mostra como aproveitar o sistema superior de declaração de conteúdo
 
 ## Guia passo a passo para configurar o Intlayer com o i18next
 
-### Passo 1: Instalar dependências
+<Steps>
+
+<Step number={1} title="Instalar dependências">
 
 Instale os pacotes necessários:
 
+```bash packageManager="npm"
+npx intlayer-cli init --interactive
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="bun"
+bunx intlayer-cli init --interactive
+```
+
+> a flag `--interactive` é opcional. Use `intlayer-cli init` se você for um agente de IA.
+
+> Este comando detectará seu ambiente e instalará os pacotes necessários. Por exemplo:
+
 ```bash packageManager="npm"
 npm install intlayer @intlayer/sync-json-plugin --save-dev
-npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer @intlayer/sync-json-plugin --save-dev
-pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer @intlayer/sync-json-plugin --dev
-yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer @intlayer/sync-json-plugin --dev
-bun x intlayer init
 ```
 
 **Descrição dos pacotes:**
@@ -88,7 +106,9 @@ bun x intlayer init
 - **intlayer**: Biblioteca principal para gerenciamento de internacionalização, declaração de conteúdo e construção
 - **@intlayer/sync-json-plugin**: Plugin para exportar declarações de conteúdo do Intlayer para o formato JSON compatível com i18next
 
-### Passo 2: Implemente o plugin Intlayer para encapsular o JSON
+</Step>
+
+<Step number={2} title="Implemente o plugin Intlayer para encapsular o JSON">
 
 Crie um arquivo de configuração do Intlayer para definir os seus locais suportados:
 
@@ -124,7 +144,9 @@ Se alterações forem feitas usando a CLI para traduzir o JSON, ou usando o CMS,
 
 Para ver mais detalhes sobre o plugin `syncJSON`, consulte a [documentação do plugin syncJSON](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/plugins/sync-json.md).
 
-### (Opcional) Passo 3: Implementar traduções JSON por componente
+</Step>
+
+<Step number={3} title="Implementar traduções JSON por componente" isOptional={true}>
 
 Por padrão, o Intlayer irá carregar, mesclar e sincronizar tanto os arquivos JSON quanto os arquivos de declaração de conteúdo. Veja [a documentação da declaração de conteúdo](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/dictionary/content_file.md) para mais detalhes. Mas, se preferir, usando um plugin do Intlayer, você também pode implementar o gerenciamento por componente de JSON localizado em qualquer lugar da sua base de código.
 
@@ -167,6 +189,10 @@ Isso carregará todos os arquivos JSON no diretório `src` que correspondem ao p
 
 ---
 
+</Step>
+
+</Steps>
+
 ## Configuração do Git
 
 É recomendado ignorar os arquivos gerados automaticamente pelo Intlayer: