@intlayer/docs 9.4.0-canary.0 → 9.4.0

package/docs/it/formatters.md

@@ -52,42 +52,12 @@ L'`Intl` esportato è un wrapper sottile con cache attorno all'`Intl` globale. M
 
 Poiché la costruzione del formatter è relativamente costosa, questa cache migliora le prestazioni senza modificare il comportamento. Il wrapper espone la stessa API dell'`Intl` nativo, quindi l'uso è identico.
 
-- La cache è per processo e trasparente per i chiamanti.
-
 > Se `Intl.DisplayNames` non è disponibile nell'ambiente, viene stampato un unico avviso solo per gli sviluppatori (considera un polyfill).
 
-Esempi:
-
-```ts
-import { Intl } from "intlayer";
-
-// Formattazione numerica
-const numberFormat = new Intl.NumberFormat("en-GB", {
-  style: "currency",
-  currency: "GBP",
-});
-numberFormat.format(1234.5); // "£1,234.50"
-
-// Nomi visualizzati per lingue, regioni, ecc.
-const displayNames = new Intl.DisplayNames("fr", { type: "language" });
-displayNames.of("en"); // "anglais"
-
-// Ordinamento per confronto
-const collator = new Intl.Collator("fr", { sensitivity: "base" });
-collator.compare("é", "e"); // 0 (uguale)
-
-// Regole plurali
-const pluralRules = new Intl.PluralRules("fr");
-pluralRules.select(1); // "one"
-pluralRules.select(2); // "other"
-```
-
 ## React Formatters
 
 ### `Intl.DisplayNames`
 
-Per nomi localizzati di lingue, regioni, valute e script:
-
 ```ts
 import { Intl } from "intlayer";
 
@@ -116,8 +86,6 @@ Tutti gli hook utilizzano automaticamente la locale da `IntlayerProvider` o `Int
 
 ### `Intl.Collator`
 
-Per il confronto e l'ordinamento di stringhe sensibili alla localizzazione:
-
 ```ts
 import { Intl } from "intlayer";
 
@@ -149,8 +117,6 @@ pluralRules.select(11); // "many"
 
 ### `getLocaleName(displayLocale, targetLocale?)`
 
-Ottiene il nome localizzato di una localizzazione in un'altra localizzazione:
-
 ```ts
 import { getLocaleName } from "intlayer";
 
@@ -159,9 +125,6 @@ getLocaleName("en", "fr"); // "anglais"
 getLocaleName("de", "es"); // "alemán"
 ```
 
-- **displayLocale**: La localizzazione di cui ottenere il nome
-- **targetLocale**: La localizzazione in cui visualizzare il nome (predefinita a displayLocale)
-
 ### Composables Disponibili
 
 Tutti i composables restituiscono computed refs che utilizzano automaticamente la locale dalla `IntlayerProvider` iniettata.
@@ -229,16 +192,12 @@ getLocaleLang("fr-CA"); // "fr"
 getLocaleLang("de"); // "de"
 ```
 
-- **locale**: La localizzazione da cui estrarre la lingua (predefinita alla localizzazione corrente)
-
 ## Vanilla JS / Node.js Formatters
 
 Per contesti non-framework, importa i formatter direttamente da `intlayer`. Nota che devi passare il locale manualmente.
 
 ### `getLocaleFromPath(inputUrl)`
 
-Estrae il segmento di localizzazione da un URL o pathname:
-
 ```ts
 import { getLocaleFromPath } from "intlayer";
 
@@ -248,9 +207,6 @@ getLocaleFromPath("/dashboard"); // "en" (localizzazione predefinita)
 getLocaleFromPath("https://example.com/es/about"); // "es"
 ```
 
-- **inputUrl**: La stringa URL completa o il percorso da elaborare
-- **returns**: La localizzazione rilevata o la localizzazione predefinita se non viene trovata alcuna localizzazione
-
 ### Funzioni Formatter
 
 #### `number(value, options?)`
@@ -363,6 +319,30 @@ list(["red", "green", "blue"], { locale: "fr", type: "disjunction" }); // "rouge
 
 Tutti gli helper seguenti sono esportati da `intlayer`.
 
