@intlayer/docs 8.7.7 → 8.7.8-canary.0

package/docs/uk/interest_of_intlayer.md

@@ -118,7 +118,7 @@ Intlayer було створено, щоб вирішити поширену п
         └── index.tsx
 ```
 
-```tsx fileName="./components/MyComponent/index.content.ts" codeFormat="typescript"
+```tsx fileName="./components/MyComponent/index.content.ts" codeFormat={["typescript", "esm", "commonjs"]}
 import { t, type Dictionary } from "intlayer";
 
 const componentExampleContent = {
@@ -137,45 +137,7 @@ const componentExampleContent = {
 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({
-      uk: "Привіт, світ",
-      en: "Hello World",
-      es: "Hola Mundo",
-      fr: "Bonjour le monde",
-    }),
-  },
-};
-
-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({
-      uk: "Привіт, світ",
-      en: "Hello World",
-      es: "Hola Mundo",
-      fr: "Bonjour le monde",
-    }),
-  },
-};
-
-module.exports = componentExampleContent;
-```
-
-```tsx fileName="./components/MyComponent/index.tsx" codeFormat="typescript"
+```tsx fileName="./components/MyComponent/index.tsx" codeFormat={["typescript", "esm"]}
 import { useIntlayer } from "react-intlayer";
 
 export const ComponentExample = () => {
@@ -185,26 +147,6 @@ export const ComponentExample = () => {
 };
 ```
 
-```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>;
-};
-```
-
 Цей підхід дозволяє вам:
 
 1. **Збільшити швидкість розробки**

package/docs/uk/intlayer_CMS.md

@@ -99,7 +99,7 @@ bun x intlayer login
 
 У файлі конфігурації Intlayer ви можете налаштувати параметри CMS:
 
-```typescript fileName="intlayer.config.ts" codeFormat="typescript"
+```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
 import type { IntlayerConfig } from "intlayer";
 
 const config: IntlayerConfig = {
@@ -150,106 +150,6 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
-```javascript fileName="intlayer.config.mjs" codeFormat="esm"
-/** @type {import('intlayer').IntlayerConfig} */
-const config = {
-  // ... інші налаштування конфігурації
-  editor: {
-    /**
-     * Обов'язково
-     *
-     * URL застосунку.
-     * Це URL, на який спрямований візуальний редактор.
-     */
-    applicationURL: process.env.INTLAYER_APPLICATION_URL,
-
-    /**
-     * Обов'язково
-     *
-     * Client ID та client secret необхідні для увімкнення редактора.
-     * Вони дозволяють ідентифікувати користувача, який редагує контент.
-     * Їх можна отримати, створивши нового клієнта в Intlayer Dashboard - Projects (https://app.intlayer.org/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,
-
-    /**
-     * Необов'язково
-     *
-     * Якщо ви розгортаєте Intlayer CMS самостійно, ви можете вказати URL CMS.
-     *
-     * URL Intlayer CMS.
-     * За замовчуванням встановлено https://intlayer.org
-     */
-    cmsURL: process.env.INTLAYER_CMS_URL,
-
-    /**
-     * Необов'язково
-     *
-     * Якщо ви самостійно розгортаєте Intlayer CMS, ви можете вказати URL бекенду.
-     *
-     * URL Intlayer CMS.
-     * За замовчуванням встановлено на 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 = {
-  // ... інші параметри конфігурації
-  editor: {
-    /**
-     * Обов'язково
-     *
-     * URL додатка.
-     * Це URL, на який спрямований візуальний редактор.
-     */
-    applicationURL: process.env.INTLAYER_APPLICATION_URL,
-
-    /**
-     * Обов'язково
-     *
-     * Client ID та client secret необхідні для увімкнення редактора.
-     * Вони дозволяють ідентифікувати користувача, який редагує вміст.
-     * Їх можна отримати, створивши нового клієнта в Intlayer Dashboard - Projects (https://app.intlayer.org/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,
-
-    /**
-     * Необов'язково
-     *
-     * Якщо ви самостійно розгортаєте Intlayer CMS, ви можете вказати URL CMS.
-     *
-     * URL Intlayer CMS.
-     * За замовчуванням встановлено https://intlayer.org
-     */
-    cmsURL: process.env.INTLAYER_CMS_URL,
-
-    /**
-     * Необов'язково
-     *
-     * Якщо ви розгортаєте Intlayer CMS самостійно, ви можете вказати URL бекенду.
-     *
-     * URL Intlayer CMS.
-     * За замовчуванням встановлено https://back.intlayer.org
-     */
-    backendURL: process.env.INTLAYER_BACKEND_URL,
-  },
-};
-
-module.exports = config;
-```
-
 > Якщо у вас немає client ID та client secret, ви можете отримати їх, створивши нового клієнта в [Intlayer Dashboard - Projects](https://app.intlayer.org/projects).
 
 > Щоб побачити всі доступні параметри, зверніться до [документації з конфігурації](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/configuration.md).
@@ -298,7 +198,7 @@ Live Sync дозволяє вашому застосунку відобража
 
 Увімкніть Live Sync, оновивши конфігурацію Intlayer:
 
-```typescript fileName="intlayer.config.ts" codeFormat="typescript"
+```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
 import type { IntlayerConfig } from "intlayer";
 
 const config: IntlayerConfig = {
@@ -335,92 +235,6 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
-```javascript fileName="intlayer.config.mjs" codeFormat="esm"
-/** @type {import('intlayer').IntlayerConfig} */
-const config = {
-  // ... інші налаштування конфігурації
-  editor: {
-    /**
-     * Вмикає гаряче перезавантаження конфігурацій локалей при виявленні змін.
-     * Наприклад, коли словник додається або оновлюється, додаток оновлює
-     * вміст, відображений на сторінці.
-     *
-     * Оскільки гаряче перезавантаження (hot reloading) вимагає безперервного з'єднання з сервером, воно
-     * доступне лише клієнтам з планом `enterprise`.
-     *
-     * За замовчуванням: false
-     */
-    liveSync: true,
-  },
-  dictionary: {
-    /**
-     * Контролює, як імпортуються словники:
-     *
-     * - "live": Словники отримуються динамічно за допомогою Live Sync API.
-     *   Замінює useIntlayer на useDictionaryDynamic.
-     *
-     * Примітка: У live-режимі використовується Live Sync API для отримання словників. Якщо виклик API
-     * не вдається, словники імпортуються динамічно.
-     * Примітка: Тільки словники з віддаленим вмістом і прапором "live" використовують live-режим.
-     * Інші використовують динамічний режим для підвищення продуктивності.
-     */
-    importMode: "fetch",
-  },
-};
-
-export default config;
-```
-
-```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
-/** @type {import('intlayer').IntlayerConfig} */
-const config = {
-  // ... інші налаштування конфігурації
-  editor: {
-    /**
-     * Увімкнення гарячого перезавантаження (hot reloading) конфігурацій локалей при виявленні змін.
-     * Наприклад, коли словник додається або оновлюється, додаток оновлює
-     * вміст, що відображається на сторінці.
-     *
-     * Оскільки гаряче перезавантаження потребує постійного з'єднання із сервером, воно
-     * доступне лише для клієнтів плану `enterprise`.
-     *
-     * За замовчуванням: false
-     */
-    liveSync: true,
-
-    /**
-     * Порт сервера Live Sync.
-     *
-     * За замовчуванням: 4000
-     */
-    liveSyncPort: 4000,
-
-    /**
-     * URL сервера Live Sync.
-     *
-     * За замовчуванням: http://localhost:{liveSyncPort}
-     */
-    liveSyncURL: "https://live.example.com",
-  },
-  dictionary: {
-    /**
-     * Керує тим, як імпортуються словники:
-     *
-     * - "live": словники завантажуються динамічно за допомогою Live Sync API.
-     *   Замінює useIntlayer на useDictionaryDynamic.
-     *
-     * Примітка: режим live використовує Live Sync API для отримання словників. Якщо виклик API
-     * зазнає невдачі, словники імпортуються динамічно.
-     * Примітка: режим live використовується лише для словників з віддаленим вмістом і прапорцем "live".
-     * Інші використовують динамічний режим заради продуктивності.
-     */
-    importMode: "fetch",
-  },
-};
-
-module.exports = config;
-```
-
 Запустіть Live Sync сервер, щоб обгорнути ваш додаток:
 
 Приклад із окремим (standalone) сервером:
@@ -491,7 +305,7 @@ Live Sync-сервер обгортає ваш додаток і автомат
 
 Увімкніть оптимізацію, щоб Intlayer застосовував трансформації Live import під час розробки:
 
-```typescript fileName="intlayer.config.ts" codeFormat="typescript"
+```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
 import type { IntlayerConfig } from "intlayer";
 
 const config: IntlayerConfig = {
@@ -511,44 +325,6 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
-```javascript fileName="intlayer.config.mjs" codeFormat="esm"
-/** @type {import('intlayer').IntlayerConfig} */
-const config = {
-  editor: {
-    applicationURL: "http://localhost:5173",
-    liveSyncURL: "http://localhost:4000",
-    liveSync: true,
-  },
-  dictionary: {
-    importMode: "fetch",
-  },
-  build: {
-    optimize: true,
-  },
-};
-
-export default config;
-```
-
-```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
-/** @type {import('intlayer').IntlayerConfig} */
-const config = {
-  editor: {
-    applicationURL: "http://localhost:5173",
-    liveSyncURL: "http://localhost:4000",
-    liveSync: true,
-  },
-  dictionary: {
-    importMode: "fetch",
-  },
-  build: {
-    optimize: true,
-  },
-};
-
-module.exports = config;
-```
-
 Ця конфігурація обгортає ваш dev-сервер Live Sync-сервером, завантажує віддалені словники при старті та передає оновлення з CMS через SSE. Оновіть сторінку, щоб побачити зміни.
 
 Примітки та обмеження:

package/docs/uk/intlayer_visual_editor.md

@@ -107,7 +107,7 @@ bun add intlayer-editor --dev
 
 У файлі конфігурації Intlayer ви можете налаштувати параметри редактора:
 
-```typescript fileName="intlayer.config.ts" codeFormat="typescript"
+```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
 import type { IntlayerConfig } from "intlayer";
 
 const config: IntlayerConfig = {
@@ -144,77 +144,6 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
-```javascript fileName="intlayer.config.mjs" codeFormat="esm"
-/** @type {import('intlayer').IntlayerConfig} */
-const config = {
-  // ... інші налаштування конфігурації
-  editor: {
-    /**
-     * Обов'язково
-     * URL застосунку.
-     * Це URL, на який спрямований візуальний редактор.
-     * Приклад: 'http://localhost:3000'
-     */
-    applicationURL: process.env.INTLAYER_APPLICATION_URL,
-    /**
-     * Необов'язково
-     * Значення за замовчуванням, `true`. Якщо `false`, редактор неактивний і до нього неможливо отримати доступ.
-     * Може використовуватися для відключення редактора в певних оточеннях з міркувань безпеки, наприклад у production.
-     */
-    enabled: process.env.INTLAYER_ENABLED,
-    /**
-     * Необов'язково
-     * Значення за замовчуванням, `8000`.
-     * Порт, який використовує сервер візуального редактора.
-     */
-    port: process.env.INTLAYER_PORT,
-    /**
-     * Необов'язково
-     * Значення за замовчуванням, "http://localhost:8000"
-     * URL сервера редактора, до якого звертається застосунок. Використовується для обмеження origin-ів, які можуть взаємодіяти із застосунком з міркувань безпеки. Якщо встановлено `'*'`, редактор доступний з будь-якого origin. Має бути задано, якщо змінено порт або якщо редактор розміщений на іншому домені.
-     */
-    editorURL: process.env.INTLAYER_EDITOR_URL,
-  },
-};
-
-export default config;
-```
-
-```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
-/** @type {import('intlayer').IntlayerConfig} */
-const config = {
-  // ... other configuration settings
-  editor: {
-    /**
-     * Обов'язково
-     * URL застосунку.
-     * Це URL, на який спрямований візуальний редактор.
-     */
-    applicationURL: process.env.INTLAYER_APPLICATION_URL,
-    /**
-     * Необов'язковий
-     * За замовчуванням `8000`.
-     * Порт сервера редактора.
-     */
-    port: process.env.INTLAYER_PORT,
-    /**
-     * Необов'язково
-     * За замовчуванням "http://localhost:8000"
-     * URL сервера редактора.
-     */
-    editorURL: process.env.INTLAYER_EDITOR_URL,
-    /**
-     * Необов'язково
-     * За замовчуванням `true`. Якщо `false`, редактор неактивний і до нього неможливо отримати доступ.
-     * Можна використати для вимкнення редактора в певних середовищах з міркувань безпеки, наприклад у production.
-     */
-    enabled: process.env.INTLAYER_ENABLED,
-  },
-};
-
-module.exports = config;
-```
-
 > Щоб переглянути всі доступні параметри, зверніться до [документації з конфігурації](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/configuration.md).
 
 ## Використання редактора

package/docs/uk/intlayer_with_adonisjs.md

@@ -42,7 +42,7 @@ history:
 ## Початок роботи
 
 <iframe
-  src="https://stackblitz.com/github/aymericzip/intlayer-adonis-template?embed=1&ctl=1&file=intlayer.config.ts"
+  src="https://ide.intlayer.org/aymericzip/intlayer-adonis-template?file=intlayer.config.ts"
   className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
   title="Demo CodeSandbox - How to Internationalize your application using Intlayer"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
@@ -79,7 +79,7 @@ bun x intlayer init
 
 Налаштуйте параметри інтернаціоналізації, створивши `intlayer.config.ts` у корені вашого проєкту:
 
-```typescript fileName="intlayer.config.ts"  codeFormat="typescript"
+```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
 import { Locales, type IntlayerConfig } from "intlayer";
 
 const config: IntlayerConfig = {
@@ -111,77 +111,11 @@ const config: IntlayerConfig = {
 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.RUSSIAN,
-      Locales.JAPANESE,
-      Locales.FRENCH,
-      Locales.KOREAN,
-      Locales.CHINESE,
-      Locales.SPANISH,
-      Locales.GERMAN,
-      Locales.ARABIC,
-      Locales.ITALIAN,
-      Locales.ENGLISH_UNITED_KINGDOM,
-      Locales.PORTUGUESE,
-      Locales.HINDI,
-      Locales.TURKISH,
-      Locales.POLISH,
-      Locales.INDONESIAN,
-      Locales.VIETNAMESE,
-      Locales.UKRAINIAN,
-    ],
-    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.RUSSIAN,
-      Locales.JAPANESE,
-      Locales.FRENCH,
-      Locales.KOREAN,
-      Locales.CHINESE,
-      Locales.SPANISH,
-      Locales.GERMAN,
-      Locales.ARABIC,
-      Locales.ITALIAN,
-      Locales.ENGLISH_UNITED_KINGDOM,
-      Locales.PORTUGUESE,
-      Locales.HINDI,
-      Locales.TURKISH,
-      Locales.POLISH,
-      Locales.INDONESIAN,
-      Locales.VIETNAMESE,
-      Locales.UKRAINIAN,
-    ],
-    defaultLocale: Locales.ENGLISH,
-  },
-};
-
-module.exports = config;
-```
-
 ### Оголошення контенту
 
 Створюйте та керуйте оголошеннями контенту для зберігання перекладів:
 
