@intlayer/docs 8.10.0-canary.1 → 8.10.1

package/docs/tr/dictionary/markdown.md

@@ -95,34 +95,34 @@ Markdown içeriğini `md` işlevini kullanarak veya basitçe bir dize olarak (Ma
     ```
 
   </Tab>
-  <Tab label="Otomatik Algılama" value="automatic-detection">
-    Dize ortak Markdown göstergeleri (başlıklar, listeler, bağlantılar vb.) içeriyorsa, Intlayer bunu otomatik olarak dönüştürecektir.
+  <Tab label="Harici Dosyalar" value="external-files">
+    `.md` dosyalarını doğrudan `file` işlevini kullanarak içe aktarın.
 
     ```typescript fileName="markdownDictionary.content.ts"
+    import { md, file, t } from "intlayer";
+
     export default {
       key: "app",
-      contentAutoTransformation: true, // Markdown içeriğinin otomatik algılanmasını etkinleştir - intlayer.config.ts dosyasında global olarak ayarlanabilir
       content: {
-        myMarkdownContent: "## Başlığım \n\nLorem Ipsum",
+        content: t({
+          en: md(file("./myMarkdown.en.md")),
+          tr: md(file("./myMarkdown.tr.md")),
+        }),
       },
     };
     ```
 
   </Tab>
 
-  <Tab label="Harici Dosyalar" value="external-files">
-    `.md` dosyalarını doğrudan `file` işlevini kullanarak içe aktarın.
+  <Tab label="Otomatik Algılama" value="automatic-detection">
+    Dize ortak Markdown göstergeleri (başlıklar, listeler, bağlantılar vb.) içeriyorsa, Intlayer bunu otomatik olarak dönüştürecektir.
 
     ```typescript fileName="markdownDictionary.content.ts"
-    import { md, file, t } from "intlayer";
-
     export default {
       key: "app",
+      contentAutoTransformation: true, // Markdown içeriğinin otomatik algılanmasını etkinleştir - intlayer.config.ts dosyasında global olarak ayarlanabilir
       content: {
-        content: t({
-          en: md(file("./myMarkdown.en.md")),
-          tr: md(file("./myMarkdown.tr.md")),
-        }),
+        myMarkdownContent: "## Başlığım \n\nLorem Ipsum",
       },
     };
     ```
@@ -130,8 +130,6 @@ Markdown içeriğini `md` işlevini kullanarak veya basitçe bir dize olarak (Ma
   </Tab>
 </Tabs>
 
----
-
 ## Markdown'u İşleme (Rendering)
 
 Intlayer, Markdown'ı işlemek için iki bağımsız yol sağlar:
@@ -147,7 +145,7 @@ Markdown oluşturma **MDX**'i destekler — Markdown'ınızın içinde doğrudan
 ### 1. Otomatik İşleme (`useIntlayer` aracılığıyla)
 
 <Tabs group="framework">
-  <Tab label="React / Next.js" value="react">
+  <Tab label="React" value="react">
     Markdown düğümleri doğrudan JSX olarak işlenebilir.
 
     ```tsx fileName="App.tsx"
@@ -197,6 +195,57 @@ Markdown oluşturma **MDX**'i destekler — Markdown'ınızın içinde doğrudan
     {myMarkdownContent.metadata.title}
     ```
 
+  </Tab>
+  <Tab label="Next.js" value="nextjs">
+    Markdown düğümleri doğrudan JSX olarak işlenebilir.
+
+    ```tsx fileName="App.tsx"
+    import { useIntlayer } from "next-intlayer";
+    import { MarkdownProvider } from "next-intlayer/markdown";
+
+    const AppContent = () => {
+      const { myMarkdownContent } = useIntlayer("app");
+
+      return <div>{myMarkdownContent}</div>;
+    };
+
+    const App = () => (
+      <MarkdownProvider
+        components={{
+          h1: ({ children }) => <h1 style={{ color: "red" }}>{children}</h1>,
+          MyButton: (props) => <button {...props} />, // MDX Bileşeni
+        }}
+      >
+        <AppContent />
+      </MarkdownProvider>
+    );
+    ```
+
+    > `MarkdownProvider` mevcut değilse, Intlayer varsayılan Markdown - JSX ayrıştırıcısını kullanarak markdown'ı oluşturacaktır.
+
+    Ayrıca `.use()` yöntemini kullanarak belirli düğümler için yerel geçersiz kılmalar sağlayabilirsiniz:
+
+    ```tsx
+    {myMarkdownContent.use({
+      h1: ({ children }) => <h1 style={{ color: "red" }}>{children}</h1>,
+    })}
+    ```
+
+    Markdown'ı bir dize olarak alabilirsiniz:
+
+    ```tsx
+    {myMarkdownContent.value}
+    {String(myMarkdownContent)}
+    {myMarkdownContent.toString()}
+    ```
+
+    Ve markdown meta verilerinize şu şekilde erişebilirsiniz:
+
+    ```tsx
+    {myMarkdownContent.metadata}
+    {myMarkdownContent.metadata.title}
+    ```
+
   </Tab>
   <Tab label="Vue" value="vue">
     Vue'da, Markdown içeriği yerleşik `component` etiketi kullanılarak veya doğrudan bir düğüm olarak oluşturulabilir.
@@ -441,7 +490,7 @@ Markdown oluşturma **MDX**'i destekler — Markdown'ınızın içinde doğrudan
 Bu yardımcı programlar **yalnızca ham Markdown dizelerini** oluşturur ve `useIntlayer`'dan bağımsızdır. Markdown'ı sözlükleriniz dışındaki kaynaklardan oluşturmanız gerektiğinde bunları kullanın.
 
 <Tabs group="framework">
-  <Tab label="React / Next.js" value="react">
+  <Tab label="React" value="react">
   
     #### `<MarkdownRenderer />` Bileşeni
 
@@ -479,6 +528,45 @@ Bu yardımcı programlar **yalnızca ham Markdown dizelerini** oluşturur ve `us
     const jsx = renderMarkdown("# Başlığım", { forceBlock: true });
     ```
 
+  </Tab>
+  <Tab label="Next.js" value="nextjs">
+  
+    #### `<MarkdownRenderer />` Bileşeni
+
+    Belirli seçeneklerle bir Markdown dizesini oluşturur.
+
+    ```tsx
+    import { MarkdownRenderer } from "next-intlayer/markdown";
+
+    <MarkdownRenderer forceBlock={true} tagfilter={true}>
+      {"# Başlığım"}
+    </MarkdownRenderer>
+    ```
+
+    #### `useMarkdownRenderer()` Kancası
+
+    Önceden yapılandırılmış bir oluşturucu işlevi alın.
+
+    ```tsx
+    import { useMarkdownRenderer } from "next-intlayer/markdown";
+
+    const renderMarkdown = useMarkdownRenderer({
+      forceBlock: true,
+      components: { h1: (props) => <h1 {...props} className="custom" /> }
+    });
+
+    return renderMarkdown("# Başlığım");
+    ```
+
+    #### `renderMarkdown()` Yardımcı Programı
+    Bileşenler dışında oluşturmak için bağımsız yardımcı program.
+
+    ```tsx
+    import { renderMarkdown } from "next-intlayer/markdown";
+
+    const jsx = renderMarkdown("# Başlığım", { forceBlock: true });
+    ```
+
   </Tab>
   <Tab label="Vue" value="vue">
 
@@ -608,14 +696,12 @@ Bu yardımcı programlar **yalnızca ham Markdown dizelerini** oluşturur ve `us
   </Tab>
 </Tabs>
 
----
-
 ## `MarkdownProvider` ile Global Yapılandırma
 
 `MarkdownProvider` (veya çerçeve eşdeğeri), tüm uygulamanız için Markdown oluşturma işlem hattını yapılandırır. Bu hem otomatik `useIntlayer` oluşturma işlemleri hem de yardımcı araçlar için geçerlidir. Burada ayarlanan seçenekler varsayılanlardır — `.use()` bunları düğüm düzeyinde geçersiz kılar.
 
 <Tabs group="framework">
-  <Tab label="React / Next.js" value="react">
+  <Tab label="React" value="react">
 
     ```tsx fileName="AppProvider.tsx"
     import { MarkdownProvider } from "react-intlayer/markdown";
@@ -633,6 +719,7 @@ Bu yardımcı programlar **yalnızca ham Markdown dizelerini** oluşturur ve `us
     );
     ```
 
+
     > 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:
@@ -643,6 +730,7 @@ Bu yardımcı programlar **yalnızca ham Markdown dizelerini** oluşturur ve `us
     export const AppProvider = ({ children }) => (
       <MarkdownProvider
         renderMarkdown={async (md) => {
+          // Use dynamic import to reduce the bundle size of your application
           const { renderMarkdown } = await import('react-intlayer/markdown');
           return renderMarkdown(md);
         }}
@@ -654,6 +742,48 @@ Bu yardımcı programlar **yalnızca ham Markdown dizelerini** oluşturur ve `us
 
     > Markdown oluşturucunuzu dinamik olarak içe aktarmak, uygulamanızın paket boyutunu azaltmanın harika bir yoludur.
 
+  </Tab>
+  <Tab label="Next.js" value="nextjs">
+
+    ```tsx fileName="AppProvider.tsx"
+    import { MarkdownProvider } from "next-intlayer/markdown";
+
+    export const AppProvider = ({ children }) => (
+      <MarkdownProvider
+        components={{
+          h1: (props) => <h1 style={{color: 'green'}} {...props} />,
+          a: ({ href, ...props }) => <a style={{color: 'red'}} {...props} />,
+          MyCustomJSXComponent: (props) => <span style={{color: 'red'}} {...props} />,
+        }}
+      >
+        {children}
+      </MarkdownProvider>
+    );
+    ```
+
+
+    > 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:
+
+    ```tsx fileName="AppProvider.tsx"
+    import { MarkdownProvider } from "next-intlayer/markdown";
+
+    export const AppProvider = ({ children }) => (
+      <MarkdownProvider
+        renderMarkdown={async (md) => {
+          // Use dynamic import to reduce the bundle size of your application
+          const { renderMarkdown } = await import('next-intlayer/markdown');
+          return renderMarkdown(md);
+        }}
+      >
+        {children}
+      </MarkdownProvider>
+    );
+    ```
+
+    > Markdown oluşturucunuzu dinamik olarak içe aktarmak, uygulamanızın paket boyutunu azaltmanın harika bir yoludur.
+
   </Tab>
   <Tab label="Vue" value="vue">
 
@@ -679,6 +809,9 @@ Bu yardımcı programlar **yalnızca ham Markdown dizelerini** oluşturur ve `us
     app.mount("#app");
     ```
 
+
+    > 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="main.ts"
@@ -720,6 +853,9 @@ Bu yardımcı programlar **yalnızca ham Markdown dizelerini** oluşturur ve `us
     </MarkdownProvider>
     ```
 
+
+    > 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:
 
     ```svelte fileName="App.svelte"
@@ -756,6 +892,9 @@ Bu yardımcı programlar **yalnızca ham Markdown dizelerini** oluşturur ve `us
     );
     ```
 
+
+    > 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:
 
     ```tsx fileName="AppProvider.tsx"
@@ -792,6 +931,9 @@ Bu yardımcı programlar **yalnızca ham Markdown dizelerini** oluşturur ve `us
     );
     ```
 
+
+    > 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:
 
     ```tsx fileName="AppProvider.tsx"
