@intlayer/docs 8.10.0 → 8.11.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (167) hide show
  1. package/dist/cjs/common.cjs +3 -1
  2. package/dist/cjs/common.cjs.map +1 -1
  3. package/dist/cjs/generated/docs.entry.cjs +39 -19
  4. package/dist/cjs/generated/docs.entry.cjs.map +1 -1
  5. package/dist/esm/common.mjs +3 -1
  6. package/dist/esm/common.mjs.map +1 -1
  7. package/dist/esm/generated/docs.entry.mjs +39 -19
  8. package/dist/esm/generated/docs.entry.mjs.map +1 -1
  9. package/dist/types/common.d.ts.map +1 -1
  10. package/dist/types/generated/docs.entry.d.ts +2 -1
  11. package/dist/types/generated/docs.entry.d.ts.map +1 -1
  12. package/docs/ar/benchmark/nextjs.md +1 -1
  13. package/docs/ar/benchmark/solid.md +1 -1
  14. package/docs/ar/benchmark/svelte.md +1 -1
  15. package/docs/ar/benchmark/tanstack.md +1 -1
  16. package/docs/ar/dictionary/markdown.md +340 -14
  17. package/docs/ar/interest_of_intlayer.md +1 -1
  18. package/docs/ar/{intlayer_with_angular.md → intlayer_with_angular_19.md} +8 -7
  19. package/docs/ar/intlayer_with_angular_21.md +412 -0
  20. package/docs/bn/interest_of_intlayer.md +1 -1
  21. package/docs/bn/intlayer_with_angular_21.md +412 -0
  22. package/docs/cs/interest_of_intlayer.md +1 -1
  23. package/docs/cs/intlayer_with_angular_21.md +412 -0
  24. package/docs/de/benchmark/nextjs.md +1 -1
  25. package/docs/de/benchmark/solid.md +1 -1
  26. package/docs/de/benchmark/svelte.md +1 -1
  27. package/docs/de/benchmark/tanstack.md +1 -1
  28. package/docs/de/dictionary/markdown.md +340 -14
  29. package/docs/de/interest_of_intlayer.md +1 -1
  30. package/docs/de/{intlayer_with_angular.md → intlayer_with_angular_19.md} +8 -7
  31. package/docs/de/intlayer_with_angular_21.md +412 -0
  32. package/docs/en/benchmark/nextjs.md +1 -1
  33. package/docs/en/benchmark/solid.md +1 -1
  34. package/docs/en/benchmark/svelte.md +1 -1
  35. package/docs/en/benchmark/tanstack.md +1 -1
  36. package/docs/en/dictionary/markdown.md +326 -15
  37. package/docs/en/interest_of_intlayer.md +1 -1
  38. package/docs/en/{intlayer_with_angular.md → intlayer_with_angular_19.md} +8 -7
  39. package/docs/en/intlayer_with_angular_21.md +412 -0
  40. package/docs/en-GB/benchmark/nextjs.md +1 -1
  41. package/docs/en-GB/benchmark/solid.md +1 -1
  42. package/docs/en-GB/benchmark/svelte.md +1 -1
  43. package/docs/en-GB/benchmark/tanstack.md +1 -1
  44. package/docs/en-GB/dictionary/markdown.md +336 -7
  45. package/docs/en-GB/interest_of_intlayer.md +1 -1
  46. package/docs/en-GB/{intlayer_with_angular.md → intlayer_with_angular_19.md} +8 -7
  47. package/docs/en-GB/intlayer_with_angular_21.md +412 -0
  48. package/docs/es/benchmark/nextjs.md +1 -1
  49. package/docs/es/benchmark/solid.md +1 -1
  50. package/docs/es/benchmark/svelte.md +1 -1
  51. package/docs/es/benchmark/tanstack.md +1 -1
  52. package/docs/es/dictionary/markdown.md +340 -14
  53. package/docs/es/interest_of_intlayer.md +1 -1
  54. package/docs/es/{intlayer_with_angular.md → intlayer_with_angular_19.md} +8 -7
  55. package/docs/es/intlayer_with_angular_21.md +412 -0
  56. package/docs/fr/benchmark/nextjs.md +1 -1
  57. package/docs/fr/benchmark/solid.md +1 -1
  58. package/docs/fr/benchmark/svelte.md +1 -1
  59. package/docs/fr/benchmark/tanstack.md +1 -1
  60. package/docs/fr/dictionary/markdown.md +340 -14
  61. package/docs/fr/interest_of_intlayer.md +1 -1
  62. package/docs/fr/{intlayer_with_angular.md → intlayer_with_angular_19.md} +8 -7
  63. package/docs/fr/intlayer_with_angular_21.md +412 -0
  64. package/docs/hi/benchmark/nextjs.md +1 -1
  65. package/docs/hi/benchmark/solid.md +1 -1
  66. package/docs/hi/benchmark/svelte.md +1 -1
  67. package/docs/hi/benchmark/tanstack.md +1 -1
  68. package/docs/hi/dictionary/markdown.md +340 -14
  69. package/docs/hi/interest_of_intlayer.md +1 -1
  70. package/docs/hi/{intlayer_with_angular.md → intlayer_with_angular_19.md} +8 -7
  71. package/docs/hi/intlayer_with_angular_21.md +412 -0
  72. package/docs/id/benchmark/nextjs.md +1 -1
  73. package/docs/id/benchmark/solid.md +1 -1
  74. package/docs/id/benchmark/svelte.md +1 -1
  75. package/docs/id/benchmark/tanstack.md +1 -1
  76. package/docs/id/dictionary/markdown.md +340 -14
  77. package/docs/id/interest_of_intlayer.md +1 -1
  78. package/docs/id/{intlayer_with_angular.md → intlayer_with_angular_19.md} +8 -7
  79. package/docs/id/intlayer_with_angular_21.md +412 -0
  80. package/docs/it/benchmark/nextjs.md +1 -1
  81. package/docs/it/benchmark/solid.md +1 -1
  82. package/docs/it/benchmark/svelte.md +1 -1
  83. package/docs/it/benchmark/tanstack.md +1 -1
  84. package/docs/it/dictionary/markdown.md +340 -14
  85. package/docs/it/interest_of_intlayer.md +1 -1
  86. package/docs/it/{intlayer_with_angular.md → intlayer_with_angular_19.md} +8 -7
  87. package/docs/it/intlayer_with_angular_21.md +412 -0
  88. package/docs/ja/benchmark/nextjs.md +1 -1
  89. package/docs/ja/benchmark/solid.md +1 -1
  90. package/docs/ja/benchmark/svelte.md +1 -1
  91. package/docs/ja/benchmark/tanstack.md +1 -1
  92. package/docs/ja/interest_of_intlayer.md +1 -1
  93. package/docs/ja/{intlayer_with_angular.md → intlayer_with_angular_19.md} +8 -7
  94. package/docs/ja/intlayer_with_angular_21.md +412 -0
  95. package/docs/ko/benchmark/nextjs.md +1 -1
  96. package/docs/ko/benchmark/solid.md +1 -1
  97. package/docs/ko/benchmark/svelte.md +1 -1
  98. package/docs/ko/benchmark/tanstack.md +1 -1
  99. package/docs/ko/dictionary/markdown.md +340 -14
  100. package/docs/ko/interest_of_intlayer.md +1 -1
  101. package/docs/ko/{intlayer_with_angular.md → intlayer_with_angular_19.md} +8 -7
  102. package/docs/ko/intlayer_with_angular_21.md +412 -0
  103. package/docs/nl/interest_of_intlayer.md +1 -1
  104. package/docs/nl/intlayer_with_angular_21.md +412 -0
  105. package/docs/pl/benchmark/nextjs.md +1 -1
  106. package/docs/pl/benchmark/solid.md +1 -1
  107. package/docs/pl/benchmark/svelte.md +1 -1
  108. package/docs/pl/benchmark/tanstack.md +1 -1
  109. package/docs/pl/dictionary/markdown.md +340 -14
  110. package/docs/pl/interest_of_intlayer.md +1 -1
  111. package/docs/pl/{intlayer_with_angular.md → intlayer_with_angular_19.md} +8 -7
  112. package/docs/pl/intlayer_with_angular_21.md +412 -0
  113. package/docs/pt/benchmark/nextjs.md +1 -1
  114. package/docs/pt/benchmark/solid.md +1 -1
  115. package/docs/pt/benchmark/svelte.md +1 -1
  116. package/docs/pt/benchmark/tanstack.md +1 -1
  117. package/docs/pt/dictionary/markdown.md +340 -14
  118. package/docs/pt/interest_of_intlayer.md +1 -1
  119. package/docs/pt/{intlayer_with_angular.md → intlayer_with_angular_19.md} +8 -7
  120. package/docs/pt/intlayer_with_angular_21.md +412 -0
  121. package/docs/ru/benchmark/nextjs.md +1 -1
  122. package/docs/ru/benchmark/solid.md +1 -1
  123. package/docs/ru/benchmark/svelte.md +1 -1
  124. package/docs/ru/benchmark/tanstack.md +1 -1
  125. package/docs/ru/dictionary/markdown.md +445 -3
  126. package/docs/ru/interest_of_intlayer.md +1 -1
  127. package/docs/ru/{intlayer_with_angular.md → intlayer_with_angular_19.md} +8 -7
  128. package/docs/ru/intlayer_with_angular_21.md +412 -0
  129. package/docs/tr/benchmark/nextjs.md +1 -1
  130. package/docs/tr/benchmark/solid.md +1 -1
  131. package/docs/tr/benchmark/svelte.md +1 -1
  132. package/docs/tr/benchmark/tanstack.md +1 -1
  133. package/docs/tr/dictionary/markdown.md +340 -14
  134. package/docs/tr/interest_of_intlayer.md +1 -1
  135. package/docs/tr/{intlayer_with_angular.md → intlayer_with_angular_19.md} +8 -7
  136. package/docs/tr/intlayer_with_angular_21.md +412 -0
  137. package/docs/uk/benchmark/nextjs.md +1 -1
  138. package/docs/uk/benchmark/solid.md +1 -1
  139. package/docs/uk/benchmark/svelte.md +1 -1
  140. package/docs/uk/benchmark/tanstack.md +1 -1
  141. package/docs/uk/dictionary/markdown.md +340 -14
  142. package/docs/uk/interest_of_intlayer.md +1 -1
  143. package/docs/uk/{intlayer_with_angular.md → intlayer_with_angular_19.md} +8 -7
  144. package/docs/uk/intlayer_with_angular_21.md +412 -0
  145. package/docs/ur/interest_of_intlayer.md +1 -1
  146. package/docs/ur/intlayer_with_angular_21.md +412 -0
  147. package/docs/vi/benchmark/nextjs.md +1 -1
  148. package/docs/vi/benchmark/solid.md +1 -1
  149. package/docs/vi/benchmark/svelte.md +1 -1
  150. package/docs/vi/benchmark/tanstack.md +1 -1
  151. package/docs/vi/dictionary/markdown.md +340 -14
  152. package/docs/vi/interest_of_intlayer.md +1 -1
  153. package/docs/vi/{intlayer_with_angular.md → intlayer_with_angular_19.md} +8 -7
  154. package/docs/vi/intlayer_with_angular_21.md +412 -0
  155. package/docs/zh/benchmark/nextjs.md +1 -1
  156. package/docs/zh/benchmark/solid.md +1 -1
  157. package/docs/zh/benchmark/svelte.md +1 -1
  158. package/docs/zh/benchmark/tanstack.md +1 -1
  159. package/docs/zh/dictionary/markdown.md +340 -14
  160. package/docs/zh/interest_of_intlayer.md +1 -1
  161. package/docs/zh/{intlayer_with_angular.md → intlayer_with_angular_19.md} +8 -7
  162. package/docs/zh/intlayer_with_angular_21.md +412 -0
  163. package/docs/zh-TW/interest_of_intlayer.md +1 -1
  164. package/docs/zh-TW/intlayer_with_angular_21.md +412 -0
  165. package/package.json +7 -7
  166. package/src/common.ts +12 -6
  167. package/src/generated/docs.entry.ts +39 -19
