@intlayer/docs 5.5.9 → 5.5.11

package/docs/en-GB/packages/@intlayer/core/index.md

@@ -0,0 +1,49 @@
+---
+createdAt: 2025-02-07
+updatedAt: 2025-06-29
+title: @intlayer/core - Core Functions for Intlayer i18n
+description: NPM package containing core functions for Intlayer, including translation functions, dictionary functions, and utility functions for internationalisation.
+keywords:
+  - intlayer
+  - core
+  - translation
+  - dictionary
+  - utilities
+  - i18n
+  - JavaScript
+  - NPM
+slugs:
+  - doc
+  - package
+  - @intlayer_core
+---
+
+# @intlayer/core: NPM Package containing Intlayer core functions
+
+**Intlayer** is a suite of packages designed specifically for JavaScript developers. It is compatible with frameworks like React, React, and Express.js.
+
+The **`@intlayer/core`** package is an NPM package including core functions of Intlayer shared by multiple packages. It notably includes:
+
+- Translation functions
+- Dictionary functions
+- Utility functions
+
+## Installation
+
+Install the necessary package using your preferred package manager:
+
+```bash packageManager="npm"
+npm install @intlayer/core
+```
+
+```bash packageManager="pnpm"
+pnpm add @intlayer/core
+```
+
+```bash packageManager="yarn"
+yarn add @intlayer/core
+```
+
+## Doc History
+
+- 5.5.10 - 2025-06-29: Initial history

package/docs/en-GB/packages/@intlayer/design-system/index.md

