@intlayer/docs 9.4.0-canary.0 → 9.4.1

package/docs/fr/dictionary/condition.md

@@ -23,209 +23,8 @@ author: aymericzip
 
 ## Comment Fonctionne la Condition
 
-<Tabs group="framework">
-  <Tab label="React" value="react">
-
-To utilize conditional content within a React component, import and use the `useIntlayer` hook from the `react-intlayer` package. This hook fetches the content for the specified key and allows you to pass in a condition to select the appropriate output.
-
-```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-import type { FC } from "react";
-import { useIntlayer } from "react-intlayer";
-
-const ConditionalComponent: FC = () => {
-  const { myCondition } = useIntlayer("my_key");
-
-  return (
-    <div>
-      <p>
-        {
-          /* Output: my content when it's true */
-          myCondition(true)
-        }
-      </p>
-      <p>
-        {
-          /* Output: my content when it's false */
-          myCondition(false)
-        }
-      </p>
-      <p>
-        {
-          /* Output: my content when the condition fails */
-          myCondition("")
-        }
-      </p>
-      <p>
-        {
-          /* Output: my content when the condition fails */
-          myCondition(undefined)
-        }
-      </p>
-    </div>
-  );
-};
-
-export default ConditionalComponent;
-```
-
-  </Tab>
-  <Tab label="Next.js" value="nextjs">
-
 To utilize conditional content 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 ConditionalComponent: FC = () => {
-  const { myCondition } = useIntlayer("my_key");
-
-  return (
-    <div>
-      <p>{myCondition(true)}</p>
-      <p>{myCondition(false)}</p>
-    </div>
-  );
-};
-
-export default ConditionalComponent;
-```
-
-  </Tab>
-  <Tab label="Vue" value="vue">
-
-To utilize conditional content 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 { myCondition } = useIntlayer("my_key");
-</script>
-
-<template>
-  <div>
-    <p>{{ myCondition(true) }}</p>
-    <p>{{ myCondition(false) }}</p>
-  </div>
-</template>
-```
-
-  </Tab>
-  <Tab label="Svelte" value="svelte">
-
-To utilize conditional content 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("my_key");
-</script>
-
-<div>
-  <p>{$content.myCondition(true)}</p>
-  <p>{$content.myCondition(false)}</p>
-</div>
-```
-
-  </Tab>
-  <Tab label="Preact" value="preact">
-
-To utilize conditional content 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 ConditionalComponent: FC = () => {
-  const { myCondition } = useIntlayer("my_key");
-
-  return (
-    <div>
-      <p>{myCondition(true)}</p>
-      <p>{myCondition(false)}</p>
-    </div>
-  );
-};
-
-export default ConditionalComponent;
-```
-
-  </Tab>
-  <Tab label="Solid" value="solid">
-
-To utilize conditional content 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 ConditionalComponent: Component = () => {
-  const { myCondition } = useIntlayer("my_key");
-
-  return (
-    <div>
-      <p>{myCondition(true)}</p>
-      <p>{myCondition(false)}</p>
-    </div>
-  );
-};
-
-export default ConditionalComponent;
-```
-
-  </Tab>
-  <Tab label="Angular" value="angular">
-
-To utilize conditional content 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-conditional",
-  template: `
-    <div>
-      <p>{{ content().myCondition(true) }}</p>
-      <p>{{ content().myCondition(false) }}</p>
-    </div>
-  `,
-})
-export class ConditionalComponent {
-  content = useIntlayer("my_key");
-}
-```
-
-  </Tab>
-  <Tab label="Vanilla JS" value="vanilla">
-
-To utilize conditional content 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("my_key").onChange((newContent) => {
-  document.getElementById("true-content")!.textContent =
-    newContent.myCondition(true);
-  document.getElementById("false-content")!.textContent =
-    newContent.myCondition(false);
-});
-
-// Initial render
-document.getElementById("true-content")!.textContent =
-  content.myCondition(true);
-document.getElementById("false-content")!.textContent =
-  content.myCondition(false);
-```
-
-  </Tab>
-</Tabs>
 ## Configuration du Contenu Conditionnel
 
 Pour configurer le contenu conditionnel dans votre projet Intlayer, créez un module de contenu qui inclut vos définitions conditionnelles. Voici des exemples dans différents formats.

package/docs/fr/dictionary/html.md

@@ -245,7 +245,7 @@ Vous pouvez configurer le rendu HTML globalement pour l'ensemble de votre applic
 
 <Tabs group="framework">
   <Tab label="React / Next.js" value="react">
-  
+
     ```tsx fileName="AppProvider.tsx"
     import { HTMLProvider } from "react-intlayer/html";
 