@@ -66,13 +66,10 @@ Intlayer Markdown सिंटैक्स का उपयोग करके
66
66
  फ़ाइल संरचना उदाहरण:
67
67
 
68
68
  ```text
69
- content/
70
- ├── en/
71
- │ └── markdown-file.en.content.md
72
- ├── fr/
73
- │ └── markdown-file.fr.content.md
74
- └── es/
75
- └── markdown-file.es.content.md
69
+ content
70
+ ├── markdown-file.en.content.md
71
+ ├── markdown-file.fr.content.md
72
+ └── markdown-file.es.content.md
76
73
  ```
77
74
 
78
75
  आप फ्रंट-मैटर में [डिक्शनरी परिभाषा](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/dictionary/content_file.md) में परिभाषित कोई भी गुण जोड़ सकते हैं
@@ -130,8 +127,6 @@ Intlayer Markdown सिंटैक्स का उपयोग करके
130
127
  </Tab>
131
128
  </Tabs>
132
129
 
133
- ---
134
-
135
130
  ## Markdown रेंडरिंग
136
131
 
137
132
  Intlayer Markdown रेंडर करने के दो स्वतंत्र तरीके प्रदान करता है:
@@ -147,7 +142,7 @@ Markdown रेंडरिंग **MDX** का समर्थन करता
147
142
  ### 1. स्वचालित रेंडरिंग (`useIntlayer` के माध्यम से)
