@intlayer/docs 5.5.8

package/fr/interest_of_intlayer.md

@@ -0,0 +1,132 @@
+# Intlayer : Une façon personnalisée de traduire votre site web
+
+**Intlayer** est une bibliothèque d'internationalisation conçue spécifiquement pour les développeurs JavaScript. Elle permet de déclarer votre contenu partout dans votre code. Elle convertit la déclaration de contenu multilingue en dictionnaires structurés pour s'intégrer facilement dans votre code. En utilisant TypeScript, **Intlayer** rend votre développement plus robuste et plus efficace.
+
+## Exemple d'utilisation
+
+```bash codeFormat="typescript"
+.
+└── Components
+    └── MyComponent
+        ├── index.content.ts
+        └── index.tsx
+```
+
+```bash codeFormat="commonjs"
+.
+└── Components
+    └── MyComponent
+        ├── index.content.cjs
+        └── index.mjs
+```
+
+```bash codeFormat="esm"
+.
+└── Components
+    └── MyComponent
+        ├── index.content.mjs
+        └── index.js
+```
+
+```tsx fileName="./Components/MyComponent/index.content.ts" codeFormat="typescript"
+import { t, type Dictionary } from "intlayer";
+
+const componentExampleContent = {
+  key: "component-example",
+  content: {
+    myTranslatedContent: t({
+      en: "Hello World",
+      fr: "Bonjour le monde",
+      es: "Hola Mundo",
+    }),
+  },
+} satisfies Dictionary;
+
+export default componentExampleContent;
+```
+
+```jsx fileName="./Components/MyComponent/index.mjx" codeFormat="esm"
+import { t } from "intlayer";
+
+/** @type {import('intlayer').Dictionary} */
+const componentExampleContent = {
+  key: "component-example",
+  content: {
+    myTranslatedContent: t({
+      en: "Hello World",
+      fr: "Bonjour le monde",
+      es: "Hola Mundo",
+    }),
+  },
+};
+
+export default componentExampleContent;
+```
+
+```jsx fileName="./Components/MyComponent/index.csx" codeFormat="commonjs"
+const { t } = require("intlayer");
+
+/** @type {import('intlayer').Dictionary} */
+const componentExampleContent = {
+  key: "component-example",
+  content: {
+    myTranslatedContent: t({
+      en: "Hello World",
+      fr: "Bonjour le monde",
+      es: "Hola Mundo",
+    }),
+  },
+};
+
+module.exports = componentExampleContent;
+```
+
+```tsx fileName="./Components/MyComponent/index.tsx" codeFormat="typescript"
+import { useIntlayer } from "react-intlayer";
+
+export const ComponentExample = () => {
+  const { myTranslatedContent } = useIntlayer("component-example");
+
+  return <span>{myTranslatedContent}</span>;
+};
+```
+
+```jsx fileName="./Components/MyComponent/index.mjx" codeFormat="esm"
+import { useIntlayer } from "react-intlayer";
+
+const ComponentExample = () => {
+  const { myTranslatedContent } = useIntlayer("component-example");
+
+  return <span>{myTranslatedContent}</span>;
+};
+```
+
+```jsx fileName="./Components/MyComponent/index.csx" codeFormat="commonjs"
+const { useIntlayer } = require("react-intlayer");
+
+const ComponentExample = () => {
+  const { myTranslatedContent } = useIntlayer("component-example");
+
+  return <span>{myTranslatedContent}</span>;
+};
+```
+
+## Pourquoi choisir Intlayer ?
+
+- **Gestion de contenu basée sur JavaScript** : Exploitez la flexibilité de JavaScript pour définir et gérer votre contenu efficacement.
+- **Environnement typé** : Utilisez TypeScript pour garantir que toutes vos définitions de contenu sont précises et sans erreur.
+- **Fichiers de contenu intégrés** : Gardez vos traductions près de leurs composants respectifs, améliorant la maintenabilité et la clarté.
+- **Configuration simplifiée** : Démarrez rapidement avec une configuration minimale, particulièrement optimisée pour les projets Next.js.
+- **Support des composants serveur** : Parfaitement adapté aux composants serveur Next.js, assurant un rendu côté serveur fluide.
+- **Routage amélioré** : Support complet du routage d'application Next.js, s'adaptant parfaitement aux structures d'application complexes.
+- **Base de code organisée** : Gardez votre base de code plus organisée : 1 composant = 1 dictionnaire dans le même dossier.
+- **Types TypeScript automatiques** : Les types TypeScript sont automatiquement implémentés, empêchant la rupture du code due aux clés renommées ou supprimées.
+- **Traduction automatique CI** : Remplissez automatiquement vos traductions dans votre CI en utilisant votre propre clé API OpenAI, éliminant le besoin d'une plateforme L10n.
+- **Intégration serveur MCP** : Fournit un serveur MCP (Model Context Protocol) pour l'automatisation IDE, permettant une gestion transparente du contenu et des flux de travail i18n directement dans votre environnement de développement. [En savoir plus](https://github.com/aymericzip/intlayer/blob/main/docs/en/mcp_server.md).
+- **Support Markdown** : Importez et interprétez les fichiers markdown pour le contenu multilingue comme les politiques de confidentialité.
+- **Éditeur visuel et CMS gratuits** : Un éditeur visuel et un CMS gratuits sont disponibles si vous avez besoin de travailler avec des rédacteurs de contenu pour vos traductions, supprimant à nouveau le besoin d'une plateforme de localisation et permettant l'externalisation du contenu depuis la base de code.
+- **Récupération de contenu simplifiée** : Pas besoin d'appeler votre fonction `t` pour chaque élément de contenu ; récupérez tout votre contenu directement en utilisant un seul hook.
+- **Implémentation cohérente** : La même implémentation pour les composants client et serveur, pas besoin de passer votre fonction `t` à travers chaque composant serveur.
+- **Contenu tree-shakable** : Le contenu est tree-shakable, ce qui allège le bundle final.
+- **Rendu statique non bloquant** : Intlayer ne bloque pas le rendu statique comme le fait `next-intl`.
+- **Interopérabilité** : Permet l'interopérabilité avec [react-i18next](https://github.com/aymericzip/intlayer/blob/main/docs/en/intlayer_with_react-i18next.md), [next-i18next](https://github.com/aymericzip/intlayer/blob/main/docs/en/intlayer_with_next-i18next.md), [next-intl](https://github.com/aymericzip/intlayer/blob/main/docs/en/intlayer_with_next-intl.md), et [react-intl](https://github.com/aymericzip/intlayer/blob/main/docs/en/intlayer_with_react-intl.md).

