@intlayer/docs 8.11.2 → 8.12.0-canary.0

package/docs/hi/intlayer_with_astro_lit.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-05-06
-title: Astro + Lit i18n - 2026 में Astro + Lit एप्लिकेशन का अनुवाद कैसे करें
-description: Intlayer के साथ अपनी Astro + Lit साइट में अंतर्राष्ट्रीयकरण (i18n) जोड़ना सीखें। अपनी साइट को बहुभाषी बनाने के लिए इस गाइड का पालन करें।
+updatedAt: 2026-05-31
+title: "Astro + Lit i18n - अपने ऐप को अनुवाद करने का पूर्ण गाइड"
+description: "अब i18next की जरूरत नहीं। 2026 में Astro + Lit ऐप को बहुभाषी (i18n) बनाने का गाइड। AI एजेंट्स से अनुवाद करें और बंडल साइज़, SEO और परफॉर्मेंस ऑप्टिमाइज़ करें।"
 keywords:
   - अंतर्राष्ट्रीयकरण
   - दस्तावेज़ीकरण
@@ -59,16 +59,37 @@ history:
 
 <TOC/>
 
-## Intlayer क्या है?
+## विकल्पों पर इन्टलेयर क्यों?
 
-**Intlayer** एक अभिनव, ओपन-सोर्स अंतर्राष्ट्रीयकरण (i18n) लाइब्रेरी है जिसे आधुनिक वेब अनुप्रयोगों में बहुभाषी समर्थन को सरल बनाने के लिए डिज़ाइन किया गया है।
+`एस्ट्रो-आई18एन` या `आई18नेक्स्ट` जैसे मुख्य समाधानों की तुलना में, इंटलेयर एक ऐसा समाधान है जो एकीकृत अनुकूलन के साथ आता है जैसे:
 
-Intlayer के साथ, आप यह कर सकते हैं:
+**पूर्ण एस्ट्रो कवरेज**
 
-- **अनुवादों को आसानी से प्रबंधित करें**: घटक स्तर पर घोषणात्मक शब्दकोशों का उपयोग करके।
-- **मेटाडेटा, रूट और सामग्री को गतिशील रूप से स्थानीयकृत करें**।
-- **Ensure TypeScript समर्थन करें**: बेहतर ऑटो-पूर्णता और त्रुटि पहचान के लिए स्वतः उत्पन्न प्रकारों के साथ।
-- **उन्नत सुविधाओं का लाभ उठाएं**: जैसे गतिशील भाषा पहचान और स्विचिंग।
+इंटलेयर को **बहुभाषी रूटिंग**, **साइटमैप**, और स्केलिंग अंतर्राष्ट्रीयकरण (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)** आपकी बहुभाषी सामग्री को **वास्तविक समय** में प्रबंधित करने में मदद करता है, जिससे अनुवादकों, कॉपीराइटरों और टीम के अन्य सदस्यों के साथ सहयोग सहज हो जाता है। सामग्री को स्थानीय और/या दूरस्थ रूप से संग्रहीत किया जा सकता है।
 
 ---
 