148
143
 
149
144
  <Tabs group="framework">
150
- <Tab label="React / Next.js" value="react">
145
+ <Tab label="React" value="react">
151
146
  Markdown नोड्स को सीधे JSX के रूप में रेंडर किया जा सकता है।
152
147
 
153
148
  ```tsx fileName="App.tsx"
@@ -197,6 +192,57 @@ Markdown रेंडरिंग **MDX** का समर्थन करता
197
192
  {myMarkdownContent.metadata.title}
198
193
  ```
199
194
 
195
+ </Tab>
196
+ <Tab label="Next.js" value="nextjs">
197
+ Markdown नोड्स को सीधे JSX के रूप में रेंडर किया जा सकता है।
198
+
199
+ ```tsx fileName="App.tsx"
200
+ import { useIntlayer } from "next-intlayer";
201
+ import { MarkdownProvider } from "next-intlayer/markdown";
202
+
203
+ const AppContent = () => {
204
+ const { myMarkdownContent } = useIntlayer("app");
205
+
206
+ return <div>{myMarkdownContent}</div>;
207
+ };
208
+
209
+ const App = () => (
210
+ <MarkdownProvider
211
+ components={{
212
+ h1: ({ children }) => <h1 style={{ color: "red" }}>{children}</h1>,
213
+ MyButton: (props) => <button {...props} />, // MDX घटक
214
+ }}
215
+ >
216
+ <AppContent />
217
+ </MarkdownProvider>
218
+ );
219
+ ```
220
+
221
+ > यदि `MarkdownProvider` मौजूद नहीं है, तो Intlayer डिफ़ॉल्ट Markdown से JSX पार्सर का उपयोग करके मार्कडाउन को रेंडर करेगा।
222
+
223
+ आप `.use()` विधि का उपयोग करके विशिष्ट नोड्स के लिए स्थानीय ओवरराइड भी प्रदान कर सकते हैं:
224
+
225
+ ```tsx
226
+ {myMarkdownContent.use({
227
+ h1: ({ children }) => <h1 style={{ color: "red" }}>{children}</h1>,
228
+ })}
229
+ ```
230
+
231
+ आप Markdown को एक स्ट्रिंग के रूप में प्राप्त कर सकते हैं:
232
+
233
+ ```tsx
234
+ {myMarkdownContent.value}
235
+ {String(myMarkdownContent)}
236
+ {myMarkdownContent.toString()}
237
+ ```
238
+
239
+ और आप अपने मार्कडाउन मेटाडेटा तक इस प्रकार पहुँच सकते हैं:
240
+
241
+ ```tsx
242
+ {myMarkdownContent.metadata}
243
+ {myMarkdownContent.metadata.title}
244
+ ```
245
+
200
246
  </Tab>
201
247
  <Tab label="Vue" value="vue">
202
248
  Vue में, Markdown सामग्री को अंतर्निहित `component` टैग का उपयोग करके या सीधे एक नोड के रूप में रेंडर किया जा सकता है।
@@ -441,7 +487,7 @@ Markdown रेंडरिंग **MDX** का समर्थन करता
441
487
  ये यूटिलिटीज **केवल कच्चे Markdown स्ट्रिंग्स** को रेंडर करती हैं और `useIntlayer` से स्वतंत्र हैं। जब आपको अपने डिक्शनरी के अलावा अन्य स्रोतों से Markdown रेंडर करने की आवश्यकता हो, तो इनका उपयोग करें।
442
488
 
443
489
  <Tabs group="framework">
444
- <Tab label="React / Next.js" value="react">
490
+ <Tab label="React" value="react">
445
491
 
446
492
  #### `<MarkdownRenderer />` घटक
447
493
 
@@ -479,6 +525,45 @@ Markdown रेंडरिंग **MDX** का समर्थन करता
479
525
  const jsx = renderMarkdown("# मेरा शीर्षक", { forceBlock: true });
480
526
  ```
481
527
 
528
+ </Tab>
529
+ <Tab label="Next.js" value="nextjs">
530
+
531
+ #### `<MarkdownRenderer />` घटक
532
+
533
+ विशिष्ट विकल्पों के साथ एक Markdown स्ट्रिंग रेंडर करता है।
534
+
535
+ ```tsx
536
+ import { MarkdownRenderer } from "next-intlayer/markdown";
537
+
538
+ <MarkdownRenderer forceBlock={true} tagfilter={true}>
539
+ {"# मेरा शीर्षक"}
540
+ </MarkdownRenderer>
541
+ ```
542
+
543
+ #### `useMarkdownRenderer()` हुक
544
+
545
+ पूर्व-कॉन्फ़िगर रेंडरर फ़ंक्शन प्राप्त करें।
546
+
547
+ ```tsx
548
+ import { useMarkdownRenderer } from "next-intlayer/markdown";
549
+
550
+ const renderMarkdown = useMarkdownRenderer({
551
+ forceBlock: true,
552
+ components: { h1: (props) => <h1 {...props} className="custom" /> }
553
+ });
554
+
555
+ return renderMarkdown("# मेरा शीर्षक");
556
+ ```
557
+
558
+ #### `renderMarkdown()` उपयोगिता
559
+ घटकों के बाहर रेंडरिंग के लिए स्टैंडअलोन उपयोगिता।
560
+
561
+ ```tsx
562
+ import { renderMarkdown } from "next-intlayer/markdown";
563
+
564
+ const jsx = renderMarkdown("# मेरा शीर्षक", { forceBlock: true });
565
+ ```
566
+
482
567
  </Tab>
483
568
  <Tab label="Vue" value="vue">
484
569
 
@@ -608,14 +693,12 @@ Markdown रेंडरिंग **MDX** का समर्थन करता
608
693
  </Tab>
609
694
  </Tabs>
610
695
 
611
- ---
612
-
613
696
  ## `MarkdownProvider` के साथ ग्लोबल कॉन्फ़िगरेशन
614
697
 
615
698
  `MarkdownProvider` (या इसके फ्रेमवर्क समतुल्य) आपके संपूर्ण एप्लिकेशन के लिए Markdown रेंडरिंग पाइपलाइन को कॉन्फ़िगर करता है। यह स्वचालित `useIntlayer` रेंडरिंग और हेल्पर यूटिलिटीज दोनों पर लागू होता है। यहाँ सेट किए गए विकल्प डिफ़ॉल्ट हैं — `.use()` उन्हें नोड स्तर पर ओवरराइड करता है।
616
699
 
617
700
  <Tabs group="framework">
618
- <Tab label="React / Next.js" value="react">
701
+ <Tab label="React" value="react">
619
702
 
620
703
  ```tsx fileName="AppProvider.tsx"