package/fr/intlayer_CMS.md

@@ -0,0 +1,334 @@
+# Système de Gestion de Contenu (CMS) Intlayer Documentation
+
+<iframe title="Visual Editor + CMS for Your Web App: Intlayer Explained" class="m-auto aspect-[16/9] w-full overflow-hidden rounded-lg border-0" allow="autoplay; gyroscope;" loading="lazy" width="1080" height="auto" src="https://www.youtube.com/embed/UDDTnirwi_4?autoplay=0&amp;origin=http://intlayer.org&amp;controls=0&amp;rel=1"/>
+
+Le CMS Intlayer est une application qui vous permet d'externaliser le contenu d'un projet Intlayer.
+
+Pour cela, Intlayer introduit le concept de 'dictionnaires distants'.
+
+![Interface du CMS Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/assets/CMS.png)
+
+## Comprendre les dictionnaires distants
+
+Intlayer fait une distinction entre les dictionnaires 'locaux' et 'distants'.
+
+- Un dictionnaire 'local' est un dictionnaire déclaré dans votre projet Intlayer. Comme le fichier de déclaration d'un bouton ou de votre barre de navigation. Externaliser ce contenu n'a pas de sens dans ce cas, car ce contenu n'est pas censé changer fréquemment.
+
+- Un dictionnaire 'distant' est un dictionnaire géré via le CMS Intlayer. Cela peut être utile pour permettre à votre équipe de gérer directement le contenu de votre site web, et vise également à utiliser des fonctionnalités de tests A/B et d'optimisation automatique pour le SEO.
+
+## Éditeur visuel vs CMS
+
+L'[éditeur visuel Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/fr/intlayer_visual_editor.md) est un outil qui vous permet de gérer votre contenu dans un éditeur visuel pour les dictionnaires locaux. Une fois une modification effectuée, le contenu sera remplacé dans le code source. Cela signifie que l'application sera reconstruite et que la page sera rechargée pour afficher le nouveau contenu.
+
+En revanche, le CMS Intlayer est un outil qui vous permet de gérer votre contenu dans un éditeur visuel pour les dictionnaires distants. Une fois une modification effectuée, le contenu **n'impactera pas** votre code source. Et le site web affichera automatiquement le contenu modifié.
+
+## Intégration
+
+Pour plus de détails sur l'installation du package, consultez la section correspondante ci-dessous :
+
+### Intégration avec Next.js
+
+Pour l'intégration avec Next.js, consultez le [guide d'installation](https://github.com/aymericzip/intlayer/blob/main/docs/fr/intlayer_with_nextjs_15.md).
+
+### Intégration avec Create React App
+
+Pour l'intégration avec Create React App, consultez le [guide d'installation](https://github.com/aymericzip/intlayer/blob/main/docs/fr/intlayer_with_create_react_app.md).
+
+### Intégration avec Vite + React
+
+Pour l'intégration avec Vite + React, consultez le [guide d'installation](https://github.com/aymericzip/intlayer/blob/main/docs/fr/intlayer_with_vite+react.md).
+
+## Configuration
+
+Dans votre fichier de configuration Intlayer, vous pouvez personnaliser les paramètres du CMS :
+
+```typescript fileName="intlayer.config.ts" codeFormat="typescript"
+import type { IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  // ... autres paramètres de configuration
+  editor: {
+    /**
+     * Obligatoire
+     *
+     * L'URL de l'application.
+     * C'est l'URL ciblée par l'éditeur visuel.
+     */
+    applicationURL: process.env.INTLAYER_APPLICATION_URL,
+
+    /**
+     * Obligatoire
+     *
+     * L'ID client et le secret client sont nécessaires pour activer l'éditeur.
+     * Ils permettent d'identifier l'utilisateur qui modifie le contenu.
+     * Ils peuvent être obtenus en créant un nouveau client dans le tableau de bord Intlayer - Projets (https://intlayer.org/dashboard/projects).
+     * clientId: process.env.INTLAYER_CLIENT_ID,
+     * clientSecret: process.env.INTLAYER_CLIENT_SECRET,
+     */
+    clientId: process.env.INTLAYER_CLIENT_ID,
+    clientSecret: process.env.INTLAYER_CLIENT_SECRET,
+
+    /**
+     * Optionnel
+     *
+     * Dans le cas où vous hébergez vous-même le CMS Intlayer, vous pouvez définir l'URL du CMS.
+     *
+     * L'URL du CMS Intlayer.
+     * Par défaut, il est défini sur https://intlayer.org
+     */
+    cmsURL: process.env.INTLAYER_CMS_URL,
+
+    /**
+     * Optionnel
+     *
+     * Dans le cas où vous hébergez vous-même le CMS Intlayer, vous pouvez définir l'URL du backend.
+     *
+     * L'URL du CMS Intlayer.
+     * Par défaut, il est défini sur https://back.intlayer.org
+     */
+    backendURL: process.env.INTLAYER_BACKEND_URL,
+  },
+};
+
+export default config;
+```
+
+```javascript fileName="intlayer.config.mjs" codeFormat="esm"
+/** @type {import('intlayer').IntlayerConfig} */
+const config = {
+  // ... autres paramètres de configuration
+  editor: {
+    /**
+     * Obligatoire
+     *
+     * L'URL de l'application.
+     * C'est l'URL ciblée par l'éditeur visuel.
+     */
+    applicationURL: process.env.INTLAYER_APPLICATION_URL,
+
+    /**
+     * Obligatoire
+     *
+     * L'ID client et le secret client sont nécessaires pour activer l'éditeur.
+     * Ils permettent d'identifier l'utilisateur qui modifie le contenu.
+     * Ils peuvent être obtenus en créant un nouveau client dans le tableau de bord Intlayer - Projets (https://intlayer.org/dashboard/projects).
+     * clientId: process.env.INTLAYER_CLIENT_ID,
+     * clientSecret: process.env.INTLAYER_CLIENT_SECRET,
+     */
+    clientId: process.env.INTLAYER_CLIENT_ID,
+    clientSecret: process.env.INTLAYER_CLIENT_SECRET,
+
+    /**
+     * Optionnel
+     *
+     * Dans le cas où vous hébergez vous-même le CMS Intlayer, vous pouvez définir l'URL du CMS.
+     *
+     * L'URL du CMS Intlayer.
+     * Par défaut, il est défini sur https://intlayer.org
+     */
+    cmsURL: process.env.INTLAYER_CMS_URL,
+
+    /**
+     * Optionnel
+     *
+     * Dans le cas où vous hébergez vous-même le CMS Intlayer, vous pouvez définir l'URL du backend.
+     *
+     * L'URL du CMS Intlayer.
+     * Par défaut, il est défini sur https://back.intlayer.org
+     */
+    backendURL: process.env.INTLAYER_BACKEND_URL,
+  },
+};
+
+export default config;
+```
+
+```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
+/** @type {import('intlayer').IntlayerConfig} */
+const config = {
+  // ... autres paramètres de configuration
+  editor: {
+    /**
+     * Obligatoire
+     *
+     * L'URL de l'application.
+     * C'est l'URL ciblée par l'éditeur visuel.
+     */
+    applicationURL: process.env.INTLAYER_APPLICATION_URL,
+
+    /**
+     * Obligatoire
+     *
+     * L'ID client et le secret client sont nécessaires pour activer l'éditeur.
+     * Ils permettent d'identifier l'utilisateur qui modifie le contenu.
+     * Ils peuvent être obtenus en créant un nouveau client dans le tableau de bord Intlayer - Projets (https://intlayer.org/dashboard/projects).
+     * clientId: process.env.INTLAYER_CLIENT_ID,
+     * clientSecret: process.env.INTLAYER_CLIENT_SECRET,
+     */
+    clientId: process.env.INTLAYER_CLIENT_ID,
+    clientSecret: process.env.INTLAYER_CLIENT_SECRET,
+
+    /**
+     * Optionnel
+     *
+     * Dans le cas où vous hébergez vous-même le CMS Intlayer, vous pouvez définir l'URL du CMS.
+     *
+     * L'URL du CMS Intlayer.
+     * Par défaut, il est défini sur https://intlayer.org
+     */
+    cmsURL: process.env.INTLAYER_CMS_URL,
+
+    /**
+     * Optionnel
+     *
+     * Dans le cas où vous hébergez vous-même le CMS Intlayer, vous pouvez définir l'URL du backend.
+     *
+     * L'URL du CMS Intlayer.
+     * Par défaut, il est défini sur https://back.intlayer.org
+     */
+    backendURL: process.env.INTLAYER_BACKEND_URL,
+  },
+};
+
+module.exports = config;
+```
+
+> Si vous n'avez pas d'ID client et de secret client, vous pouvez les obtenir en créant un nouveau client dans le [tableau de bord Intlayer - Projets](https://intlayer.org/dashboard/projects).
+
+> Pour voir tous les paramètres disponibles, consultez la [documentation de configuration](https://github.com/aymericzip/intlayer/blob/main/docs/fr/configuration.md).
+
+## Utiliser le CMS
+
+### Pousser votre configuration
+
+Pour configurer le CMS Intlayer, vous pouvez utiliser les commandes du [CLI Intlayer](https://github.com/aymericzip/intlayer/tree/main/docs/fr/intlayer_cli.md).
+
+```bash
+npx intlayer config push
+```
+
+> Si vous utilisez des variables d'environnement dans votre fichier `intlayer.config.ts`, vous pouvez spécifier l'environnement souhaité en utilisant l'argument `--env` :
+
+```bash
+npx intlayer config push --env production
+```
+
+Cette commande télécharge votre configuration sur le CMS Intlayer.
+
+### Pousser un dictionnaire
+
+Pour transformer vos dictionnaires locaux en dictionnaires distants, vous pouvez utiliser les commandes du [CLI Intlayer](https://github.com/aymericzip/intlayer/tree/main/docs/fr/intlayer_cli.md).
+
+```bash
+npx intlayer dictionary push -d my-first-dictionary-key
+```
+
+> Si vous utilisez des variables d'environnement dans votre fichier `intlayer.config.ts`, vous pouvez spécifier l'environnement souhaité en utilisant l'argument `--env` :
+
+```bash
+npx intlayer dictionary push -d my-first-dictionary-key --env production
+```
+
+Cette commande télécharge vos dictionnaires de contenu initiaux, les rendant disponibles pour une récupération et une édition asynchrones via la plateforme Intlayer.
+
+### Modifier le dictionnaire
+
+Vous pourrez ensuite voir et gérer votre dictionnaire dans le [CMS Intlayer](https://intlayer.org/dashboard/content).
+
+## Rechargement à chaud
+
+Le CMS Intlayer est capable de recharger à chaud les dictionnaires lorsqu'un changement est détecté.
+
+Sans le rechargement à chaud, une nouvelle construction de l'application sera nécessaire pour afficher le nouveau contenu.
+
+En activant la configuration [`hotReload`](https://intlayer.org/doc/concept/configuration#editor-configuration), l'application remplacera automatiquement le contenu mis à jour lorsqu'il est détecté.
+
+```typescript fileName="intlayer.config.ts" codeFormat="typescript"
+import type { IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  // ... autres paramètres de configuration
+  editor: {
+    // ... autres paramètres de configuration
+
+    /**
+     * Indique si l'application doit recharger à chaud les configurations locales lorsqu'un changement est détecté.
+     * Par exemple, lorsqu'un nouveau dictionnaire est ajouté ou mis à jour, l'application mettra à jour le contenu à afficher sur la page.
+     *
+     * Comme le rechargement à chaud nécessite une connexion continue au serveur, il est uniquement disponible pour les clients du plan `enterprise`.
+     *
+     * Par défaut : false
+     */
+    hotReload: true,
+  },
+};
+
+export default config;
+```
+
+```javascript fileName="intlayer.config.mjs" codeFormat="esm"
+/** @type {import('intlayer').IntlayerConfig} */
+const config = {
+  // ... autres paramètres de configuration
+  editor: {
+    // ... autres paramètres de configuration
+
+    /**
+     * Indique si l'application doit recharger à chaud les configurations locales lorsqu'un changement est détecté.
+     * Par exemple, lorsqu'un nouveau dictionnaire est ajouté ou mis à jour, l'application mettra à jour le contenu à afficher sur la page.
+     *
+     * Comme le rechargement à chaud nécessite une connexion continue au serveur, il est uniquement disponible pour les clients du plan `enterprise`.
+     *
+     * Par défaut : false
+     */
+    hotReload: true,
+  },
+};
+
+export default config;
+```
+
+```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
+/** @type {import('intlayer').IntlayerConfig} */
+const config = {
+  // ... autres paramètres de configuration
+  editor: {
+    // ... autres paramètres de configuration
+
+    /**
+     * Indique si l'application doit recharger à chaud les configurations locales lorsqu'un changement est détecté.
+     * Par exemple, lorsqu'un nouveau dictionnaire est ajouté ou mis à jour, l'application mettra à jour le contenu à afficher sur la page.
+     *
+     * Comme le rechargement à chaud nécessite une connexion continue au serveur, il est uniquement disponible pour les clients du plan `enterprise`.
+     *
+     * Par défaut : false
+     */
+    hotReload: true,
+  },
+};
+
+module.exports = config;
+```
+
+Le rechargement à chaud remplace le contenu à la fois côté serveur et côté client.
+
+- Côté serveur, vous devez vous assurer que le processus de l'application a un accès en écriture au répertoire `.intlayer/dictionaries`.
+- Côté client, le rechargement à chaud permet à l'application de recharger à chaud le contenu dans le navigateur, sans avoir besoin de recharger la page. Cependant, cette fonctionnalité est uniquement disponible pour les composants clients.
+
+> Comme le rechargement à chaud nécessite une connexion continue au serveur via un `EventListener`, il est uniquement disponible pour les clients du plan `enterprise`.
+
+## Débogage
+
+Si vous rencontrez des problèmes avec le CMS, vérifiez les points suivants :
+
+- L'application est en cours d'exécution.
+
+- Les paramètres de configuration de l'[éditeur](https://intlayer.org/doc/concept/configuration#editor-configuration) sont correctement définis dans votre fichier de configuration Intlayer.
+
+  - Champs obligatoires :
+    - L'URL de l'application doit correspondre à celle que vous avez définie dans la configuration de l'éditeur (`applicationURL`).
+    - L'URL du CMS.
+
+- Assurez-vous que la configuration du projet a été poussée vers le CMS Intlayer.
+
+- L'éditeur visuel utilise une iframe pour afficher votre site web. Assurez-vous que la politique de sécurité du contenu (CSP) de votre site web autorise l'URL du CMS comme `frame-ancestors` ('https://intlayer.org' par défaut). Vérifiez la console de l'éditeur pour toute erreur.