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

package/docs/tr/dictionary/file.md

@@ -61,7 +61,10 @@ export default myFileContent;
 
 ## React Intlayer ile Dosya İçeriğini Kullanma
 
-Bir React bileşeninde gömülü dosya içeriğini kullanmak için, `react-intlayer` paketinden `useIntlayer` hook'unu içe aktarın ve kullanın. Bu, belirtilen anahtardan içeriği alır ve dinamik olarak görüntülenmesine izin verir.
+<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 +83,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>
+
 ## Çok Dilli Markdown Örneği
 
 Düzenlenebilir çok dilli Markdown dosyalarını desteklemek için, farklı dil sürümlerindeki bir Markdown içerik dosyasını tanımlamak üzere `file`'ı `t()` ve `md()` ile birlikte kullanabilirsiniz.

package/docs/tr/dictionary/gender.md

@@ -71,7 +71,10 @@ export default myGenderContent;
 
 ## React Intlayer ile Cinsiyete Dayalı İçeriği Kullanma
 
-Bir React bileşeninde cinsiyete dayalı içeriği kullanmak için, `react-intlayer` paketinden `useIntlayer` hook'unu içe aktarın ve kullanın. Bu hook, belirtilen anahtar için içeriği getirir ve uygun çıktıyı seçmek için bir cinsiyet geçmenizi sağlar.
+<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>
         {
-          /* Çıktı: erkek kullanıcılar için içeriğim */
+          /* Output: my content for male users */
           myGender("male")
         }
       </p>
       <p>
         {
-          /* Çıktı: kadın kullanıcılar için içeriğim */
+          /* Output: my content for female users */
           myGender("female")
         }
       </p>
       <p>
         {
-          /* Çıktı: erkek kullanıcılar için içeriğim */
+          /* Output: my content for male users */
           myGender("m")
         }
       </p>
       <p>
         {
-          /* Çıktı: kadın kullanıcılar için içeriğim */
+          /* Output: my content for female users */
           myGender("f")
         }
       </p>
       <p>
         {
-          /* Çıktı: cinsiyet belirtilmediğinde içeriğim */
+          /* Output: my content when gender is not specified */
           myGender("")
         }
       </p>
       <p>
         {
-          /* Çıktı: cinsiyet belirtilmediğinde içeriğim */
+          /* 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>
+
 ## Ek Kaynaklar
 
 Yapılandırma ve kullanım hakkında daha detaylı bilgi için aşağıdaki kaynaklara başvurun:

package/docs/tr/dictionary/nesting.md

@@ -31,89 +31,197 @@ Intlayer'da iç içe yerleştirme, `nest` fonksiyonu aracılığıyla gerçekle
 
 ## İç İçe Yerleştirmeyi Ayarlama
 
-Intlayer projenizde iç içe yerleştirmeyi ayarlamak için, önce yeniden kullanmak istediğiniz temel içeriği tanımlayın. Ardından, ayrı bir içerik modülünde, o içeriği içe aktarmak için `nest` fonksiyonunu kullanın.
+<Tabs group="framework">
+  <Tab label="React" value="react">
 
-### Temel Sözlük
+To use nested content in a React component, leverage the `useIntlayer` hook from the `react-intlayer` package. This hook retrieves the correct content based on the specified key. Here's an example of how to use it:
 
-Aşağıda, başka bir sözlükte iç içe yerleştirilecek temel sözlük örneği verilmiştir:
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+import type { FC } from "react";
+import { useIntlayer } from "react-intlayer";
 
-```typescript fileName="firstDictionary.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
-import { type Dictionary } from "intlayer";
+const NestComponent: FC = () => {
+  const { fullNestedContent, partialNestedContent } = useIntlayer(
+    "key_of_my_second_dictionary"
+  );
 
-const firstDictionary = {
-  key: "key_of_my_first_dictionary",
-  content: {
-    content: "content",
-    subContent: {
-      contentNumber: 0,
-      contentString: "string",
-    },
-  },
-} satisfies Dictionary;
+  return (
+    <div>
+      <p>Full Nested Content: {JSON.stringify(fullNestedContent)}</p>
+      <p>Partial Nested Value: {partialNestedContent}</p>
+    </div>
+  );
+};
 
-export default firstDictionary;
+export default NestComponent;
 ```
 
-```json fileName="firstDictionary.content.json" contentDeclarationFormat="json"
-{
-  "$schema": "https://intlayer.org/schema.json",
-  "key": "key_of_my_first_dictionary",
-  "content": {
-    "content": "content",
-    "subContent": {
-      "contentNumber": 0,
-      "contentString": "string"
-    }
-  }
-}
+  </Tab>
+  <Tab label="Next.js" value="nextjs">
+
+To use nested 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 NestComponent: FC = () => {
+  const { fullNestedContent, partialNestedContent } = useIntlayer(
+    "key_of_my_second_dictionary"
+  );
+
+  return (
+    <div>
+      <p>Full Nested Content: {JSON.stringify(fullNestedContent)}</p>
+      <p>Partial Nested Value: {partialNestedContent}</p>
+    </div>
+  );
+};
+
+export default NestComponent;
 ```
 
-### Nest ile Referans Alma
+  </Tab>
+  <Tab label="Vue" value="vue">
 
-Şimdi, yukarıdaki içeriği referans almak için `nest` fonksiyonunu kullanan başka bir içerik modülü oluşturun. Tüm içeriği veya belirli bir iç içe değeri referans alabilirsiniz:
+To use nested content in Vue components, retrieve it via the `useIntlayer` hook. Here's an example:
 
-```typescript fileName="secondDictionary.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
-import { nest, type Dictionary } from "intlayer";
+```vue fileName="**/*.vue"
+<script setup lang="ts">
+import { useIntlayer } from "vue-intlayer";
 
-const myNestingContent = {
-  key: "key_of_my_second_dictionary",
-  content: {
-    // Tüm sözlüğü referans alır:
-    fullNestedContent: nest("key_of_my_first_dictionary"),
-    // Belirli bir iç içe değeri referans alır:
-    partialNestedContent: nest(
-      "key_of_my_first_dictionary",
-      "subContent.contentNumber"
-    ),
-  },
-} satisfies Dictionary;
+const { fullNestedContent, partialNestedContent } = useIntlayer(
+  "key_of_my_second_dictionary"
+);
+</script>
 
-export default myNestingContent;
+<template>
+  <div>
+    <p>Full Nested Content: {{ JSON.stringify(fullNestedContent) }}</p>
+    <p>Partial Nested Value: {{ partialNestedContent }}</p>
+  </div>
+</template>
 ```
 
-```json fileName="secondDictionary.content.json" contentDeclarationFormat="json"
-{
-  "$schema": "https://intlayer.org/schema.json",
-  "key": "key_of_my_second_dictionary",
-  "content": {
-    "fullNestedContent": {
-      "nodeType": "nested",
-      "nested": {
-        "dictionaryKey": "key_of_my_first_dictionary"
-      }
-    },
-    "partialNestedContent": {
-      "nodeType": "nested",
-      "nested": {
-        "dictionaryKey": "key_of_my_first_dictionary",
-        "path": "subContent.contentNumber"
-      }
-    }
-  }
+  </Tab>
+  <Tab label="Svelte" value="svelte">
+
+To use nested 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("key_of_my_second_dictionary");
+</script>
+
+<div>
+  <p>Full Nested Content: {JSON.stringify($content.fullNestedContent)}</p>
+  <p>Partial Nested Value: {$content.partialNestedContent}</p>
+</div>
+```
+
+  </Tab>
+  <Tab label="Preact" value="preact">
+
+To use nested 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 NestComponent: FC = () => {
+  const { fullNestedContent, partialNestedContent } = useIntlayer(
+    "key_of_my_second_dictionary"
+  );
+
+  return (
+    <div>
+      <p>Full Nested Content: {JSON.stringify(fullNestedContent)}</p>
+      <p>Partial Nested Value: {partialNestedContent}</p>
+    </div>
+  );
+};
+
+export default NestComponent;
+```
+
+  </Tab>
+  <Tab label="Solid" value="solid">
+
+To use nested 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 NestComponent: Component = () => {
+  const { fullNestedContent, partialNestedContent } = useIntlayer(
+    "key_of_my_second_dictionary"
+  );
+
+  return (
+    <div>
+      <p>Full Nested Content: {JSON.stringify(fullNestedContent)}</p>
+      <p>Partial Nested Value: {partialNestedContent}</p>
+    </div>
+  );
+};
+
+export default NestComponent;
+```
+
+  </Tab>
+  <Tab label="Angular" value="angular">
+
+To use nested 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-nest",
+  template: `
+    <div>
+      <p>
+        Full Nested Content: {{ JSON.stringify(content().fullNestedContent) }}
+      </p>
+      <p>Partial Nested Value: {{ content().partialNestedContent }}</p>
+    </div>
+  `,
+})
+export class NestComponent {
+  content = useIntlayer("key_of_my_second_dictionary");
+  JSON = JSON;
 }
 ```
 
-İkinci parametre olarak, o içerik içindeki iç içe bir değere giden bir yol belirtebilirsiniz. Yol sağlanmadığında, referans alınan sözlüğün tüm içeriği döndürülür.
+  </Tab>
+  <Tab label="Vanilla JS" value="vanilla">
+
+To use nested 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("key_of_my_second_dictionary").onChange(
+  (newContent) => {
+    document.getElementById("nested")!.textContent =
+      newContent.partialNestedContent;
+  }
+);
+
+// Initial render
+document.getElementById("nested")!.textContent = content.partialNestedContent;
+```
+
+  </Tab>
+</Tabs>
 
 ## React Intlayer ile İç İçe Yerleştirmeyi Kullanma