@intlayer/docs 8.11.2 → 8.11.3

package/docs/it/intlayer_with_tanstack.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-09-09
-updatedAt: 2026-05-06
-title: Tanstack Start i18n - Come tradurre un'app Tanstack Start nel 2026
-description: Scopri come aggiungere l'internazionalizzazione (i18n) alla tua applicazione TanStack Start utilizzando Intlayer. Segui questa guida completa per rendere la tua app multilingue con il routing consapevole della localizzazione.
+updatedAt: 2026-05-31
+title: Tanstack Start i18n - Guida completa per tradurre TanStack Start
+description: La migliore soluzione per dimensione del bundle, SEO, prestazioni & manutenibilità. Rendi il tuo TanStack Start applicazione multilingue nel 2026, traduzione LLM, Agent Skills & MCP.
 keywords:
   - Internazionalizzazione
   - Documentazione
@@ -55,17 +55,47 @@ history:
 
 Questa guida dimostra come integrare **Intlayer** per un'internazionalizzazione senza interruzioni nei progetti TanStack Start con routing consapevole della localizzazione, supporto TypeScript e pratiche di sviluppo moderne.
 
-## Cos'è Intlayer?
+## Perché Intlayer rispetto alle alternative?
 
-**Intlayer** è una libreria di internazionalizzazione (i18n) innovativa e open-source progettata per semplificare il supporto multilingue nelle moderne applicazioni web.
+Rispetto alle soluzioni principali come `react-i18next` o `use-intl` o `paraglide`, Intlayer è una soluzione dotata di ottimizzazioni integrate come:
 
-Con Intlayer, puoi:
+<AccordionGroup>
+<Accordion header="Copertura completa TanStack Start">
 
