@intlayer/docs 5.7.6 → 5.7.8

package/docs/ko/intlayer_with_tanstack.md

@@ -0,0 +1,457 @@
+---
+createdAt: 2025-08-11
+updatedAt: 2025-08-11
+title: TanStack Start (React)에서 Intlayer 시작하기
+description: Intlayer를 사용하여 TanStack Start 앱에 i18n 추가하기 — 컴포넌트 수준 사전, 지역화된 URL, SEO 친화적 메타데이터.
+keywords:
+  - 국제화
+  - 문서
+  - Intlayer
+  - TanStack Start
+  - TanStack Router
+  - React
+  - i18n
+  - 자바스크립트
+slugs:
+  - doc
+  - environment
+  - tanstack-start
+---
+
+# Intlayer와 TanStack Start (React)로 국제화(i18n) 시작하기
+
+## Intlayer란 무엇인가요?
+
+**Intlayer**는 React 앱을 위한 오픈 소스 i18n 툴킷입니다. 다음을 제공합니다:
+
+- **TypeScript 안전성을 갖춘 컴포넌트 로컬 사전**.
+- **동적 메타데이터 및 라우트** (SEO 준비 완료).
+- **런타임 로케일 전환** (로케일 감지/유지 도우미 포함).
+- **Vite 플러그인** 빌드 타임 변환 및 개발자 경험 향상용.
+
+이 가이드는 Intlayer를 **TanStack Start** 프로젝트에 연결하는 방법을 보여줍니다 (TanStack Start는 내부적으로 Vite와 TanStack Router를 라우팅/SSR에 사용합니다).
+
+---
+
+## 1단계: 의존성 설치
+
+```bash
+# npm
+npm i intlayer react-intlayer
+npm i -D vite-intlayer
+
+# pnpm
+pnpm add intlayer react-intlayer
+pnpm add -D vite-intlayer
+
+# yarn
+yarn add intlayer react-intlayer
+yarn add -D vite-intlayer
+```
+
+- **intlayer**: 코어 (설정, 사전, CLI/변환).
+- **react-intlayer**: React용 `<IntlayerProvider>` 및 훅.
+- **vite-intlayer**: Vite 플러그인, 선택적 미들웨어 포함 (로케일 감지/리다이렉트용, 개발 및 SSR/미리보기에서 작동; 프로덕션 SSR 시 `dependencies`로 이동).
+
+---
+
+## 2단계: Intlayer 구성
+
+프로젝트 루트에 `intlayer.config.ts` 파일을 생성하세요:
+
+```ts fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+    defaultLocale: Locales.ENGLISH,
+  },
+  // contentDir, contentFileExtensions, 미들웨어 옵션 등도 조정할 수 있습니다.
+};
+
+export default config;
+```
+
+CommonJS/ESM 변형은 `cjs`/`mjs`를 선호하는 경우 원본 문서와 동일합니다.
+
+> 전체 구성 참조는 Intlayer의 구성 문서를 참고하세요.
+
+---
+
+## 3단계: Vite 플러그인 추가 (및 선택적 미들웨어)
+
+**TanStack Start는 Vite를 사용하므로**, Intlayer의 플러그인을 `vite.config.ts`에 추가하세요:
+
+```ts fileName="vite.config.ts"
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react-swc";
+import { intlayerPlugin, intLayerMiddlewarePlugin } from "vite-intlayer";
+
+export default defineConfig({
+  plugins: [
+    react(),
+    intlayerPlugin(),
+    // 선택 사항이지만 로케일 감지, 쿠키 및 리디렉션에 권장됩니다:
+    intLayerMiddlewarePlugin(),
+  ],
+});
+```
+
+> SSR을 배포하는 경우, 미들웨어가 프로덕션에서 실행되도록 `vite-intlayer`를 `dependencies`로 이동하세요.
+
+---
+
+## 4단계: 콘텐츠 선언하기
+
+사전(dictionary)을 기본 `contentDir`인 `./src` 아래 아무 곳에나 배치하세요. 예시:
+
+```tsx fileName="src/app.content.tsx"
+import { t, type Dictionary } from "intlayer";
+import type { ReactNode } from "react";
+
+const appContent = {
+  key: "app",
+  content: {
+    viteLogo: t({
+      ko: "Vite 로고",
+      en: "Vite logo",
+      fr: "Logo Vite",
+      es: "Logo Vite",
+    }),
+    reactLogo: t({
+      ko: "React 로고",
+      en: "React logo",
+      fr: "Logo React",
+      es: "Logo React",
+    }),
+    title: t({
+      ko: "TanStack Start + React",
+      en: "TanStack Start + React",
+      fr: "TanStack Start + React",
+      es: "TanStack Start + React",
+    }),
+    count: t({
+      ko: "카운트는 ",
+      en: "count is ",
+      fr: "le compte est ",
+      es: "el recuento es ",
+    }),
+    edit: t<ReactNode>({
+      ko: (
+        <>
+          <code>src/routes/index.tsx</code>를 편집하고 저장하여 HMR을
+          테스트하세요
+        </>
+      ),
+      en: (
+        <>
+          Edit <code>src/routes/index.tsx</code> and save to test HMR
+        </>
+      ),
+      fr: (
+        <>
+          Éditez <code>src/routes/index.tsx</code> et enregistrez pour tester
+          HMR
+        </>
+      ),
+      es: (
+        <>
+          Edita <code>src/routes/index.tsx</code> y guarda para probar HMR
+        </>
+      ),
+    }),
+    readTheDocs: t({
+      en: "Click the logos to learn more",
+      fr: "Cliquez sur les logos pour en savoir plus",
+      es: "Haz clic en los logotipos para saber más",
+    }),
+  },
+} satisfies Dictionary;
+
+export default appContent;
+```
+
+JSON/ESM/CJS 변형은 원본 문서와 동일하게 작동합니다.
+
+> TSX 콘텐츠인가요? 설정에 따라 `import React from "react"`를 잊지 마세요.
+
+---
+
+## 5단계: TanStack Start를 Intlayer로 감싸기
+
+TanStack Start에서는 **루트 경로(root route)**가 프로바이더를 설정하기에 적합한 위치입니다.
+
+```tsx fileName="src/routes/__root.tsx"
+import {
+  Outlet,
+  createRootRoute,
+  Link as RouterLink,
+} from "@tanstack/react-router";
+import { IntlayerProvider, useIntlayer } from "react-intlayer";
+
+function AppShell() {
+  // 최상위에서 사전을 사용하는 예:
+  const content = useIntlayer("app");
+
+  return (
+    <div>
+      <nav className="flex gap-3 p-3">
+        <RouterLink to="/">홈</RouterLink>
+        <RouterLink to="/about">소개</RouterLink>
+      </nav>
+      <main className="p-6">
+        <h1>{content.title}</h1>
+        <Outlet />
+      </main>
+    </div>
+  );
+}
+
+export const Route = createRootRoute({
+  component: () => (
+    <IntlayerProvider>
+      <AppShell />
+    </IntlayerProvider>
+  ),
+});
+```
+
+그런 다음 페이지에서 콘텐츠를 사용하세요:
+
+```tsx fileName="src/routes/index.tsx"
+import { createFileRoute } from "@tanstack/react-router";
+import { useIntlayer } from "react-intlayer";
+import reactLogo from "../assets/react.svg";
+
+export const Route = createFileRoute("/")({
+  component: () => {
+    const content = useIntlayer("app");
+    return (
+      <>
+        <button>{content.count}0</button>
+        <p>{content.edit}</p>
+        <img
+          src={reactLogo}
+          alt={content.reactLogo.value}
+          width={48}
+          height={48}
+        />
+        <p className="opacity-70">{content.readTheDocs}</p>
+      </>
+    );
+  },
+});
+```
+
+> 문자열 속성(`alt`, `title`, `aria-label` 등)은 `.value`가 필요합니다:
+>
+> ```jsx
+> <img alt={c.reactLogo.value} />
+> ```
+
+---
+
+## (선택 사항) 6단계: 로케일 전환 (클라이언트)
+
+```tsx fileName="src/components/LocaleSwitcher.tsx"
+import { Locales } from "intlayer";
+import { useLocale } from "react-intlayer";
+
+export function LocaleSwitcher() {
+  const { setLocale } = useLocale();
+  return (
+    <div className="flex gap-2">
+      <button onClick={() => setLocale(Locales.ENGLISH)}>영어</button>
+      <button onClick={() => setLocale(Locales.FRENCH)}>프랑스어</button>
+      <button onClick={() => setLocale(Locales.SPANISH)}>스페인어</button>
+    </div>
+  );
+}
+```
+
+---
+
+## (선택 사항) 7단계: 지역화된 라우팅 (SEO 친화적 URL)
+
+TanStack Start에는 **두 가지 좋은 패턴**이 있습니다. 하나를 선택하세요.
+
+동적 세그먼트 폴더 `src/routes/$locale/`를 생성하여 URL이 `/:locale/...` 형식이 되도록 합니다. `$locale` 레이아웃에서 `params.locale`을 검증하고, `<IntlayerProvider locale=...>`를 설정한 후 `<Outlet />`을 렌더링합니다. 이 방법은 간단하지만, 나머지 라우트들은 `$locale` 하위에 마운트되며, 기본 로케일 접두사를 원하지 않는 경우 별도의 접두사 없는 트리가 필요합니다.
+
+---
+
+## (선택 사항) 8단계: 로케일 전환 시 URL 업데이트
+
+패턴 A (basepath)에서는 로케일을 전환하면 **다른 basepath로 이동**하는 것을 의미합니다:
+
+```tsx fileName="src/components/LocaleSwitcherNavigate.tsx"
+import { useRouter } from "@tanstack/react-router";
+import { Locales, getLocalizedUrl } from "intlayer";
+import { useLocale } from "react-intlayer";
+
+export function LocaleSwitcherNavigate() {
+  const router = useRouter();
+  const { locale, setLocale } = useLocale();
+
+  const change = async (next: Locales) => {
+    if (next === locale) return;
+    const nextPath = getLocalizedUrl(
+      window.location.pathname + window.location.search,
+      next
+    );
+    await router.navigate({ to: nextPath }); // 기록을 유지합니다
+    setLocale(next);
+  };
+
+  return (
+    <div className="flex gap-2">
+      <button onClick={() => change(Locales.ENGLISH)}>English</button>
+      <button onClick={() => change(Locales.FRENCH)}>Français</button>
+      <button onClick={() => change(Locales.SPANISH)}>Español</button>
+    </div>
+  );
+}
+```
+
+---
+
+## (선택 사항) 9단계: `<html lang>` 및 `dir` (TanStack Start 문서)
+
+TanStack Start는 사용자 정의가 가능한 **Document**(루트 HTML 셸)를 제공합니다. 접근성 및 SEO를 위해 `lang`과 `dir`을 설정하세요:
+
+```tsx fileName="src/routes/__root.tsx" {4,15}
+import { Outlet, createRootRoute } from "@tanstack/react-router";
+import { IntlayerProvider } from "react-intlayer";
+import { getHTMLTextDir } from "intlayer";
+
+function Document({
+  locale,
+  children,
+}: {
+  locale: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang={locale} dir={getHTMLTextDir(locale)}>
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        {/* ... */}
+      </head>
+      <body>{children}</body>
+    </html>
+  );
+}
+
+export const Route = createRootRoute({
+  component: () => (
+    <IntlayerProvider>
+      {/* 서버에서 로케일을 계산하는 경우 Document에 전달하세요; 그렇지 않으면 클라이언트가 하이드레이션 후 수정합니다 */}
+      <Document locale={document?.documentElement?.lang || "en"}>
+        <Outlet />
+      </Document>
+    </IntlayerProvider>
+  ),
+});
+```
+
+클라이언트 측 수정을 위해, 다음과 같은 작은 훅을 유지할 수도 있습니다:
+
+```tsx fileName="src/hooks/useI18nHTMLAttributes.tsx"
+import { useEffect } from "react";
+import { useLocale } from "react-intlayer";
+import { getHTMLTextDir } from "intlayer";
+
+export const useI18nHTMLAttributes = () => {
+  const { locale } = useLocale();
+  useEffect(() => {
+    document.documentElement.lang = locale; // 문서의 언어 속성을 현재 로케일로 설정
+    document.documentElement.dir = getHTMLTextDir(locale); // 문서의 텍스트 방향 설정
+  }, [locale]);
+};
+```
+
+---
+
+## (선택 사항) 10단계: 지역화된 Link 컴포넌트
+
+TanStack Router는 `<Link/>`를 제공하지만, 내부 URL에 자동으로 접두사를 붙이는 일반 `<a>` 태그가 필요할 경우:
+
+```tsx fileName="src/components/Link.tsx"
+import { getLocalizedUrl } from "intlayer";
+import {
+  forwardRef,
+  type AnchorHTMLAttributes,
+  type DetailedHTMLProps,
+} from "react";
+import { useLocale } from "react-intlayer";
+
+export interface LinkProps
+  extends DetailedHTMLProps<
+    AnchorHTMLAttributes<HTMLAnchorElement>,
+    HTMLAnchorElement
+  > {}
+
+const isExternal = (href?: string) => /^https?:\/\//.test(href ?? "");
+
+export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
+  ({ href, children, ...props }, ref) => {
+    const { locale } = useLocale();
+    const hrefI18n =
+      href && !isExternal(href) ? getLocalizedUrl(href, locale) : href;
+    return (
+      <a href={hrefI18n} ref={ref} {...props}>
+        {children}
+      </a>
+    );
+  }
+);
+Link.displayName = "Link";
+```
+
+> 패턴 A(basepath)를 사용하는 경우, TanStack의 `<Link to="/about" />`는 이미 `basepath`를 통해 `/fr/about`로 해결되므로, 커스텀 링크는 선택 사항입니다.
+
+---
+
+## TypeScript
+
+Intlayer가 생성한 타입을 포함하세요:
+
+```json5 fileName="tsconfig.json"
+{
+  "include": ["src", ".intlayer/**/*.ts"],
+}
+```
+
+---
+
+## Git
+
+Intlayer가 생성한 아티팩트를 무시하세요:
+
+```gitignore
+.intlayer
+```
+
+---
+
+## VS 코드 확장
+
+- **Intlayer VS 코드 확장** → 자동완성, 오류, 인라인 미리보기, 빠른 작업.
+  마켓플레이스: `intlayer.intlayer-vs-code-extension`
+
+---
+
+## 더 나아가기
+
+- 비주얼 에디터
+- CMS 모드
+- 엣지/어댑터에서의 로케일 감지
+
+---
+
+## 문서 이력
+
+| 버전  | 날짜       | 변경 사항                |
+| ----- | ---------- | ------------------------ |
+| 1.0.0 | 2025-08-11 | TanStack Start 적응 추가 |

