@intlayer/docs 8.11.2 → 8.12.0-canary.0

package/docs/hi/intlayer_with_react_router_v7_fs_routes.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-09-04
-updatedAt: 2026-05-06
-title: React Router v7 i18n - React Router v7 ऐप कैसे अनुवाद करें 2026 में
-description: जानें कि कैसे Intlayer का उपयोग करके अपने React Router v7 एप्लिकेशन में अंतरराष्ट्रीयकरण (i18n) जोड़ें। इस व्यापक गाइड का पालन करें ताकि आपका ऐप बहुभाषी और locale-aware रूटिंग के साथ हो।
+updatedAt: 2026-05-31
+title: "React Router v7 i18n - अपने ऐप को अनुवाद करने का पूर्ण गाइड"
+description: "अब i18next की जरूरत नहीं। 2026 में React Router v7 ऐप को बहुभाषी (i18n) बनाने का गाइड। AI एजेंट्स से अनुवाद करें और बंडल साइज़, SEO और परफॉर्मेंस ऑप्टिमाइज़ करें।"
 keywords:
   - अंतरराष्ट्रीयकरण
   - दस्तावेज़ीकरण
@@ -45,23 +45,45 @@ history:
 
 <TOC/>
 
-## Intlayer क्या है?
+## विकल्पों पर इन्टलेयर क्यों?
 
-**Intlayer** एक अभिनव, ओपन-सोर्स अंतरराष्ट्रीयकरण (i18n) लाइब्रेरी है जिसे आधुनिक वेब एप्लिकेशन में बहुभाषी समर्थन को सरल बनाने के लिए डिज़ाइन किया गया है।
+`रिएक्ट-आई18नेक्स्ट` या `आई18नेक्स्ट` जैसे मुख्य समाधानों की तुलना में, इंटलेयर एक ऐसा समाधान है जो एकीकृत अनुकूलन के साथ आता है जैसे:
 
-Intlayer के साथ, आप कर सकते हैं:
+**पूर्ण रिएक्ट राउटर कवरेज**
 
-- **घोषणात्मक शब्दकोशों का उपयोग करके अनुवादों का आसानी से प्रबंधन करें** जो कंपोनेंट स्तर पर होते हैं।
-- **मेटाडेटा, रूट्स, और सामग्री को गतिशील रूप से स्थानीयकृत करें**।
-- **TypeScript समर्थन सुनिश्चित करें** autogenerated टाइप्स के साथ, जो ऑटोकम्प्लीशन और त्रुटि पहचान में सुधार करता है।
-- **उन्नत सुविधाओं का लाभ उठाएं**, जैसे गतिशील locale पहचान और स्विचिंग।
-- **React Router v7 के कॉन्फ़िगरेशन-आधारित रूटिंग सिस्टम के साथ locale-aware रूटिंग सक्षम करें**।
+इंटलेयर को **लोकेल-अवेयर रूटिंग**, **लोकेल डिटेक्शन के लिए मिडलवेयर**, और स्केलिंग इंटरनेशनलाइजेशन (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)** आपकी बहुभाषी सामग्री को **वास्तविक समय** में प्रबंधित करने में मदद करता है, जिससे अनुवादकों, कॉपीराइटरों और टीम के अन्य सदस्यों के साथ सहयोग सहज हो जाता है। सामग्री को स्थानीय और/या दूरस्थ रूप से संग्रहीत किया जा सकता है।
 
 ---
 
 ## React Router v7 एप्लिकेशन में Intlayer सेटअप करने के लिए चरण-दर-चरण मार्गदर्शिका
 
-### चरण 1: निर्भरताएँ स्थापित करें
+<Steps>
+
+<Step number={1} title="निर्भरताएँ स्थापित करें">
 
 अपनी पसंदीदा पैकेज मैनेजर का उपयोग करके आवश्यक पैकेज स्थापित करें:
 
@@ -100,7 +122,13 @@ 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="अपने प्रोजेक्ट का कॉन्फ़िगरेशन">
+
+</Step>
+
+</Steps>
 
 ## फ़ाइल-सिस्टम आधारित रूट्स के साथ React Router v7 एप्लिकेशन में Intlayer सेटअप करने के लिए चरण-दर-चरण मार्गदर्शिका
 
@@ -153,7 +181,9 @@ export default config;
 
 > इस कॉन्फ़िगरेशन फ़ाइल के माध्यम से, आप स्थानीयकृत URL, मिडलवेयर पुनर्निर्देशन, कुकी नाम, आपकी सामग्री घोषणाओं का स्थान और एक्सटेंशन, कंसोल में Intlayer लॉग को अक्षम करना, और भी बहुत कुछ सेट कर सकते हैं। उपलब्ध सभी पैरामीटर की पूरी सूची के लिए, [कॉन्फ़िगरेशन दस्तावेज़](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/configuration.md) देखें।
 