+```ts
+import { Intl } from "intlayer";
+
+// Formattazione dei numeri
+const numberFormat = new Intl.NumberFormat("en-GB", {
+  style: "currency",
+  currency: "GBP",
+});
+numberFormat.format(1234.5); // "£1,234.50"
+
+// Nomi visualizzati per lingue, regioni, ecc.
+const displayNames = new Intl.DisplayNames("fr", { type: "language" });
+displayNames.of("en"); // "anglais"
+
+// Collazione per l'ordinamento
+const collator = new Intl.Collator("fr", { sensitivity: "base" });
+collator.compare("é", "e"); // 0 (equal)
+
+// Regole di pluralizzazione
+const pluralRules = new Intl.PluralRules("fr");
+pluralRules.select(1); // "one"
+pluralRules.select(2); // "other"
+```
+
 ### Funzionalità Intl Aggiuntive
 
 #### `Intl.DisplayNames`
@@ -414,12 +394,6 @@ pluralRules.select(11); // "many"
 
 ### `currency(value, options?)`
 
-Formatta un valore come valuta localizzata. Il valore predefinito è `USD` con due cifre decimali.
-
-- **value**: `number | string`
-- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
-  - Campi comuni: `currency` (es. `"EUR"`), `currencyDisplay` (`"symbol" | "code" | "name"`)
-
 Esempi:
 
 ```ts
@@ -431,12 +405,6 @@ currency("5000", { locale: "fr", currency: "CAD", currencyDisplay: "code" }); //
 
 ### `date(date, optionsOrPreset?)`
 
-Formatta un valore data/ora con `Intl.DateTimeFormat`.
-
-- **date**: `Date | string | number`
-- **optionsOrPreset**: `Intl.DateTimeFormatOptions & { locale?: LocalesValues }` oppure uno dei preset:
-  - Preset: `"short" | "long" | "dateOnly" | "timeOnly" | "full"`
-
 Esempi:
 
 ```ts
@@ -448,14 +416,6 @@ date("2025-08-02T14:30:00Z", { locale: "fr", month: "long", day: "numeric" }); /
 
 ### `relativeTime(from, to = new Date(), options?)`
 
-Formatta il tempo relativo tra due istanti con `Intl.RelativeTimeFormat`.
-
-- Passa "now" come primo argomento e il target come secondo per ottenere una frase naturale.
-- **from**: `Date | string | number`
-- **to**: `Date | string | number` (default è `new Date()`)
-- **options**: `{ locale?: LocalesValues; unit?: Intl.RelativeTimeFormatUnit; numeric?: Intl.RelativeTimeFormatNumeric; style?: Intl.RelativeTimeFormatStyle }`
-  - L'`unit` predefinita è `"second"`.
-
 Esempi:
 
 ```ts
@@ -471,13 +431,6 @@ relativeTime(now, twoHoursAgo, { unit: "hour", numeric: "auto" }); // "2 ore fa"
 
 ### `units(value, options?)`
 
-Formatta un valore numerico come stringa di unità localizzata usando `Intl.NumberFormat` con `style: 'unit'`.
-
-- **value**: `number | string`
-- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
-  - Campi comuni: `unit` (es., `"kilometer"`, `"byte"`), `unitDisplay` (`"short" | "narrow" | "long"`)
-  - Predefiniti: `unit: 'day'`, `unitDisplay: 'short'`, `useGrouping: false`
-
 Esempi:
 
 ```ts
@@ -489,11 +442,6 @@ units(1024, { unit: "byte", unitDisplay: "narrow" }); // "1,024B" (dipendente da
 
 ### `compact(value, options?)`
 
-Formatta un numero usando la notazione compatta (es., `1.2K`, `1M`).
-
-- **value**: `number | string`
-- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }` (usa internamente `notation: 'compact'`)
-
 Esempi:
 
 ```ts
@@ -505,13 +453,6 @@ compact("1000000", { locale: "fr", compactDisplay: "long" }); // "1 million"
 
 ### `list(values, options?)`
 
