@intlayer/docs 6.0.2-canary.0 → 6.1.0

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

@@ -1,137 +0,0 @@
----
-createdAt: 2025-02-07
-updatedAt: 2025-06-29
-title: intlayer-editor - Visual Translation Editor Package
-description: Visual editor package for Intlayer providing an intuitive interface for managing translations and collaborative content editing with AI assistance.
-keywords:
-  - intlayer
-  - editor
-  - visual
-  - translation
-  - collaborative
-  - AI
-  - NPM
-  - interface
-slugs:
-  - doc
-  - package
-  - intlayer-editor
----
-
-# intlayer-editor: NPM Package to use the Intlayer visual editor
-
-**Intlayer** is a suite of packages designed specifically for JavaScript developers. It is compatible with frameworks like React, React, and Express.js.
-
-The **`intlayer-editor`** package is an NPM package that integrates the Intlayer visual editor into your React project.
-
-## How Intlayer Editor Works
-
-The Intlayer editor allows interaction with the Intlayer remote dictionary. It can be installed on the client side and transform your application into a CMS-like editor to manage your site's content in all configured languages.
-
-![Intlayer Editor Interface](https://github.com/aymericzip/intlayer/blob/main/docs/assets/intlayer_editor_ui.png)
-
-## Installation
-
-Install the necessary package using your preferred package manager:
-
-```bash packageManager="npm"
-npm install intlayer-editor
-```
-
-```bash packageManager="pnpm"
-pnpm add intlayer-editor
-```
-
-```bash packageManager="yarn"
-yarn add intlayer-editor
-```
-
-### Configuration
-
-In your Intlayer configuration file, you can customise the editor settings:
-
-```typescript
-const config: IntlayerConfig = {
-  // ... other configuration settings
-  editor: {
-    enabled: process.env.INTLAYER_ENABLED === "true", // If false, the editor is inactive and cannot be accessed.
-    // Client ID and client secret are required to enable the editor.
-    // They allow the identification of the user who is editing the content.
-    // They can be obtained by creating a new client in the Intlayer Dashboard - Projects (https://intlayer.org/dashboard/projects).
-    clientId: process.env.INTLAYER_CLIENT_ID,
-    clientSecret: process.env.INTLAYER_CLIENT_SECRET,
-  },
-};
-```
-
-> If you don't have a client ID and client secret, you can obtain them by creating a new client in the [Intlayer Dashboard - Projects](https://intlayer.org/dashboard/projects).
-
-> To see all available parameters, refer to the [configuration documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/configuration.md)
-
-The `intlayer-editor` package is based on Intlayer and is available for JavaScript applications, such as React (Create React App), Vite + React, and Next.js.
-
-For more details on how to install the package, see the relevant section below:
-
-### Integrating with Next.js
-
-For integration with Next.js, refer to the [setup guide](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_with_nextjs_15.md).
-
-### Integrating with Create React App
-
-For integration with Create React App, refer to the [setup guide](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_with_create_react_app.md)
-
-### Integrating with Vite + React
-
-For integration with Vite + React, refer to the [setup guide](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_with_vite+react.md)
-
-### Example of integration
-
-To integrate the Intlayer visual editor into your React project, follow these steps:
-
-- Import the Intlayer editor component into your React application:
-
-  ```tsx fileName="src/App.jsx"
-  import { IntlayerEditorProvider } from "intlayer-editor";
-  import { IntlayerProvider } from "react-intlayer";
-
-  export default function App() {
-    return (
-      <IntlayerProvider>
-        <IntlayerEditorProvider>
-          <IntlayerEditor>{/* Your App content here */}</IntlayerEditor>
-        </IntlayerEditorProvider>
-      </IntlayerProvider>
-    );
-  }
-  ```
-
-- Import the Intlayer editor styles into your Next.js application:
-
-  ```tsx fileName="src/app/[locale]/layout.jsx"
-  import { IntlayerEditorStyles } from "intlayer-editor";
-
-  export default async function RootLayout({ children, params }) {
-    const { locale } = await params;
-    return (
-      <IntlayerClientProvider locale={locale}>
-        <IntlayerEditorProvider>
-          <html lang={locale}>
-            <body className={IntlayerEditorStyles}>{children}</body>
-          </html>
-        </IntlayerEditorProvider>
-      </IntlayerClientProvider>
-    );
-  }
-  ```
-
-## Using the Editor
-
-When the editor is installed, enabled, and started, you can view each field indexed by Intlayer by hovering over your content with your cursor.
-
-![Hovering over content](https://github.com/aymericzip/intlayer/blob/main/docs/assets/intlayer_editor_hover_content.png)
-
-If your content is outlined, you can long-press it to display the edit drawer.
-
-## Doc History
-
-- 5.5.10 - 2025-06-29: Initial history

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

@@ -1,89 +0,0 @@
----
-createdAt: 2025-03-13
-updatedAt: 2025-06-29
-title: Package Documentation | lynx-intlayer
-description: See how to use the lynx-intlayer package
-keywords:
-  - Intlayer
-  - lynx-intlayer
-  - Internationalisation
-  - Documentation
-  - Next.js
-  - JavaScript
-  - React
-slugs:
-  - doc
-  - packages
-  - lynx-intlayer
----
-
-# lynx-intlayer: Internationalise (i18n) a Lynx application
-
-**Intlayer** is a suite of packages designed specifically for JavaScript developers. It is compatible with frameworks like React, React, and Express.js.
-
-**The `lynx-intlayer` package** allows you to internationalise your Vite application. It includes the Metro plugin to set the configuration through environment variables into the [Lynx bundler](https://lynxjs.org/index.html).
-
-## Why Internationalise Your Lynx Application?
-
-Internationalising your Lynx 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 `lynx-intlayer` package works seamlessly with the [`react-intlayer` package](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/packages/react-intlayer/index.md), and the [`intlayer` package](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/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 lynx-intlayer
-```
-
-```bash packageManager="yarn"
-yarn add lynx-intlayer
-```
-
-```bash packageManager="pnpm"
-pnpm add lynx-intlayer
-```
-
-## Example of usage
-
-See an example of how to include the plugins into your vite configuration.
-
-```ts
-// lynx.config.ts
-import { defineConfig } from "@lynx-js/rspeedy";
-import { pluginIntlayerLynx } from "lynx-intlayer/plugin";
-
-export default defineConfig({
-  plugins: [
-    // ... other plugins
-    pluginIntlayerLynx(),
-  ],
-});
-```
-
-## Mastering the internationalisation of your Vite application
-
-Intlayer provides a lot of features to help you internationalise your Vite application.
-
-**To learn more about these features, refer to the [React Internationalisation (i18n) with Intlayer and Lynx](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_with_lynx+react.md) guide for Lynx 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/doc/chat)
-
-## Doc History
-
-- 5.5.10 - 2025-06-29: Initial history
-
-- [Ask your questions to our smart documentation](https://intlayer.org/doc/chat)
-
-## Doc History
-
-- 5.5.10 - 2025-06-29: Init history

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

@@ -1,314 +0,0 @@
----
-createdAt: 2024-08-11
-updatedAt: 2025-06-29
-title: Package Documentation | next-intlayer
-description: See how to use the next-intlayer package
-keywords:
-  - Intlayer
-  - next-intlayer
-  - Internationalisation
-  - Documentation
-  - Next.js
-  - JavaScript
-  - React
-slugs:
-  - doc
-  - packages
-  - next-intlayer
----
-
-# next-intlayer: NPM Package to internationalise (i18n) a Next.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 `next-intlayer` package** allows you to internationalise your Next.js application. It provides context providers and hooks for Next.js internationalisation. Additionally, it includes the Next.js plugin for integrating Intlayer with [Webpack](https://webpack.js.org/) or [Turbopack](https://nextjs.org/docs/app/api-reference/turbopack), as well as middleware for detecting the user's preferred locale, managing cookies, and handling URL redirection.
-
-## Why Internationalise Your Next.js Application?
-
-Internationalising your Next.js 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**: 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 next-intlayer
-```
-
-```bash packageManager="yarn"
-yarn add next-intlayer
-```
-
-```bash packageManager="pnpm"
-pnpm add next-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-GB/configuration.md).
-
-```bash codeFormat="typescript"
-.
-├── intlayer.config.ts
-└── src
-    └── components
-        ├── ClientComponent
-        │   ├── index.content.ts
-        │   └── index.tsx
-        └── ServerComponent
-            ├── index.content.ts
-            └── index.tsx
-```
-
-```bash codeFormat="esm"
-.
-├── intlayer.config.mjs
-└── src
-    └── components
-        ├── ClientComponent
-        │   ├── index.content.mjs
-        │   └── index.mjx
-        └── ServerComponent
-            ├── index.content.mjs
-            └── index.mjx
-```
-
-```bash codeFormat="commonjs"
-.
-├── intlayer.config.cjs
-└── src
-    └── components
-        ├── ClientComponent
-        │   ├── index.content.cjs
-        │   └── index.cjx
-        └── ServerComponent
-            ├── index.content.cjs
-            └── index.cjx
-```
-
-### Declare your content
-
-`next-intlayer` is designed to work with the [`intlayer` package](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/packages/intlayer/index.md). `intlayer` is a package that enables you to declare your content anywhere within your code. It transforms multilingual content declarations into structured dictionaries that integrate seamlessly into your application.
-
-Here is an example of content declaration:
-
-```tsx fileName="src/ClientComponent/index.content.ts" codeFormat="typescript"
-import { t, type Dictionary } from "intlayer";
-
-const clientComponentContent = {
-  key: "client-component",
-  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 clientComponentContent;
-```
-
-```jsx fileName="src/ClientComponent/index.content.mjs" contentDeclarationFormat="esm"
-import { t } from "intlayer";
-
-/** @type {import('intlayer').Dictionary} */
-const clientComponentContent = {
-  key: "client-component",
-  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 clientComponentContent;
-```
-
-```jsx fileName="src/ClientComponent/index.content.cjs" contentDeclarationFormat="commonjs"
-const { t } = require("intlayer");
-
-/** @type {import('intlayer').Dictionary} */
-const clientComponentContent = {
-  key: "client-component",
-  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 = clientComponentContent;
-```
-
-```json fileName="src/ClientComponent/index.content.json" codeFormat="json"
-{
-  "key": "client-component",
-  "content": {
-    "myTranslatedContent": {
-      "nodeType": "translation",
-      "translation": {
-        "en-GB": "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"
-      }
-    }
-  }
-}
-```
-
-### Utilise 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/ClientComponentExample.tsx" codeFormat="typescript"
-"use client";
-
-import type { FC } from "react";
-import { useIntlayer } from "next-intlayer";
-
-export const ClientComponentExample: FC = () => {
-  const { myTranslatedContent } = useIntlayer("client-component"); // Create related content declaration
-
-  return (
-    <div>
-      <p>{myTranslatedContent}</p>
-    </div>
-  );
-};
-```
-
-```jsx {3,6} fileName="src/components/ClientComponentExample.mjx" codeFormat="esm"
-"use client";
-
-import { useIntlayer } from "next-intlayer";
-
-const ClientComponentExample = () => {
-  const { myTranslatedContent } = useIntlayer("client-component"); // Create related content declaration
-
-  return (
-    <div>
-      <p>{myTranslatedContent}</p>
-    </div>
-  );
-};
-```
-
-```jsx {3,6} fileName="src/components/ClientComponentExample.csx" codeFormat="commonjs"
-"use client";
-
-const { useIntlayer } = require("next-intlayer");
-
-const ClientComponentExample = () => {
-  const { myTranslatedContent } = useIntlayer("client-component"); // Create related content declaration
-
-  return (
-    <div>
-      <p>{myTranslatedContent}</p>
-    </div>
-  );
-};
-```
-
-## Mastering the internationalisation of your Next.js application
-
-Intlayer provides a lot of features to help you internationalise your Next.js application. Here are some of the key features:
-
-- **Internationalisation of server components**: Intlayer allows you to internationalise your server components in the same way as your client components. This means that you can use the same content declarations for both client and server components.
-
-```jsx {3,6} fileName="src/components/ClientComponentExample.csx" codeFormat="commonjs"
-"use client";
-
-const { useIntlayer } = require("next-intlayer");
-
-const ClientComponentExample = () => {
-  const { myTranslatedContent } = useIntlayer("client-component"); // Create related content declaration
-
-  return (
-    <div>
-      <p>{myTranslatedContent}</p>
-    </div>
-  );
-};
-```
-
-## Mastering the internationalisation of your Next.js application
-
-Intlayer provides a lot of features to help you internationalise your Next.js application. Here are some of the key features:
-
-- **Internationalisation of server components**: Intlayer allows you to internationalise your server components in the same way as your client components. This means that you can use the same content declarations for both client and server components.
-- **Middleware for Locale Detection**: Intlayer provides middleware to detect the user's preferred locale. This middleware is used to detect the user's preferred locale and redirect them to the appropriate URL as specified in the [configuration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/configuration.md).
-- **Internationalisation of metadata**: Intlayer provides a way to internationalise your metadata, such as the title of your page, using the `generateMetadata` function provided by Next.js. You can use the `getTranslation` function to translate your metadata.
-- **Internationalisation of sitemap.xml and robots.txt**: Intlayer allows you to internationalise your sitemap.xml and robots.txt files. You can use the `getMultilingualUrls` function to generate multilingual URLs for your sitemap.
-- **Internationalisation of URLs**: Intlayer allows you to internationalise your URLs by using the `getMultilingualUrls` function. This function generates multilingual URLs for your sitemap.
-
-**To learn more about these features, refer to the [Next.js Internationalisation (i18n) with Intlayer and Next.js 15 App Router](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_nextjs_15.md) guide.**
-
-## Functions provided by `next-intlayer` package
-
-- **Internationalisation of sitemap.xml and robots.txt**: Intlayer allows you to internationalise your sitemap.xml and robots.txt files. You can use the `getMultilingualUrls` function to generate multilingual URLs for your sitemap.
-- **Internationalisation of URLs**: Intlayer allows you to internationalise your URLs by using the `getMultilingualUrls` function. This function generates multilingual URLs for your sitemap.
-
-**To learn more about these features, refer to the [Next.js Internationalisation (i18n) with Intlayer and Next.js 15 App Router](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_nextjs_15.md) guide.**
-
-## Functions provided by `next-intlayer` package
-
-The `next-intlayer` package also provides some functions to help you to internationalise your application.
-
-- [`t()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/next-intlayer/t.md)
-- [`useIntlayer()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/next-intlayer/useIntlayer.md)
-- [`useDictionary()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/next-intlayer/useDictionary.md)
-- [`useLocale()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/next-intlayer/useLocale.md)
-
-## Doc History
-
-- 5.5.10 - 2025-06-29: Init history

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

@@ -1,53 +0,0 @@
----
-createdAt: 2025-06-18
-updatedAt: 2025-06-29
-title: Package Documentation | nuxt-intlayer
-description: See how to use the nuxt-intlayer package
-keywords:
-  - Intlayer
-  - nuxt-intlayer
-  - Internationalisation
-  - Documentation
-  - JavaScript
-  - Nuxt
-slugs:
-  - doc
-  - packages
-  - nuxt-intlayer
----
-
-# nuxt-intlayer: NPM Package to internationalise (i18n) a 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 `nuxt-intlayer` package** allows you to internationalise your Vue application. It provides context providers and hooks for Vue internationalisation.
-
-## Why Internationalise Your Vue Application?
-
-Internationalising 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 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 accurate and free from errors.
-- **Integrated Content Files**: Keep your translations close to their respective components, improving maintainability and clarity.
-
-## Installation
-
-Install the required package using your preferred package manager:
-
-```bash packageManager="npm"
-npm install nuxt-intlayer
-```
-
-```bash packageManager="yarn"
-yarn add nuxt-intlayer
-```
-
-```bash packageManager="pnpm"
-pnpm add nuxt-intlayer
-```
-
-## Doc History
-
-- 5.5.10 - 2025-06-29: Initial history

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

@@ -1,53 +0,0 @@
----
-createdAt: 2025-04-18
-updatedAt: 2025-06-29
-title: Package Documentation | preact-intlayer
-description: See how to use the preact-intlayer package
-keywords:
-  - Intlayer
-  - preact-intlayer
-  - Internationalisation
-  - Documentation
-  - JavaScript
-  - Preact
-slugs:
-  - doc
-  - packages
-  - preact-intlayer
----
-
-# preact-intlayer: NPM Package to internationalise (i18n) a Preact application
-
-**Intlayer** is a suite of packages designed specifically for JavaScript developers. It is compatible with frameworks like Preact, Preact, and Express.js.
-
-**The `preact-intlayer` package** allows you to internationalise your Preact application. It provides context providers and hooks for Preact internationalisation.
-
-## Why Internationalise Your Preact Application?
-
-Internationalising your Preact 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, enhancing maintainability and clarity.
-
-## Installation
-
-Install the necessary package using your preferred package manager:
-
-```bash packageManager="npm"
-npm install preact-intlayer
-```
-
-```bash packageManager="yarn"
-yarn add preact-intlayer
-```
-
-```bash packageManager="pnpm"
-pnpm add preact-intlayer
-```
-
-## Doc History
-
-- 5.5.10 - 2025-06-29: Initial history