@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.
- package/dist/cjs/common.cjs +3 -1
- package/dist/cjs/common.cjs.map +1 -1
- package/dist/cjs/generated/docs.entry.cjs +39 -19
- package/dist/cjs/generated/docs.entry.cjs.map +1 -1
- package/dist/esm/common.mjs +3 -1
- package/dist/esm/common.mjs.map +1 -1
- package/dist/esm/generated/docs.entry.mjs +39 -19
- package/dist/esm/generated/docs.entry.mjs.map +1 -1
- package/dist/types/common.d.ts.map +1 -1
- package/dist/types/generated/docs.entry.d.ts +2 -1
- package/dist/types/generated/docs.entry.d.ts.map +1 -1
- package/docs/ar/benchmark/nextjs.md +1 -1
- package/docs/ar/benchmark/solid.md +1 -1
- package/docs/ar/benchmark/svelte.md +1 -1
- package/docs/ar/benchmark/tanstack.md +1 -1
- package/docs/ar/dictionary/markdown.md +340 -14
- package/docs/ar/interest_of_intlayer.md +1 -1
- package/docs/ar/{intlayer_with_angular.md → intlayer_with_angular_19.md} +8 -7
- package/docs/ar/intlayer_with_angular_21.md +412 -0
- package/docs/bn/interest_of_intlayer.md +1 -1
- package/docs/bn/intlayer_with_angular_21.md +412 -0
- package/docs/cs/interest_of_intlayer.md +1 -1
- package/docs/cs/intlayer_with_angular_21.md +412 -0
- package/docs/de/benchmark/nextjs.md +1 -1
- package/docs/de/benchmark/solid.md +1 -1
- package/docs/de/benchmark/svelte.md +1 -1
- package/docs/de/benchmark/tanstack.md +1 -1
- package/docs/de/dictionary/markdown.md +340 -14
- package/docs/de/interest_of_intlayer.md +1 -1
- package/docs/de/{intlayer_with_angular.md → intlayer_with_angular_19.md} +8 -7
- package/docs/de/intlayer_with_angular_21.md +412 -0
- package/docs/en/benchmark/nextjs.md +1 -1
- package/docs/en/benchmark/solid.md +1 -1
- package/docs/en/benchmark/svelte.md +1 -1
- package/docs/en/benchmark/tanstack.md +1 -1
- package/docs/en/dictionary/markdown.md +326 -15
- package/docs/en/interest_of_intlayer.md +1 -1
- package/docs/en/{intlayer_with_angular.md → intlayer_with_angular_19.md} +8 -7
- package/docs/en/intlayer_with_angular_21.md +412 -0
- package/docs/en-GB/benchmark/nextjs.md +1 -1
- package/docs/en-GB/benchmark/solid.md +1 -1
- package/docs/en-GB/benchmark/svelte.md +1 -1
- package/docs/en-GB/benchmark/tanstack.md +1 -1
- package/docs/en-GB/dictionary/markdown.md +336 -7
- package/docs/en-GB/interest_of_intlayer.md +1 -1
- package/docs/en-GB/{intlayer_with_angular.md → intlayer_with_angular_19.md} +8 -7
- package/docs/en-GB/intlayer_with_angular_21.md +412 -0
- package/docs/es/benchmark/nextjs.md +1 -1
- package/docs/es/benchmark/solid.md +1 -1
- package/docs/es/benchmark/svelte.md +1 -1
- package/docs/es/benchmark/tanstack.md +1 -1
- package/docs/es/dictionary/markdown.md +340 -14
- package/docs/es/interest_of_intlayer.md +1 -1
- package/docs/es/{intlayer_with_angular.md → intlayer_with_angular_19.md} +8 -7
- package/docs/es/intlayer_with_angular_21.md +412 -0
- package/docs/fr/benchmark/nextjs.md +1 -1
- package/docs/fr/benchmark/solid.md +1 -1
- package/docs/fr/benchmark/svelte.md +1 -1
- package/docs/fr/benchmark/tanstack.md +1 -1
- package/docs/fr/dictionary/markdown.md +340 -14
- package/docs/fr/interest_of_intlayer.md +1 -1
- package/docs/fr/{intlayer_with_angular.md → intlayer_with_angular_19.md} +8 -7
- package/docs/fr/intlayer_with_angular_21.md +412 -0
- package/docs/hi/benchmark/nextjs.md +1 -1
- package/docs/hi/benchmark/solid.md +1 -1
- package/docs/hi/benchmark/svelte.md +1 -1
- package/docs/hi/benchmark/tanstack.md +1 -1
- package/docs/hi/dictionary/markdown.md +340 -14
- package/docs/hi/interest_of_intlayer.md +1 -1
- package/docs/hi/{intlayer_with_angular.md → intlayer_with_angular_19.md} +8 -7
- package/docs/hi/intlayer_with_angular_21.md +412 -0
- package/docs/id/benchmark/nextjs.md +1 -1
- package/docs/id/benchmark/solid.md +1 -1
- package/docs/id/benchmark/svelte.md +1 -1
- package/docs/id/benchmark/tanstack.md +1 -1
- package/docs/id/dictionary/markdown.md +340 -14
- package/docs/id/interest_of_intlayer.md +1 -1
- package/docs/id/{intlayer_with_angular.md → intlayer_with_angular_19.md} +8 -7
- package/docs/id/intlayer_with_angular_21.md +412 -0
- package/docs/it/benchmark/nextjs.md +1 -1
- package/docs/it/benchmark/solid.md +1 -1
- package/docs/it/benchmark/svelte.md +1 -1
- package/docs/it/benchmark/tanstack.md +1 -1
- package/docs/it/dictionary/markdown.md +340 -14
- package/docs/it/interest_of_intlayer.md +1 -1
- package/docs/it/{intlayer_with_angular.md → intlayer_with_angular_19.md} +8 -7
- package/docs/it/intlayer_with_angular_21.md +412 -0
- package/docs/ja/benchmark/nextjs.md +1 -1
- package/docs/ja/benchmark/solid.md +1 -1
- package/docs/ja/benchmark/svelte.md +1 -1
- package/docs/ja/benchmark/tanstack.md +1 -1
- package/docs/ja/interest_of_intlayer.md +1 -1
- package/docs/ja/{intlayer_with_angular.md → intlayer_with_angular_19.md} +8 -7
- package/docs/ja/intlayer_with_angular_21.md +412 -0
- package/docs/ko/benchmark/nextjs.md +1 -1
- package/docs/ko/benchmark/solid.md +1 -1
- package/docs/ko/benchmark/svelte.md +1 -1
- package/docs/ko/benchmark/tanstack.md +1 -1
- package/docs/ko/dictionary/markdown.md +340 -14
- package/docs/ko/interest_of_intlayer.md +1 -1
- package/docs/ko/{intlayer_with_angular.md → intlayer_with_angular_19.md} +8 -7
- package/docs/ko/intlayer_with_angular_21.md +412 -0
- package/docs/nl/interest_of_intlayer.md +1 -1
- package/docs/nl/intlayer_with_angular_21.md +412 -0
- package/docs/pl/benchmark/nextjs.md +1 -1
- package/docs/pl/benchmark/solid.md +1 -1
- package/docs/pl/benchmark/svelte.md +1 -1
- package/docs/pl/benchmark/tanstack.md +1 -1
- package/docs/pl/dictionary/markdown.md +340 -14
- package/docs/pl/interest_of_intlayer.md +1 -1
- package/docs/pl/{intlayer_with_angular.md → intlayer_with_angular_19.md} +8 -7
- package/docs/pl/intlayer_with_angular_21.md +412 -0
- package/docs/pt/benchmark/nextjs.md +1 -1
- package/docs/pt/benchmark/solid.md +1 -1
- package/docs/pt/benchmark/svelte.md +1 -1
- package/docs/pt/benchmark/tanstack.md +1 -1
- package/docs/pt/dictionary/markdown.md +340 -14
- package/docs/pt/interest_of_intlayer.md +1 -1
- package/docs/pt/{intlayer_with_angular.md → intlayer_with_angular_19.md} +8 -7
- package/docs/pt/intlayer_with_angular_21.md +412 -0
- package/docs/ru/benchmark/nextjs.md +1 -1
- package/docs/ru/benchmark/solid.md +1 -1
- package/docs/ru/benchmark/svelte.md +1 -1
- package/docs/ru/benchmark/tanstack.md +1 -1
- package/docs/ru/dictionary/markdown.md +445 -3
- package/docs/ru/interest_of_intlayer.md +1 -1
- package/docs/ru/{intlayer_with_angular.md → intlayer_with_angular_19.md} +8 -7
- package/docs/ru/intlayer_with_angular_21.md +412 -0
- package/docs/tr/benchmark/nextjs.md +1 -1
- package/docs/tr/benchmark/solid.md +1 -1
- package/docs/tr/benchmark/svelte.md +1 -1
- package/docs/tr/benchmark/tanstack.md +1 -1
- package/docs/tr/dictionary/markdown.md +340 -14
- package/docs/tr/interest_of_intlayer.md +1 -1
- package/docs/tr/{intlayer_with_angular.md → intlayer_with_angular_19.md} +8 -7
- package/docs/tr/intlayer_with_angular_21.md +412 -0
- package/docs/uk/benchmark/nextjs.md +1 -1
- package/docs/uk/benchmark/solid.md +1 -1
- package/docs/uk/benchmark/svelte.md +1 -1
- package/docs/uk/benchmark/tanstack.md +1 -1
- package/docs/uk/dictionary/markdown.md +340 -14
- package/docs/uk/interest_of_intlayer.md +1 -1
- package/docs/uk/{intlayer_with_angular.md → intlayer_with_angular_19.md} +8 -7
- package/docs/uk/intlayer_with_angular_21.md +412 -0
- package/docs/ur/interest_of_intlayer.md +1 -1
- package/docs/ur/intlayer_with_angular_21.md +412 -0
- package/docs/vi/benchmark/nextjs.md +1 -1
- package/docs/vi/benchmark/solid.md +1 -1
- package/docs/vi/benchmark/svelte.md +1 -1
- package/docs/vi/benchmark/tanstack.md +1 -1
- package/docs/vi/dictionary/markdown.md +340 -14
- package/docs/vi/interest_of_intlayer.md +1 -1
- package/docs/vi/{intlayer_with_angular.md → intlayer_with_angular_19.md} +8 -7
- package/docs/vi/intlayer_with_angular_21.md +412 -0
- package/docs/zh/benchmark/nextjs.md +1 -1
- package/docs/zh/benchmark/solid.md +1 -1
- package/docs/zh/benchmark/svelte.md +1 -1
- package/docs/zh/benchmark/tanstack.md +1 -1
- package/docs/zh/dictionary/markdown.md +340 -14
- package/docs/zh/interest_of_intlayer.md +1 -1
- package/docs/zh/{intlayer_with_angular.md → intlayer_with_angular_19.md} +8 -7
- package/docs/zh/intlayer_with_angular_21.md +412 -0
- package/docs/zh-TW/interest_of_intlayer.md +1 -1
- package/docs/zh-TW/intlayer_with_angular_21.md +412 -0
- package/package.json +7 -7
- package/src/common.ts +12 -6
- 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
|
-
|
|
72
|
-
|
|
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
|
|
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
|
|
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
|
|
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
|
-
[](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 ऐप का अनुवाद कैसे करें
|
|
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
|
-
|
|
17
|
-
|
|
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
|
|