-Formatta un array di valori in una stringa di elenco localizzata utilizzando `Intl.ListFormat`.
-
-- **values**: `(string | number)[]`
-- **options**: `Intl.ListFormatOptions & { locale?: LocalesValues }`
-  - Campi comuni: `type` (`"conjunction" | "disjunction" | "unit"`), `style` (`"long" | "short" | "narrow"`)
-  - Predefiniti: `type: 'conjunction'`, `style: 'long'`
-
 Esempi:
 
 ```ts
@@ -576,34 +517,6 @@ const MyComponent = () => {
 };
 ```
 
-Componenti server (o runtime React Server):
-
-```ts
-import {
-  useNumber,
-  useCurrency,
-  useDate,
-  usePercentage,
-  useCompact,
-  useList,
-  useRelativeTime,
-  useUnit,
-} from "react-intlayer/server/format";
-// oppure nelle app Next.js
-import {
-  useNumber,
-  useCurrency,
-  useDate,
-  usePercentage,
-  useCompact,
-  useList,
-  useRelativeTime,
-  useUnit,
-} from "next-intlayer/server/format";
-```
-
-> Questi hook considereranno la locale fornita da `IntlayerProvider` o `IntlayerServerProvider`
-
 ### Vue
 
 Componenti client:
@@ -621,8 +534,6 @@ import {
 } from "vue-intlayer/format";
 ```
 
-> Questi composables considereranno la localizzazione dal `IntlayerProvider` iniettato
-
 ### `getIntlayer(dictionaryKey, locale?, plugins?)`
 
 Recupera e trasforma il contenuto da un dizionario:

package/docs/it/how_works_intlayer.md

@@ -61,7 +61,9 @@ La fase di build può essere eseguita in tre modi:
    - I dizionari sono generati dai file di contenuto. Di default, i dizionari di Intlayer sono generati nella directory `.intlayer/dictionaries` del progetto.
    - Questi dizionari sono generati in diversi formati per soddisfare tutte le esigenze e ottimizzare le prestazioni dell'applicazione.
 
-3. Generazione dei tipi di dizionari
+3. Generazione dei tipi di dizionario
+
+4. Generazione dei tipi di dizionari
    Basandosi sui tuoi `dizionari`, Intlayer genererà tipi per renderli utilizzabili nella tua applicazione.
 
 - I tipi di dizionari sono generati dai `file di dichiarazione dei contenuti` di Intlayer. Di default, i tipi di dizionari di Intlayer sono generati nella directory `.intlayer/types` del progetto.
@@ -98,6 +100,9 @@ Intlayer fornisce anche un editor visivo per consentirti di modificare i tuoi co
 
 ![editor visivo](https://github.com/aymericzip/intlayer/blob/main/docs/assets/visual_editor.gif?raw=true)
 
+- Il server è una semplice applicazione Express che ascolta le richieste dal client e recupera il contenuto della tua applicazione, come i `dictionaries` e la configurazione per renderla accessibile sul lato client.
+- D'altro canto, il client è un'applicazione React che viene utilizzata per interagire con il tuo contenuto usando un'interfaccia visuale.
+
 - Il server è una semplice applicazione Express che ascolta le richieste dal client e recupera il contenuto della tua applicazione, come i `dictionaries` e la configurazione per renderli accessibili dal lato client.
 - D'altra parte, il client è un'applicazione React che viene utilizzata per interagire con i tuoi contenuti tramite un'interfaccia visiva.
   Quando chiami i tuoi contenuti usando `useIntlayer` e l'editor è abilitato, esso avvolge automaticamente le tue stringhe con un oggetto Proxy chiamato `IntlayerNode`. Questo nodo utilizza `window.postMessage` per comunicare con un iframe incapsulato che contiene l'interfaccia dell'editor visivo.
@@ -105,6 +110,8 @@ Intlayer fornisce anche un editor visivo per consentirti di modificare i tuoi co
 
 ## Ottimizzazione della build dell'app
 
+Per ottimizzare la dimensione del bundle della tua applicazione, Intlayer fornisce due plugin per ottimizzare la build della tua applicazione: i plugin `@intlayer/babel` e `@intlayer/swc`.
+
 Per ottimizzare la dimensione del bundle della tua applicazione, Intlayer fornisce due plugin per ottimizzare la build della tua applicazione: i plugin `@intlayer/babel` e `@intlayer/swc`.
 I plugin Babel e SWC funzionano analizzando l'Abstract Syntax Tree (AST) della tua applicazione per sostituire le chiamate alle funzioni di Intlayer con codice ottimizzato. Questo processo rende il bundle finale più leggero in produzione, assicurando che vengano importati solo i dizionari effettivamente utilizzati, ottimizzando il chunking e riducendo la dimensione del bundle.
 

package/docs/it/intlayer_CMS.md

@@ -311,8 +311,6 @@ export const cmsAuthenticator = createIntlayerCMS({
 
 ### Connettere il tuo progetto a un'istanza self-hosted
 
-Punta la tua configurazione Intlayer al tuo backend e dashboard invece di `intlayer.org`:
-
 ```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
 import type { IntlayerConfig } from "intlayer";
 
