@intlayer/docs 8.7.6 → 8.7.8-canary.0

package/docs/pl/intlayer_CMS.md

@@ -99,7 +99,7 @@ Spowoduje to otwarcie domyślnej przeglądarki w celu ukończenia procesu uwierz
 
 W pliku konfiguracyjnym Intlayer możesz dostosować ustawienia 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 = {
-  // ... inne ustawienia konfiguracyjne
-  editor: {
-    /**
-     * Wymagane
-     *
-     * URL aplikacji.
-     * To jest URL, na który kierowany jest wizualny edytor.
-     */
-    applicationURL: process.env.INTLAYER_APPLICATION_URL,
-
-    /**
-     * Wymagane
-     *
-     * Client ID oraz client secret są wymagane do włączenia edytora.
-     * Pozwalają one na identyfikację użytkownika edytującego zawartość.
-     * Można je uzyskać tworząc nowego klienta w 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,
-
-    /**
-     * Opcjonalne
-     *
-     * W przypadku, gdy hostujesz Intlayer CMS samodzielnie, możesz ustawić URL CMS.
-     *
-     * URL Intlayer CMS.
-     * Domyślnie ustawiony na https://intlayer.org
-     */
-    cmsURL: process.env.INTLAYER_CMS_URL,
-
-    /**
-     * Opcjonalne
-     *
-     * W przypadku samodzielnego hostowania Intlayer CMS, możesz ustawić URL backendu.
-     *
-     * URL backendu Intlayer CMS.
-     * Domyślnie ustawiony na 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 = {
-  // ... inne ustawienia konfiguracyjne
-  editor: {
-    /**
-     * Wymagane
-     *
-     * URL aplikacji.
-     * To jest URL, na który kierowany jest wizualny edytor.
-     */
-    applicationURL: process.env.INTLAYER_APPLICATION_URL,
-
-    /**
-     * Wymagane
-     *
-     * Client ID oraz client secret są wymagane do włączenia edytora.
-     * Pozwalają one na identyfikację użytkownika, który edytuje zawartość.
-     * Można je uzyskać, tworząc nowego klienta w 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,
-
-    /**
-     * Opcjonalne
-     *
-     * W przypadku samodzielnego hostowania Intlayer CMS, możesz ustawić URL CMS.
-     *
-     * URL Intlayer CMS.
-     * Domyślnie ustawiony na https://intlayer.org
-     */
-    cmsURL: process.env.INTLAYER_CMS_URL,
-
-    /**
-     * Opcjonalne
-     *
-     * W przypadku samodzielnego hostowania Intlayer CMS, możesz ustawić URL backendu.
-     *
-     * URL backendu Intlayer CMS.
-     * Domyślnie ustawiony na https://back.intlayer.org
-     */
-    backendURL: process.env.INTLAYER_BACKEND_URL,
-  },
-};
-
-module.exports = config;
-```
-
 > Jeśli nie masz client ID i client secret, możesz je uzyskać, tworząc nowego klienta w [Intlayer Dashboard - Projects](https://app.intlayer.org/projects).
 
 > Aby zobaczyć wszystkie dostępne parametry, zapoznaj się z [dokumentacją konfiguracji](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/configuration.md).
@@ -298,7 +198,7 @@ Synchronizacja na żywo pozwala Twojej aplikacji odzwierciedlać zmiany treści
 
 Włącz synchronizację na żywo, aktualizując konfigurację 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 = {
-  // ... inne ustawienia konfiguracyjne
-  editor: {
-    /**
-     * Włącza hot reloading konfiguracji lokalizacji, gdy wykryte zostaną zmiany.
-     * Na przykład, gdy słownik zostanie dodany lub zaktualizowany, aplikacja aktualizuje
-     * zawartość wyświetlaną na stronie.
-     *
-     * Ponieważ hot reloading wymaga ciągłego połączenia z serwerem, jest on
-     * dostępny tylko dla klientów planu `enterprise`.
-     *
-     * Domyślnie: false
-     */
-    liveSync: true,
-  },
-  dictionary: {
-    /**
-     * Kontroluje sposób importowania słowników:
-     *
-     * - "live": Słowniki są pobierane dynamicznie za pomocą API Live Sync.
-     *   Zastępuje useIntlayer funkcją useDictionaryDynamic.
-     *
-     * Uwaga: Tryb live korzysta z API Live Sync do pobierania słowników. Jeśli wywołanie API
-     * zakończy się niepowodzeniem, słowniki są importowane dynamicznie.
-     * Uwaga: Tryb live jest używany tylko dla słowników zdalnych i oznaczonych flagą "live".
-     * Inne używają trybu dynamicznego dla wydajności.
-     */
-    importMode: "fetch",
-  },
-};
-
-export default config;
-```
-
-```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
-/** @type {import('intlayer').IntlayerConfig} */
-const config = {
-  // ... inne ustawienia konfiguracyjne
-  editor: {
-    /**
-     * Włącza hot reloading konfiguracji lokalizacji, gdy wykryte zostaną zmiany.
-     * Na przykład, gdy słownik zostanie dodany lub zaktualizowany, aplikacja aktualizuje
-     * zawartość wyświetlaną na stronie.
-     *
-     * Ponieważ hot reloading wymaga ciągłego połączenia z serwerem, jest on
-     * dostępny tylko dla klientów planu `enterprise`.
-     *
-     * Domyślnie: false
-     */
-    liveSync: true,
-
-    /**
-     * Port serwera Live Sync.
-     *
-     * Domyślnie: 4000
-     */
-    liveSyncPort: 4000,
-
-    /**
-     * URL serwera Live Sync.
-     *
-     * Domyślnie: http://localhost:{liveSyncPort}
-     */
-    liveSyncURL: "https://live.example.com",
-  },
-  dictionary: {
-    /**
-     * Kontroluje sposób importowania słowników:
-     *
-     * - "live": Słowniki są pobierane dynamicznie za pomocą API Live Sync.
-     *   Zastępuje useIntlayer funkcją useDictionaryDynamic.
-     *
-     * Uwaga: Tryb live korzysta z API Live Sync do pobierania słowników. Jeśli wywołanie API
-     * się nie powiedzie, słowniki są importowane dynamicznie.
-     * Uwaga: Tryb live jest używany tylko dla słowników zdalnych i oznaczonych flagą "live".
-     * Pozostałe używają trybu dynamicznego dla wydajności.
-     */
-    importMode: "fetch",
-  },
-};
-
-module.exports = config;
-```
-
 Uruchom serwer Live Sync, aby otoczyć swoją aplikację:
 
 Przykład użycia samodzielnego serwera:
