@intlayer/docs 8.10.0-canary.1 → 8.10.1

package/docs/hi/dictionary/markdown.md

@@ -95,34 +95,34 @@ Intlayer Markdown सिंटैक्स का उपयोग करके
     ```
 
   </Tab>
-  <Tab label="स्वचालित पहचान" value="automatic-detection">
-    यदि स्ट्रिंग में सामान्य Markdown संकेतक (जैसे हेडिंग, लिस्ट, लिंक आदि) हैं, तो Intlayer स्वचालित रूप से इसे बदल देगा।
+  <Tab label="बाहरी फ़ाइलें" value="external-files">
+    `file` फ़ंक्शन का उपयोग करके सीधे `.md` फ़ाइलें आयात करें।
 
     ```typescript fileName="markdownDictionary.content.ts"
+    import { md, file, t } from "intlayer";
+
     export default {
       key: "app",
-      contentAutoTransformation: true, // Markdown सामग्री की स्वचालित पहचान सक्षम करें - intlayer.config.ts में विश्व स्तर पर सेट किया जा सकता है
       content: {
-        myMarkdownContent: "## मेरा शीर्षक \n\nLorem Ipsum",
+        content: t({
+          en: md(file("./myMarkdown.en.md")),
+          hi: md(file("./myMarkdown.hi.md")),
+        }),
       },
     };
     ```
 
   </Tab>
 
-  <Tab label="बाहरी फ़ाइलें" value="external-files">
-    `file` फ़ंक्शन का उपयोग करके सीधे `.md` फ़ाइलें आयात करें।
+  <Tab label="स्वचालित पहचान" value="automatic-detection">
+    यदि स्ट्रिंग में सामान्य Markdown संकेतक (जैसे हेडिंग, लिस्ट, लिंक आदि) हैं, तो Intlayer स्वचालित रूप से इसे बदल देगा।
 
     ```typescript fileName="markdownDictionary.content.ts"
-    import { md, file, t } from "intlayer";
-
     export default {
       key: "app",
+      contentAutoTransformation: true, // Markdown सामग्री की स्वचालित पहचान सक्षम करें - intlayer.config.ts में विश्व स्तर पर सेट किया जा सकता है
       content: {
-        content: t({
-          en: md(file("./myMarkdown.en.md")),
-          hi: md(file("./myMarkdown.hi.md")),
-        }),
+        myMarkdownContent: "## मेरा शीर्षक \n\nLorem Ipsum",
       },
     };
     ```
@@ -130,8 +130,6 @@ Intlayer Markdown सिंटैक्स का उपयोग करके
   </Tab>
 </Tabs>
 
----
-
 ## Markdown रेंडरिंग
 
 Intlayer Markdown रेंडर करने के दो स्वतंत्र तरीके प्रदान करता है:
@@ -147,7 +145,7 @@ Markdown रेंडरिंग **MDX** का समर्थन करता
 ### 1. स्वचालित रेंडरिंग (`useIntlayer` के माध्यम से)
 
 <Tabs group="framework">
-  <Tab label="React / Next.js" value="react">
+  <Tab label="React" value="react">
     Markdown नोड्स को सीधे JSX के रूप में रेंडर किया जा सकता है।
 
     ```tsx fileName="App.tsx"
