@intlayer/docs 5.7.6 → 5.7.8

package/docs/fr/intlayer_with_tanstack.md

@@ -0,0 +1,435 @@
+---
+createdAt: 2025-08-11
+updatedAt: 2025-08-11
+title: Prise en main d'Intlayer avec TanStack Start (React)
+description: Ajoutez l'internationalisation à votre application TanStack Start avec Intlayer — dictionnaires au niveau des composants, URLs localisées et métadonnées optimisées pour le SEO.
+keywords:
+  - Internationalisation
+  - Documentation
+  - Intlayer
+  - TanStack Start
+  - TanStack Router
+  - React
+  - i18n
+  - JavaScript
+slugs:
+  - doc
+  - environment
+  - tanstack-start
+---
+
+# Prise en main de l'internationalisation (i18n) avec Intlayer et TanStack Start (React)
+
+## Qu'est-ce qu'Intlayer ?
+
+**Intlayer** est une boîte à outils open-source d'internationalisation pour les applications React. Elle vous offre :
+
+- **Dictionnaires locaux aux composants** avec la sécurité de TypeScript.
+- **Métadonnées et routes dynamiques** (prêtes pour le SEO).
+- **Changement de locale à l'exécution** (et helpers pour détecter/persister les locales).
+- **Plugin Vite** pour les transformations au moment de la build + expérience développeur améliorée.
+
+Ce guide montre comment intégrer Intlayer dans un projet **TanStack Start** (qui utilise Vite en interne et TanStack Router pour le routage/SSR).
+
+---
+
+## Étape 1 : Installer les dépendances
+
+```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** : cœur (configuration, dictionnaires, CLI/transformations).
+- **react-intlayer** : `<IntlayerProvider>` + hooks pour React.
+- **vite-intlayer** : plugin Vite, plus middleware optionnel pour la détection/redirection de locale (fonctionne en dev & SSR/preview ; déplacer dans `dependencies` pour le SSR en production).
+
+---
+
+## Étape 2 : Configurer Intlayer
+
+Créez `intlayer.config.ts` à la racine de votre projet :
+
+```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,
+  },
+  // Vous pouvez aussi ajuster : contentDir, contentFileExtensions, options du middleware, etc.
+};
+
+export default config;
+```
+
+Les variantes CommonJS/ESM sont identiques à votre doc originale si vous préférez `cjs`/`mjs`.
+
+> Référence complète de la configuration : voir la documentation de configuration d’Intlayer.
+
+---
+
+## Étape 3 : Ajouter le plugin Vite (et middleware optionnel)
+
+**TanStack Start utilise Vite**, donc ajoutez le(s) plugin(s) d’Intlayer dans votre `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(),
+    // Optionnel mais recommandé pour la détection de la locale, les cookies et les redirections :
+    intLayerMiddlewarePlugin(),
+  ],
+});
+```
+
+> Si vous déployez en SSR, déplacez `vite-intlayer` dans les `dependencies` pour que le middleware fonctionne en production.
+
+---
+
+## Étape 4 : Déclarez Votre Contenu
+
+Placez vos dictionnaires n'importe où sous `./src` (contentDir par défaut). Exemple :
+
+```tsx fileName="src/app.content.tsx"
+import { t, type Dictionary } from "intlayer";
+import type { ReactNode } from "react";
+
+const appContent = {
+  key: "app",
+  content: {
+    viteLogo: t({ en: "Vite logo", fr: "Logo Vite", es: "Logo Vite" }),
+    reactLogo: t({ en: "React logo", fr: "Logo React", es: "Logo React" }),
+    title: t({
+      en: "TanStack Start + React",
+      fr: "TanStack Start + React",
+      es: "TanStack Start + React",
+    }),
+    count: t({ en: "count is ", fr: "le compte est ", es: "el recuento es " }),
+    edit: t<ReactNode>({
+      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: "Cliquez sur les logos pour en savoir plus",
+      fr: "Cliquez sur les logos pour en savoir plus",
+      es: "Haz clic en los logotipos para saber más",
+    }),
+  },
+} satisfies Dictionary;
+
+export default appContent;
+```
+
+Les variantes JSON/ESM/CJS fonctionnent de la même manière que dans votre document original.
+
+> Contenu TSX ? N’oubliez pas `import React from "react"` si votre configuration en a besoin.
+
+---
+
+## Étape 5 : Envelopper TanStack Start avec Intlayer
+
+Avec TanStack Start, votre **route racine** est l’endroit idéal pour définir les fournisseurs.
+
+```tsx fileName="src/routes/__root.tsx"
+import {
+  Outlet,
+  createRootRoute,
+  Link as RouterLink,
+} from "@tanstack/react-router";
+import { IntlayerProvider, useIntlayer } from "react-intlayer";
+
+function AppShell() {
+  // Exemple d’utilisation d’un dictionnaire au niveau supérieur :
+  const content = useIntlayer("app");
+
+  return (
+    <div>
+      <nav className="flex gap-3 p-3">
+        <RouterLink to="/">Accueil</RouterLink>
+        <RouterLink to="/about">À propos</RouterLink>
+      </nav>
+      <main className="p-6">
+        <h1>{content.title}</h1>
+        <Outlet />
+      </main>
+    </div>
+  );
+}
+
+export const Route = createRootRoute({
+  component: () => (
+    <IntlayerProvider>
+      <AppShell />
+    </IntlayerProvider>
+  ),
+});
+```
+
+Ensuite, utilisez votre contenu dans les pages :
+
+```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>
+      </>
+    );
+  },
+});
+```
+
+> Les attributs de type chaîne (`alt`, `title`, `aria-label`, …) nécessitent `.value` :
+>
+> ```jsx
+> <img alt={c.reactLogo.value} />
+> ```
+
+---
+
+## (Optionnel) Étape 6 : Changement de langue (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)}>English</button>
+      <button onClick={() => setLocale(Locales.FRENCH)}>Français</button>
+      <button onClick={() => setLocale(Locales.SPANISH)}>Español</button>
+    </div>
+  );
+}
+```
+
+---
+
+## (Optionnel) Étape 7 : Routage localisé (URLs optimisées pour le SEO)
+
+Vous avez **deux bons modèles** avec TanStack Start. Choisissez-en un.
+
+Créez un dossier de segment dynamique `src/routes/$locale/` pour que vos URLs soient `/:locale/...`. Dans le layout `$locale`, validez le `params.locale`, définissez `<IntlayerProvider locale=...>`, et affichez un `<Outlet />`. Cette approche est simple, mais vous monterez le reste de vos routes sous `$locale`, et vous aurez besoin d’un arbre supplémentaire sans préfixe si vous ne souhaitez pas que la locale par défaut soit préfixée.
+
+---
+
+## (Optionnel) Étape 8 : Mettre à jour l’URL lors du changement de langue
+
+Avec le Modèle A (basepath), changer de langue signifie **naviguer vers un basepath différent** :
+
+```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 }); // préserve l’historique
+    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>
+  );
+}
+```
+
+---
+
+## (Optionnel) Étape 9 : `<html lang>` et `dir` (Document TanStack Start)
+
+TanStack Start expose un **Document** (coquille HTML racine) que vous pouvez personnaliser. Définissez `lang` et `dir` pour l’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>
+      {/* Si vous calculez la locale côté serveur, transmettez-la dans Document ; sinon le client corrigera après l'hydratation */}
+      <Document locale={document?.documentElement?.lang || "en"}>
+        <Outlet />
+      </Document>
+    </IntlayerProvider>
+  ),
+});
+```
+
+Pour la correction côté client, vous pouvez aussi conserver votre petit 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]);
+};
+```
+
+---
+
+## (Optionnel) Étape 10 : Composant Link localisé
+
+TanStack Router fournit un `<Link/>`, mais si vous avez besoin d'un simple `<a>` qui préfixe automatiquement les URL internes :
+
+```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";
+```
+
+> Si vous utilisez le Modèle A (basepath), le `<Link to="/about" />` de TanStack résout déjà vers `/fr/about` via `basepath`, donc un lien personnalisé est optionnel.
+
+---
+
+## TypeScript
+
+Inclure les types générés par Intlayer :
+
+```json5 fileName="tsconfig.json"
+{
+  "include": ["src", ".intlayer/**/*.ts"],
+}
+```
+
+---
+
+## Git
+
+Ignorer les artefacts générés par Intlayer :
+
+```gitignore
+.intlayer
+```
+
+---
+
+## Extension VS Code
+
+- **Extension Intlayer pour VS Code** → autocomplétion, erreurs, aperçus en ligne, actions rapides.
+  Marketplace : `intlayer.intlayer-vs-code-extension`
+
+---
+
+## Aller Plus Loin
+
+- Éditeur Visuel
+- Mode CMS
+- Détection de la locale à la périphérie / adaptateurs
+
+---
+
+## Historique de la Documentation
+
+| Version | Date       | Modifications                     |
+| ------- | ---------- | --------------------------------- |
+| 1.0.0   | 2025-08-11 | Adaptation TanStack Start ajoutée |

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