@@ -491,7 +305,7 @@ Jak to działa:
 
 Włącz optymalizację, aby Intlayer stosował transformacje importu Live podczas developmentu:
 
-```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;
-```
-
 To ustawienie owija Twój serwer deweloperski serwerem Live Sync, pobiera zdalne słowniki podczas uruchamiania i przesyła aktualizacje z CMS za pomocą SSE. Odśwież stronę, aby zobaczyć zmiany.
 
 Uwagi i ograniczenia:

package/docs/pl/intlayer_visual_editor.md

@@ -107,7 +107,7 @@ Dzięki flagowi `--with` możesz uruchomić edytor równolegle z innym polecenie
 
 W pliku konfiguracyjnym Intlayer możesz dostosować ustawienia edytora:
 
-```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 = {
-  // ... inne ustawienia konfiguracyjne
-  editor: {
-    /**
-     * Wymagane
-     * URL aplikacji.
-     * To jest URL, na który skierowany jest wizualny edytor.
-     * Przykład: 'http://localhost:3000'
-     */
-    applicationURL: process.env.INTLAYER_APPLICATION_URL,
-    /**
-     * Opcjonalne
-     * Domyślnie `true`. Jeśli `false`, edytor jest nieaktywny i nie można uzyskać do niego dostępu.
-     * Może być używane do wyłączenia edytora w określonych środowiskach ze względów bezpieczeństwa, takich jak produkcja.
-     */
-    enabled: process.env.INTLAYER_ENABLED,
-    /**
-     * Opcjonalne
-     * Domyślnie `8000`.
-     * Port używany przez serwer wizualnego edytora.
-     */
-    port: process.env.INTLAYER_PORT,
-    /**
-     * Opcjonalne
-     * Domyślnie "http://localhost:8000"
-     * URL serwera edytora, do którego można dotrzeć z aplikacji. Używany do ograniczenia źródeł, które mogą wchodzić w interakcję z aplikacją ze względów bezpieczeństwa. Jeśli ustawione na `'*'`, edytor jest dostępny z dowolnego źródła. Powinno być ustawione, jeśli zmieniono port lub jeśli edytor jest hostowany na innej domenie.
-     */
-    editorURL: process.env.INTLAYER_EDITOR_URL,
-  },
-};
-
-export default config;
-```
-
-```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
-/** @type {import('intlayer').IntlayerConfig} */
-const config = {
-  // ... inne ustawienia konfiguracyjne
-  editor: {
-    /**
-     * Wymagane
-     * URL aplikacji.
-     * To jest URL, na który skierowany jest wizualny edytor.
-     */
-    applicationURL: process.env.INTLAYER_APPLICATION_URL,
-    /**
-     * Opcjonalne
-     * Domyślnie `8000`.
-     * Port serwera edytora.
-     */
-    port: process.env.INTLAYER_PORT,
-    /**
-     * Opcjonalne
-     * Domyślnie "http://localhost:8000"
-     * URL serwera edytora.
-     */
-    editorURL: process.env.INTLAYER_EDITOR_URL,
-    /**
-     * Opcjonalne
-     * Domyślnie `true`. Jeśli `false`, edytor jest nieaktywny i nie można go używać.
-     * Może być używane do wyłączenia edytora w określonych środowiskach ze względów bezpieczeństwa, takich jak produkcja.
-     */
-    enabled: process.env.INTLAYER_ENABLED,
-  },
-};
-
-module.exports = config;
-```
-
 > Aby zobaczyć wszystkie dostępne parametry, zapoznaj się z [dokumentacją konfiguracji](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/configuration.md).
 
 ## Używanie edytora