@@ -197,6 +195,57 @@ Markdown रेंडरिंग **MDX** का समर्थन करता
     {myMarkdownContent.metadata.title}
     ```
 
+  </Tab>
+  <Tab label="Next.js" value="nextjs">
+    Markdown नोड्स को सीधे JSX के रूप में रेंडर किया जा सकता है।
+
+    ```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 घटक
+        }}
+      >
+        <AppContent />
+      </MarkdownProvider>
+    );
+    ```
+
+    > यदि `MarkdownProvider` मौजूद नहीं है, तो Intlayer डिफ़ॉल्ट Markdown से JSX पार्सर का उपयोग करके मार्कडाउन को रेंडर करेगा।
+
+    आप `.use()` विधि का उपयोग करके विशिष्ट नोड्स के लिए स्थानीय ओवरराइड भी प्रदान कर सकते हैं:
+
+    ```tsx
+    {myMarkdownContent.use({
+      h1: ({ children }) => <h1 style={{ color: "red" }}>{children}</h1>,
+    })}
+    ```
+
+    आप Markdown को एक स्ट्रिंग के रूप में प्राप्त कर सकते हैं:
+
+    ```tsx
+    {myMarkdownContent.value}
+    {String(myMarkdownContent)}
+    {myMarkdownContent.toString()}
+    ```
+
+    और आप अपने मार्कडाउन मेटाडेटा तक इस प्रकार पहुँच सकते हैं:
+
+    ```tsx
+    {myMarkdownContent.metadata}
+    {myMarkdownContent.metadata.title}
+    ```
+
   </Tab>
   <Tab label="Vue" value="vue">
     Vue में, Markdown सामग्री को अंतर्निहित `component` टैग का उपयोग करके या सीधे एक नोड के रूप में रेंडर किया जा सकता है।
@@ -441,7 +490,7 @@ Markdown रेंडरिंग **MDX** का समर्थन करता
 ये यूटिलिटीज **केवल कच्चे Markdown स्ट्रिंग्स** को रेंडर करती हैं और `useIntlayer` से स्वतंत्र हैं। जब आपको अपने डिक्शनरी के अलावा अन्य स्रोतों से Markdown रेंडर करने की आवश्यकता हो, तो इनका उपयोग करें।
 
 <Tabs group="framework">
-  <Tab label="React / Next.js" value="react">
+  <Tab label="React" value="react">
   
     #### `<MarkdownRenderer />` घटक
 
@@ -479,6 +528,45 @@ Markdown रेंडरिंग **MDX** का समर्थन करता
     const jsx = renderMarkdown("# मेरा शीर्षक", { forceBlock: true });
     ```
 
+  </Tab>
+  <Tab label="Next.js" value="nextjs">
+  
+    #### `<MarkdownRenderer />` घटक
+
+    विशिष्ट विकल्पों के साथ एक Markdown स्ट्रिंग रेंडर करता है।
+
+    ```tsx
+    import { MarkdownRenderer } from "next-intlayer/markdown";
+
+    <MarkdownRenderer forceBlock={true} tagfilter={true}>
+      {"# मेरा शीर्षक"}
+    </MarkdownRenderer>
+    ```
+
+    #### `useMarkdownRenderer()` हुक
+
+    पूर्व-कॉन्फ़िगर रेंडरर फ़ंक्शन प्राप्त करें।
+
+    ```tsx
+    import { useMarkdownRenderer } from "next-intlayer/markdown";
+
+    const renderMarkdown = useMarkdownRenderer({
+      forceBlock: true,
+      components: { h1: (props) => <h1 {...props} className="custom" /> }
+    });
+
+    return renderMarkdown("# मेरा शीर्षक");
+    ```
+
+    #### `renderMarkdown()` उपयोगिता
+    घटकों के बाहर रेंडरिंग के लिए स्टैंडअलोन उपयोगिता।
+
+    ```tsx
+    import { renderMarkdown } from "next-intlayer/markdown";
+
+    const jsx = renderMarkdown("# मेरा शीर्षक", { forceBlock: true });
+    ```
+
   </Tab>
   <Tab label="Vue" value="vue">
 
@@ -608,14 +696,12 @@ Markdown रेंडरिंग **MDX** का समर्थन करता
   </Tab>
 </Tabs>
 
----
-
 ## `MarkdownProvider` के साथ ग्लोबल कॉन्फ़िगरेशन
 
 `MarkdownProvider` (या इसके फ्रेमवर्क समतुल्य) आपके संपूर्ण एप्लिकेशन के लिए Markdown रेंडरिंग पाइपलाइन को कॉन्फ़िगर करता है। यह स्वचालित `useIntlayer` रेंडरिंग और हेल्पर यूटिलिटीज दोनों पर लागू होता है। यहाँ सेट किए गए विकल्प डिफ़ॉल्ट हैं — `.use()` उन्हें नोड स्तर पर ओवरराइड करता है।
 
 <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 @@ Markdown रेंडरिंग **MDX** का समर्थन करता
     );
     ```
 
+
     > MDX समर्थित है — आपके Markdown के अंदर उपयोग किए गए किसी भी घटक नाम (उदा. `<MyCustomJSXComponent />`) को `components` मानचित्र के विरुद्ध हल किया जाता है।
 
     आप अपने स्वयं के मार्कडाउन रेंडरर का भी उपयोग कर सकते हैं:
@@ -643,6 +730,7 @@ Markdown रेंडरिंग **MDX** का समर्थन करता
     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 @@ Markdown रेंडरिंग **MDX** का समर्थन करता
 
     > अपने Markdown रेंडरर को गतिशील रूप से आयात करना आपके एप्लिकेशन के बंडल आकार को कम करने का एक शानदार तरीका है।
 
+  </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 समर्थित है — आपके Markdown के अंदर उपयोग किए गए किसी भी घटक नाम (उदा. `<MyCustomJSXComponent />`) को `components` मानचित्र के विरुद्ध हल किया जाता है।
+
+    आप अपने स्वयं के मार्कडाउन रेंडरर का भी उपयोग कर सकते हैं:
+
+    ```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 रेंडरर को गतिशील रूप से आयात करना आपके एप्लिकेशन के बंडल आकार को कम करने का एक शानदार तरीका है।
+
   </Tab>
   <Tab label="Vue" value="vue">
 
