npm - @intlayer/docs - Versions diffs - 8.6.0 → 8.6.10 - Mend

@intlayer/docs 8.6.0 → 8.6.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (197) hide show

package/dist/cjs/doc.cjs.map +1 -1
package/dist/cjs/generated/docs.entry.cjs +60 -0
package/dist/cjs/generated/docs.entry.cjs.map +1 -1
package/dist/esm/doc.mjs.map +1 -1
package/dist/esm/generated/docs.entry.mjs +60 -0
package/dist/esm/generated/docs.entry.mjs.map +1 -1
package/dist/types/doc.d.ts.map +1 -1
package/dist/types/generated/docs.entry.d.ts +3 -0
package/dist/types/generated/docs.entry.d.ts.map +1 -1
package/docs/ar/cli/index.md +54 -42
package/docs/ar/cli/init.md +32 -20
package/docs/ar/cli/standalone.md +91 -0
package/docs/ar/configuration.md +39 -7
package/docs/ar/custom_domains.md +250 -0
package/docs/ar/intlayer_with_tanstack+solid.md +14 -33
package/docs/ar/intlayer_with_tanstack.md +25 -16
package/docs/ar/intlayer_with_vanilla.md +506 -0
package/docs/bn/cli/index.md +195 -0
package/docs/bn/cli/init.md +96 -0
package/docs/bn/cli/standalone.md +91 -0
package/docs/bn/configuration.md +46 -14
package/docs/bn/custom_domains.md +250 -0
package/docs/bn/intlayer_with_vanilla.md +506 -0
package/docs/cs/cli/index.md +195 -0
package/docs/cs/cli/init.md +96 -0
package/docs/cs/cli/standalone.md +91 -0
package/docs/cs/configuration.md +46 -7
package/docs/cs/custom_domains.md +250 -0
package/docs/cs/intlayer_with_vanilla.md +506 -0
package/docs/de/cli/index.md +53 -41
package/docs/de/cli/standalone.md +91 -0
package/docs/de/configuration.md +46 -7
package/docs/de/custom_domains.md +250 -0
package/docs/de/intlayer_with_tanstack+solid.md +15 -36
package/docs/de/intlayer_with_tanstack.md +25 -16
package/docs/de/intlayer_with_vanilla.md +506 -0
package/docs/en/bundle_optimization.md +288 -23
package/docs/en/cli/index.md +6 -1
package/docs/en/cli/init.md +13 -1
package/docs/en/cli/standalone.md +91 -0
package/docs/en/configuration.md +46 -7
package/docs/en/custom_domains.md +245 -0
package/docs/en/intlayer_with_tanstack+solid.md +15 -36
package/docs/en/intlayer_with_tanstack.md +25 -16
package/docs/en/intlayer_with_vanilla.md +506 -0
package/docs/en-GB/cli/index.md +56 -44
package/docs/en-GB/cli/init.md +28 -21
package/docs/en-GB/cli/standalone.md +91 -0
package/docs/en-GB/configuration.md +53 -14
package/docs/en-GB/custom_domains.md +250 -0
package/docs/en-GB/intlayer_with_tanstack+solid.md +15 -36
package/docs/en-GB/intlayer_with_tanstack.md +25 -16
package/docs/en-GB/intlayer_with_vanilla.md +506 -0
package/docs/es/cli/index.md +65 -53
package/docs/es/cli/init.md +33 -21
package/docs/es/cli/standalone.md +91 -0
package/docs/es/configuration.md +39 -1
package/docs/es/custom_domains.md +250 -0
package/docs/es/intlayer_with_tanstack+solid.md +15 -36
package/docs/es/intlayer_with_tanstack.md +25 -16
package/docs/es/intlayer_with_vanilla.md +506 -0
package/docs/fr/cli/index.md +43 -31
package/docs/fr/cli/init.md +37 -25
package/docs/fr/cli/standalone.md +91 -0
package/docs/fr/configuration.md +46 -7
package/docs/fr/custom_domains.md +250 -0
package/docs/fr/intlayer_with_tanstack+solid.md +15 -36
package/docs/fr/intlayer_with_tanstack.md +25 -16
package/docs/fr/intlayer_with_vanilla.md +506 -0
package/docs/hi/cli/index.md +71 -59
package/docs/hi/cli/init.md +37 -33
package/docs/hi/cli/standalone.md +91 -0
package/docs/hi/configuration.md +39 -7
package/docs/hi/custom_domains.md +250 -0
package/docs/hi/intlayer_with_tanstack+solid.md +14 -33
package/docs/hi/intlayer_with_tanstack.md +25 -16
package/docs/hi/intlayer_with_vanilla.md +506 -0
package/docs/id/cli/index.md +59 -47
package/docs/id/cli/init.md +32 -25
package/docs/id/cli/standalone.md +91 -0
package/docs/id/configuration.md +46 -7
package/docs/id/custom_domains.md +250 -0
package/docs/id/intlayer_with_tanstack+solid.md +14 -33
package/docs/id/intlayer_with_tanstack.md +25 -16
package/docs/id/intlayer_with_vanilla.md +506 -0
package/docs/it/cli/index.md +58 -41
package/docs/it/cli/init.md +37 -38
package/docs/it/cli/standalone.md +91 -0
package/docs/it/configuration.md +46 -7
package/docs/it/custom_domains.md +250 -0
package/docs/it/intlayer_with_tanstack+solid.md +15 -36
package/docs/it/intlayer_with_tanstack.md +25 -16
package/docs/it/intlayer_with_vanilla.md +506 -0
package/docs/ja/cli/index.md +59 -47
package/docs/ja/cli/init.md +36 -24
package/docs/ja/cli/standalone.md +91 -0
package/docs/ja/configuration.md +46 -7
package/docs/ja/custom_domains.md +250 -0
package/docs/ja/intlayer_with_tanstack+solid.md +15 -36
package/docs/ja/intlayer_with_tanstack.md +25 -16
package/docs/ja/intlayer_with_vanilla.md +506 -0
package/docs/ko/cli/index.md +58 -46
package/docs/ko/cli/init.md +39 -35
package/docs/ko/cli/standalone.md +91 -0
package/docs/ko/configuration.md +47 -8
package/docs/ko/custom_domains.md +250 -0
package/docs/ko/intlayer_with_tanstack+solid.md +15 -36
package/docs/ko/intlayer_with_tanstack.md +25 -16
package/docs/ko/intlayer_with_vanilla.md +506 -0
package/docs/nl/cli/index.md +195 -0
package/docs/nl/cli/init.md +96 -0
package/docs/nl/cli/standalone.md +91 -0
package/docs/nl/configuration.md +46 -7
package/docs/nl/custom_domains.md +250 -0
package/docs/nl/intlayer_with_vanilla.md +506 -0
package/docs/pl/cli/index.md +56 -44
package/docs/pl/cli/init.md +36 -32
package/docs/pl/cli/standalone.md +91 -0
package/docs/pl/configuration.md +46 -7
package/docs/pl/custom_domains.md +250 -0
package/docs/pl/intlayer_with_tanstack+solid.md +14 -33
package/docs/pl/intlayer_with_tanstack.md +25 -16
package/docs/pl/intlayer_with_vanilla.md +506 -0
package/docs/pt/cli/index.md +64 -52
package/docs/pt/cli/init.md +35 -31
package/docs/pt/cli/standalone.md +91 -0
package/docs/pt/configuration.md +46 -7
package/docs/pt/custom_domains.md +250 -0
package/docs/pt/intlayer_with_tanstack+solid.md +15 -36
package/docs/pt/intlayer_with_tanstack.md +25 -16
package/docs/pt/intlayer_with_vanilla.md +506 -0
package/docs/ru/cli/index.md +54 -42
package/docs/ru/cli/init.md +31 -27
package/docs/ru/cli/standalone.md +91 -0
package/docs/ru/configuration.md +46 -7
package/docs/ru/custom_domains.md +250 -0
package/docs/ru/intlayer_with_tanstack+solid.md +15 -36
package/docs/ru/intlayer_with_tanstack.md +25 -16
package/docs/ru/intlayer_with_vanilla.md +506 -0
package/docs/tr/cli/index.md +64 -52
package/docs/tr/cli/init.md +37 -30
package/docs/tr/cli/standalone.md +91 -0
package/docs/tr/configuration.md +46 -7
package/docs/tr/custom_domains.md +250 -0
package/docs/tr/intlayer_with_tanstack+solid.md +14 -33
package/docs/tr/intlayer_with_tanstack.md +25 -16
package/docs/tr/intlayer_with_vanilla.md +506 -0
package/docs/uk/cli/index.md +60 -55
package/docs/uk/cli/init.md +32 -20
package/docs/uk/cli/standalone.md +91 -0
package/docs/uk/configuration.md +46 -7
package/docs/uk/custom_domains.md +250 -0
package/docs/uk/intlayer_with_tanstack+solid.md +14 -33
package/docs/uk/intlayer_with_tanstack.md +25 -16
package/docs/uk/intlayer_with_vanilla.md +506 -0
package/docs/ur/cli/index.md +195 -0
package/docs/ur/cli/init.md +96 -0
package/docs/ur/cli/standalone.md +91 -0
package/docs/ur/configuration.md +46 -7
package/docs/ur/custom_domains.md +250 -0
package/docs/ur/intlayer_with_vanilla.md +506 -0
package/docs/vi/cli/index.md +72 -61
package/docs/vi/cli/init.md +33 -21
package/docs/vi/cli/standalone.md +91 -0
package/docs/vi/configuration.md +46 -7
package/docs/vi/custom_domains.md +250 -0
package/docs/vi/intlayer_with_tanstack+solid.md +14 -33
package/docs/vi/intlayer_with_tanstack.md +25 -16
package/docs/vi/intlayer_with_vanilla.md +506 -0
package/docs/zh/cli/index.md +56 -49
package/docs/zh/cli/init.md +30 -18
package/docs/zh/cli/standalone.md +91 -0
package/docs/zh/configuration.md +46 -7
package/docs/zh/custom_domains.md +250 -0
package/docs/zh/intlayer_with_tanstack+solid.md +15 -36
package/docs/zh/intlayer_with_tanstack.md +25 -16
package/docs/zh/intlayer_with_vanilla.md +506 -0
package/package.json +8 -8
package/src/doc.ts +4 -1
package/src/generated/docs.entry.ts +60 -0
package/docs/ar/bundle_optimization.md +0 -185
package/docs/de/bundle_optimization.md +0 -195
package/docs/en-GB/bundle_optimization.md +0 -184
package/docs/es/bundle_optimization.md +0 -194
package/docs/fr/bundle_optimization.md +0 -184
package/docs/hi/bundle_optimization.md +0 -185
package/docs/id/bundle_optimization.md +0 -185
package/docs/it/bundle_optimization.md +0 -185
package/docs/ja/bundle_optimization.md +0 -185
package/docs/ko/bundle_optimization.md +0 -185
package/docs/pl/bundle_optimization.md +0 -185
package/docs/pt/bundle_optimization.md +0 -184
package/docs/ru/bundle_optimization.md +0 -185
package/docs/tr/bundle_optimization.md +0 -184
package/docs/uk/bundle_optimization.md +0 -186
package/docs/vi/bundle_optimization.md +0 -185
package/docs/zh/bundle_optimization.md +0 -185

