@intlayer/docs 8.11.2 → 8.12.0-canary.0

package/docs/hi/intlayer_with_tanstack.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-09-09
-updatedAt: 2026-05-06
-title: Tanstack Start i18n - Tanstack Start ऐप कैसे अनुवाद करें 2026 में
-description: जानें कि Intlayer का उपयोग करके अपने TanStack Start एप्लिकेशन में अंतर्राष्ट्रीयकरण (i18n) कैसे जोड़ें। अपने ऐप को बहुभाषी और लोकेल-जागरूक रूटिंग के साथ बनाने के लिए इस व्यापक गाइड का पालन करें।
+updatedAt: 2026-05-31
+title: "TanStack Start i18n - अपने ऐप को अनुवाद करने का पूर्ण गाइड"
+description: "अब i18next की जरूरत नहीं। 2026 में TanStack Start ऐप को बहुभाषी (i18n) बनाने का गाइड। AI एजेंट्स से अनुवाद करें और बंडल साइज़, SEO और परफॉर्मेंस ऑप्टिमाइज़ करें।"
 keywords:
   - अंतर्राष्ट्रीयकरण
   - दस्तावेज़ीकरण
@@ -54,17 +54,37 @@ history:
 
 यह गाइड दिखाता है कि लोकेल-जागरूक रूटिंग, TypeScript समर्थन और आधुनिक विकास प्रथाओं के साथ TanStack Start प्रोजेक्ट्स में निर्बाध अंतर्राष्ट्रीयकरण के लिए **Intlayer** को कैसे एकीकृत किया जाए।
 
-## Intlayer क्या है?
+## विकल्पों पर इन्टलेयर क्यों?
 
-**Intlayer** एक अभिनव, ओपन-सोर्स अंतर्राष्ट्रीयकरण (i18n) लाइब्रेरी है जिसे आधुनिक वेब अनुप्रयोगों में बहुभाषी समर्थन को सरल बनाने के लिए डिज़ाइन किया गया है।
+`react-i18next` या `use-intl`, या `paraglide` जैसे मुख्य समाधानों की तुलना में, Intlayer एक समाधान है जो एकीकृत अनुकूलन के साथ आता है जैसे:
 
-Intlayer के साथ, आप कर सकते हैं:
+**पूर्ण टैनस्टैक प्रारंभ कवरेज**
 