package/docs/ko/packages/next-intlayer/index.md

@@ -280,7 +280,6 @@ Intlayer는 Next.js 애플리케이션의 국제화를 돕기 위한 다양한
 - [`useIntlayer()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/packages/next-intlayer/useIntlayer.md)
 - [`useDictionary()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/packages/next-intlayer/useDictionary.md)
 - [`useLocale()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/packages/next-intlayer/useLocale.md)
-- [`useIntlayerAsync()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/packages/next-intlayer/useIntlayerAsync.md)
 
 ## 문서 이력
 

package/docs/ko/packages/react-intlayer/index.md

@@ -280,7 +280,6 @@ Intlayer는 React 애플리케이션을 국제화하는 데 도움이 되는 다
 - [`useIntlayer()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/packages/react-intlayer/useIntlayer.md)
 - [`useDictionary()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/packages/react-intlayer/useDictionary.md)
 - [`useLocale()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/packages/react-intlayer/useLocale.md)
-- [`useIntlayerAsync()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/packages/react-intlayer/useIntlayerAsync.md)
 
 ## 문서 이력
 

package/docs/pt/CI_CD.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-05-20
-updatedAt: 2025-06-29
+updatedAt: 2025-08-13
 title: Integração CI/CD
 description: Aprenda como integrar o Intlayer em seu pipeline CI/CD para gerenciamento e implantação automatizados de conteúdo.
 keywords:
