@intlayer/docs 8.11.2 → 8.12.0-canary.0

package/docs/nl/intlayer_with_storybook.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-03-20
 updatedAt: 2026-05-06
-title: Intlayer instellen met Storybook
-description: Leer hoe u uw designsysteem meertalig kunt maken met Intlayer en Storybook - compileer inhoudsdeclaraties, voeg een taalschakelaar toe en bekijk uw componenten in elke gewenste taal.
+title: "Storybook i18n - Volledige gids voor het vertalen van uw app"
+description: "Geen i18next meer. De 2026-gids voor het bouwen van een meertalige (i18n) Storybook-app. Vertaal met AI-agenten en optimaliseer bundelgrootte, SEO en prestaties."
 keywords:
   - Internationalisering
   - Documentatie
@@ -59,7 +59,9 @@ Storybook is de industriestandaard tool voor het in isolatie ontwikkelen en docu
 <Tabs>
 <Tab value="Vite Setup">
 
-### Stap 1: Afhankelijkheden installeren
+<Steps>
+
+<Step number={1} title="Afhankelijkheden installeren">
 
 ```bash packageManager="npm"
 npm install intlayer react-intlayer
@@ -89,7 +91,9 @@ bun add vite-intlayer --dev
 
 ---
 
-### Stap 2: Een Intlayer-configuratie aanmaken
+</Step>
+
+<Step number={2} title="Een Intlayer-configuratie aanmaken">
 
 Maak `intlayer.config.ts` aan in de root van uw project (of in uw design-system pakket):
 
@@ -118,7 +122,9 @@ export default config;
 
 ---
 
-### Stap 3: De Vite-plugin toevoegen aan Storybook
+</Step>
+
+<Step number={3} title="De Vite-plugin toevoegen aan Storybook">
 
 Met de `viteFinal` hook van Storybook kunt u de interne Vite-configuratie uitbreiden. Importeer en voeg de `intlayer()` plugin daar toe:
 
@@ -159,7 +165,9 @@ De `intlayer()` plugin bewaakt uw `*.content.ts` bestanden and bouwt automatisch
 
 ---
 
-### Stap 4: De `IntlayerProvider` decorator en een locale-werkbalk toevoegen
+</Step>
+
+<Step number={4} title="De `IntlayerProvider` decorator en een locale-werkbalk toevoegen">
 
 Het `preview` bestand van Storybook is de juiste plek om elke story te omhullen met de `IntlayerProvider` en een taalschakelaar in de werkbalk te tonen:
 
@@ -216,7 +224,9 @@ export default preview;
 </Tab>
 <Tab value="Webpack Setup">
 
-### Stap 1: Afhankelijkheden installeren
+</Step>
+
+<Step number={1} title="Afhankelijkheden installeren">
 
 ```bash packageManager="npm"
 npm install intlayer react-intlayer
@@ -240,7 +250,9 @@ bun add @intlayer/webpack --dev
 
 ---
 
-### Stap 2: Een Intlayer-configuratie aanmaken
+</Step>
+
+<Step number={2} title="Een Intlayer-configuratie aanmaken">
 
 Maak `intlayer.config.ts` aan in de root van uw project:
 
@@ -262,7 +274,9 @@ export default config;
 
 ---
 
-### Stap 3: Webpack van Storybook configureren
+</Step>
+
+<Step number={3} title="Webpack van Storybook configureren">
 
 Breid voor op Webpack gebaseerde Storybook-instellingen (bijv. `@storybook/react-webpack5`) de webpack-configuratie uit via `webpackFinal` om de Intlayer-aliassen en loader toe te voegen:
 
@@ -289,7 +303,9 @@ export default config;
 
 ---
 
-### Stap 4: De `IntlayerProvider` decorator en een locale-werkbalk toevoegen
+</Step>
+
+<Step number={4} title="De `IntlayerProvider` decorator en een locale-werkbalk toevoegen">
 
 Hetzelfde als de Vite-instelling - voeg de decorator en het globale locale-type toe in `.storybook/preview.tsx`:
 
@@ -335,6 +351,10 @@ export default preview;
 
 ---
 
+</Step>
+
+</Steps>
+
 ## Inhoud declareren
 
 Maak een `*.content.ts` bestand aan naast elke component. Intlayer pikt dit automatisch op tijdens de compilatie.

package/docs/nl/intlayer_with_vanilla.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-03-31
-updatedAt: 2026-05-06
-title: Vanilla JS i18n - Hoe vertaal je een Vanilla JS app in 2026
-description: Ontdek hoe je je Vanilla JS-website meertalig maakt. Volg de documentatie om deze te internationaliseren (i18n) en te vertalen.
+updatedAt: 2026-05-31
+title: "Vanilla JS i18n - Volledige gids voor het vertalen van uw app"
+description: "Geen i18next meer. De 2026-gids voor het bouwen van een meertalige (i18n) Vanilla JS-app. Vertaal met AI-agenten en optimaliseer bundelgrootte, SEO en prestaties."
 keywords:
   - Internationalisering
   - Documentatie
@@ -78,7 +78,9 @@ Met behulp van de standalone bundel kun je Intlayer direct in je HTML-bestanden
 
 ## Stap-voor-stap handleiding om Intlayer in te stellen in een Vanilla JS-applicatie
 
-### Stap 1: Afhankelijkheden installeren
+<Steps>
+
+<Step number={1} title="Afhankelijkheden installeren">
 
 Installeer de benodigde pakketten met npm:
 
@@ -138,7 +140,9 @@ bun x intlayer build
 
 > De bundling-export van de `intlayer standalone` CLI produceert een geoptimaliseerde build door middel van tree-shaking van ongebruikte pakketten, locales en niet-essentiële logica (zoals redirects of prefixes) die specifiek zijn voor uw configuratie.
 
-### Stap 2: Configuratie van je project
+</Step>
+
+<Step number={2} title="Configuratie van je project">
 
 Maak een configuratiebestand om de talen van je applicatie in te stellen:
 
@@ -162,7 +166,9 @@ export default config;
 
 > Via dit configuratiebestand kun je gelokaliseerde URL's, middleware-redirection, cookienamen, de locatie en extensie van je inhoudsdeclaraties instellen, Intlayer-logs in de console uitschakelen en meer. Raadpleeg de [configuratie-documentatie](https://github.com/aymericzip/intlayer/blob/main/docs/docs/nl/configuration.md) voor een volledige lijst van beschikbare parameters.
 
-### Stap 3: Importeer de bundel in je HTML
+</Step>
+
+<Step number={3} title="Importeer de bundel in je HTML">
 
 Zodra je de `intlayer.js`-bundel hebt gegeneerd, kun je deze in je HTML-bestand importeren:
 
@@ -186,7 +192,9 @@ Zodra je de `intlayer.js`-bundel hebt gegeneerd, kun je deze in je HTML-bestand
 
 De bundel stelt `Intlayer` en `VanillaIntlayer` bloot als globale objecten op `window`.
 
-### Stap 4: Bootstrap Intlayer in je toegangspunt
+</Step>
+
+<Step number={4} title="Bootstrap Intlayer in je toegangspunt">
 
 In je `src/main.js`, roep `installIntlayer()` aan **voordat** er inhoud wordt gerenderd, zodat de globale taal-singleton gereed is.
 
@@ -206,7 +214,9 @@ installIntlayer();
 installIntlayerMarkdown();
 ```
 
-### Stap 5: Declareer je inhoud
+</Step>
+
+<Step number={5} title="Declareer je inhoud">
 
 Maak en beheer je inhoudsdeclaraties om vertalingen op te slaan:
 
@@ -284,7 +294,9 @@ export default appContent;
 >
 > Raadpleeg de [inhoudsdeclaratie-documentatie](https://github.com/aymericzip/intlayer/blob/main/docs/docs/nl/dictionary/content_file.md) voor meer details.
 
-### Stap 6: Gebruik Intlayer in je JavaScript
+</Step>
+
+<Step number={6} title="Gebruik Intlayer in je JavaScript">
 
 Het `window.VanillaIntlayer` object biedt API-helpers: `useIntlayer(key, locale?)` retourneert de vertaalde inhoud voor een gegeven sleutel.
 
@@ -318,7 +330,9 @@ document.querySelector(".read-the-docs").textContent = String(
 > img.alt = content.viteLogoLabel.value;
 > ```
 
-### (Optioneel) Stap 7: Verander de taal van je inhoud
+</Step>
+
+<Step number={7} title="Verander de taal van je inhoud" isOptional={true}>
 
 Om de taal van je inhoud te veranderen, gebruik je de `setLocale` functie die wordt blootgesteld door `useLocale`.
 