@@ -279,7 +279,6 @@ Le package `next-intlayer` fournit également quelques fonctions pour vous aider
 - [`useIntlayer()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/packages/next-intlayer/useIntlayer.md)
 - [`useDictionary()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/packages/next-intlayer/useDictionary.md)
 - [`useLocale()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/packages/next-intlayer/useLocale.md)
-- [`useIntlayerAsync()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/packages/next-intlayer/useIntlayerAsync.md)
 
 ## Historique de la documentation
 

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

@@ -273,7 +273,6 @@ Le package `react-intlayer` fournit également plusieurs fonctions pour vous aid
 - [`useIntlayer()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/packages/react-intlayer/useIntlayer.md)
 - [`useDictionary()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/packages/react-intlayer/useDictionary.md)
 - [`useLocale()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/packages/react-intlayer/useLocale.md)
-- [`useIntlayerAsync()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/packages/react-intlayer/useIntlayerAsync.md)
 
 ## Historique de la documentation
 

package/docs/hi/CI_CD.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-05-20
-updatedAt: 2025-06-29
+updatedAt: 2025-08-13
 title: CI/CD एकीकरण
-description: स्वचालित सामग्री प्रबंधन और परिनियोजन के लिए अपने CI/CD पाइपलाइन में Intlayer को एकीकृत करना सीखें।
+description: स्वचालित सामग्री प्रबंधन और परिनियोजन के लिए Intlayer को अपने CI/CD पाइपलाइन में एकीकृत करना सीखें।
 keywords:
   - CI/CD
   - सतत एकीकरण
