@intlayer/docs 6.0.2 → 6.1.1

package/docs/en/packages/react-intlayer/index.md

@@ -1,281 +0,0 @@
----
-createdAt: 2025-08-23
-updatedAt: 2025-08-23
-title: Package Documentation | react-intlayer
-description: See how to use the react-intlayer package
-keywords:
-  - Intlayer
-  - react-intlayer
-  - Internationalization
-  - Documentation
-  - Next.js
-  - JavaScript
-  - React
-slugs:
-  - doc
-  - packages
-  - react-intlayer
----
-
-# react-intlayer: NPM Package to internationalize (i18n) an React application
-
-**Intlayer** is a suite of packages designed specifically for JavaScript developers. It is compatible with frameworks like React, React, and Express.js.
-
-**The `react-intlayer` package** allows you to internationalize your React application. It provides context providers and hooks for React internationalization.
-
-## Why Internationalize Your React Application?
-
-Internationalizing your React application is essential for serving a global audience effectively. It allows your application to deliver content and messages in the preferred language of each user. This capability enhances user experience and broadens your application's reach by making it more accessible and relevant to people from different linguistic backgrounds.
-
-## Why to integrate Intlayer?
-
-- **JavaScript-Powered Content Management**: Harness the flexibility of JavaScript to define and manage your content efficiently.
-- **Type-Safe Environment**: Leverage TypeScript to ensure all your content definitions are precise and error-free.
-- **Integrated Content Files**: Keep your translations close to their respective components, enhancing maintainability and clarity.
-
-## Installation
-
-Install the necessary package using your preferred package manager:
-
-```bash packageManager="npm"
-npm install react-intlayer
-```
-
-```bash packageManager="yarn"
-yarn add react-intlayer
-```
-
-```bash packageManager="pnpm"
-pnpm add react-intlayer
-```
-
-## Example of usage
-
-With Intlayer, you can declare your content in a structured way anywhere in your codebase.
-
-By default, Intlayer scans for files with the extension `.content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}`.
-
-> You can modify the default extension by setting the `contentDir` property in the [configuration file](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/configuration.md).
-
-```bash codeFormat="typescript"
-.
-├── intlayer.config.ts
-└── src
-    └── components
-        ├── Component1
-        │   ├── index.content.ts
-        │   └── index.tsx
-        └── Component2
-            ├── index.content.ts
-            └── index.tsx
-```
-
-```bash codeFormat="esm"
-.
-├── intlayer.config.mjs
-└── src
-    └── components
-        ├── Component1
-        │   ├── index.content.mjs
-        │   └── index.mjx
-        └── Component2
-            ├── index.content.mjs
-            └── index.mjx
-```
-
-```bash codeFormat="commonjs"
-.
-├── intlayer.config.cjs
-└── src
-    └── components
-        ├── Component1
-        │   ├── index.content.cjs
-        │   └── index.cjx
-        └── Component2
-            ├── index.content.cjs
-            └── index.cjx
-```
-
-### Declare your content
-
-`react-intlayer` is made to work with the [`intlayer` package](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/intlayer/index.md).`intlayer` is a package that allows you to declare your content anywhere in your code. It converts multilingual content declarations into structured dictionaries that integrate seamlessly into your application.
-
-Here’s an example of content declaration:
-
-```tsx fileName="src/Component1/index.content.ts" codeFormat="typescript"
-import { t, type Dictionary } from "intlayer";
-
-const component1Content = {
-  key: "component-1",
-  content: {
-    myTranslatedContent: t({
-      en: "Hello World",
-      es: "Hola Mundo",
-      fr: "Bonjour le monde",
-    }),
-    numberOfCar: enu({
-      "<-1": "Less than minus one car",
-      "-1": "Minus one car",
-      "0": "No cars",
-      "1": "One car",
-      ">5": "Some cars",
-      ">19": "Many cars",
-    }),
-  },
-} satisfies Dictionary;
-
-export default component1Content;
-```
-
-```jsx fileName="src/Component1/index.content.mjs" contentDeclarationFormat="esm"
-import { t } from "intlayer";
-
-/** @type {import('intlayer').Dictionary} */
-const component1Content = {
-  key: "component-1",
-  content: {
-    myTranslatedContent: t({
-      en: "Hello World",
-      es: "Hola Mundo",
-      fr: "Bonjour le monde",
-    }),
-    numberOfCar: enu({
-      "<-1": "Less than minus one car",
-      "-1": "Minus one car",
-      "0": "No cars",
-      "1": "One car",
-      ">5": "Some cars",
-      ">19": "Many cars",
-    }),
-  },
-};
-
-export default component1Content;
-```
-
-```jsx fileName="src/Component1/index.content.cjs" contentDeclarationFormat="commonjs"
-const { t } = require("intlayer");
-
-/** @type {import('intlayer').Dictionary} */
-const component1Content = {
-  key: "component-1",
-  content: {
-    myTranslatedContent: t({
-      en: "Hello World",
-      es: "Hola Mundo",
-      fr: "Bonjour le monde",
-    }),
-    numberOfCar: enu({
-      "<-1": "Less than minus one car",
-      "-1": "Minus one car",
-      "0": "No cars",
-      "1": "One car",
-      ">5": "Some cars",
-      ">19": "Many cars",
-    }),
-  },
-};
-
-module.exports = component1Content;
-```
-
-```json fileName="src/Component1/index.content.json" codeFormat="json"
-{
-  "key": "component-1",
-  "content": {
-    "myTranslatedContent": {
-      "nodeType": "translation",
-      "translation": {
-        "en": "Hello World",
-        "fr": "Bonjour le monde",
-        "es": "Hola Mundo"
-      }
-    },
-    "numberOfCar": {
-      "nodeType": "enumeration",
-      "enumeration": {
-        "<-1": "Less than minus one car",
-        "-1": "Minus one car",
-        "0": "No cars",
-        "1": "One car",
-        ">5": "Some cars",
-        ">19": "Many cars"
-      }
-    }
-  }
-}
-```
-
-### Utilize Content in Your Code
-
-Once you have declared your content, you can use it in your code. Here's an example of how to use the content in a React component:
-
-```tsx {4,7} fileName="src/components/Component1Example.tsx" codeFormat="typescript"
-"use client";
-
-import type { FC } from "react";
-import { useIntlayer } from "react-intlayer";
-
-export const Component1Example: FC = () => {
-  const { myTranslatedContent } = useIntlayer("component-1"); // Create related content declaration
-
-  return (
-    <div>
-      <p>{myTranslatedContent}</p>
-    </div>
-  );
-};
-```
-
-```jsx {3,6} fileName="src/components/Component1Example.mjx" codeFormat="esm"
-"use client";
-
-import { useIntlayer } from "react-intlayer";
-
-const Component1Example = () => {
-  const { myTranslatedContent } = useIntlayer("component-1"); // Create related content declaration
-
-  return (
-    <div>
-      <p>{myTranslatedContent}</p>
-    </div>
-  );
-};
-```
-
-```jsx {3,6} fileName="src/components/Component1Example.csx" codeFormat="commonjs"
-"use client";
-
-const { useIntlayer } = require("react-intlayer");
-
-const Component1Example = () => {
-  const { myTranslatedContent } = useIntlayer("component-1"); // Create related content declaration
-
-  return (
-    <div>
-      <p>{myTranslatedContent}</p>
-    </div>
-  );
-};
-```
-
-## Mastering the internationalization of your React application
-
-Intlayer provides a lot of features to help you internationalize your React application.
-
-**To learn more about these features, refer to the [React Internationalization (i18n) with Intlayer and Vite and React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_vite+react.md) guide for Vite and React Application, or the [React Internationalization (i18n) with Intlayer and React (CRA)](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_create_react_app.md) guide for React Create App.**
-
-## Functions provided by `react-intlayer` package
-
-The `react-intlayer` package also provides some functions to help you to internationalize your application.
-
-- [`t()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/react-intlayer/t.md)
-- [`useIntlayer()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/react-intlayer/useIntlayer.md)
-- [`useDictionary()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/react-intlayer/useDictionary.md)
-- [`useLocale()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/react-intlayer/useLocale.md)
-
-## Doc History
-
-| Version | Date       | Changes      |
-| ------- | ---------- | ------------ |
-| 5.5.10  | 2025-06-29 | Init history |