@@ -19,13 +19,13 @@ slugs:
 
 # Geração Automática de Traduções em um Pipeline CI/CD
 
-O Intlayer permite a geração automática de traduções para seus arquivos de declaração de conteúdo. Existem várias maneiras de alcançar isso dependendo do seu fluxo de trabalho.
+O Intlayer permite a geração automática de traduções para seus arquivos de declaração de conteúdo. Existem várias maneiras de realizar isso dependendo do seu fluxo de trabalho.
 
 ## Usando o CMS
 
-Com o Intlayer, você pode adotar um fluxo de trabalho onde apenas um único idioma é declarado localmente, enquanto todas as traduções são gerenciadas remotamente através do CMS. Isso permite que o conteúdo e as traduções fiquem completamente desacoplados da base de código, oferecendo mais flexibilidade para os editores de conteúdo e possibilitando recarregamento dinâmico do conteúdo (sem necessidade de reconstruir a aplicação para aplicar as mudanças).
+Com o Intlayer, você pode adotar um fluxo de trabalho onde apenas um único idioma é declarado localmente, enquanto todas as traduções são gerenciadas remotamente através do CMS. Isso permite que o conteúdo e as traduções fiquem completamente desacoplados da base de código, oferecendo mais flexibilidade para os editores de conteúdo e possibilitando o recarregamento dinâmico do conteúdo (sem necessidade de reconstruir a aplicação para aplicar as alterações).
 
-### Exemplo de Configuração
+### Configuração de Exemplo
 
 ```ts fileName="intlayer.config.ts"
 import { Locales, type IntlayerConfig } from "intlayer";
@@ -37,7 +37,7 @@ const config: IntlayerConfig = {
     defaultLocale: Locales.ENGLISH,
   },
   editor: {
-    dictionaryPriorityStrategy: "distant_first", // O conteúdo remoto tem prioridade
+    dictionaryPriorityStrategy: "distant_first", // Conteúdo remoto tem prioridade
 
     applicationURL: process.env.APPLICATION_URL, // URL da aplicação usada pelo CMS
 
@@ -45,7 +45,7 @@ const config: IntlayerConfig = {
     clientSecret: process.env.INTLAYER_CLIENT_SECRET,
   },
   ai: {
-    applicationContext: "Esta é uma aplicação de teste", // Ajuda a garantir a geração consistente de traduções
+    applicationContext: "This is a test application", // Ajuda a garantir a geração consistente de traduções
   },
 };
 
@@ -56,9 +56,9 @@ Para saber mais sobre o CMS, consulte a [documentação oficial](https://github.
 
 ## Usando Husky
 
-Você pode integrar a geração de traduções ao seu fluxo de trabalho Git local usando o [Husky](https://typicode.github.io/husky/).
+Você pode integrar a geração de traduções no seu fluxo de trabalho local do Git usando o [Husky](https://typicode.github.io/husky/).
 
-### Exemplo de Configuração
+### Configuração de Exemplo
 
 ```ts fileName="intlayer.config.ts"
 import { Locales, type IntlayerConfig } from "intlayer";