-### चरण 3: अपने Vite कॉन्फ़िगरेशन में Intlayer को एकीकृत करें
+<Steps>
+
+<Step number={3} title="अपने Vite कॉन्फ़िगरेशन में Intlayer को एकीकृत करें">
 
 अपने कॉन्फ़िगरेशन में intlayer प्लगइन जोड़ें:
 
@@ -169,7 +199,9 @@ export default defineConfig({
 
 > `intlayer()` Vite प्लगइन का उपयोग Intlayer को Vite के साथ एकीकृत करने के लिए किया जाता है। यह सामग्री घोषणा फ़ाइलों के निर्माण को सुनिश्चित करता है और विकास मोड में उनकी निगरानी करता है। यह Vite एप्लिकेशन के भीतर Intlayer पर्यावरण चर को परिभाषित करता है। इसके अतिरिक्त, यह प्रदर्शन को अनुकूलित करने के लिए उपनाम प्रदान करता है।
 
-### चरण 4: React Router v7 रूट्स कॉन्फ़िगर करें
+</Step>
+
+<Step number={4} title="React Router v7 रूट्स कॉन्फ़िगर करें">
 
 अपने रूटिंग कॉन्फ़िगरेशन को स्थानीय-जानकारी वाले रूट्स के साथ सेट करें:
 
@@ -185,7 +217,9 @@ export default [
 ] satisfies RouteConfig;
 ```
 
-### चरण 5: लेआउट कंपोनेंट बनाएं
+</Step>
+
+<Step number={5} title="लेआउट कंपोनेंट बनाएं">
 
 अपने रूट लेआउट और स्थानीय-विशिष्ट लेआउट सेट करें:
 
@@ -208,7 +242,9 @@ export default function RootLayout({ params }: Route.ComponentProps) {
 }
 ```
 
-### चरण 6: अपनी सामग्री घोषित करें
+</Step>
+
+<Step number={6} title="अपनी सामग्री घोषित करें">
 
 अपनी अनुवादों को संग्रहीत करने के लिए अपनी सामग्री घोषणाएँ बनाएं और प्रबंधित करें:
 
@@ -248,7 +284,9 @@ export default pageContent;
 
 > अधिक विवरण के लिए, [सामग्री घोषणा प्रलेखन](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/dictionary/content_file.md) देखें।
 
-### चरण 7: स्थानीय-जानकारी वाले घटक बनाएँ
+</Step>
+
+<Step number={7} title="स्थानीय-जानकारी वाले घटक बनाएँ">
 
 स्थानीय-जानकारी वाले नेविगेशन के लिए `LocalizedLink` घटक बनाएँ:
 
@@ -312,7 +350,9 @@ export const useLocalizedNavigate = () => {
 };
 ```
 
-### चरण 8: अपने पृष्ठों में Intlayer का उपयोग करें
+</Step>
+
+<Step number={8} title="अपने पृष्ठों में Intlayer का उपयोग करें">
 
 अपने एप्लिकेशन में अपने कंटेंट डिक्शनरीज़ तक पहुँचें:
 
@@ -341,7 +381,9 @@ export default function Page() {
 
 > यदि आपका ऐप पहले से मौजूद है, तो आप हजारों घटकों को एक सेकंड में बदलने के लिए [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) के साथ उपयोग कर सकते हैं।
 
-### चरण 9: एक लोकल स्विचर कंपोनेंट बनाएं
+</Step>
+
+<Step number={9} title="एक लोकल स्विचर कंपोनेंट बनाएं">
 
 उपयोगकर्ताओं को भाषाएँ बदलने की अनुमति देने के लिए एक कॉम्पोनेंट बनाएं:
 
@@ -402,7 +444,9 @@ export const LocaleSwitcher: FC = () => {
 
 > `useLocale` हुक के बारे में अधिक जानने के लिए, कृपया [दस्तावेज़](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/packages/react-intlayer/useLocale.md) देखें।
 
-### चरण 10: HTML एट्रिब्यूट्स प्रबंधन जोड़ें (वैकल्पिक)
+</Step>
+
+<Step number={10} title="HTML एट्रिब्यूट्स प्रबंधन जोड़ें">
 
 HTML lang और dir एट्रिब्यूट्स को प्रबंधित करने के लिए एक हुक बनाएं:
 
@@ -440,7 +484,9 @@ export default function RootLayout() {
 }
 ```
 
-### (वैकल्पिक) कदम 1 : अपने घटकों की सामग्री निकालें
+</Step>
+
+<Step number={1} title="अपने घटकों की सामग्री निकालें" isOptional={true}>
 
 यदि आपके पास मौजूदा कोडबेस है, तो हजारों फ़ाइलों को बदलना समय लेने वाला हो सकता है।
 
@@ -538,6 +584,10 @@ bun run build # Or bun run dev
 
 ---
 
+</Step>
+
+</Steps>
+
 ## Configure TypeScript
 
 Intlayer uses module augmentation to get benefits of TypeScript and make your codebase stronger.
@@ -604,7 +654,9 @@ To go further, you can implement the [visual editor](https://github.com/aymericz
 
 This comprehensive guide provides everything you need to integrate Intlayer with React Router v7 using file-system based routing for a fully internationalized application with locale-aware routing and TypeScript support.
 
-### चरण 11: मिडलवेयर जोड़ें (वैकल्पिक)
+<Steps>
+
+<Step number={11} title="मिडलवेयर जोड़ें">
 
 आप अपने एप्लिकेशन में सर्वर-साइड रूटिंग जोड़ने के लिए `intlayerProxy` का भी उपयोग कर सकते हैं। यह प्लगइन URL के आधार पर वर्तमान लोकल का स्वचालित रूप से पता लगाएगा और उपयुक्त लोकल कुकी सेट करेगा। यदि कोई लोकल निर्दिष्ट नहीं है, तो प्लगइन उपयोगकर्ता के ब्राउज़र भाषा प्राथमिकताओं के आधार पर सबसे उपयुक्त लोकल निर्धारित करेगा। यदि कोई लोकल पता नहीं चलता है, तो यह डिफ़ॉल्ट लोकल पर पुनः निर्देशित करेगा।
 
@@ -627,6 +679,10 @@ export default defineConfig({
 
 ---
 
+</Step>
+
+</Steps>
+
 ## टाइपस्क्रिप्ट कॉन्फ़िगर करें
 
 Intlayer टाइपस्क्रिप्ट के लाभ प्राप्त करने और आपके कोडबेस को मजबूत बनाने के लिए मॉड्यूल ऑगमेंटेशन का उपयोग करता है।

package/docs/hi/intlayer_with_storybook.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-03-20
-updatedAt: 2026-05-06
-title: Storybook के साथ Intlayer कैसे सेटअप करें
-description: सीखें कि Intlayer और Storybook का उपयोग करके अपने डिज़ाइन सिस्टम को बहुभाषी कैसे बनाया जाए - सामग्री घोषणाओं को संकलित करें, एक स्थानीय स्विचर जोड़ें और किसी भी भाषा में अपने घटकों का पूर्वावलोकन करें।
+updatedAt: 2026-05-31
+title: "Storybook i18n - अपने ऐप को अनुवाद करने का पूर्ण गाइड"
+description: "अब i18next की जरूरत नहीं। 2026 में Storybook ऐप को बहुभाषी (i18n) बनाने का गाइड। AI एजेंट्स से अनुवाद करें और बंडल साइज़, SEO और परफॉर्मेंस ऑप्टिमाइज़ करें।"
 keywords:
   - अंतर्राष्ट्रीयकरण
   - प्रलेखन
@@ -31,16 +31,37 @@ history:
 
 <TOC/>
 
-## Intlayer क्या है?
+## विकल्पों पर इन्टलेयर क्यों?
 
-**Intlayer** एक अभिनव, ओपन-सोर्स अंतर्राष्ट्रीयकरण (i18n) लाइब्रेरी है जिसे आधुनिक वेब अनुप्रयोगों में बहुभाषी समर्थन को सरल बनाने के लिए डिज़ाइन किया गया है। यह **घटक स्तर** (component level) पर काम करता है - प्रत्येक घटक की अपनी सामग्री घोषणाएँ होती हैं - जो अनुवादों को उसी कोड के साथ रखती हैं जो उनका उपयोग करता है।
+`स्टोरीबुक-रिएक्ट-आई18नेक्स्ट` या `आई18नेक्स्ट` जैसे मुख्य समाधानों की तुलना में, इंटलेयर एक ऐसा समाधान है जो एकीकृत अनुकूलन के साथ आता है जैसे:
 
-Intlayer के साथ आप:
+**पूर्ण स्टोरीबुक कवरेज**
 
-- **घोषणात्मक रूप से अनुवाद प्रबंधित करें** प्रति-घटक सामग्री फ़ाइलों के साथ।
-- **पूर्ण TypeScript समर्थन प्राप्त करें** स्वतः उत्पन्न प्रकारों और IDE ऑटो-पूर्णता के माध्यम से।
-- **रनटाइम पर स्थानीय भाषा बदलें** बिना पेज रीलोड किए।
-- **स्वचालित रूप से अनुवाद करें** अंतर्निहित AI प्रदाता एकीकरण के साथ।
+इंटरलेयर को **बहुभाषी स्टोरी डेकोरेटर**, **लोकेल स्विचिंग**, और आपके डिज़ाइन सिस्टम में अंतर्राष्ट्रीयकरण (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)** आपकी बहुभाषी सामग्री को **वास्तविक समय** में प्रबंधित करने में मदद करता है, जिससे अनुवादकों, कॉपीराइटरों और टीम के अन्य सदस्यों के साथ सहयोग सहज हो जाता है। सामग्री को स्थानीय और/या दूरस्थ रूप से संग्रहीत किया जा सकता है।
 
 ---
 
@@ -59,7 +80,9 @@ Storybook UI घटकों को अलग से विकसित कर
 <Tabs>
 <Tab value="Vite Setup">
 
-### चरण 1: निर्भरताएँ स्थापित करें
+<Steps>
+
+<Step number={1} title="निर्भरताएँ स्थापित करें">
 
 ```bash packageManager="npm"
 npm install intlayer react-intlayer
@@ -89,7 +112,9 @@ bun add vite-intlayer --dev
 
 ---
 
-### चरण 2: Intlayer कॉन्फ़िगरेशन बनाएँ
+</Step>
+
+<Step number={2} title="Intlayer कॉन्फ़िगरेशन बनाएँ">
 
 अपने प्रोजेक्ट के रूट में (या अपने डिज़ाइन-सिस्टम पैकेज के अंदर) `intlayer.config.ts` बनाएँ:
 
@@ -118,7 +143,9 @@ export default config;
 
 ---
 
-### चरण 3: Storybook में Vite प्लगइन जोड़ें
+</Step>
+
+<Step number={3} title="Storybook में Vite प्लगइन जोड़ें">
 
 Storybook का `viteFinal` हुक आपको आंतरिक Vite कॉन्फ़िगरेशन को विस्तारित करने की अनुमति देता है। वहां `intlayer()` प्लगइन आयात करें और जोड़ें:
 
@@ -159,7 +186,9 @@ export default config;
 
 ---
 
-### चरण 4: `IntlayerProvider` डेकोरेटर और एक स्थानीय टूलबार जोड़ें
+</Step>
+
+<Step number={4} title="`IntlayerProvider` डेकोरेटर और एक स्थानीय टूलबार जोड़ें">
 
 Storybook की `preview` फ़ाइल प्रत्येक कहानी (story) को `IntlayerProvider` के साथ लपेटने और टूलबार में एक स्थानीय स्विचर को उजागर करने के लिए सही जगह है:
 
@@ -216,7 +245,9 @@ export default preview;
 </Tab>
 <Tab value="Webpack Setup">
 
-### चरण 1: निर्भरताएँ स्थापित करें
+</Step>
+
+<Step number={1} title="निर्भरताएँ स्थापित करें">
 
 ```bash packageManager="npm"
 npm install intlayer react-intlayer
@@ -240,7 +271,9 @@ bun add @intlayer/webpack --dev
 
 ---
 
-### चरण 2: Intlayer कॉन्फ़िगरेशन बनाएँ
+</Step>
+
+<Step number={2} title="Intlayer कॉन्फ़िगरेशन बनाएँ">
 
 अपने प्रोजेक्ट के रूट में `intlayer.config.ts` बनाएँ:
 
@@ -262,7 +295,9 @@ export default config;
 
 ---
 
-### चरण 3: Storybook के Webpack को कॉन्फ़िगर करें
+</Step>
+
+<Step number={3} title="Storybook के Webpack को कॉन्फ़िगर करें">
 
 Webpack-आधारित Storybook सेटअप (जैसे `@storybook/react-webpack5`) के लिए, Intlayer उपनाम और लोडर जोड़ने के लिए `webpackFinal` के माध्यम से webpack कॉन्फ़िगरेशन का विस्तार करें:
 
@@ -289,7 +324,9 @@ export default config;
 
 ---
 
-### चरण 4: `IntlayerProvider` डेकोरेटर और एक स्थानीय टूलबार जोड़ें
+</Step>
+
+<Step number={4} title="`IntlayerProvider` डेकोरेटर और एक स्थानीय टूलबार जोड़ें">
 
 Vite सेटअप के समान - `.storybook/preview.tsx` में डेकोरेटर और वैश्विक स्थानीय प्रकार जोड़ें:
 
@@ -335,6 +372,10 @@ export default preview;
 
 ---
 
+</Step>
+
+</Steps>
+
 ## सामग्री घोषित करना
 
 प्रत्येक घटक के बगल में एक `*.content.ts` फ़ाइल बनाएँ। Intlayer संकलन के दौरान इसे स्वचालित रूप से चुन लेता है।