621
704
  import { MarkdownProvider } from "react-intlayer/markdown";
@@ -633,6 +716,7 @@ Markdown रेंडरिंग **MDX** का समर्थन करता
633
716
  );
634
717
  ```
635
718
 
719
+
636
720
  > MDX समर्थित है — आपके Markdown के अंदर उपयोग किए गए किसी भी घटक नाम (उदा. `<MyCustomJSXComponent />`) को `components` मानचित्र के विरुद्ध हल किया जाता है।
637
721
 
638
722
  आप अपने स्वयं के मार्कडाउन रेंडरर का भी उपयोग कर सकते हैं:
@@ -655,6 +739,48 @@ Markdown रेंडरिंग **MDX** का समर्थन करता
655
739
 
656
740
  > अपने Markdown रेंडरर को गतिशील रूप से आयात करना आपके एप्लिकेशन के बंडल आकार को कम करने का एक शानदार तरीका है।
657
741
 
742
+ </Tab>
743
+ <Tab label="Next.js" value="nextjs">
744
+
745
+ ```tsx fileName="AppProvider.tsx"
746
+ import { MarkdownProvider } from "next-intlayer/markdown";
747
+
748
+ export const AppProvider = ({ children }) => (
749
+ <MarkdownProvider
750
+ components={{
751
+ h1: (props) => <h1 style={{color: 'green'}} {...props} />,
752
+ a: ({ href, ...props }) => <a style={{color: 'red'}} {...props} />,
753
+ MyCustomJSXComponent: (props) => <span style={{color: 'red'}} {...props} />,
754
+ }}
755
+ >
756
+ {children}
757
+ </MarkdownProvider>
758
+ );
759
+ ```
760
+
761
+
762
+ > MDX समर्थित है — आपके Markdown के अंदर उपयोग किए गए किसी भी घटक नाम (उदा. `<MyCustomJSXComponent />`) को `components` मानचित्र के विरुद्ध हल किया जाता है।
763
+
764
+ आप अपने स्वयं के मार्कडाउन रेंडरर का भी उपयोग कर सकते हैं:
765
+
766
+ ```tsx fileName="AppProvider.tsx"
767
+ import { MarkdownProvider } from "next-intlayer/markdown";
768
+
769
+ export const AppProvider = ({ children }) => (
770
+ <MarkdownProvider
771
+ renderMarkdown={async (md) => {
772
+ // Use dynamic import to reduce the bundle size of your application
773
+ const { renderMarkdown } = await import('next-intlayer/markdown');
774
+ return renderMarkdown(md);
775
+ }}
776
+ >
777
+ {children}
778
+ </MarkdownProvider>
779
+ );
780
+ ```
781
+
782
+ > अपने Markdown रेंडरर को गतिशील रूप से आयात करना आपके एप्लिकेशन के बंडल आकार को कम करने का एक शानदार तरीका है।
783
+
658
784
  </Tab>
659
785
  <Tab label="Vue" value="vue">
660
786
 
@@ -680,6 +806,9 @@ Markdown रेंडरिंग **MDX** का समर्थन करता
680
806
  app.mount("#app");
681
807
  ```
682
808
 
809
+
810
+ > MDX समर्थित है — आपके Markdown के अंदर उपयोग किए गए किसी भी घटक नाम (उदा. `<MyCustomJSXComponent />`) को `components` मानचित्र के विरुद्ध हल किया जाता है।
811
+
683
812
  आप अपने स्वयं के मार्कडाउन रेंडरर का भी उपयोग कर सकते हैं:
684
813
 
685
814
  ```typescript fileName="main.ts"
@@ -721,6 +850,9 @@ Markdown रेंडरिंग **MDX** का समर्थन करता
721
850
  </MarkdownProvider>
722
851
  ```
723
852
 
853
+
854
+ > MDX समर्थित है — आपके Markdown के अंदर उपयोग किए गए किसी भी घटक नाम (उदा. `<MyCustomJSXComponent />`) को `components` मानचित्र के विरुद्ध हल किया जाता है।
855
+
724
856
  आप अपने स्वयं के मार्कडाउन रेंडरर का भी उपयोग कर सकते हैं:
725
857
 
726
858
  ```svelte fileName="App.svelte"
@@ -757,6 +889,9 @@ Markdown रेंडरिंग **MDX** का समर्थन करता
757
889
  );
758
890
  ```
759
891
 
