@intlayer/docs 8.7.7 → 8.7.8-canary.0

package/docs/pl/dictionary/file.md

@@ -34,7 +34,7 @@ W przeciwieństwie do metod odczytu plików takich jak `import`, `require` czy `
 
 Aby osadzić zawartość pliku w projekcie Intlayer, użyj funkcji `file` w module zawartości. Poniżej znajdują się przykłady różnych implementacji.
 
-```typescript fileName="**/*.content.ts" contentDeclarationFormat="typescript"
+```typescript fileName="**/*.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
 import { file, type Dictionary } from "intlayer";
 
 const myFileContent = {
@@ -47,36 +47,6 @@ const myFileContent = {
 export default myFileContent;
 ```
 
-```javascript fileName="**/*.content.mjs" contentDeclarationFormat="esm"
-import { file } from "intlayer";
-
-/** @type {import('intlayer').Dictionary} */
-// Typ słownika importowany z Intlayer
-const myFileContent = {
-  key: "my_key",
-  content: {
-    myFile: file("./path/to/file.txt"), // osadzenie pliku
-  },
-};
-
-export default myFileContent;
-```
-
-```javascript fileName="**/*.content.cjs" contentDeclarationFormat="commonjs"
-const { file } = require("intlayer");
-
-/** @type {import('intlayer').Dictionary} */
-// Typ słownika importowany z Intlayer
-const myFileContent = {
-  key: "my_key",
-  content: {
-    myFile: file("./path/to/file.txt"), // osadzenie pliku
-  },
-};
-
-module.exports = myFileContent;
-```
-
 ```json5 fileName="**/*.content.json" contentDeclarationFormat="json"
 {
   "$schema": "https://intlayer.org/schema.json",
@@ -94,7 +64,7 @@ module.exports = myFileContent;
 
 Aby użyć osadzonej zawartości pliku w komponencie React, zaimportuj i użyj hooka `useIntlayer` z pakietu `react-intlayer`. Pozwala to na pobranie zawartości z określonego klucza i dynamiczne jej wyświetlenie.
 
-```tsx fileName="**/*.tsx" codeFormat="typescript"
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
 import type { FC } from "react";
 import { useIntlayer } from "react-intlayer";
 
