@intlayer/docs 5.7.6 → 5.7.8

package/docs/ar/intlayer_with_tanstack.md

@@ -0,0 +1,457 @@
+---
+createdAt: 2025-08-11
+updatedAt: 2025-08-11
+title: البدء مع Intlayer في TanStack Start (React)
+description: أضف التدويل (i18n) إلى تطبيق TanStack Start الخاص بك باستخدام Intlayer — قواميس على مستوى المكونات، عناوين URL محلية، وبيانات وصفية صديقة لمحركات البحث.
+keywords:
+  - التدويل
+  - التوثيق
+  - Intlayer
+  - TanStack Start
+  - TanStack Router
+  - React
+  - i18n
+  - جافا سكريبت
+slugs:
+  - doc
+  - environment
+  - tanstack-start
+---
+
+# البدء بالتدويل (i18n) مع Intlayer و TanStack Start (React)
+
+## ما هو Intlayer؟
+
+**Intlayer** هو مجموعة أدوات مفتوحة المصدر للتدويل (i18n) لتطبيقات React. يوفر لك:
+
+- **قواميس محلية للمكونات** مع أمان TypeScript.
+- **بيانات وصفية ومسارات ديناميكية** (جاهزة لتحسين محركات البحث).
+- **تبديل اللغة أثناء التشغيل** (ومساعدات لاكتشاف/حفظ اللغة).
+- **مكون إضافي لـ Vite** لتحويلات وقت البناء + تجربة تطوير محسنة.
+
+يوضح هذا الدليل كيفية توصيل Intlayer بمشروع **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**: `<IntlayerProvider>` + هوكس لـ React.
+- **vite-intlayer**: مكون Vite الإضافي، بالإضافة إلى وسيط اختياري لاكتشاف اللغة/إعادة التوجيه (يعمل في التطوير و SSR/المعاينة؛ انقل إلى `dependencies` لـ SSR في الإنتاج).
+
+---
+
+## الخطوة 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: إعلان المحتوى الخاص بك
+
+ضع قواميسك في أي مكان تحت `./src` (المجلد الافتراضي `contentDir`). مثال:
+
+```tsx fileName="src/app.content.tsx"
+import { t, type Dictionary } from "intlayer";
+import type { ReactNode } from "react";
+
+const appContent = {
+  key: "app",
+  content: {
+    viteLogo: t({
+      ar: "شعار Vite",
+      en: "Vite logo",
+      fr: "Logo Vite",
+      es: "Logo Vite",
+    }),
+    reactLogo: t({
+      ar: "شعار React",
+      en: "React logo",
+      fr: "Logo React",
+      es: "Logo React",
+    }),
+    title: t({
+      ar: "TanStack Start + React",
+      en: "TanStack Start + React",
+      fr: "TanStack Start + React",
+      es: "TanStack Start + React",
+    }),
+    count: t({
+      ar: "العدد هو ",
+      en: "count is ",
+      fr: "le compte est ",
+      es: "el recuento es ",
+    }),
+    edit: t<ReactNode>({
+      ar: (
+        <>
+          حرر <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({
+      ar: "انقر على الشعارات لمعرفة المزيد",
+      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 variants تعمل بنفس الطريقة كما في مستندك الأصلي.
+
+> محتوى TSX؟ لا تنسَ `import React from "react"` إذا كانت إعداداتك تحتاج ذلك.
+
+---
+
+## الخطوة 5: لف TanStack Start باستخدام Intlayer
+
+مع TanStack Start، فإن **المسار الجذري** هو المكان المناسب لتعيين المزودين.
+
+```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: التوجيه المحلي (عناوين URL صديقة لتحسين محركات البحث)
+
+لديك **نموذجان جيدان** مع TanStack Start. اختر واحدًا.
+
+قم بإنشاء مجلد مقطع ديناميكي `src/routes/$locale/` بحيث تكون عناوين URL الخاصة بك `/:locale/...`. في تخطيط `$locale`، تحقق من صحة `params.locale`، وقم بتعيين `<IntlayerProvider locale=...>`، وقم بعرض `<Outlet />`. هذا النهج مباشر، ولكنك ستقوم بتركيب بقية مساراتك تحت `$locale`، وستحتاج إلى شجرة إضافية بدون بادئة إذا لم ترغب في إضافة بادئة اللغة الافتراضية.
+
+---
+
+## (اختياري) الخطوة 8: تحديث عنوان URL عند تبديل اللغة
+
+مع النمط أ (المسار الأساسي)، يعني تبديل اللغات **التنقل إلى مسار أساسي مختلف**:
+
+```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)}>الإنجليزية</button>
+      <button onClick={() => change(Locales.FRENCH)}>الفرنسية</button>
+      <button onClick={() => change(Locales.SPANISH)}>الإسبانية</button>
+    </div>
+  );
+}
+```
+
+---
+
+## (اختياري) الخطوة 9: `<html lang>` و `dir` (مستند TanStack Start)
+
+يوفر TanStack Start **مستند** (هيكل HTML الجذري) يمكنك تخصيصه. قم بتعيين `lang` و `dir` لتحسين إمكانية الوصول و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>
+      {/* إذا كنت تحسب اللغة على الخادم، قم بتمريرها إلى المستند؛ وإلا سيصححها العميل بعد التحميل */}
+      <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: مكون الرابط المحلي
+
+يوفر TanStack Router مكون `<Link/>`، ولكن إذا كنت بحاجة إلى عنصر `<a>` عادي يضيف بادئة تلقائية لعناوين URL الداخلية:
+
+```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";
+```
+
+> إذا كنت تستخدم النمط أ (basepath)، فإن `<Link to="/about" />` الخاص بـ TanStack يحل بالفعل إلى `/fr/about` عبر `basepath`، لذا فإن استخدام رابط مخصص هو أمر اختياري.
+
+---
+
+## TypeScript
+
+قم بتضمين الأنواع التي تم إنشاؤها بواسطة Intlayer:
+
+```json5 fileName="tsconfig.json"
+{
+  "include": ["src", ".intlayer/**/*.ts"],
+}
+```
+
+---
+
+## Git
+
+تجاهل الملفات الناتجة عن Intlayer:
+
+```gitignore
+.intlayer
+```
+
+---
+
+## امتداد VS Code
+
+- **امتداد Intlayer لـ VS Code** → الإكمال التلقائي، الأخطاء، المعاينات المضمنة، الإجراءات السريعة.
+  السوق: `intlayer.intlayer-vs-code-extension`
+
+---
+
+## التقدم أكثر
+
+- المحرر المرئي
+- وضع CMS
+- اكتشاف اللغة على الحافة / المحولات
+
+---
+
+## تاريخ الوثيقة
+
+| الإصدار | التاريخ    | التغييرات                      |
+| ------- | ---------- | ------------------------------ |
+| 1.0.0   | 2025-08-11 | تمت إضافة تكييف TanStack Start |

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