@@ -0,0 +1,45 @@
+---
+createdAt: 2025-02-07
+updatedAt: 2025-06-29
+title: @intlayer/design-system - UI Components for Intlayer
+description: NPM package containing design system components and UI elements for building consistent user interfaces with Intlayer internationalisation.
+keywords:
+  - intlayer
+  - design system
+  - UI components
+  - interface
+  - i18n
+  - JavaScript
+  - NPM
+  - styling
+slugs:
+  - doc
+  - package
+  - @intlayer_design-system
+---
+
+# @intlayer/design-system: NPM Package containing the UI library of Intlayer
+
+**Intlayer** is a suite of packages designed specifically for JavaScript developers. It is compatible with frameworks such as React, React, and Express.js.
+
+The **`@intlayer/design-system`** package is an NPM package that includes the design system of Intlayer. This package is notably used by the [Intlayer editor](https://github.com/aymericzip/intlayer/tree/main/docs/docs/en-GB/packages/intlayer-editor/index.md), on the [Website](https://intlayer.org) and the [Visual Editor / CMS](https://intlayer.org/dashboard).
+
+## Installation
+
+Install the required package using your preferred package manager:
+
+```bash packageManager="npm"
+npm install @intlayer/design-system
+```
+
+```bash packageManager="pnpm"
+pnpm add @intlayer/design-system
+```
+
+```bash packageManager="yarn"
+yarn add @intlayer/design-system
+```
+
+## Doc History
+
+- 5.5.10 - 29-06-2025: Initial history

package/docs/en-GB/packages/@intlayer/dictionary-entry/index.md

@@ -0,0 +1,45 @@
+---
+createdAt: 2025-02-07
+updatedAt: 2025-06-29
+title: @intlayer/dictionary-entry - Dictionary Management for Intlayer
+description: NPM package for managing dictionary entries in Intlayer, providing utilities for creating, updating, and organising translation dictionaries.
+keywords:
+  - intlayer
+  - dictionary
+  - entries
+  - management
+  - translation
+  - i18n
+  - JavaScript
+  - NPM
+slugs:
+  - doc
+  - package
+  - @intlayer_dictionary-entry
+---
+
+# @intlayer/dictionary-entry: NPM Package to retrieve Intlayer dictionaries
+
+**Intlayer** is a suite of packages designed specifically for JavaScript developers. It is compatible with frameworks like React, React, and Express.js.
+
+The **`@intlayer/dictionary-entry`** package is an NPM package that only returns the entry path of the Intlayer dictionaries. Since filesystem search is impossible from the browser, using bundlers like Webpack or Rollup to retrieve the entry path of the dictionaries is not possible. This package is intended to be aliased.
+
+## Installation
+
+Install the necessary package using your preferred package manager:
+
+```bash packageManager="npm"
+npm install @intlayer/dictionary-entry
+```
+
+```bash packageManager="pnpm"
+pnpm add @intlayer/dictionary-entry
+```
+
+```bash packageManager="yarn"
+yarn add @intlayer/dictionary-entry
+```
+
+## Doc History
+
+- 5.5.10 - 2025-06-29: Initialise history

package/docs/en-GB/packages/@intlayer/editor/index.md

@@ -0,0 +1,45 @@
+---
+createdAt: 2025-02-07
+updatedAt: 2025-06-29
+title: @intlayer/editor - Intlayer Editor Interface Package
+description: NPM package providing utilities to interface applications with the Intlayer editor and manipulate dictionaries across all JavaScript frameworks.
+keywords:
+  - intlayer
+  - editor
+  - dictionary
+  - interface
+  - NPM
+  - JavaScript
+  - utilities
+  - cross-platform
+slugs:
+  - doc
+  - package
+  - @intlayer_editor
+---
+
+# @intlayer/editor: NPM Package providing utilities to interface the application with the Intlayer editor and manipulate dictionaries
+
+**Intlayer** is a suite of packages designed specifically for JavaScript developers. It is compatible with frameworks such as React, Next.js, and Express.js.
+
+The **`intlayer-editor`** package provides utilities to interface the application with the Intlayer editor. It includes the API to interact with the editor, and utilities to manipulate dictionaries. This package is cross-platform.
+
+## Installation
+
+Install the necessary package using your preferred package manager:
+
+```bash
+npm install @intlayer/editor
+```
+
+```bash
+yarn add @intlayer/editor
+```
+
+```bash
+pnpm add @intlayer/editor
+```
+
+## Doc History
+
+- 5.5.10 - 2025-06-29: Initial history

package/docs/en-GB/packages/@intlayer/editor-react/index.md

@@ -0,0 +1,45 @@
+---
+createdAt: 2025-02-07
+updatedAt: 2025-06-29
+title: @intlayer/editor-react - React Components for Intlayer Editor
+description: NPM package providing React components and hooks for integrating the Intlayer visual editor into React applications for internationalisation.
+keywords:
+  - intlayer
+  - editor
+  - React
+  - components
+  - hooks
+  - i18n
+  - JavaScript
+  - NPM
+slugs:
+  - doc
+  - package
+  - @intlayer_editor-react
+---
+
+# @intlayer/editor-react: NPM Package providing React States, Contexts, Hooks and Components to interact with the Intlayer editor
+
+**Intlayer** is a suite of packages designed specifically for JavaScript developers. It is compatible with frameworks such as React, Next.js, and Express.js.
+
+The **`@intlayer/editor-react`** package provides states, contexts, hooks and components to interact with the Intlayer editor within a React application.
+
+## Installation
+
+Install the required package using your preferred package manager:
+
+```bash
+npm install @intlayer/editor-react
+```
+
+```bash
+yarn add @intlayer/editor-react
+```
+
+```bash
+pnpm add @intlayer/editor-react
+```
+
+## Doc History
+
+- 5.5.10 - 2025-06-29: Initial history

package/docs/en-GB/packages/@intlayer/webpack/index.md

@@ -0,0 +1,60 @@
+---
+createdAt: 2025-02-07
+updatedAt: 2025-06-29
+title: @intlayer/webpack - Webpack Plugin for Intlayer i18n
+description: NPM package providing Webpack configuration and plugin for seamless integration of Intlayer internationalisation with Webpack-based applications.
+keywords:
+  - intlayer
+  - webpack
+  - plugin
+  - configuration
+  - i18n
+  - JavaScript
+  - NPM
+  - bundler
+slugs:
+  - doc
+  - package
+  - @intlayer_webpack
+---
+
+# @intlayer/webpack: NPM Package to use the Intlayer Webpack Plugin in your application
+
+**Intlayer** is a suite of packages designed specifically for JavaScript developers. It is compatible with frameworks such as React and Express.js.
+
+The **`@intlayer/webpack`** package provides a Webpack configuration to facilitate working with a Webpack-based application using Intlayer. The package also includes a plugin to integrate into an existing Webpack application.
+
+## Usage
+
+```ts
+import { IntlayerPlugin } from "@intlayer/webpack";
+
+export default {
+  plugins: [
+    new IntlayerPlugin({
+      // Options
+    }),
+  ],
+};
+```
+
+## Installation
+
+Install the required package using your preferred package manager:
+
+```bash packageManager="npm"
+npm install @intlayer/webpack
+```
+
+```bash packageManager="pnpm"
+pnpm add @intlayer/webpack
+```
+
+```bash packageManager="yarn"
+yarn add @intlayer/webpack
+yarn add @intlayer/webpack
+```
+
+## Doc History
+
+- 5.5.10 - 2025-06-29: Initial history

package/docs/en-GB/packages/angular-intlayer/index.md

@@ -0,0 +1,53 @@
+---
+createdAt: 2025-04-18
+updatedAt: 2025-06-29
+title: Package Documentation | angular-intlayer
+description: See how to use the angular-intlayer package
+keywords:
+  - Intlayer
+  - angular-intlayer
+  - Internationalisation
+  - Documentation
+  - JavaScript
+  - Angular
+slugs:
+  - doc
+  - packages
+  - angular-intlayer
+---
+
+# angular-intlayer: NPM Package to internationalise (i18n) an Angular application
+
+**Intlayer** is a suite of packages designed specifically for JavaScript developers. It is compatible with frameworks like Angular, Angular, and Express.js.
+
+**The `angular-intlayer` package** allows you to internationalise your Angular application. It provides context providers and hooks for Angular internationalisation.
+
+## Why Internationalise Your Angular Application?
+
+Internationalising your Angular 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 integrate Intlayer?
+
+- **JavaScript-Powered Content Management**: Harness the flexibility of JavaScript to define and manage your content efficiently.
+- **Type-Safe Environment**: Utilise TypeScript to ensure all your content definitions are precise and free from errors.
+- **Integrated Content Files**: Keep your translations close to their respective components, improving maintainability and clarity.
+
+## Installation
+
+Install the necessary package using your preferred package manager:
+
+```bash packageManager="npm"
+npm install angular-intlayer
+```
+
+```bash packageManager="yarn"
+yarn add angular-intlayer
+```
+
+```bash packageManager="pnpm"
+pnpm add angular-intlayer
+```
+
+## Doc History
+
+- 5.5.10 - 2025-06-29: Init history

package/docs/en-GB/packages/express-intlayer/index.md

@@ -0,0 +1,264 @@
+---
+createdAt: 2024-08-11
+updatedAt: 2025-06-29
+title: Package Documentation | express-intlayer
+description: See how to use the express-intlayer package
+keywords:
+  - Intlayer
+  - express-intlayer
+  - Internationalisation
+  - Documentation
+  - Next.js
+  - JavaScript
+  - React
+slugs:
+  - doc
+  - packages
+  - express-intlayer
+---
+
+# express-intlayer: JavaScript Package to internationalise (i18n) an Express.js application
+
+**Intlayer** is a suite of packages designed specifically for JavaScript developers. It is compatible with frameworks like React, Next.js, and Express.js.
+
+**The `express-intlayer` package** allows you to internationalise your Express.js application. It provides middleware to detect the user's preferred locale, and returns the appropriate dictionary for the user.
+
+## Why Internationalise Your Backend?
+
+Internationalising your backend 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.
+
+### Practical Use Cases
+
+- **Displaying Backend Errors in User's Language**: When an error occurs, displaying messages in the user's native language improves understanding and reduces frustration. This is especially useful for dynamic error messages that might be shown in front-end components like toasts or modals.
+
+- **Retrieving Multilingual Content**: For applications pulling content from a database, internationalisation ensures that you can serve this content in multiple languages. This is crucial for platforms like e-commerce sites or content management systems that need to display product descriptions, articles, and other content in the language preferred by the user.
+
+- **Sending Multilingual Emails**: Whether it is transactional emails, marketing campaigns, or notifications, sending emails in the recipient’s language can significantly increase engagement and effectiveness.
+
+- **Multilingual Push Notifications**: For mobile applications, sending push notifications in a user's preferred language can enhance interaction and retention. This personal touch can make notifications feel more relevant and actionable.
+
+- **Other Communications**: Any form of communication from the backend, such as SMS messages, system alerts, or user interface updates, benefits from being in the user's language, ensuring clarity and enhancing the overall user experience.
+
+By internationalising the backend, your application not only respects cultural differences but also aligns better with global market needs, making it a key step in scaling your services worldwide.
+
+## Why integrate Intlayer?
+
+- **Type-Safe Environment**: Utilise TypeScript to ensure all your content definitions are precise and error-free.
+
+## Installation
+
+Install the necessary package using your preferred package manager:
+
+```bash
+npm install express-intlayer
+```
+
+```bash
+yarn add express-intlayer
+```
+
+```bash
+pnpm add express-intlayer
+```
+
+### Configure Intlayer
+
+Intlayer provides a configuration file to set up your project. Place this file in the root of your project.
+
+```typescript fileName="intlayer.config.ts" codeFormat="typescript"
+import { Locales, type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+    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],
+    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],
+    defaultLocale: Locales.ENGLISH,
+  },
+};
+
+module.exports = config;
+```
+
+> For a complete list of available parameters, refer to the [configuration documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/configuration.md).
+
+## Example of usage
+
+Set up your Express application to use `express-intlayer`:
+
+```typescript fileName="src/index.ts" codeFormat="typescript"
+import express, { type Express } from "express";
+import { intlayer, t } from "express-intlayer";
+
+const app: Express = express();
+
+// Load internationalisation request handler
+app.use(intlayer());
+
+// Routes
+app.get("/", (_req, res) => {
+  res.send(
+    t({
+      en: "Example of returned content in English",
+      fr: "Exemple de contenu renvoyé en français",
+      "es-ES": "Ejemplo de contenido devuelto en español (España)",
+      "es-MX": "Ejemplo de contenido devuelto en español (México)",
+    })
+  );
+});
+
+// Start server
+app.listen(3000, () => console.log(`Listening on port 3000`));
+```
+
+```javascript fileName="src/index.mjs" codeFormat="esm"
+import express from "express";
+import { intlayer, t } from "express-intlayer";
+
+const app = express();
+
+// Load internationalisation request handler
+app.use(intlayer());
+
+// Routes
+app.get("/", (_req, res) => {
+  res.send(
+    t({
+      en: "Example of returned content in English",
+      fr: "Exemple de contenu renvoyé en français",
+      "es-MX": "Ejemplo de contenido devuelto en español (México)",
+      "es-ES": "Ejemplo de contenido devuelto en español (España)",
+    })
+  );
+});
+
+// Start server
+app.listen(3000, () => console.log(`Listening on port 3000`));
+```
+
+```javascript fileName="src/index.cjs" codeFormat="commonjs"
+const express = require("express");
+const { intlayer, t } = require("express-intlayer");
+
+const app = express();
+
+// Load internationalisation request handler
+app.use(intlayer());
+
+// Routes
+app.get("/", (_req, res) => {
+  res.send(
+    t({
+      en: "Example of returned content in English",
+      fr: "Exemple de contenu renvoyé en français",
+      "es-MX": "Ejemplo de contenido devuelto en español (México)",
+      "es-ES": "Ejemplo de contenido devuelto en español (España)",
+    })
+  );
+});
+
+// Start server
+app.listen(3000, () => console.log(`Listening on port 3000`));
+app.listen(3000, () => console.log(`Listening on port 3000`));
+```
+
+### Compatibility
+
+`express-intlayer` is fully compatible with:
+
+- [`react-intlayer`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/packages/react-intlayer/index.md) for React applications
+- [`next-intlayer`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/packages/next-intlayer/index.md) for Next.js applications
+- [`vite-intlayer`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/packages/vite-intlayer/index.md) for Vite applications
+
+It also works seamlessly with any internationalisation solution across various environments, including browsers and API requests. You can customise the middleware to detect locale through headers or cookies:
+
+```typescript fileName="intlayer.config.ts" codeFormat="typescript"
+import { Locales, type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  // ... Other configuration options
+  middleware: {
+    headerName: "my-locale-header",
+    cookieName: "my-locale-cookie",
+  },
+};
+
+export default config;
+```
+
+```javascript fileName="intlayer.config.mjs" codeFormat="esm"
+import { Locales } from "intlayer";
+
+/** @type {import('intlayer').IntlayerConfig} */
+const config = {
+  // ... Other configuration options
+  middleware: {
+    headerName: "my-locale-header",
+    cookieName: "my-locale-cookie",
+  },
+};
+
+export default config;
+```
+
+```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
+const { Locales } = require("intlayer");
+
+/** @type {import('intlayer').IntlayerConfig} */
+const config = {
+  // ... Other configuration options
+  middleware: {
+    headerName: "my-locale-header",
+    cookieName: "my-locale-cookie",
+  },
+};
+
+module.exports = config;
+
+/** @type {import('intlayer').IntlayerConfig} */
+const config = {
+  // ... Other configuration options
+  middleware: {
+    headerName: "my-locale-header",
+    cookieName: "my-locale-cookie",
+  },
+};
+
+module.exports = config;
+```
+
+By default, `express-intlayer` will interpret the `Accept-Language` header to determine the client's preferred language.
+
+## Functions provided by `express-intlayer` package
+
+- [`t()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/packages/express-intlayer/t.md)
+
+## Doc History
+
+- 5.5.10 - 2025-06-29: Init history