-```typescript fileName="app/index.content.ts" contentDeclarationFormat="typescript"
+```typescript fileName="app/index.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
 import { t, type Dictionary } from "intlayer";
 
 const indexContent = {
@@ -200,46 +134,6 @@ const indexContent = {
 export default indexContent;
 ```
 
-```javascript fileName="app/index.content.mjs" contentDeclarationFormat="esm"
-import { t } from "intlayer";
-
-/** @type {import('intlayer').Dictionary} */
-const indexContent = {
-  key: "index",
-  content: {
-    exampleOfContent: t({
-      en: "Example of returned content in English",
-      fr: "Exemple de contenu renvoyé en français",
-      uk: "Приклад отриманого контенту українською мовою",
-      "es-ES": "Ejemplo de contenido devuelto en español (España)",
-      "es-MX": "Ejemplo de contenido devuelto en español (México)",
-    }),
-  },
-};
-
-export default indexContent;
-```
-
-```javascript fileName="app/index.content.cjs" contentDeclarationFormat="commonjs"
-const { t } = require("intlayer");
-
-/** @type {import('intlayer').Dictionary} */
-const indexContent = {
-  key: "index",
-  content: {
-    exampleOfContent: t({
-      en: "Example of returned content in English",
-      fr: "Exemple de contenu renvoyé en français",
-      uk: "Приклад отриманого контенту українською мовою",
-      "es-ES": "Ejemplo de contenido devuelto en español (España)",
-      "es-MX": "Ejemplo de contenido devuelto en español (México)",
-    }),
-  },
-};
-
-module.exports = indexContent;
-```
-
 ```json fileName="app/index.content.json" contentDeclarationFormat="json"
 {
   "$schema": "https://intlayer.org/schema.json",

package/docs/uk/intlayer_with_analog.md

@@ -15,6 +15,7 @@ slugs:
   - environment
   - analog
 applicationTemplate: https://github.com/aymericzip/intlayer-analog-template
+applicationShowcase: https://intlayer-analog-template.vercel.app
 history:
   - version: 8.0.4
     date: 2026-01-26
@@ -23,14 +24,31 @@ history:
 
 # Перекладіть свій додаток Analog (Angular) за допомогою Intlayer | Інтернаціоналізація (i18n)
 
+<Tabs defaultTab="code">
+  <Tab label="Код" value="code">
+
 <iframe
-  src="https://stackblitz.com/github/aymericzip/intlayer-analog-template?embed=1&ctl=1&file=intlayer.config.ts"
+  src="https://ide.intlayer.org/aymericzip/intlayer-analog-template?file=intlayer.config.ts"
   className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
   title="Demo CodeSandbox - How to Internationalize your application using Intlayer"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />
 
+  </Tab>
+  <Tab label="Демо" value="demo">
+
+<iframe
+  src="https://intlayer-analog-template.vercel.app"
+  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
+  title="Демо — intlayer-analog-template"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
+  </Tab>
+</Tabs>
+
 ## Зміст
 
 <TOC/>
@@ -90,7 +108,7 @@ bun x intlayer init
 
 Створіть файл конфігурації для налаштування мов вашого додатка:
 
-```typescript fileName="intlayer.config.ts" codeFormat="typescript"
+```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
 import { Locales, type IntlayerConfig } from "intlayer";
 
 const config: IntlayerConfig = {
@@ -108,44 +126,6 @@ const config: IntlayerConfig = {
 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;
-```
-
 > Через цей файл конфігурації ви можете налаштувати локалізовані URL-адреси, перенаправлення через middleware, назви кукі, розташування та розширення ваших декларацій вмісту, вимкнути логи Intlayer у консолі та багато іншого. Повний список доступних параметрів дивіться у [документації з конфігурації](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/configuration.md).
 
 ### Крок 3: Інтеграція Intlayer у вашу конфігурацію Vite
@@ -174,7 +154,7 @@ export default defineConfig(() => ({
 
 Створюйте та керуйте своїми деклараціями вмісту для зберігання перекладів:
 
-```tsx fileName="src/app/app.content.ts" contentDeclarationFormat="typescript"
+```tsx fileName="src/app/app.content.ts" contentDeclarationFormat=["typescript", "esm", "cjs"]
 import { t, type Dictionary } from "intlayer";
 
 const appContent = {