@@ -111,43 +81,11 @@ const FileComponent: FC = () => {
 export default FileComponent;
 ```
 
-```javascript fileName="**/*.mjx" codeFormat="esm"
-import { useIntlayer } from "react-intlayer";
-
-const FileComponent = () => {
-  const { myFile } = useIntlayer("my_key");
-
-  return (
-    <div>
-      <pre>{myFile}</pre>
-    </div>
-  );
-};
-
-export default FileComponent;
-```
-
-```javascript fileName="**/*.cjs" codeFormat="commonjs"
-const { useIntlayer } = require("react-intlayer");
-
-const FileComponent = () => {
-  const { myFile } = useIntlayer("my_key");
-
-  return (
-    <div>
-      <pre>{myFile}</pre>
-    </div>
-  );
-};
-
-module.exports = FileComponent;
-```
-
 ## Przykład wielojęzycznego Markdown
 
 Aby obsługiwać wielojęzyczne edytowalne pliki Markdown, możesz użyć `file` w połączeniu z `t()` i `md()`, aby zdefiniować różne wersje językowe pliku z zawartością Markdown.
 
-```typescript fileName="**/*.content.ts" contentDeclarationFormat="typescript"
+```typescript fileName="**/*.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
 import { file, t, md, type Dictionary } from "intlayer";
 
 const myMultilingualContent = {
@@ -166,43 +104,6 @@ const myMultilingualContent = {
 export default myMultilingualContent;
 ```
 
-```javascript fileName="**/*.content.mjs" contentDeclarationFormat="esm"
-import { file, t, md } from "intlayer";
-
-/** @type {import('intlayer').Dictionary} */
-const myMultilingualContent = {
-  key: "my_multilingual_key",
-  content: {
-    myContent: md(
-      t({
-        en: file("src/components/test.en.md"),
-        fr: file("src/components/test.fr.md"),
-        es: file("src/components/test.es.md"),
-      })
-    ),
-  },
-};
-
-export default myMultilingualContent;
-```
-
-```javascript fileName="**/*.content.cjs" contentDeclarationFormat="commonjs"
-const { file, t, md } = require("intlayer");
-
-const myMultilingualContent = {
-  key: "my_multilingual_key",
-  content: {
-    myContent: md(
-      t({
-        en: file("src/components/test.en.md"),
-        fr: file("src/components/test.fr.md"),
-        es: file("src/components/test.es.md"),
-      })
-    ),
-  },
-};
-```
-
 Ta konfiguracja pozwala na dynamiczne pobieranie zawartości w oparciu o preferencje językowe użytkownika. Gdy jest używana w Intlayer Visual Editor lub CMS, system rozpozna, że zawartość pochodzi z określonych plików Markdown i zapewni, że pozostaną one edytowalne.
 
 ## Różne typy ścieżek

package/docs/pl/dictionary/function_fetching.md

@@ -32,7 +32,7 @@ Intlayer pozwala na deklarowanie funkcji zawartości w Twoich modułach zawarto
 
 Oto przykład prostej synchronicznej funkcji pobierającej zawartość:
 
-```typescript fileName="**/*.content.ts" contentDeclarationFormat="typescript"
+```typescript fileName="**/*.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
 import type { Dictionary } from "intlayer";
 
 const functionContent = {
@@ -45,30 +45,6 @@ const functionContent = {
 export default functionContent;
 ```
 
-```javascript fileName="**/*.content.mjs" contentDeclarationFormat="esm"
-/** @type {import('intlayer').Dictionary} */
-const functionContent = {
-  key: "function_content",
-  content: {
-    text: () => "To jest zawartość renderowana przez funkcję",
-  },
-};
-
-export default functionContent;
-```
-
-```javascript fileName="**/*.content.cjs" contentDeclarationFormat="commonjs"
-/** @type {import('intlayer').Dictionary} */
-const functionContent = {
-  key: "function_content",
-  content: {
-    text: () => "To jest zawartość renderowana przez funkcję",
-  },
-};
-
-module.exports = functionContent;
-```
-
 ```json fileName="**/*.content.json" contentDeclarationFormat="json"
 {
   "$schema": "https://intlayer.org/schema.json",
@@ -87,7 +63,7 @@ Oprócz funkcji synchronicznych, Intlayer obsługuje funkcje asynchroniczne, co
 
 Poniżej znajduje się przykład funkcji asynchronicznej, która symuluje pobieranie z serwera:
 
-```typescript fileName="**/*.content.ts" contentDeclarationFormat="typescript"
+```typescript fileName="**/*.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
 import { setTimeout } from "node:timers/promises";
 import type { Dictionary } from "intlayer";
 
@@ -106,42 +82,6 @@ const asyncFunctionContent = {
 export default asyncFunctionContent;
 ```
 
-```javascript fileName="**/*.content.mjs" contentDeclarationFormat="esm"
-import { setTimeout } from "node:timers/promises";
-
-/** @type {import('intlayer').Dictionary} */
-const fakeFetch = async () => {
-  // Poczekaj 200ms, aby zasymulować pobieranie z serwera
-  await setTimeout(200);
-  return "To jest zawartość pobrana z serwera";
-};
-
-const asyncFunctionContent = {
-  key: "async_function",
-  content: { text: fakeFetch },
-};
-
-export default asyncFunctionContent;
-```
-
-```javascript fileName="**/*.content.cjs" contentDeclarationFormat="commonjs"
-const { setTimeout } = require("node:timers/promises");
-
-/** @type {import('intlayer').Dictionary} */
-const fakeFetch = async () => {
-  // Poczekaj 200ms, aby zasymulować pobieranie z serwera
-  await setTimeout(200);
-  return "To jest zawartość pobrana z serwera";
-};
-
-const asyncFunctionContent = {
-  key: "async_function",
-  content: { text: fakeFetch },
-};
-
-module.exports = asyncFunctionContent;
-```
-
 ```plaintext fileName="**/*.content.json" contentDeclarationFormat="json"
 Brak możliwości pobrania zawartości z pliku JSON, użyj zamiast tego pliku .ts lub .js
 ```
@@ -152,7 +92,7 @@ W tym przypadku funkcja `fakeFetch` naśladuje opóźnienie, aby zasymulować cz
 
 Aby użyć zawartości opartej na funkcjach w komponencie React, musisz zaimportować `useIntlayer` z `react-intlayer` i wywołać ją z identyfikatorem zawartości, aby pobrać zawartość. Oto przykład:
 
-```typescript fileName="**/*.jsx" codeFormat="typescript"
+```typescript fileName="**/*.jsx" codeFormat={["typescript", "esm", "commonjs"]}
 import type { FC } from "react";
 import { useIntlayer } from "react-intlayer";
 
@@ -172,43 +112,3 @@ const MyComponent: FC = () => {
 
 export default MyComponent;
 ```
-
-```javascript fileName="**/*.mjx" codeFormat="esm"
-import { useIntlayer } from "react-intlayer";
-
-const MyComponent = () => {
-  const functionContent = useIntlayer("function_content");
-  const asyncFunctionContent = useIntlayer("async_function_content");
-
-  return (
-    <div>
-      <p>{functionContent.text}</p>
-      {/* Wyjście: To jest zawartość renderowana przez funkcję */}
-      <p>{asyncFunctionContent.text}</p>
-      {/* Wyjście: To jest zawartość pobrana z serwera */}
-    </div>
-  );
-};
-
-export default MyComponent;
-```
-
-```javascript fileName="**/*.cjs" codeFormat="commonjs"
-const { useIntlayer } = require("react-intlayer");
-
-const MyComponent = () => {
-  const functionContent = useIntlayer("function_content");
-  const asyncFunctionContent = useIntlayer("async_function_content");
-
-  return (
-    <div>
-      <p>{functionContent.text}</p>
-      {/* Wyjście: To jest zawartość renderowana przez funkcję */}
-      <p>{asyncFunctionContent.text}</p>
-      {/* Wyjście: To jest zawartość pobrana z serwera */}
-    </div>
-  );
-};
-
-module.exports = MyComponent;
-```

package/docs/pl/dictionary/gender.md

@@ -32,7 +32,7 @@ W Intlayer treści oparte na płci są realizowane za pomocą funkcji `gender`,
 
 Aby skonfigurować treści oparte na płci w swoim projekcie Intlayer, utwórz moduł zawartości, który będzie zawierał definicje specyficzne dla płci. Poniżej znajdują się przykłady w różnych formatach.
 
-```typescript fileName="**/*.content.ts" contentDeclarationFormat="typescript"
+```typescript fileName="**/*.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
 import { gender, type Dictionary } from "intlayer";
 
 const myGenderContent = {
@@ -49,42 +49,6 @@ const myGenderContent = {
 export default myGenderContent;
 ```
 
-```javascript fileName="**/*.content.mjs" contentDeclarationFormat="esm"
-import { gender } from "intlayer";
-
-/** @type {import('intlayer').Dictionary} */
-const myGenderContent = {
-  key: "my_key",
-  content: {
-    myGender: gender({
-      male: "moja treść dla użytkowników płci męskiej",
-      female: "moja treść dla użytkowników płci żeńskiej",
-      fallback: "moja treść, gdy płeć nie jest określona", // Opcjonalne
-    }),
-  },
-};
-
-export default myGenderContent;
-```
-
-```javascript fileName="**/*.content.cjs" contentDeclarationFormat="commonjs"
-const { gender } = require("intlayer");
-
-/** @type {import('intlayer').Dictionary} */
-const myGenderContent = {
-  key: "my_key",
-  content: {
-    myGender: gender({
-      male: "moja treść dla użytkowników płci męskiej",
-      female: "moja treść dla użytkowników płci żeńskiej",
-      fallback: "moja treść, gdy płeć nie jest określona", // Opcjonalne
-    }),
-  },
-};
-
-module.exports = myGenderContent;
-```
-
 ```json5 fileName="**/*.content.json" contentDeclarationFormat="json"
 {
   "$schema": "https://intlayer.org/schema.json",
@@ -108,7 +72,7 @@ module.exports = myGenderContent;
 
 Aby wykorzystać treści zależne od płci w komponencie React, zaimportuj i użyj hooka `useIntlayer` z pakietu `react-intlayer`. Ten hook pobiera treść dla określonego klucza i pozwala przekazać płeć, aby wybrać odpowiednią zawartość.
 
-```tsx fileName="**/*.tsx" codeFormat="typescript"
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
 import type { FC } from "react";
 import { useIntlayer } from "react-intlayer";
 
@@ -160,109 +124,6 @@ const GenderComponent: FC = () => {
 export default GenderComponent;
 ```
 
-```javascript fileName="**/*.mjx" codeFormat="esm"
-import { useIntlayer } from "react-intlayer";
-
-const GenderComponent = () => {
-  const { myGender } = useIntlayer("my_key");
-
-  return (
-    <div>
-      <p>
-        {
-          /* Wyjście: moja treść dla użytkowników płci męskiej */
-          myGender("male")
-        }
-      </p>
-      <p>
-        {
-          /* Wyjście: moja treść dla użytkowniczek */
-          myGender("female")
-        }
-      </p>
-      <p>
-        {
-          /* Wyjście: moja treść dla użytkowników płci męskiej */
-          myGender("m")
-        }
-      </p>
-      <p>
-        {
-          /* Wyjście: moja treść dla użytkowniczek */
-          myGender("f")
-        }
-      </p>
-      <p>
-        {
-          /* Wyjście: moja treść, gdy płeć nie jest określona */
-          myGender("")
-        }
-      </p>
-      <p>
-        {
-          /* Wyjście: moja treść, gdy płeć nie jest określona */
-          /* Wyjście: moja treść, gdy płeć nie jest określona */
-          myGender(undefined)
-        }
-      </p>
-    </div>
-  );
-};
-
-export default GenderComponent;
-```
-
-```javascript fileName="**/*.cjs" codeFormat="commonjs"
-const { useIntlayer } = require("react-intlayer");
-
-const GenderComponent = () => {
-  const { myGender } = useIntlayer("my_key");
-
-  return (
-    <div>
-      <p>
-        {
-          /* Wyjście: moja treść dla użytkowników płci męskiej */
-          myGender("male")
-        }
-      </p>
-      <p>
-        {
-          /* Wyjście: moja treść dla użytkowniczek */
-          myGender("female")
-        }
-      </p>
-      <p>
-        {
-          /* Wyjście: moja treść dla użytkowników płci męskiej */
-          myGender("m")
-        }
-      </p>
-      <p>
-        {
-          /* Wyjście: moja treść dla użytkowniczek */
-          myGender("f")
-        }
-      </p>
-      <p>
-        {
-          /* Wyjście: moja treść, gdy płeć nie jest określona */
-          myGender("")
-        }
-      </p>
-      <p>
-        {
-          /* Wyjście: moja treść, gdy płeć nie jest określona */
-          myGender(undefined)
-        }
-      </p>
-    </div>
-  );
-};
-
-module.exports = GenderComponent;
-```
-
 ## Dodatkowe zasoby
 
 Aby uzyskać bardziej szczegółowe informacje na temat konfiguracji i użytkowania, zapoznaj się z następującymi zasobami:

package/docs/pl/dictionary/insertion.md

@@ -41,7 +41,7 @@ Aby skonfigurować treść wstawiania w swoim projekcie Intlayer, utwórz moduł
   <Tab label="Ręczne opakowanie" value="manual-wrapping">
     Użyj funkcji `insert`, aby jawnie zadeklarować treść wstawiania.
 
-    ```typescript fileName="**/*.content.ts" contentDeclarationFormat="typescript"
+    ```typescript fileName="**/*.content.ts" contentDeclarationFormat=["typescript", "esm", "cjs"]
     import { insert, type Dictionary } from "intlayer";
 
     const myInsertionContent = {
@@ -99,7 +99,7 @@ Aby skonfigurować treść wstawiania w swoim projekcie Intlayer, utwórz moduł
   <Tab label="Automatyczne wykrywanie" value="automatic-detection">
     Jeśli ciąg znaków zawiera typowe wskaźniki wstawiania (takie jak `{{name}}`), Intlayer automatycznie go przekształci.
 
-    ```typescript fileName="**/*.content.ts" contentDeclarationFormat="typescript"
+    ```typescript fileName="**/*.content.ts" contentDeclarationFormat=["typescript", "esm", "cjs"]
     import { type Dictionary } from "intlayer";
 
     const myInsertionContent = {
@@ -200,7 +200,7 @@ module.exports = myInsertionContent;
 
 Aby wykorzystać zawartość wstawki w komponencie React, zaimportuj i użyj hooka `useIntlayer` z pakietu `react-intlayer`. Ten hook pobiera zawartość dla określonego klucza i pozwala przekazać obiekt, który mapuje każde miejsce na wartość, którą chcesz wyświetlić.
 
-```tsx fileName="**/*.tsx" codeFormat="typescript"
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
 import type { FC } from "react";
 import { useIntlayer } from "react-intlayer";
 
@@ -228,60 +228,6 @@ const InsertionComponent: FC = () => {
 export default InsertionComponent;
 ```
 
-```javascript fileName="**/*.mjx" codeFormat="esm"
-import { useIntlayer } from "react-intlayer";
-
-const InsertionComponent = () => {
-  const { myInsertion } = useIntlayer("my_key");
-
-  return (
-    <div>
-      <p>
-        {
-          /* Wynik: "Cześć, mam na imię John i mam 30 lat!" */
-          myInsertion({ name: "John", age: "30" })
-        }
-      </p>
-      <p>
-        {
-          /* Możesz ponownie użyć tej samej wstawki z różnymi wartościami */
-          myInsertion({ name: "Alice", age: "25" })
-        }
-      </p>
-    </div>
-  );
-};
-
-export default InsertionComponent;
-```
-
-```javascript fileName="**/*.cjs" codeFormat="commonjs"
-const { useIntlayer } = require("react-intlayer");
-
-const InsertionComponent = () => {
-  const { myInsertion } = useIntlayer("my_key");
-
-  return (
-    <div>
-      <p>
-        {
-          /* Wynik: "Cześć, mam na imię John i mam 30 lat!" */
-          myInsertion({ name: "John", age: "30" })
-        }
-      </p>
-      <p>
-        {
-          /* Możesz ponownie użyć tej samej wstawki z różnymi wartościami */
-          myInsertion({ name: "Alice", age: "25" })
-        }
-      </p>
-    </div>
-  );
-};
-
-module.exports = InsertionComponent;
-```
-
 ## Dodatkowe zasoby
 
 Aby uzyskać bardziej szczegółowe informacje na temat konfiguracji i użytkowania, zapoznaj się z następującymi zasobami: