@intlayer/docs 9.0.0-canary.4 → 9.0.0-canary.5

package/docs/fr/dictionary/enumeration.md

@@ -468,193 +468,6 @@ document.getElementById("ranking")!.textContent = content.ordinal(lastDigit)({
   </Tab>
 </Tabs>
 
-## Combining Enumeration with Insert for Ordinal Numbers
-
-<Tabs group="framework">
-  <Tab label="React" value="react">
-
-To use enumeration in a React component, you can leverage the `useIntlayer` hook from the `react-intlayer` package. This hook retrieves the correct content based on the specified ID. Here's an example of how to use it:
-
-```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-import type { FC } from "react";
-import { useIntlayer } from "react-intlayer";
-
-const CarComponent: FC = () => {
-  const { numberOfCar } = useIntlayer("car_count");
-
-  return (
-    <div>
-      <p>
-        {
-          numberOfCar(0) // Output: No cars
-        }
-      </p>
-      <p>
-        {
-          numberOfCar(6) // Output: Some cars
-        }
-      </p>
-      <p>
-        {
-          numberOfCar(20) // Output: Many cars
-        }
-      </p>
-      <p>
-        {
-          numberOfCar(0.01) // Output: Fallback value
-        }
-      </p>
-    </div>
-  );
-};
-```
-
-  </Tab>
-  <Tab label="Next.js" value="nextjs">
-
-To use enumeration in Next.js Client Components, retrieve it via the `useIntlayer` hook. Here's an example:
-
-```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-"use client";
-
-import type { FC } from "react";
-import { useIntlayer } from "next-intlayer";
-
-const CarComponent: FC = () => {
-  const { numberOfCar } = useIntlayer("car_count");
-
-  return (
-    <div>
-      <p>{numberOfCar(6)}</p>
-    </div>
-  );
-};
-
-export default CarComponent;
-```
-
-  </Tab>
-  <Tab label="Vue" value="vue">
-
-To use enumeration in Vue components, retrieve it via the `useIntlayer` hook. Here's an example:
-
-```vue fileName="**/*.vue"
-<script setup lang="ts">
-import { useIntlayer } from "vue-intlayer";
-
-const { numberOfCar } = useIntlayer("car_count");
-</script>
-
-<template>
-  <div>
-    <p>{{ numberOfCar(6) }}</p>
-  </div>
-</template>
-```
-
-  </Tab>
-  <Tab label="Svelte" value="svelte">
-
-To use enumeration in Svelte components, retrieve it via the `useIntlayer` hook. The store is accessed with `$`. Here's an example:
-
-```svelte fileName="**/*.svelte"
-<script lang="ts">
-import { useIntlayer } from "svelte-intlayer";
-
-const content = useIntlayer("car_count");
-</script>
-
-<div>
-  <p>{$content.numberOfCar(6)}</p>
-</div>
-```
-
-  </Tab>
-  <Tab label="Preact" value="preact">
-
-To use enumeration in Preact components, retrieve it via the `useIntlayer` hook. Here's an example:
-
-```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-import type { FC } from "preact";
-import { useIntlayer } from "preact-intlayer";
-
-const CarComponent: FC = () => {
-  const { numberOfCar } = useIntlayer("car_count");
-
-  return (
-    <div>
-      <p>{numberOfCar(6)}</p>
-    </div>
-  );
-};
-
-export default CarComponent;
-```
-
-  </Tab>
-  <Tab label="Solid" value="solid">
-
-To use enumeration in SolidJS components, retrieve it via the `useIntlayer` hook. Here's an example:
-
-```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-import type { Component } from "solid-js";
-import { useIntlayer } from "solid-intlayer";
-
-const CarComponent: Component = () => {
-  const { numberOfCar } = useIntlayer("car_count");
-
-  return (
-    <div>
-      <p>{numberOfCar(6)}</p>
-    </div>
-  );
-};
-
-export default CarComponent;
-```
-
-  </Tab>
-  <Tab label="Angular" value="angular">
-
-To use enumeration in Angular components, retrieve it via the `useIntlayer` hook. Here's an example:
-
-```typescript fileName="app.component.ts" codeFormat="typescript"
-import { Component } from "@angular/core";
-import { useIntlayer } from "angular-intlayer";
-
-@Component({
-  selector: "app-car",
-  template: `
-    <div>
-      <p>{{ content().numberOfCar(6) }}</p>
-    </div>
-  `,
-})
-export class CarComponent {
-  content = useIntlayer("car_count");
-}
-```
-
-  </Tab>
-  <Tab label="Vanilla JS" value="vanilla">
-
-To use enumeration with `vanilla-intlayer`, retrieve it via the `useIntlayer` hook. Here's an example:
-
-```typescript fileName="**/*.ts" codeFormat={["typescript", "esm"]}
-import { installIntlayer, useIntlayer } from "vanilla-intlayer";
-
-installIntlayer();
-
-const content = useIntlayer("car_count").onChange((newContent) => {
-  document.getElementById("cars")!.textContent = newContent.numberOfCar(6);
-});
-
-// Initial render
-document.getElementById("cars")!.textContent = content.numberOfCar(6);
-```
-
-  </Tab>
-</Tabs>
 ## Additional Resources
 
 For more detailed information on configuration and usage, refer to the following resources:

package/docs/fr/dictionary/file.md

@@ -255,6 +255,14 @@ export default myMultilingualContent;
 
 Cette configuration permet de récupérer dynamiquement le contenu en fonction de la préférence linguistique de l'utilisateur. Lorsqu'elle est utilisée dans l'éditeur visuel Intlayer ou le CMS, le système reconnaît que le contenu provient des fichiers Markdown spécifiés et garantit qu'ils restent modifiables.
 
+## Différents types de chemins
+
+Lorsque vous utilisez la fonction `file`, vous pouvez utiliser différents types de chemins pour spécifier le fichier à incorporer.
+
+- `file("./path/to/file.txt")` - Chemin relatif au fichier actuel
+- `file("path/to/file.txt")` - Chemin relatif au répertoire racine du projet
+- `file("/users/username/path/to/file.txt")` - Chemin absolu
+
 ## Comment Intlayer gère le contenu des fichiers
 
 La fonction `file` est basée sur le module `fs` de Node.js pour lire le contenu du fichier spécifié et l'insérer dans le dictionnaire. Lorsqu'elle est utilisée en conjonction avec l'éditeur visuel Intlayer ou le CMS, Intlayer peut suivre la relation entre le dictionnaire et le fichier. Cela permet à Intlayer de :

package/docs/fr/dictionary/nesting.md

@@ -27,6 +27,45 @@ Dans Intlayer, l'imbrication est réalisée via la fonction `nest`, qui vous per
 
 ## Configuration de l'imbrication
 
+Pour configurer l'imbrication dans votre projet Intlayer, vous définissez d'abord le contenu de base que vous souhaitez réutiliser. Ensuite, dans un module de contenu séparé, vous utilisez la fonction `nest` pour importer ce contenu.
+
+### Dictionnaire de base
+
+Voici un exemple d'un dictionnaire de base à imbriquer dans un autre dictionnaire :
+
+```typescript fileName="firstDictionary.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+import { type Dictionary } from "intlayer";
+
+const firstDictionary = {
+  key: "key_of_my_first_dictionary",
+  content: {
+    content: "content",
+    subContent: {
+      contentNumber: 0,
+      contentString: "string",
+    },
+  },
+} satisfies Dictionary;
+
+export default firstDictionary;
+```
+
+```json fileName="firstDictionary.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "key_of_my_first_dictionary",
+  "content": {
+    "content": "content",
+    "subContent": {
+      "contentNumber": 0,
+      "contentString": "string"
+    }
+  }
+}
+```
+
+## Configuration de l'imbrication
+
 <Tabs group="framework">
   <Tab label="React" value="react">
 

package/docs/fr/dictionary/translation.md

@@ -259,64 +259,3 @@ document.getElementById("welcome-message")!.textContent = String(
 
   </Tab>
 </Tabs>
-
-## Objets de Contenu Personnalisés
-
-`intlayer` prend en charge les objets de contenu personnalisés pour la traduction, vous permettant de définir des structures plus complexes tout en garantissant la sécurité des types. Voici un exemple avec un objet personnalisé :
-
-```typescript fileName="**/*.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
-import { t, type Dictionary } from "intlayer";
-
-interface ICustomContent {
-  title: string;
-  content: string;
-}
-
-const customContent = {
-  key: "custom_content",
-  content: {
-    profileText: t<ICustomContent>({
-      en: {
-        title: "Page Title",
-        content: "Page Content",
-      },
-      fr: {
-        title: "Titre de la Page",
-        content: "Contenu de la Page",
-      },
-      es: {
-        title: "Titre de la Page",
-        content: "Contenu de la Page",
-      },
-    }),
-  },
-} satisfies Dictionary;
-
-export default customContent;
-```
-
-```json fileName="**/*.content.json" contentDeclarationFormat="json"
-{
-  "$schema": "https://intlayer.org/schema.json",
-  "key": "custom_content",
-  "content": {
-    "profileText": {
-      "nodeType": "translation",
-      "translation": {
-        "en": {
-          "title": "Page Title",
-          "content": "Contenu de la Page"
-        },
-        "fr": {
-          "title": "Titre de la Page",
-          "content": "Contenu de la Page"
-        },
-        "es": {
-          "title": "Título de la Página",
-          "content": "Contenido de la Página"
-        }
-      }
-    }
-  }
-}
-```

package/docs/fr/formatters.md

@@ -261,77 +261,6 @@ getHTMLTextDir("he"); // "rtl"
 - **locale** : La locale pour laquelle obtenir la direction du texte (par défaut la locale courante)
 - **returns** : `"ltr"`, `"rtl"`, ou `"auto"`
 
-## Utilitaires de gestion de contenu
-
-### `getContent(node, nodeProps, locale?)`
-
-Transforme un nœud de contenu avec tous les plugins disponibles (traduction, énumération, insertion, etc.) :
-
-```ts
-import { getContent } from "intlayer";
-
-const content = getContent(
-  contentNode,
-  { dictionaryKey: "common", dictionaryPath: "/path/to/dict" },
-  "fr"
-);
-```
-
-- **node** : Le nœud de contenu à transformer
-- **nodeProps** : Propriétés pour le contexte de transformation
-- **locale** : Locale optionnelle (par défaut la locale par défaut configurée)
-
-### `getTranslation(languageContent, locale?, fallback?)`
-
-Extrait le contenu pour une locale spécifique à partir d'un objet de contenu multilingue :
-
-```ts
-import { getTranslation } from "intlayer";
-
-const content = getTranslation(
-  {
-    en: "Hello",
-    fr: "Bonjour",
-    de: "Hallo",
-  },
-  "fr",
-  true
-); // "Bonjour"
-```
-
-- **languageContent** : Objet associant les locales au contenu
-- **locale** : Locale cible (par défaut la locale par défaut configurée)
-- **fallback** : Indique s'il faut revenir à la locale par défaut (par défaut à true)
-
-### `getIntlayer(dictionaryKey, locale?, plugins?)`
-
-Récupère et transforme le contenu d'un dictionnaire par clé :
-
-```ts
-import { getIntlayer } from "intlayer";
-
-const content = getIntlayer("common", "fr");
-const nestedContent = getIntlayer("common", "fr", customPlugins);
-```
-
-- **dictionaryKey** : La clé du dictionnaire à récupérer
-- **locale** : Locale optionnelle (par défaut la locale configurée par défaut)
-- **plugins** : Tableau optionnel de plugins de transformation personnalisés
-
-### `getIntlayerAsync(dictionaryKey, locale?, plugins?)`
-
-Récupère de manière asynchrone le contenu d'un dictionnaire distant :
-
-```ts
-import { getIntlayerAsync } from "intlayer";
-
-const content = await getIntlayerAsync("common", "fr");
-```
-
-- **dictionaryKey** : La clé du dictionnaire à récupérer
-- **locale** : Locale optionnelle (par défaut la locale configurée par défaut)
-- **plugins** : Tableau optionnel de plugins de transformation personnalisés
-
 ## Formatteurs
 
 Tous les helpers ci-dessous sont exportés depuis `intlayer`.
@@ -447,6 +376,177 @@ units(5, { unit: "kilometer", unitDisplay: "long", locale: "en-GB" }); // "5 kil
 units(1024, { unit: "byte", unitDisplay: "narrow" }); // "1,024B" (dépendant de la locale)
 ```
 
+#### `compact(value, options?)`
+
+Formate un nombre en utilisant la notation compacte.
+
+- **value**: `number | string`
+- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
+
+```ts
+compact(1200); // "1.2K"
+compact("1000000", { locale: "fr", compactDisplay: "long" }); // "1 million"
+```
+
+#### `list(values, options?)`
+
+Formate un tableau en une chaîne de liste localisée.
+
+- **values**: `(string | number)[]`
+- **options**: `Intl.ListFormatOptions & { locale?: LocalesValues }`
+  - Courant : `type` (`"conjunction" | "disjunction" | "unit"`), `style` (`"long" | "short" | "narrow"`)
+
+```ts
+list(["apple", "banana", "orange"]); // "apple, banana, and orange"
+list(["red", "green", "blue"], { locale: "fr", type: "disjunction" }); // "rouge, vert ou bleu"
+```
+
+## Intl en cache
+
+L'`Intl` exporté depuis `intlayer` est un wrapper en cache autour de l'`Intl` global. Il mémoïse les instances de formateurs (`NumberFormat`, `DateTimeFormat`, etc.) pour éviter de les construire à plusieurs reprises, améliorant ainsi les performances.
+
+```ts
+import { Intl } from "intlayer";
+
+// Formatage des nombres
+const numberFormat = new Intl.NumberFormat("en-GB", {
+  style: "currency",
+  currency: "GBP",
+});
+numberFormat.format(1234.5); // "£1,234.50"
+
+// Noms d'affichage pour les langues, régions, etc.
+const displayNames = new Intl.DisplayNames("fr", { type: "language" });
+displayNames.of("en"); // "anglais"
+
+// Collation pour le tri
+const collator = new Intl.Collator("fr", { sensitivity: "base" });
+collator.compare("é", "e"); // 0 (égal)
+
+// Règles de pluriel
+const pluralRules = new Intl.PluralRules("fr");
+pluralRules.select(1); // "one"
+pluralRules.select(2); // "other"
+```
+
+### Fonctionnalités Intl Supplémentaires
+
+#### `Intl.DisplayNames`
+
+Pour les noms localisés des langues, régions, devises et écritures :
+
+```ts
+import { Intl } from "intlayer";
+
+const languageNames = new Intl.DisplayNames("en", { type: "language" });
+languageNames.of("fr"); // "French"
+
+const regionNames = new Intl.DisplayNames("fr", { type: "region" });
+regionNames.of("US"); // "États-Unis"
+```
+
+#### `Intl.Collator`
+
+Pour la comparaison et le tri de chaînes sensibles à la locale :
+
+```ts
+import { Intl } from "intlayer";
+
+const collator = new Intl.Collator("de", {
+  sensitivity: "base",
+  numeric: true,
+});
+
+const words = ["äpfel", "zebra", "100", "20"];
+words.sort(collator.compare); // ["20", "100", "äpfel", "zebra"]
+```
+
+#### `Intl.PluralRules`
+
+Pour déterminer les formes plurielles dans différentes locales :
+
+```ts
+import { Intl } from "intlayer";
+
+const pluralRules = new Intl.PluralRules("ar");
+pluralRules.select(0); // "zero"
+pluralRules.select(1); // "one"
+pluralRules.select(2); // "two"
+pluralRules.select(3); // "few"
+pluralRules.select(11); // "many"
+```
+
+## Utilitaires de Locale
+
+### `getLocaleName(displayLocale, targetLocale?)`
+
+Obtient le nom localisé d'une locale :
+
+```ts
+import { getLocaleName } from "intlayer";
+
+getLocaleName("fr", "en"); // "French"
+getLocaleName("en", "fr"); // "anglais"
+getLocaleName("de", "es"); // "alemán"
+```
+
+### `getLocaleLang(locale?)`
+
+Extrait le code de langue d'une chaîne de locale :
+
+```ts
+import { getLocaleLang } from "intlayer";
+
+getLocaleLang("en-US"); // "en"
+getLocaleLang("fr-CA"); // "fr"
+```
+
+### `getLocaleFromPath(inputUrl)`
+
+Extrait le segment de locale d'une URL ou d'un chemin :
+
+```ts
+import { getLocaleFromPath } from "intlayer";
+
+getLocaleFromPath("/en/dashboard"); // "en"
+getLocaleFromPath("/fr/dashboard"); // "fr"
+getLocaleFromPath("/dashboard"); // "en" (locale par défaut)
+```
+
+### `getPathWithoutLocale(inputUrl, locales?)`
+
+Supprime le segment de locale d'une URL :
+
+```ts
+import { getPathWithoutLocale } from "intlayer";
+
+getPathWithoutLocale("/en/dashboard"); // "/dashboard"
+getPathWithoutLocale("/fr/dashboard"); // "/dashboard"
+```
+
+### `getLocalizedUrl(url, currentLocale, locales?, defaultLocale?, prefixDefault?)`
+
+Génère une URL localisée :
+
+```ts
+import { getLocalizedUrl } from "intlayer";
+
+getLocalizedUrl("/about", "fr", ["en", "fr"], "en", false); // "/fr/about"
+getLocalizedUrl("/about", "en", ["en", "fr"], "en", false); // "/about"
+```
+
+### `getHTMLTextDir(locale?)`
+
+Retourne la direction du texte pour une locale :
+
+```ts
+import { getHTMLTextDir } from "intlayer";
+
+getHTMLTextDir("en-US"); // "ltr"
+getHTMLTextDir("ar"); // "rtl"
+getHTMLTextDir("he"); // "rtl"
+```
+
 ### `compact(value, options?)`
 
 Formate un nombre en utilisant la notation compacte (par exemple, `1.2K`, `1M`).
@@ -482,12 +582,6 @@ list(["red", "green", "blue"], { locale: "fr", type: "disjunction" }); // "rouge
 list([1, 2, 3], { type: "unit" }); // "1, 2, 3"
 ```
 
-## Notes
-
-- Tous les helpers acceptent des entrées de type `string` ; elles sont converties en interne en nombres ou en dates.
-- La locale par défaut est celle configurée dans `internationalization.defaultLocale` si elle n'est pas fournie.
-- Ces utilitaires sont des wrappers légers ; pour un formatage avancé, utilisez directement les options standard de `Intl`.
-
 ## Points d'entrée et réexportations (`@index.ts`)
 
 Les formateurs résident dans le package core et sont réexportés depuis des packages de niveau supérieur pour garder des imports ergonomiques à travers les environnements d'exécution :

package/docs/fr/how_works_intlayer.md

@@ -22,6 +22,10 @@ author: aymericzip
 
 # Comment Intlayer fonctionne
 
+## Table des matières
+
+<TOC/>
+
 ## Vue d'ensemble
 
 L'idée principale derrière Intlayer est d'adopter une gestion de contenu par composant. Ainsi, l'idée derrière Intlayer est de vous permettre de déclarer votre contenu n'importe où dans votre base de code, comme dans le même répertoire que votre composant.

package/docs/fr/intlayer_CMS.md

@@ -40,6 +40,12 @@ Pour cela, Intlayer introduit le concept de « dictionnaires distants ».
 
 ![Interface du CMS Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/assets/CMS.png)
 
+## Table of Contents
+
+<TOC/>
+
+---
+
 ## Comprendre les dictionnaires distants
 
 Intlayer fait une distinction entre les dictionnaires « locaux » et « distants ».