@@ -679,6 +809,9 @@ Markdown रेंडरिंग **MDX** का समर्थन करता
     app.mount("#app");
     ```
 
+
+    > MDX समर्थित है — आपके Markdown के अंदर उपयोग किए गए किसी भी घटक नाम (उदा. `<MyCustomJSXComponent />`) को `components` मानचित्र के विरुद्ध हल किया जाता है।
+
     आप अपने स्वयं के मार्कडाउन रेंडरर का भी उपयोग कर सकते हैं:
 
     ```typescript fileName="main.ts"
@@ -720,6 +853,9 @@ Markdown रेंडरिंग **MDX** का समर्थन करता
     </MarkdownProvider>
     ```
 
+
+    > MDX समर्थित है — आपके Markdown के अंदर उपयोग किए गए किसी भी घटक नाम (उदा. `<MyCustomJSXComponent />`) को `components` मानचित्र के विरुद्ध हल किया जाता है।
+
     आप अपने स्वयं के मार्कडाउन रेंडरर का भी उपयोग कर सकते हैं:
 
     ```svelte fileName="App.svelte"
@@ -756,6 +892,9 @@ Markdown रेंडरिंग **MDX** का समर्थन करता
     );
     ```
 
+
+    > MDX समर्थित है — आपके Markdown के अंदर उपयोग किए गए किसी भी घटक नाम (उदा. `<MyCustomJSXComponent />`) को `components` मानचित्र के विरुद्ध हल किया जाता है।
+
     आप अपने स्वयं के मार्कडाउन रेंडरर का भी उपयोग कर सकते हैं:
 
     ```tsx fileName="AppProvider.tsx"
@@ -792,6 +931,9 @@ Markdown रेंडरिंग **MDX** का समर्थन करता
     );
     ```
 
+
+    > MDX समर्थित है — आपके Markdown के अंदर उपयोग किए गए किसी भी घटक नाम (उदा. `<MyCustomJSXComponent />`) को `components` मानचित्र के विरुद्ध हल किया जाता है।
+
     आप अपने स्वयं के मार्कडाउन रेंडरर का भी उपयोग कर सकते हैं:
 
     ```tsx fileName="AppProvider.tsx"
@@ -835,3 +977,191 @@ Markdown रेंडरिंग **MDX** का समर्थन करता
 
   </Tab>
 </Tabs>
