@intlayer/docs 8.11.2 → 8.12.0-canary.0

package/docs/hi/intlayer_with_svelte_kit.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-11-20
-updatedAt: 2026-05-06
-title: SvelteKit i18n - SvelteKit ऐप कैसे अनुवाद करें 2026 में
-description: जानें कि अपनी SvelteKit वेबसाइट को बहुभाषी कैसे बनाएं। Server-Side Rendering (SSR) का उपयोग करके इसे अंतरराष्ट्रीयकृत (i18n) और अनुवादित करने के लिए दस्तावेज़ का पालन करें।
+updatedAt: 2026-05-31
+title: "SvelteKit i18n - अपने ऐप को अनुवाद करने का पूर्ण गाइड"
+description: "अब i18next की जरूरत नहीं। 2026 में SvelteKit ऐप को बहुभाषी (i18n) बनाने का गाइड। AI एजेंट्स से अनुवाद करें और बंडल साइज़, SEO और परफॉर्मेंस ऑप्टिमाइज़ करें।"
 keywords:
   - अंतरराष्ट्रीयकरण
   - दस्तावेज़ीकरण
@@ -59,16 +59,37 @@ history:
 
 <TOC/>
 
-## Intlayer क्या है?
+## विकल्पों पर इन्टलेयर क्यों?
 
-**Intlayer** एक अभिनव, ओपन-सोर्स अंतरराष्ट्रीयकरण (i18n) लाइब्रेरी है जिसे आधुनिक वेब एप्लिकेशन में बहुभाषी समर्थन को सरल बनाने के लिए डिज़ाइन किया गया है। यह **SvelteKit** के Server-Side Rendering (SSR) क्षमताओं के साथ सहजता से काम करता है।
+`svelte-i18n` या `i18next` जैसे मुख्य समाधानों की तुलना में, Intlayer एक ऐसा समाधान है जो एकीकृत अनुकूलन के साथ आता है जैसे:
 
-Intlayer के साथ, आप कर सकते हैं:
+**पूर्ण SvelteKit कवरेज**
 
-- **घोषणात्मक शब्दकोशों का उपयोग करके अनुवादों का आसानी से प्रबंधन करें** जो कि कंपोनेंट स्तर पर होते हैं।
-- **मेटाडेटा, रूट्स, और कंटेंट को गतिशील रूप से स्थानीयकृत करें।**
-- **स्वचालित रूप से उत्पन्न प्रकारों के साथ TypeScript समर्थन सुनिश्चित करें।**
-- **SEO-अनुकूल अंतरराष्ट्रीयकरण के लिए SvelteKit के SSR का लाभ उठाएं।**
+Intlayer को **बहुभाषी रूटिंग**, **SSR समर्थन**, और स्केलिंग अंतर्राष्ट्रीयकरण (i18n) के लिए आवश्यक सभी सुविधाओं की पेशकश करके SvelteKit के साथ पूरी तरह से काम करने के लिए अनुकूलित किया गया है।
+
+**बंडल का आकार**
+
+अपने पृष्ठों में विशाल 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)** आपकी बहुभाषी सामग्री को **वास्तविक समय** में प्रबंधित करने में मदद करता है, जिससे अनुवादकों, कॉपीराइटरों और टीम के अन्य सदस्यों के साथ सहयोग सहज हो जाता है। सामग्री को स्थानीय और/या दूरस्थ रूप से संग्रहीत किया जा सकता है।
 
 ---
 