package/docs/en/packages/react-native-intlayer/index.md

@@ -1,85 +0,0 @@
----
-createdAt: 2025-03-13
-updatedAt: 2025-06-29
-title: Package Documentation | react-native-intlayer
-description: See how to use the react-native-intlayer package
-keywords:
-  - Intlayer
-  - React Native
-  - react-native-intlayer
-  - Internationalization
-  - Documentation
-  - Next.js
-  - JavaScript
-  - React
-slugs:
-  - doc
-  - packages
-  - react-native-intlayer
----
-
-# react-native-intlayer: Internationalize (i18n) an React Native application
-
-**Intlayer** is a suite of packages designed specifically for JavaScript developers. It is compatible with frameworks like React, React, and Express.js.
-
-**The `react-native-intlayer` package** allows you to internationalize your Vite application. It includes the Metro plugin to set the configuration through environment variables into the [Metro bundler](https://docs.expo.dev/guides/customizing-metro/).
-
-## Why Internationalize Your React Native Application?
-
-Internationalizing your React Native application is essential for serving a global audience effectively. It allows your application to deliver content and messages in the preferred language of each user. This capability enhances user experience and broadens your application's reach by making it more accessible and relevant to people from different linguistic backgrounds.
-
-## Configuration
-
-The `react-native-intlayer` package works seamlessly with the [`react-intlayer` package](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/react-intlayer/index.md), and the [`intlayer` package](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/intlayer/index.md). Have a look at the relevant documentation for more information.
-
-## Installation
-
-Install the necessary package using your preferred package manager:
-
-```bash packageManager="npm"
-npm install react-native-intlayer
-```
-
-```bash packageManager="yarn"
-yarn add react-native-intlayer
-```
-
-```bash packageManager="pnpm"
-pnpm add react-native-intlayer
-```
-
-## Example of usage
-
-See an example of how to include the plugins into your vite configuration.
-
-```js
-// metro.config.js
-const { getDefaultConfig } = require("expo/metro-config");
-const { configMetroIntlayer } = require("react-native-intlayer/metro");
-
-module.exports = (async () => {
-  const defaultConfig = getDefaultConfig(__dirname);
-
-  return await configMetroIntlayer(defaultConfig);
-})();
-```
-
-## Mastering the internationalization of your Vite application
-
-Intlayer provides a lot of features to help you internationalize your Vite application.
-
-**To learn more about these features, refer to the [React Internationalization (i18n) with Intlayer and React Native](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_react_native+expo.md) guide for React Native Application.**
-
-## Read about Intlayer
-
-- [Intlayer Website](https://intlayer.org)
-- [Intlayer Documentation](https://intlayer.org/doc)
-- [Intlayer GitHub](https://github.com/aymericzip/intlayer)
-
-- [Ask your questions to our smart documentation](https://intlayer.org/docchat)
-
-## Doc History
-
-| Version | Date       | Changes      |
-| ------- | ---------- | ------------ |
-| 5.5.10  | 2025-06-29 | Init history |

package/docs/en/packages/react-scripts-intlayer/index.md

@@ -1,82 +0,0 @@
----
-createdAt: 2025-08-23
-updatedAt: 2025-08-23
-title: Package Documentation | react-scripts-intlayer
-description: See how to use the react-scripts-intlayer package
-keywords:
-  - Intlayer
-  - react-scripts-intlayer
-  - Internationalization
-  - Documentation
-  - Next.js
-  - JavaScript
-  - React
-slugs:
-  - doc
-  - packages
-  - react-scripts-intlayer
----
-
-# react-scripts-intlayer: NPM Package to use Intlayer in a React Create App application
-
-**Intlayer** is a suite of packages designed specifically for JavaScript developers. It is compatible with frameworks like React, React, and Express.js.
-
-**The `react-scripts-intlayer` package** Includes the `react-scripts-intlayer` commands and plugins for integrating Intlayer with the Create React App based application. These plugins are based on [craco](https://craco.js.org/) and includes additional configuration for the [Webpack](https://webpack.js.org/) bundler.
-
-## Configuration
-
-The `react-scripts-intlayer` package works seamlessly with the [`react-intlayer` package](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/react-intlayer/index.md), and the [`intlayer` package](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/intlayer/index.md). Have a look at the relevant documentation for more information.
-
-## Installation
-
-Install the necessary package using your preferred package manager:
-
-```bash packageManager="npm"
-npm install react-scripts-intlayer
-```
-
-```bash packageManager="yarn"
-yarn add react-scripts-intlayer
-```
-
-```bash packageManager="pnpm"
-pnpm add react-scripts-intlayer
-```
-
-## Usage
-
-### CLI Commands
-
-The `react-scripts-intlayer` package provides the following CLI commands:
-
-- `npx react-scripts-intlayer build`: Builds React application with the Intlayer configuration.
-- `npx react-scripts-intlayer start`: Starts the development server with the Intlayer configuration.
-
-### Replace package.json scripts
-
-To use the `react-scripts-intlayer` package, you need to replace the `package.json` scripts with the following commands:
-
-```json fileName="package.json"
-{
-  "scripts": {
-    "start": "react-scripts-intlayer start",
-    "build": "react-scripts-intlayer build"
-  }
-}
-```
-
-## Use custom Webpack configuration
-
-`react-scripts-intlayer` is based on [craco](https://craco.js.org/), which allows you to customize the Webpack configuration.
-If you need to customize the Webpack configuration, you can also implement your own setup based on the intlayer craco plugin. [See example here](https://github.com/aymericzip/intlayer/blob/main/examples/react-app/craco.config.js).
-
-## Read the full Intlayer guide for React Create App
-
-Intlayer provides a lot of features to help you internationalize your React application.
-[See how to use intlayer with React Create App](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_create_react_app.md).
-
-## Doc History
-
-| Version | Date       | Changes      |
-| ------- | ---------- | ------------ |
-| 5.5.10  | 2025-06-29 | Init history |

package/docs/en/packages/solid-intlayer/index.md

@@ -1,56 +0,0 @@
----
-createdAt: 2025-08-23
-updatedAt: 2025-08-23
-title: Package Documentation | solid-intlayer
-description: See how to use the solid-intlayer package
-keywords:
-  - Intlayer
-  - solid-intlayer
-  - Internationalization
-  - Documentation
-  - Next.js
-  - JavaScript
-  - React
-slugs:
-  - doc
-  - packages
-  - solid-intlayer
----
-
-# solid-intlayer: NPM Package to internationalize (i18n) an Solid application
-
-**Intlayer** is a suite of packages designed specifically for JavaScript developers. It is compatible with frameworks like Solid, Solid, and Express.js.
-
-**The `solid-intlayer` package** allows you to internationalize your Solid application. It provides context providers and hooks for Solid internationalization.
-
-## Why Internationalize Your Solid Application?
-
-Internationalizing your Solid application is essential for serving a global audience effectively. It allows your application to deliver content and messages in the preferred language of each user. This capability enhances user experience and broadens your application's reach by making it more accessible and relevant to people from different linguistic backgrounds.
-
-## Why to integrate Intlayer?
-
-- **JavaScript-Powered Content Management**: Harness the flexibility of JavaScript to define and manage your content efficiently.
-- **Type-Safe Environment**: Leverage TypeScript to ensure all your content definitions are precise and error-free.
-- **Integrated Content Files**: Keep your translations close to their respective components, enhancing maintainability and clarity.
-
-## Installation
-
-Install the necessary package using your preferred package manager:
-
-```bash packageManager="npm"
-npm install solid-intlayer
-```
-
-```bash packageManager="yarn"
-yarn add solid-intlayer
-```
-
-```bash packageManager="pnpm"
-pnpm add solid-intlayer
-```
-
-## Doc History
-
-| Version | Date       | Changes      |
-| ------- | ---------- | ------------ |
-| 5.5.10  | 2025-06-29 | Init history |

package/docs/en/packages/svelte-intlayer/index.md

@@ -1,55 +0,0 @@
----
-createdAt: 2025-04-18
-updatedAt: 2025-06-29
-title: Package Documentation | svelte-intlayer
-description: See how to use the svelte-intlayer package
-keywords:
-  - Intlayer
-  - svelte-intlayer
-  - Internationalization
-  - Documentation
-  - JavaScript
-  - Svelte
-slugs:
-  - doc
-  - packages
-  - svelte-intlayer
----
-
-# svelte-intlayer: NPM Package to internationalize (i18n) an Solid application
-
-**Intlayer** is a suite of packages designed specifically for JavaScript developers. It is compatible with frameworks like Solid, Solid, and Express.js.
-
-**The `svelte-intlayer` package** allows you to internationalize your Solid application. It provides context providers and hooks for Solid internationalization.
-
-## Why Internationalize Your Solid Application?
-
-Internationalizing your Solid application is essential for serving a global audience effectively. It allows your application to deliver content and messages in the preferred language of each user. This capability enhances user experience and broadens your application's reach by making it more accessible and relevant to people from different linguistic backgrounds.
-
-## Why to integrate Intlayer?
-
-- **JavaScript-Powered Content Management**: Harness the flexibility of JavaScript to define and manage your content efficiently.
-- **Type-Safe Environment**: Leverage TypeScript to ensure all your content definitions are precise and error-free.
-- **Integrated Content Files**: Keep your translations close to their respective components, enhancing maintainability and clarity.
-
-## Installation
-
-Install the necessary package using your preferred package manager:
-
-```bash packageManager="npm"
-npm install svelte-intlayer
-```
-
-```bash packageManager="yarn"
-yarn add svelte-intlayer
-```
-
-```bash packageManager="pnpm"
-pnpm add svelte-intlayer
-```
-
-## Doc History
-
-| Version | Date       | Changes      |
-| ------- | ---------- | ------------ |
-| 5.5.10  | 2025-06-29 | Init history |

package/docs/en/packages/vite-intlayer/index.md

@@ -1,78 +0,0 @@
----
-createdAt: 2025-08-23
-updatedAt: 2025-08-23
-title: Package Documentation | vite-intlayer
-description: See how to use the vite-intlayer package
-keywords:
-  - Intlayer
-  - vite-intlayer
-  - Internationalization
-  - Documentation
-  - Next.js
-  - JavaScript
-  - React
-slugs:
-  - doc
-  - packages
-  - vite-intlayer
----
-
-# vite-intlayer: NPM Package to internationalize (i18n) an Vite application
-
-**Intlayer** is a suite of packages designed specifically for JavaScript developers. It is compatible with frameworks like React, React, and Express.js.
-
-**The `vite-intlayer` package** allows you to internationalize your Vite application. It includes the Vite plugin to set the configuration through environment variables into the [Vite bundler](https://vitejs.dev/guide/why.html#why-bundle-for-production). It also provides middleware to detect the user's preferred locale, and redirect the user to the appropriate URL as specified in the [configuration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/configuration.md).
-
-## Why Internationalize Your Vite Application?
-
-Internationalizing your Vite application is essential for serving a global audience effectively. It allows your application to deliver content and messages in the preferred language of each user. This capability enhances user experience and broadens your application's reach by making it more accessible and relevant to people from different linguistic backgrounds.
-
-## Configuration
-
-The `vite-intlayer` package works seamlessly with the [`react-intlayer` package](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/react-intlayer/index.md), and the [`intlayer` package](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/intlayer/index.md). Have a look at the relevant documentation for more information.
-
-## Installation
-
-Install the necessary package using your preferred package manager:
-
-```bash packageManager="npm"
-npm install vite-intlayer
-```
-
-```bash packageManager="yarn"
-yarn add vite-intlayer
-```
-
-```bash packageManager="pnpm"
-pnpm add vite-intlayer
-```
-
-## Example of usage
-
-See an example of how to include the plugins into your vite configuration.
-
-```typescript fileName="vite.config.ts"
-import { defineConfig } from "vite";
-import { intlayer, intlayerMiddlewarePlugin } from "vite-intlayer";
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [intlayer(), intlayerMiddlewarePlugin()],
-});
-```
-
-> The `intlayer()` Vite plugin is used to integrate Intlayer with Vite. It ensures the building of content declaration files and monitors them in development mode. It defines Intlayer environment variables within the Vite application. Additionally, it provides aliases to optimize performance.
-
-> The `intlayerMiddlewarePlugin()` add server-side routing to your application. This plugin will automatically detect the current locale based on the URL and set the appropriate locale cookie. If no locale is specified, the plugin will determine the most appropriate locale based on the user's browser language preferences. If no locale is detected, it will redirect to the default locale.
-
-## Mastering the internationalization of your Vite application
-
-Intlayer provides a lot of features to help you internationalize your Vite application.
-
-**To learn more about these features, refer to the [React Internationalization (i18n) with Intlayer and Vite and React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_vite+react.md) guide for Vite and React Application.**
-
-## Doc History
-
-| Version | Date       | Changes      |
-| ------- | ---------- | ------------ |
-| 5.5.10  | 2025-06-29 | Init history |

package/docs/en/packages/vue-intlayer/index.md

@@ -1,55 +0,0 @@
----
-createdAt: 2025-04-18
-updatedAt: 2025-06-29
-title: Package Documentation | vue-intlayer
-description: See how to use the vue-intlayer package
-keywords:
-  - Intlayer
-  - vue-intlayer
-  - Internationalization
-  - Documentation
-  - JavaScript
-  - Vue
-slugs:
-  - doc
-  - packages
-  - vue-intlayer
----
-
-# vue-intlayer: NPM Package to internationalize (i18n) an Vue application
-
-**Intlayer** is a suite of packages designed specifically for JavaScript developers. It is compatible with frameworks like Vue, Vue, and Express.js.
-
-**The `vue-intlayer` package** allows you to internationalize your Vue application. It provides context providers and hooks for Vue internationalization.
-
-## Why Internationalize Your Vue Application?
-
-Internationalizing your Vue application is essential for serving a global audience effectively. It allows your application to deliver content and messages in the preferred language of each user. This capability enhances user experience and broadens your application's reach by making it more accessible and relevant to people from different linguistic backgrounds.
-
-## Why to integrate Intlayer?
-
-- **JavaScript-Powered Content Management**: Harness the flexibility of JavaScript to define and manage your content efficiently.
-- **Type-Safe Environment**: Leverage TypeScript to ensure all your content definitions are precise and error-free.
-- **Integrated Content Files**: Keep your translations close to their respective components, enhancing maintainability and clarity.
-
-## Installation
-
-Install the necessary package using your preferred package manager:
-
-```bash packageManager="npm"
-npm install vue-intlayer
-```
-
-```bash packageManager="yarn"
-yarn add vue-intlayer
-```
-
-```bash packageManager="pnpm"
-pnpm add vue-intlayer
-```
-
-## Doc History
-
-| Version | Date       | Changes      |
-| ------- | ---------- | ------------ |
-| 5.5.10  | 2025-06-29 | Init history |