@intlayer/docs 9.4.0-canary.0 → 9.4.0

package/docs/tr/dictionary/html.md

@@ -248,7 +248,7 @@ HTML render'lamasını tüm uygulamanız için global olarak yapılandırabilirs
 
 <Tabs group="framework">
   <Tab label="React / Next.js" value="react">
-  
+
     ```tsx fileName="AppProvider.tsx"
     import { HTMLProvider } from "react-intlayer/html";
 
@@ -285,7 +285,7 @@ HTML render'lamasını tüm uygulamanız için global olarak yapılandırabilirs
 
   </Tab>
   <Tab label="Vue" value="vue">
-  
+
     ```typescript fileName="main.ts"
     import { createApp, h } from "vue";
     import { intlayer } from "vue-intlayer";
@@ -330,7 +330,7 @@ HTML render'lamasını tüm uygulamanız için global olarak yapılandırabilirs
 
   </Tab>
   <Tab label="Svelte" value="svelte">
-   
+
     ```svelte fileName="App.svelte"
     <script lang="ts">
       import { HTMLProvider } from "svelte-intlayer/html";
@@ -346,9 +346,28 @@ HTML render'lamasını tüm uygulamanız için global olarak yapılandırabilirs
     </HTMLProvider>
     ```
 
+    Kendi HTML oluşturucunuzu da kullanabilirsiniz:
+
+    ```svelte fileName="App.svelte"
+    <script lang="ts">
+      import { HTMLProvider } from "svelte-intlayer/html";
+    </script>
+
+    <HTMLProvider
+      renderHTML={async (html) => {
+        const { renderHTML } = await import('svelte-intlayer/html');
+        return renderHTML(html);
+      }}
+    >
+      <slot />
+    </HTMLProvider>
+    ```
+
+    > HTML oluşturucunuzu dinamik olarak içe aktarmak, uygulamanızın bundle boyutunu azaltmanın iyi bir yoludur.
+
   </Tab>
   <Tab label="Preact" value="preact">
-   
+
     ```tsx fileName="AppProvider.tsx"
     import { HTMLProvider } from "preact-intlayer/html";
 
@@ -384,7 +403,7 @@ HTML render'lamasını tüm uygulamanız için global olarak yapılandırabilirs
 
   </Tab>
   <Tab label="Solid" value="solid">
-   
+
     ```tsx fileName="AppProvider.tsx"
     import { HTMLProvider } from "solid-intlayer/html";
 
@@ -467,7 +486,9 @@ Ham HTML string'lerini render etmeniz gerekiyorsa veya bileşen eşlemesinde dah
 <Tabs group="framework">
   <Tab label="React / Next.js" value="react">
     #### `<HTMLRenderer />` Bileşeni
-    
+
+Belirli bileşenlerle bir HTML dizesi oluşturun.
+
     ```tsx
     import { HTMLRenderer } from "react-intlayer/html";
 
@@ -501,9 +522,9 @@ Ham HTML string'lerini render etmeniz gerekiyorsa veya bileşen eşlemesinde dah
 
   </Tab>
   <Tab label="Vue" value="vue">
-   
+
     #### `<HTMLRenderer />` Bileşeni
-   
+
     ```vue
     <script setup>
     import { HTMLRenderer } from "vue-intlayer/html";
@@ -516,9 +537,9 @@ Ham HTML string'lerini render etmeniz gerekiyorsa veya bileşen eşlemesinde dah
 
   </Tab>
   <Tab label="Svelte" value="svelte">
-  
+
     #### `<HTMLRenderer />` Bileşeni
-   
+
     ```svelte
     <script lang="ts">
     import { HTMLRenderer } from "svelte-intlayer/html";
@@ -550,9 +571,9 @@ Ham HTML string'lerini render etmeniz gerekiyorsa veya bileşen eşlemesinde dah
 
   </Tab>
   <Tab label="Preact" value="preact">
-   
+
     #### `<HTMLRenderer />` Bileşeni
-   
+
     ```tsx
     import { HTMLRenderer } from "preact-intlayer/html";
 
