@intlayer/docs 5.7.6 → 5.7.8

package/docs/it/intlayer_with_tanstack.md

@@ -0,0 +1,457 @@
+---
+createdAt: 2025-08-11
+updatedAt: 2025-08-11
+title: Iniziare con Intlayer in TanStack Start (React)
+description: Aggiungi l'internazionalizzazione alla tua app TanStack Start usando Intlayer—dizionari a livello di componente, URL localizzati e metadati ottimizzati per SEO.
+keywords:
+  - Internazionalizzazione
+  - Documentazione
+  - Intlayer
+  - TanStack Start
+  - TanStack Router
+  - React
+  - i18n
+  - JavaScript
+slugs:
+  - doc
+  - environment
+  - tanstack-start
+---
+
+# Iniziare con l'internazionalizzazione (i18n) usando Intlayer e TanStack Start (React)
+
+## Cos'è Intlayer?
+
+**Intlayer** è un toolkit open-source per l'internazionalizzazione (i18n) di app React. Ti offre:
+
+- **Dizionari locali al componente** con sicurezza TypeScript.
+- **Metadati e rotte dinamiche** (pronte per SEO).
+- **Cambio della lingua a runtime** (e helper per rilevare/persistere le lingue).
+- **Plugin Vite** per trasformazioni in fase di build + esperienza di sviluppo (DX).
+
+Questa guida mostra come integrare Intlayer in un progetto **TanStack Start** (che utilizza Vite sotto il cofano e TanStack Router per il routing/SSR).
+
+---
+
+## Passo 1: Installare le dipendenze
+
+```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**: core (configurazione, dizionari, CLI/trasformazioni).
+- **react-intlayer**: `<IntlayerProvider>` + hook per React.
+- **vite-intlayer**: plugin Vite, più middleware opzionale per il rilevamento/reindirizzamento della lingua (funziona in dev e SSR/preview; spostare in `dependencies` per SSR in produzione).
+
+---
+
+## Passo 2: Configurare Intlayer
+
+Crea `intlayer.config.ts` nella root del tuo progetto:
+
+```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,
+  },
+  // Puoi anche modificare: contentDir, contentFileExtensions, opzioni del middleware, ecc.
+};
+
+export default config;
+```
+
+Le varianti CommonJS/ESM sono identiche al tuo documento originale se preferisci `cjs`/`mjs`.
+
+> Riferimento completo alla configurazione: vedi la documentazione di configurazione di Intlayer.
+
+---
+
+## Passo 3: Aggiungere il Plugin Vite (e middleware opzionale)
+
+**TanStack Start usa Vite**, quindi aggiungi il/i plugin di Intlayer al tuo `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(),
+    // Opzionale ma consigliato per il rilevamento della lingua, cookie e reindirizzamenti:
+    intLayerMiddlewarePlugin(),
+  ],
+});
+```
+
+> Se distribuisci SSR, sposta `vite-intlayer` nelle `dependencies` affinché il middleware funzioni in produzione.
+
+---
+
+## Passo 4: Dichiara il tuo contenuto
+
+Posiziona i tuoi dizionari ovunque sotto `./src` (default `contentDir`). Esempio:
+
+```tsx fileName="src/app.content.tsx"
+import { t, type Dictionary } from "intlayer";
+import type { ReactNode } from "react";
+
+const appContent = {
+  key: "app",
+  content: {
+    viteLogo: t({
+      it: "Logo Vite",
+      en: "Vite logo",
+      fr: "Logo Vite",
+      es: "Logo Vite",
+    }),
+    reactLogo: t({
+      it: "Logo React",
+      en: "React logo",
+      fr: "Logo React",
+      es: "Logo React",
+    }),
+    title: t({
+      it: "TanStack Start + React",
+      en: "TanStack Start + React",
+      fr: "TanStack Start + React",
+      es: "TanStack Start + React",
+    }),
+    count: t({
+      it: "il conteggio è ",
+      en: "count is ",
+      fr: "le compte est ",
+      es: "el recuento es ",
+    }),
+    edit: t<ReactNode>({
+      it: (
+        <>
+          Modifica <code>src/routes/index.tsx</code> e salva per testare 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({
+      it: "Clicca sui loghi per saperne di più",
+      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;
+```
+
+Le varianti JSON/ESM/CJS funzionano allo stesso modo del tuo documento originale.
+
+> Contenuto TSX? Non dimenticare `import React from "react"` se la tua configurazione lo richiede.
+
+---
+
+## Passo 5: Avvolgi TanStack Start con Intlayer
+
+Con TanStack Start, la tua **root route** è il posto giusto per impostare i provider.
+
+```tsx fileName="src/routes/__root.tsx"
+import {
+  Outlet,
+  createRootRoute,
+  Link as RouterLink,
+} from "@tanstack/react-router";
+import { IntlayerProvider, useIntlayer } from "react-intlayer";
+
+function AppShell() {
+  // Esempio di utilizzo di un dizionario a livello superiore:
+  const content = useIntlayer("app");
+
+  return (
+    <div>
+      <nav className="flex gap-3 p-3">
+        <RouterLink to="/">Home</RouterLink>
+        <RouterLink to="/about">Informazioni</RouterLink>
+      </nav>
+      <main className="p-6">
+        <h1>{content.title}</h1>
+        <Outlet />
+      </main>
+    </div>
+  );
+}
+
+export const Route = createRootRoute({
+  component: () => (
+    <IntlayerProvider>
+      <AppShell />
+    </IntlayerProvider>
+  ),
+});
+```
+
+Quindi usa i tuoi contenuti nelle pagine:
+
+```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>
+      </>
+    );
+  },
+});
+```
+
+> Gli attributi stringa (`alt`, `title`, `aria-label`, …) necessitano di `.value`:
+>
+> ```jsx
+> <img alt={c.reactLogo.value} />
+> ```
+
+---
+
+## (Opzionale) Passo 6: Cambio della lingua (Client)
+
+```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)}>Inglese</button>
+      <button onClick={() => setLocale(Locales.FRENCH)}>Francese</button>
+      <button onClick={() => setLocale(Locales.SPANISH)}>Spagnolo</button>
+    </div>
+  );
+}
+```
+
+---
+
+## (Opzionale) Passo 7: Routing Localizzato (URL SEO-friendly)
+
+Hai **due buoni modelli** con TanStack Start. Scegline uno.
+
+Crea una cartella segmento dinamico `src/routes/$locale/` così i tuoi URL saranno `/:locale/...`. Nel layout `$locale`, valida `params.locale`, imposta `<IntlayerProvider locale=...>`, e renderizza un `<Outlet />`. Questo approccio è semplice, ma monterai il resto delle tue rotte sotto `$locale`, e avrai bisogno di un albero extra senza prefisso se _non_ vuoi il prefisso della locale di default.
+
+---
+
+## (Opzionale) Passo 8: Aggiornare l'URL quando si cambia lingua
+
+Con il Pattern A (basepath), cambiare lingua significa **navigare verso un basepath differente**:
+
+```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 }); // preserva la cronologia
+    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>
+  );
+}
+```
+
+---
+
+## (Opzionale) Passo 9: `<html lang>` e `dir` (TanStack Start Document)
+
+TanStack Start espone un **Document** (shell HTML radice) che puoi personalizzare. Imposta `lang` e `dir` per accessibilità/SEO:
+
+```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>
+      {/* Se calcoli la locale sul server, passala a Document; altrimenti il client correggerà dopo l'idratazione */}
+      <Document locale={document?.documentElement?.lang || "en"}>
+        <Outlet />
+      </Document>
+    </IntlayerProvider>
+  ),
+});
+```
+
+Per la correzione lato client, puoi anche mantenere il tuo piccolo hook:
+
+```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]);
+};
+```
+
+---
+
+## (Opzionale) Passo 10: Componente Link localizzato
+
+TanStack Router fornisce un `<Link/>`, ma se mai avessi bisogno di un semplice `<a>` che aggiunge automaticamente il prefisso alle URL interne:
+
+```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";
+```
+
+> Se usi il Pattern A (basepath), il `<Link to="/about" />` di TanStack risolve già in `/fr/about` tramite `basepath`, quindi un link personalizzato è opzionale.
+
+---
+
+## TypeScript
+
+Includi i tipi generati da Intlayer:
+
+```json5 fileName="tsconfig.json"
+{
+  "include": ["src", ".intlayer/**/*.ts"],
+}
+```
+
+---
+
+## Git
+
+Ignora gli artefatti generati da Intlayer:
+
+```gitignore
+.intlayer
+```
+
+---
+
+## Estensione VS Code
+
+- **Estensione Intlayer per VS Code** → completamento automatico, errori, anteprime inline, azioni rapide.
+  Marketplace: `intlayer.intlayer-vs-code-extension`
+
+---
+
+## Approfondimenti
+
+- Editor Visuale
+- Modalità CMS
+- Rilevamento della lingua al confine / adattatori
+
+---
+
+## Cronologia Documentazione
+
+| Versione | Data       | Modifiche                             |
+| -------- | ---------- | ------------------------------------- |
+| 1.0.0    | 2025-08-11 | Aggiunta l'adattamento TanStack Start |

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

@@ -279,7 +279,6 @@ Il pacchetto `next-intlayer` fornisce anche alcune funzioni per aiutarti a inter
 - [`useIntlayer()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/packages/next-intlayer/useIntlayer.md)
 - [`useDictionary()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/packages/next-intlayer/useDictionary.md)
 - [`useLocale()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/packages/next-intlayer/useLocale.md)