@@ -338,21 +336,8 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
-Imposta le variabili d'ambiente corrispondenti nel tuo progetto:
-
-```sh
-INTLAYER_CMS_URL=http://localhost:3000
-INTLAYER_BACKEND_URL=http://localhost:3100
-INTLAYER_CLIENT_ID=<your-client-id>
-INTLAYER_CLIENT_SECRET=<your-client-secret>
-```
-
-Crea le credenziali di accesso nel tuo dashboard self-hosted su `http://localhost:3000/projects`.
-
 ### SDK `@intlayer/api`: puntare a un backend self-hosted
 
-Quando si utilizza l'SDK in modo programmatico, passa `backendURL` esplicitamente a `createIntlayerCMS`:
-
 ```typescript fileName="cms.ts" codeFormat="typescript"
 import { createIntlayerCMS } from "@intlayer/api";
 import { dictionaryEndpoint } from "@intlayer/api/dictionary";
@@ -372,6 +357,32 @@ const { data: dictionaries } = await dictionaryEndpoint(cms).getDictionaries();
 
 Queste funzionalità richiedono account esterni e funzionano correttamente anche quando le loro chiavi sono assenti dal `.env` self-hosted:
 
+```typescript fileName="write-dictionaries.ts" codeFormat="typescript"
+import { createIntlayerCMS } from "@intlayer/api";
+import { dictionaryEndpoint } from "@intlayer/api/dictionary";
+
+const cmsAuthenticator = createIntlayerCMS();
+
+// Creare un nuovo dizionario
+await dictionaryEndpoint(cmsAuthenticator).addDictionary({
+  key: "my-first-dictionary-key",
+  content: { title: "Hello world" },
+});
+
+// Upsert un batch di dizionari (creali o aggiornali in una sola chiamata)
+await dictionaryEndpoint(cmsAuthenticator).pushDictionaries([
+  { key: "home", content: { title: "Home" } },
+  { key: "about", content: { title: "About" } },
+]);
+
+// Aggiornare un dizionario esistente
+await dictionaryEndpoint(cmsAuthenticator).updateDictionary({
+  id: "<dictionary-id>",
+  key: "home",
+  content: { title: "Updated title" },
+});
+```
+
 | Funzionalità                        | Variabile/i d'ambiente                          |
 | ----------------------------------- | ----------------------------------------------- |
 | Traduzione / audit con IA           | `OPENAI_API_KEY`                                |
@@ -383,8 +394,6 @@ Queste funzionalità richiedono account esterni e funzionano correttamente anche
 
 ### Persistenza dei dati e aggiornamenti
 
-Tre volumi Docker contengono tutto lo stato persistente: `mongo-data`, `redis-data` e `minio-data`. Sopravvivono ai riavvii e agli aggiornamenti dei container. Eseguire nuovamente il programma di installazione scarica le immagini più recenti ed esegue un `docker compose up -d` progressivo.
-
 Porte esposte sull'host:
 
 | Porta  | Servizio                                                             |
@@ -395,10 +404,6 @@ Porte esposte sull'host:
 | `9000` | API S3 MinIO (necessaria per il caricamento degli asset nel browser) |
 | `9001` | Console MinIO                                                        |
 
-Per un riferimento completo di tutte le variabili d'ambiente disponibili e le opzioni avanzate (proxy inverso, domini personalizzati, backup/ripristino), consulta la [Guida al Self-Hosting](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/self_hosting.md).
-
----
-
 ## Live sync
 
 Live Sync consente all'app di riflettere i cambiamenti del contenuto CMS in fase di runtime — nessuna ricostruzione o ridistribuzione richiesta. Quando abilitato, gli aggiornamenti vengono trasmessi a un server Live Sync che aggiorna i dizionari letti dall'applicazione.

package/docs/it/intlayer_visual_editor.md

@@ -85,6 +85,16 @@ pnpm add intlayer-editor --save-dev
 bun add intlayer-editor --dev
 ```
 