@@ -581,9 +602,9 @@ Ham HTML string'lerini render etmeniz gerekiyorsa veya bileşen eşlemesinde dah
 
   </Tab>
   <Tab label="Solid" value="solid">
-   
+
     #### `<HTMLRenderer />` Bileşeni
-   
+
     ```tsx
     import { HTMLRenderer } from "solid-intlayer/html";
 

package/docs/tr/dictionary/markdown.md

@@ -492,7 +492,7 @@ Bu yardımcı programlar **yalnızca ham Markdown dizelerini** oluşturur ve `us
 
 <Tabs group="framework">
   <Tab label="React" value="react">
-  
+
     #### `<MarkdownRenderer />` Bileşeni
 
     Belirli seçeneklerle bir Markdown dizesini oluşturur.
@@ -531,7 +531,7 @@ Bu yardımcı programlar **yalnızca ham Markdown dizelerini** oluşturur ve `us
 
   </Tab>
   <Tab label="Next.js" value="nextjs">
-  
+
     #### `<MarkdownRenderer />` Bileşeni
 
     Belirli seçeneklerle bir Markdown dizesini oluşturur.
@@ -957,21 +957,38 @@ Bu yardımcı programlar **yalnızca ham Markdown dizelerini** oluşturur ve `us
   </Tab>
   <Tab label="Angular" value="angular">
 
-    ```typescript fileName="app.module.ts"
-    import { NgModule } from '@angular/core';
-    import { IntlayerMarkdownModule } from 'angular-intlayer/markdown';
+    ```typescript fileName="app.config.ts"
+    import { createIntlayerMarkdownProvider } from "angular-intlayer/markdown";
+
+    export const appConfig: ApplicationConfig = {
+      providers: [
+        createIntlayerMarkdownProvider({
+          components: {
+            h1: { class: "text-2xl font-bold" },
+          },
+        }),
+      ],
+    };
+    ```
+
+
+    > MDX desteklenir — Markdown'ınızın içinde kullanılan herhangi bir bileşen adı (örn. `<MyCustomJSXComponent />`) `components` haritasına göre çözümlenir.
+
+    Kendi markdown oluşturucunuzu da kullanabilirsiniz:
+
+    ```typescript fileName="app.config.ts"
+    import { createIntlayerMarkdownProvider } from "angular-intlayer/markdown";
 
-    @NgModule({
-      imports: [
-        IntlayerMarkdownModule.forRoot({
+    export const appConfig: ApplicationConfig = {
+      providers: [
+        createIntlayerMarkdownProvider({
           renderMarkdown: async (md) => {
             const { renderMarkdown } = await import('angular-intlayer/markdown');
             return renderMarkdown(md);
-          }
-        })
-      ]
-    })
-    export class AppModule {}
+          },
+        }),
+      ],
+    };
     ```
 
     > Markdown oluşturucunuzu dinamik olarak içe aktarmak, uygulamanızın bundle boyutunu azaltmanın harika bir yoludur.
@@ -1047,7 +1064,7 @@ const MyComponent = () => {
 ```
 
   </Tab>
- 
+
   <Tab label="Vue" value="vue">
 
 Vue, yerleşik bir `<Suspense>` bileşenine sahiptir. Markdown içeriğini oluşturan bileşeni bir `<Suspense>` sınırına sarın.

package/docs/tr/dictionary/plurial.md

