@intlayer/docs 8.11.2 → 8.12.0-canary.0

package/docs/hi/intlayer_with_vite+vanilla.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-03-23
-updatedAt: 2026-05-06
-title: i18n Vite + Vanilla JS - 2026 में Vanilla JS ऐप का अनुवाद कैसे करें
-description: जानें कि अपने Vite और Vanilla JS वेबसाइट को बहुभाषी कैसे बनाएं। अंतर्राष्ट्रीयकरण (i18n) और अनुवाद के लिए दस्तावेज़ों का पालन करें।
+updatedAt: 2026-05-31
+title: "Vite + Vanilla JS i18n - अपने ऐप को अनुवाद करने का पूर्ण गाइड"
+description: "अब i18next की जरूरत नहीं। 2026 में Vite + Vanilla JS ऐप को बहुभाषी (i18n) बनाने का गाइड। AI एजेंट्स से अनुवाद करें और बंडल साइज़, SEO और परफॉर्मेंस ऑप्टिमाइज़ करें।"
 keywords:
   - अंतर्राष्ट्रीयकरण
   - दस्तावेज़ीकरण
@@ -58,22 +58,45 @@ history:
 
 <TOC/>
 
-## Intlayer क्या है?
+## विकल्पों पर इन्टलेयर क्यों?
 
-**Intlayer** एक अभिनव, ओपन-सोर्स अंतर्राष्ट्रीयकरण (i18n) लाइब्रेरी है जिसे आधुनिक वेब अनुप्रयोगों में बहुभाषी समर्थन को सरल बनाने के लिए डिज़ाइन किया गया है।
+`i18next` या `i18n.js` जैसे मुख्य समाधानों की तुलना में, Intlayer एक ऐसा समाधान है जो एकीकृत अनुकूलन के साथ आता है जैसे:
 
-Intlayer के साथ, आप:
+**पूर्ण वाइट कवरेज**
 
-- घटक स्तर पर घोषणात्मक शब्दकोशों का उपयोग करके **अनुवादों को आसानी से प्रबंधित** कर सकते हैं।
-- मेटाडेटा, रूट और सामग्री को **गतिशील रूप से स्थानीयकृत** कर सकते हैं।
-- स्वतः उत्पन्न प्रकारों के साथ **TypeScript समर्थन सुनिश्चित** कर सकते हैं, जिससे स्वतः पूर्णता और त्रुटि पहचान में सुधार होता है।
-- गतिशील लोकेल पहचान और स्विचिंग जैसी **उन्नत सुविधाओं का लाभ** उठा सकते हैं।
+Intlayer को **फ्रेमवर्क-अज्ञेयवादी सामग्री प्रबंधन**, **टाइपस्क्रिप्ट समर्थन**, और स्केलिंग अंतर्राष्ट्रीयकरण (i18n) के लिए आवश्यक सभी सुविधाओं की पेशकश करके Vite के साथ पूरी तरह से काम करने के लिए अनुकूलित किया गया है।
+
+**बंडल का आकार**
+
+अपने पृष्ठों में विशाल 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)** आपकी बहुभाषी सामग्री को **वास्तविक समय** में प्रबंधित करने में मदद करता है, जिससे अनुवादकों, कॉपीराइटरों और टीम के अन्य सदस्यों के साथ सहयोग सहज हो जाता है। सामग्री को स्थानीय और/या दूरस्थ रूप से संग्रहीत किया जा सकता है।
 
 ---
 
 ## Vite और Vanilla JS एप्लिकेशन में Intlayer सेट करने के लिए चरण-दर-चरण मार्गदर्शिका
 
-### चरण 1: निर्भरताएँ स्थापित करें
+<Steps>
+
+<Step number={1} title="निर्भरताएँ स्थापित करें">
 
 npm का उपयोग करके आवश्यक पैकेज स्थापित करें:
 