892
+
893
+ > MDX समर्थित है — आपके Markdown के अंदर उपयोग किए गए किसी भी घटक नाम (उदा. `<MyCustomJSXComponent />`) को `components` मानचित्र के विरुद्ध हल किया जाता है।
894
+
760
895
  आप अपने स्वयं के मार्कडाउन रेंडरर का भी उपयोग कर सकते हैं:
761
896
 
762
897
  ```tsx fileName="AppProvider.tsx"
@@ -793,6 +928,9 @@ Markdown रेंडरिंग **MDX** का समर्थन करता
793
928
  );
794
929
  ```
795
930
 
931
+
932
+ > MDX समर्थित है — आपके Markdown के अंदर उपयोग किए गए किसी भी घटक नाम (उदा. `<MyCustomJSXComponent />`) को `components` मानचित्र के विरुद्ध हल किया जाता है।
933
+
796
934
  आप अपने स्वयं के मार्कडाउन रेंडरर का भी उपयोग कर सकते हैं:
797
935
 
798
936
  ```tsx fileName="AppProvider.tsx"
@@ -836,3 +974,191 @@ Markdown रेंडरिंग **MDX** का समर्थन करता
836
974
 
837
975
  </Tab>
838
976
  </Tabs>
977
+
978
+ ## सस्पेंस (Suspense)
979
+
980
+ Intlayer Markdown रेंडरर गतिशील रूप से लोड किया गया है। अनुकूलित होने के बावजूद, अंतर्निहित पार्सर चंक लगभग 55kb है। इसे सिंक्रोनस रूप से लोड करने से प्रारंभिक पृष्ठ रेंडरिंग में देरी होती है और First Contentful Paint (FCP) कम हो जाता है।
981
+
982
+ UI को ब्लॉक होने से रोकने के लिए, Intlayer React के Suspense API के साथ एकीकृत होता है। यह पार्सर को पृष्ठभूमि में लाता है और डाउनलोड के दौरान एक Promise थ्रो करता है।
983
+
984
+ Intlayer Markdown रेंडर करने वाले किसी भी घटक को `<Suspense>` बाउंड्री में लपेटें। यह चंक डाउनलोड होने के दौरान एक स्थानीयकृत फ़ॉलबैक स्थिति प्रदर्शित करता है, जिससे आपके शेष DOM को तुरंत रेंडर करने की अनुमति मिलती है।
985
+
986
+ चेतावनी: यदि आप `<Suspense>` बाउंड्री प्रदान नहीं करते हैं, तो 55kb चंक पूरी तरह से लोड होने तक React रूट स्तर पर निलंबित हो जाएगा या पूरे घटक ट्री को रेंडर होने से रोक देगा।
987
+
988
+ <Tabs>
989
+ <Tab label="Next.js" value="nextjs">
990
+
991
+ Next.js ऐप राउटर में, आप क्लाइंट घटकों के लिए React `Suspense` या सर्वर घटकों के लिए `loading.tsx` फ़ाइल का उपयोग कर सकते हैं।
992
+
993
+ **क्लाइंट घटक:**
994
+
995
+ ```tsx fileName="components/MyComponent.tsx"
996
+ "use client";
997
+ import { useIntlayer } from "next-intlayer";
998
+ import { Suspense } from "react";
999
+
1000
+ const MyComponent = () => {
1001
+ const markdownContent = useIntlayer("my-markdown");
1002
+
1003
+ return (
1004
+ <Suspense fallback={<div>Loading...</div>}>{markdownContent}</Suspense>
1005
+ );
1006
+ };
1007
+ ```
1008
+
1009
+ **`loading.tsx` के साथ सर्वर घटक:**
1010
+
1011
+ ```tsx fileName="app/loading.tsx"
1012
+ export default function Loading() {
1013
+ return <div>Loading...</div>;
1014
+ }
1015
+ ```
1016
+
1017
+ ```tsx fileName="app/page.tsx"
1018
+ import { useIntlayer } from "next-intlayer/server";
1019
+
1020
+ const MyPage = () => {
1021
+ const markdownContent = useIntlayer("my-markdown");
1022
+ return <div>{markdownContent}</div>;
1023
+ };
1024
+
1025
+ export default MyPage;
1026
+ ```
1027
+
1028
+ </Tab>
1029
+
1030
+ <Tab label="React" value="react">
1031
+
1032
+ ```tsx
1033
+ import { useIntlayer } from "react-intlayer";
1034
+ import { Suspense } from "react";
1035
+
1036
+ const MyComponent = () => {
1037
+ const markdownContent = useIntlayer("my-markdown");
1038
+
1039
+ return (
1040
+ <Suspense fallback={<div>Loading...</div>}>{markdownContent}</Suspense>
1041
+ );
1042
+ };
1043
+ ```
1044
+
1045
+ </Tab>
1046
+
1047
+ <Tab label="Vue" value="vue">
1048
+
1049
+ Vue में एक अंतर्निहित `<Suspense>` घटक है। Markdown सामग्री रेंडर करने वाले घटक को `<Suspense>` बाउंड्री में लपेटें।
1050
+
1051
+ ```vue fileName="MyComponent.vue"
1052
+ <script setup>
1053
+ import { useIntlayer } from "vue-intlayer";
1054
+
1055
+ const { markdownContent } = useIntlayer("my-markdown");
1056
+ </script>
1057
+
1058
+ <template>
1059
+ <Suspense>
1060
+ <component :is="markdownContent" />
1061
+ <template #fallback>
1062
+ <div>Loading...</div>
1063
+ </template>
1064
+ </Suspense>
1065
+ </template>
1066
+ ```
1067
+
1068
+ </Tab>
1069
+ <Tab label="Svelte" value="svelte">
1070
+
1071
+ Svelte में Suspense API के समकक्ष नहीं है। Markdown सामग्री के एसिंक्रोनस रेंडरिंग को संभालने के लिए `{#await}` ब्लॉक का उपयोग करें।
1072
+
1073
+ ```svelte fileName="MyComponent.svelte"
1074
+ <script lang="ts">
1075
+ import { useIntlayer } from "svelte-intlayer";
1076
+
1077
+ const content = useIntlayer("my-markdown");
1078
+ </script>
1079
+
1080
+ {#await $content.markdownContent}
1081
+ <div>Loading...</div>
1082
+ {:then rendered}
1083
+ {@html rendered}
1084
+ {/await}
1085
+ ```
1086
+
1087
+ </Tab>
1088
+ <Tab label="Preact" value="preact">
1089
+
1090
+ Preact `preact/compat` के माध्यम से React के Suspense API का समर्थन करता है।
1091
+
1092
+ ```tsx fileName="MyComponent.tsx"
1093
+ import { useIntlayer } from "preact-intlayer";
1094
+ import { Suspense } from "preact/compat";
1095
+
1096
+ const MyComponent = () => {
1097
+ const markdownContent = useIntlayer("my-markdown");
1098
+
1099
+ return (
1100
+ <Suspense fallback={<div>Loading...</div>}>{markdownContent}</Suspense>
1101
+ );
1102
+ };
1103
+ ```
1104
+
1105
+ </Tab>
1106
+ <Tab label="Solid" value="solid">
1107
+
1108
+ Solid का अपना `<Suspense>` घटक `solid-js` से है।
1109
+
1110
+ ```tsx fileName="MyComponent.tsx"
1111
+ import { useIntlayer } from "solid-intlayer";
1112
+ import { Suspense } from "solid-js";
1113
+
1114
+ const MyComponent = () => {
1115
+ const { markdownContent } = useIntlayer("my-markdown");
1116
+
1117
+ return (
1118
+ <Suspense fallback={<div>Loading...</div>}>{markdownContent}</Suspense>
1119
+ );
1120
+ };
1121
+ ```
1122
+
1123
+ </Tab>
1124
+ <Tab label="Angular" value="angular">
1125
+
1126
+ Angular में Suspense API नहीं है। लेज़ी-लोडेड Markdown सामग्री (Angular 17+ की आवश्यकता है) को संभालने के लिए Angular के आस्थगित दृश्य (`@defer`) का उपयोग करें।
1127
+
1128
+ ```typescript fileName="my.component.ts"
1129
+ import { Component } from "@angular/core";
1130
+ import { useIntlayer } from "angular-intlayer";
1131
+
1132
+ @Component({
1133
+ selector: "app-my",
1134
+ template: `
1135
+ @defer {
1136
+ <div [innerHTML]="content().markdownContent"></div>
1137
+ } @loading {
1138
+ <div>Loading...</div>
1139
+ }
1140
+ `,
1141
+ })
1142
+ export class MyComponent {
1143
+ content = useIntlayer("my-markdown");
1144
+ }
1145
+ ```
1146
+
1147
+ </Tab>
1148
+ </Tabs>
1149
+
1150
+ ---
1151
+
1152
+ ## विकल्प संदर्भ
1153
+
1154
+ इन विकल्पों को `MarkdownProvider`, `MarkdownRenderer`, `useMarkdownRenderer` और `renderMarkdown` में पास किया जा सकता है।
1155
+
1156
+ | Option | Type | Default | विवरण |
1157
+ | :-------------------- | :---------- | :------ | :------------------------------------------------------------------------------------- |
1158
+ | `forceBlock` | `boolean` | `false` | आउटपुट को ब्लॉक-स्तरीय तत्व (उदा., `<div>`) में लपेटने के लिए बाध्य करता है। |
1159
+ | `forceInline` | `boolean` | `false` | आउटपुट को इनलाइन तत्व (उदा., `<span>`) में लपेटने के लिए बाध्य करता है। |
1160
+ | `tagfilter` | `boolean` | `true` | खतरनाक HTML टैग को हटाकर सुरक्षा में सुधार के लिए GitHub टैग फ़िल्टर को सक्षम करता है। |
1161
+ | `preserveFrontmatter` | `boolean` | `false` | यदि `true` है, तो Markdown स्ट्रिंग के प्रारंभ में फ्रंटमैटर को नहीं हटाया जाएगा। |
1162
+ | `components` | `Overrides` | `{}` | कस्टम घटकों के लिए HTML टैग का मानचित्र (उदा., `{ h1: MyHeading }`)। |
1163
+ | `wrapper` | `Component` | `null` | रेंडर किए गए Markdown को लपेटने के लिए एक कस्टम घटक। |
1164
+ | `renderMarkdown` | `Function` | `null` | डिफ़ॉल्ट Markdown कंपाइलर को पूरी तरह से बदलने के लिए एक कस्टम रेंडरिंग फ़ंक्शन। |
@@ -224,7 +224,7 @@ export const ComponentExample = () => {
224
224
 
225
225
  GitHub सितारे किसी प्रोजेक्ट की लोकप्रियता, सामुदायिक विश्वास और दीर्घकालिक प्रासंगिकता का एक मजबूत संकेतक हैं। हालांकि यह तकनीकी गुणवत्ता का प्रत्यक्ष माप नहीं है, वे दर्शाते हैं कि कितने डेवलपर्स प्रोजेक्ट को उपयोगी पाते हैं, इसकी प्रगति का पालन करते हैं, और इसे अपनाने की संभावना रखते हैं। किसी प्रोजेक्ट के मूल्य का अनुमान लगाने के लिए, सितारे विकल्पों के बीच कर्षण की तुलना करने में मदद करते हैं और पारिस्थितिकी तंत्र के विकास में अंतर्दृष्टि प्रदान करते हैं।
226
226
 
227
- [![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)
227
+ [![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)
228
228
 
229
229
  ---
230
230
 
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  createdAt: 2025-04-18
3
3
  updatedAt: 2026-05-06
4
- title: Angular i18n - Angular ऐप का अनुवाद कैसे करें 2026 में
4
+ title: Angular i18n - Angular 19 ऐप (Webpack) का अनुवाद कैसे करें
5
5
  description: जानें कि अपनी Angular वेबसाइट को बहुभाषी कैसे बनाया जाए। इसे अंतरराष्ट्रीय बनाने (i18n) और अनुवाद करने के लिए दस्तावेज़ों का पालन करें।
6
6
  keywords:
7
7
  - अंतर्राष्ट्रीयकरण
@@ -13,8 +13,9 @@ slugs:
13
13
  - doc
14
14
  - environment
15
15
  - angular
16
- applicationTemplate: https://github.com/aymericzip/intlayer-angular-template
17
- applicationShowcase: https://intlayer-angular-template.vercel.app
16
+ - 19
17
+ applicationTemplate: https://github.com/aymericzip/intlayer-angular-19-template
18
+ applicationShowcase: https://intlayer-angular-19-template.vercel.app
18
19
  history:
19
20
  - version: 8.9.0
20
21
  date: 2026-05-04
@@ -30,7 +31,7 @@ history:
30
31
  changes: "इतिहास आरंभ करें"
31
32
  ---
32
33
 
33
- # Intlayer का उपयोग करके अपनी Angular वेबसाइट का अनुवाद करें | अंतर्राष्ट्रीयकरण (i18n)
34
+ # Intlayer का उपयोग करके अपनी Angular 19 (Webpack) वेबसाइट का अनुवाद करें | अंतर्राष्ट्रीयकरण (i18n)
34
35
 
35
36
  ## विषय सूची
36
37
 
@@ -55,7 +56,7 @@ Intlayer के साथ, आप यह कर सकते हैं:
55
56
  <Tab label="Code" value="code">
56
57
 
57
58
  <iframe
58
- src="https://ide.intlayer.org/aymericzip/intlayer-angular-template?file=intlayer.config.ts"
59
+ src="https://ide.intlayer.org/aymericzip/intlayer-angular-19-template?file=intlayer.config.ts"
59
60
  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
60
61
  title="Demo CodeSandbox - How to Internationalize your application using Intlayer"
61
62
  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
@@ -66,7 +67,7 @@ Intlayer के साथ, आप यह कर सकते हैं:
66
67
  <Tab label="डेमो" value="demo">
67
68
 
68
69
  <iframe
69
- src="https://intlayer-angular-template.vercel.app"
70
+ src="https://intlayer-angular-19-template.vercel.app"
70
71
  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
71
72
  title="डेमो - intlayer-angular-template"
72
73
  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
@@ -76,7 +77,7 @@ Intlayer के साथ, आप यह कर सकते हैं:
76
77
  </Tab>
77
78
  </Tabs>
78
79
 
79
- GitHub पर [एप्लिकेशन टेम्पलेट](https://github.com/aymericzip/intlayer-angular-template) देखें।
80
+ GitHub पर [एप्लिकेशन टेम्पलेट](https://github.com/aymericzip/intlayer-angular-19-template) देखें।
80
81
 
81
82
  ### चरण 1: निर्भरताएँ स्थापित करें
82
83