@@ -280,7 +280,6 @@ const ClientComponentExample = () => {
 - [`useIntlayer()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/packages/next-intlayer/useIntlayer.md)
 - [`useDictionary()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/packages/next-intlayer/useDictionary.md)
 - [`useLocale()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/packages/next-intlayer/useLocale.md)
-- [`useIntlayerAsync()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/packages/next-intlayer/useIntlayerAsync.md)
 
 ## تاريخ الوثيقة
 

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

@@ -273,7 +273,6 @@ const Component1Example = () => {
 - [`useIntlayer()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/packages/react-intlayer/useIntlayer.md)
 - [`useDictionary()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/packages/react-intlayer/useDictionary.md)
 - [`useLocale()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/packages/react-intlayer/useLocale.md)
-- [`useIntlayerAsync()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/packages/react-intlayer/useIntlayerAsync.md)
 
 ## تاريخ الوثيقة
 

package/docs/de/CI_CD.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-05-20
-updatedAt: 2025-06-29
+updatedAt: 2025-08-13
 title: CI/CD-Integration
 description: Erfahren Sie, wie Sie Intlayer in Ihre CI/CD-Pipeline für automatisiertes Content-Management und Deployment integrieren.
 keywords:
@@ -19,11 +19,11 @@ slugs:
 
 # Automatische Generierung von Übersetzungen in einer CI/CD-Pipeline
 
-Intlayer ermöglicht die automatische Generierung von Übersetzungen für Ihre Content-Deklarationsdateien. Es gibt verschiedene Möglichkeiten, dies je nach Ihrem Workflow zu erreichen.
+Intlayer ermöglicht die automatische Generierung von Übersetzungen für Ihre Content-Deklarationsdateien. Es gibt verschiedene Möglichkeiten, dies je nach Ihrem Workflow zu realisieren.
 
 ## Verwendung des CMS
 
-Mit Intlayer können Sie einen Workflow übernehmen, bei dem nur eine einzige Locale lokal deklariert wird, während alle Übersetzungen remote über das CMS verwaltet werden. Dies ermöglicht es, Inhalte und Übersetzungen vollständig von der Codebasis zu trennen, bietet mehr Flexibilität für Content-Editoren und ermöglicht ein Hot Content Reloading (kein Neubauen der Anwendung erforderlich, um Änderungen anzuwenden).
+Mit Intlayer können Sie einen Workflow verwenden, bei dem nur eine einzige Locale lokal deklariert wird, während alle Übersetzungen remote über das CMS verwaltet werden. Dies ermöglicht es, Inhalte und Übersetzungen vollständig von der Codebasis zu trennen, bietet mehr Flexibilität für Content-Editoren und ermöglicht ein Hot Content Reloading (kein erneutes Bauen der Anwendung erforderlich, um Änderungen anzuwenden).
 
 ### Beispielkonfiguration
 
@@ -52,7 +52,7 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
-Um mehr über das CMS zu erfahren, siehe die [offizielle Dokumentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_CMS.md).
+Um mehr über das CMS zu erfahren, lesen Sie die [offizielle Dokumentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_CMS.md).
 
 ## Verwendung von Husky
 
@@ -85,11 +85,11 @@ export default config;
 ```
 
 ```bash fileName=".husky/pre-push"
-npx intlayer build                          # Um sicherzustellen, dass die Wörterbücher aktuell sind
-npx intlayer fill --unpushed --mode fill    # Füllt nur fehlende Inhalte, aktualisiert keine bestehenden
+npx intlayer build                          # Um sicherzustellen, dass die Wörterbücher auf dem neuesten Stand sind
+npx intlayer fill --unpushed --mode fill    # Nur fehlende Inhalte ausfüllen, bestehende nicht aktualisieren
 ```
 
-> Für weitere Informationen zu den Intlayer-CLI-Befehlen und deren Verwendung siehe die [CLI-Dokumentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_cli.md).
+> Für weitere Informationen zu den Intlayer CLI-Befehlen und deren Verwendung siehe die [CLI-Dokumentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_cli.md).
 
 > Wenn Sie mehrere Apps in Ihrem Repository haben, die separate Intlayer-Instanzen verwenden, können Sie das Argument `--base-dir` wie folgt verwenden:
 
@@ -105,68 +105,94 @@ npx intlayer fill --base-dir ./app2 --unpushed --mode fill
 
 ## Verwendung von GitHub Actions
 
-Intlayer stellt einen CLI-Befehl zum automatischen Ausfüllen und Überprüfen von Wörterbuchinhalten bereit. Dies kann in Ihren CI/CD-Workflow mit GitHub Actions integriert werden.
+Intlayer bietet einen CLI-Befehl zum automatischen Ausfüllen und Überprüfen von Wörterbuchinhalten. Dies kann in Ihren CI/CD-Workflow mit GitHub Actions integriert werden.
 
 ```yaml fileName=".github/workflows/intlayer-translate.yml"
 name: Intlayer Auto-Fill
+# Auslöserbedingungen für diesen Workflow
 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:
+      # Schritt 1: Hole den neuesten Code aus dem Repository
       - name: ⬇️ Repository auschecken
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
-          persist-credentials: true
+          persist-credentials: true # Anmeldeinformationen zum Erstellen von PRs beibehalten
+          fetch-depth: 0 # Vollständige Git-Historie für Differenzanalyse abrufen
 
+      # Schritt 2: Node.js-Umgebung einrichten
       - name: 🟢 Node.js einrichten
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 20 # Node.js 20 LTS für Stabilität verwenden
 
+      # Schritt 3: Projektabhängigkeiten installieren
       - name: 📦 Abhängigkeiten installieren
-        run: npm ci
+        run: npm install
+
+      # Schritt 4: Intlayer CLI global für Übersetzungsmanagement installieren
+      - name: 📦 Intlayer installieren
+        run: npm install -g intlayer-cli
 
+      # Schritt 5: Intlayer-Projekt bauen, um Übersetzungsdateien zu generieren
       - name: ⚙️ Intlayer-Projekt bauen
         run: npx intlayer build
 
+      # Schritt 6: KI verwenden, um fehlende Übersetzungen automatisch auszufüllen
       - name: 🤖 Fehlende Übersetzungen automatisch ausfüllen
-        run: npx intlayer fill --git-diff --mode fill
-
-      - name: 📤 Übersetzungs-PR erstellen oder aktualisieren
-        uses: peter-evans/create-pull-request@v4
-        with:
-          commit-message: chore: fehlende Übersetzungen automatisch ausfüllen [skip ci]
-          branch: auto-translations
-          title: chore: fehlende Übersetzungen aktualisieren
-          labels: translation, automated
+        run: npx intlayer fill --git-diff --mode fill --provider $AI_PROVIDER --model $AI_MODEL --api-key $AI_API_KEY
+
+      # Schritt 7: Prüfen, ob Änderungen vorliegen und diese committen
+      - name: � Auf Änderungen prüfen
+        id: check-changes
+        run: |
+          if [ -n "$(git status --porcelain)" ]; then
+            echo "has-changes=true" >> $GITHUB_OUTPUT
+          else
+            echo "has-changes=false" >> $GITHUB_OUTPUT
+          fi
+
+      # Schritt 8: Änderungen committen und pushen, falls vorhanden
+      - name: 📤 Änderungen committen und pushen
+        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: fehlende Übersetzungen automatisch ausfüllen [skip ci]"
+          git push origin HEAD:${{ github.head_ref }}
 ```
 
+Um die Umgebungsvariablen einzurichten, gehen Sie zu GitHub → Einstellungen → Geheimnisse und Variablen → Aktionen und fügen Sie das Geheimnis hinzu.
+
 > Wie bei Husky können Sie im Fall eines Monorepos das Argument `--base-dir` verwenden, um jede App nacheinander zu behandeln.
 
 > Standardmäßig filtert das Argument `--git-diff` Wörterbücher, die Änderungen vom Basiszweig (Standard `origin/main`) zum aktuellen Zweig (Standard: `HEAD`) enthalten.
 
-> Für weitere Informationen zu den Intlayer-CLI-Befehlen und deren Verwendung lesen Sie bitte die [CLI-Dokumentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_cli.md).
+> Für weitere Informationen zu den Intlayer CLI-Befehlen und deren Verwendung lesen Sie bitte die [CLI-Dokumentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_cli.md).
 
-## Dokumentationsverlauf
+## Dokumentationshistorie
 
-- 5.5.10 - 2025-06-29: Initialer Verlauf
+| Version | Datum      | Änderungen              |
+| ------- | ---------- | ----------------------- |
+| 5.5.10  | 2025-06-29 | Historie initialisieren |