@@ -110,7 +133,9 @@ bun x intlayer init
 - **vite-intlayer**
   Intlayer को [Vite बंडलर](https://vite.dev/guide/why.html#why-bundle-for-production) के साथ एकीकृत करने के लिए Vite प्लगइन शामिल है, साथ ही उपयोगकर्ता के पसंदीदा लोकेल का पता लगाने, कुकीज़ प्रबंधित करने और URL पुनर्निर्देशन को संभालने के लिए मिडलवेयर भी शामिल है।
 
-### चरण 2: अपने प्रोजेक्ट का कॉन्फ़िगरेशन
+</Step>
+
+<Step number={2} title="अपने प्रोजेक्ट का कॉन्फ़िगरेशन">
 
 अपने एप्लिकेशन की भाषाओं को कॉन्फ़िगर करने के लिए एक कॉन्फ़िगरेशन फ़ाइल बनाएँ:
 
@@ -134,7 +159,9 @@ export default config;
 
 > इस कॉन्फ़िगरेशन फ़ाइल के माध्यम से, आप स्थानीयकृत URL, मिडलवेयर पुनर्निर्देशन, कुकी नाम, अपनी सामग्री घोषणाओं का स्थान और विस्तार सेट कर सकते हैं, कंसोल में Intlayer लॉग को अक्षम कर सकते हैं, और बहुत कुछ। उपलब्ध मापदंडों की पूरी सूची के लिए, [कॉन्फ़िगरेशन दस्तावेज़](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/configuration.md) देखें।
 
-### चरण 3: अपने Vite कॉन्फ़िगरेशन में Intlayer एकीकृत करें
+</Step>
+
+<Step number={3} title="अपने Vite कॉन्फ़िगरेशन में Intlayer एकीकृत करें">
 
 अपने कॉन्फ़िगरेशन में intlayer प्लगइन जोड़ें।
 
@@ -150,7 +177,9 @@ export default defineConfig({
 
 > `intlayer()` Vite प्लगइन का उपयोग Intlayer को Vite के साथ एकीकृत करने के लिए किया जाता है। यह सामग्री घोषणा फ़ाइलों के निर्माण को सुनिश्चित करता है और विकास मोड में उनकी निगरानी करता है। यह Vite एप्लिकेशन के भीतर Intlayer वातावरण चर को परिभाषित करता है। इसके अतिरिक्त, यह प्रदर्शन को अनुकूलित करने के लिए उपनाम (aliases) प्रदान करता है।
 
-### चरण 4: अपने एंट्री पॉइंट में Intlayer बूटस्ट्रैप करें
+</Step>
+
+<Step number={4} title="अपने एंट्री पॉइंट में Intlayer बूटस्ट्रैप करें">
 
 किसी भी सामग्री को रेंडर करने से **पहले** `installIntlayer()` को कॉल करें ताकि वैश्विक लोकेल सिंगलटन तैयार हो जाए।
 
@@ -175,7 +204,9 @@ installIntlayerMarkdown();
 import "./app.js";
 ```
 
-### चरण 5: अपनी सामग्री की घोषणा करें
+</Step>
+
+<Step number={5} title="अपनी सामग्री की घोषणा करें">
 
 अनुवादों को संग्रहीत करने के लिए सामग्री घोषणाएं बनाएं और प्रबंधित करें:
 
@@ -321,7 +352,9 @@ module.exports = 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 का उपयोग करें">
 
 `vanilla-intlayer`, `react-intlayer` सरफेस API को प्रतिबिंबित करता है: `useIntlayer(key, locale?)` सीधे अनुवादित सामग्री लौटाता है। लोकेल परिवर्तनों की सदस्यता लेने के लिए परिणाम पर `.onChange()` को चेन करें - React री-रेंडर के स्पष्ट समकक्ष।
 
@@ -357,7 +390,9 @@ document.querySelector<HTMLParagraphElement>(".read-the-docs")!.textContent =
 > img.alt = content.viteLogoLabel.value;
 > ```
 
-### (वैकल्पिक) चरण 7: अपनी सामग्री की भाषा बदलें
+</Step>
+
+<Step number={7} title="अपनी सामग्री की भाषा बदलें" isOptional={true}>
 
 अपनी सामग्री की भाषा बदलने के लिए, `useLocale` द्वारा प्रदान किए गए `setLocale` फ़ंक्शन का उपयोग करें।
 
@@ -392,7 +427,9 @@ export function setupLocaleSwitcher(container: HTMLElement): () => void {
 }
 ```
 
-### (वैकल्पिक) चरण 8: मार्कडाउन और HTML सामग्री रेंडर करें
+</Step>
+
+<Step number={8} title="मार्कडाउन और HTML सामग्री रेंडर करें" isOptional={true}>
 
 Intlayer `md()` और `html()` सामग्री घोषणाओं का समर्थन करता है। Vanilla JS में, संकलित आउटपुट `innerHTML` के माध्यम से कच्चे HTML के रूप में डाला जाता है।
 
@@ -451,7 +488,9 @@ document.querySelector<HTMLDivElement>(".edit-note")!.innerHTML =
 > });
 > ```
 
-### (वैकल्पिक) चरण 9: अपने एप्लिकेशन में स्थानीयकृत रूटिंग जोड़ें
+</Step>
+
+<Step number={9} title="अपने एप्लिकेशन में स्थानीयकृत रूटिंग जोड़ें" isOptional={true}>
 
 प्रत्येक भाषा के लिए अद्वितीय रूट बनाने के लिए (SEO के लिए उपयोगी), आप सर्वर-साइड लोकेल पहचान के लिए अपने Vite कॉन्फ़िगरेशन में `intlayerProxy` का उपयोग कर सकते हैं।
 
@@ -471,7 +510,9 @@ export default defineConfig({
 });
 ```
 
-### (वैकल्पिक) चरण 10: लोकेल बदलने पर URL बदलें
+</Step>
+
+<Step number={10} title="लोकेल बदलने पर URL बदलें" isOptional={true}>
 
 लोकेल बदलने पर ब्राउज़र URL को अपडेट करने के लिए, Intlayer स्थापित करने के बाद `useRewriteURL()` को कॉल करें:
 
@@ -485,7 +526,9 @@ installIntlayer();
 const stopRewriteURL = useRewriteURL();
 ```
 
-### (वैकल्पिक) चरण 11: HTML भाषा और दिशा विशेषताओं को स्विच करें
+</Step>
+
+<Step number={11} title="HTML भाषा और दिशा विशेषताओं को स्विच करें" isOptional={true}>
 
 पहुंच और SEO के लिए वर्तमान लोकेल से मेल खाने के लिए `<html>` टैग की `lang` और `dir` विशेषताओं को अपडेट करें।
 
@@ -503,7 +546,9 @@ useLocale({
 });
 ```
 
-### (वैकल्पिक) चरण 12: प्रति लोकेल शब्दकोशों को लेज़ी-लोड करें
+</Step>
+
+<Step number={12} title="प्रति लोकेल शब्दकोशों को लेज़ी-लोड करें" isOptional={true}>
 
 बड़े ऐप्स के लिए आप प्रत्येक लोकेल के शब्दकोश को उसके अपने चंक में विभाजित करना चाह सकते हैं। Vite के गतिशील `import()` के साथ `useDictionaryDynamic` का उपयोग करें:
 
@@ -526,7 +571,9 @@ const unsubscribe = useDictionaryDynamic(
 
 > प्रत्येक लोकेल का बंडल केवल तभी प्राप्त किया जाता है जब वह लोकेल सक्रिय हो जाता है और परिणाम कैश किया जाता है - उसी लोकेल पर बाद के स्विच त्वरित होते हैं।
 
-### (वैकल्पिक) चरण 13: अपने घटकों की सामग्री निकालें
+</Step>
+
+<Step number={13} title="अपने घटकों की सामग्री निकालें" isOptional={true}>
 
 यदि आपके पास मौजूदा कोडबेस है, तो हजारों फ़ाइलों को बदलना समय लेने वाला हो सकता है।
 
@@ -622,6 +669,9 @@ bun run build # या bun run dev
 
  </Tab>
 </Tabs>
+</Step>
+
+</Steps>
 
 ### (वैकल्पिक) साइटमैप और robots.txt (बिल्ड-टाइम जनरेशन)
 

package/docs/hi/intlayer_with_vite+vue.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2026-05-06
-title: Vite + Vue i18n - Vue ऐप कैसे अनुवाद करें 2026 में
-description: जानें कि अपनी Vite और Vue वेबसाइट को बहुभाषी कैसे बनाएं। अंतरराष्ट्रीयकरण (i18n) और अनुवाद के लिए दस्तावेज़ का पालन करें।
+updatedAt: 2026-05-31
+title: "Vite + Vue i18n - अपने ऐप को अनुवाद करने का पूर्ण गाइड"
+description: "अब i18next की जरूरत नहीं। 2026 में Vite + Vue ऐप को बहुभाषी (i18n) बनाने का गाइड। AI एजेंट्स से अनुवाद करें और बंडल साइज़, SEO और परफॉर्मेंस ऑप्टिमाइज़ करें।"
 keywords:
   - अंतरराष्ट्रीयकरण
   - दस्तावेज़ीकरण
@@ -33,16 +33,37 @@ history:
 
 GitHub पर [एप्लिकेशन टेम्पलेट](https://github.com/aymericzip/intlayer-vite-vue-template) देखें।
 
-## Intlayer क्या है?
+## विकल्पों पर इन्टलेयर क्यों?
 
-**Intlayer** एक अभिनव, ओपन-सोर्स अंतरराष्ट्रीयकरण (i18n) लाइब्रेरी है जिसे आधुनिक वेब एप्लिकेशन में बहुभाषी समर्थन को सरल बनाने के लिए डिज़ाइन किया गया है।
+`Vue-i18n` या `i18next` जैसे मुख्य समाधानों की तुलना में, Intlayer एक ऐसा समाधान है जो एकीकृत अनुकूलन के साथ आता है जैसे:
 
-Intlayer के साथ, आप कर सकते हैं:
+**पूर्ण व्यू कवरेज**
 
-- **घोषणात्मक शब्दकोशों का उपयोग करके अनुवादों का आसानी से प्रबंधन करें** जो कॉम्पोनेंट स्तर पर होते हैं।
-- **मेटाडेटा, रूट्स, और सामग्री को गतिशील रूप से स्थानीयकृत करें**।
-- **TypeScript समर्थन सुनिश्चित करें** ऑटो-जेनरेटेड प्रकारों के साथ, जो ऑटो-कम्प्लीशन और त्रुटि पहचान में सुधार करता है।
-- **उन्नत सुविधाओं का लाभ उठाएं**, जैसे गतिशील लोकल डिटेक्शन और स्विचिंग।
+Intlayer को **घटक-स्तरीय सामग्री स्कोपिंग**, **प्रतिक्रियाशील अनुवाद**, और स्केलिंग अंतर्राष्ट्रीयकरण (i18n) के लिए आवश्यक सभी सुविधाओं की पेशकश करके Vue के साथ पूरी तरह से काम करने के लिए अनुकूलित किया गया है।
+
+**बंडल का आकार**
+
+अपने पृष्ठों में विशाल 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)** आपकी बहुभाषी सामग्री को **वास्तविक समय** में प्रबंधित करने में मदद करता है, जिससे अनुवादकों, कॉपीराइटरों और टीम के अन्य सदस्यों के साथ सहयोग सहज हो जाता है। सामग्री को स्थानीय और/या दूरस्थ रूप से संग्रहीत किया जा सकता है।
 
 ---
 
@@ -80,7 +101,9 @@ Intlayer के साथ, आप कर सकते हैं:
 
 GitHub पर [एप्लिकेशन टेम्पलेट](https://github.com/aymericzip/intlayer-vite-vue-template) देखें।
 
-### चरण 1: निर्भरताएँ स्थापित करें
+<Steps>
+
+<Step number={1} title="निर्भरताएँ स्थापित करें">
 
 npm का उपयोग करके आवश्यक पैकेज स्थापित करें:
 
@@ -118,7 +141,9 @@ bun x intlayer init
 - **vite-intlayer**
   Vite प्लगइन शामिल है जो Intlayer को [Vite बंडलर](https://vite.dev/guide/why.html#why-bundle-for-production) के साथ एकीकृत करता है, साथ ही उपयोगकर्ता की पसंदीदा भाषा का पता लगाने, कुकीज़ प्रबंधित करने, और URL पुनर्निर्देशन को संभालने के लिए मिडलवेयर भी प्रदान करता है।
 
-### चरण 2: अपने प्रोजेक्ट का कॉन्फ़िगरेशन
+</Step>
+
+<Step number={2} title="अपने प्रोजेक्ट का कॉन्फ़िगरेशन">
 
 अपने एप्लिकेशन की भाषाओं को कॉन्फ़िगर करने के लिए एक कॉन्फ़िग फ़ाइल बनाएं:
 
@@ -142,7 +167,9 @@ export default config;
 
 > इस कॉन्फ़िगरेशन फ़ाइल के माध्यम से, आप स्थानीयकृत URL, मिडलवेयर पुनर्निर्देशन, कुकी नाम, आपकी सामग्री घोषणाओं का स्थान और एक्सटेंशन, कंसोल में Intlayer लॉग को अक्षम करना, और भी बहुत कुछ सेट कर सकते हैं। उपलब्ध पैरामीटर की पूरी सूची के लिए, कृपया [कॉन्फ़िगरेशन दस्तावेज़](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/configuration.md) देखें।
 
-### चरण 3: अपने Vite कॉन्फ़िगरेशन में Intlayer को एकीकृत करें
+</Step>
+
+<Step number={3} title="अपने Vite कॉन्फ़िगरेशन में Intlayer को एकीकृत करें">
 
 अपने कॉन्फ़िगरेशन में intlayer प्लगइन जोड़ें।
 
@@ -159,7 +186,9 @@ export default defineConfig({
 
 > `intlayer()` Vite प्लगइन का उपयोग Intlayer को Vite के साथ एकीकृत करने के लिए किया जाता है। यह कंटेंट घोषणा फ़ाइलों के निर्माण को सुनिश्चित करता है और विकास मोड में उनका निरीक्षण करता है। यह Vite एप्लिकेशन के भीतर Intlayer पर्यावरण चर को परिभाषित करता है। इसके अतिरिक्त, यह प्रदर्शन को अनुकूलित करने के लिए उपनाम प्रदान करता है।
 
-### चरण 4: अपनी सामग्री घोषित करें
+</Step>
+
+<Step number={4} title="अपनी सामग्री घोषित करें">
 
 अनुवाद संग्रहीत करने के लिए अपनी सामग्री घोषणाएँ बनाएं और प्रबंधित करें:
 
@@ -280,7 +309,9 @@ export default helloWorldContent;
 
 > अधिक विवरण के लिए, [सामग्री घोषणा प्रलेखन](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/dictionary/content_file.md) देखें।
 
-### चरण 5: अपने कोड में Intlayer का उपयोग करें
+</Step>
+
+<Step number={5} title="अपने कोड में Intlayer का उपयोग करें">
 
 अपने Vue एप्लिकेशन में Intlayer के अंतरराष्ट्रीयकरण फीचर्स का उपयोग करने के लिए, आपको सबसे पहले अपने मुख्य फ़ाइल में Intlayer सिंगलटन इंस्टेंस को रजिस्टर करना होगा। यह चरण महत्वपूर्ण है क्योंकि यह आपके एप्लिकेशन के सभी कंपोनेंट्स को अंतरराष्ट्रीयकरण संदर्भ प्रदान करता है, जिससे अनुवाद आपके कंपोनेंट ट्री में कहीं भी सुलभ हो जाते हैं।
 
@@ -372,7 +403,9 @@ Intlayer आपकी सामग्री तक पहुंचने के
 
 > यदि आपका ऐप पहले से मौजूद है, तो आप हजारों घटकों को एक सेकंड में बदलने के लिए [Intlayer कंपाइलर](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/compiler.md) को [एक्सट्रैक्ट कमांड](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/cli/extract.md) के साथ उपयोग कर सकते हैं।
 
-### (वैकल्पिक) चरण 6: अपनी सामग्री की भाषा बदलें
+</Step>
+
+<Step number={6} title="अपनी सामग्री की भाषा बदलें" isOptional={true}>
 
 अपनी सामग्री की भाषा बदलने के लिए, आप `useLocale` कॉम्पोज़ेबल द्वारा प्रदान किया गया `setLocale` फ़ंक्शन उपयोग कर सकते हैं। यह फ़ंक्शन एप्लिकेशन की लोकल सेट करने और सामग्री को तदनुसार अपडेट करने की अनुमति देता है।
 
@@ -439,7 +472,9 @@ const content = useIntlayer("app"); // संबंधित intlayer घोष
 </template>
 ```
 
-### (वैकल्पिक) चरण 7: अपने एप्लिकेशन में स्थानीयकृत राउटिंग जोड़ें
+</Step>
+
+<Step number={7} title="अपने एप्लिकेशन में स्थानीयकृत राउटिंग जोड़ें" isOptional={true}>
 
 Vue एप्लिकेशन में स्थानीयकृत राउटिंग जोड़ना आमतौर पर Vue Router का उपयोग करके लोकल प्रीफिक्स के साथ किया जाता है। यह प्रत्येक भाषा के लिए अद्वितीय रूट बनाता है, जो SEO और SEO-अनुकूल URL के लिए उपयोगी है।
 
@@ -570,7 +605,9 @@ export default defineConfig({
 });
 ```
 
-### (वैकल्पिक) चरण 8: जब स्थानीयता बदलती है तो URL बदलें
+</Step>
+
+<Step number={8} title="जब स्थानीयता बदलती है तो URL बदलें" isOptional={true}>
 
 जब उपयोगकर्ता भाषा बदलता है तो URL को स्वचालित रूप से अपडेट करने के लिए, आप `LocaleSwitcher` घटक को Vue Router का उपयोग करने के लिए संशोधित कर सकते हैं:
 
@@ -660,7 +697,9 @@ watch(
 </ol>
 ```
 
-### (वैकल्पिक) चरण 9: HTML भाषा और दिशा विशेषताओं को स्विच करें
+</Step>
+
+<Step number={9} title="HTML भाषा और दिशा विशेषताओं को स्विच करें" isOptional={true}>
 
 जब आपका एप्लिकेशन कई भाषाओं का समर्थन करता है, तो वर्तमान लोकल के अनुसार `<html>` टैग के `lang` और `dir` विशेषताओं को अपडेट करना महत्वपूर्ण होता है। ऐसा करने से सुनिश्चित होता है कि:
 
@@ -719,7 +758,9 @@ useI18nHTMLAttributes();
 </template>
 ```
 
-### (वैकल्पिक) चरण 10: एक स्थानीयकृत लिंक कॉम्पोनेंट बनाना
+</Step>
+
+<Step number={10} title="एक स्थानीयकृत लिंक कॉम्पोनेंट बनाना" isOptional={true}>
 
 यह सुनिश्चित करने के लिए कि आपके एप्लिकेशन की नेविगेशन वर्तमान लोकल का सम्मान करती है, आप एक कस्टम `Link` कॉम्पोनेंट बना सकते हैं। यह कॉम्पोनेंट स्वचालित रूप से आंतरिक URL को वर्तमान भाषा के साथ प्रीफिक्स करता है। उदाहरण के लिए, जब एक फ्रेंच-भाषी उपयोगकर्ता "About" पेज के लिंक पर क्लिक करता है, तो वे `/about` के बजाय `/fr/about` पर पुनः निर्देशित होते हैं।
 
@@ -818,7 +859,9 @@ import RouterLink from "@components/RouterLink.vue";
 </script>
 ```
 
-### (वैकल्पिक) चरण 11: मार्कडाउन रेंडर करें
+</Step>
+
+<Step number={11} title="मार्कडाउन रेंडर करें" isOptional={true}>
 
 Intlayer आपके Vue एप्लिकेशन में Markdown सामग्री को सीधे रेंडर करने का समर्थन करता है। डिफ़ॉल्ट रूप से, Markdown को सादा टेक्स्ट के रूप में माना जाता है। Markdown को समृद्ध HTML में बदलने के लिए, आप [markdown-it](https://github.com/markdown-it/markdown-it), एक Markdown पार्सर, को एकीकृत कर सकते हैं।
 
@@ -866,55 +909,9 @@ const { myMarkdownContent } = useIntlayer("my-component");
 </script>
 ```
 
-### टाइपस्क्रिप्ट कॉन्फ़िगर करें
-
-Intlayer टाइपस्क्रिप्ट के लाभ प्राप्त करने और आपके कोडबेस को मजबूत बनाने के लिए मॉड्यूल ऑगमेंटेशन का उपयोग करता है।
-
-![Autocompletion](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
-
-![Translation error](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
-
-सुनिश्चित करें कि आपकी टाइपस्क्रिप्ट कॉन्फ़िगरेशन में ऑटो-जनरेटेड टाइप्स शामिल हैं।
-
-```json5 fileName="tsconfig.json"
-{
-  // ... आपके मौजूदा टाइपस्क्रिप्ट कॉन्फ़िगरेशन
-  "include": [
-    // ... आपके मौजूदा टाइपस्क्रिप्ट कॉन्फ़िगरेशन
-    ".intlayer/**/*.ts", // ऑटो-जनरेटेड टाइप्स शामिल करें
-  ],
-}
-```
-
-### गिट कॉन्फ़िगरेशन
-
-Intlayer द्वारा उत्पन्न फ़ाइलों को अनदेखा करने की सलाह दी जाती है। इससे आप इन्हें अपने Git रिपॉजिटरी में कमिट करने से बच सकते हैं।
-
-इसके लिए, आप अपनी `.gitignore` फ़ाइल में निम्नलिखित निर्देश जोड़ सकते हैं:
-
-```bash
-#  Intlayer द्वारा उत्पन्न फ़ाइलों को अनदेखा करें
-.intlayer
-```
-
-### VS कोड एक्सटेंशन
-
-Intlayer के साथ अपने विकास अनुभव को बेहतर बनाने के लिए, आप आधिकारिक **Intlayer VS कोड एक्सटेंशन** इंस्टॉल कर सकते हैं।
+</Step>
 
-[VS कोड मार्केटप्लेस से इंस्टॉल करें](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
-
-यह एक्सटेंशन प्रदान करता है:
-
-- अनुवाद कुंजियों के लिए **ऑटोकंप्लीशन**।
-- गायब अनुवादों के लिए **रीयल-टाइम त्रुटि पता लगाना**।
-- अनुवादित सामग्री के **इनलाइन पूर्वावलोकन**।
-- अनुवादों को आसानी से बनाने और अपडेट करने के लिए **त्वरित क्रियाएं**।
-
-अधिक जानकारी के लिए कि एक्सटेंशन का उपयोग कैसे करें, कृपया [Intlayer VS Code एक्सटेंशन दस्तावेज़](https://intlayer.org/doc/vs-code-extension) देखें।
-
----
-
-### (वैकल्पिक) कदम 1 : अपने घटकों की सामग्री निकालें
+<Step number={1} title="अपने घटकों की सामग्री निकालें" isOptional={true}>
 
 यदि आपके पास मौजूदा कोडबेस है, तो हजारों फ़ाइलों को बदलना समय लेने वाला हो सकता है।
 
@@ -1009,6 +1006,57 @@ bun run build # Or bun run dev
 
  </Tab>
 </Tabs>
+</Step>
+
+</Steps>
+
+### टाइपस्क्रिप्ट कॉन्फ़िगर करें
+
+Intlayer टाइपस्क्रिप्ट के लाभ प्राप्त करने और आपके कोडबेस को मजबूत बनाने के लिए मॉड्यूल ऑगमेंटेशन का उपयोग करता है।
+
+![Autocompletion](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
+
+![Translation error](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
+
+सुनिश्चित करें कि आपकी टाइपस्क्रिप्ट कॉन्फ़िगरेशन में ऑटो-जनरेटेड टाइप्स शामिल हैं।
+
+```json5 fileName="tsconfig.json"
+{
+  // ... आपके मौजूदा टाइपस्क्रिप्ट कॉन्फ़िगरेशन
+  "include": [
+    // ... आपके मौजूदा टाइपस्क्रिप्ट कॉन्फ़िगरेशन
+    ".intlayer/**/*.ts", // ऑटो-जनरेटेड टाइप्स शामिल करें
+  ],
+}
+```
+
+### गिट कॉन्फ़िगरेशन
+
+Intlayer द्वारा उत्पन्न फ़ाइलों को अनदेखा करने की सलाह दी जाती है। इससे आप इन्हें अपने Git रिपॉजिटरी में कमिट करने से बच सकते हैं।
+
+इसके लिए, आप अपनी `.gitignore` फ़ाइल में निम्नलिखित निर्देश जोड़ सकते हैं:
+
+```bash
+#  Intlayer द्वारा उत्पन्न फ़ाइलों को अनदेखा करें
+.intlayer
+```
+
+### VS कोड एक्सटेंशन
+
+Intlayer के साथ अपने विकास अनुभव को बेहतर बनाने के लिए, आप आधिकारिक **Intlayer VS कोड एक्सटेंशन** इंस्टॉल कर सकते हैं।
+
+[VS कोड मार्केटप्लेस से इंस्टॉल करें](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
+
+यह एक्सटेंशन प्रदान करता है:
+
+- अनुवाद कुंजियों के लिए **ऑटोकंप्लीशन**।
+- गायब अनुवादों के लिए **रीयल-टाइम त्रुटि पता लगाना**।
+- अनुवादित सामग्री के **इनलाइन पूर्वावलोकन**।
+- अनुवादों को आसानी से बनाने और अपडेट करने के लिए **त्वरित क्रियाएं**।
+
+अधिक जानकारी के लिए कि एक्सटेंशन का उपयोग कैसे करें, कृपया [Intlayer VS Code एक्सटेंशन दस्तावेज़](https://intlayer.org/doc/vs-code-extension) देखें।
+
+---
 
 ### (वैकल्पिक) साइटमैप और robots.txt (बिल्ड-टाइम जनरेशन)