-- **Gestire facilmente le traduzioni** utilizzando dizionari dichiarativi a livello di componente.
-- **Localizzare dinamicamente metadati, rotte e contenuti**.
-- **Garantire il supporto TypeScript** con tipi generati automaticamente, migliorando l'autocompletamento e il rilevamento degli errori.
-- **Beneficiare di funzionalità avanzate**, come il rilevamento e la commutazione dinamica della localizzazione.
-- **Abilitare il routing consapevole della localizzazione** con il sistema di routing basato su file di TanStack Start.
+Intlayer è completamente ottimizzato per TanStack Start, fornendo **routing multilingue**, **gestione dei cookie**, **generazione di mappe del sito**, **caricamento dinamico dei contenuti** e tutte le funzionalità necessarie per scalare i tuoi sforzi di internazionalizzazione (i18n).
+
+</Accordion>
+<Accordion header="Dimensione del bundle">
+
+Invece di caricare enormi file JSON nelle tue pagine, carica solo il contenuto necessario. Intlayer aiuta a **ridurre le dimensioni del bundle e della pagina fino al 50%**.
+
+</Accordion>
+<Accordion header="Manutenibilità">
+
+L'ambito del contenuto dell'applicazione **facilita la manutenzione** per applicazioni su larga scala. Puoi duplicare o eliminare una singola cartella di funzionalità senza l'onere mentale di rivedere l'intera codebase dei contenuti. Inoltre, Intlayer è **completamente tipizzato (fully typed)** per garantire l'accuratezza dei tuoi contenuti.
+
+</Accordion>
+<Accordion header="Agente IA">
+
+La co-localizzazione dei contenuti **riduce il contesto necessario** dai Large Language Models (LLM). Intlayer viene fornito anche con una suite di strumenti, come una **CLI** per verificare le traduzioni mancanti,**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** e **[capacità dell'agente](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, per rendere l'esperienza dello sviluppatore (DX) ancora più fluida per gli agenti IA.
+
+</Accordion>
+<Accordion header="Automazione">
+
+Utilizza l'automazione per tradurre nella tua pipeline CI/CD utilizzando il LLM di tua scelta al costo del tuo provider di intelligenza artificiale. Intlayer offre anche un **compilatore** per automatizzare l'estrazione dei contenuti, nonché una [piattaforma web](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) per aiutare a **tradurre in background**.
+
+</Accordion>
+<Accordion header="Prestazione">
+
+La connessione di enormi file JSON ai componenti può portare a problemi di prestazioni e reattività. Intlayer ottimizza il caricamento dei contenuti in fase di compilazione.
+
+</Accordion>
+<Accordion header="Scalabilità con nessuno sviluppatore">
+
+Più di una semplice soluzione i18n, Intlayer fornisce un **[editor visivo](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** self-hosted e un **[CMS completo](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** per aiutarti gestisci i tuoi contenuti multilingue in **tempo reale**, semplificando la collaborazione con traduttori, copywriter e altri membri del team. I contenuti possono essere archiviati localmente e/o in remoto.
+
+</Accordion>
+</AccordionGroup>
 
 ---
 
@@ -103,11 +133,15 @@ Con Intlayer, puoi:
 
 Vedi il [Template dell'Applicazione](https://github.com/aymericzip/intlayer-tanstack-start-template) su GitHub.
 
-### Passaggio 1: Creare il Progetto
+<Steps>
+
+<Step number={1} title="Creare il Progetto">
 
 Inizia creando un nuovo progetto TanStack Start seguendo la guida [Avvia nuovo progetto](https://tanstack.com/start/latest/docs/framework/react/quick-start) sul sito web di TanStack Start.
 
-### Passaggio 2: Installare i Pacchetti Intlayer
+</Step>
+
+<Step number={2} title="Installare i Pacchetti Intlayer">
 
 Installa i pacchetti necessari utilizzando il tuo gestore di pacchetti preferito:
 
@@ -145,7 +179,9 @@ bun x intlayer init
 - **vite-intlayer**
   Include il plugin Vite per l'integrazione di Intlayer con il [bundler Vite](https://vite.dev/guide/why.html#why-bundle-for-production), oltre al middleware per il rilevamento della localizzazione preferita dell'utente, la gestione dei cookie e la gestione del reindirizzamento degli URL.
 
-### Passaggio 3: Configurazione del tuo progetto
+</Step>
+
+<Step number={3} title="Configurazione del tuo progetto">
 
 Crea un file di configurazione per configurare le lingue della tua applicazione:
 
@@ -166,7 +202,9 @@ export default config;
 
 > Attraverso questo file di configurazione, puoi impostare URL localizzati, reindirizzamento middleware, nomi dei cookie, la posizione e l'estensione delle tue dichiarazioni di contenuto, disabilitare i log di Intlayer nella console e altro ancora. Per un elenco completo dei parametri disponibili, fai riferimento alla [documentazione di configurazione](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/configuration.md).
 
-### Passaggio 4: Integrare Intlayer nella tua Configurazione Vite
+</Step>
+
+<Step number={4} title="Integrare Intlayer nella tua Configurazione Vite">
 
 Aggiungi il plugin intlayer nella tua configurazione:
 
@@ -196,7 +234,9 @@ export default config;
 
 > Il plugin Vite `intlayer()` viene utilizzato per integrare Intlayer con Vite. Garantisce la creazione dei file di dichiarazione del contenuto e li monitora in modalità sviluppo. Definisce le variabili d'ambiente di Intlayer all'interno dell'applicazione Vite. Inoltre, fornisce alias per ottimizzare le prestazioni.
 
-### Passaggio 5: Creare il Layout Root
+</Step>
+
+<Step number={5} title="Creare il Layout Root">
 
 Configura il tuo layout root per supportare l'internazionalizzazione utilizzando `useParams` per rilevare la localizzazione corrente e impostando gli attributi `lang` e `dir` sul tag `html`.
 
@@ -256,7 +296,9 @@ function RootDocument({ children }: { children: ReactNode }) {
 > <img src="{String(content.image.src)}" alt="{String(content.image)}" />
 > ```
 
-### Passaggio 6: Creare il Layout di Localizzazione
+</Step>
+
+<Step number={6} title="Creare il Layout di Localizzazione">
 
 Crea un layout che gestisca il prefisso di localizzazione ed esegua la validazione.
 
@@ -288,7 +330,9 @@ export const Route = createFileRoute("/{-$locale}")({
 > Per la modalità `'prefix-all'`, potresti preferire passare allo slot `$locale`.
 > Per la modalità `'no-prefix'` o `'search-params'`, puoi rimuovere completamente lo slot.
 
-### Passaggio 7: Dichiarare il Tuo Contenuto
+</Step>
+
+<Step number={7} title="Dichiarare il Tuo Contenuto">
 
 Crea e gestisci le tue dichiarazioni di contenuto per memorizzare le traduzioni:
 
@@ -334,7 +378,9 @@ export default appContent;
 
 > Per ulteriori dettagli, fai riferimento alla [documentazione sulla dichiarazione dei contenuti](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/dictionary/content_file.md).
 
-### Passaggio 8: Creare Componenti e Hook Consapevoli della Localizzazione
+</Step>
+
+<Step number={8} title="Creare Componenti e Hook Consapevoli della Localizzazione">
 
 Crea un componente `LocalizedLink` per la navigazione consapevole della localizzazione:
 
@@ -438,7 +484,9 @@ export const useLocalizedNavigate = () => {
 };
 ```
 
-### Passaggio 9: Utilizzare Intlayer nelle tue Pagine
+</Step>
+
+<Step number={9} title="Utilizzare Intlayer nelle tue Pagine">
 
 Accedi ai tuoi dizionari di contenuti in tutta l'applicazione:
 
@@ -486,7 +534,9 @@ function RouteComponent() {
 
 > 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).
 
-### Passaggio 10: Creare un Componente Locale Switcher
+</Step>
+
+<Step number={10} title="Creare un Componente Locale Switcher">
 
 Crea un componente per consentire agli utenti di cambiare lingua:
 
@@ -547,7 +597,9 @@ export const LocaleSwitcher: FC = () => {
 
 > Per saperne di più sull'hook `useLocale`, consulta la [documentazione](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/packages/react-intlayer/useLocale.md).
 
-### Passaggio 11: Gestione degli Attributi HTML
+</Step>
+
+<Step number={11} title="Gestione degli Attributi HTML">
 
 Come visto nel Passaggio 5, puoi gestire gli attributi `lang` e `dir` del tag `html` utilizzando `useParams` nel tuo componente root. Questo assicura che gli attributi corretti siano impostati sia sul server che sul client.
 
@@ -566,7 +618,9 @@ function RootDocument({ children }: { children: ReactNode }) {
 
 ---
 
-### Passaggio 12: Aggiungere middleware (Opzionale)
+</Step>
+
+<Step number={12} title="Aggiungere middleware">
 
 Puoi anche utilizzare `intlayerProxy` per aggiungere il routing lato server alla tua applicazione. Questo plugin rileverà automaticamente la localizzazione corrente in base all'URL e imposterà il cookie della localizzazione appropriato. Se non viene specificata alcuna localizzazione, il plugin determinerà la localizzazione più appropriata in base alle preferenze linguistiche del browser dell'utente. Se non viene rilevata alcuna localizzazione, reindirizzerà alla localizzazione predefinita.
 
@@ -597,7 +651,9 @@ export default defineConfig({
 
 ---
 
-### Passaggio 13: Internazionalizzare i tuoi Metadati (Opzionale)
+</Step>
+
+<Step number={13} title="Internazionalizzare i tuoi Metadati">
 
 Puoi anche utilizzare l'hook `getIntlayer` per accedere ai tuoi dizionari di contenuti in tutta l'applicazione:
 
@@ -644,7 +700,9 @@ export const Route = createFileRoute("/{-$locale}/")({
 
 ---
 
-### Passaggio 14: Recuperare la localizzazione nelle tue server action (Opzionale)
+</Step>
+
+<Step number={14} title="Recuperare la localizzazione nelle tue server action">
 
 Potresti voler accedere alla localizzazione corrente dall'interno delle tue server action o degli endpoint API.
 Puoi farlo utilizzando l'helper `getLocale` di `intlayer`.
@@ -681,7 +739,9 @@ export const getLocaleServer = createServerFn().handler(async () => {
 
 ---
 
-### Passaggio 15: Gestire le pagine non trovate (Opzionale)
+</Step>
+
+<Step number={15} title="Gestire le pagine non trovate">
 
 Quando un utente visita una pagina non esistente, puoi visualizzare una pagina 404 personalizzata e il prefisso di localizzazione può influire sul modo in cui viene attivata la pagina non trovata.
 
@@ -755,7 +815,9 @@ export const Route = createFileRoute("/{-$locale}/$")({
 });
 ```
 
-### (Opzionale) Passaggio 15: Estrarre il contenuto dei tuoi componenti
+</Step>
+
+<Step number={15} title="Estrarre il contenuto dei tuoi componenti" isOptional={true}>
 
 Se hai una base di codice esistente, trasformare migliaia di file può richiedere molto tempo.
 
@@ -853,7 +915,9 @@ bun run build # Or bun run dev
 
 ---
 
-### Passaggio 16: Generare una Sitemap (Opzionale)
+</Step>
+
+<Step number={16} title="Generare una Sitemap">
 
 Intlayer include un generatore di sitemap integrato per aiutarti a creare facilmente una sitemap per la tua applicazione. Gestisce i percorsi localizzati e aggiunge i metadati necessari per i motori di ricerca.
 
@@ -928,7 +992,9 @@ export const Route = createFileRoute("/sitemap.xml")({
 
 ---
 
-### Passaggio 17: Configurare TypeScript (Opzionale)
+</Step>
+
+<Step number={17} title="Configurare TypeScript">
 
 Intlayer utilizza l'augmentation dei moduli per ottenere i vantaggi di TypeScript e rendere il tuo codice più robusto.
 
@@ -959,6 +1025,10 @@ Per farlo, puoi aggiungere le seguenti istruzioni al tuo file `.gitignore`:
 
 ---
 
+</Step>
+
+</Steps>
+
 ## Estensione VS Code
 
 Per migliorare la tua esperienza di sviluppo con Intlayer, puoi installare l'**estensione ufficiale Intlayer per VS Code**.

package/docs/it/intlayer_with_vanilla.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-03-31
-updatedAt: 2026-05-06
-title: i18n Vanilla JS - Come tradurre un'app Vanilla JS nel 2026
-description: Scopri come rendere multilingue il tuo sito web Vanilla JS. Segui la documentazione per internazionalizzarlo (i18n) e tradurlo.
+updatedAt: 2026-05-31
+title: i18n Vanilla JS - Guida completa per tradurre Vanilla JS
+description: La migliore soluzione per dimensione del bundle, SEO, prestazioni & manutenibilità. Rendi il tuo Vanilla JS sito web multilingue nel 2026, traduzione LLM, Agent Skills & MCP.
 keywords:
   - Internazionalizzazione
   - Documentazione
@@ -57,28 +57,55 @@ history:
 
 <TOC/>
 
-## Cos'è Intlayer?
+## Perché Intlayer rispetto alle alternative?
 
-**Intlayer** è un'innovativa libreria di internazionalizzazione (i18n) open-source progettata per semplificare il supporto multilingue nelle moderne applicazioni web.
+Rispetto alle soluzioni principali come `i18next` o `i18n.js`, Intlayer è una soluzione dotata di ottimizzazioni integrate come:
 
-Con Intlayer, puoi:
+<AccordionGroup>
+<Accordion header="Copertura completa Vanilla JS">
 
-- **Gestire facilmente le traduzioni** utilizzando dizionari dichiarativi a livello di componente.
-- **Localizzare dinamicamente metadati**, rotte e contenuti.
-- **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.
+Intlayer è ottimizzato per funzionare perfettamente con Vanilla JavaScript offrendo **gestione dei contenuti indipendente dal framework**, **supporto TypeScript** e tutte le funzionalità necessarie per scalare l'internazionalizzazione (i18n).
 
-Questa guida dimostra come utilizzare Intlayer in un'applicazione Vanilla JavaScript **senza utilizzare un gestore di pacchetti o un bundler** (come Vite, Webpack, ecc.).
+</Accordion>
+<Accordion header="Dimensione del bundle">
 
-Se la tua applicazione utilizza un bundler (come Vite), ti consigliamo di seguire la [Guida Vite + Vanilla JS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_with_vite+vanilla.md) invece.
+Invece di caricare enormi file JSON nelle tue pagine, carica solo il contenuto necessario. Intlayer aiuta a **ridurre le dimensioni del bundle e della pagina fino al 50%**.
 
-Utilizzando il bundle standalone, puoi importare Intlayer direttamente nei tuoi file HTML tramite un singolo file JavaScript, rendendolo perfetto per progetti legacy o semplici siti statici.
+</Accordion>
+<Accordion header="Manutenibilità">
+
+L'ambito del contenuto dell'applicazione **facilita la manutenzione** per applicazioni su larga scala. Puoi duplicare o eliminare una singola cartella di funzionalità senza l'onere mentale di rivedere l'intera codebase dei contenuti. Inoltre, Intlayer è **completamente tipizzato (fully typed)** per garantire l'accuratezza dei tuoi contenuti.
+
+</Accordion>
+<Accordion header="Agente IA">
+
+La co-localizzazione dei contenuti **riduce il contesto necessario** dai Large Language Models (LLM). Intlayer viene fornito anche con una suite di strumenti, come una **CLI** per verificare le traduzioni mancanti,**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** e **[capacità dell'agente](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, per rendere l'esperienza dello sviluppatore (DX) ancora più fluida per gli agenti IA.
+
+</Accordion>
+<Accordion header="Automazione">
+
+Utilizza l'automazione per tradurre nella tua pipeline CI/CD utilizzando il LLM di tua scelta al costo del tuo provider di intelligenza artificiale. Intlayer offre anche un **compilatore** per automatizzare l'estrazione dei contenuti, nonché una [piattaforma web](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) per aiutare a **tradurre in background**.
+
+</Accordion>
+<Accordion header="Prestazione">
+
+La connessione di enormi file JSON ai componenti può portare a problemi di prestazioni e reattività. Intlayer ottimizza il caricamento dei contenuti in fase di compilazione.
+
+</Accordion>
+<Accordion header="Scalabilità con nessuno sviluppatore">
+
+Più di una semplice soluzione i18n, Intlayer fornisce un **[editor visivo](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** self-hosted e un **[CMS completo](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** per aiutarti gestisci i tuoi contenuti multilingue in **tempo reale**, semplificando la collaborazione con traduttori, copywriter e altri membri del team. I contenuti possono essere archiviati localmente e/o in remoto.
+
+</Accordion>
+</AccordionGroup>
 
 ---
 
 ## Guida passo-passo per configurare Intlayer in un'applicazione Vanilla JS
 
-### Passaggio 1: Installazione delle dipendenze
+<Steps>
+
+<Step number={1} title="Installazione delle dipendenze">
 
 Installa i pacchetti necessari utilizzando npm:
 
@@ -138,7 +165,9 @@ bun x intlayer build
 
 > L'esportazione del raggruppamento (bundling) della CLI `intlayer standalone` produce una build ottimizzata mediante il tree-shaking dei pacchetti non utilizzati, delle lingue e della logica non essenziale (come reindirizzamenti o prefissi) specifica per la tua configurazione.
 
-### Passaggio 2: Configurazione del progetto
+</Step>
+
+<Step number={2} title="Configurazione del progetto">
 
 Crea un file di configurazione per configurare le lingue della tua applicazione:
 
@@ -162,7 +191,9 @@ export default config;
 
 > Attraverso questo file di configurazione, puoi impostare URL localizzati, reindirizzamento middleware, nomi dei cookie, la posizione e l'estensione delle tue dichiarazioni di contenuto, disabilitare i log di Intlayer nella console e altro ancora. Per un elenco completo dei parametri disponibili, fai riferimento alla [documentazione di configurazione](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/configuration.md).
 
-### Passaggio 3: Importare il bundle nel tuo HTML
+</Step>
+
+<Step number={3} title="Importare il bundle nel tuo HTML">
 
 Una volta generato il bundle `intlayer.js`, puoi importarlo nel tuo file HTML:
 
@@ -186,7 +217,9 @@ Una volta generato il bundle `intlayer.js`, puoi importarlo nel tuo file HTML:
 
 Il bundle espone `Intlayer` e `VanillaIntlayer` come oggetti globali su `window`.
 
-### Passaggio 4: Bootstrap Intlayer nel tuo punto di ingresso
+</Step>
+
+<Step number={4} title="Bootstrap Intlayer nel tuo punto di ingresso">
 
 Nel tuo `src/main.js`, chiama `installIntlayer()` **prima** che venga renderizzato qualsiasi contenuto, in modo che il singleton globale della lingua sia pronto.
 
@@ -206,7 +239,9 @@ installIntlayer();
 installIntlayerMarkdown();
 ```
 
-### Passaggio 5: Dichiarare il Contenuto
+</Step>
+
+<Step number={5} title="Dichiarare il Contenuto">
 
 Crea e gestisci le tue dichiarazioni di contenuto per memorizzare le traduzioni:
 
@@ -284,7 +319,9 @@ export default appContent;
 >
 > Per maggiori dettagli, fai riferimento alla [documentazione sulla dichiarazione dei contenuti](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/dictionary/content_file.md).
 
-### Passaggio 6: Utilizzare Intlayer nel tuo JavaScript
+</Step>
+
+<Step number={6} title="Utilizzare Intlayer nel tuo JavaScript">
 
 L'oggetto `window.VanillaIntlayer` fornisce helper API: `useIntlayer(key, locale?)` restituisce il contenuto tradotto per una data chiave.
 
@@ -318,7 +355,9 @@ document.querySelector(".read-the-docs").textContent = String(
 > img.alt = content.viteLogoLabel.value;
 > ```
 
-### (Opzionale) Passaggio 7: Cambiare la lingua del tuo contenuto
+</Step>
+
+<Step number={7} title="Cambiare la lingua del tuo contenuto" isOptional={true}>
 
 Per cambiare la lingua del tuo contenuto, usa la funzione `setLocale` esposta da `useLocale`.
 
@@ -353,7 +392,9 @@ export function setupLocaleSwitcher(container) {
 }
 ```
 
-### (Opzionale) Passaggio 8: Cambiare gli attributi HTML di lingua e direzione
+</Step>
+
+<Step number={8} title="Cambiare gli attributi HTML di lingua e direzione" isOptional={true}>
 
 Aggiorna gli attributi `lang` e `dir` del tag `<html>` per corrispondere alla lingua corrente per l'accessibilità e la SEO.
 
@@ -371,7 +412,9 @@ useLocale({
 });
 ```
 
-### (Opzionale) Passaggio 9: Caricamento lazy dei dizionari per lingua
+</Step>
+
+<Step number={9} title="Caricamento lazy dei dizionari per lingua" isOptional={true}>
 
 Se desideri caricare i dizionari in modo lazy per lingua, puoi usare `useDictionaryDynamic`. Questo è utile se non vuoi raggruppare tutte le traduzioni nel file iniziale `intlayer.js`.
 
@@ -427,3 +470,7 @@ Per maggiori dettagli su come utilizzare l'estensione, fai riferimento alla [doc
 ### Vai oltre
 
 Per approfondire, puoi implementare l'[editor visuale](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_visual_editor.md) o esternalizzare i tuoi contenuti utilizzando il [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_CMS.md).
+
+</Step>
+
+</Steps>

package/docs/it/intlayer_with_vite+lit.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-03-23
-updatedAt: 2026-05-06
-title: i18n Vite + Lit - Come tradurre un'app Lit nel 2026
-description: Scopri come rendere multilingue il tuo sito web Vite e Lit. Segui la documentazione per internazionalizzarlo (i18n) e tradurlo.
+updatedAt: 2026-05-31
+title: i18n Vite + Lit - Guida completa per tradurre Lit
+description: La migliore soluzione per dimensione del bundle, SEO, prestazioni & manutenibilità. Rendi il tuo Vite and Lit applicazione multilingue nel 2026, traduzione LLM, Agent Skills & MCP.
 keywords:
   - Internazionalizzazione
   - Documentazione
@@ -57,22 +57,55 @@ history:
 
 <TOC/>
 
-## Cos'è Intlayer?
+## Perché Intlayer rispetto alle alternative?
 
-**Intlayer** è un'innovativa libreria di internazionalizzazione (i18n) open-source progettata per semplificare il supporto multilingue nelle moderne applicazioni web.
+Rispetto alle soluzioni principali come `lit-localize` o `i18next`, Intlayer è una soluzione dotata di ottimizzazioni integrate come:
 
-Con Intlayer, puoi:
+<AccordionGroup>
+<Accordion header="Copertura completamente illuminata">
 
-- **Gestire facilmente le traduzioni** utilizzando dizionari dichiarativi a livello di componente.
-- **Localizzare dinamicamente metadati**, rotte e contenuti.
-- **Garantire il supporto TypeScript** con tipi autogenerati, migliorando l'autocompletamento e il rilevamento degli errori.
-- **Beneficiare di funzionalità avanzate**, come il rilevamento e la commutazione dinamica della lingua.
+Intlayer è ottimizzato per funzionare perfettamente con Lit offrendo **ambito del contenuto a livello di componente Web**, **supporto TypeScript** e tutte le funzionalità necessarie per ridimensionare l'internazionalizzazione (i18n).
+
+</Accordion>
+<Accordion header="Dimensione del bundle">
+
+Invece di caricare enormi file JSON nelle tue pagine, carica solo il contenuto necessario. Intlayer aiuta a **ridurre le dimensioni del bundle e della pagina fino al 50%**.
+
+</Accordion>
+<Accordion header="Manutenibilità">
+
+L'ambito del contenuto dell'applicazione **facilita la manutenzione** per applicazioni su larga scala. Puoi duplicare o eliminare una singola cartella di funzionalità senza l'onere mentale di rivedere l'intera codebase dei contenuti. Inoltre, Intlayer è **completamente tipizzato (fully typed)** per garantire l'accuratezza dei tuoi contenuti.
+
+</Accordion>
+<Accordion header="Agente IA">
+
+La co-localizzazione dei contenuti **riduce il contesto necessario** dai Large Language Models (LLM). Intlayer viene fornito anche con una suite di strumenti, come una **CLI** per verificare le traduzioni mancanti,**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** e **[capacità dell'agente](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, per rendere l'esperienza dello sviluppatore (DX) ancora più fluida per gli agenti IA.
+
+</Accordion>
+<Accordion header="Automazione">
+
+Utilizza l'automazione per tradurre nella tua pipeline CI/CD utilizzando il LLM di tua scelta al costo del tuo provider di intelligenza artificiale. Intlayer offre anche un **compilatore** per automatizzare l'estrazione dei contenuti, nonché una [piattaforma web](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) per aiutare a **tradurre in background**.
+
+</Accordion>
+<Accordion header="Prestazione">
+
+La connessione di enormi file JSON ai componenti può portare a problemi di prestazioni e reattività. Intlayer ottimizza il caricamento dei contenuti in fase di compilazione.
+
+</Accordion>
+<Accordion header="Scalabilità con nessuno sviluppatore">
+
+Più di una semplice soluzione i18n, Intlayer fornisce un **[editor visivo](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** self-hosted e un **[CMS completo](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** per aiutarti gestisci i tuoi contenuti multilingue in **tempo reale**, semplificando la collaborazione con traduttori, copywriter e altri membri del team. I contenuti possono essere archiviati localmente e/o in remoto.
+
+</Accordion>
+</AccordionGroup>
 
 ---
 
 ## Guida passo-passo per configurare Intlayer in un'applicazione Vite e Lit
 
-### Passaggio 1: Installare le dipendenze
+<Steps>
+
+<Step number={1} title="Installare le dipendenze">
 
 Installa i pacchetti necessari utilizzando npm:
 
@@ -110,7 +143,9 @@ bun x intlayer init
 - **vite-intlayer**
   Include il plugin Vite per integrare Intlayer con il [bundler Vite](https://vite.dev/guide/why.html#why-bundle-for-production), oltre al middleware per rilevare la lingua preferita dell'utente, gestire i cookie e gestire il reindirizzamento degli URL.
 
-### Passaggio 2: Configurazione del progetto
+</Step>
+
+<Step number={2} title="Configurazione del progetto">
 
 Crea un file di configurazione per impostare le lingue della tua applicazione:
 
@@ -134,7 +169,9 @@ export default config;
 
 > Attraverso questo file di configurazione, puoi impostare URL localizzati, reindirizzamento middleware, nomi dei cookie, la posizione e l'estensione delle tue dichiarazioni di contenuto, disabilitare i log di Intlayer nella console e altro ancora. Per un elenco completo dei parametri disponibili, consulta la [documentazione sulla configurazione](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/configuration.md).
 
-### Passaggio 3: Integrare Intlayer nella configurazione di Vite
+</Step>
+
+<Step number={3} title="Integrare Intlayer nella configurazione di Vite">
 
 Aggiungi il plugin intlayer nella tua configurazione.
 
@@ -150,7 +187,9 @@ export default defineConfig({
 
 > Il plugin Vite `intlayer()` viene utilizzato per integrare Intlayer con Vite. Garantisce la creazione dei file di dichiarazione dei contenuti e li monitora in modalità di sviluppo. Definisce le variabili d'ambiente Intlayer all'interno dell'applicazione Vite. Inoltre, fornisce alias per ottimizzare le prestazioni.
 
-### Passaggio 4: Bootstrap di Intlayer nel tuo punto di ingresso
+</Step>
+
+<Step number={4} title="Bootstrap di Intlayer nel tuo punto di ingresso">
 
 Chiama `installIntlayer()` **prima** che vengano registrati elementi personalizzati, in modo che il singleton globale della lingua sia pronto quando il primo elemento si connette.
 
@@ -175,7 +214,9 @@ installIntlayerMarkdown();
 import "./my-element.js";
 ```
 
-### Passaggio 5: Dichiarare il contenuto
+</Step>
+
+<Step number={5} title="Dichiarare il contenuto">
 
 Crea e gestisci le tue dichiarazioni di contenuto per memorizzare le traduzioni:
 
@@ -261,7 +302,9 @@ export default appContent;
 >
 > Per ulteriori dettagli, consulta la [documentazione sulla dichiarazione dei contenuti](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/dictionary/content_file.md).
 
-### Passaggio 6: Utilizzare Intlayer nel tuo LitElement
+</Step>
+
+<Step number={6} title="Utilizzare Intlayer nel tuo LitElement">
 
 Usa `useIntlayer` all'interno di un `LitElement`. Restituisce un proxy `ReactiveController` che attiva automaticamente i re-render ogni volta che la lingua attiva cambia: non è richiesta alcuna configurazione aggiuntiva.
 
@@ -306,7 +349,9 @@ export class MyElement extends LitElement {
 > html`<img alt=${String(content.viteLogo)} />`;
 > ```
 
-### (Opzionale) Passaggio 7: Cambiare la lingua del contenuto
+</Step>
+
+<Step number={7} title="Cambiare la lingua del contenuto" isOptional={true}>
 
 Per cambiare la lingua del contenuto, usa il metodo `setLocale` esposto dal controller `useLocale`.
 
@@ -341,7 +386,9 @@ export class LocaleSwitcher extends LitElement {
 }
 ```
 
-### (Opzionale) Passaggio 8: Renderizzare contenuti Markdown e HTML
+</Step>
+
+<Step number={8} title="Renderizzare contenuti Markdown e HTML" isOptional={true}>
 
 Intlayer supporta le dichiarazioni di contenuto `md()` e `html()`. In Lit, l'output compilato viene iniettato come HTML grezzo tramite la direttiva `unsafeHTML`.
 
@@ -391,7 +438,9 @@ export class MyElement extends LitElement {
 > [!TIP]
 > `String(content.editNote)` chiama `toString()` sull'`IntlayerNode`, che restituisce la stringa Markdown grezza. Passala a `compileMarkdown` per ottenere una stringa HTML, quindi caricala con la direttiva `unsafeHTML` di Lit.
 
-### (Opzionale) Passaggio 9: Aggiungere il routing localizzato alla tua applicazione
+</Step>
+
+<Step number={9} title="Aggiungere il routing localizzato alla tua applicazione" isOptional={true}>
 
 Per creare rotte uniche per ogni lingua (utile per la SEO), puoi utilizzare un router lato client insieme agli helper `localeMap` / `localeFlatMap` di Intlayer e al plugin Vite `intlayerProxy` per il rilevamento della lingua lato server.
 
@@ -411,7 +460,9 @@ export default defineConfig({
 });
 ```
 
-### (Opzionale) Passaggio 10: Cambiare l'URL quando la lingua cambia
+</Step>
+
+<Step number={10} title="Cambiare l'URL quando la lingua cambia" isOptional={true}>
 
 Per aggiornare l'URL del browser quando la lingua cambia, utilizza `useRewriteURL` insieme al selettore di lingua:
 
@@ -449,7 +500,9 @@ export class LocaleSwitcher extends LitElement {
 }
 ```
 
-### (Opzionale) Passaggio 11: Commutare gli attributi di lingua e direzione HTML
+</Step>
+
+<Step number={11} title="Commutare gli attributi di lingua e direzione HTML" isOptional={true}>
 
 Aggiorna gli attributi `lang` e `dir` del tag `<html>` per farli corrispondere alla lingua corrente per l'accessibilità e la SEO.
 
@@ -474,7 +527,9 @@ export class MyElement extends LitElement {
 }
 ```
 
-### (Opzionale) Passaggio 12: Estrarre il contenuto dei tuoi componenti
+</Step>
+
+<Step number={12} title="Estrarre il contenuto dei tuoi componenti" isOptional={true}>
 
 Se hai una base di codice esistente, trasformare migliaia di file può richiedere molto tempo.
 
@@ -636,3 +691,7 @@ Per maggiori dettagli su come utilizzare l'estensione, consulta la [documentazio
 ### Vai oltre
 
 Per approfondire, puoi implementare l'[editor visuale](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_visual_editor.md) o esternalizzare i tuoi contenuti utilizzando il [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_CMS.md).
+
+</Step>
+
+</Steps>