@@ -19,13 +19,13 @@ slugs:
 
 # CI/CD पाइपलाइन में स्वचालित अनुवाद उत्पन्न करें
 
-Intlayer आपको अपनी सामग्री घोषणा फ़ाइलों के लिए अनुवादों को स्वचालित रूप से उत्पन्न करने की अनुमति देता है। आपके कार्यप्रवाह के आधार पर इसे प्राप्त करने के कई तरीके हैं।
+Intlayer आपके सामग्री घोषणा फ़ाइलों के लिए अनुवादों का स्वचालित उत्पादन करने की अनुमति देता है। आपके कार्यप्रवाह के आधार पर इसे प्राप्त करने के कई तरीके हैं।
 
 ## CMS का उपयोग करना
 
-Intlayer के साथ, आप एक ऐसा कार्यप्रवाह अपना सकते हैं जहाँ केवल एक ही स्थानीय भाषा स्थानीय रूप से घोषित की जाती है, जबकि सभी अनुवाद CMS के माध्यम से दूरस्थ रूप से प्रबंधित किए जाते हैं। इससे सामग्री और अनुवाद पूरी तरह से कोडबेस से अलग हो जाते हैं, जो सामग्री संपादकों के लिए अधिक लचीलापन प्रदान करता है और हॉट कंटेंट रीलोडिंग सक्षम करता है (परिवर्तन लागू करने के लिए एप्लिकेशन को पुनर्निर्माण करने की आवश्यकता नहीं होती)।
+Intlayer के साथ, आप एक ऐसा कार्यप्रवाह अपना सकते हैं जहाँ केवल एक ही स्थानीय भाषा स्थानीय रूप से घोषित की जाती है, जबकि सभी अनुवाद CMS के माध्यम से दूरस्थ रूप से प्रबंधित किए जाते हैं। यह सामग्री और अनुवादों को कोडबेस से पूरी तरह से अलग करने की अनुमति देता है, जिससे सामग्री संपादकों के लिए अधिक लचीलापन मिलता है और हॉट कंटेंट रीलोडिंग सक्षम होती है (परिवर्तन लागू करने के लिए एप्लिकेशन को पुनः निर्माण करने की आवश्यकता नहीं होती)।
 