@@ -35,10 +35,74 @@ Kendi tanımladığınız sayısal aralıklara göre içerik seçen [`enu`](http
 
 ## Ne Zaman `plural` vs `enu` Kullanılmalı?
 
+To use plural content inside a React component, retrieve it via the `useIntlayer` hook and call it with a count. The active locale and the count are combined to pick the matching CLDR category.
+
+To use plural content in Next.js Client Components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
+
+## Çoğul İçeriği Ayarlama
+
+Intlayer projenizde çoğul içeriği ayarlamak için `plural` yardımcısını kullanan bir içerik modülü oluşturun. `other` kategorisi zorunludur ve bir yerel daha spesifik bir kategori tanımlamadığında yedek olarak kullanılır.
+
+```typescript fileName="**/*.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+import { plural, t, type Dictionary } from "intlayer";
+
+const openingsContent = {
+  key: "total_openings",
+  content: {
+    totalOpenings: t({
+      en: plural({
+        one: "{{count}} opening",
+        other: "{{count}} openings",
+      }),
+      tr: plural({
+        one: "{{count}} açık pozisyon",
+        other: "{{count}} açık pozisyon",
+      }),
+    }),
+  },
+} satisfies Dictionary;
+
+export default openingsContent;
+```
+
+```json fileName="**/*.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "total_openings",
+  "content": {
+    "totalOpenings": {
+      "nodeType": "translation",
+      "translation": {
+        "en": {
+          "nodeType": "plural",
+          "plural": {
+            "one": "{{count}} opening",
+            "other": "{{count}} openings"
+          }
+        },
+        "tr": {
+          "nodeType": "plural",
+          "plural": {
+            "one": "{{count}} açık pozisyon",
+            "other": "{{count}} açık pozisyon"
+          }
+        }
+      }
+    }
+  }
+}
+```
+
+> Desteklenen kategoriler `zero`, `one`, `two`, `few`, `many`, `other`'dır. Sadece hedef dilinizin kullandığı kategorileri beyan etmeniz yeterlidir, Intlayer, belirli bir kategori eşleşmediğinde `other` kategorisine geri döner.
+>
+> `{{count}}` yer tutucusu, çalışma zamanında ilettiğiniz sayıyla otomatik olarak değiştirilir. Diğer yer tutucuları da dahil edebilirsiniz (aşağıdaki [Özel yer tutucular](#custom-placeholders) bölümüne bakın).
+
+## React Intlayer ile Çoğul İçeriği Kullanma
+
 <Tabs group="framework">
   <Tab label="React" value="react">
 
-To use plural content inside a React component, retrieve it via the `useIntlayer` hook and call it with a count. The active locale and the count are combined to pick the matching CLDR category.
+React bileşeni içinde çoğul içeriği kullanmak için, `useIntlayer` kancası aracılığıyla içeriği alın ve bir sayıyla çağırın. Aktif yerel ve sayı, eşleşen CLDR kategorisini seçmek için birleştirilir.
 
 ```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
 import type { FC } from "react";
@@ -60,7 +124,7 @@ export default OpeningsComponent;
   </Tab>
   <Tab label="Next.js" value="nextjs">
 
-To use plural content in Next.js Client Components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
+Next.js Client Components'te çoğul içeriği kullanmak için, `useIntlayer` hook'u aracılığıyla alın ve bir sayı ile çağırın. İşte bir örnek:
 
 ```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
 "use client";
@@ -84,7 +148,7 @@ export default OpeningsComponent;
   </Tab>
   <Tab label="Vue" value="vue">
 
-To use plural content in Vue components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
+Vue bileşenlerinde çoğul içeriği kullanmak için, `useIntlayer` hook'u aracılığıyla alın ve bir sayma değeri ile çağırın. İşte bir örnek:
 
 ```vue fileName="**/*.vue"
 <script setup lang="ts">
@@ -105,7 +169,7 @@ const { totalOpenings } = useIntlayer("total_openings");
   </Tab>
   <Tab label="Svelte" value="svelte">
 
-To use plural content in Svelte components, retrieve it via the `useIntlayer` hook and call it with a count. The store is accessed with `$`. Here's an example:
+Svelte bileşenlerinde çoğul içeriği kullanmak için, `useIntlayer` hook'u aracılığıyla bunu alın ve bir sayaç ile çağırın. Store'a `$` ile erişilir. İşte bir örnek:
 
 ```svelte fileName="**/*.svelte"
 <script lang="ts">
@@ -124,17 +188,22 @@ const content = useIntlayer("total_openings");
   </Tab>
   <Tab label="Preact" value="preact">
 
-To use plural content in Preact components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
+Preact bileşenlerinde çoğul içeriği kullanmak için, `useIntlayer` hook'u aracılığıyla alın ve bir count ile çağırın. İşte bir örnek:
 
 ```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-import type { FC } from "preact";
-import { useIntlayer } from "preact-intlayer";
+import type { FC } from "react";
+import { useIntlayer } from "react-intlayer";
 
 const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
   const { totalOpenings } = useIntlayer("total_openings");
 
   return (
     <div>
+      {/* İngilizcede:                                 */}
+      {/*  count=0  → "0 openings"   (other)           */}
+      {/*  count=1  → "1 opening"    (one)             */}
+      {/*  count=2  → "2 openings"   (other)           */}
+      {/*  count=21 → "21 openings"  (other)           */}
       <p>{totalOpenings(count)}</p>
     </div>
   );
@@ -146,7 +215,7 @@ export default OpeningsComponent;
   </Tab>
   <Tab label="Solid" value="solid">
 
-To use plural content in SolidJS components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
+SolidJS bileşenlerinde çoğul içerik kullanmak için, `useIntlayer` hook'u aracılığıyla bunu alın ve bir sayı ile çağırın. İşte bir örnek:
 
 ```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
 import type { Component } from "solid-js";
@@ -168,7 +237,7 @@ export default OpeningsComponent;
   </Tab>
   <Tab label="Angular" value="angular">
 
-To use plural content in Angular components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
+Angular bileşenlerinde çoğul içerik kullanmak için, bunu `useIntlayer` hook'u aracılığıyla alın ve bir sayı ile çağırın. İşte bir örnek:
 
 ```typescript fileName="app.component.ts" codeFormat="typescript"
 import { Component, Input } from "@angular/core";
@@ -187,121 +256,20 @@ export class OpeningsComponent {
 
   content = useIntlayer("total_openings");
 }
-```
-
-  </Tab>
-  <Tab label="Vanilla JS" value="vanilla">
-
-To use plural content with `vanilla-intlayer`, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
-
-```typescript fileName="**/*.ts" codeFormat={["typescript", "esm"]}
-import { installIntlayer, useIntlayer } from "vanilla-intlayer";
-
-installIntlayer();
-
-const content = useIntlayer("total_openings").onChange((newContent) => {
-  document.getElementById("openings")!.textContent =
-    newContent.totalOpenings(5);
-});
-
-// Initial render
-document.getElementById("openings")!.textContent = content.totalOpenings(5);
-```
-
-  </Tab>
-</Tabs>
-
-## Çoğul İçeriği Ayarlama
-
-Intlayer projenizde çoğul içeriği ayarlamak için `plural` yardımcısını kullanan bir içerik modülü oluşturun. `other` kategorisi zorunludur ve bir yerel daha spesifik bir kategori tanımlamadığında yedek olarak kullanılır.
-
-```typescript fileName="**/*.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
-import { plural, t, type Dictionary } from "intlayer";
-
-const openingsContent = {
-  key: "total_openings",
-  content: {
-    totalOpenings: t({
-      en: plural({
-        one: "{{count}} opening",
-        other: "{{count}} openings",
-      }),
-      tr: plural({
-        one: "{{count}} açık pozisyon",
-        other: "{{count}} açık pozisyon",
-      }),
-    }),
-  },
-} satisfies Dictionary;
-
-export default openingsContent;
-```
-
-```json fileName="**/*.content.json" contentDeclarationFormat="json"
-{
-  "$schema": "https://intlayer.org/schema.json",
-  "key": "total_openings",
-  "content": {
-    "totalOpenings": {
-      "nodeType": "translation",
-      "translation": {
-        "en": {
-          "nodeType": "plural",
-          "plural": {
-            "one": "{{count}} opening",
-            "other": "{{count}} openings"
-          }
-        },
-        "tr": {
-          "nodeType": "plural",
-          "plural": {
-            "one": "{{count}} açık pozisyon",
-            "other": "{{count}} açık pozisyon"
-          }
-        }
-      }
-    }
-  }
-}
-```
-
-> Desteklenen kategoriler `zero`, `one`, `two`, `few`, `many`, `other`'dır. Sadece hedef dilinizin kullandığı kategorileri beyan etmeniz yeterlidir, Intlayer, belirli bir kategori eşleşmediğinde `other` kategorisine geri döner.
->
-> `{{count}}` yer tutucusu, çalışma zamanında ilettiğiniz sayıyla otomatik olarak değiştirilir. Diğer yer tutucuları da dahil edebilirsiniz (aşağıdaki [Özel yer tutucular](#custom-placeholders) bölümüne bakın).
-
-## React Intlayer ile Çoğul İçeriği Kullanma
-
-React bileşeni içinde çoğul içeriği kullanmak için, `useIntlayer` kancası aracılığıyla içeriği alın ve bir sayıyla çağırın. Aktif yerel ve sayı, eşleşen CLDR kategorisini seçmek için birleştirilir.
-
-```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-import type { FC } from "react";
-import { useIntlayer } from "react-intlayer";
-
-const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
-  const { totalOpenings } = useIntlayer("total_openings");
-
-  return (
-    <div>
-      {/* İngilizcede:                                 */}
-      {/*  count=0  → "0 openings"   (other)           */}
-      {/*  count=1  → "1 opening"    (one)             */}
-      {/*  count=2  → "2 openings"   (other)           */}
-      {/*  count=21 → "21 openings"  (other)           */}
-      <p>{totalOpenings(count)}</p>
-    </div>
-  );
-};
-
-export default OpeningsComponent;
 ```
 
 Döndürülen işlevi iki eşdeğer şekilde çağırabilirsiniz:
 
+`vanilla-intlayer` ile çoğul içeriği kullanmak için, `useIntlayer` hook'u aracılığıyla içeriği alın ve bir sayı ile çağırın. İşte bir örnek:
+
 ```tsx
 totalOpenings(21); // kısa yol: sadece sayı
 totalOpenings({ count: 21 }); // açık form
 ```
 
+  </Tab>
+</Tabs>
+
 ## Özel yer tutucular
 
 Çoğul dizeler `{{count}}` dışındaki yer tutucuları içerebilir. Bunları `count` ile birlikte nesne formunda iletin:

package/docs/tr/dynamic_dictionaries/variants.md

@@ -523,6 +523,27 @@ Bunun yerine varyantı sağlayıcıda bir kez bildirin, tıpkı `locale` gibi:
 
   </Tab>
   <Tab label="Next.js" value="nextjs">
+    <Tabs>
+      <Tab label="Intlayer >=9.4" value=">=9.4">
+
+        ```tsx fileName="layout.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+        import { IntlayerProvider } from "next-intlayer/server";
+
+        export default async function Layout({ children, params }) {
+          const { locale } = await params;
+          const schoolType = await getSchoolType();
+
+          return (
+            <IntlayerProvider locale={locale} variant={schoolType}>
+              {children}
+            </IntlayerProvider>
+          );
+        }
+        ```
+
+      </Tab>
+      <Tab label="Intlayer <9.4" value="<9.4">
+
     ```tsx fileName="layout.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
     import { IntlayerServerProvider } from "next-intlayer/server";
     import { IntlayerClientProvider } from "next-intlayer";
@@ -541,6 +562,9 @@ Bunun yerine varyantı sağlayıcıda bir kez bildirin, tıpkı `locale` gibi:
     }
     ```
 
+      </Tab>
+    </Tabs>
+
   </Tab>
   <Tab label="Vue" value="vue">
     ```ts fileName="main.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}