-- [`useIntlayerAsync()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/packages/next-intlayer/useIntlayerAsync.md)
 
 ## Cronologia della documentazione
 

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

@@ -274,7 +274,6 @@ Il pacchetto `react-intlayer` fornisce anche alcune funzioni per aiutarti a inte
 - [`useIntlayer()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/packages/react-intlayer/useIntlayer.md)
 - [`useDictionary()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/packages/react-intlayer/useDictionary.md)
 - [`useLocale()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/packages/react-intlayer/useLocale.md)
-- [`useIntlayerAsync()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/packages/react-intlayer/useIntlayerAsync.md)
 
 ## Cronologia della documentazione
 

package/docs/ja/CI_CD.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-05-20
-updatedAt: 2025-06-29
+updatedAt: 2025-08-13
 title: CI/CD 統合
 description: Intlayer を CI/CD パイプラインに統合して、自動化されたコンテンツ管理とデプロイメントを実現する方法を学びます。
 keywords:
@@ -19,11 +19,11 @@ slugs:
 
 # CI/CD パイプラインでの翻訳の自動生成
 
-Intlayer は、コンテンツ宣言ファイルの翻訳を自動的に生成することを可能にします。ワークフローに応じて、これを実現する複数の方法があります。
+Intlayer は、コンテンツ宣言ファイルの翻訳を自動生成することを可能にします。ワークフローに応じて、これを実現する複数の方法があります。
 
 ## CMS の利用
 
-Intlayer を使用すると、ローカルでは単一のロケールのみを宣言し、すべての翻訳を CMS を通じてリモートで管理するワークフローを採用できます。これにより、コンテンツと翻訳がコードベースから完全に切り離され、コンテンツ編集者にとってより柔軟性が高まり、ホットコンテンツリロード（変更を適用するためにアプリケーションを再ビルドする必要なし）が可能になります。
+Intlayer を使用すると、ローカルでは単一のロケールのみを宣言し、すべての翻訳は CMS を通じてリモートで管理するワークフローを採用できます。これにより、コンテンツと翻訳がコードベースから完全に切り離され、コンテンツ編集者にとってより柔軟性が提供され、ホットコンテンツリロード（変更を適用するためにアプリケーションを再ビルドする必要なし）が可能になります。
 
 ### 設定例
 
@@ -54,7 +54,7 @@ export default config;
 
 CMSの詳細については、[公式ドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_CMS.md)を参照してください。
 
-## Huskyの使用方法
+## Huskyの使用
 
 [Husky](https://typicode.github.io/husky/)を使用して、ローカルのGitワークフローに翻訳生成を統合できます。
 
@@ -77,7 +77,7 @@ const config: IntlayerConfig = {
     provider: "openai",
     apiKey: process.env.OPENAI_API_KEY, // ご自身のAPIキーを使用してください
 
-    applicationContext: "これはテストアプリケーションです", // 一貫した翻訳生成を確保するのに役立ちます
+    applicationContext: "This is a test application", // 一貫した翻訳生成を支援します
   },
 };
 
@@ -89,7 +89,7 @@ npx intlayer build                          # 辞書が最新であることを
 npx intlayer fill --unpushed --mode fill    # 欠落しているコンテンツのみを埋め、既存のものは更新しません
 ```
 
-> IntlayerのCLIコマンドとその使用方法の詳細については、[CLIドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_cli.md)を参照してください。
+> Intlayer CLIコマンドとその使用方法の詳細については、[CLIドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_cli.md)を参照してください。
 
 > リポジトリ内に複数のアプリがあり、それぞれ別のintlayerインスタンスを使用している場合は、次のように`--base-dir`引数を使用できます。
 
@@ -103,70 +103,96 @@ npx intlayer build --base-dir ./app2
 npx intlayer fill --base-dir ./app2 --unpushed --mode fill
 ```
 
-## GitHub Actionsの使用方法
+## GitHub Actionsの使用
 
-Intlayerは、辞書の内容を自動入力およびレビューするためのCLIコマンドを提供しています。これはGitHub Actionsを使用してCI/CDワークフローに統合することができます。
+Intlayerは辞書コンテンツの自動入力およびレビューを行うCLIコマンドを提供しています。これはGitHub Actionsを使用してCI/CDワークフローに統合することができます。
 
 ```yaml fileName=".github/workflows/intlayer-translate.yml"
 name: Intlayer 自動入力
+# このワークフローのトリガー条件
 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:
+      # ステップ1: リポジトリから最新コードを取得
       - name: ⬇️ リポジトリをチェックアウト
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
-          persist-credentials: true
+          persist-credentials: true # PR作成のための認証情報を保持
+          fetch-depth: 0 # 差分解析のために完全なGit履歴を取得
 
-      - name: 🟢 Node.js のセットアップ
-        uses: actions/setup-node@v3
+      # ステップ 2: Node.js環境のセットアップ
+      - name: 🟢 Node.jsをセットアップ
+        uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 20 # 安定性のためNode.js 20 LTSを使用
 
-      - name: 📦 依存関係のインストール
-        run: npm ci
+      # ステップ 3: プロジェクト依存関係のインストール
+      - name: 📦 依存関係をインストール
+        run: npm install
 
-      - name: ⚙️ Intlayer プロジェクトのビルド
-        run: npx intlayer build
+      # ステップ 4: 翻訳管理のためにIntlayer CLIをグローバルインストール
+      - name: 📦 Intlayerをインストール
+        run: npm install -g intlayer-cli
 
-      - name: 🤖 欠落している翻訳の自動補完
-        run: npx intlayer fill --git-diff --mode fill
+      # ステップ 5: 翻訳ファイルを生成するためにIntlayerプロジェクトをビルド
+      - name: ⚙️ Intlayerプロジェクトをビルド
+        run: npx intlayer build
 
-      - name: 📤 翻訳プルリクエストの作成または更新
-        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
+      # ステップ 6: AIを使って不足している翻訳を自動で埋める
+      - name: 🤖 欠落している翻訳を自動入力
+        run: npx intlayer fill --git-diff --mode fill --provider $AI_PROVIDER --model $AI_MODEL --api-key $AI_API_KEY
+
+      # ステップ7: 変更があるか確認し、あればコミットする
+      - name: � 変更を確認
+        id: check-changes
+        run: |
+          if [ -n "$(git status --porcelain)" ]; then
+            echo "has-changes=true" >> $GITHUB_OUTPUT
+          else
+            echo "has-changes=false" >> $GITHUB_OUTPUT
+          fi
+
+      # ステップ8: 変更があればコミットしてプッシュする
+      - name: 📤 変更をコミットしてプッシュ
+        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 }}
 ```
 
-> Huskyの場合と同様に、モノレポの場合は `--base-dir` 引数を使用して各アプリを順次処理することができます。
+環境変数を設定するには、GitHub → 設定 → Secrets and variables → Actions に移動し、シークレット（API_KEY）を追加してください。
+
+> Huskyの場合と同様に、モノレポの場合は `--base-dir` 引数を使用して各アプリを順番に処理できます。
 
 > デフォルトでは、`--git-diff` 引数はベース（デフォルトは `origin/main`）から現在のブランチ（デフォルトは `HEAD`）への変更を含む辞書をフィルタリングします。
 
-> Intlayer CLI コマンドとその使用方法の詳細については、[CLIドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_cli.md)を参照してください。
+> Intlayer CLIコマンドとその使用方法の詳細については、[CLIドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_cli.md)を参照してください。
 
 ## ドキュメント履歴
 
-- 5.5.10 - 2025-06-29: 履歴の初期化
+| バージョン | 日付       | 変更内容     |
+| ---------- | ---------- | ------------ |
+| 5.5.10     | 2025-06-29 | 履歴の初期化 |