-### उदाहरण कॉन्फ़िगरेशन
+### उदाहरण विन्यास
 
 ```ts fileName="intlayer.config.ts"
 import { Locales, type IntlayerConfig } from "intlayer";
@@ -41,11 +41,11 @@ const config: IntlayerConfig = {
 
     applicationURL: process.env.APPLICATION_URL, // CMS द्वारा उपयोग किया जाने वाला एप्लिकेशन URL
 
-    clientId: process.env.INTLAYER_CLIENT_ID, // CMS क्रेडेंशियल्स
+    clientId: process.env.INTLAYER_CLIENT_ID, // CMS प्रमाणपत्र
     clientSecret: process.env.INTLAYER_CLIENT_SECRET,
   },
   ai: {
-    applicationContext: "This is a test application", // सुनिश्चित करता है कि अनुवाद सुसंगत रूप से उत्पन्न हो
+    applicationContext: "यह एक परीक्षण एप्लिकेशन है", // सुनिश्चित करता है कि अनुवाद सुसंगत रूप से उत्पन्न हों
   },
 };
 
@@ -56,9 +56,9 @@ CMS के बारे में अधिक जानने के लिए,
 
 ## Husky का उपयोग करना
 
-आप [Husky](https://typicode.github.io/husky/) का उपयोग करके अपने स्थानीय Git वर्कफ़्लो में अनुवाद उत्पादन को एकीकृत कर सकते हैं।
+आप अपने स्थानीय Git वर्कफ़्लो में अनुवाद निर्माण को [Husky](https://typicode.github.io/husky/) का उपयोग करके एकीकृत कर सकते हैं।
 
-### उदाहरण कॉन्फ़िगरेशन
+### उदाहरण विन्यास
 
 ```ts fileName="intlayer.config.ts"
 import { Locales, type IntlayerConfig } from "intlayer";
