@intlayer/docs 5.7.6 → 5.7.8

package/docs/hi/intlayer_with_tanstack.md

@@ -0,0 +1,438 @@
+---
+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
+  - JavaScript
+slugs:
+  - doc
+  - environment
+  - tanstack-start
+---
+
+# Intlayer और TanStack Start (React) के साथ अंतरराष्ट्रीयकरण (i18n) शुरू करना
+
+## Intlayer क्या है?
+
+**Intlayer** React ऐप्स के लिए एक ओपन-सोर्स i18n टूलकिट है। यह आपको प्रदान करता है:
+
+- **कंपोनेंट-स्थानीय शब्दकोश** TypeScript सुरक्षा के साथ।
+- **डायनामिक मेटाडेटा और रूट्स** (SEO-तैयार)।
+- **रनटाइम लोकल स्विचिंग** (और लोकल का पता लगाने/सहेजने के लिए सहायक)।
+- **Vite प्लगइन** बिल्ड-टाइम ट्रांसफॉर्म और डेवलपर अनुभव (DX) के लिए।
+
+यह गाइड दिखाता है कि Intlayer को **TanStack Start** प्रोजेक्ट में कैसे जोड़ा जाए (जो अंतर्निहित रूप से Vite का उपयोग करता है और रूटिंग/SSR के लिए TanStack Router का उपयोग करता है)।
+
+---
+
+## चरण 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/पूर्वावलोकन में काम करता है; प्रोडक्शन 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, middleware विकल्प आदि को भी समायोजित कर सकते हैं।
+};
+
+export default config;
+```
+
+यदि आप `cjs`/`mjs` पसंद करते हैं तो CommonJS/ESM वेरिएंट आपके मूल दस्तावेज़ के समान ही हैं।
+
+> पूर्ण कॉन्फ़िग संदर्भ के लिए: 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({ 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: (
+        <>
+          <code>src/routes/index.tsx</code> को संपादित करें और 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: "लोगो पर क्लिक करके अधिक जानें",
+      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 के साथ, आपका **रूट रूट** प्रदाताओं को सेट करने के लिए सही स्थान है।
+
+```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)}>अंग्रेज़ी</button>
+      <button onClick={() => change(Locales.FRENCH)}>फ्रेंच</button>
+      <button onClick={() => change(Locales.SPANISH)}>स्पेनिश</button>
+    </div>
+  );
+}
+```
+
+---
+
+## (वैकल्पिक) चरण 9: `<html lang>` और `dir` (TanStack Start Document)
+
+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>
+      {/* यदि आप सर्वर पर locale की गणना करते हैं, तो इसे 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: स्थानीयकृत लिंक कॉम्पोनेंट
+
+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 ?? "");
+
+// बाहरी URL की जांच करने के लिए फ़ंक्शन
+export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
+  ({ href, children, ...props }, ref) => {
+    const { locale } = useLocale();
+    // यदि href आंतरिक URL है, तो इसे स्थानीयकृत URL में बदलें
+    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 स्टार्ट अनुकूलन जोड़ा गया |

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

@@ -280,7 +280,6 @@ Intlayer आपके Next.js एप्लिकेशन को अंतरर
 - [`useIntlayer()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/packages/next-intlayer/useIntlayer.md)
 - [`useDictionary()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/packages/next-intlayer/useDictionary.md)
 - [`useLocale()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/packages/next-intlayer/useLocale.md)
-- [`useIntlayerAsync()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/packages/next-intlayer/useIntlayerAsync.md)
 
 ## दस्तावेज़ इतिहास
 

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

@@ -273,7 +273,6 @@ Intlayer आपके React एप्लिकेशन को अंतरर
 - [`useIntlayer()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/packages/react-intlayer/useIntlayer.md)
 - [`useDictionary()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/packages/react-intlayer/useDictionary.md)
 - [`useLocale()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/packages/react-intlayer/useLocale.md)