package/docs/pl/intlayer_with_adonisjs.md

@@ -42,7 +42,7 @@ Umiędzynarodawiając backend, Twoja aplikacja nie tylko szanuje różnice kultu
 ## Pierwsze kroki
 
 <iframe
-  src="https://stackblitz.com/github/aymericzip/intlayer-adonisjs-template?embed=1&ctl=1&file=intlayer.config.ts"
+  src="https://ide.intlayer.org/aymericzip/intlayer-adonisjs-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
 
 Skonfiguruj ustawienia międzynarodowienia, tworząc plik `intlayer.config.ts` w głównym katalogu projektu:
 
-```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;
-```
-
 ### Deklarowanie treści
 
 Twórz deklaracje treści i zarządzaj nimi, aby przechowywać tłumaczenia:
 
-```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",
-      pl: "Przykład treści zwróconej w języku polskim",
-      "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",
-      pl: "Przykład treści zwróconej w języku polskim",
-      "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/pl/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:
 
 # Przetłumacz swoją aplikację Analog (Angular) za pomocą Intlayer | Internacjonalizacja (i18n)
 
+<Tabs defaultTab="code">
+  <Tab label="Kod" 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="Demo" 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="Demo — intlayer-analog-template"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
+  </Tab>
+</Tabs>
+
 ## Spis treści
 
 <TOC/>
@@ -90,7 +108,7 @@ bun x intlayer init
 
 Utwórz plik konfiguracyjny, aby skonfigurować języki swojej aplikacji:
 
-```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,
-      // Twoje inne języki
-    ],
-    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,
-      // Twoje inne języki
-    ],
-    defaultLocale: Locales.ENGLISH,
-  },
-};
-
-module.exports = config;
-```
-
 > Za pomocą tego pliku konfiguracyjnego możesz ustawić zlokalizowane adresy URL, przekierowania middleware, nazwy ciasteczek, lokalizację i rozszerzenie deklaracji treści, wyłączyć logi Intlayer w konsoli i wiele więcej. Pełną listę dostępnych parametrów znajdziesz w [dokumentacji konfiguracji](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/configuration.md).
 
 ### Krok 3: Zintegruj Intlayer w konfiguracji Vite
@@ -174,7 +154,7 @@ export default defineConfig(() => ({
 
 Twórz i zarządzaj deklaracjami treści, aby przechowywać tłumaczenia:
 
-```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 = {

package/docs/pl/intlayer_with_angular.md

@@ -14,6 +14,7 @@ slugs:
   - environment
   - angular
 applicationTemplate: https://github.com/aymericzip/intlayer-angular-template
+applicationShowcase: https://intlayer-angular-template.vercel.app
 history:
   - version: 8.0.0
     date: 2025-12-30
@@ -48,13 +49,24 @@ Z Intlayer możesz:
   <Tab label="Kod" value="code">
 
 <iframe
-  src="https://stackblitz.com/github/aymericzip/intlayer-angular-template?embed=1&ctl=1&file=intlayer.config.ts"
+  src="https://ide.intlayer.org/aymericzip/intlayer-angular-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 - Jak umiędzynarodowić swoją aplikację za pomocą Intlayer"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />
 
+  </Tab>
+  <Tab label="Demo" value="demo">
+
+<iframe
+  src="https://intlayer-angular-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="Demo — intlayer-angular-template"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
   </Tab>
 </Tabs>
 
@@ -102,7 +114,7 @@ bun x intlayer init
 
 Utwórz plik konfiguracyjny, aby ustawić języki swojej aplikacji:
 
-```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 = {
@@ -120,44 +132,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,
-      // Twoje pozostałe języki
-    ],
-    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,
-      // Twoje pozostałe języki
-    ],
-    defaultLocale: Locales.ENGLISH,
-  },
-};
-
-module.exports = config;
-```
-
 > Poprzez ten plik konfiguracyjny możesz ustawić zlokalizowane adresy URL, przekierowania middleware, nazwy ciasteczek, lokalizację i rozszerzenia deklaracji treści, wyłączyć logi Intlayer w konsoli i wiele więcej. Pełną listę dostępnych parametrów znajdziesz w [dokumentacji konfiguracji](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/configuration.md).
 
 ### Krok 3: Integracja Intlayer w konfiguracji Angulara
@@ -207,7 +181,7 @@ export default mergeConfig({});
 
 Twórz i zarządzaj swoimi deklaracjami treści, aby przechowywać tłumaczenia:
 
-```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 = {