@intlayer/docs 8.11.1 → 8.11.3

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 SvelteKit
+description: La migliore soluzione per dimensione del bundle, SEO, prestazioni & manutenibilità. Rendi il tuo SvelteKit sito web multilingue nel 2026, traduzione LLM, Agent Skills & MCP.
 keywords:
   - Internazionalizzazione
   - Documentazione
@@ -59,16 +59,47 @@ 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>
+<Accordion header="Copertura completa SvelteKit">
 
-- **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.
+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 +147,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 +181,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 +200,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 +216,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 +239,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 +272,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 +337,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 +371,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 +390,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 +406,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 +429,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 +453,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 +480,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 +694,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 +729,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 +772,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 +793,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).
 
@@ -796,7 +863,9 @@ Si consiglia di ignorare i file generati da Intlayer.
 
 ---
 
-### (Opzionale) Passaggio 1 : Estrarre il contenuto dei tuoi componenti
+</Step>
+
+<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.
 
@@ -896,3 +965,7 @@ bun run build # Or bun run dev
 
 - **Visual Editor**: integra il [Visual Editor di Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_visual_editor.md) per modificare le traduzioni direttamente dall'interfaccia utente.
 - **CMS**: esternalizza la gestione dei tuoi contenuti utilizzando il [CMS di Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_CMS.md).
+
+</Step>
+
+</Steps>

package/docs/it/intlayer_with_tanstack+solid.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-03-25
-updatedAt: 2026-05-06
-title: i18n Tanstack Start - Come tradurre un'applicazione Tanstack Start usando Solid.js nel 2026
-description: Scopri come aggiungere l'internazionalizzazione (i18n) alla tua applicazione Tanstack Start utilizzando Intlayer e Solid.js. Segui questa guida completa per rendere la tua app multilingue con un routing sensibile alla localizzazione.
+updatedAt: 2026-05-31
+title: i18n Tanstack Start - Guida completa per tradurre TanStack Start
+description: La migliore soluzione per dimensione del bundle, SEO, prestazioni & manutenibilità. Rendi il tuo TanStack Start and Solid applicazione multilingue nel 2026, traduzione LLM, Agent Skills & MCP.
 keywords:
   - Internazionalizzazione
   - Documentazione
@@ -38,17 +38,47 @@ history:
 
 Questa guida dimostra come integrare **Intlayer** per un'internazionalizzazione fluida nei progetti Tanstack Start con Solid.js, routing sensibile alla localizzazione, supporto TypeScript e moderne pratiche di sviluppo.
 
-## 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 `i18next`, 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 autogenerati, migliorando l'autocompletamento e il rilevamento degli errori.
-- **Beneficiare di funzionalità avanzate**, come il rilevamento e la commutazione dinamica della lingua.
-- **Abilitare il routing sensibile alla localizzazione** con il sistema di routing basato su file di Tanstack Start.
+Intlayer è ottimizzato per funzionare perfettamente con TanStack Start e Solid offrendo **routing multilingue**, **mappa del sito** 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>
 
 ---
 
