@intlayer/docs 8.12.5-canary.0 → 9.0.0-canary.2

package/docs/it/dictionary/file.md

@@ -27,8 +27,174 @@ author: aymericzip
 
 ## Come Funziona l'Incorporamento dei File
 
-In Intlayer, la funzione `file` permette di incorporare il contenuto di file esterni in un dizionario. Questo approccio garantisce che Intlayer riconosca il file sorgente, consentendo un'integrazione fluida con l'Intlayer Visual Editor e il CMS. A differenza dei metodi diretti come `import`, `require` o la lettura di file con `fs`, l'uso di `file` associa il file al dizionario, permettendo a Intlayer di tracciare e aggiornare dinamicamente il contenuto quando il file viene modificato.
+<Tabs group="framework">
+  <Tab label="React" value="react">
 
+To use embedded file content in a React component, import and use the `useIntlayer` hook from the `react-intlayer` package. This retrieves the content from the specified key and allows it to be displayed dynamically.
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+import type { FC } from "react";
+import { useIntlayer } from "react-intlayer";
+
+const FileComponent: FC = () => {
+  const { myFile } = useIntlayer("my_key");
+
+  return (
+    <div>
+      <pre>{myFile}</pre>
+    </div>
+  );
+};
+
+export default FileComponent;
+```
+
+  </Tab>
+  <Tab label="Next.js" value="nextjs">
+
+To use embedded file content in Next.js Client Components, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+"use client";
+
+import type { FC } from "react";
+import { useIntlayer } from "next-intlayer";
+
+const FileComponent: FC = () => {
+  const { myFile } = useIntlayer("my_key");
+
+  return (
+    <div>
+      <pre>{myFile}</pre>
+    </div>
+  );
+};
+
+export default FileComponent;
+```
+
+  </Tab>
+  <Tab label="Vue" value="vue">
+
+To use embedded file content in Vue components, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```vue fileName="**/*.vue"
+<script setup lang="ts">
+import { useIntlayer } from "vue-intlayer";
+
+const { myFile } = useIntlayer("my_key");
+</script>
+
+<template>
+  <div>
+    <pre>{{ myFile }}</pre>
+  </div>
+</template>
+```
+
+  </Tab>
+  <Tab label="Svelte" value="svelte">
+
+To use embedded file content in Svelte components, retrieve it via the `useIntlayer` hook. The store is accessed with `$`. Here's an example:
+
+```svelte fileName="**/*.svelte"
+<script lang="ts">
+import { useIntlayer } from "svelte-intlayer";
+
+const content = useIntlayer("my_key");
+</script>
+
+<div>
+  <pre>{$content.myFile}</pre>
+</div>
+```
+
+  </Tab>
+  <Tab label="Preact" value="preact">
+
+To use embedded file content in Preact components, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+import type { FC } from "preact";
+import { useIntlayer } from "preact-intlayer";
+
+const FileComponent: FC = () => {
+  const { myFile } = useIntlayer("my_key");
+
+  return (
+    <div>
+      <pre>{myFile}</pre>
+    </div>
+  );
+};
+
+export default FileComponent;
+```
+
+  </Tab>
+  <Tab label="Solid" value="solid">
+
+To use embedded file content in SolidJS components, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+import type { Component } from "solid-js";
+import { useIntlayer } from "solid-intlayer";
+
+const FileComponent: Component = () => {
+  const { myFile } = useIntlayer("my_key");
+
+  return (
+    <div>
+      <pre>{myFile}</pre>
+    </div>
+  );
+};
+
+export default FileComponent;
+```
+
+  </Tab>
+  <Tab label="Angular" value="angular">
+
+To use embedded file content in Angular components, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```typescript fileName="app.component.ts" codeFormat="typescript"
+import { Component } from "@angular/core";
+import { useIntlayer } from "angular-intlayer";
+
+@Component({
+  selector: "app-file",
+  template: `
+    <div>
+      <pre>{{ content().myFile }}</pre>
+    </div>
+  `,
+})
+export class FileComponent {
+  content = useIntlayer("my_key");
+}
+```
+
+  </Tab>
+  <Tab label="Vanilla JS" value="vanilla">
+
+To use embedded file content with `vanilla-intlayer`, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```typescript fileName="**/*.ts" codeFormat={["typescript", "esm"]}
+import { installIntlayer, useIntlayer } from "vanilla-intlayer";
+
+installIntlayer();
+
+const content = useIntlayer("my_key").onChange((newContent) => {
+  document.getElementById("file-content")!.textContent = newContent.myFile;
+});
+
+// Initial render
+document.getElementById("file-content")!.textContent = content.myFile;
+```
+
+  </Tab>
+</Tabs>
 ## Configurare il Contenuto del File
 
 Per incorporare il contenuto di un file nel tuo progetto Intlayer, utilizza la funzione `file` in un modulo di contenuto. Di seguito sono riportati esempi che mostrano diverse implementazioni.
@@ -61,7 +227,10 @@ export default myFileContent;
 
 ## Utilizzo del Contenuto del File in React Intlayer
 