@@ -353,7 +367,9 @@ export function setupLocaleSwitcher(container) {
 }
 ```
 
-### (Optioneel) Stap 8: Schakel de HTML taal- en richtingsattributen
+</Step>
+
+<Step number={8} title="Schakel de HTML taal- en richtingsattributen" isOptional={true}>
 
 Update de `lang` en `dir` attributen van de `<html>`-tag zodat ze overeenkomen met de huidige taal voor toegankelijkheid en SEO.
 
@@ -371,7 +387,9 @@ useLocale({
 });
 ```
 
-### (Optioneel) Stap 9: Laad woordenboeken lui per taal
+</Step>
+
+<Step number={9} title="Laad woordenboeken lui per taal" isOptional={true}>
 
 Als je woordenboeken lui wilt laden per taal, kun je `useDictionaryDynamic` gebruiken. Dit is handig als je niet alle vertalingen in het initiële `intlayer.js`-bestand wilt bundelen.
 
@@ -393,6 +411,9 @@ const unsubscribe = useDictionaryDynamic(
 ```
 
 > Opmerking: `useDictionaryDynamic` vereist dat de woordenboeken beschikbaar zijn als afzonderlijke ESM-bestanden. Deze aanpak wordt doorgaans gebruikt als je een webserver hebt die de woordenboeken serveert.
+> </Step>
+
+</Steps>
 
 ### TypeScript configureren
 

package/docs/nl/intlayer_with_vite+lit.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-03-23
-updatedAt: 2026-05-06
-title: Vite + Lit i18n - Hoe vertaal je een Lit-app in 2026
-description: Ontdek hoe je je Vite- en Lit-website meertalig kunt maken. Volg de documentatie voor internationalisering (i18n) en vertaling.
+updatedAt: 2026-05-31
+title: "Vite + Lit i18n - Volledige gids voor het vertalen van uw app"
+description: "Geen i18next meer. De 2026-gids voor het bouwen van een meertalige (i18n) Vite + Lit-app. Vertaal met AI-agenten en optimaliseer bundelgrootte, SEO en prestaties."
 keywords:
   - Internationalisering
   - Documentatie
@@ -72,7 +72,9 @@ Met Intlayer kun je:
 
 ## Stap-voor-stap handleiding om Intlayer in te stellen in een Vite- en Lit-applicatie
 
-### Stap 1: Afhankelijkheden installeren
+<Steps>
+
+<Step number={1} title="Afhankelijkheden installeren">
 
 Installeer de benodigde pakketten met npm:
 
@@ -110,7 +112,9 @@ bun x intlayer init
 - **vite-intlayer**
   Bevat de Vite-plugin voor het integreren van Intlayer met de [Vite-bundler](https://vite.dev/guide/why.html#why-bundle-for-production), evenals middleware voor het detecteren van de voorkeurstaal van de gebruiker, het beheren van cookies en het afhandelen van URL-omleidingen.
 
-### Stap 2: Configuratie van je project
+</Step>
+
+<Step number={2} title="Configuratie van je project">
 
 Maak een configuratiebestand om de talen van je applicatie te configureren:
 
@@ -134,7 +138,9 @@ export default config;
 
 > Via dit configuratiebestand kun je gelokaliseerde URL's, middleware-omleidingen, cookienamen, de locatie en extensie van je inhoudsdeclaraties instellen, Intlayer-logs in de console uitschakelen, en meer. Raadpleeg de [configuratiedocumentatie](https://github.com/aymericzip/intlayer/blob/main/docs/docs/nl/configuration.md) voor een volledige lijst van beschikbare parameters.
 
-### Stap 3: Intlayer integreren in je Vite-configuratie
+</Step>
+
+<Step number={3} title="Intlayer integreren in je Vite-configuratie">
 
 Voeg de intlayer-plugin toe aan je configuratie.
 
@@ -150,7 +156,9 @@ export default defineConfig({
 
 > De `intlayer()` Vite-plugin wordt gebruikt om Intlayer met Vite te integreren. Het zorgt voor het bouwen van inhoudsdeclaratiebestanden en bewaakt deze in de ontwikkelmodus. Het definieert Intlayer-omgevingsvariabelen binnen de Vite-applicatie. Bovendien biedt het aliassen om de prestaties te optimaliseren.
 
-### Stap 4: Bootstrap Intlayer in je toegangspunt
+</Step>
+
+<Step number={4} title="Bootstrap Intlayer in je toegangspunt">
 
 Roep `installIntlayer()` aan **vóórdat** er aangepaste elementen worden geregistreerd, zodat de globale locale singleton gereed is wanneer het eerste element verbinding maakt.
 
@@ -175,7 +183,9 @@ installIntlayerMarkdown();
 import "./my-element.js";
 ```
 
-### Stap 5: Declareer je inhoud
+</Step>
+
+<Step number={5} title="Declareer je inhoud">
 
 Maak en beheer je inhoudsdeclaraties om vertalingen op te slaan:
 
@@ -261,7 +271,9 @@ export default appContent;
 >
 > Raadpleeg de [inhoudsdeclaratiedocumentatie](https://github.com/aymericzip/intlayer/blob/main/docs/docs/nl/dictionary/content_file.md) voor meer details.
 
-### Stap 6: Gebruik Intlayer in je LitElement
+</Step>
+
+<Step number={6} title="Gebruik Intlayer in je LitElement">
 
 Gebruik `useIntlayer` binnen een `LitElement`. Het retourneert een `ReactiveController`-proxy die automatisch herrenders activeert wanneer de actieve taal verandert - er is geen extra configuratie vereist.
 
@@ -306,7 +318,9 @@ export class MyElement extends LitElement {
 > html`<img alt=${String(content.viteLogo)} />`;
 > ```
 
-### (Optioneel) Stap 7: De taal van je inhoud wijzigen
+</Step>
+
+<Step number={7} title="De taal van je inhoud wijzigen" isOptional={true}>
 
 Gebruik de `setLocale`-methode van de `useLocale`-controller om de taal van je inhoud te wijzigen.
 
@@ -341,7 +355,9 @@ export class LocaleSwitcher extends LitElement {
 }
 ```
 
-### (Optioneel) Stap 8: Markdown- en HTML-inhoud renderen
+</Step>
+
+<Step number={8} title="Markdown- en HTML-inhoud renderen" isOptional={true}>
 
 Intlayer ondersteunt `md()` en `html()` inhoudsdeclaraties. In Lit wordt de gecompileerde output geïnjecteerd als ruwe HTML via de `unsafeHTML`-richtlijn.
 
@@ -391,7 +407,9 @@ export class MyElement extends LitElement {
 > [!TIP]
 > `String(content.editNote)` roept `toString()` aan op de `IntlayerNode`, wat de ruwe Markdown-string retourneert. Geef deze door aan `compileMarkdown` om een HTML-string te krijgen, en render deze vervolgens met de `unsafeHTML`-richtlijn van Lit.
 
-### (Optioneel) Stap 9: Gelokaliseerde routing toevoegen aan je applicatie
+</Step>
+
+<Step number={9} title="Gelokaliseerde routing toevoegen aan je applicatie" isOptional={true}>
 
 Om unieke routes voor elke taal te maken (nuttig voor SEO), kun je een client-side router gebruiken samen met Intlayer's `localeMap` / `localeFlatMap` helpers, en de `intlayerProxy` Vite-plugin voor taaldetectie aan de serverzijde.
 
@@ -408,7 +426,9 @@ export default defineConfig({
 });
 ```
 
-### (Optioneel) Stap 10: De URL wijzigen wanneer de taal verandert
+</Step>
+
+<Step number={10} title="De URL wijzigen wanneer de taal verandert" isOptional={true}>
 
 Gebruik `useRewriteURL` samen met de taalschakelaar om de browser-URL bij te werken wanneer de taal verandert:
 
@@ -446,7 +466,9 @@ export class LocaleSwitcher extends LitElement {
 }
 ```
 
-### (Optioneel) Stap 11: De HTML taal- en richtingsattributen omschakelen
+</Step>
+
+<Step number={11} title="De HTML taal- en richtingsattributen omschakelen" isOptional={true}>
 
 Werk de `lang`- en `dir`-attributen van de `<html>`-tag bij zodat deze overeenkomen met de huidige taal voor toegankelijkheid en SEO.
 
@@ -471,7 +493,9 @@ export class MyElement extends LitElement {
 }
 ```
 
-### (Optioneel) Stap 12: De inhoud van je componenten extraheren
+</Step>
+
+<Step number={12} title="De inhoud van je componenten extraheren" isOptional={true}>
 
 Als je een bestaande codebase hebt, kan het transformeren van duizenden bestanden tijdrovend zijn.
 
@@ -511,6 +535,10 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
+</Step>
+
+</Steps>
+
 ### (Optioneel) Sitemap en robots.txt (buildtijdgeneratie)
 
 Intlayer biedt `generateSitemap` en `getMultilingualUrls` om meertalige `sitemap.xml` en `robots.txt` voor crawlers te formatteren en automatisch naar `public/` te schrijven. Meestal draait u een klein Node-script **vóór** Vite (bijv. npm-hooks `predev` / `prebuild`).

package/docs/nl/intlayer_with_vite+vanilla.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-03-23
-updatedAt: 2026-05-06
-title: i18n Vite + Vanilla JS - Hoe een Vanilla JS-app te vertalen in 2026
-description: Ontdek hoe u uw Vite- en Vanilla JS-website meertalig kunt maken. Volg de documentatie voor internationalisering (i18n) en vertaling.
+updatedAt: 2026-05-31
+title: "Vite + Vanilla JS i18n - Volledige gids voor het vertalen van uw app"
+description: "Geen i18next meer. De 2026-gids voor het bouwen van een meertalige (i18n) Vite + Vanilla JS-app. Vertaal met AI-agenten en optimaliseer bundelgrootte, SEO en prestaties."
 keywords:
   - Internationalisering
   - Documentatie
@@ -73,7 +73,9 @@ Met Intlayer kunt u:
 
 ## Stap-voor-stap gids om Intlayer in te stellen in een Vite- en Vanilla JS-applicatie
 
-### Stap 1: Afhankelijkheden installeren
+<Steps>
+
+<Step number={1} title="Afhankelijkheden installeren">
 
 Installeer de benodigde pakketten met npm:
 
@@ -110,7 +112,9 @@ bun x intlayer init
 - **vite-intlayer**
   Bevat de Vite-plugin voor het integreren van Intlayer met de [Vite-bundler](https://vite.dev/guide/why.html#why-bundle-for-production), evenals middleware voor het detecteren van de voorkeurstaal van de gebruiker, het beheren van cookies en het afhandelen van URL-omleidingen.
 
-### Stap 2: Configuratie van uw project
+</Step>
+
+<Step number={2} title="Configuratie van uw project">
 
 Maak een configuratiebestand om de talen van uw applicatie te configureren:
 
@@ -134,7 +138,9 @@ export default config;
 
 > Via dit configuratiebestand kunt u gelokaliseerde URL's, middleware-omleidingen, cookienamen, de locatie en extensie van uw inhoudsverklaringen instellen, Intlayer-logboeken in de console uitschakelen en meer. Raadpleeg de [configuratiedocumentatie](https://github.com/aymericzip/intlayer/blob/main/docs/docs/nl/configuration.md) voor een volledige lijst met beschikbare parameters.
 
-### Stap 3: Integreer Intlayer in uw Vite-configuratie
+</Step>
+
+<Step number={3} title="Integreer Intlayer in uw Vite-configuratie">
 
 Voeg de intlayer-plugin toe aan uw configuratie.
 
@@ -150,7 +156,9 @@ export default defineConfig({
 
 > De `intlayer()` Vite-plugin wordt gebruikt om Intlayer met Vite te integreren. Het zorgt voor het bouwen van inhoudsverklaringsbestanden en bewaakt deze in ontwikkelingsmodus. Het definieert Intlayer-omgevingsvariabelen binnen de Vite-applicatie. Bovendien biedt het aliassen om de prestaties te optimaliseren.
 
-### Stap 4: Bootstrap Intlayer in uw toegangspunt
+</Step>
+
+<Step number={4} title="Bootstrap Intlayer in uw toegangspunt">
 
 Roep `installIntlayer()` aan **voordat** enige inhoud wordt gerenderd, zodat de globale taal-singleton gereed is.
 
@@ -175,7 +183,9 @@ installIntlayerMarkdown();
 import "./app.js";
 ```
 
-### Stap 5: Declareer uw inhoud
+</Step>
+
+<Step number={5} title="Declareer uw inhoud">
 
 Maak en beheer uw inhoudsverklaringen om vertalingen op te slaan:
 
@@ -253,7 +263,9 @@ export default appContent;
 >
 > Raadpleeg de [inhoudsverklaringsdocumentatie](https://github.com/aymericzip/intlayer/blob/main/docs/docs/nl/dictionary/content_file.md) voor meer informatie.
 
-### Stap 6: Gebruik Intlayer in uw JavaScript
+</Step>
+
+<Step number={6} title="Gebruik Intlayer in uw JavaScript">
 
 `vanilla-intlayer` spiegelt de `react-intlayer` surface API: `useIntlayer(key, locale?)` retourneert de vertaalde inhoud rechtstreeks. Koppel `.onChange()` aan het resultaat om u te abonneren op taalveranderingen - het expliciete equivalent van een React re-render.
 
@@ -289,7 +301,9 @@ document.querySelector<HTMLParagraphElement>(".read-the-docs")!.textContent =
 > img.alt = content.viteLogoLabel.value;
 > ```
 
-### (Optioneel) Stap 7: De taal van uw inhoud wijzigen
+</Step>
+
+<Step number={7} title="De taal van uw inhoud wijzigen" isOptional={true}>
 
 Gebruik de functie `setLocale` van `useLocale` om de taal van uw inhoud te wijzigen.
 
@@ -324,7 +338,9 @@ export function setupLocaleSwitcher(container: HTMLElement): () => void {
 }
 ```
 
-### (Optioneel) Stap 8: Markdown- en HTML-inhoud renderen
+</Step>
+
+<Step number={8} title="Markdown- en HTML-inhoud renderen" isOptional={true}>
 
 Intlayer ondersteunt `md()` en `html()` inhoudsverklaringen. In pure JS wordt gecompileerde uitvoer ingevoegd als onbewerkte HTML via `innerHTML`.
 
@@ -383,7 +399,9 @@ document.querySelector<HTMLDivElement>(".edit-note")!.innerHTML =
 > });
 > ```
 
-### (Optioneel) Stap 9: Gelokaliseerde Routering toevoegen aan uw applicatie
+</Step>
+
+<Step number={9} title="Gelokaliseerde Routering toevoegen aan uw applicatie" isOptional={true}>
 
 Om unieke routes voor elke taal te maken (nuttig voor SEO), kunt u `intlayerProxy` gebruiken in uw Vite-configuratie voor taaldetectie aan de serverzijde.
 
@@ -403,7 +421,9 @@ export default defineConfig({
 });
 ```
 
-### (Optioneel) Stap 10: De URL wijzigen wanneer de taal verandert
+</Step>
+
+<Step number={10} title="De URL wijzigen wanneer de taal verandert" isOptional={true}>
 
 Roep `useRewriteURL()` aan na het installeren van Intlayer om de browser-URL bij te werken wanneer de taal verandert:
 
@@ -417,7 +437,9 @@ installIntlayer();
 const stopRewriteURL = useRewriteURL();
 ```
 
-### (Optioneel) Stap 11: De HTML-taal- en richtingskenmerken wisselen
+</Step>
+
+<Step number={11} title="De HTML-taal- en richtingskenmerken wisselen" isOptional={true}>
 
 Werk de kenmerken `lang` en `dir` van de `<html>`-tag bij zodat deze overeenkomen met de huidige taal voor toegankelijkheid en SEO.
 
@@ -435,7 +457,9 @@ useLocale({
 });
 ```
 
-### (Optioneel) Stap 12: Woordenboeken per taal lazyloaden
+</Step>
+
+<Step number={12} title="Woordenboeken per taal lazyloaden" isOptional={true}>
 
 Bij grote apps wilt u misschien het woordenboek van elke taal in een eigen chunk opsplitsen. Gebruik `useDictionaryDynamic` naast de dynamische `import()` van Vite:
 
@@ -458,7 +482,9 @@ const unsubscribe = useDictionaryDynamic(
 
 > De bundel van elke taal wordt alleen opgehaald wanneer die taal actief wordt en het resultaat wordt in de cache opgeslagen - volgende overschakelingen naar dezelfde taal zijn onmiddellijk.
 
-### (Optioneel) Stap 13: De inhoud van uw componenten extraheren
+</Step>
+
+<Step number={13} title="De inhoud van uw componenten extraheren" isOptional={true}>
 
 Als u een bestaande codebase heeft, kan het transformeren van duizenden bestanden tijdrovend zijn.
 
@@ -554,6 +580,9 @@ bun run build # Of bun run dev
 
  </Tab>
 </Tabs>
+</Step>
+
+</Steps>
 
 ### (Optioneel) Sitemap en robots.txt (buildtijdgeneratie)