-- **घोषणात्मक शब्दकोशों का उपयोग करके अनुवादों को आसानी से प्रबंधित करें** जो घटक स्तर पर होते हैं।
-- **मेटाडेटा, रूट्स और सामग्री को गतिशील रूप से स्थानीयकृत करें**।
-- **TypeScript समर्थन सुनिश्चित करें** स्वचालित रूप से उत्पन्न प्रकारों के साथ, ऑटोकम्प्लीशन और त्रुटि पहचान में सुधार करते हुए।
-- **उन्नत सुविधाओं का लाभ उठाएं**, जैसे गतिशील लोकेल पहचान और स्विचिंग।
-- **TanStack Start की फ़ाइल-आधारित रूटिंग प्रणाली के साथ लोकेल-जागरूक रूटिंग सक्षम करें**।
+इंटलेयर टैनस्टैक स्टार्ट के लिए पूरी तरह से अनुकूलित है, जो **बहुभाषी रूटिंग**, **कुकी प्रबंधन**, **साइटमैप जेनरेशन**, **डायनामिक कंटेंट लोडिंग** और आपके अंतर्राष्ट्रीयकरण (i18n) प्रयासों को बढ़ाने के लिए आवश्यक सभी सुविधाएँ प्रदान करता है।
+
+**बंडल का आकार**
+
+अपने पृष्ठों में विशाल JSON फ़ाइलें लोड करने के बजाय, केवल आवश्यक सामग्री लोड करें। इंटलेयर आपके बंडल और पृष्ठ आकार को 50% तक कम करने में मदद करता है।
+
+**रखरखाव**
+
+आपके एप्लिकेशन की सामग्री का दायरा बड़े पैमाने के अनुप्रयोगों के लिए **रखरखाव की सुविधा प्रदान करता है**। आप अपने संपूर्ण सामग्री कोडबेस की समीक्षा करने के मानसिक बोझ के बिना किसी एक फीचर फ़ोल्डर की नकल कर सकते हैं या उसे हटा सकते हैं। इसके अतिरिक्त, आपकी सामग्री की सटीकता सुनिश्चित करने के लिए Intlayer **पूरी तरह से टाइप किया गया** है।
+
+**एआई एजेंट**
+
+सामग्री का सह-स्थानीकरण **बड़े भाषा मॉडल (एलएलएम) द्वारा आवश्यक संदर्भ को कम करता है**। इंटलेयर टूल के एक सूट के साथ भी आता है, जैसे **CLI** ताकि लापता अनुवादों का परीक्षण किया जा सके,**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)**, और **[एजेंट कौशल](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, AI एजेंटों के लिए डेवलपर अनुभव (DX) को और भी आसान बनाने के लिए।
+
+**स्वचालन**
+
+अपने एआई प्रदाता की कीमत पर अपनी पसंद के एलएलएम का उपयोग करके अपने सीआई/सीडी पाइपलाइन में अनुवाद करने के लिए स्वचालन का उपयोग करें। इंटलेयर सामग्री निष्कर्षण को स्वचालित करने के लिए एक **कंपाइलर** के साथ-साथ **पृष्ठभूमि में अनुवाद** में मदद करने के लिए एक [वेब प्लेटफ़ॉर्म](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) भी प्रदान करता है।
+
+**प्रदर्शन**
+
+बड़े पैमाने पर JSON फ़ाइलों को घटकों से जोड़ने से प्रदर्शन और प्रतिक्रियाशीलता संबंधी समस्याएं हो सकती हैं। इंटलेयर बिल्ड समय पर आपकी सामग्री लोडिंग को अनुकूलित करता है।
+
+**किसी भी देव के साथ स्केलिंग**
+
+सिर्फ एक i18n समाधान से अधिक, Intlayer एक **स्व-होस्टेड [विज़ुअल एडिटर](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** और एक **[पूर्ण] प्रदान करता है सीएमएस](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** आपकी बहुभाषी सामग्री को **वास्तविक समय** में प्रबंधित करने में मदद करता है, जिससे अनुवादकों, कॉपीराइटरों और टीम के अन्य सदस्यों के साथ सहयोग सहज हो जाता है। सामग्री को स्थानीय और/या दूरस्थ रूप से संग्रहीत किया जा सकता है।
 
 ---
 
@@ -102,11 +122,15 @@ Intlayer के साथ, आप कर सकते हैं:
 
 GitHub पर [एप्लिकेशन टेम्पलेट](https://github.com/aymericzip/intlayer-tanstack-start-template) देखें।
 
-### चरण 1: प्रोजेक्ट बनाएं
+<Steps>
+
+<Step number={1} title="प्रोजेक्ट बनाएं">
 
 TanStack Start वेबसाइट पर [नया प्रोजेक्ट शुरू करें](https://tanstack.com/start/latest/docs/framework/react/quick-start) गाइड का पालन करके एक नया TanStack Start प्रोजेक्ट बनाना शुरू करें।
 
-### चरण 2: Intlayer पैकेज इंस्टॉल करें
+</Step>
+
+<Step number={2} title="Intlayer पैकेज इंस्टॉल करें">
 
 अपने पसंदीदा पैकेज मैनेजर का उपयोग करके आवश्यक पैकेज इंस्टॉल करें:
 
@@ -144,7 +168,9 @@ bun x intlayer init
 - **vite-intlayer**
   इसमें Intlayer को [Vite बंडलर](https://vite.dev/guide/why.html#why-bundle-for-production) के साथ एकीकृत करने के लिए Vite प्लगइन, साथ ही उपयोगकर्ता की पसंदीदा लोकेल का पता लगाने, कुकीज़ प्रबंधित करने और URL पुनर्निर्देशन को संभालने के लिए मिडलवेयर शामिल है।
 
-### चरण 3: अपने प्रोजेक्ट का कॉन्फ़िगरेशन
+</Step>
+
+<Step number={3} title="अपने प्रोजेक्ट का कॉन्फ़िगरेशन">
 
 अपनी एप्लिकेशन की भाषाओं को कॉन्फ़िगर करने के लिए एक कॉन्फ़िग फ़ाइल बनाएं:
 
@@ -165,7 +191,9 @@ export default config;
 
 > इस कॉन्फ़िगरेशन फ़ाइल के माध्यम से, आप स्थानीयकृत URL, मिडलवेयर पुनर्निर्देशन, कुकी नाम, अपनी सामग्री घोषणाओं का स्थान और विस्तार सेट कर सकते हैं, कंसोल में Intlayer लॉग को अक्षम कर सकते हैं, और बहुत कुछ। उपलब्ध पैरामीटर की पूरी सूची के लिए, [कॉन्फ़िगरेशन दस्तावेज़](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/configuration.md) देखें।
 
-### चरण 4: अपने Vite कॉन्फ़िगरेशन में Intlayer को एकीकृत करें
+</Step>
+
+<Step number={4} title="अपने Vite कॉन्फ़िगरेशन में Intlayer को एकीकृत करें">
 
 अपने कॉन्फ़िगरेशन में intlayer प्लगइन जोड़ें:
 
@@ -195,7 +223,9 @@ export default config;
 
 > `intlayer()` Vite प्लगइन का उपयोग Intlayer को Vite के साथ एकीकृत करने के लिए किया जाता है। यह सामग्री घोषणा फ़ाइलों के निर्माण को सुनिश्चित करता है और विकास मोड में उनकी निगरानी करता है। यह Vite एप्लिकेशन के भीतर Intlayer पर्यावरण चर को परिभाषित करता है। इसके अतिरिक्त, यह प्रदर्शन को अनुकूलित करने के लिए उपनाम प्रदान करता है।
 
-### चरण 5: रूट लेआउट बनाएं
+</Step>
+
+<Step number={5} title="रूट लेआउट बनाएं">
 
 वर्तमान लोकेल का पता लगाने के लिए `useParams` का उपयोग करके और `html` टैग पर `lang` और `dir` विशेषताओं को सेट करके अंतर्राष्ट्रीयकरण का समर्थन करने के लिए अपने रूट लेआउट को कॉन्फ़िगर करें।
 
@@ -255,7 +285,9 @@ function RootDocument({ children }: { children: ReactNode }) {
 > <img src="{String(content.image.src)}" alt="{String(content.image)}" />
 > ```
 
-### चरण 6: लोकेल लेआउट बनाएं
+</Step>
+
+<Step number={6} title="लोकेल लेआउट बनाएं">
 
 एक लेआउट बनाएं जो लोकेल उपसर्ग को संभालता है और सत्यापन करता है।
 
@@ -287,7 +319,9 @@ export const Route = createFileRoute("/{-$locale}")({
 > `'prefix-all'` मोड के लिए, आप इसके बजाय स्लॉट को `$locale` में बदलना पसंद कर सकते हैं।
 > `'no-prefix'` या `'search-params'` मोड के लिए, आप स्लॉट को पूरी तरह से हटा सकते हैं।
 
-### चरण 7: अपनी सामग्री घोषित करें
+</Step>
+
+<Step number={7} title="अपनी सामग्री घोषित करें">
 
 अनुवादों को संग्रहीत करने के लिए अपनी सामग्री घोषणाएं बनाएं और प्रबंधित करें:
 
@@ -333,7 +367,9 @@ export default appContent;
 
 > अधिक विवरण के लिए, [सामग्री घोषणा दस्तावेज़](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/dictionary/content_file.md) देखें।
 
-### चरण 8: लोकेल-जागरूक घटक और हुक बनाएं
+</Step>
+
+<Step number={8} title="लोकेल-जागरूक घटक और हुक बनाएं">
 
 लोकेल-जागरूक नेविगेशन के लिए एक `LocalizedLink` घटक बनाएं:
 
@@ -437,7 +473,9 @@ export const useLocalizedNavigate = () => {
 };
 ```
 
-### चरण 9: अपने पृष्ठों में Intlayer का उपयोग करें
+</Step>
+
+<Step number={9} title="अपने पृष्ठों में Intlayer का उपयोग करें">
 
 अपने एप्लिकेशन में अपने सामग्री शब्दकोशों तक पहुंचें:
 
@@ -485,7 +523,9 @@ function RouteComponent() {
 
 > `useIntlayer` हुक के बारे में अधिक जानने के लिए, [दस्तावेज़ीकरण](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/packages/react-intlayer/useIntlayer.md) देखें।
 
-### चरण 10: एक लोकेल स्विचर घटक बनाएं
+</Step>
+
+<Step number={10} title="एक लोकेल स्विचर घटक बनाएं">
 
 उपयोगकर्ताओं को भाषाएं बदलने की अनुमति देने के लिए एक घटक बनाएं:
 
@@ -546,7 +586,9 @@ export const LocaleSwitcher: FC = () => {
 
 > `useLocale` हुक के बारे में अधिक जानने के लिए, [दस्तावेज़ीकरण](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/packages/react-intlayer/useLocale.md) देखें।
 
-### चरण 11: HTML विशेषताओं का प्रबंधन
+</Step>
+
+<Step number={11} title="HTML विशेषताओं का प्रबंधन">
 
 जैसा कि चरण 5 में देखा गया है, आप अपने रूट घटक में `useParams` का उपयोग करके `html` टैग की `lang` और `dir` विशेषताओं को प्रबंधित कर सकते हैं। यह सुनिश्चित करता है कि सर्वर और क्लाइंट पर सही विशेषताएं सेट की गई हैं।
 
@@ -565,7 +607,9 @@ function RootDocument({ children }: { children: ReactNode }) {
 
 ---
 
-### चरण 12: मिडलवेयर जोड़ें (वैकल्पिक)
+</Step>
+
+<Step number={12} title="मिडलवेयर जोड़ें">
 
 आप अपने एप्लिकेशन में सर्वर-साइड रूटिंग जोड़ने के लिए `intlayerProxy` का भी उपयोग कर सकते हैं। यह प्लगइन URL के आधार पर वर्तमान लोकेल का स्वचालित रूप से पता लगाएगा और उपयुक्त लोकेल कुकी सेट करेगा। यदि कोई लोकेल निर्दिष्ट नहीं है, तो प्लगइन उपयोगकर्ता के ब्राउज़र भाषा प्राथमिकताओं के आधार पर सबसे उपयुक्त लोकेल निर्धारित करेगा। यदि कोई लोकेल नहीं मिलता है, तो यह डिफ़ॉल्ट लोकेल पर पुनर्निर्देशित करेगा।
 
@@ -596,7 +640,9 @@ export default defineConfig({
 
 ---
 
-### चरण 13: अपने मेटाडेटा को अंतर्राष्ट्रीयकृत करें (वैकल्पिक)
+</Step>
+
+<Step number={13} title="अपने मेटाडेटा को अंतर्राष्ट्रीयकृत करें">
 
 आप अपने एप्लिकेशन में अपने सामग्री शब्दकोशों तक पहुंचने के लिए `getIntlayer` हुक का भी उपयोग कर सकते हैं:
 
@@ -643,7 +689,9 @@ export const Route = createFileRoute("/{-$locale}/")({
 
 ---
 
-### चरण 14: अपने सर्वर एक्शन्स में लोकेल प्राप्त करें (वैकल्पिक)
+</Step>
+
+<Step number={14} title="अपने सर्वर एक्शन्स में लोकेल प्राप्त करें">
 
 आप अपने सर्वर एक्शन्स या API एंडपॉइंट के अंदर से वर्तमान लोकेल तक पहुंचना चाह सकते हैं।
 आप इसे `intlayer` से `getLocale` हेल्पर का उपयोग करके कर सकते हैं।
@@ -680,7 +728,9 @@ export const getLocaleServer = createServerFn().handler(async () => {
 
 ---
 
-### चरण 15: नहीं मिले पृष्ठों का प्रबंधन करें (वैकल्पिक)
+</Step>
+
+<Step number={15} title="नहीं मिले पृष्ठों का प्रबंधन करें">
 
 जब कोई उपयोगकर्ता गैर-मौजूद पृष्ठ पर जाता है, तो आप एक कस्टम नहीं मिला पृष्ठ प्रदर्शित कर सकते हैं और लोकेल उपसर्ग नहीं मिला पृष्ठ के ट्रिगर होने के तरीके को प्रभावित कर सकता है।
 
@@ -756,7 +806,9 @@ export const Route = createFileRoute("/{-$locale}/$")({
 
 ---
 
-### चरण 16: TypeScript कॉन्फ़िगर करें (वैकल्पिक)
+</Step>
+
+<Step number={16} title="TypeScript कॉन्फ़िगर करें">
 
 Intlayer TypeScript के लाभ प्राप्त करने और आपके कोडबेस को मजबूत बनाने के लिए मॉड्यूल ऑगमेंटेशन का उपयोग करता है।
 
@@ -774,7 +826,9 @@ Intlayer TypeScript के लाभ प्राप्त करने और
 
 ---
 
-### (वैकल्पिक) कदम 1 : अपने घटकों की सामग्री निकालें
+</Step>
+
+<Step number={1} title="अपने घटकों की सामग्री निकालें" isOptional={true}>
 
 यदि आपके पास मौजूदा कोडबेस है, तो हजारों फ़ाइलों को बदलना समय लेने वाला हो सकता है।
 
@@ -872,6 +926,10 @@ bun run build # Or bun run dev
 
 ---
 
+</Step>
+
+</Steps>
+
 ### Git कॉन्फ़िगरेशन
 
 Intlayer द्वारा उत्पन्न फ़ाइलों को अनदेखा करने की सिफारिश की जाती है। यह आपको उन्हें अपने Git रिपॉजिटरी में कमिट करने से बचने की अनुमति देता है।

package/docs/hi/intlayer_with_vanilla.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-03-31
-updatedAt: 2026-05-06
-title: Vanilla JS i18n - 2026 में Vanilla JS ऐप का अनुवाद कैसे करें
-description: जानें कि अपनी Vanilla JS वेबसाइट को बहुभाषी कैसे बनाया जाए। इसे अंतरराष्ट्रीय बनाने (i18n) और अनुवाद करने के लिए दस्तावेज़ों का पालन करें।
+updatedAt: 2026-05-31
+title: "Vanilla JS i18n - अपने ऐप को अनुवाद करने का पूर्ण गाइड"
+description: "अब i18next की जरूरत नहीं। 2026 में Vanilla JS ऐप को बहुभाषी (i18n) बनाने का गाइड। AI एजेंट्स से अनुवाद करें और बंडल साइज़, SEO और परफॉर्मेंस ऑप्टिमाइज़ करें।"
 keywords:
   - अंतर्राष्ट्रीयकरण
   - दस्तावेज़ीकरण
@@ -57,28 +57,45 @@ history:
 
 <TOC/>
 
-## Intlayer क्या है?
+## विकल्पों पर इन्टलेयर क्यों?
 
-**Intlayer** एक अभिनव, ओपन-सोर्स अंतर्राष्ट्रीयकरण (i18n) लाइब्रेरी है जिसे आधुनिक वेब अनुप्रयोगों में बहुभाषी समर्थन को सरल बनाने के लिए डिज़ाइन किया गया है।
+`i18next` या `i18n.js` जैसे मुख्य समाधानों की तुलना में, Intlayer एक ऐसा समाधान है जो एकीकृत अनुकूलन के साथ आता है जैसे:
 
-Intlayer के साथ, आप यह कर सकते हैं:
+**पूर्ण वेनिला जेएस कवरेज**
 
-- घटक स्तर पर घोषणात्मक शब्दकोशों का उपयोग करके **आसानी से अनुवाद प्रबंधित करें**।
-- **मेटाडेटा, रूट और सामग्री को गतिशील रूप से स्थानीयकृत करें**।
-- **TypeScript समर्थन सुनिश्चित करें** स्वतः जनित प्रकारों के साथ, स्वतः पूर्णता और त्रुटि पहचान में सुधार करें।
-- **उन्नत सुविधाओं का लाभ उठाएं**, जैसे गतिशील लोकेल पहचान और स्विचिंग।
+इंटलेयर को **फ्रेमवर्क-अज्ञेयवादी सामग्री प्रबंधन**, **टाइपस्क्रिप्ट समर्थन**, और स्केलिंग अंतर्राष्ट्रीयकरण (i18n) के लिए आवश्यक सभी सुविधाओं की पेशकश करके वेनिला जावास्क्रिप्ट के साथ पूरी तरह से काम करने के लिए अनुकूलित किया गया है।
 
-यह मार्गदर्शिका दिखाती है कि Vanilla JavaScript एप्लिकेशन में **पैकेज मैनेजर या बंडलर का उपयोग किए बिना** (जैसे Vite, Webpack, आदि) Intlayer का उपयोग कैसे करें।
+**बंडल का आकार**
 
-यदि आपका एप्लिकेशन बंडलर (जैसे Vite) का उपयोग करता है, तो हम इसके बजाय [Vite + Vanilla JS गाइड](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/intlayer_with_vite+vanilla.md) का पालन करने की सलाह देते हैं।
+अपने पृष्ठों में विशाल JSON फ़ाइलें लोड करने के बजाय, केवल आवश्यक सामग्री लोड करें। इंटलेयर आपके बंडल और पृष्ठ आकार को 50% तक कम करने में मदद करता है।
 
-स्टैंडअलोन बंडल का उपयोग करके, आप Intlayer को सीधे अपनी HTML फ़ाइलों में एक एकल JavaScript फ़ाइल के माध्यम से आयात कर सकते हैं, जो इसे पुराने प्रोजेक्ट्स या सरल स्थैतिक साइटों के लिए उपयुक्त बनाता है।
+**रखरखाव**
+
+आपके एप्लिकेशन की सामग्री का दायरा बड़े पैमाने के अनुप्रयोगों के लिए **रखरखाव की सुविधा प्रदान करता है**। आप अपने संपूर्ण सामग्री कोडबेस की समीक्षा करने के मानसिक बोझ के बिना किसी एक फीचर फ़ोल्डर की नकल कर सकते हैं या उसे हटा सकते हैं। इसके अतिरिक्त, आपकी सामग्री की सटीकता सुनिश्चित करने के लिए Intlayer **पूरी तरह से टाइप किया गया** है।
+
+**एआई एजेंट**
+
+सामग्री का सह-स्थानीकरण **बड़े भाषा मॉडल (एलएलएम) द्वारा आवश्यक संदर्भ को कम करता है**। इंटलेयर टूल के एक सूट के साथ भी आता है, जैसे **CLI** ताकि लापता अनुवादों का परीक्षण किया जा सके,**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)**, और **[एजेंट कौशल](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, AI एजेंटों के लिए डेवलपर अनुभव (DX) को और भी आसान बनाने के लिए।
+
+**स्वचालन**
+
+अपने एआई प्रदाता की कीमत पर अपनी पसंद के एलएलएम का उपयोग करके अपने सीआई/सीडी पाइपलाइन में अनुवाद करने के लिए स्वचालन का उपयोग करें। इंटलेयर सामग्री निष्कर्षण को स्वचालित करने के लिए एक **कंपाइलर** के साथ-साथ **पृष्ठभूमि में अनुवाद** में मदद करने के लिए एक [वेब प्लेटफ़ॉर्म](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) भी प्रदान करता है।
+
+**प्रदर्शन**
+
+बड़े पैमाने पर JSON फ़ाइलों को घटकों से जोड़ने से प्रदर्शन और प्रतिक्रियाशीलता संबंधी समस्याएं हो सकती हैं। इंटलेयर बिल्ड समय पर आपकी सामग्री लोडिंग को अनुकूलित करता है।
+
+**किसी भी देव के साथ स्केलिंग**
+
+सिर्फ एक i18n समाधान से अधिक, Intlayer एक **स्व-होस्टेड [विज़ुअल एडिटर](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** और एक **[पूर्ण] प्रदान करता है सीएमएस](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** आपकी बहुभाषी सामग्री को **वास्तविक समय** में प्रबंधित करने में मदद करता है, जिससे अनुवादकों, कॉपीराइटरों और टीम के अन्य सदस्यों के साथ सहयोग सहज हो जाता है। सामग्री को स्थानीय और/या दूरस्थ रूप से संग्रहीत किया जा सकता है।
 
 ---
 
 ## Vanilla JS एप्लिकेशन में Intlayer सेट करने के लिए चरण-दर-चरण मार्गदर्शिका
 
-### चरण 1: निर्भरताएँ स्थापित करें
+<Steps>
+
+<Step number={1} title="निर्भरताएँ स्थापित करें">
 
 npm का उपयोग करके आवश्यक पैकेज स्थापित करें:
 
@@ -138,7 +155,9 @@ bun x intlayer build
 
 > `intlayer standalone` CLI का बंडलिंग एक्सपोर्ट अनुपयोगित पैकेज, लोकेल और आपके कॉन्फ़िगरेशन के लिए विशिष्ट गैर-जरूरी लॉजिक (जैसे रीडायरेक्ट या प्रीफ़िक्स) को ट्री-शेकिंग (tree-shaking) के माध्यम से हटाकर एक अनुकूलित बिल्ड तैयार करता है।
 
-### चरण 2: आपके प्रोजेक्ट का कॉन्फ़िगरेशन
+</Step>
+
+<Step number={2} title="आपके प्रोजेक्ट का कॉन्फ़िगरेशन">
 
 अपने एप्लिकेशन की भाषाओं को कॉन्फ़िगर करने के लिए एक कॉन्फ़िगरेशन फ़ाइल बनाएँ:
 
@@ -162,7 +181,9 @@ export default config;
 
 > इस कॉन्फ़िगरेशन फ़ाइल के माध्यम से, आप स्थानीयकृत URL, मिडलवेयर रीडायरेक्शन, कुकी नाम, अपनी सामग्री घोषणाओं का स्थान और एक्सटेंशन सेट कर सकते हैं, कंसोल में Intlayer लॉग को अक्षम कर सकते हैं, और बहुत कुछ। उपलब्ध मानकों की पूरी सूची के लिए, [कॉन्फ़िगरेशन दस्तावेज़ीकरण](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/configuration.md) देखें।
 
-### चरण 3: अपने HTML में बंडल आयात करें
+</Step>
+
+<Step number={3} title="अपने HTML में बंडल आयात करें">
 
 एक बार जब आप `intlayer.js` बंडल जनरेट कर लेते हैं, तो आप इसे अपनी HTML फ़ाइल में आयात कर सकते हैं:
 
@@ -186,7 +207,9 @@ export default config;
 
 बंडल `window` पर वैश्विक ऑब्जेक्ट के रूप में `Intlayer` और `VanillaIntlayer` को उजागर करता है।
 
-### चरण 4: अपने प्रवेश बिंदु में Intlayer को बूटस्ट्रैप करें
+</Step>
+
+<Step number={4} title="अपने प्रवेश बिंदु में Intlayer को बूटस्ट्रैप करें">
 
 अपने `src/main.js` में, किसी भी सामग्री को रेंडर करने से **पहले** `installIntlayer()` कॉल करें ताकि वैश्विक लोकेल सिंगलटन तैयार हो जाए।
 
@@ -206,7 +229,9 @@ installIntlayer();
 installIntlayerMarkdown();
 ```
 
-### चरण 5: अपनी सामग्री घोषित करें
+</Step>
+
+<Step number={5} title="अपनी सामग्री घोषित करें">
 
 अनुवादों को संग्रहीत करने के लिए अपनी सामग्री घोषणाएँ बनाएँ और प्रबंधित करें:
 
@@ -284,7 +309,9 @@ export default appContent;
 >
 > अधिक विवरण के लिए, [सामग्री घोषणा दस्तावेज़ीकरण](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/dictionary/content_file.md) देखें।
 
-### चरण 6: अपने JavaScript में Intlayer का उपयोग करें
+</Step>
+
+<Step number={6} title="अपने JavaScript में Intlayer का उपयोग करें">
 
 `window.VanillaIntlayer` ऑब्जेक्ट API सहायक प्रदान करता है: `useIntlayer(key, locale?)` किसी दिए गए कुंजी के लिए अनुवादित सामग्री लौटाता है।
 
@@ -318,7 +345,9 @@ document.querySelector(".read-the-docs").textContent = String(
 > img.alt = content.viteLogoLabel.value;
 > ```
 
-### (ऐच्छिक) चरण 7: अपनी सामग्री की भाषा बदलें
+</Step>
+
+<Step number={7} title="अपनी सामग्री की भाषा बदलें" isOptional={true}>
 
 अपनी सामग्री की भाषा बदलने के लिए, `useLocale` द्वारा उजागर `setLocale` फ़ंक्शन का उपयोग करें।
 
@@ -353,7 +382,9 @@ export function setupLocaleSwitcher(container) {
 }
 ```
 
-### (ऐच्छिक) चरण 8: HTML भाषा और दिशा विशेषताएँ स्विच करें
+</Step>
+
+<Step number={8} title="HTML भाषा और दिशा विशेषताएँ स्विच करें" isOptional={true}>
 
 एक्सेसिबिलिटी और SEO के लिए `<html>` टैग की `lang` और `dir` विशेषताओं को वर्तमान लोकेल से मिलान करने के लिए अपडेट करें।
 
@@ -371,7 +402,9 @@ useLocale({
 });
 ```
 
-### (ऐच्छिक) चरण 9: प्रति लोकेल शब्दकोशों को आलसी-लोड (Lazy-load) करें
+</Step>
+
+<Step number={9} title="प्रति लोकेल शब्दकोशों को आलसी-लोड (Lazy-load) करें" isOptional={true}>
 
 यदि आप प्रति लोकेल शब्दकोशों को आलसी-लोड करना चाहते हैं, तो आप `useDictionaryDynamic` का उपयोग कर सकते हैं। यह उपयोगी है यदि आप प्रारंभिक `intlayer.js` फ़ाइल में सभी अनुवादों को बंडल नहीं करना चाहते हैं।
 
@@ -393,6 +426,9 @@ const unsubscribe = useDictionaryDynamic(
 ```
 
 > नोट: `useDictionaryDynamic` के लिए शब्दकोशों को अलग ESM फ़ाइलों के रूप में उपलब्ध होना आवश्यक है। यह दृष्टिकोण आमतौर पर तब उपयोग किया जाता है जब आपके पास शब्दकोश परोसने वाला वेब सर्वर होता है।
+> </Step>
+
+</Steps>
 
 ### TypeScript कॉन्फ़िगर करें