@@ -116,7 +137,9 @@ Intlayer के साथ, आप कर सकते हैं:
 └── vite.config.ts
 ```
 
-### चरण 1: Dependencies इंस्टॉल करें
+<Steps>
+
+<Step number={1} title="Dependencies इंस्टॉल करें">
 
 npm का उपयोग करके आवश्यक पैकेज इंस्टॉल करें:
 
@@ -148,7 +171,9 @@ bun x intlayer init
 - **svelte-intlayer**: Svelte/SvelteKit के लिए context providers और stores प्रदान करता है।
 - **vite-intlayer**: Vite प्लगइन जो content declarations को build प्रक्रिया के साथ एकीकृत करता है।
 
-### चरण 2: अपने प्रोजेक्ट का कॉन्फ़िगरेशन
+</Step>
+
+<Step number={2} title="अपने प्रोजेक्ट का कॉन्फ़िगरेशन">
 
 अपने प्रोजेक्ट रूट में एक config फ़ाइल बनाएं:
 
@@ -165,7 +190,9 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
-### चरण 3: अपने Vite कॉन्फ़िगरेशन में Intlayer को एकीकृत करें
+</Step>
+
+<Step number={3} title="अपने Vite कॉन्फ़िगरेशन में Intlayer को एकीकृत करें">
 
 अपने `vite.config.ts` को अपडेट करें ताकि इसमें Intlayer प्लगइन शामिल हो। यह प्लगइन आपकी content फ़ाइलों के transpilation को संभालता है।
 
@@ -179,7 +206,9 @@ export default defineConfig({
 });
 ```
 
-### चरण 4: अपनी सामग्री घोषित करें
+</Step>
+
+<Step number={4} title="अपनी सामग्री घोषित करें">
 
 अपने `src` फ़ोल्डर में कहीं भी अपनी सामग्री घोषणा फ़ाइलें बनाएं (जैसे, `src/lib/content` या अपने components के साथ)। ये फ़ाइलें आपके एप्लिकेशन के लिए अनुवाद योग्य सामग्री को परिभाषित करती हैं, प्रत्येक locale के लिए `t()` फ़ंक्शन का उपयोग करके।
 