+
+## सस्पेंस (Suspense)
+
+Intlayer Markdown रेंडरर गतिशील रूप से लोड किया गया है। अनुकूलित होने के बावजूद, अंतर्निहित पार्सर चंक लगभग 55kb है। इसे सिंक्रोनस रूप से लोड करने से प्रारंभिक पृष्ठ रेंडरिंग में देरी होती है और First Contentful Paint (FCP) कम हो जाता है।
+
+UI को ब्लॉक होने से रोकने के लिए, Intlayer React के Suspense API के साथ एकीकृत होता है। यह पार्सर को पृष्ठभूमि में लाता है और डाउनलोड के दौरान एक Promise थ्रो करता है।
+
+Intlayer Markdown रेंडर करने वाले किसी भी घटक को `<Suspense>` बाउंड्री में लपेटें। यह चंक डाउनलोड होने के दौरान एक स्थानीयकृत फ़ॉलबैक स्थिति प्रदर्शित करता है, जिससे आपके शेष DOM को तुरंत रेंडर करने की अनुमति मिलती है।
+
+चेतावनी: यदि आप `<Suspense>` बाउंड्री प्रदान नहीं करते हैं, तो 55kb चंक पूरी तरह से लोड होने तक React रूट स्तर पर निलंबित हो जाएगा या पूरे घटक ट्री को रेंडर होने से रोक देगा।
+
+<Tabs>
+  <Tab label="Next.js" value="nextjs">
+
+Next.js ऐप राउटर में, आप क्लाइंट घटकों के लिए React `Suspense` या सर्वर घटकों के लिए `loading.tsx` फ़ाइल का उपयोग कर सकते हैं।
+
+**क्लाइंट घटक:**
+
+```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` के साथ सर्वर घटक:**
+
+```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 में एक अंतर्निहित `<Suspense>` घटक है। Markdown सामग्री रेंडर करने वाले घटक को `<Suspense>` बाउंड्री में लपेटें।
+
+```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 में Suspense API के समकक्ष नहीं है। Markdown सामग्री के एसिंक्रोनस रेंडरिंग को संभालने के लिए `{#await}` ब्लॉक का उपयोग करें।
+
+```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` के माध्यम से React के Suspense API का समर्थन करता है।
+
+```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 का अपना `<Suspense>` घटक `solid-js` से है।
+
+```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 में Suspense API नहीं है। लेज़ी-लोडेड Markdown सामग्री (Angular 17+ की आवश्यकता है) को संभालने के लिए Angular के आस्थगित दृश्य (`@defer`) का उपयोग करें।
+
+```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>
+
+---
+
+## विकल्प संदर्भ
+
+इन विकल्पों को `MarkdownProvider`, `MarkdownRenderer`, `useMarkdownRenderer` और `renderMarkdown` में पास किया जा सकता है।
+
+| Option                | Type        | Default | विवरण                                                                                  |
+| :-------------------- | :---------- | :------ | :------------------------------------------------------------------------------------- |
+| `forceBlock`          | `boolean`   | `false` | आउटपुट को ब्लॉक-स्तरीय तत्व (उदा., `<div>`) में लपेटने के लिए बाध्य करता है।           |
+| `forceInline`         | `boolean`   | `false` | आउटपुट को इनलाइन तत्व (उदा., `<span>`) में लपेटने के लिए बाध्य करता है।                |
+| `tagfilter`           | `boolean`   | `true`  | खतरनाक HTML टैग को हटाकर सुरक्षा में सुधार के लिए GitHub टैग फ़िल्टर को सक्षम करता है। |
+| `preserveFrontmatter` | `boolean`   | `false` | यदि `true` है, तो Markdown स्ट्रिंग के प्रारंभ में फ्रंटमैटर को नहीं हटाया जाएगा।      |
+| `components`          | `Overrides` | `{}`    | कस्टम घटकों के लिए HTML टैग का मानचित्र (उदा., `{ h1: MyHeading }`)।                   |
+| `wrapper`             | `Component` | `null`  | रेंडर किए गए Markdown को लपेटने के लिए एक कस्टम घटक।                                   |
+| `renderMarkdown`      | `Function`  | `null`  | डिफ़ॉल्ट Markdown कंपाइलर को पूरी तरह से बदलने के लिए एक कस्टम रेंडरिंग फ़ंक्शन।       |

package/docs/hi/interest_of_intlayer.md

@@ -224,7 +224,7 @@ export const ComponentExample = () => {
 
 GitHub सितारे किसी प्रोजेक्ट की लोकप्रियता, सामुदायिक विश्वास और दीर्घकालिक प्रासंगिकता का एक मजबूत संकेतक हैं। हालांकि यह तकनीकी गुणवत्ता का प्रत्यक्ष माप नहीं है, वे दर्शाते हैं कि कितने डेवलपर्स प्रोजेक्ट को उपयोगी पाते हैं, इसकी प्रगति का पालन करते हैं, और इसे अपनाने की संभावना रखते हैं। किसी प्रोजेक्ट के मूल्य का अनुमान लगाने के लिए, सितारे विकल्पों के बीच कर्षण की तुलना करने में मदद करते हैं और पारिस्थितिकी तंत्र के विकास में अंतर्दृष्टि प्रदान करते हैं।
 
-[![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://api.star-history.com/chart?repos=formatjs/formatjs%2Ci18next/react-i18next%2Ci18next/i18next%2Ci18next/next-i18next%2Clingui/js-lingui%2Amannn/next-intl%2Cintlify/vue-i18n%2Caymericzip/intlayer%2Copral/inlang&type=date&legend=top-left)
+[![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)
 
 ---