-Per utilizzare il contenuto del file incorporato in un componente React, importa e usa l'hook `useIntlayer` dal pacchetto `react-intlayer`. Questo recupera il contenuto dalla chiave specificata e permette di visualizzarlo dinamicamente.
+<Tabs group="framework">
+  <Tab label="React" value="react">
+
+To use embedded file content in a React component, import and use the `useIntlayer` hook from the `react-intlayer` package. This retrieves the content from the specified key and allows it to be displayed dynamically.
 
 ```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
 import type { FC } from "react";
@@ -80,6 +249,153 @@ const FileComponent: FC = () => {
 export default FileComponent;
 ```
 
+  </Tab>
+  <Tab label="Next.js" value="nextjs">
+
+To use embedded file content in Next.js Client Components, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+"use client";
+
+import type { FC } from "react";
+import { useIntlayer } from "next-intlayer";
+
+const FileComponent: FC = () => {
+  const { myFile } = useIntlayer("my_key");
+
+  return (
+    <div>
+      <pre>{myFile}</pre>
+    </div>
+  );
+};
+
+export default FileComponent;
+```
+
+  </Tab>
+  <Tab label="Vue" value="vue">
+
+To use embedded file content in Vue components, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```vue fileName="**/*.vue"
+<script setup lang="ts">
+import { useIntlayer } from "vue-intlayer";
+
+const { myFile } = useIntlayer("my_key");
+</script>
+
+<template>
+  <div>
+    <pre>{{ myFile }}</pre>
+  </div>
+</template>
+```
+
+  </Tab>
+  <Tab label="Svelte" value="svelte">
+
+To use embedded file content in Svelte components, retrieve it via the `useIntlayer` hook. The store is accessed with `$`. Here's an example:
+
+```svelte fileName="**/*.svelte"
+<script lang="ts">
+import { useIntlayer } from "svelte-intlayer";
+
+const content = useIntlayer("my_key");
+</script>
+
+<div>
+  <pre>{$content.myFile}</pre>
+</div>
+```
+
+  </Tab>
+  <Tab label="Preact" value="preact">
+
+To use embedded file content in Preact components, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+import type { FC } from "preact";
+import { useIntlayer } from "preact-intlayer";
+
+const FileComponent: FC = () => {
+  const { myFile } = useIntlayer("my_key");
+
+  return (
+    <div>
+      <pre>{myFile}</pre>
+    </div>
+  );
+};
+
+export default FileComponent;
+```
+
+  </Tab>
+  <Tab label="Solid" value="solid">
+
+To use embedded file content in SolidJS components, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+import type { Component } from "solid-js";
+import { useIntlayer } from "solid-intlayer";
+
+const FileComponent: Component = () => {
+  const { myFile } = useIntlayer("my_key");
+
+  return (
+    <div>
+      <pre>{myFile}</pre>
+    </div>
+  );
+};
+
+export default FileComponent;
+```
+
+  </Tab>
+  <Tab label="Angular" value="angular">
+
+To use embedded file content in Angular components, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```typescript fileName="app.component.ts" codeFormat="typescript"
+import { Component } from "@angular/core";
+import { useIntlayer } from "angular-intlayer";
+
+@Component({
+  selector: "app-file",
+  template: `
+    <div>
+      <pre>{{ content().myFile }}</pre>
+    </div>
+  `,
+})
+export class FileComponent {
+  content = useIntlayer("my_key");
+}
+```
+
+  </Tab>
+  <Tab label="Vanilla JS" value="vanilla">
+
+To use embedded file content with `vanilla-intlayer`, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```typescript fileName="**/*.ts" codeFormat={["typescript", "esm"]}
+import { installIntlayer, useIntlayer } from "vanilla-intlayer";
+
+installIntlayer();
+
+const content = useIntlayer("my_key").onChange((newContent) => {
+  document.getElementById("file-content")!.textContent = newContent.myFile;
+});
+
+// Initial render
+document.getElementById("file-content")!.textContent = content.myFile;
+```
+
+  </Tab>
+</Tabs>
+
 ## Esempio di Markdown Multilingue
 
 Per supportare file Markdown modificabili multilingue, puoi usare `file` in combinazione con `t()` e `md()` per definire diverse versioni linguistiche di un file di contenuto Markdown.

package/docs/it/dictionary/gender.md

@@ -71,7 +71,10 @@ export default myGenderContent;
 
 ## Utilizzo del Contenuto Basato sul Genere con React Intlayer
 
-Per utilizzare contenuti basati sul genere all'interno di un componente React, importa e usa l'hook `useIntlayer` dal pacchetto `react-intlayer`. Questo hook recupera il contenuto per la chiave specificata e ti permette di passare un genere per selezionare l'output appropriato.
+<Tabs group="framework">
+  <Tab label="React" value="react">
+
+To utilize gender-based content within a React component, import and use the `useIntlayer` hook from the `react-intlayer` package. This hook fetches the content for the specified key and allows you to pass in a gender to select the appropriate output.
 
 ```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
 import type { FC } from "react";