@@ -282,7 +282,7 @@ Vous pouvez configurer le rendu HTML globalement pour l'ensemble de votre applic
 
   </Tab>
   <Tab label="Vue" value="vue">
-  
+
     ```typescript fileName="main.ts"
     import { createApp, h } from "vue";
     import { intlayer } from "vue-intlayer";
@@ -327,7 +327,7 @@ Vous pouvez configurer le rendu HTML globalement pour l'ensemble de votre applic
 
   </Tab>
   <Tab label="Svelte" value="svelte">
-   
+
     ```svelte fileName="App.svelte"
     <script lang="ts">
       import { HTMLProvider } from "svelte-intlayer/html";
@@ -364,7 +364,7 @@ Vous pouvez configurer le rendu HTML globalement pour l'ensemble de votre applic
 
   </Tab>
   <Tab label="Preact" value="preact">
-   
+
     ```tsx fileName="AppProvider.tsx"
     import { HTMLProvider } from "preact-intlayer/html";
 
@@ -400,7 +400,7 @@ Vous pouvez configurer le rendu HTML globalement pour l'ensemble de votre applic
 
   </Tab>
   <Tab label="Solid" value="solid">
-   
+
     ```tsx fileName="AppProvider.tsx"
     import { HTMLProvider } from "solid-intlayer/html";
 