+Con il flag `--with`, puoi avviare l'editor in parallelo con un altro comando:
+
+```json5 fileName="package.json"
+{
+  "scripts": {
+    "start:editor": "npx intlayer-editor start --with 'next dev --turbopack'",
+  },
+}
+```
+
 ## Configurazione
 
 Nel file di configurazione di Intlayer, puoi personalizzare le impostazioni dell'editor:
@@ -146,6 +156,8 @@ export default config;
 
    > **Nota che dovresti eseguire la tua applicazione in parallelo.** L'URL dell'applicazione dovrebbe corrispondere a quello impostato nella configurazione dell'editor (`applicationURL`).
 
+> **Nota il comando è riesportato dal package `intlayer`. Puoi usare `npx intlayer editor start` invece.**
+
 2. Poi, apri l'URL fornito. Di default `http://localhost:8000`.
 
    Puoi visualizzare ogni campo indicizzato da Intlayer passando il cursore sopra il tuo contenuto.

package/docs/it/intlayer_with_adonisjs.md

@@ -258,9 +258,11 @@ import { Locales, type IntlayerConfig } from "intlayer";
 
 const config: IntlayerConfig = {
   // ... Altre opzioni di configurazione
-  middleware: {
-    headerName: "my-locale-header",
-    cookieName: "my-locale-cookie",
+  routing: {
+    storage: [
+      { type: "header", name: "my-locale-header" },
+      { type: "cookie", name: "my-locale-cookie" },
+    ],
   },
 };
 

package/docs/it/intlayer_with_astro.md

@@ -122,6 +122,30 @@ Controlla il [template dell'applicazione](https://github.com/aymericzip/intlayer
 
 Installa i pacchetti necessari utilizzando il tuo gestore di pacchetti preferito:
 
+```bash packageManager="npm"
+npx intlayer init --interactive
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer@canary init --interactive
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer@canary init --interactive
+```
+
+```bash packageManager="bun"
+bunx intlayer@canary init --interactive
+```
+
+> il flag `--interactive` è opzionale. Usa `intlayer-cli init` se sei un agente AI.
+
+> Questo comando rileverà il tuo ambiente e installerà i pacchetti richiesti. Per esempio:
+
+```bash packageManager="npm"
+npm install intlayer astro-intlayer
+```
+
 ```bash packageManager="npm"
 npm install intlayer astro-intlayer
 # Opzionale: Se aggiungi il supporto per le islands di React

package/docs/it/intlayer_with_astro_preact.md

@@ -602,6 +602,12 @@ bun run build # Or bun run dev
 
 ### Configurazione TypeScript
 
+Intlayer utilizza l'augmentation dei moduli per sfruttare i vantaggi di TypeScript e rafforzare il tuo codebase.
+
+![Autocompletion](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
+
+![Errore di traduzione](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
+
 Intlayer utilizza l'aumento dei moduli (module augmentation) per sfruttare TypeScript, rendendo la tua base di codice più robusta. Assicurati che la tua configurazione TypeScript includa i tipi autogenerati e sia configurata per Preact:
 
 ```json5 fileName="tsconfig.json"

package/docs/it/intlayer_with_create_react_app.md

@@ -31,12 +31,34 @@ author: aymericzip
 
 # Traduci la tua Create React App con Intlayer | Internazionalizzazione (i18n)
 
+<iframe
+  src="https://ide.intlayer.org/aymericzip/intlayer-react-cra-template?file=intlayer.config.ts"
+  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
+  title="Demo CodeSandbox - Come internazionalizzare la tua applicazione utilizzando Intlayer"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
 Consulta [Application Template](https://github.com/aymericzip/intlayer-react-cra-template) su GitHub.
 
 ## Cos'è Intlayer?
 
+Rispetto alle principali soluzioni come `react-i18next` o `i18next`, Intlayer è una soluzione che viene fornita con ottimizzazioni integrate come:
+
+<AccordionGroup>
+
+<Accordion header="Copertura completa di React">
+
 **Intlayer** è una libreria innovativa e open-source per l'internazionalizzazione (i18n) progettata per semplificare il supporto multilingue nelle applicazioni web moderne.
 
+</Accordion>
+
+<Accordion header="Dimensione del bundle">
+
+Invece di caricare massivi file JSON nelle tue pagine, carica solo il contenuto necessario. Intlayer ti aiuta a **ridurre le dimensioni del bundle e delle pagine fino al 50%**.
+
+</Accordion>
+
 Con Intlayer, puoi:
 
 - **Gestire facilmente le traduzioni** utilizzando dizionari dichiarativi a livello di componente.
@@ -44,6 +66,35 @@ Con Intlayer, puoi:
 - **Garantire il supporto TypeScript** con tipi autogenerati, migliorando l'autocompletamento e il rilevamento degli errori.
 - **Beneficiare di funzionalità avanzate**, come il rilevamento e il cambio dinamico della lingua.
 
+</Accordion>
+
+<Accordion header="AI Agent">
+
+Co-locating content **riduce il contesto necessario** ai Large Language Models (LLM). Intlayer viene anche fornito con una suite di strumenti, come una **CLI** per testare le traduzioni mancanti, **[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/mcp_server.md)**, e **[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/agent_skills.md)**, per rendere l'esperienza dello sviluppatore (DX) ancora più fluida per gli agenti AI.
+
+</Accordion>
+
+<Accordion header="Automazione">
+
+Utilizza l'automazione per tradurre nella tua pipeline CI/CD utilizzando l'LLM di tua scelta al costo del tuo provider AI. Intlayer offre anche un **compiler** per automatizzare l'estrazione dei contenuti, nonché una [piattaforma web](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_CMS.md) per aiutare a **tradurre in background**.
+
+</Accordion>
+
+<Accordion header="Performance">
+
+Collegare enormi file JSON ai componenti può causare problemi di prestazioni e reattività. Intlayer ottimizza il caricamento dei contenuti al momento della build.
+
+</Accordion>
+
+<Accordion header="Scaling con none-dev">
+
+Più che una semplice soluzione i18n, Intlayer fornisce un **[visual editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_visual_editor.md) self-hosted** e un **[full CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_CMS.md)** per aiutarti a gestire i tuoi contenuti multilingue in **tempo reale**, rendendo la collaborazione con traduttori, copywriter e altri membri del team perfetta. Il contenuto può essere archiviato localmente e/o da remoto.
+
+</Accordion>
+</AccordionGroup>
+
+---
+
 ## Guida passo-passo per configurare Intlayer in un'applicazione React
 
 <Steps>
@@ -96,6 +147,8 @@ bun add intlayer react-intlayer react-scripts-intlayer
 
   Il pacchetto che integra Intlayer con l'applicazione React. Fornisce provider di contesto e hook per l'internazionalizzazione in React.
 
+- **react-scripts-intlayer**
+
 - **react-scripts-intlayer**
   Include i comandi e i plugin `react-scripts-intlayer` per integrare Intlayer con l'applicazione basata su Create React App. Questi plugin sono basati su [craco](https://craco.js.org/) e includono configurazioni aggiuntive per il bundler [Webpack](https://webpack.js.org/).
 
@@ -147,14 +200,6 @@ Modifica i tuoi script per utilizzare react-intlayer
 
 Crea e gestisci le dichiarazioni dei tuoi contenuti per memorizzare le traduzioni:
 
-> Gli script `react-scripts-intlayer` sono basati su [CRACO](https://craco.js.org/). Puoi anche implementare la tua configurazione basata sul plugin craco di Intlayer. [Vedi esempio qui](https://github.com/aymericzip/intlayer/blob/main/examples/react-app/craco.config.js).
-
-</Step>
-
-<Step number={4} title="Dichiarare i tuoi contenuti">
-
-Crea e gestisci le dichiarazioni dei tuoi contenuti per memorizzare le traduzioni:
-
 ```tsx fileName="src/app.content.tsx" codeFormat={["typescript", "esm"]}
 import { t, type Dictionary } from "intlayer";
 import React, { type ReactNode } from "react";
@@ -193,34 +238,6 @@ const appContent = {
 export default appContent;
 ```
 
-```jsx fileName="src/app.content.csx" codeFormat="commonjs"
-const { t } = require("intlayer");
-
-/** @type {import('intlayer').Dictionary} */
-const appContent = {
-  key: "app",
-  content: {
-    getStarted: t({
-      en: "Get started by editing",
-      fr: "Commencez par éditer",
-      es: "Comience por editar",
-      it: "Inizia modificando",
-    }),
-    reactLink: {
-      href: "https://reactjs.org",
-      content: t({
-        en: "Learn React",
-        fr: "Apprendre React",
-        es: "Aprender React",
-        it: "Impara React",
-      }),
-    },
-  },
-};
-
-module.exports = appContent;
-```
-
 > Le dichiarazioni dei tuoi contenuti possono essere definite ovunque nella tua applicazione purché siano incluse nella directory `contentDir` (di default, `./src`). E corrispondano all'estensione del file di dichiarazione dei contenuti (di default, `.content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}`).
 
 > Per maggiori dettagli, consulta la [documentazione sulla dichiarazione dei contenuti](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/dictionary/content_file.md).
@@ -278,6 +295,8 @@ export default App;
 >
 > Per saperne di più sull'hook `useIntlayer`, consulta la [documentazione](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/packages/react-intlayer/useIntlayer.md).
 
+> Per saperne di più sull'hook `useIntlayer`, consulta la [documentazione](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/packages/react-intlayer/useIntlayer.md).
+
 </Step>
 
 <Step number={6} title="Cambia la lingua dei tuoi contenuti" isOptional={true}>
@@ -452,8 +471,6 @@ const App: FC = () => (
 
 <Step number={8} title="Cambiare l'URL quando la lingua cambia" isOptional={true}>
 
-Per cambiare l'URL quando la lingua cambia, puoi usare la proprietà `onLocaleChange` fornita dall'hook `useLocale`. Parallelamente, puoi usare gli hook `useLocation` e `useNavigate` di `react-router-dom` per aggiornare il percorso URL.
-
 Per modificare l'URL quando cambia la lingua, puoi usare la proprietà `onLocaleChange` fornita dall'hook `useLocale`. Parallelamente, puoi utilizzare gli hook `useLocation` e `useNavigate` di `react-router-dom` per aggiornare il percorso URL.
 
 ```tsx fileName="src/components/LocaleSwitcher.tsx" codeFormat={["typescript", "esm"]}
@@ -641,6 +658,8 @@ Per farlo, puoi aggiungere le seguenti istruzioni al tuo file `.gitignore`:
 
 ### Estensione VS Code
 
+Per migliorare la tua esperienza di sviluppo con Intlayer, puoi installare l'estensione ufficiale **Intlayer VS Code Extension**.
+
 Per migliorare la tua esperienza di sviluppo con Intlayer, puoi installare la **Intlayer VS Code Extension** ufficiale.
 [Installa dal Marketplace di VS Code](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)