@@ -835,3 +977,191 @@ Bu yardımcı programlar **yalnızca ham Markdown dizelerini** oluşturur ve `us
 
   </Tab>
 </Tabs>
+
+## Suspense
+
+Intlayer Markdown oluşturucu dinamik olarak yüklenir. Optimize edilmiş olmasına rağmen, temel ayrıştırıcı parçası yaklaşık 55 kb'dir. Bunu senkron olarak yüklemek, ilk sayfa oluşturulmasını geciktirir ve First Contentful Paint'i (FCP) bozar.
+
+UI engellemesini önlemek için, Intlayer React'in Suspense API'si ile entegre olur. Arka planda ayrıştırıcıyı getirir ve indirme sırasında bir Promise fırlatır.
+
+Intlayer Markdown'ı oluşturan herhangi bir bileşeni bir `<Suspense>` sınırına sarın. Bu, parça indirilirken yerelleştirilmiş bir geri dönüş durumunu göstererek DOM'nizin geri kalanının anında oluşturulmasına izin verir.
+
+Uyarı: Bir `<Suspense>` sınırı sağlamazsanız, React 55 kb'lik parça tam olarak yüklenene kadar kök seviyesinde askıya alınır veya tüm bileşen ağacının oluşturulmasını engeller.
+
+<Tabs>
+  <Tab label="Next.js" value="nextjs">
+
+Next.js App Router'da, istemci bileşenleri için React `Suspense`'i veya sunucu bileşenleri için bir `loading.tsx` dosyası kullanabilirsiniz.
+
+**İstemci Bileşeni:**
+
+```tsx fileName="components/MyComponent.tsx"
+"use client";
+import { useIntlayer } from "next-intlayer";
+import { Suspense } from "react";
+
+const MyComponent = () => {
+  const markdownContent = useIntlayer("my-markdown");
+
+  return (
+    <Suspense fallback={<div>Loading...</div>}>{markdownContent}</Suspense>
+  );
+};
+```
+
+**`loading.tsx` ile Sunucu Bileşeni:**
+
+```tsx fileName="app/loading.tsx"
+export default function Loading() {
+  return <div>Loading...</div>;
+}
+```
+
+```tsx fileName="app/page.tsx"
+import { useIntlayer } from "next-intlayer/server";
+
+const MyPage = () => {
+  const markdownContent = useIntlayer("my-markdown");
+  return <div>{markdownContent}</div>;
+};
+
+export default MyPage;
+```
+
+  </Tab>
+
+  <Tab label="React" value="react">
+
+```tsx
+import { useIntlayer } from "react-intlayer";
+import { Suspense } from "react";
+
+const MyComponent = () => {
+  const markdownContent = useIntlayer("my-markdown");
+
+  return (
+    <Suspense fallback={<div>Loading...</div>}>{markdownContent}</Suspense>
+  );
+};
+```
+
+  </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.
+
+```vue fileName="MyComponent.vue"
+<script setup>
+import { useIntlayer } from "vue-intlayer";
+
+const { markdownContent } = useIntlayer("my-markdown");
+</script>
+
+<template>
+  <Suspense>
+    <component :is="markdownContent" />
+    <template #fallback>
+      <div>Loading...</div>
+    </template>
+  </Suspense>
+</template>
+```
+
+  </Tab>
+  <Tab label="Svelte" value="svelte">
+
+Svelte'nin bir Suspense API eşdeğeri yoktur. Markdown içeriğinin asenkron olarak oluşturulmasını işlemek için bir `{#await}` bloğu kullanın.
+
+```svelte fileName="MyComponent.svelte"
+<script lang="ts">
+import { useIntlayer } from "svelte-intlayer";
+
+const content = useIntlayer("my-markdown");
+</script>
+
+{#await $content.markdownContent}
+  <div>Loading...</div>
+{:then rendered}
+  {@html rendered}
+{/await}
+```
+
+  </Tab>
+  <Tab label="Preact" value="preact">
+
+Preact, `preact/compat` aracılığıyla React'in Suspense API'sini destekler.
+
+```tsx fileName="MyComponent.tsx"
+import { useIntlayer } from "preact-intlayer";
+import { Suspense } from "preact/compat";
+
+const MyComponent = () => {
+  const markdownContent = useIntlayer("my-markdown");
+
+  return (
+    <Suspense fallback={<div>Loading...</div>}>{markdownContent}</Suspense>
+  );
+};
+```
+
+  </Tab>
+  <Tab label="Solid" value="solid">
+
+Solid, `solid-js`'den kendi `<Suspense>` bileşenine sahiptir.
+
+```tsx fileName="MyComponent.tsx"
+import { useIntlayer } from "solid-intlayer";
+import { Suspense } from "solid-js";
+
+const MyComponent = () => {
+  const { markdownContent } = useIntlayer("my-markdown");
+
+  return (
+    <Suspense fallback={<div>Loading...</div>}>{markdownContent}</Suspense>
+  );
+};
+```
+
+  </Tab>
+  <Tab label="Angular" value="angular">
+
+Angular'da bir Suspense API'si yoktur. Geç yüklenen Markdown içeriğini işlemek için Angular'ın ertelenebilir görünümlerini (`@defer`) kullanın (Angular 17+ gerektirir).
+
+```typescript fileName="my.component.ts"
+import { Component } from "@angular/core";
+import { useIntlayer } from "angular-intlayer";
+
+@Component({
+  selector: "app-my",
+  template: `
+    @defer {
+      <div [innerHTML]="content().markdownContent"></div>
+    } @loading {
+      <div>Loading...</div>
+    }
+  `,
+})
+export class MyComponent {
+  content = useIntlayer("my-markdown");
+}
+```
+
+  </Tab>
+</Tabs>
+
+---
+
+## Seçenek Referansı
+
+Bu seçenekler `MarkdownProvider`, `MarkdownRenderer`, `useMarkdownRenderer` ve `renderMarkdown`a iletilebilir.
+
+| Option                | Type        | Default | Açıklama                                                                                               |
+| :-------------------- | :---------- | :------ | :----------------------------------------------------------------------------------------------------- |
+| `forceBlock`          | `boolean`   | `false` | Çıktının bir blok düzeyinde öğeye (örn. `<div>`) sarılmasını zorlar.                                   |
+| `forceInline`         | `boolean`   | `false` | Çıktının bir satır içi öğeye (örn. `<span>`) sarılmasını zorlar.                                       |
+| `tagfilter`           | `boolean`   | `true`  | Tehlikeli HTML etiketlerini kaldırarak güvenliği artırmak için GitHub Etiket Filtresini etkinleştirir. |
+| `preserveFrontmatter` | `boolean`   | `false` | `true` ise, Markdown dizesinin başındaki frontmatter kaldırılmaz.                                      |
+| `components`          | `Overrides` | `{}`    | HTML etiketlerinden özel bileşenlere bir eşleme (örn. `{ h1: MyHeading }`).                            |
+| `wrapper`             | `Component` | `null`  | Oluşturulan Markdown'u sarmak için özel bir bileşen.                                                   |
+| `renderMarkdown`      | `Function`  | `null`  | Varsayılan Markdown derleyicisini tamamen değiştirmek için özel bir oluşturma işlevi.                  |

package/docs/tr/interest_of_intlayer.md

@@ -224,7 +224,7 @@ Bu yaklaşım şunları yapmanıza olanak tanır:
 
 GitHub yıldızları, bir projenin popülerliğinin, topluluk güveninin ve uzun vadeli alakasının güçlü bir göstergesidir. Teknik kalitenin doğrudan bir ölçüsü olmasa da, kaç geliştiricinin projeyi yararlı bulduğunu, ilerlemesini takip ettiğini ve benimseme olasılığını yansıtır. Bir projenin değerini tahmin etmek için yıldızlar, alternatifler arasındaki çekişi karşılaştırmaya yardımcı olur ve ekosistem büyümesi hakkında içgörüler sağlar.
 
-[![Star History Chart](https://api.star-history.com/chart?repos=formatjs/formatjs%2Ci18next/react-i18next%2Ci18next/i18next%2Ci18next/next-i18next%2Clingui/js-lingui%2Camannn/next-intl%2Cintlify/vue-i18n%2Caymericzip/intlayer%2Copral/inlang&type=date&legend=top-left)](https://www.star-history.com/#formatjs/formatjs&i18next/react-i18next&i18next/i18next&i18next/next-i18next&lingui/js-lingui&amannn/next-intl&intlify/vue-i18n&opral/paraglide-js&aymericzip/intlayer)
+[![Star History Chart](https://api.star-history.com/chart?repos=aymericzip/intlayer%2Cformatjs/formatjs%2Ci18next/react-i18next%2Ci18next/i18next%2Ci18next/next-i18next%2Clingui/js-lingui%2Camannn/next-intl%2Cintlify/vue-i18n%2Ccodingcommons/typesafe-i18n%2Copral/paraglide-js&type=date&legend=top-left)](https://www.star-history.com/#aymericzip/intlayer&formatjs/formatjs&i18next/react-i18next&i18next/i18next&i18next/next-i18next&lingui/js-lingui&amannn/next-intl&intlify/vue-i18n&codingcommons/typesafe-i18n&opral/paraglide-js)
 
 ---