package/docs/fr/intlayer_with_tanstack+solid.md CHANGED Viewed

@@ -17,6 +17,7 @@ slugs:
   - doc
   - environment
   - tanstack-start
+  - solid
 applicationTemplate: https://github.com/aymericzip/intlayer-tanstack-start-solid-template
 youtubeVideo: https://www.youtube.com/watch?v=_XTdKVWaeqg
 history:
@@ -163,59 +164,45 @@ export default defineConfig({
 ### Étape 5 : Créer l'affichage racine (Root Layout)
-Configurez votre affichage racine pour supporter l'internationalisation en utilisant `useMatches` pour détecter la langue actuelle et en définissant les attributs `lang` et `dir` sur la balise `html`.
+Configurez votre affichage racine pour supporter l'internationalisation en utilisant `useParams` pour détecter la langue actuelle et en définissant les attributs `lang` et `dir` sur la balise `html`.
 ```tsx fileName="src/routes/__root.tsx"
 import {
   HeadContent,
-  Outlet,
   Scripts,
   createRootRouteWithContext,
-  useMatches,
 } from "@tanstack/solid-router";
-import { TanStackRouterDevtools } from "@tanstack/solid-router-devtools";
 import { HydrationScript } from "solid-js/web";
-import { Suspense } from "solid-js";
+import { Suspense, type ParentComponent } from "solid-js";
 import { IntlayerProvider } from "solid-intlayer";
-import { defaultLocale, getHTMLTextDir, type Locale } from "intlayer";
+import { defaultLocale, getHTMLTextDir } from "intlayer";
+import { Route as LocaleRoute } from "./{-$locale}/route";
 export const Route = createRootRouteWithContext()({
   shellComponent: RootComponent,
 });
-type Params = {
-  locale: Locale;
-};
-function RootComponent() {
-  const matches = useMatches();
-  // Essayer de trouver la locale dans les paramètres de n'importe quel match actif
-  // Cela suppose que vous utilisez le segment dynamique "/{-$locale}" dans votre arbre de routes
-  const locale =
-    (
-      matches().find((match) => match.routeId === "/{-$locale}/")
-        ?.params as Params
-    )?.locale ?? defaultLocale;
+const RootComponent: ParentComponent = (props) => {
+  const params = LocaleRoute.useParams();
+  const locale = params()?.locale ?? defaultLocale;
   return (
     <html dir={getHTMLTextDir(locale)} lang={locale}>
       <head>
         <HydrationScript />
+        <HeadContent />
       </head>
       <body>
-        <HeadContent />
         <IntlayerProvider locale={locale}>
           <Suspense>
-            <Outlet />
-            <TanStackRouterDevtools />
+            {props.children}
           </Suspense>
         </IntlayerProvider>
         <Scripts />
       </body>
     </html>
   );
-}
+};
 ```
 ### Étape 6 : Créer la mise en page de la langue (Optionnel)
@@ -459,18 +446,12 @@ export default LocaleSwitcher;
 ### Étape 11 : Gestion des attributs HTML
-Comme vu à l'étape 5, vous pouvez gérer les attributs `lang` et `dir` de la balise `html` en utilisant `useMatches` dans votre composant racine. Cela garantit que les attributs corrects sont définis sur le serveur et le client.
+Comme vu à l'étape 5, vous pouvez gérer les attributs `lang` et `dir` de la balise `html` en utilisant `useParams` dans votre composant racine. Cela garantit que les attributs corrects sont définis sur le serveur et le client.
 ```tsx fileName="src/routes/__root.tsx"
 const RootComponent: ParentComponent = (props) => {
-  const matches = useMatches();
-  // Essayer de trouver la langue dans les paramètres de n'importe quel match actif
-  const locale =
-    (
-      matches().find((match) => match.routeId === "/{-$locale}/")
-        ?.params as Params
-    )?.locale ?? defaultLocale;
+  const params = LocaleRoute.useParams();
+  const locale = params()?.locale ?? defaultLocale;
   return (
     <html dir={getHTMLTextDir(locale)} lang={locale}>
@@ -879,9 +860,7 @@ Ensuite, créez une route `src/routes/sitemap[.]xml.ts` qui utilise la fonction
 import { createFileRoute } from "@tanstack/solid-router";
 import { generateSitemap } from "intlayer";
-const SITE_URL = (
-  import.meta.env.VITE_SITE_URL ?? "http://localhost:3000"
-).replace(/\/$/, "");
+const SITE_URL = "http://localhost:3000";
 export const Route = createFileRoute("/sitemap.xml")({
   server: {

package/docs/fr/intlayer_with_tanstack.md CHANGED Viewed

@@ -183,31 +183,41 @@ export default config;
 ### Étape 5 : Créer le Layout Racine
-Configurez votre layout racine pour supporter l'internationalisation en utilisant `useMatches` pour détecter la locale actuelle et en définissant les attributs `lang` et `dir` sur la balise `html`.
+Configurez votre layout racine pour supporter l'internationalisation en utilisant `useParams` pour détecter la locale actuelle et en définissant les attributs `lang` et `dir` sur la balise `html`.
 ```tsx fileName="src/routes/__root.tsx"
 import {
   createRootRouteWithContext,
   HeadContent,
-  Outlet,
   Scripts,
-  useMatches,
 } from "@tanstack/react-router";
 import { defaultLocale, getHTMLTextDir } from "intlayer";
 import { type ReactNode } from "react";
 import { IntlayerProvider } from "react-intlayer";
+import { Route as LocaleRoute } from "./{-$locale}/route";
 export const Route = createRootRouteWithContext<{}>()({
+  head: () => ({
+    meta: [
+      {
+        charSet: "utf-8",
+      },
+      {
+        content: "width=device-width, initial-scale=1",
+        name: "viewport",
+      },
+      {
+        title: "TanStack Start Starter",
+      },
+    ],
+  }),
   shellComponent: RootDocument,
 });
 function RootDocument({ children }: { children: ReactNode }) {
-  const matches = useMatches();
-  // Essayer de trouver la locale dans les paramètres de n'importe quel match actif
-  // Cela suppose que vous utilisez le segment dynamique "/{-$locale}" dans votre arbre de routes
-  const localeRoute = matches.find((match) => match.routeId === "/{-$locale}");
-  const locale = localeRoute?.params?.locale ?? defaultLocale;
+  const params = LocaleRoute.useParams();
+  const locale = params?.locale ?? defaultLocale;
   return (
     <html dir={getHTMLTextDir(locale)} lang={locale}>
@@ -215,7 +225,9 @@ function RootDocument({ children }: { children: ReactNode }) {
         <HeadContent />
       </head>
       <body>
-        <IntlayerProvider locale={locale}>{children}</IntlayerProvider>
+        <IntlayerProvider locale={locale}>
+          {children}
+        </IntlayerProvider>
         <Scripts />
       </body>
     </html>
@@ -558,15 +570,12 @@ export const LocaleSwitcher: FC = () => {
 ### Étape 10 : Gestion des attributs HTML
-Comme vu à l'étape 5, vous pouvez gérer les attributs `lang` et `dir` de la balise `html` en utilisant `useMatches` dans votre composant racine. Cela garantit que les attributs corrects sont définis sur le serveur et le client.
+Comme vu à l'étape 5, vous pouvez gérer les attributs `lang` et `dir` de la balise `html` en utilisant `useParams` dans votre composant racine. Cela garantit que les attributs corrects sont définis sur le serveur et le client.
 ```tsx fileName="src/routes/__root.tsx"
 function RootDocument({ children }: { children: ReactNode }) {
-  const matches = useMatches();
-  // Essayer de trouver la locale dans les paramètres de n'importe quel match actif
-  const localeRoute = matches.find((match) => match.routeId === "/{-$locale}");
-  const locale = localeRoute?.params?.locale ?? defaultLocale;
+  const params = LocaleRoute.useParams();
+  const locale = params?.locale ?? defaultLocale;
   return (
     <html dir={getHTMLTextDir(locale)} lang={locale}>

package/docs/fr/intlayer_with_vanilla.md ADDED Viewed

@@ -0,0 +1,506 @@
+---
+createdAt: 2026-03-31
+updatedAt: 2026-03-31
+title: i18n Vanilla JS - Comment traduire une application Vanilla JS en 2026
+description: Découvrez comment rendre votre site web Vanilla JS multilingue. Suivez la documentation pour l'internationaliser (i18n) et le traduire.
+keywords:
+  - Internationalisation
+  - Documentation
+  - Intlayer
+  - Vanilla JS
+  - JavaScript
+  - TypeScript
+  - HTML
+slugs:
+  - doc
+  - environment
+  - vanilla
+applicationTemplate: https://github.com/aymericzip/intlayer-vanilla-template
+history:
+  - version: 8.4.10
+    date: 2026-03-31
+    changes: "Initialisation de l'historique"
+---
+# Traduisez votre site web Vanilla JS avec Intlayer | Internationalisation (i18n)
+## Table des matières
+<TOC/>
+## Qu'est-ce qu'Intlayer ?
+**Intlayer** est une bibliothèque d'internationalisation (i18n) innovante et open-source conçue pour simplifier le support multilingue dans les applications web modernes.
+Avec Intlayer, vous pouvez :
+- **Gérer facilement les traductions** en utilisant des dictionnaires déclaratifs au niveau des composants.
+- **Localiser dynamiquement les métadonnées**, les routes et le contenu.
+- **Assurer le support TypeScript** avec des types autogénérés, améliorant l'autocomplétion et la détection d'erreurs.
+- **Bénéficier de fonctionnalités avancées**, comme la détection et le basculement dynamique de la langue.
+Ce guide démontre comment utiliser Intlayer dans une application Vanilla JavaScript **sans utiliser de gestionnaire de paquets ou de bundler** (comme Vite, Webpack, etc.).
+Si votre application utilise un bundler (comme Vite), nous vous recommandons de suivre le [Guide Vite + Vanilla JS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_with_vite+vanilla.md) à la place.
+En utilisant le bundle standalone, vous pouvez importer Intlayer directement dans vos fichiers HTML via un seul fichier JavaScript, ce qui le rend parfait pour les projets hérités ou les sites statiques simples.
+---
+## Guide étape par étape pour configurer Intlayer dans une application Vanilla JS
+### Étape 1 : Installer les dépendances
+Installez les paquets nécessaires en utilisant npm :
+```bash packageManager="npm"
+# Générer un bundle standalone d'intlayer et vanilla-intlayer
+# Ce fichier sera importé dans votre fichier HTML
+npx intlayer standalone --packages intlayer vanilla-intlayer --outfile intlayer.js
+# Initialiser intlayer avec le fichier de configuration
+npx intlayer init --no-gitignore
+# Construire les dictionnaires
+npx intlayer build
+```
+```bash packageManager="pnpm"
+# Générer un bundle standalone d'intlayer et vanilla-intlayer
+# Ce fichier sera importé dans votre fichier HTML
+pnpm intlayer standalone --packages intlayer vanilla-intlayer --outfile intlayer.js
+# Initialiser intlayer avec le fichier de configuration
+pnpm intlayer init --no-gitignore
+# Construire les dictionnaires
+pnpm intlayer build
+```
+```bash packageManager="yarn"
+# Générer un bundle standalone d'intlayer et vanilla-intlayer
+# Ce fichier sera importé dans votre fichier HTML
+yarn intlayer standalone --packages intlayer vanilla-intlayer --outfile intlayer.js
+# Initialiser le fichier de configuration intlayer, TypeScript si configuré, variable d'env
+yarn intlayer init --no-gitignore
+# Construire les dictionnaires
+yarn intlayer build
+```
+```bash packageManager="bun"
+# Générer un bundle standalone d'intlayer et vanilla-intlayer
+# Ce fichier sera importé dans votre fichier HTML
+bun x intlayer standalone --packages intlayer vanilla-intlayer --outfile intlayer.js
+# Initialiser intlayer avec le fichier de configuration
+bun x intlayer init --no-gitignore
+# Construire les dictionnaires
+bun x intlayer build
+```
+- **intlayer**
+  Le paquet principal qui fournit les outils d'internationalisation pour la gestion de la configuration, la traduction, la [déclaration de contenu](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/dictionary/content_file.md), la transpilation et les [commandes CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/cli/index.md).
+- **vanilla-intlayer**
+  Le paquet qui intègre Intlayer avec les applications JavaScript / TypeScript pures. Il fournit un singleton pub/sub (`IntlayerClient`) et des helpers basés sur des callbacks (`useIntlayer`, `useLocale`, etc.) afin que n'importe quelle partie de votre application puisse réagir aux changements de langue sans dépendre d'un framework UI.
+> L'exportation de regroupement (bundling) du CLI `intlayer standalone` produit une version optimisée en éliminant le code mort (tree-shaking) des paquets inutilisés, des locales et de la logique non essentielle (telle que la redirection ou les préfixes) spécifique à votre configuration.
+### Étape 2 : Configuration de votre projet
+Créez un fichier de configuration pour configurer les langues de votre application :
+```typescript fileName="intlayer.config.ts" codeFormat="typescript"
+import { Locales, type IntlayerConfig } from "intlayer";
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [
+      Locales.ENGLISH,
+      Locales.FRENCH,
+      Locales.SPANISH,
+      // Vos autres langues
+    ],
+    defaultLocale: Locales.ENGLISH,
+  },
+};
+export default config;
+```
+```javascript fileName="intlayer.config.mjs" codeFormat="esm"
+import { Locales } from "intlayer";
+/** @type {import('intlayer').IntlayerConfig} */
+const config = {
+  internationalization: {
+    locales: [
+      Locales.ENGLISH,
+      Locales.FRENCH,
+      Locales.SPANISH,
+      // Vos autres langues
+    ],
+    defaultLocale: Locales.ENGLISH,
+  },
+};
+export default config;
+```
+```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
+const { Locales } = require("intlayer");
+/** @type {import('intlayer').IntlayerConfig} */
+const config = {
+  internationalization: {
+    locales: [
+      Locales.ENGLISH,
+      Locales.FRENCH,
+      Locales.SPANISH,
+      // Vos autres langues
+    ],
+    defaultLocale: Locales.ENGLISH,
+  },
+};
+module.exports = config;
+```
+> Via ce fichier de configuration, vous pouvez configurer des URLs localisées, la redirection middleware, les noms de cookies, l'emplacement et l'extension de vos déclarations de contenu, désactiver les logs Intlayer dans la console, et plus encore. Pour une liste complète des paramètres disponibles, reportez-vous à la [documentation de configuration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/configuration.md).
+### Étape 3 : Importer le bundle dans votre HTML
+Une fois que vous avez généré le bundle `intlayer.js`, vous pouvez l'importer dans votre fichier HTML :
+```html fileName="index.html"
+<!DOCTYPE html>
+<html lang="fr">
+  <head>
+    <meta charset="UTF-8" />
+    <!-- Importer le bundle -->
+    <script src="./intlayer.js" defer></script>
+    <!-- Importer votre script principal -->
+    <script src="./src/main.js" defer></script>
+  </head>
+  <body>
+    <h1 id="title"></h1>
+    <p class="read-the-docs"></p>
+  </body>
+</html>
+```
+Le bundle expose `Intlayer` et `VanillaIntlayer` comme objets globaux sur `window`.
+### Étape 4 : Bootstrapper Intlayer dans votre point d'entrée
+Dans votre `src/main.js`, appelez `installIntlayer()` **avant** que tout contenu ne soit rendu afin que le singleton global de locale soit prêt.
+```javascript fileName="src/main.js"
+const { installIntlayer } = window.VanillaIntlayer;
+// Doit être appelé avant de rendre tout contenu i18n.
+installIntlayer();
+```
+Si vous souhaitez également utiliser le moteur de rendu markdown, appelez `installIntlayerMarkdown()` :
+```javascript fileName="src/main.js"
+const { installIntlayer, installIntlayerMarkdown } = window.VanillaIntlayer;
+installIntlayer();
+installIntlayerMarkdown();
+```
+### Étape 5 : Déclarer votre contenu
+Créez et gérez vos déclarations de contenu pour stocker les traductions :
+```typescript fileName="src/app.content.ts" contentDeclarationFormat="typescript"
+import { insert, t, type Dictionary } from "intlayer";
+const appContent = {
+  key: "app",
+  content: {
+    title: "Vite + Vanilla",
+    viteLogoLabel: t({
+      en: "Vite Logo",
+      fr: "Logo Vite",
+      es: "Logo Vite",
+    }),
+    count: insert(
+      t({
+        en: "count is {{count}}",
+        fr: "le compte est {{count}}",
+        es: "el recuento es {{count}}",
+      })
+    ),
+    readTheDocs: t({
+      en: "Click on the Vite logo to learn more",
+      fr: "Cliquez sur le logo Vite pour en savoir plus",
+      es: "Haga clic en el logotipo de Vite para obtener más información",
+    }),
+  },
+} satisfies Dictionary;
+export default appContent;
+```
+```javascript fileName="src/app.content.mjs" contentDeclarationFormat="esm"
+import { insert, t } from "intlayer";
+/** @type {import('intlayer').Dictionary} */
+const appContent = {
+  key: "app",
+  content: {
+    title: "Vite + Vanilla",
+    viteLogoLabel: t({
+      en: "Vite Logo",
+      fr: "Logo Vite",
+      es: "Logo Vite",
+    }),
+    count: insert(
+      t({
+        en: "count is {{count}}",
+        fr: "le compte est {{count}}",
+        es: "el recuento es {{count}}",
+      })
+    ),
+    readTheDocs: t({
+      en: "Click on the Vite logo to learn more",
+      fr: "Cliquez sur le logo Vite pour en savoir plus",
+      es: "Haga clic en el logotipo de Vite para obtener más información",
+    }),
+  },
+};
+export default appContent;
+```
+```javascript fileName="src/app.content.cjs" contentDeclarationFormat="commonjs"
+const { insert, t } = require("intlayer");
+/** @type {import('intlayer').Dictionary} */
+const appContent = {
+  key: "app",
+  content: {
+    title: "Vite + Vanilla",
+    viteLogoLabel: t({
+      en: "Vite Logo",
+      fr: "Logo Vite",
+      es: "Logo Vite",
+    }),
+    count: insert(
+      t({
+        en: "count is {{count}}",
+        fr: "le compte est {{count}}",
+        es: "el recuento es {{count}}",
+      })
+    ),
+    readTheDocs: t({
+      en: "Click on the Vite logo to learn more",
+      fr: "Cliquez sur le logo Vite pour en savoir plus",
+      es: "Haga clic en le logotipo de Vite para obtener más información",
+    }),
+  },
+};
+module.exports = appContent;
+```
+```json fileName="src/app.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "app",
+  "content": {
+    "title": "Vite + Vanilla",
+    "viteLogoLabel": {
+      "nodeType": "translation",
+      "translation": {
+        "en": "Vite Logo",
+        "fr": "Logo Vite",
+        "es": "Logo Vite"
+      }
+    },
+    "count": {
+      "nodeType": "insertion",
+      "insertion": {
+        "nodeType": "translation",
+        "translation": {
+          "en": "count is {{count}}",
+          "fr": "le compte est {{count}}",
+          "es": "el recuento es {{count}}"
+        }
+      }
+    },
+    "readTheDocs": {
+      "nodeType": "translation",
+      "translation": {
+        "en": "Click on the Vite logo to learn more",
+        "fr": "Cliquez sur le logo Vite pour en savoir plus",
+        "es": "Haga clic en el logotipo de Vite para obtener más información"
+      }
+    }
+  }
+}
+```
+> Vos déclarations de contenu peuvent être définies n'importe où dans votre application dès qu'elles sont incluses dans le répertoire `contentDir` (par défaut, `./src`). Et correspondent à l'extension de fichier de déclaration de contenu (par défaut, `.content.{json,ts,tsx,js,jsx,mjs,cjs}`).
+>
+> Pour plus de détails, reportez-vous à la [documentation des déclarations de contenu](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/dictionary/content_file.md).
+### Étape 6 : Utiliser Intlayer dans votre JavaScript
+L'objet `window.VanillaIntlayer` fournit des helpers API : `useIntlayer(key, locale?)` retourne le contenu traduit pour une clé donnée.
+```javascript fileName="src/main.js"
+const { installIntlayer, useIntlayer } = window.VanillaIntlayer;
+installIntlayer();
+// Obtenir le contenu initial pour la locale actuelle.
+// Chaîner .onChange() pour être notifié chaque fois que la locale change.
+const content = useIntlayer("app").onChange((newContent) => {
+  // Re-render ou patcher seulement les nœuds DOM affectés
+  document.querySelector("h1").textContent = String(newContent.title);
+  document.querySelector(".read-the-docs").textContent = String(
+    newContent.readTheDocs
+  );
+});
+// Rendu initial
+document.querySelector("h1").textContent = String(content.title);
+document.querySelector(".read-the-docs").textContent = String(
+  content.readTheDocs
+);
+```
+> Accédez aux valeurs finales en tant que chaînes de caractères en les enveloppant dans `String()`, ce qui appelle la méthode `toString()` du nœud et retourne le texte traduit.
+>
+> Lorsque vous avez besoin de la valeur pour un attribut HTML natif (ex: `alt`, `aria-label`), utilisez directement `.value` :
+>
+> ```javascript
+> img.alt = content.viteLogoLabel.value;
+> ```
+### (Optionnel) Étape 7 : Changer la langue de votre contenu
+Pour changer la langue de votre contenu, utilisez la fonction `setLocale` exposée par `useLocale`.
+```javascript fileName="src/locale-switcher.js"
+const { getLocaleName } = window.Intlayer;
+const { useLocale } = window.VanillaIntlayer;
+export function setupLocaleSwitcher(container) {
+  const { locale, availableLocales, setLocale, subscribe } = useLocale();
+  const select = document.createElement("select");
+  select.setAttribute("aria-label", "Langue");
+  const render = (currentLocale) => {
+    select.innerHTML = availableLocales
+      .map(
+        (loc) =>
+          `<option value="${loc}"${loc === currentLocale ? " selected" : ""}>
+            ${getLocaleName(loc)}
+          </option>`
+      )
+      .join("");
+  };
+  render(locale);
+  container.appendChild(select);
+  select.addEventListener("change", () => setLocale(select.value));
+  // Garder le menu déroulant synchronisé quand la locale change d'ailleurs
+  return subscribe((newLocale) => render(newLocale));
+}
+```
+### (Optionnel) Étape 8 : Basculer les attributs de langue et de direction HTML
+Mettez à jour les attributs `lang` et `dir` de la balise `<html>` pour qu'ils correspondent à la locale actuelle pour l'accessibilité et le SEO.
+```javascript fileName="src/main.js"
+const { getHTMLTextDir } = window.Intlayer;
+const { installIntlayer, useLocale } = window.VanillaIntlayer;
+installIntlayer();
+useLocale({
+  onLocaleChange: (locale) => {
+    document.documentElement.lang = locale;
+    document.documentElement.dir = getHTMLTextDir(locale);
+  },
+});
+```
+### (Optionnel) Étape 9 : Charger les dictionnaires à la demande par locale
+Si vous souhaitez charger les dictionnaires à la demande par locale, vous pouvez utiliser `useDictionaryDynamic`. C'est utile si vous ne voulez pas inclure toutes les traductions dans le fichier `intlayer.js` initial.
+```javascript fileName="src/app.js"
+const { installIntlayer, useDictionaryDynamic } = window.VanillaIntlayer;
+installIntlayer();
+const unsubscribe = useDictionaryDynamic(
+  {
+    en: () => import("../.intlayer/dictionaries/en/app.mjs"),
+    fr: () => import("../.intlayer/dictionaries/fr/app.mjs"),
+    es: () => import("../.intlayer/dictionaries/es/app.mjs"),
+  },
+  "app"
+).onChange((content) => {
+  document.querySelector("h1").textContent = String(content.title);
+});
+```
+> Note : `useDictionaryDynamic` nécessite que les dictionnaires soient disponibles en tant que fichiers ESM séparés. Cette approche est typiquement utilisée si vous avez un serveur web servant les dictionnaires.
+### Configurer TypeScript
+Assurez-vous que votre configuration TypeScript inclut les types autogénérés.
+```json5 fileName="tsconfig.json"
+{
+  "compilerOptions": {
+    // ...
+  },
+  "include": ["src", ".intlayer/**/*.ts"],
+}
+```
+### Extension VS Code
+Pour améliorer votre expérience de développement avec Intlayer, vous pouvez installer l'**extension officielle Intlayer VS Code**.
+[Installer depuis le VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
+Cette extension fournit :
+- **Autocomplétion** pour les clés de traduction.
+- **Détection des erreurs en temps réel** pour les traductions manquantes.
+- **Aperçus en ligne** du contenu traduit.
+- **Actions rapides** pour créer et mettre à jour facilement les traductions.
+Pour plus de détails sur l'utilisation de l'extension, reportez-vous à la [documentation de l'extension Intlayer VS Code](https://intlayer.org/doc/vs-code-extension).
+---
+### Aller plus loin
+Pour aller plus loin, vous pouvez implémenter l'[éditeur visuel](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_visual_editor.md) ou externaliser votre contenu en utilisant le [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_CMS.md).