@@ -84,37 +87,37 @@ const GenderComponent: FC = () => {
     <div>
       <p>
         {
-          /* Output: il mio contenuto per utenti maschi */
+          /* Output: my content for male users */
           myGender("male")
         }
       </p>
       <p>
         {
-          /* Output: il mio contenuto per utenti di genere femminile */
+          /* Output: my content for female users */
           myGender("female")
         }
       </p>
       <p>
         {
-          /* Output: il mio contenuto per utenti di genere maschile */
+          /* Output: my content for male users */
           myGender("m")
         }
       </p>
       <p>
         {
-          /* Output: il mio contenuto per utenti di genere femminile */
+          /* Output: my content for female users */
           myGender("f")
         }
       </p>
       <p>
         {
-          /* Output: il mio contenuto quando il genere non è specificato */
+          /* Output: my content when gender is not specified */
           myGender("")
         }
       </p>
       <p>
         {
-          /* Output: il mio contenuto quando il genere non è specificato */
+          /* Output: my content when gender is not specified */
           myGender(undefined)
         }
       </p>
@@ -125,6 +128,164 @@ const GenderComponent: FC = () => {
 export default GenderComponent;
 ```
 
+  </Tab>
+  <Tab label="Next.js" value="nextjs">
+
+To utilize gender-based content in Next.js Client Components, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+"use client";
+
+import type { FC } from "react";
+import { useIntlayer } from "next-intlayer";
+
+const GenderComponent: FC = () => {
+  const { myGender } = useIntlayer("my_key");
+
+  return (
+    <div>
+      <p>{myGender("male")}</p>
+      <p>{myGender("female")}</p>
+    </div>
+  );
+};
+
+export default GenderComponent;
+```
+
+  </Tab>
+  <Tab label="Vue" value="vue">
+
+To utilize gender-based content in Vue components, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```vue fileName="**/*.vue"
+<script setup lang="ts">
+import { useIntlayer } from "vue-intlayer";
+
+const { myGender } = useIntlayer("my_key");
+</script>
+
+<template>
+  <div>
+    <p>{{ myGender("male") }}</p>
+    <p>{{ myGender("female") }}</p>
+  </div>
+</template>
+```
+
+  </Tab>
+  <Tab label="Svelte" value="svelte">
+
+To utilize gender-based content in Svelte components, retrieve it via the `useIntlayer` hook. The store is accessed with `$`. Here's an example:
+
+```svelte fileName="**/*.svelte"
+<script lang="ts">
+import { useIntlayer } from "svelte-intlayer";
+
+const content = useIntlayer("my_key");
+</script>
+
+<div>
+  <p>{$content.myGender("male")}</p>
+  <p>{$content.myGender("female")}</p>
+</div>
+```
+
+  </Tab>
+  <Tab label="Preact" value="preact">
+
+To utilize gender-based content in Preact components, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+import type { FC } from "preact";
+import { useIntlayer } from "preact-intlayer";
+
+const GenderComponent: FC = () => {
+  const { myGender } = useIntlayer("my_key");
+
+  return (
+    <div>
+      <p>{myGender("male")}</p>
+      <p>{myGender("female")}</p>
+    </div>
+  );
+};
+
+export default GenderComponent;
+```
+
+  </Tab>
+  <Tab label="Solid" value="solid">
+
+To utilize gender-based content in SolidJS components, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+import type { Component } from "solid-js";
+import { useIntlayer } from "solid-intlayer";
+
+const GenderComponent: Component = () => {
+  const { myGender } = useIntlayer("my_key");
+
+  return (
+    <div>
+      <p>{myGender("male")}</p>
+      <p>{myGender("female")}</p>
+    </div>
+  );
+};
+
+export default GenderComponent;
+```
+
+  </Tab>
+  <Tab label="Angular" value="angular">
+
+To utilize gender-based content in Angular components, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```typescript fileName="app.component.ts" codeFormat="typescript"
+import { Component } from "@angular/core";
+import { useIntlayer } from "angular-intlayer";
+
+@Component({
+  selector: "app-gender",
+  template: `
+    <div>
+      <p>{{ content().myGender("male") }}</p>
+      <p>{{ content().myGender("female") }}</p>
+    </div>
+  `,
+})
+export class GenderComponent {
+  content = useIntlayer("my_key");
+}
+```
+
+  </Tab>
+  <Tab label="Vanilla JS" value="vanilla">
+
+To utilize gender-based content with `vanilla-intlayer`, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```typescript fileName="**/*.ts" codeFormat={["typescript", "esm"]}
+import { installIntlayer, useIntlayer } from "vanilla-intlayer";
+
+installIntlayer();
+
+const content = useIntlayer("my_key").onChange((newContent) => {
+  document.getElementById("gender-male")!.textContent =
+    newContent.myGender("male");
+  document.getElementById("gender-female")!.textContent =
+    newContent.myGender("female");
+});
+
+// Initial render
+document.getElementById("gender-male")!.textContent = content.myGender("male");
+document.getElementById("gender-female")!.textContent =
+  content.myGender("female");
+```
+
+  </Tab>
+</Tabs>
+
 ## Risorse Aggiuntive
 
 Per informazioni più dettagliate sulla configurazione e l'uso, consulta le seguenti risorse: