@intlayer/docs 8.11.2 → 8.12.0-canary.0

package/docs/it/intlayer_with_storybook.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-03-20
-updatedAt: 2026-05-06
-title: Come configurare Intlayer con Storybook
-description: Scopri come rendere multilingue il tuo design system usando Intlayer con Storybook - compila le dichiarazioni di contenuto, aggiungi un selettore di lingua e visualizza l'anteprima dei tuoi componenti in qualsiasi lingua.
+updatedAt: 2026-05-31
+title: "Storybook i18n - Guida completa per tradurre la tua applicazione"
+description: "Niente più i18next. La guida 2026 per creare un'applicazione Storybook multilingue (i18n). Traduci con agenti AI e ottimizza la dimensione del bundle, SEO e prestazioni."
 keywords:
   - Internazionalizzazione
   - Documentazione
@@ -31,16 +31,54 @@ 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. Funziona a **livello di componente** - ogni componente possiede le proprie dichiarazioni di contenuto - mantenendo le traduzioni collocate insieme al codice che le utilizza.
+Rispetto alle soluzioni principali come `storybook-react-i18next` o `i18next`, Intlayer è una soluzione dotata di ottimizzazioni integrate come:
 
-Con Intlayer puoi:
+<AccordionGroup>
 
-- **Gestire le traduzioni in modo dichiarativo** con file di contenuto per singolo componente.
-- **Ottenere il supporto completo di TypeScript** tramite tipi generati automaticamente e l'autocompletamento dell'IDE.
-- **Cambiare lingua a runtime** senza ricaricare la pagina.
-- **Tradurre automaticamente** grazie alle integrazioni integrate con i provider di IA.
+<Accordion header="Copertura completa del libro di fiabe">
+
+Intlayer è ottimizzato per funzionare perfettamente con Storybook offrendo **decoratori di storie multilingue**, **cambio di lingua** e tutte le funzionalità necessarie per scalare l'internazionalizzazione (i18n) nel tuo sistema di progettazione.
+
+</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>
 
 ---
 
@@ -59,7 +97,9 @@ Storybook è lo strumento standard del settore per sviluppare e documentare i co
 <Tabs>
 <Tab value="Vite Setup">
 
-### Passaggio 1: Installa le dipendenze
+<Steps>
+
+<Step number={1} title="Installa le dipendenze">
 
 ```bash packageManager="npm"
 npm install intlayer react-intlayer
@@ -89,7 +129,9 @@ bun add vite-intlayer --dev
 
 ---
 
-### Passaggio 2: Crea una configurazione Intlayer
+</Step>
+
+<Step number={2} title="Crea una configurazione Intlayer">
 
 Crea `intlayer.config.ts` nella root del tuo progetto (o all'interno del pacchetto del tuo design system):
 
@@ -118,7 +160,9 @@ export default config;
 
 ---
 
-### Passaggio 3: Aggiungi il plugin Vite a Storybook
+</Step>
+
+<Step number={3} title="Aggiungi il plugin Vite a Storybook">
 
 L'hook `viteFinal` di Storybook ti consente di estendere la configurazione interna di Vite. Importa e aggiungi il plugin `intlayer()` qui:
 
@@ -159,7 +203,9 @@ Il plugin `intlayer()` osserva i tuoi file `*.content.ts` e ricostruisce automat
 
 ---
 
-### Passaggio 4: Aggiungi il Decorator `IntlayerProvider` e una Toolbar per la lingua
+</Step>
+
+<Step number={4} title="Aggiungi il Decorator `IntlayerProvider` e una Toolbar per la lingua">
 
 Il file `preview` di Storybook è il posto giusto per avvolgere ogni story con l' `IntlayerProvider` ed esporre un selettore di lingua nella toolbar:
 
@@ -216,7 +262,9 @@ export default preview;
 </Tab>
 <Tab value="Webpack Setup">
 
-### Passaggio 1: Installa le dipendenze
+</Step>
+
+<Step number={1} title="Installa le dipendenze">
 
 ```bash packageManager="npm"
 npm install intlayer react-intlayer
@@ -240,7 +288,9 @@ bun add @intlayer/webpack --dev
 
 ---
 
-### Passaggio 2: Crea una configurazione Intlayer
+</Step>
+
+<Step number={2} title="Crea una configurazione Intlayer">
 
 Crea `intlayer.config.ts` nella root del tuo progetto:
 
@@ -262,7 +312,9 @@ export default config;
 
 ---
 
-### Passaggio 3: Configura il Webpack di Storybook
+</Step>
+
+<Step number={3} title="Configura il Webpack di Storybook">
 
 Per le configurazioni di Storybook basate su Webpack (ad es. `@storybook/react-webpack5`), estendi la configurazione webpack tramite `webpackFinal` per aggiungere gli alias e il caricatore di Intlayer:
 
@@ -289,7 +341,9 @@ export default config;
 
 ---
 
-### Passaggio 4: Aggiungi il Decorator `IntlayerProvider` e una Toolbar per la lingua
+</Step>
+
+<Step number={4} title="Aggiungi il Decorator `IntlayerProvider` e una Toolbar per la lingua">
 
 Stessa cosa della configurazione Vite - aggiungi il decorator e il tipo di lingua globale in `.storybook/preview.tsx`:
 
@@ -335,6 +389,10 @@ export default preview;
 
 ---
 
+</Step>
+
+</Steps>
+
 ## Dichiarazione dei contenuti
 
 Crea un file `*.content.ts` accanto a ogni componente. Intlayer lo rileva automaticamente durante la compilazione.

package/docs/it/intlayer_with_svelte_kit.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-11-20
-updatedAt: 2026-05-06
-title: SvelteKit i18n - Come tradurre un'app SvelteKit nel 2026
-description: Scopri come rendere il tuo sito SvelteKit multilingue. Segui la documentazione per internazionalizzare (i18n) e tradurlo utilizzando il Server-Side Rendering (SSR).
+updatedAt: 2026-05-31
+title: "SvelteKit i18n - Guida completa per tradurre la tua applicazione"
+description: "Niente più i18next. La guida 2026 per creare un'applicazione SvelteKit multilingue (i18n). Traduci con agenti AI e ottimizza la dimensione del bundle, SEO e prestazioni."
 keywords:
   - Internazionalizzazione
   - Documentazione
@@ -59,16 +59,54 @@ history:
 
 <TOC/>
 
-## Cos'è Intlayer?
+## Perché Intlayer rispetto alle alternative?
 
-**Intlayer** è una libreria innovativa e open-source per l'internazionalizzazione (i18n) progettata per semplificare il supporto multilingue nelle moderne applicazioni web. Funziona perfettamente con le capacità di Server-Side Rendering (SSR) di **SvelteKit**.
+Rispetto alle soluzioni principali come `svelte-i18n` o `i18next`, Intlayer è una soluzione dotata di ottimizzazioni integrate come:
 
-Con Intlayer, puoi:
+<AccordionGroup>
 
-- **Gestire facilmente le traduzioni** utilizzando dizionari dichiarativi a livello di componente.
-- **Localizzare dinamicamente i metadata**, le rotte e i contenuti.
-- **Garantire il supporto TypeScript** con tipi autogenerati.
-- **Sfruttare l'SSR di SvelteKit** per un'internazionalizzazione SEO-friendly.
+<Accordion header="Copertura completa SvelteKit">
+
+Intlayer è ottimizzato per funzionare perfettamente con SvelteKit offrendo **routing multilingue**, **supporto SSR** e tutte le funzionalità necessarie per scalare 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>
 
 ---
 
@@ -116,7 +154,9 @@ Per iniziare, crea un nuovo progetto SvelteKit. Ecco la struttura finale che rea
 └── vite.config.ts
 ```
 
-### Passo 1: Installare le Dipendenze
+<Steps>
+
+<Step number={1} title="Installare le Dipendenze">
 
 Installa i pacchetti necessari usando npm:
 
@@ -148,7 +188,9 @@ bun x intlayer init
 - **svelte-intlayer**: Fornisce context provider e store per Svelte/SvelteKit.
 - **vite-intlayer**: Il plugin Vite per integrare le dichiarazioni di contenuto nel processo di build.
 
-### Passo 2: Configurazione del tuo progetto
+</Step>
+
+<Step number={2} title="Configurazione del tuo progetto">
 
 Crea un file di configurazione nella root del tuo progetto:
 
@@ -165,7 +207,9 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
-### Passo 3: Integrare Intlayer nella Configurazione di Vite
+</Step>
+
+<Step number={3} title="Integrare Intlayer nella Configurazione di Vite">
 
 Aggiorna il tuo `vite.config.ts` per includere il plugin Intlayer. Questo plugin gestisce la transpilation dei tuoi file di contenuto.
 
@@ -179,7 +223,9 @@ export default defineConfig({
 });
 ```
 
-### Passo 4: Dichiarare il Tuo Contenuto
+</Step>
+
+<Step number={4} title="Dichiarare il Tuo Contenuto">
 
 Crea i tuoi file di dichiarazione del contenuto in qualsiasi punto della cartella `src` (ad esempio, `src/lib/content` o accanto ai tuoi componenti). Questi file definiscono il contenuto traducibile per la tua applicazione utilizzando la funzione `t()` per ogni locale.
 
@@ -200,13 +246,15 @@ const heroContent = {
 export default heroContent;
 ```
 
-### Passo 5: Utilizzare Intlayer nei Tuoi Componenti
+</Step>
+
+<Step number={5} title="Utilizzare Intlayer nei Tuoi Componenti">
 
 Ora puoi usare la funzione `useIntlayer` in qualsiasi componente Svelte. Essa restituisce uno store reattivo che si aggiorna automaticamente quando cambia la locale. La funzione rispetterà automaticamente la locale corrente (sia durante SSR che nella navigazione lato client).
 
 > **Nota:** `useIntlayer` restituisce uno store Svelte, quindi devi usare il prefisso `---
 > createdAt: 2025-11-20
-> updatedAt: 2026-05-06
+> updatedAt: 2026-05-31
 > title: Come tradurre la tua app SvelteKit – guida i18n 2026
 > description: Scopri come rendere il tuo sito SvelteKit multilingue. Segui la documentazione per internazionalizzare (i18n) e tradurlo utilizzando il Server-Side Rendering (SSR).
 > keywords:
@@ -231,6 +279,10 @@ Ora puoi usare la funzione `useIntlayer` in qualsiasi componente Svelte. Essa re
 
 # Traduci il tuo sito SvelteKit usando Intlayer | Internazionalizzazione (i18n)
 
+</Step>
+
+</Steps>
+
 ## Indice
 
 <TOC/>
@@ -292,7 +344,9 @@ Per iniziare, crea un nuovo progetto SvelteKit. Ecco la struttura finale che rea
 └── vite.config.ts
 ```
 
-### Passo 1: Installare le Dipendenze
+<Steps>
+
+<Step number={1} title="Installare le Dipendenze">
 
 Installa i pacchetti necessari usando npm:
 
@@ -324,7 +378,9 @@ bun x intlayer init
 - **svelte-intlayer**: Fornisce context provider e store per Svelte/SvelteKit.
 - **vite-intlayer**: Il plugin Vite per integrare le dichiarazioni di contenuto nel processo di build.
 
-### Passo 2: Configurazione del tuo progetto
+</Step>
+
+<Step number={2} title="Configurazione del tuo progetto">
 
 Crea un file di configurazione nella root del tuo progetto:
 
@@ -341,7 +397,9 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
-### Passo 3: Integrare Intlayer nella Configurazione di Vite
+</Step>
+
+<Step number={3} title="Integrare Intlayer nella Configurazione di Vite">
 
 Aggiorna il tuo `vite.config.ts` per includere il plugin Intlayer. Questo plugin gestisce la transpilation dei tuoi file di contenuto.
 
@@ -355,7 +413,9 @@ export default defineConfig({
 });
 ```
 
-### Passo 4: Dichiarare il Tuo Contenuto
+</Step>
+
+<Step number={4} title="Dichiarare il Tuo Contenuto">
 
 Crea i tuoi file di dichiarazione del contenuto in qualsiasi punto della cartella `src` (ad esempio, `src/lib/content` o accanto ai tuoi componenti). Questi file definiscono il contenuto traducibile per la tua applicazione utilizzando la funzione `t()` per ogni locale.
 
@@ -376,7 +436,9 @@ const heroContent = {
 export default heroContent;
 ```
 
-### Passo 5: Utilizzare Intlayer nei Tuoi Componenti
+</Step>
+
+<Step number={5} title="Utilizzare Intlayer nei Tuoi Componenti">
 
 per accedere al suo valore reattivo (ad esempio, `$content.title`).
 
@@ -398,7 +460,9 @@ per accedere al suo valore reattivo (ad esempio, `$content.title`).
 <div aria-label={String($content.title)}></div>
 ```
 
-### (Opzionale) Passo 6: Configurare il routing
+</Step>
+
+<Step number={6} title="Configurare il routing" isOptional={true}>
 
 I passaggi seguenti mostrano come configurare il routing basato sulla locale in SvelteKit. Questo permette agli URL di includere il prefisso della locale (es. `/en/about`, `/fr/about`) per migliorare la SEO e l'esperienza utente.
 
@@ -423,7 +487,9 @@ I passaggi seguenti mostrano come configurare il routing basato sulla locale in
         └── +layout.svelte         # Layout radice per i font e gli stili globali
 ```
 
-### Passo 7: Gestire il Rilevamento della Locale lato Server (Hooks)
+</Step>
+
+<Step number={7} title="Gestire il Rilevamento della Locale lato Server">
 
 In SvelteKit, il server deve conoscere la locale dell'utente per renderizzare il contenuto corretto durante il SSR. Usiamo `hooks.server.ts` per rilevare la locale dall'URL o dai cookie.
 
@@ -635,7 +701,9 @@ export const prerender = true;
 </style>
 ```
 
-### (Opzionale) Passo 8: Link Internazionalizzati
+</Step>
+
+<Step number={8} title="Link Internazionalizzati" isOptional={true}>
 
 Per la SEO, si consiglia di anteporre alle tue rotte la locale (ad esempio, `/en/about`, `/fr/about`). Questo componente antepone automaticamente qualsiasi link con la locale corrente.
 
@@ -668,7 +736,9 @@ const localizedPath = getLocalizedUrl("/about", $locale);
 goto(localizedPath); // Naviga verso /en/about o /fr/about a seconda della locale
 ```
 
-### (Opzionale) Passo 9: Selettore di Lingua
+</Step>
+
+<Step number={9} title="Selettore di Lingua" isOptional={true}>
 
 Per permettere agli utenti di cambiare lingua, aggiorna l'URL.
 
@@ -709,7 +779,9 @@ Per permettere agli utenti di cambiare lingua, aggiorna l'URL.
 </style>
 ```
 
-### (Opzionale) Passo 10: Aggiungere un proxy backend
+</Step>
+
+<Step number={10} title="Aggiungere un proxy backend" isOptional={true}>
 
 Per aggiungere un proxy backend alla tua applicazione SvelteKit, puoi usare la funzione `intlayerProxy` fornita dal plugin `vite-intlayer`. Questo plugin rileverà automaticamente la migliore locale per l'utente basandosi sull'URL, i cookie e le preferenze della lingua del browser.
 
@@ -728,7 +800,9 @@ export default defineConfig({
 });
 ```
 
-### (Opzionale) Passo 11: Configurare l'editor / CMS di intlayer
+</Step>
+
+<Step number={11} title="Configurare l'editor / CMS di intlayer" isOptional={true}>
 
 Per configurare l'editor di intlayer, devi seguire la [documentazione dell'editor di intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_visual_editor.md).
 
@@ -753,50 +827,9 @@ Per poter visualizzare il selettore dell'editor intlayer, dovrai utilizzare la s
 </div>
 ```
 
-### Configurazione Git
+</Step>
 
-Si consiglia di ignorare i file generati da Intlayer.
-
-```plaintext fileName=".gitignore"
-# Ignora i file generati da Intlayer
-.intlayer
-```
-
----
-
-### Approfondimenti
-
-Per poter visualizzare il selettore dell'editor intlayer, dovrai utilizzare la sintassi del componente nel tuo contenuto intlayer.
-
-```svelte fileName="Component.svelte"
-<script lang="ts">
-  import { useIntlayer } from "svelte-intlayer";
-
-  const content = useIntlayer("component");
-</script>
-
-<div>
-
-  <!-- Renderizza il contenuto come contenuto semplice  -->
-  <h1>{$content.title}</h1>
-
-  <!-- Renderizza il contenuto come componente (richiesto dall'editor) -->
-  {@const Component = $content.component}<Component />
-</div>
-```
-
-### Configurazione Git
-
-Si consiglia di ignorare i file generati da Intlayer.
-
-```plaintext fileName=".gitignore"
-# Ignora i file generati da Intlayer
-.intlayer
-```
-
----
-
-### (Opzionale) Passaggio 1 : Estrarre il contenuto dei tuoi componenti
+<Step number={1} title="Estrarre il contenuto dei tuoi componenti" isOptional={true}>
 
 Se hai una base di codice esistente, trasformare migliaia di file può richiedere molto tempo.
 
@@ -891,6 +924,52 @@ bun run build # Or bun run dev
 
  </Tab>
 </Tabs>
+</Step>
+
+</Steps>
+
+### Configurazione Git
+
+Si consiglia di ignorare i file generati da Intlayer.
+
+```plaintext fileName=".gitignore"
+# Ignora i file generati da Intlayer
+.intlayer
+```
+
+---
+
+### Approfondimenti
+
+Per poter visualizzare il selettore dell'editor intlayer, dovrai utilizzare la sintassi del componente nel tuo contenuto intlayer.
+
+```svelte fileName="Component.svelte"
+<script lang="ts">
+  import { useIntlayer } from "svelte-intlayer";
+
+  const content = useIntlayer("component");
+</script>
+
+<div>
+
+  <!-- Renderizza il contenuto come contenuto semplice  -->
+  <h1>{$content.title}</h1>
+
+  <!-- Renderizza il contenuto come componente (richiesto dall'editor) -->
+  {@const Component = $content.component}<Component />
+</div>
+```
+
+### Configurazione Git
+
+Si consiglia di ignorare i file generati da Intlayer.
+
+```plaintext fileName=".gitignore"
+# Ignora i file generati da Intlayer
+.intlayer
+```
+
+---
 
 ### Vai oltre