@@ -86,11 +116,15 @@ Con Intlayer, puoi:
 
 Vedi il [Modello di applicazione](https://github.com/aymericzip/intlayer-tanstack-start-solid-template) su GitHub.
 
-### Passaggio 1: Crea il progetto
+<Steps>
+
+<Step number={1} title="Crea il progetto">
 
 Inizia creando un nuovo progetto TanStack Start seguendo la guida [Avvia un nuovo progetto](https://tanstack.com/start/latest/docs/framework/solid/quick-start) sul sito web di TanStack Start.
 
-### Passaggio 2: Installa i pacchetti Intlayer
+</Step>
+
+<Step number={2} title="Installa i pacchetti Intlayer">
 
 Installa i pacchetti necessari utilizzando il tuo gestore di pacchetti preferito:
 
@@ -128,7 +162,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 3: Configurazione del progetto
+</Step>
+
+<Step number={3} title="Configurazione del progetto">
 
 Crea un file di configurazione per configurare le lingue della tua applicazione:
 
@@ -149,7 +185,9 @@ export default config;
 
 > Attraverso questo file di configurazione, puoi impostare URL localizzati, reindirizzamento del 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: Integra Intlayer nella tua configurazione Vite
+</Step>
+
+<Step number={4} title="Integra Intlayer nella tua configurazione Vite">
 
 Aggiungi il plugin intlayer nella tua configurazione:
 
@@ -177,7 +215,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à sviluppo. Definisce le variabili d'ambiente di Intlayer all'interno dell'applicazione Vite. Inoltre, fornisce alias per ottimizzare le prestazioni.
 
-### Passaggio 5: Crea il layout radice (Root Layout)
+</Step>
+
+<Step number={5} title="Crea il layout radice">
 
 Configura il tuo layout radice per supportare l'internazionalizzazione utilizzando `useParams` per rilevare la lingua corrente e impostando gli attributi `lang` e `dir` sul tag `html`.
 
@@ -218,7 +258,9 @@ const RootComponent: ParentComponent = (props) => {
 };
 ```
 
-### Passaggio 6: Crea il layout della lingua (Opzionale)
+</Step>
+
+<Step number={6} title="Crea il layout della lingua">
 
 Crea un layout che gestisca il prefisso della lingua ed effettui la validazione. Questo layout assicurerà che vengano elaborati solo prefissi di lingua validi.
 
@@ -253,7 +295,9 @@ export const Route = createFileRoute("/{-$locale}")({
 > Per la modalità `'prefix-all'`, potresti preferire cambiare lo slot in `$locale`.
 > Per la modalità `'no-prefix'` o `'search-params'`, puoi rimuovere completamente lo slot.
 
-### Passaggio 7: Dichiarazione dei contenuti
+</Step>
+
+<Step number={7} title="Dichiarazione dei contenuti">
 
 Crea e gestisci le tue dichiarazioni dei contenuti per memorizzare le traduzioni:
 
@@ -299,7 +343,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 8: Utilizza componenti e hook sensibili alla lingua
+</Step>
+
+<Step number={8} title="Utilizza componenti e hook sensibili alla lingua">
 
 Crea un componente `LocalizedLink` per una navigazione sensibile alla lingua:
 
@@ -378,7 +424,9 @@ export const useLocalizedNavigate = () => {
 };
 ```
 
-### Passaggio 9: Utilizza Intlayer nelle tue pagine
+</Step>
+
+<Step number={9} title="Utilizza Intlayer nelle tue pagine">
 
 Accedi ai tuoi dizionari dei contenuti in tutta l'applicazione:
 
@@ -421,7 +469,9 @@ function RouteComponent() {
 >
 > Per saperne di più sull'hook `useIntlayer`, fai riferimento alla [documentazione](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/packages/solid-intlayer/useIntlayer.md).
 
-### Passaggio 10: Crea un componente per cambiare lingua (Locale Switcher)
+</Step>
+
+<Step number={10} title="Crea un componente per cambiare lingua">
 
 Crea un componente per consentire agli utenti di cambiare lingua:
 
@@ -465,7 +515,9 @@ export default LocaleSwitcher;
 >
 > Per saperne di più sull'hook `useLocale`, fai riferimento alla [documentazione](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/packages/solid-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 radice. Questo assicura che vengano impostati gli attributi corretti sia sul server che sul client.
 
@@ -484,7 +536,9 @@ const RootComponent: ParentComponent = (props) => {
 
 ---
 
-### Passaggio 12: Aggiungi il middleware (Opzionale)
+</Step>
+
+<Step number={12} title="Aggiungi il middleware">
 
 Puoi anche utilizzare `intlayerProxy` per aggiungere il routing lato server alla tua applicazione. Questo plugin rileverà automaticamente la lingua corrente in base all'URL e imposterà il cookie della lingua appropriato. Se non viene specificata alcuna lingua, il plugin determinerà la lingua più appropriata in base alle preferenze linguistiche del browser dell'utente. Se non viene rilevata alcuna lingua, reindirizzerà alla lingua predefinita.
 
@@ -515,7 +569,9 @@ export default defineConfig({
 
 ---
 
-### Passaggio 13: Internazionalizza i tuoi metadati (Opzionale)
+</Step>
+
+<Step number={13} title="Internazionalizza i tuoi metadati">
 
 Puoi anche usare la funzione `getIntlayer` per accedere ai tuoi dizionari dei contenuti all'interno del loader `head` per i metadati sensibili alla localizzazione:
 
@@ -562,7 +618,9 @@ export const Route = createFileRoute("/{-$locale}/")({
 
 ---
 
-### Passaggio 14: Recupera la lingua nelle tue azioni server (Opzionale)
+</Step>
+
+<Step number={14} title="Recupera la lingua nelle tue azioni server">
 
 Potresti voler accedere alla lingua corrente dall'interno delle tue azioni server o dei tuoi endpoint API.
 Puoi farlo usando l'aiutante `getLocale` di `intlayer`.
@@ -599,7 +657,9 @@ export const getLocaleServer = createServerFn().handler(async () => {
 
 ---
 
-### Passaggio 15: Gestione delle pagine non trovate (Opzionale)
+</Step>
+
+<Step number={15} title="Gestione delle pagine non trovate">
 
 Quando un utente visita una pagina inesistente, puoi mostrare una pagina di errore 404 personalizzata e il prefisso della lingua può influenzare il modo in cui tale pagina viene attivata.
 
@@ -673,7 +733,9 @@ export const Route = createFileRoute("/{-$locale}/$")({
 });
 ```
 
-### (Opzionale) Passaggio 15: Estrarre il contenuto dei componenti
+</Step>
+
+<Step number={15} title="Estrarre il contenuto dei componenti" isOptional={true}>
 
 Se hai una base di codice esistente, trasformare migliaia di file può richiedere molto tempo.
 
@@ -786,7 +848,9 @@ bun run build # Oppure 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 le rotte localizzate e aggiunge i metadati necessari per i motori di ricerca.
 
@@ -859,7 +923,9 @@ export const Route = createFileRoute("/sitemap.xml")({
 
 ---
 
-### Passaggio 17: Configura TypeScript (Opzionale)
+</Step>
+
+<Step number={17} title="Configura TypeScript">
 
 Intlayer utilizza l'aumento dei moduli per sfruttare i vantaggi di TypeScript e rendere la tua base di codice più robusta.
 
@@ -890,6 +956,10 @@ Per fare ciò, 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 VS Code**.