@@ -76,7 +97,9 @@ Intlayer के साथ, आप यह कर सकते हैं:
 
 GitHub पर [एप्लिकेशन टेम्पलेट](https://github.com/aymericzip/intlayer-astro-template) देखें।
 
-### चरण 1: निर्भरताएँ स्थापित करें
+<Steps>
+
+<Step number={1} title="निर्भरताएँ स्थापित करें">
 
 अपने पसंदीदा पैकेज मैनेजर का उपयोग करके आवश्यक पैकेज स्थापित करें:
 
@@ -127,7 +150,9 @@ bun x intlayer init
 - **@astrojs/lit**
   आधिकारिक Astro एकीकरण जो Astro पृष्ठों के भीतर Lit custom elements के उपयोग की अनुमति देता है।
 
-### चरण 2: अपना प्रोजेक्ट कॉन्फ़िगर करें
+</Step>
+
+<Step number={2} title="अपना प्रोजेक्ट कॉन्फ़िगर करें">
 
 अपने एप्लिकेशन की भाषाओं को परिभाषित करने के लिए एक कॉन्फ़िगरेशन फ़ाइल बनाएँ:
 
@@ -152,7 +177,9 @@ export default config;
 
 > इस कॉन्फ़िगरेशन फ़ाइल के माध्यम से, आप स्थानीयकृत URL, मिडलवेयर रीडायरेक्ट, कुकी नाम, सामग्री घोषणाओं का स्थान और एक्सटेंशन कॉन्फ़िगर कर सकते हैं, कंसोल में Intlayer लॉग को अक्षम कर सकते हैं, और बहुत कुछ। उपलब्ध मापदंडों की पूरी सूची के लिए, [कॉन्फ़िगरेशन दस्तावेज़](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/configuration.md) देखें।
 
-### चरण 3: अपने Astro कॉन्फ़िगरेशन में Intlayer को एकीकृत करें
+</Step>
+
+<Step number={3} title="अपने Astro कॉन्फ़िगरेशन में Intlayer को एकीकृत करें">
 
 अपने Astro कॉन्फ़िगरेशन में `intlayer` प्लगइन और Lit एकीकरण जोड़ें।
 
@@ -173,7 +200,9 @@ export default defineConfig({
 
 > `lit()` एकीकरण Astro पृष्ठों के भीतर Lit custom elements के उपयोग की अनुमति देता है।
 
-### चरण 4: अपनी सामग्री घोषित करें
+</Step>
+
+<Step number={4} title="अपनी सामग्री घोषित करें">
 
 अनुवादों को संग्रहीत करने के लिए अपनी सामग्री घोषणाएँ बनाएँ और प्रबंधित करें:
 
@@ -205,7 +234,9 @@ export default litDemoContent;
 
 > अधिक जानकारी के लिए, [सामग्री घोषणा दस्तावेज़](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/dictionary/content_file.md) देखें।
 
-### चरण 5: Astro में सामग्री का उपयोग करना
+</Step>
+
+<Step number={5} title="Astro में सामग्री का उपयोग करना">
 
 आप सीधे अपने `.astro` फ़ाइलों में `intlayer` से निर्यात किए गए मुख्य सहायकों का उपयोग करके शब्दकोशों का उपयोग कर सकते हैं। आपको हर पृष्ठ पर SEO मेटाडेटा (जैसे hreflang और कैनोनिकल लिंक) भी जोड़ना चाहिए। Lit custom elements को एक क्लाइंट `<script>` के माध्यम से आयात किया जाता है और बॉडी में रखा जाता है।
 
@@ -287,7 +318,9 @@ const { greeting } = getIntlayer("lit-demo", locale);
 > - **`prefix-all`:** सभी URL को भाषा उपसर्ग प्राप्त होता है। यदि आपको रूट को अलग से संभालने की आवश्यकता नहीं है तो आप मानक `[locale]` का उपयोग कर सकते हैं।
 > - **`search-param` या `no-prefix`:** किसी भाषा निर्देशिका की आवश्यकता नहीं है। भाषा को क्वेरी पैरामीटर या कुकीज़ के माध्यम से संभाला जाता है।
 
-### चरण 6: एक Lit Custom Element घटक बनाएँ
+</Step>
+
+<Step number={6} title="एक Lit Custom Element घटक बनाएँ">
 
 एक Lit custom element बनाएँ। क्लाइंट-साइड अनुवाद सिंगलटन को इनिशियलाइज़ करने के लिए सर्वर-आधारित `locale` एट्रिब्यूट (attribute) का उपयोग करके `connectedCallback` में `installIntlayer` को कॉल करें।
 
@@ -366,7 +399,9 @@ customElements.define("lit-demo", LitDemo);
 
 > `useIntlayer` को एक `ReactiveController` के रूप में पंजीकृत किया गया है। भाषा बदलने पर यह ऑटोमैटिक रूप से घटक को पुन: रेंडर (re-render) करने का निर्देश देता है, इसलिए किसी अतिरिक्त सदस्यता तर्क की आवश्यकता नहीं है।
 
-### चरण 7: एक भाषा स्विचर जोड़ना
+</Step>
+
+<Step number={7} title="एक भाषा स्विचर जोड़ना">
 
 भाषा स्विचिंग कार्यक्षमता सीधे Lit custom element की `render()` विधि के भीतर एकीकृत है (ऊपर चरण 6 देखें)। यह `lit-intlayer` से `useLocale` का उपयोग करता है और उपयोगकर्ता द्वारा एक नई भाषा चुनने पर स्थानीयकृत URL पर नेविगेट करता है:
 
@@ -412,7 +447,9 @@ override render() {
 > **निरंतरता पर नोट:**
 > `window.location.href` के माध्यम से रीडायरेक्ट करने के लिए `onLocaleChange` का उपयोग यह सुनिश्चित करता है कि नया भाषाई URL देखा जाए, जिससे Intlayer मिडलवेयर भाषा कुकी सेट कर सके और भविष्य की यात्राओं में उपयोगकर्ता की वरीयता को याद रख सके।
 
-### चरण 8: Sitemap और Robots.txt
+</Step>
+
+<Step number={8} title="Sitemap और Robots.txt">
 
 Intlayer आपकी स्थानीयकृत साइटमैप और robots.txt फ़ाइलों को गतिशील रूप से बनाने के लिए उपयोगिताओं की पेशकश करता है।
 
@@ -472,59 +509,9 @@ export const GET: APIRoute = ({ site }) => {
 };
 ```
 
-### TypeScript कॉन्फ़िगरेशन
-
-Intlayer अपने कोडबेस को अधिक मजबूत बनाने के लिए TypeScript का लाभ उठाने के लिए मॉड्यूल ऑगमेंटेशन (module augmentation) का उपयोग करता है। यदि आप डेकोरेटर (decorator) सिंटैक्स का उपयोग करते हैं, तो सुनिश्चित करें कि आप अपने कंपाइलर विकल्पों में `experimentalDecorators` को सक्षम करें।
-
-![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)
+</Step>
 
-सुनिश्चित करें कि आपके TypeScript कॉन्फ़िगरेशन में स्वतः उत्पन्न प्रकार शामिल हैं।
-
-```json5 fileName="tsconfig.json"
-{
-  compilerOptions: {
-    // ...
-    experimentalDecorators: true,
-    useDefineForClassFields: false, // Lit में डेकोरेटर समर्थन के लिए आवश्यक
-  },
-  "include": [
-    // ... आपका मौजूदा TypeScript कॉन्फ़िगरेशन
-    ".intlayer/**/*.ts", // स्वतः उत्पन्न प्रकारों को शामिल करें
-  ],
-}
-```
-
-### Git कॉन्फ़िगरेशन
-
-Intlayer द्वारा उत्पन्न फ़ाइलों को अनदेखा करने की अनुशंसा की जाती है। यह उन्हें आपके Git रिपॉजिटरी में कमिट करने से बचाता है।
-
-ऐसा करने के लिए, अपनी `.gitignore` फ़ाइल में निम्न निर्देश जोड़ें:
-
-```bash
-# Intlayer द्वारा उत्पन्न फ़ाइलों को अनदेखा करें
-.intlayer
-```
-
-### VS Code एक्सटेंशन
-
-Intlayer के साथ अपने विकास अनुभव को बेहतर बनाने के लिए, आप **आधिकारिक Intlayer VS Code एक्सटेंशन** स्थापित कर सकते हैं।
-
-[VS Code Marketplace से इंस्टॉलेशन](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
-
-यह एक्सटेंशन प्रदान करता है:
-
-- अनुवाद कुंजियों के लिए **ऑटो-पूर्णता**।
-- अनुपलब्ध अनुवादों के लिए **वास्तविक समय त्रुटि पहचान**।
-- अनूदित सामग्री का **इनलाइन पूर्वावलोकन**।
-- आसानी से अनुवाद बनाने और अपडेट करने के लिए **त्वरित क्रियाएं**।
-
-एक्सटेंशन का उपयोग करने के बारे में अधिक जानकारी के लिए, [VS Code एक्सटेंशन दस्तावेज़](https://intlayer.org/doc/vs-code-extension) देखें।
-
----
-
-### (वैकल्पिक) कदम 1 : अपने घटकों की सामग्री निकालें
+<Step number={1} title="अपने घटकों की सामग्री निकालें" isOptional={true}>
 
 यदि आपके पास मौजूदा कोडबेस है, तो हजारों फ़ाइलों को बदलना समय लेने वाला हो सकता है।
 
@@ -622,6 +609,62 @@ bun run build # Or bun run dev
 
 ---
 
+</Step>
+
+</Steps>
+
+### TypeScript कॉन्फ़िगरेशन
+
+Intlayer अपने कोडबेस को अधिक मजबूत बनाने के लिए TypeScript का लाभ उठाने के लिए मॉड्यूल ऑगमेंटेशन (module augmentation) का उपयोग करता है। यदि आप डेकोरेटर (decorator) सिंटैक्स का उपयोग करते हैं, तो सुनिश्चित करें कि आप अपने कंपाइलर विकल्पों में `experimentalDecorators` को सक्षम करें।
+
+![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)
+
+सुनिश्चित करें कि आपके TypeScript कॉन्फ़िगरेशन में स्वतः उत्पन्न प्रकार शामिल हैं।
+
+```json5 fileName="tsconfig.json"
+{
+  compilerOptions: {
+    // ...
+    experimentalDecorators: true,
+    useDefineForClassFields: false, // Lit में डेकोरेटर समर्थन के लिए आवश्यक
+  },
+  "include": [
+    // ... आपका मौजूदा TypeScript कॉन्फ़िगरेशन
+    ".intlayer/**/*.ts", // स्वतः उत्पन्न प्रकारों को शामिल करें
+  ],
+}
+```
+
+### Git कॉन्फ़िगरेशन
+
+Intlayer द्वारा उत्पन्न फ़ाइलों को अनदेखा करने की अनुशंसा की जाती है। यह उन्हें आपके Git रिपॉजिटरी में कमिट करने से बचाता है।
+
+ऐसा करने के लिए, अपनी `.gitignore` फ़ाइल में निम्न निर्देश जोड़ें:
+
+```bash
+# Intlayer द्वारा उत्पन्न फ़ाइलों को अनदेखा करें
+.intlayer
+```
+
+### VS Code एक्सटेंशन
+
+Intlayer के साथ अपने विकास अनुभव को बेहतर बनाने के लिए, आप **आधिकारिक Intlayer VS Code एक्सटेंशन** स्थापित कर सकते हैं।
+
+[VS Code Marketplace से इंस्टॉलेशन](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
+
+यह एक्सटेंशन प्रदान करता है:
+
+- अनुवाद कुंजियों के लिए **ऑटो-पूर्णता**।
+- अनुपलब्ध अनुवादों के लिए **वास्तविक समय त्रुटि पहचान**।
+- अनूदित सामग्री का **इनलाइन पूर्वावलोकन**।
+- आसानी से अनुवाद बनाने और अपडेट करने के लिए **त्वरित क्रियाएं**।
+
+एक्सटेंशन का उपयोग करने के बारे में अधिक जानकारी के लिए, [VS Code एक्सटेंशन दस्तावेज़](https://intlayer.org/doc/vs-code-extension) देखें।
+
+---
+
 ### अपने ज्ञान को और गहरा करें
 
 यदि आप और अधिक सीखना चाहते हैं, तो आप [विजुअल एडिटर](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/intlayer_visual_editor.md) को भी लागू कर सकते हैं या अपनी सामग्री को बाहरी बनाने के लिए [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/intlayer_CMS.md) का उपयोग कर सकते हैं।

package/docs/hi/intlayer_with_astro_preact.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-05-06
-title: Astro + Preact i18n - 2026 में Astro + Preact एप्लिकेशन का अनुवाद कैसे करें
-description: Intlayer के साथ अपनी Astro + Preact साइट में अंतर्राष्ट्रीयकरण (i18n) जोड़ना सीखें। अपनी साइट को बहुभाषी बनाने के लिए इस गाइड का पालन करें।
+updatedAt: 2026-05-31
+title: "Astro + Preact i18n - अपने ऐप को अनुवाद करने का पूर्ण गाइड"
+description: "अब i18next की जरूरत नहीं। 2026 में Astro + Preact ऐप को बहुभाषी (i18n) बनाने का गाइड। AI एजेंट्स से अनुवाद करें और बंडल साइज़, SEO और परफॉर्मेंस ऑप्टिमाइज़ करें।"
 keywords:
   - अंतर्राष्ट्रीयकरण
   - दस्तावेज़ीकरण
@@ -58,16 +58,37 @@ history:
 
 <TOC/>
 
-## Intlayer क्या है?
+## विकल्पों पर इन्टलेयर क्यों?
 
-**Intlayer** एक अभिनव, ओपन-सोर्स अंतर्राष्ट्रीयकरण (i18n) लाइब्रेरी है जिसे आधुनिक वेब अनुप्रयोगों में बहुभाषी समर्थन को सरल बनाने के लिए डिज़ाइन किया गया है।
+`एस्ट्रो-आई18एन` या `आई18नेक्स्ट` जैसे मुख्य समाधानों की तुलना में, इंटलेयर एक ऐसा समाधान है जो एकीकृत अनुकूलन के साथ आता है जैसे:
 
-Intlayer के साथ, आप यह कर सकते हैं:
+**पूर्ण एस्ट्रो कवरेज**
 
-- **अनुवादों को आसानी से प्रबंधित करें**: घटक स्तर पर घोषणात्मक शब्दकोशों का उपयोग करके।
-- **मेटाडेटा, रूट और सामग्री को गतिशील रूप से स्थानीयकृत करें**।
-- **Ensure TypeScript समर्थन करें**: बेहतर ऑटो-पूर्णता और त्रुटि पहचान के लिए स्वतः उत्पन्न प्रकारों के साथ।
-- **उन्नत सुविधाओं का लाभ उठाएं**: जैसे गतिशील भाषा पहचान और स्विचिंग।
+इंटलेयर को **बहुभाषी रूटिंग**, **साइटमैप**, और स्केलिंग अंतर्राष्ट्रीयकरण (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)** आपकी बहुभाषी सामग्री को **वास्तविक समय** में प्रबंधित करने में मदद करता है, जिससे अनुवादकों, कॉपीराइटरों और टीम के अन्य सदस्यों के साथ सहयोग सहज हो जाता है। सामग्री को स्थानीय और/या दूरस्थ रूप से संग्रहीत किया जा सकता है।
 
 ---
 
@@ -75,7 +96,9 @@ Intlayer के साथ, आप यह कर सकते हैं:
 
 GitHub पर [एप्लिकेशन टेम्पलेट](https://github.com/aymericzip/intlayer-astro-template) देखें।
 
-### चरण 1: निर्भरताएँ स्थापित करें
+<Steps>
+
+<Step number={1} title="निर्भरताएँ स्थापित करें">
 
 अपने पसंदीदा पैकेज मैनेजर का उपयोग करके आवश्यक पैकेज स्थापित करें:
 
@@ -126,7 +149,9 @@ bun x intlayer init
 - **@astrojs/preact**
   आधिकारिक Astro एकीकरण जो Preact घटक islands के उपयोग की अनुमति देता है।
 
-### चरण 2: अपना प्रोजेक्ट कॉन्फ़िगर करें
+</Step>
+
+<Step number={2} title="अपना प्रोजेक्ट कॉन्फ़िगर करें">
 
 अपने एप्लिकेशन की भाषाओं को परिभाषित करने के लिए एक कॉन्फ़िगरेशन फ़ाइल बनाएँ:
 
@@ -151,7 +176,9 @@ export default config;
 
 > इस कॉन्फ़िगरेशन फ़ाइल के माध्यम से, आप स्थानीयकृत URL, मिडलवेयर रीडायरेक्ट, कुकी नाम, सामग्री घोषणाओं का स्थान और एक्सटेंशन कॉन्फ़िगर कर सकते हैं, कंसोल में Intlayer लॉग को अक्षम कर सकते हैं, और बहुत कुछ। उपलब्ध मापदंडों की पूरी सूची के लिए, [कॉन्फ़िगरेशन दस्तावेज़](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/configuration.md) देखें।
 
-### चरण 3: अपने Astro कॉन्फ़िगरेशन में Intlayer को एकीकृत करें
+</Step>
+
+<Step number={3} title="अपने Astro कॉन्फ़िगरेशन में Intlayer को एकीकृत करें">
 
 अपने Astro कॉन्फ़िगरेशन में `intlayer` प्लगइन और Preact एकीकरण जोड़ें।
 
@@ -172,7 +199,9 @@ export default defineConfig({
 
 > `preact()` एकीकरण `client:only="preact"` के माध्यम से Preact घटक islands के उपयोग की अनुमति देता है।
 
-### चरण 4: अपनी सामग्री घोषित करें
+</Step>
+
+<Step number={4} title="अपनी सामग्री घोषित करें">
 
 अनुवादों को संग्रहीत करने के लिए अपनी सामग्री घोषणाएँ बनाएँ और प्रबंधित करें:
 
@@ -202,7 +231,9 @@ export default appContent;
 
 > यदि आपकी सामग्री फ़ाइलों में TSX कोड शामिल है, तो आपको `import { h } from "preact";` आयात करने की आवश्यकता हो सकती है या यह सुनिश्चित करना होगा कि आपका JSX प्रैग्मा (pragma) Preact के लिए सही ढंग से कॉन्फ़िगर किया गया है।
 
-### चरण 5: Astro में सामग्री का उपयोग करना
+</Step>
+
+<Step number={5} title="Astro में सामग्री का उपयोग करना">
 
 आप सीधे अपने `.astro` फ़ाइलों में `intlayer` से निर्यात किए गए मुख्य सहायकों का उपयोग करके शब्दकोशों का उपयोग कर सकते हैं। आपको हर पृष्ठ पर SEO मेटाडेटा (जैसे hreflang और कैनोनिकल लिंक) भी जोड़ना चाहिए और इंटरैक्टिव क्लाइंट-साइड सामग्री के लिए एक Preact island पेश करना चाहिए।
 
@@ -282,7 +313,9 @@ const { title } = getIntlayer("app", locale);
 > - **`prefix-all`:** सभी URL को भाषा उपसर्ग प्राप्त होता है। यदि आपको रूट को अलग से संभालने की आवश्यकता नहीं है तो आप मानक `[locale]` का उपयोग कर सकते हैं।
 > - **`search-param` या `no-prefix`:** किसी भाषा निर्देशिका की आवश्यकता नहीं है। भाषा को क्वेरी पैरामीटर या कुकीज़ के माध्यम से संभाला जाता है।
 
-### चरण 6: एक Preact Island घटक बनाएँ
+</Step>
+
+<Step number={6} title="एक Preact Island घटक बनाएँ">
 
 एक island घटक बनाएँ जो आपके Preact एप्लिकेशन को लपेटता है और सर्वर-संसूचित लोकेल प्राप्त करता है:
 
@@ -317,7 +350,9 @@ export const PreactIsland: FunctionalComponent<{ locale: LocalesValues }> = ({
 
 > नोट: Preact में, `className` के बजाय HTML `class` प्रॉपर्टी का उपयोग किया जाता है।
 
-### चरण 7: एक भाषा स्विचर जोड़ना
+</Step>
+
+<Step number={7} title="एक भाषा स्विचर जोड़ना">
 
 एक Preact `LocaleSwitcher` घटक बनाएँ जो उपलब्ध भाषाओं को पढ़ता है और जब उपयोगकर्ता एक नई भाषा चुनता है तो स्थानीयकृत URL पर नेविगेट करता है:
 
@@ -367,7 +402,9 @@ export const LocaleSwitcher: FunctionalComponent = () => {
 
 > `LocaleSwitcher` को `IntlayerProvider` के भीतर रेंडर किया जाना चाहिए - इसे अपने island घटक में उपयोग करें (जैसा कि चरण 6 में दिखाया गया है)।
 
-### चरण 8: Sitemap और Robots.txt
+</Step>
+
+<Step number={8} title="Sitemap और Robots.txt">
 
 Intlayer आपकी स्थानीयकृत साइटमैप और robots.txt फ़ाइलों को गतिशील रूप से बनाने के लिए उपयोगिताओं की पेशकश करता है।
 
@@ -427,53 +464,9 @@ export const GET: APIRoute = ({ site }) => {
 };
 ```
 
-### TypeScript कॉन्फ़िगरेशन
+</Step>
 
-Intlayer अपने कोडबेस को अधिक मजबूत बनाने के लिए TypeScript का लाभ उठाने के लिए मॉड्यूल ऑगमेंटेशन (module augmentation) का उपयोग करता है। सुनिश्चित करें कि आपके TypeScript कॉन्फ़िगरेशन में स्वतः उत्पन्न प्रकार शामिल हैं और Preact के लिए कॉन्फ़िगर किया गया है:
-
-```json5 fileName="tsconfig.json"
-{
-  compilerOptions: {
-    // ...
-    jsx: "react-jsx",
-    jsxImportSource: "preact", // Preact 10+ के लिए अनुशंसित
-  },
-  "include": [
-    // ... आपका मौजूदा TypeScript कॉन्फ़िगरेशन
-    ".intlayer/**/*.ts", // स्वतः उत्पन्न प्रकारों को शामिल करें
-  ],
-}
-```
-
-### Git कॉन्फ़िगरेशन
-
-Intlayer द्वारा उत्पन्न फ़ाइलों को अनदेखा करने की अनुशंसा की जाती है। यह उन्हें आपके Git रिपॉजिटरी में कमिट करने से बचाता है।
-
-ऐसा करने के लिए, अपनी `.gitignore` फ़ाइल में निम्न निर्देश जोड़ें:
-
-```bash
-# Intlayer द्वारा उत्पन्न फ़ाइलों को अनदेखा करें
-.intlayer
-```
-
-### VS Code एक्सटेंशन
-
-Intlayer के साथ अपने विकास अनुभव को बेहतर बनाने के लिए, आप **आधिकारिक Intlayer VS Code एक्सटेंशन** स्थापित कर सकते हैं।
-
-[VS Code Marketplace से इंस्टॉलेशन](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
-
-यह एक्सटेंशन प्रदान करता है:
-
-- अनुवाद कुंजियों के लिए **ऑटो-पूर्णता**।
-- अनुपलब्ध अनुवादों के लिए **वास्तविक समय त्रुटि पहचान**।
-- अनूदित सामग्री का **इनलाइन पूर्वावलोकन**।
-- आसानी से अनुवाद बनाने और अपडेट करने के लिए **त्वरित क्रियाएं**।
-
-एक्सटेंशन का उपयोग करने के बारे में अधिक जानकारी के लिए, [VS Code एक्सटेंशन दस्तावेज़](https://intlayer.org/doc/vs-code-extension) देखें।
-
----
-
-### (वैकल्पिक) कदम 1 : अपने घटकों की सामग्री निकालें
+<Step number={1} title="अपने घटकों की सामग्री निकालें" isOptional={true}>
 
 यदि आपके पास मौजूदा कोडबेस है, तो हजारों फ़ाइलों को बदलना समय लेने वाला हो सकता है।
 
@@ -571,6 +564,56 @@ bun run build # Or bun run dev
 
 ---
 
+</Step>
+
+</Steps>
+
+### TypeScript कॉन्फ़िगरेशन
+
+Intlayer अपने कोडबेस को अधिक मजबूत बनाने के लिए TypeScript का लाभ उठाने के लिए मॉड्यूल ऑगमेंटेशन (module augmentation) का उपयोग करता है। सुनिश्चित करें कि आपके TypeScript कॉन्फ़िगरेशन में स्वतः उत्पन्न प्रकार शामिल हैं और Preact के लिए कॉन्फ़िगर किया गया है:
+
+```json5 fileName="tsconfig.json"
+{
+  compilerOptions: {
+    // ...
+    jsx: "react-jsx",
+    jsxImportSource: "preact", // Preact 10+ के लिए अनुशंसित
+  },
+  "include": [
+    // ... आपका मौजूदा TypeScript कॉन्फ़िगरेशन
+    ".intlayer/**/*.ts", // स्वतः उत्पन्न प्रकारों को शामिल करें
+  ],
+}
+```
+
+### Git कॉन्फ़िगरेशन
+
+Intlayer द्वारा उत्पन्न फ़ाइलों को अनदेखा करने की अनुशंसा की जाती है। यह उन्हें आपके Git रिपॉजिटरी में कमिट करने से बचाता है।
+
+ऐसा करने के लिए, अपनी `.gitignore` फ़ाइल में निम्न निर्देश जोड़ें:
+
+```bash
+# Intlayer द्वारा उत्पन्न फ़ाइलों को अनदेखा करें
+.intlayer
+```
+
+### VS Code एक्सटेंशन
+
+Intlayer के साथ अपने विकास अनुभव को बेहतर बनाने के लिए, आप **आधिकारिक Intlayer VS Code एक्सटेंशन** स्थापित कर सकते हैं।
+
+[VS Code Marketplace से इंस्टॉलेशन](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
+
+यह एक्सटेंशन प्रदान करता है:
+
+- अनुवाद कुंजियों के लिए **ऑटो-पूर्णता**।
+- अनुपलब्ध अनुवादों के लिए **वास्तविक समय त्रुटि पहचान**।
+- अनूदित सामग्री का **इनलाइन पूर्वावलोकन**।
+- आसानी से अनुवाद बनाने और अपडेट करने के लिए **त्वरित क्रियाएं**।
+
+एक्सटेंशन का उपयोग करने के बारे में अधिक जानकारी के लिए, [VS Code एक्सटेंशन दस्तावेज़](https://intlayer.org/doc/vs-code-extension) देखें।
+
+---
+
 ### अपने ज्ञान को और गहरा करें
 
 यदि आप और अधिक सीखना चाहते हैं, तो आप [विजुअल एडिटर](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/intlayer_visual_editor.md) को भी लागू कर सकते हैं या अपनी सामग्री को बाहरी बनाने के लिए [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/intlayer_CMS.md) का उपयोग कर सकते हैं।