@@ -77,7 +77,7 @@ const config: IntlayerConfig = {
     provider: "openai",
     apiKey: process.env.OPENAI_API_KEY, // Use sua própria chave API
 
-    applicationContext: "Esta é uma aplicação de teste", // Ajuda a garantir a geração consistente de traduções
+    applicationContext: "This is a test application", // Ajuda a garantir a geração consistente de traduções
   },
 };
 
@@ -86,7 +86,7 @@ export default config;
 
 ```bash fileName=".husky/pre-push"
 npx intlayer build                          # Para garantir que os dicionários estejam atualizados
-npx intlayer fill --unpushed --mode fill    # Preenche apenas o conteúdo faltante, não atualiza os existentes
+npx intlayer fill --unpushed --mode fill    # Apenas preenche o conteúdo faltante, não atualiza os existentes
 ```
 
 > Para mais informações sobre os comandos CLI do Intlayer e seu uso, consulte a [documentação CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/intlayer_cli.md).
@@ -105,68 +105,94 @@ npx intlayer fill --base-dir ./app2 --unpushed --mode fill
 
 ## Usando GitHub Actions
 
-Intlayer fornece um comando CLI para preenchimento automático e revisão do conteúdo do dicionário. Isso pode ser integrado ao seu fluxo de trabalho CI/CD usando GitHub Actions.
+O Intlayer fornece um comando CLI para preenchimento automático e revisão do conteúdo do dicionário. Isso pode ser integrado ao seu fluxo de trabalho CI/CD usando GitHub Actions.
 
 ```yaml fileName=".github/workflows/intlayer-translate.yml"
-name: Intlayer Auto-Fill
+name: Preenchimento Automático Intlayer
+# Condições de gatilho para este fluxo de trabalho
 on:
-  push:
-    branches: [ main ]
-    paths:
-      - 'src/**'
   pull_request:
-    branches: [ main ]
-    paths:
-      - 'src/**'
-  workflow_dispatch: {}
+    branches:
+      - "main"
+
+permissions:
+  contents: write
+  pull-requests: write
 
 concurrency:
-  group: 'autofill-${{ github.ref }}'
+  group: "autofill-${{ github.ref }}"
   cancel-in-progress: true
 
 jobs:
   autofill:
     runs-on: ubuntu-latest
     env:
-      INTLAYER_CLIENT_ID: ${{ secrets.INTLAYER_CLIENT_ID }}
-      INTLAYER_CLIENT_SECRET: ${{ secrets.INTLAYER_CLIENT_SECRET }}
-      OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
+      # OpenAI
+      AI_MODEL: openai
+      AI_PROVIDER: gpt-5-mini
+      AI_API_KEY: ${{ secrets.AI_API_KEY }}
 
     steps:
-      - name: ⬇️ Fazer checkout do repositório
-        uses: actions/checkout@v3
+      # Passo 1: Obter o código mais recente do repositório
+      - name: ⬇️ Checkout do repositório
+        uses: actions/checkout@v4
         with:
-          persist-credentials: true
+          persist-credentials: true # Manter credenciais para criação de PRs
+          fetch-depth: 0 # Obter histórico completo do git para análise de diferenças
 
+      # Passo 2: Configurar ambiente Node.js
       - name: 🟢 Configurar Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 20 # Usar Node.js 20 LTS para estabilidade
 
+      # Passo 3: Instalar dependências do projeto
       - name: 📦 Instalar dependências
-        run: npm ci
+        run: npm install
+
+      # Passo 4: Instalar Intlayer CLI globalmente para gerenciamento de traduções
+      - name: 📦 Instalar Intlayer
+        run: npm install -g intlayer-cli
 
+      # Passo 5: Construir o projeto Intlayer para gerar arquivos de tradução
       - name: ⚙️ Construir projeto Intlayer
         run: npx intlayer build
 
+      # Passo 6: Usar IA para preencher automaticamente traduções faltantes
       - name: 🤖 Preencher automaticamente traduções faltantes
-        run: npx intlayer fill --git-diff --mode fill
-
-      - name: 📤 Criar ou atualizar PR de tradução
-        uses: peter-evans/create-pull-request@v4
-        with:
-          commit-message: chore: auto-fill missing translations [skip ci]
-          branch: auto-translations
-          title: chore: update missing translations
-          labels: translation, automated
+        run: npx intlayer fill --git-diff --mode fill --provider $AI_PROVIDER --model $AI_MODEL --api-key $AI_API_KEY
+
+      # Passo 7: Verificar se há alterações e comitá-las
+      - name: � Verificar alterações
+        id: check-changes
+        run: |
+          if [ -n "$(git status --porcelain)" ]; then
+            echo "has-changes=true" >> $GITHUB_OUTPUT
+          else
+            echo "has-changes=false" >> $GITHUB_OUTPUT
+          fi
+
+      # Passo 8: Comitar e enviar alterações se existirem
+      - name: 📤 Comitar e enviar alterações
+        if: steps.check-changes.outputs.has-changes == 'true'
+        run: |
+          git config --local user.email "action@github.com"
+          git config --local user.name "GitHub Action"
+          git add .
+          git commit -m "chore: auto-fill missing translations [skip ci]"
+          git push origin HEAD:${{ github.head_ref }}
 ```
 
+Para configurar as variáveis de ambiente, vá para GitHub → Configurações → Segredos e variáveis → Ações e adicione o segredo .
+
 > Assim como para o Husky, no caso de um monorepo, você pode usar o argumento `--base-dir` para tratar sequencialmente cada app.
 
 > Por padrão, o argumento `--git-diff` filtra os dicionários que incluem alterações da base (padrão `origin/main`) para o branch atual (padrão: `HEAD`).
 
 > Para mais informações sobre os comandos do Intlayer CLI e seu uso, consulte a [documentação do CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/intlayer_cli.md).
 
-## Histórico da Documentação
+## Histórico do Documento
 
-- 5.5.10 - 2025-06-29: Histórico inicial
+| Versão | Data       | Alterações        |
+| ------ | ---------- | ----------------- |
+| 5.5.10 | 2025-06-29 | Histórico inicial |