@@ -460,9 +460,9 @@ Vous pouvez configurer le rendu HTML globalement pour l'ensemble de votre applic
     export const appConfig: ApplicationConfig = {
       providers: [
         createIntlayerHTMLProvider({
-          renderMarkdown: async (html) => {
-            const { renderMarkdown } = await import('angular-intlayer/html');
-            return renderMarkdown(html);
+          renderHTML: async (html) => {
+            const { renderHTML } = await import('angular-intlayer/html');
+            return renderHTML(html);
           },
         }),
       ],
@@ -519,9 +519,9 @@ Si vous avez besoin de rendre des chaînes HTML brutes ou si vous voulez plus de
 
   </Tab>
   <Tab label="Vue" value="vue">
-   
+
     #### Composant `<HTMLRenderer />`
-   
+
     ```vue
     <script setup>
     import { HTMLRenderer } from "vue-intlayer/html";
@@ -534,9 +534,9 @@ Si vous avez besoin de rendre des chaînes HTML brutes ou si vous voulez plus de
 
   </Tab>
   <Tab label="Svelte" value="svelte">
-  
+
     #### Composant `<HTMLRenderer />`
-   
+
     ```svelte
     <script lang="ts">
     import { HTMLRenderer } from "svelte-intlayer/html";
@@ -568,9 +568,9 @@ Si vous avez besoin de rendre des chaînes HTML brutes ou si vous voulez plus de
 
   </Tab>
   <Tab label="Preact" value="preact">
-   
+
     #### Composant `<HTMLRenderer />`
-   
+
     ```tsx
     import { HTMLRenderer } from "preact-intlayer/html";
 
@@ -599,9 +599,9 @@ Si vous avez besoin de rendre des chaînes HTML brutes ou si vous voulez plus de
 
   </Tab>
   <Tab label="Solid" value="solid">
-   
+
     #### Composant `<HTMLRenderer />`
-   
+
     ```tsx
     import { HTMLRenderer } from "solid-intlayer/html";
 
@@ -640,7 +640,7 @@ Si vous avez besoin de rendre des chaînes HTML brutes ou si vous voulez plus de
       constructor(private markdownService: IntlayerHTMLService) {}
 
       renderHTML(html: string) {
-        return this.markdownService.renderMarkdown(html);
+        return this.markdownService.renderHTML(html);
       }
     }
     ```

package/docs/fr/dictionary/markdown.md

@@ -492,7 +492,7 @@ Ces utilitaires rendent **des chaînes Markdown brutes** et sont indépendants d
 
 <Tabs group="framework">
   <Tab label="React" value="react">
-  
+
     #### Composant `<MarkdownRenderer />`
 
     Rend une chaîne Markdown avec des options spécifiques.
@@ -531,7 +531,7 @@ Ces utilitaires rendent **des chaînes Markdown brutes** et sont indépendants d
 
   </Tab>
   <Tab label="Next.js" value="nextjs">
-  
+
     #### Composant `<MarkdownRenderer />`
 
     Rend une chaîne Markdown avec des options spécifiques.
@@ -957,6 +957,10 @@ Le `MarkdownProvider` (ou son équivalent dans un framework) configure le pipeli
   </Tab>
   <Tab label="Angular" value="angular">
 
+> MDX est supporté — tout nom de composant utilisé dans votre Markdown (par exemple `<MyCustomJSXComponent />`) est résolu par rapport au mapping `components`.
+
+Vous pouvez également utiliser votre propre moteur de rendu Markdown :
+
     ```typescript fileName="app.module.ts"
     import { NgModule } from '@angular/core';
     import { IntlayerMarkdownModule } from 'angular-intlayer/markdown';
@@ -1047,7 +1051,7 @@ const MyComponent = () => {
 ```
 
   </Tab>
- 
+
   <Tab label="Vue" value="vue">
 
 Vue possède un composant `<Suspense>` intégré. Enveloppez le composant rendant le contenu Markdown dans une limite `<Suspense>`.

package/docs/fr/dictionary/plurial.md

@@ -35,10 +35,74 @@ Contrairement à [`enu`](https://github.com/aymericzip/intlayer/blob/main/docs/d
 
 ## Quand utiliser `plural` vs `enu`
 
+To use plural content inside a React component, retrieve it via the `useIntlayer` hook and call it with a count. The active locale and the count are combined to pick the matching CLDR category.
+
+To use plural content in Next.js Client Components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
+
+## Configuration du contenu au pluriel
+
+Pour configurer du contenu au pluriel dans votre projet Intlayer, créez un module de contenu qui utilise l'assistant `plural`. La catégorie `other` est obligatoire et sert de repli lorsqu'une locale ne définit pas de catégorie plus spécifique.
+
+```typescript fileName="**/*.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+import { plural, t, type Dictionary } from "intlayer";
+
+const openingsContent = {
+  key: "total_openings",
+  content: {
+    totalOpenings: t({
+      en: plural({
+        one: "{{count}} opening",
+        other: "{{count}} openings",
+      }),
+      fr: plural({
+        one: "{{count}} poste ouvert",
+        other: "{{count}} postes ouverts",
+      }),
+    }),
+  },
+} satisfies Dictionary;
+
+export default openingsContent;
+```
+
+```json fileName="**/*.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "total_openings",
+  "content": {
+    "totalOpenings": {
+      "nodeType": "translation",
+      "translation": {
+        "en": {
+          "nodeType": "plural",
+          "plural": {
+            "one": "{{count}} opening",
+            "other": "{{count}} openings"
+          }
+        },
+        "fr": {
+          "nodeType": "plural",
+          "plural": {
+            "one": "{{count}} poste ouvert",
+            "other": "{{count}} postes ouverts"
+          }
+        }
+      }
+    }
+  }
+}
+```
+
+> Les catégories prises en charge sont `zero`, `one`, `two`, `few`, `many`, `other`. Vous n'avez qu'à déclarer les catégories utilisées par votre langue cible, Intlayer revient à `other` lorsqu'aucune catégorie spécifique ne correspond.
+>
+> L'espace réservé `{{count}}` est automatiquement remplacé par le nombre que vous passez au moment de l'exécution. Vous pouvez également inclure d'autres espaces réservés (voir [Espaces réservés personnalisés](#custom-placeholders) ci-dessous).
+
+## Utilisation du contenu au pluriel avec React Intlayer
+
 <Tabs group="framework">
   <Tab label="React" value="react">
 
-To use plural content inside a React component, retrieve it via the `useIntlayer` hook and call it with a count. The active locale and the count are combined to pick the matching CLDR category.
+Pour utiliser du contenu au pluriel dans un composant React, récupérez-le via le hook `useIntlayer` et appelez-le avec un nombre. La locale active et le nombre sont combinés pour choisir la catégorie CLDR correspondante.
 
 ```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
 import type { FC } from "react";
@@ -49,6 +113,11 @@ const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
 
   return (
     <div>
+      {/* En anglais :                                  */}
+      {/*  count=0  → "0 openings"   (other)           */}
+      {/*  count=1  → "1 opening"    (one)             */}
+      {/*  count=2  → "2 openings"   (other)           */}
+      {/*  count=21 → "21 openings"  (other)           */}
       <p>{totalOpenings(count)}</p>
     </div>
   );
@@ -60,7 +129,7 @@ export default OpeningsComponent;
   </Tab>
   <Tab label="Next.js" value="nextjs">
 
-To use plural content in Next.js Client Components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
+Pour utiliser du contenu pluriel dans les Client Components Next.js, récupérez-le via le hook `useIntlayer` et appelez-le avec un compte. Voici un exemple :
 
 ```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
 "use client";
@@ -84,7 +153,7 @@ export default OpeningsComponent;
   </Tab>
   <Tab label="Vue" value="vue">
 
-To use plural content in Vue components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
+Pour utiliser du contenu pluralisé dans les composants Vue, récupérez-le via le hook `useIntlayer` et appelez-le avec un décompte. Voici un exemple :
 
 ```vue fileName="**/*.vue"
 <script setup lang="ts">
@@ -105,7 +174,7 @@ const { totalOpenings } = useIntlayer("total_openings");
   </Tab>
   <Tab label="Svelte" value="svelte">
 
-To use plural content in Svelte components, retrieve it via the `useIntlayer` hook and call it with a count. The store is accessed with `$`. Here's an example:
+Pour utiliser du contenu pluriel dans les composants Svelte, récupérez-le via le hook `useIntlayer` et appelez-le avec un count. Le store est accessible avec `$`. Voici un exemple :
 
 ```svelte fileName="**/*.svelte"
 <script lang="ts">
@@ -124,7 +193,7 @@ const content = useIntlayer("total_openings");
   </Tab>
   <Tab label="Preact" value="preact">
 
-To use plural content in Preact components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
+Pour utiliser le contenu pluriel dans les composants Preact, récupérez-le via le hook `useIntlayer` et appelez-le avec un compte. Voici un exemple :
 
 ```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
 import type { FC } from "preact";
@@ -146,7 +215,7 @@ export default OpeningsComponent;
   </Tab>
   <Tab label="Solid" value="solid">
 
-To use plural content in SolidJS components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
+Pour utiliser du contenu au pluriel dans les composants SolidJS, récupérez-le via le hook `useIntlayer` et appelez-le avec un nombre. Voici un exemple :
 
 ```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
 import type { Component } from "solid-js";
@@ -168,7 +237,7 @@ export default OpeningsComponent;
   </Tab>
   <Tab label="Angular" value="angular">
 
-To use plural content in Angular components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
+Pour utiliser du contenu pluriel dans les composants Angular, récupérez-le via le hook `useIntlayer` et appelez-le avec un count. Voici un exemple :
 
 ```typescript fileName="app.component.ts" codeFormat="typescript"
 import { Component, Input } from "@angular/core";
@@ -192,109 +261,6 @@ export class OpeningsComponent {
   </Tab>
   <Tab label="Vanilla JS" value="vanilla">
 
-To use plural content with `vanilla-intlayer`, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
-
-```typescript fileName="**/*.ts" codeFormat={["typescript", "esm"]}
-import { installIntlayer, useIntlayer } from "vanilla-intlayer";
-
-installIntlayer();
-
-const content = useIntlayer("total_openings").onChange((newContent) => {
-  document.getElementById("openings")!.textContent =
-    newContent.totalOpenings(5);
-});
-
-// Initial render
-document.getElementById("openings")!.textContent = content.totalOpenings(5);
-```
-
-  </Tab>
-</Tabs>
-
-## Configuration du contenu au pluriel
-
-Pour configurer du contenu au pluriel dans votre projet Intlayer, créez un module de contenu qui utilise l'assistant `plural`. La catégorie `other` est obligatoire et sert de repli lorsqu'une locale ne définit pas de catégorie plus spécifique.
-
-```typescript fileName="**/*.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
-import { plural, t, type Dictionary } from "intlayer";
-
-const openingsContent = {
-  key: "total_openings",
-  content: {
-    totalOpenings: t({
-      en: plural({
-        one: "{{count}} opening",
-        other: "{{count}} openings",
-      }),
-      fr: plural({
-        one: "{{count}} poste ouvert",
-        other: "{{count}} postes ouverts",
-      }),
-    }),
-  },
-} satisfies Dictionary;
-
-export default openingsContent;
-```
-
-```json fileName="**/*.content.json" contentDeclarationFormat="json"
-{
-  "$schema": "https://intlayer.org/schema.json",
-  "key": "total_openings",
-  "content": {
-    "totalOpenings": {
-      "nodeType": "translation",
-      "translation": {
-        "en": {
-          "nodeType": "plural",
-          "plural": {
-            "one": "{{count}} opening",
-            "other": "{{count}} openings"
-          }
-        },
-        "fr": {
-          "nodeType": "plural",
-          "plural": {
-            "one": "{{count}} poste ouvert",
-            "other": "{{count}} postes ouverts"
-          }
-        }
-      }
-    }
-  }
-}
-```
-
-> Les catégories prises en charge sont `zero`, `one`, `two`, `few`, `many`, `other`. Vous n'avez qu'à déclarer les catégories utilisées par votre langue cible, Intlayer revient à `other` lorsqu'aucune catégorie spécifique ne correspond.
->
-> L'espace réservé `{{count}}` est automatiquement remplacé par le nombre que vous passez au moment de l'exécution. Vous pouvez également inclure d'autres espaces réservés (voir [Espaces réservés personnalisés](#custom-placeholders) ci-dessous).
-
-## Utilisation du contenu au pluriel avec React Intlayer
-
-Pour utiliser du contenu au pluriel dans un composant React, récupérez-le via le hook `useIntlayer` et appelez-le avec un nombre. La locale active et le nombre sont combinés pour choisir la catégorie CLDR correspondante.
-
-```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-import type { FC } from "react";
-import { useIntlayer } from "react-intlayer";
-
-const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
-  const { totalOpenings } = useIntlayer("total_openings");
-
-  return (
-    <div>
-      {/* En anglais :                                  */}
-      {/*  count=0  → "0 openings"   (other)           */}
-      {/*  count=1  → "1 opening"    (one)             */}
-      {/*  count=2  → "2 openings"   (other)           */}
-      {/*  count=21 → "21 openings"  (other)           */}
-      <p>{totalOpenings(count)}</p>
-    </div>
-  );
-};
-
-export default OpeningsComponent;
-```
-
 Vous pouvez appeler la fonction retournée de deux manières équivalentes :
 
 ```tsx
@@ -302,6 +268,9 @@ totalOpenings(21); // raccourci : nombre uniquement
 totalOpenings({ count: 21 }); // forme explicite
 ```
 
+  </Tab>
+</Tabs>
+
 ## Espaces réservés personnalisés
 
 Les chaînes au pluriel peuvent inclure des espaces réservés autres que `{{count}}`. Passez-les sous forme d'objet aux côtés de `count` :

package/docs/fr/dynamic_dictionaries/variants.md

@@ -523,6 +523,27 @@ Déclarez plutôt la variante une seule fois sur le fournisseur, exactement comm
 
   </Tab>
   <Tab label="Next.js" value="nextjs">
+    <Tabs>
+      <Tab label="Intlayer >=9.4" value=">=9.4">
+
+        ```tsx fileName="layout.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+        import { IntlayerProvider } from "next-intlayer/server";
+
+        export default async function Layout({ children, params }) {
+          const { locale } = await params;
+          const schoolType = await getSchoolType();
+
+          return (
+            <IntlayerProvider locale={locale} variant={schoolType}>
+              {children}
+            </IntlayerProvider>
+          );
+        }
+        ```
+
+      </Tab>
+      <Tab label="Intlayer <9.4" value="<9.4">
+
     ```tsx fileName="layout.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
     import { IntlayerServerProvider } from "next-intlayer/server";
     import { IntlayerClientProvider } from "next-intlayer";
@@ -541,6 +562,9 @@ Déclarez plutôt la variante une seule fois sur le fournisseur, exactement comm
     }
     ```
 
+      </Tab>
+    </Tabs>
+
   </Tab>
   <Tab label="Vue" value="vue">
     ```ts fileName="main.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}