@@ -66,7 +66,7 @@ import { Locales, type IntlayerConfig } from "intlayer";
 const config: IntlayerConfig = {
   internationalization: {
     locales: [Locales.ENGLISH, Locales.SPANISH, Locales.FRENCH],
-    requiredLocales: [Locales.ENGLISH], // वैकल्पिक भाषाओं को दूरस्थ रूप से संभाला जाता है
+    requiredLocales: [Locales.ENGLISH], // वैकल्पिक लोकल दूरस्थ रूप से संभाले जाते हैं
     defaultLocale: Locales.ENGLISH,
   },
   editor: {
@@ -75,9 +75,9 @@ const config: IntlayerConfig = {
   },
   ai: {
     provider: "openai",
-    apiKey: process.env.OPENAI_API_KEY, // अपना API कुंजी उपयोग करें
+    apiKey: process.env.OPENAI_API_KEY, // अपना स्वयं का API कुंजी उपयोग करें
 
-    applicationContext: "This is a test application", // सुनिश्चित करता है कि अनुवाद सुसंगत रूप से उत्पन्न हो
+    applicationContext: "यह एक परीक्षण एप्लिकेशन है", // सुनिश्चित करता है कि अनुवाद सुसंगत रूप से उत्पन्न हों
   },
 };
 
@@ -108,61 +108,84 @@ npx intlayer fill --base-dir ./app2 --unpushed --mode fill
 Intlayer एक CLI कमांड प्रदान करता है जो शब्दकोश सामग्री को स्वचालित रूप से भरने और समीक्षा करने के लिए है। इसे GitHub Actions का उपयोग करके आपके CI/CD वर्कफ़्लो में एकीकृत किया जा सकता है।
 
 ```yaml fileName=".github/workflows/intlayer-translate.yml"
-name: Intlayer Auto-Fill
+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 # PRs बनाने के लिए क्रेडेंशियल्स रखें
+          fetch-depth: 0 # डिफ़ एनालिसिस के लिए पूरी गिट हिस्ट्री प्राप्त करें
 
-      - 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 का उपयोग करें
+
+      # चरण 3: प्रोजेक्ट निर्भरताएँ इंस्टॉल करें
+      - name: 📦 निर्भरताएँ इंस्टॉल करें
+        run: npm install
 
-      - name: 📦 निर्भरताएँ स्थापित करें
-        run: npm ci
+      # चरण 4: अनुवाद प्रबंधन के लिए Intlayer CLI को ग्लोबली इंस्टॉल करें
+      - name: 📦 Intlayer इंस्टॉल करें
+        run: npm install -g intlayer-cli
 
+      # चरण 5: अनुवाद फ़ाइलें उत्पन्न करने के लिए Intlayer प्रोजेक्ट बनाएं
       - name: ⚙️ Intlayer प्रोजेक्ट बनाएं
         run: npx intlayer build
 
+      # चरण 6: AI का उपयोग करके स्वचालित रूप से गायब अनुवाद भरें
       - name: 🤖 गायब अनुवादों को स्वचालित रूप से भरें
-        run: npx intlayer fill --git-diff --mode fill
-
-      - name: 📤 अनुवाद PR बनाएं या अपडेट करें
-        uses: peter-evans/create-pull-request@v4
-        with:
-          commit-message: chore: स्वचालित रूप से गायब अनुवाद भरें [skip ci]
-          branch: auto-translations
-          title: chore: गायब अनुवाद अपडेट करें
-          labels: translation, automated
-
+        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: गायब अनुवादों को स्वचालित रूप से भरें [skip ci]"
+          git push origin HEAD:${{ github.head_ref }}
 ```
 
-> हस्की के लिए जैसा है, मोनोरिपो के मामले में, आप प्रत्येक ऐप को क्रमिक रूप से संसाधित करने के लिए `--base-dir` तर्क का उपयोग कर सकते हैं।
+पर्यावरण चर सेट करने के लिए, GitHub → Settings → Secrets and variables → Actions पर जाएं और सीक्रेट जोड़ें।
+
+> Husky के समान, मोनोरिपो के मामले में, आप प्रत्येक ऐप को क्रमिक रूप से संसाधित करने के लिए `--base-dir` तर्क का उपयोग कर सकते हैं।
 
 > डिफ़ॉल्ट रूप से, `--git-diff` तर्क उन शब्दकोशों को फ़िल्टर करता है जिनमें बेस (डिफ़ॉल्ट `origin/main`) से वर्तमान शाखा (डिफ़ॉल्ट: `HEAD`) तक के परिवर्तन शामिल होते हैं।
 
@@ -170,4 +193,6 @@ jobs:
 
 ## दस्तावेज़ इतिहास
 
-- 5.5.10 - 2025-06-29: इतिहास प्रारंभ किया गया
+| संस्करण | दिनांक     | परिवर्तन            |
+| ------- | ---------- | ------------------- |
+| 5.5.10  | 2025-06-29 | इतिहास प्रारंभ करें |