-- [`useIntlayerAsync()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/packages/react-intlayer/useIntlayerAsync.md)
 
 ## दस्तावेज़ इतिहास
 

package/docs/it/CI_CD.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-05-20
-updatedAt: 2025-06-29
+updatedAt: 2025-08-13
 title: Integrazione CI/CD
-description: Scopri come integrare Intlayer nella tua pipeline CI/CD per la gestione e il deployment automatico dei contenuti.
+description: Scopri come integrare Intlayer nella tua pipeline CI/CD per la gestione e il deployment automatizzato dei contenuti.
 keywords:
   - CI/CD
   - Integrazione Continua
@@ -19,13 +19,13 @@ slugs:
 
 # Generazione Automatica delle Traduzioni in una Pipeline CI/CD
 
-Intlayer consente la generazione automatica delle traduzioni per i tuoi file di dichiarazione dei contenuti. Ci sono diversi modi per ottenere questo risultato a seconda del tuo flusso di lavoro.
+Intlayer consente la generazione automatica delle traduzioni per i tuoi file di dichiarazione dei contenuti. Ci sono diversi modi per raggiungere questo obiettivo a seconda del tuo flusso di lavoro.
 
 ## Utilizzo del CMS
 
-Con Intlayer, puoi adottare un flusso di lavoro in cui viene dichiarata localmente una sola lingua, mentre tutte le traduzioni sono gestite da remoto tramite il CMS. Questo permette che i contenuti e le traduzioni siano completamente separati dal codice, offrendo maggiore flessibilità agli editor di contenuti e abilitando il caricamento dinamico dei contenuti (senza necessità di ricostruire l'applicazione per applicare le modifiche).
+Con Intlayer, puoi adottare un flusso di lavoro in cui viene dichiarata localmente una sola lingua, mentre tutte le traduzioni sono gestite da remoto tramite il CMS. Questo permette che contenuti e traduzioni siano completamente separati dal codice, offrendo maggiore flessibilità agli editor di contenuti e abilitando il caricamento dinamico dei contenuti (senza bisogno di ricostruire l'applicazione per applicare le modifiche).
 
-### Configurazione di esempio
+### Configurazione di Esempio
 
 ```ts fileName="intlayer.config.ts"
 import { Locales, type IntlayerConfig } from "intlayer";
@@ -58,7 +58,7 @@ Per saperne di più sul CMS, consulta la [documentazione ufficiale](https://gith
 
 Puoi integrare la generazione delle traduzioni nel tuo flusso di lavoro Git locale usando [Husky](https://typicode.github.io/husky/).
 
-### Configurazione di esempio
+### Configurazione di Esempio
 
 ```ts fileName="intlayer.config.ts"
 import { Locales, type IntlayerConfig } from "intlayer";
@@ -91,7 +91,7 @@ npx intlayer fill --unpushed --mode fill    # Riempie solo i contenuti mancanti,
 
 > Per maggiori informazioni sui comandi CLI di Intlayer e sul loro utilizzo, consulta la [documentazione CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_cli.md).
 
-> Se hai più app nel tuo repository che utilizzano istanze intlayer separate, puoi usare l'argomento `--base-dir` in questo modo:
+> Se hai più app nel tuo repository che utilizzano istanze separate di Intlayer, puoi usare l'argomento `--base-dir` in questo modo:
 
 ```bash fileName=".husky/pre-push"
 # App 1
@@ -103,70 +103,96 @@ npx intlayer build --base-dir ./app2
 npx intlayer fill --base-dir ./app2 --unpushed --mode fill
 ```
 
-## Uso di GitHub Actions
+## Utilizzo di GitHub Actions
 
 Intlayer fornisce un comando CLI per l'autocompletamento e la revisione del contenuto del dizionario. Questo può essere integrato nel tuo flusso di lavoro CI/CD utilizzando GitHub Actions.
 
 ```yaml fileName=".github/workflows/intlayer-translate.yml"
-name: Intlayer Auto-Fill
+name: Compilazione Automatica Intlayer
+# Condizioni di attivazione per questo 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:
+      # Passo 1: Recupera l'ultima versione del codice dal repository
       - name: ⬇️ Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
-          persist-credentials: true
+          persist-credentials: true # Mantieni le credenziali per la creazione delle PR
+          fetch-depth: 0 # Ottieni tutta la cronologia git per l'analisi delle differenze
 
+      # Passo 2: Configura l'ambiente Node.js
       - name: 🟢 Configura Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 20 # Usa Node.js 20 LTS per stabilità
+
+      # Passo 3: Installa le dipendenze del progetto
+      - name: 📦 Installa dipendenze
+        run: npm install
 
-      - name: 📦 Installa le dipendenze
-        run: npm ci
+      # Passo 4: Installa globalmente Intlayer CLI per la gestione delle traduzioni
+      - name: 📦 Installa Intlayer
+        run: npm install -g intlayer-cli
 
-      - name: ⚙️ Compila il progetto Intlayer
+      # Passo 5: Compila il progetto Intlayer per generare i file di traduzione
+      - name: ⚙️ Compila progetto Intlayer
         run: npx intlayer build
 
+      # Passo 6: Usa l'IA per compilare automaticamente le traduzioni mancanti
       - name: 🤖 Compila automaticamente le traduzioni mancanti
-        run: npx intlayer fill --git-diff --mode fill
-
-      - name: 📤 Crea o aggiorna la PR di traduzione
-        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: Controlla se ci sono modifiche e committale
+      - name: � Controlla modifiche
+        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: Commit e push delle modifiche se presenti
+      - name: 📤 Commit e push delle modifiche
+        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: compila automaticamente le traduzioni mancanti [skip ci]"
+          git push origin HEAD:${{ github.head_ref }}
 ```
 
-> Come per Husky, nel caso di un monorepo, puoi utilizzare l'argomento `--base-dir` per trattare sequenzialmente ogni app.
+Per configurare le variabili d'ambiente, vai su GitHub → Impostazioni → Segreti e variabili → Azioni e aggiungi il segreto .
+
+> Come per Husky, nel caso di un monorepo, puoi usare l'argomento `--base-dir` per trattare sequenzialmente ogni app.
 
-> Per impostazione predefinita, l'argomento `--git-diff` filtra i dizionari che includono modifiche dalla base (default `origin/main`) al branch corrente (default: `HEAD`).
+> Per impostazione predefinita, l'argomento `--git-diff` filtra i dizionari che includono modifiche dalla base (default `origin/main`) al ramo corrente (default: `HEAD`).
 
 > Per maggiori informazioni sui comandi CLI di Intlayer e sul loro utilizzo, consulta la [documentazione CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_cli.md).
 
-## Cronologia della Documentazione
+## Cronologia del documento
 
-- 5.5.10 - 2025-06-29: Inizio cronologia
+| Versione | Data       | Modifiche                 |
+| -------- | ---------- | ------------------------- |
+| 5.5.10   | 2025-06-29 | Inizializza la cronologia |