@@ -200,13 +229,15 @@ const heroContent = {
 export default heroContent;
 ```
 
-### चरण 5: अपने Components में Intlayer का उपयोग करें
+</Step>
+
+<Step number={5} title="अपने Components में Intlayer का उपयोग करें">
 
 अब आप किसी भी Svelte component में `useIntlayer` फ़ंक्शन का उपयोग कर सकते हैं। यह एक reactive store लौटाता है जो locale बदलने पर स्वचालित रूप से अपडेट हो जाता है। यह फ़ंक्शन वर्तमान locale का स्वचालित रूप से सम्मान करेगा (SSR और client-side navigation दोनों के दौरान)।
 
 > **नोट:** `useIntlayer` एक Svelte store लौटाता है, इसलिए इसके reactive मान तक पहुँचने के लिए आपको `---
 > createdAt: 2025-11-20
-> updatedAt: 2026-05-06
+> updatedAt: 2026-05-31
 > title: अपने SvelteKit ऐप का अनुवाद कैसे करें – i18n गाइड 2026
 > description: जानें कि अपनी SvelteKit वेबसाइट को बहुभाषी कैसे बनाएं। Server-Side Rendering (SSR) का उपयोग करके इसे अंतरराष्ट्रीयकृत (i18n) और अनुवादित करने के लिए दस्तावेज़ का पालन करें।
 > keywords:
@@ -231,6 +262,10 @@ export default heroContent;
 
 # Intlayer का उपयोग करके अपनी SvelteKit वेबसाइट का अनुवाद करें | अंतरराष्ट्रीयकरण (i18n)
 
+</Step>
+
+</Steps>
+
 ## सामग्री सूची
 
 <TOC/>
@@ -292,7 +327,9 @@ Intlayer के साथ, आप कर सकते हैं:
 └── vite.config.ts
 ```
 
-### चरण 1: Dependencies इंस्टॉल करें
+<Steps>
+
+<Step number={1} title="Dependencies इंस्टॉल करें">
 
 npm का उपयोग करके आवश्यक पैकेज इंस्टॉल करें:
 
@@ -324,7 +361,9 @@ bun x intlayer init
 - **svelte-intlayer**: Svelte/SvelteKit के लिए context providers और stores प्रदान करता है।
 - **vite-intlayer**: Vite प्लगइन जो content declarations को build प्रक्रिया के साथ एकीकृत करता है।
 
-### चरण 2: अपने प्रोजेक्ट का कॉन्फ़िगरेशन
+</Step>
+
+<Step number={2} title="अपने प्रोजेक्ट का कॉन्फ़िगरेशन">
 
 अपने प्रोजेक्ट रूट में एक config फ़ाइल बनाएं:
 
@@ -341,7 +380,9 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
-### चरण 3: अपने Vite कॉन्फ़िगरेशन में Intlayer को एकीकृत करें
+</Step>
+
+<Step number={3} title="अपने Vite कॉन्फ़िगरेशन में Intlayer को एकीकृत करें">
 
 अपने `vite.config.ts` को अपडेट करें ताकि इसमें Intlayer प्लगइन शामिल हो। यह प्लगइन आपकी content फ़ाइलों के transpilation को संभालता है।
 
@@ -355,7 +396,9 @@ export default defineConfig({
 });
 ```
 
-### चरण 4: अपनी सामग्री घोषित करें
+</Step>
+
+<Step number={4} title="अपनी सामग्री घोषित करें">
 
 अपने `src` फ़ोल्डर में कहीं भी अपनी सामग्री घोषणा फ़ाइलें बनाएं (जैसे, `src/lib/content` या अपने components के साथ)। ये फ़ाइलें आपके एप्लिकेशन के लिए अनुवाद योग्य सामग्री को परिभाषित करती हैं, प्रत्येक locale के लिए `t()` फ़ंक्शन का उपयोग करके।
 
@@ -376,7 +419,9 @@ const heroContent = {
 export default heroContent;
 ```
 
-### चरण 5: अपने Components में Intlayer का उपयोग करें
+</Step>
+
+<Step number={5} title="अपने Components में Intlayer का उपयोग करें">
 
 प्रीफिक्स का उपयोग करना होगा (जैसे, `$content.title`)।
 
@@ -398,7 +443,9 @@ export default heroContent;
 <div aria-label={String($content.title)}></div>
 ```
 
-### (वैकल्पिक) चरण 6: रूटिंग सेट करें
+</Step>
+
+<Step number={6} title="रूटिंग सेट करें" isOptional={true}>
 
 निम्नलिखित चरण दिखाते हैं कि SvelteKit में locale-आधारित रूटिंग कैसे सेट करें। यह आपके URLs को locale प्रीफिक्स (जैसे, `/en/about`, `/fr/about`) शामिल करने की अनुमति देता है, जिससे SEO और उपयोगकर्ता अनुभव बेहतर होता है।
 
@@ -423,7 +470,9 @@ export default heroContent;
         └── +layout.svelte         # फोंट और वैश्विक शैलियों के लिए रूट लेआउट
 ```
 
-### चरण 7: सर्वर-साइड लोकल डिटेक्शन (हुक्स) को संभालें
+</Step>
+
+<Step number={7} title="सर्वर-साइड लोकल डिटेक्शन (हुक्स) को संभालें">
 
 SvelteKit में, SSR के दौरान सही सामग्री प्रस्तुत करने के लिए सर्वर को उपयोगकर्ता की लोकल जानकारी जाननी होती है। हम URL या कुकीज़ से लोकल पता लगाने के लिए `hooks.server.ts` का उपयोग करते हैं।
 
@@ -635,7 +684,9 @@ export const prerender = true;
 </style>
 ```
 
-### (वैकल्पिक) चरण 8: अंतरराष्ट्रीयकृत लिंक
+</Step>
+
+<Step number={8} title="अंतरराष्ट्रीयकृत लिंक" isOptional={true}>
 
 SEO के लिए, यह अनुशंसा की जाती है कि आप अपने routes को locale के साथ prefix करें (जैसे, `/en/about`, `/fr/about`)। यह component स्वचालित रूप से किसी भी लिंक के साथ वर्तमान locale को prefix करता है।
 
@@ -668,7 +719,9 @@ const localizedPath = getLocalizedUrl("/about", $locale);
 goto(localizedPath); // स्थानीय भाषा के अनुसार /en/about या /fr/about पर नेविगेट करता है
 ```
 
-### (वैकल्पिक) चरण 9: भाषा स्विचर
+</Step>
+
+<Step number={9} title="भाषा स्विचर" isOptional={true}>
 
 उपयोगकर्ताओं को भाषाएँ बदलने की अनुमति देने के लिए, URL को अपडेट करें।
 
@@ -709,7 +762,9 @@ goto(localizedPath); // स्थानीय भाषा के अनुस
 </style>
 ```
 
-### (वैकल्पिक) चरण 10: बैकएंड प्रॉक्सी जोड़ें
+</Step>
+
+<Step number={10} title="बैकएंड प्रॉक्सी जोड़ें" isOptional={true}>
 
 अपने SvelteKit एप्लिकेशन में बैकएंड प्रॉक्सी जोड़ने के लिए, आप `vite-intlayer` प्लगइन द्वारा प्रदान किया गया `intlayerProxy` फ़ंक्शन उपयोग कर सकते हैं। यह प्लगइन URL, कुकीज़, और ब्राउज़र भाषा प्राथमिकताओं के आधार पर उपयोगकर्ता के लिए सबसे अच्छा locale स्वचालित रूप से पहचान लेगा।
 
@@ -728,7 +783,9 @@ export default defineConfig({
 });
 ```
 
-### (वैकल्पिक) चरण 11: intlayer संपादक / CMS सेट करें
+</Step>
+
+<Step number={11} title="intlayer संपादक / CMS सेट करें" isOptional={true}>
 
 intlayer संपादक सेट करने के लिए, आपको [intlayer संपादक दस्तावेज़](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/intlayer_visual_editor.md) का पालन करना होगा।
 
@@ -753,18 +810,9 @@ intlayer संपादक चयनकर्ता को विज़ुअ
 </div>
 ```
 
-### Git कॉन्फ़िगरेशन
+</Step>
 
-यह अनुशंसित है कि Intlayer द्वारा उत्पन्न फ़ाइलों को ignore किया जाए।
-
-```plaintext fileName=".gitignore"
-# Intlayer द्वारा उत्पन्न फ़ाइलों को ignore करें
-.intlayer
-```
-
----
-
-### (वैकल्पिक) कदम 1 : अपने घटकों की सामग्री निकालें
+<Step number={1} title="अपने घटकों की सामग्री निकालें" isOptional={true}>
 
 यदि आपके पास मौजूदा कोडबेस है, तो हजारों फ़ाइलों को बदलना समय लेने वाला हो सकता है।
 
@@ -859,6 +907,20 @@ bun run build # Or bun run dev
 
  </Tab>
 </Tabs>
+</Step>
+
+</Steps>
+
+### Git कॉन्फ़िगरेशन
+
+यह अनुशंसित है कि Intlayer द्वारा उत्पन्न फ़ाइलों को ignore किया जाए।
+
+```plaintext fileName=".gitignore"
+# Intlayer द्वारा उत्पन्न फ़ाइलों को ignore करें
+.intlayer
+```
+
+---
 
 ### आगे बढ़ें
 

package/docs/hi/intlayer_with_tanstack+solid.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-03-25
-updatedAt: 2026-05-06
-title: i18n Tanstack Start - 2026 में Solid.js का उपयोग करके Tanstack Start ऐप का अनुवाद कैसे करें
-description: जानें कि Intlayer और Solid.js का उपयोग करके अपने Tanstack Start एप्लिकेशन में अंतर्राष्ट्रीयकरण (i18n) कैसे जोड़ें। अपने ऐप को लोकेल-जागरूक रूटिंग के साथ बहुभाषी बनाने के लिए इस व्यापक गाइड का पालन करें।
+updatedAt: 2026-05-31
+title: "TanStack Start + Solid i18n - अपने ऐप को अनुवाद करने का पूर्ण गाइड"
+description: "अब i18next की जरूरत नहीं। 2026 में TanStack Start + Solid ऐप को बहुभाषी (i18n) बनाने का गाइड। AI एजेंट्स से अनुवाद करें और बंडल साइज़, SEO और परफॉर्मेंस ऑप्टिमाइज़ करें।"
 keywords:
   - अंतर्राष्ट्रीयकरण
   - दस्तावेज़ीकरण
@@ -37,17 +37,37 @@ history:
 
 यह गाइड दर्शाती है कि Solid.js, लोकेल-जागरूक रूटिंग, TypeScript समर्थन और आधुनिक विकास प्रथाओं के साथ Tanstack Start परियोजनाओं में निर्बाध अंतर्राष्ट्रीयकरण के लिए **Intlayer** को कैसे एकीकृत किया जाए।
 
-## Intlayer क्या है?
+## विकल्पों पर इन्टलेयर क्यों?
 
-**Intlayer** एक अभिनव, ओपन-सोर्स अंतर्राष्ट्रीयकरण (i18n) लाइब्रेरी है जिसे आधुनिक वेब अनुप्रयोगों में बहुभाषी समर्थन को सरल बनाने के लिए डिज़ाइन किया गया है।
+`रिएक्ट-आई18नेक्स्ट` या `आई18नेक्स्ट` जैसे मुख्य समाधानों की तुलना में, इंटलेयर एक ऐसा समाधान है जो एकीकृत अनुकूलन के साथ आता है जैसे:
 
-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)** आपकी बहुभाषी सामग्री को **वास्तविक समय** में प्रबंधित करने में मदद करता है, जिससे अनुवादकों, कॉपीराइटरों और टीम के अन्य सदस्यों के साथ सहयोग सहज हो जाता है। सामग्री को स्थानीय और/या दूरस्थ रूप से संग्रहीत किया जा सकता है।
 
 ---
 
@@ -85,11 +105,15 @@ Intlayer के साथ, आप:
 
 GitHub पर [एप्लिकेशन टेम्पलेट](https://github.com/aymericzip/intlayer-tanstack-start-solid-template) देखें।
 
-### स्टेप 1: प्रोजेक्ट निर्माण
+<Steps>
+
+<Step number={1} title="प्रोजेक्ट निर्माण">
 
 सबसे पहले, TanStack Start वेबसाइट पर [नया प्रोजेक्ट शुरू करें](https://tanstack.com/start/latest/docs/framework/solid/quick-start) गाइड का पालन करते हुए एक नया TanStack Start प्रोजेक्ट बनाएं।
 
-### स्टेप 2: Intlayer पैकेज स्थापित करें
+</Step>
+
+<Step number={2} title="Intlayer पैकेज स्थापित करें">
 
 अपने पसंदीदा पैकेज मैनेजर का उपयोग करके आवश्यक पैकेज स्थापित करें:
 
@@ -127,7 +151,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="अपने प्रोजेक्ट का कॉन्फ़िगरेशन">
 
 अपने एप्लिकेशन की भाषाओं को सेटअप करने के लिए एक कॉन्फ़िगरेशन फ़ाइल बनाएं:
 
@@ -148,7 +174,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 प्लगइन जोड़ें:
 
@@ -176,7 +204,9 @@ export default defineConfig({
 
 > `intlayer()` Vite प्लगइन का उपयोग Intlayer को Vite के साथ एकीकृत करने के लिए किया जाता है। यह सामग्री घोषणा फ़ाइलों के निर्माण को सुनिश्चित करता है और विकास मोड में उनकी निगरानी करता है। यह Vite एप्लिकेशन के भीतर Intlayer वातावरण चर (environment variables) को परिभाषित करता है। इसके अतिरिक्त, यह प्रदर्शन ओवरहेड को कम करने के लिए उपनाम (aliases) प्रदान करता है।
 
-### स्टेप 5: रूट लेआउट बनाएं
+</Step>
+
+<Step number={5} title="रूट लेआउट बनाएं">
 
 वर्तमान लोकेल का पता लगाने के लिए `useParams` का उपयोग करके और `html` टैग पर `lang` और `dir` विशेषताओं को सेट करके अंतर्राष्ट्रीयकरण का समर्थन करने के लिए अपना रूट लेआउट कॉन्फ़िगर करें।
 
@@ -217,7 +247,9 @@ const RootComponent: ParentComponent = (props) => {
 };
 ```
 
-### स्टेप 6: लोकेल लेआउट बनाएं (वैकल्पिक)
+</Step>
+
+<Step number={6} title="लोकेल लेआउट बनाएं">
 
 एक लेआउट बनाएं जो लोकेल उपसर्ग को संभालता है और सत्यापन करता है। यह लेआउट सुनिश्चित करेगा कि केवल वैध लोकेल ही संसाधित हों।
 
@@ -252,7 +284,9 @@ export const Route = createFileRoute("/{-$locale}")({
 > `'prefix-all'` मोड के लिए, आप स्लॉट को `$locale` पर स्विच करना पसंद कर सकते हैं।
 > `'no-prefix'` या `'search-params'` मोड के लिए, आप स्लॉट को पूरी तरह से हटा सकते हैं।
 
-### स्टेप 7: अपनी सामग्री घोषित करें
+</Step>
+
+<Step number={7} title="अपनी सामग्री घोषित करें">
 
 अनुवादों को संग्रहीत करने के लिए अपनी सामग्री घोषणाएं बनाएं और प्रबंधित करें:
 
@@ -298,7 +332,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` घटक बनाएं:
 
@@ -377,7 +413,9 @@ export const useLocalizedNavigate = () => {
 };
 ```
 
-### स्टेप 9: अपने पेजों में Intlayer का उपयोग करें
+</Step>
+
+<Step number={9} title="अपने पेजों में Intlayer का उपयोग करें">
 
 अपने पूरे एप्लिकेशन में अपने सामग्री शब्दकोशों तक पहुँचें:
 
@@ -420,7 +458,9 @@ function RouteComponent() {
 >
 > `useIntlayer` हुक के बारे में अधिक जानने के लिए, [दस्तावेज़ीकरण](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/packages/solid-intlayer/useIntlayer.md) देखें।
 
-### स्टेप 10: लोकेल स्विचर घटक बनाएं
+</Step>
+
+<Step number={10} title="लोकेल स्विचर घटक बनाएं">
 
 उपयोगकर्ताओं को भाषा बदलने की अनुमति देने के लिए एक घटक बनाएं:
 
@@ -464,7 +504,9 @@ export default LocaleSwitcher;
 >
 > `useLocale` हुक के बारे में अधिक जानने के लिए, [दस्तावेज़ीकरण](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/packages/solid-intlayer/useLocale.md) देखें।
 
-### स्टेप 11: HTML विशेषताओं का प्रबंधन
+</Step>
+
+<Step number={11} title="HTML विशेषताओं का प्रबंधन">
 
 जैसा कि स्टेप 5 में देखा गया है, आप अपने रूट घटक में `useParams` का उपयोग करके `html` टैग की `lang` और `dir` विशेषताओं को प्रबंधित कर सकते हैं। यह सुनिश्चित करता है कि सर्वर और क्लाइंट दोनों पर सही विशेषताएँ सेट हैं।
 
@@ -483,7 +525,9 @@ const RootComponent: ParentComponent = (props) => {
 
 ---
 
-### स्टेप 12: मिडलवेयर जोड़ें (वैकल्पिक)
+</Step>
+
+<Step number={12} title="मिडलवेयर जोड़ें">
 
 आप अपने एप्लिकेशन में सर्वर-साइड रूटिंग जोड़ने के लिए `intlayerProxy` का भी उपयोग कर सकते हैं। यह प्लगइन URL के आधार पर वर्तमान लोकेल का स्वचालित रूप से पता लगाएगा और उचित लोकेल कुकी सेट करेगा। यदि कोई लोकेल निर्दिष्ट नहीं है, तो प्लगइन उपयोगकर्ता के ब्राउज़र भाषा प्राथमिकताओं के आधार पर सबसे उपयुक्त लोकेल निर्धारित करेगा। यदि कोई लोकेल नहीं पाया जाता है, तो यह डिफ़ॉल्ट लोकेल पर रीडायरेक्ट करेगा।
 
@@ -514,7 +558,9 @@ export default defineConfig({
 
 ---
 
-### स्टेप 13: अपने मेटाडेटा को अंतर्राष्ट्रीयकृत करें (वैकल्पिक)
+</Step>
+
+<Step number={13} title="अपने मेटाडेटा को अंतर्राष्ट्रीयकृत करें">
 
 आप लोकेल-जागरूक मेटाडेटा के लिए `head` लोडर के भीतर अपने सामग्री शब्दकोशों तक पहुँचने के लिए `getIntlayer` फ़ंक्शन का भी उपयोग कर सकते हैं:
 
@@ -561,7 +607,9 @@ export const Route = createFileRoute("/{-$locale}/")({
 
 ---
 
-### स्टेप 14: अपने सर्वर कार्यों में लोकेल प्राप्त करें (वैकल्पिक)
+</Step>
+
+<Step number={14} title="अपने सर्वर कार्यों में लोकेल प्राप्त करें">
 
 आप अपने सर्वर कार्यों या API एंडपॉइंट के भीतर से वर्तमान लोकेल तक पहुँचना चाह सकते हैं।
 आप `intlayer` से `getLocale` हेल्पर का उपयोग करके ऐसा कर सकते हैं।
@@ -598,7 +646,9 @@ export const getLocaleServer = createServerFn().handler(async () => {
 
 ---
 
-### स्टेप 15: नहीं मिले पेजों का प्रबंधन करें (वैकल्पिक)
+</Step>
+
+<Step number={15} title="नहीं मिले पेजों का प्रबंधन करें">
 
 जब कोई उपयोगकर्ता गैर-मौजूद पेज पर जाता है, तो आप एक कस्टम नहीं मिला पेज प्रदर्शित कर सकते हैं और लोकेल उपसर्ग नहीं मिले पेज के चालू होने के तरीके को प्रभावित कर सकता है।
 
@@ -672,7 +722,9 @@ export const Route = createFileRoute("/{-$locale}/$")({
 });
 ```
 
-### (वैकल्पिक) स्टेप 16: अपने घटकों से सामग्री निकालें
+</Step>
+
+<Step number={16} title="अपने घटकों से सामग्री निकालें" isOptional={true}>
 
 यदि आपके पास मौजूदा कोडबेस है, तो हजारों फ़ाइलों को बदलना समय लेने वाला हो सकता है।
 
@@ -785,7 +837,9 @@ bun run build # या bun run dev
 
 ---
 
-### स्टेप 17: TypeScript कॉन्फ़िगर करें (वैकल्पिक)
+</Step>
+
+<Step number={17} title="TypeScript कॉन्फ़िगर करें">
 
 Intlayer TypeScript के लाभों को प्राप्त करने और आपके कोडबेस को मजबूत बनाने के लिए मॉड्यूल ऑग्मेंटेशन (module augmentation) का उपयोग करता है।
 
@@ -803,6 +857,10 @@ Intlayer TypeScript के लाभों को प्राप्त कर
 
 ---
 
+</Step>
+
+</Steps>
+
 ### Git कॉन्फ़िगरेशन
 
 Intlayer द्वारा उत्पन्न फ़ाइलों को अनदेखा करने की अनुशंसा की जाती है। यह आपको उन्हें अपने Git रिपॉजिटरी में प्रतिबद्ध करने से बचने की अनुमति देता है।