@intlayer/docs 8.11.2 → 8.12.0-canary.0

package/docs/ur/intlayer_with_storybook.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-03-20
 updatedAt: 2026-05-06
-title: Storybook کے ساتھ Intlayer کو کیسے ترتیب دیں
-description: براہ کرم سیکھیں کہ Storybook کے ساتھ Intlayer کا استعمال کرتے ہوئے اپنے ڈیزائن سسٹم کو کثیر لسانی کیسے بنایا جائے - مواد کے اعلانات کو مرتب کریں، زبان منتخب کرنے والا بٹن شامل کریں، اور کسی بھی زبان میں اپنے اجزاء کا پیش نظارہ کریں۔
+title: "Storybook i18n - اپنی ایپ کو ترجمہ کرنے کا مکمل گائیڈ"
+description: "اب i18next کی ضرورت نہیں۔ 2026 میں Storybook ایپ کو کثیر لسانی (i18n) بنانے کا گائیڈ۔ AI ایجنٹس سے ترجمہ کریں اور بنڈل سائز، SEO اور پرفارمنس بہتر بنائیں۔"
 keywords:
   - Internationalization
   - Documentation
@@ -59,7 +59,9 @@ Storybook تنہائی میں UI اجزاء کی تیاری اور دستاوی
 <Tabs>
 <Tab value="Vite Setup">
 
-### مرحلہ 1: انحصارات (Dependencies) انسٹال کریں
+<Steps>
+
+<Step number={1} title="انحصارات (Dependencies) انسٹال کریں">
 
 ```bash packageManager="npm"
 npm install intlayer react-intlayer
@@ -89,7 +91,9 @@ bun add vite-intlayer --dev
 
 ---
 
-### مرحلہ 2: Intlayer کنفیگریشن فائل بنائیں
+</Step>
+
+<Step number={2} title="Intlayer کنفیگریشن فائل بنائیں">
 
 اپنے پروجیکٹ کی جڑ (root) میں (یا اپنے ڈیزائن سسٹم پیکیج کے اندر) `intlayer.config.ts` بنائیں:
 
@@ -118,7 +122,9 @@ export default config;
 
 ---
 
-### مرحلہ 3: Storybook میں Vite پلگ ان شامل کریں
+</Step>
+
+<Step number={3} title="Storybook میں Vite پلگ ان شامل کریں">
 
 Storybook کا `viteFinal` ہک آپ کو اندرونی Vite کنفیگریشن بڑھانے کی اجازت دیتا ہے۔ وہاں `intlayer()` پلگ ان درآمد کریں اور شامل کریں:
 
@@ -159,7 +165,9 @@ export default config;
 
 ---
 
-### مرحلہ 4: `IntlayerProvider` ڈیکوریٹر اور لوکل ٹول بار شامل کریں
+</Step>
+
+<Step number={4} title="`IntlayerProvider` ڈیکوریٹر اور لوکل ٹول بار شامل کریں">
 
 Storybook کی `preview` فائل ہر سٹوری کو `IntlayerProvider` کے اندر لپیٹنے اور ٹول بار میں زبان منتخب کرنے والا بٹن دکھانے کے لیے موزوں جگہ ہے:
 
@@ -216,7 +224,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 +250,9 @@ bun add @intlayer/webpack --dev
 
 ---
 
-### مرحلہ 2: Intlayer کنفیگریشن فائل بنائیں
+</Step>
+
+<Step number={2} title="Intlayer کنفیگریشن فائل بنائیں">
 
 اپنے پروجیکٹ کی جڑ میں `intlayer.config.ts` بنائیں:
 
@@ -262,7 +274,9 @@ export default config;
 
 ---
 
-### مرحلہ 3: Storybook کے Webpack کو کنفیگر کریں
+</Step>
+
+<Step number={3} title="Storybook کے Webpack کو کنفیگر کریں">
 
 Webpack پر مبنی Storybook سیٹ اپس کے لیے (مثلاً `@storybook/react-webpack5`) ، `webpackFinal` کے ذریعے ویب پیک کنفیگریشن کو بڑھائیں تاکہ Intlayer ایلیئسز اور لوڈر شامل کیا جا سکے:
 
@@ -289,7 +303,9 @@ export default config;
 
 ---
 
-### مرحلہ 4: `IntlayerProvider` ڈیکوریٹر اور لوکل ٹول بار شامل کریں
+</Step>
+
+<Step number={4} title="`IntlayerProvider` ڈیکوریٹر اور لوکل ٹول بار شامل کریں">
 
 وہی جو Vite سیٹ اپ کے لیے ہے - `.storybook/preview.tsx` میں ڈیکوریٹر اور عالمی لوکل ٹائپ شامل کریں:
 
@@ -335,6 +351,10 @@ export default preview;
 
 ---
 
+</Step>
+
+</Steps>
+
 ## مواد کا اعلان کرنا (Declaring Content)
 
 ہر جزو کے ساتھ ایک `*.content.ts` فائل بنائیں۔ Intlayer ترتیب کے دوران اسے خود بخود اٹھا لیتا ہے۔

package/docs/ur/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:
   - بین الاقوامی کاری
   - دستاویزات
@@ -78,7 +78,9 @@ Intlayer کے ساتھ، آپ یہ کر سکتے ہیں:
 
 ## Vanilla JS ایپلی کیشن میں Intlayer ترتیب دینے کے لیے مرحلہ وار گائیڈ
 
-### مرحلہ 1: انحصار نصب کریں
+<Steps>
+
+<Step number={1} title="انحصار نصب کریں">
 
 npm کا استعمال کرتے ہوئے ضروری پیکیجز نصب کریں:
 
@@ -138,7 +140,9 @@ bun x intlayer build
 
 > `intlayer standalone` CLI کی بنڈلنگ ایکسپورٹ آپ کی ترتیب (configuration) کے لیے مخصوص غیر استعمال شدہ پیکیجز، لوکیلز، اور غیر ضروری لاجک (جیسے ری ڈائریکٹس یا سابقے) کو ٹری شیکنگ (tree-shaking) کے ذریعے خارج کر کے ایک بہترین بلڈ بناتی ہے۔
 
-### مرحلہ 2: اپنے پروجیکٹ کی کنفیگریشن
+</Step>
+
+<Step number={2} title="اپنے پروجیکٹ کی کنفیگریشن">
 
 اپنی ایپلی کیشن کی زبانوں کو ترتیب دینے کے لیے ایک کنفیگ فائل بنائیں:
 
@@ -162,7 +166,9 @@ export default config;
 
 > اس کنفیگریشن فائل کے ذریعے، آپ مقامی URLs، مڈل ویئر ری ڈائریکشن، کوکی کے نام، اپنے مواد کے اعلانات کی جگہ اور توسیع، کنسول میں Intlayer لاگز کو غیر فعال کرنا، اور بہت کچھ ترتیب دے سکتے ہیں۔ دستیاب پیرامیٹرز کی مکمل فہرست کے لیے، [کنفیگریشن دستاویزات](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ur/configuration.md) دیکھیں۔
 
-### مرحلہ 3: اپنے HTML میں بنڈل درآمد کریں
+</Step>
+
+<Step number={3} title="اپنے HTML میں بنڈل درآمد کریں">
 
 ایک بار جب آپ `intlayer.js` بنڈل تیار کر لیں، تو آپ اسے اپنی HTML فائل میں درآمد کر سکتے ہیں:
 
@@ -186,7 +192,9 @@ export default config;
 
 بنڈل `Intlayer` اور `VanillaIntlayer` کو `window` پر عالمی اشیاء کے طور پر ظاہر کرتا ہے۔
 
-### مرحلہ 4: اپنے انٹری پوائنٹ میں Intlayer کو بوٹ اسٹریپ کریں
+</Step>
+
+<Step number={4} title="اپنے انٹری پوائنٹ میں Intlayer کو بوٹ اسٹریپ کریں">
 
 اپنے `src/main.js` میں، کسی بھی مواد کے رینڈر ہونے سے **پہلے** `installIntlayer()` کو کال کریں تاکہ عالمی لوکیل سنگلٹن تیار ہو جائے۔
 
@@ -206,7 +214,9 @@ installIntlayer();
 installIntlayerMarkdown();
 ```
 
-### مرحلہ 5: اپنے مواد کا اعلان کریں
+</Step>
+
+<Step number={5} title="اپنے مواد کا اعلان کریں">
 
 تراجم کو اسٹور کرنے کے لیے اپنے مواد کے اعلانات بنائیں اور ان کا انتظام کریں:
 
@@ -284,7 +294,9 @@ export default appContent;
 >
 > مزید تفصیلات کے لیے، [مواد کے اعلان کے دستاویزات](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ur/dictionary/content_file.md) دیکھیں۔
 
-### مرحلہ 6: اپنے JavaScript میں Intlayer استعمال کریں
+</Step>
+
+<Step number={6} title="اپنے JavaScript میں Intlayer استعمال کریں">
 
 `window.VanillaIntlayer` آبجیکٹ API مددگار فراہم کرتا ہے: `useIntlayer(key, locale?)` دی گئی کلید کے لیے ترجمہ شدہ مواد واپس کرتا ہے۔
 
@@ -318,7 +330,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 +367,9 @@ export function setupLocaleSwitcher(container) {
 }
 ```
 
-### (اختیاری) مرحلہ 8: HTML زبان اور سمت کے اوصاف کو تبدیل کریں
+</Step>
+
+<Step number={8} title="HTML زبان اور سمت کے اوصاف کو تبدیل کریں" isOptional={true}>
 
 ایکسیسبیلٹی اور SEO کے لیے `<html>` ٹیگ کے `lang` اور `dir` اوصاف کو موجودہ لوکیل سے مطابقت رکھنے کے لیے اپ ڈیٹ کریں۔
 
@@ -371,7 +387,9 @@ useLocale({
 });
 ```
 
-### (اختیاری) مرحلہ 9: فی لوکیل لغات کو سست لوڈ (Lazy-load) کریں
+</Step>
+
+<Step number={9} title="فی لوکیل لغات کو سست لوڈ (Lazy-load) کریں" isOptional={true}>
 
 اگر آپ فی لوکیل لغات کو سست لوڈ کرنا چاہتے ہیں، تو آپ `useDictionaryDynamic` استعمال کر سکتے ہیں۔ یہ مفید ہے اگر آپ ابتدائی `intlayer.js` فائل میں تمام تراجم کو بنڈل نہیں کرنا چاہتے ہیں۔
 
@@ -393,6 +411,9 @@ const unsubscribe = useDictionaryDynamic(
 ```
 
 > نوٹ: `useDictionaryDynamic` کے لیے لغات کا علیحدہ ESM فائلوں کے طور پر دستیاب ہونا ضروری ہے۔ یہ طریقہ عام طور پر تب استعمال ہوتا ہے جب آپ کے پاس لغات پیش کرنے والا ویب سرور ہوتا ہے۔
+> </Step>
+
+</Steps>
 
 ### TypeScript کنفیگر کریں
 

package/docs/ur/intlayer_with_vite+lit.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-03-23
-updatedAt: 2026-05-06
-title: Vite + Lit i18n - 2026 میں ایک Lit ایپ کا ترجمہ کیسے کریں
-description: دریافت کریں کہ اپنی Vite اور Lit ویب سائٹ کو کثیر لسانی کیسے بنایا جائے۔ بین الاقوامی کاری (i18n) اور ترجمہ کے لیے دستاویزات پر عمل کریں۔
+updatedAt: 2026-05-31
+title: "Vite + Lit i18n - اپنی ایپ کو ترجمہ کرنے کا مکمل گائیڈ"
+description: "اب i18next کی ضرورت نہیں۔ 2026 میں Vite + Lit ایپ کو کثیر لسانی (i18n) بنانے کا گائیڈ۔ AI ایجنٹس سے ترجمہ کریں اور بنڈل سائز، SEO اور پرفارمنس بہتر بنائیں۔"
 keywords:
   - بین الاقوامی کاری
   - دستاویزات
@@ -72,7 +72,9 @@ Intlayer کے ساتھ، آپ:
 
 ## Vite اور Lit ایپلی کیشن میں Intlayer سیٹ کرنے کے لیے مرحلہ وار گائیڈ
 
-### مرحلہ 1: انحصار (Dependencies) انسٹال کریں
+<Steps>
+
+<Step number={1} title="انحصار (Dependencies) انسٹال کریں">
 
 npm کا استعمال کرتے ہوئے ضروری پیکجز انسٹال کریں:
 
@@ -110,7 +112,9 @@ bun x intlayer init
 - **vite-intlayer**
   اس میں [Vite بنڈلر](https://vite.dev/guide/why.html#why-bundle-for-production) کے ساتھ Intlayer کو مربوط کرنے کے لیے Vite پلگ ان، نیز صارف کے پسندیدہ مقام کا پتہ لگانے، کوکیز کو منظم کرنے اور URL ری ڈائریکشن کو سنبھالنے کے لیے مڈل ویئر شامل ہے۔
 
-### مرحلہ 2: اپنے پروجیکٹ کی کنفیگریشن
+</Step>
+
+<Step number={2} title="اپنے پروجیکٹ کی کنفیگریشن">
 
 اپنی ایپلی کیشن کی زبانوں کو کنفیگر کرنے کے لیے ایک کنفیگ فائل بنائیں:
 
@@ -134,7 +138,9 @@ export default config;
 
 > اس کنفیگریشن فائل کے ذریعے، آپ مقامی URLs، مڈل ویئر ری ڈائریکشن، کوکی کے نام، اپنے مواد کے اعلانات کا مقام اور ایکسٹینشن سیٹ کر سکتے ہیں، کنسول میں Intlayer لاگز بند کر سکتے ہیں، اور بہت کچھ۔ دستیاب پیرامیٹرز کی مکمل فہرست کے لیے، [کنفیگریشن دستاویزات](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ur/configuration.md) دیکھیں۔
 
-### مرحلہ 3: اپنی Vite کنفیگریشن میں Intlayer کو مربوط کریں
+</Step>
+
+<Step number={3} title="اپنی Vite کنفیگریشن میں Intlayer کو مربوط کریں">
 
 اپنی کنفیگریشن میں intlayer پلگ ان شامل کریں۔
 
@@ -150,7 +156,9 @@ export default defineConfig({
 
 > `intlayer()` Vite پلگ ان کا استعمال Intlayer کو Vite کے ساتھ مربوط کرنے کے لیے کیا جاتا ہے۔ یہ مواد کے اعلامیہ فائلوں کی تعمیر کو یقینی بناتا ہے اور ترقی کے موڈ میں ان کی نگرانی کرتا ہے۔ یہ Vite ایپلی کیشن کے اندر Intlayer ماحول کے تغیرات (environment variables) کی وضاحت کرتا ہے۔ مزید برآں، یہ کارکردگی کو بہتر کرنے کے لیے عرف (aliases) فراہم کرتا ہے۔
 
-### مرحلہ 4: اپنے انٹری پوائنٹ میں Intlayer کو شروع کریں
+</Step>
+
+<Step number={4} title="اپنے انٹری پوائنٹ میں Intlayer کو شروع کریں">
 
 کسی بھی حسب ضرورت اجزاء (custom elements) کے رجسٹر ہونے سے **پہلے** `installIntlayer()` کو کال کریں تاکہ پہلا جزو جڑتے وقت عالمی مقام کا سنگلٹن تیار ہو۔
 
@@ -175,7 +183,9 @@ installIntlayerMarkdown();
 import "./my-element.js";
 ```
 
-### مرحلہ 5: اپنے مواد کا اعلان کریں (Declare Your Content)
+</Step>
+
+<Step number={5} title="اپنے مواد کا اعلان کریں">
 
 ترجمہ محفوظ کرنے کے لیے اپنے مواد کے اعلانات بنائیں اور ان کا انتظام کریں:
 
@@ -261,7 +271,9 @@ export default appContent;
 >
 > مزید تفصیلات کے لیے، [مواد کے اعلامیہ کی دستاویزات](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ur/dictionary/content_file.md) دیکھیں۔
 
-### مرحلہ 6: اپنے LitElement میں Intlayer کا استعمال کریں
+</Step>
+
+<Step number={6} title="اپنے LitElement میں Intlayer کا استعمال کریں">
 
 ایک `LitElement` کے اندر `useIntlayer` کا استعمال کریں۔ یہ ایک `ReactiveController` پراکسی واپس کرتا ہے جو فعال مقام تبدیل ہونے پر خود بخود دوبارہ رینڈرنگ شروع کر دیتا ہے - کسی اضافی سیٹ اپ کی ضرورت نہیں ہے۔
 
@@ -306,7 +318,9 @@ export class MyElement extends LitElement {
 > html`<img alt=${String(content.viteLogo)} />`;
 > ```
 
-### (اختیاری) مرحلہ 7: اپنے مواد کی زبان تبدیل کریں
+</Step>
+
+<Step number={7} title="اپنے مواد کی زبان تبدیل کریں" isOptional={true}>
 
 اپنے مواد کی زبان تبدیل کرنے کے لیے، `useLocale` کنٹرولر کے ذریعے فراہم کردہ `setLocale` طریقہ استعمال کریں۔
 
@@ -341,7 +355,9 @@ export class LocaleSwitcher extends LitElement {
 }
 ```
 
-### (اختیاری) مرحلہ 8: مارک ڈاؤن اور HTML مواد رینڈر کریں
+</Step>
+
+<Step number={8} title="مارک ڈاؤن اور HTML مواد رینڈر کریں" isOptional={true}>
 
 Intlayer `md()` اور `html()` مواد کے اعلانات کی حمایت کرتا ہے۔ Lit میں، مرتب شدہ آؤٹ پٹ کو `unsafeHTML` ہدایت کے ذریعے کچے HTML کے طور پر انجیکٹ کیا جاتا ہے۔
 
@@ -391,7 +407,9 @@ export class MyElement extends LitElement {
 > [!TIP]
 > `String(content.editNote)` `IntlayerNode` پر `toString()` کال کرتا ہے، جو کچا مارک ڈاؤن سٹرنگ واپس کرتا ہے۔ HTML سٹرنگ حاصل کرنے کے لیے اسے `compileMarkdown` پر منتقل کریں، پھر اسے Lit کی `unsafeHTML` ہدایت کے ساتھ رینڈر کریں۔
 
-### (اختیاری) مرحلہ 9: اپنی ایپلی کیشن میں مقامی روٹنگ شامل کریں
+</Step>
+
+<Step number={9} title="اپنی ایپلی کیشن میں مقامی روٹنگ شامل کریں" isOptional={true}>
 
 ہر زبان کے لیے منفرد روٹس بنانے کے لیے (جو SEO کے لیے مفید ہے)، آپ Intlayer کے `localeMap` / `localeFlatMap` ہیلپرز کے ساتھ ایک کلائنٹ سائیڈ راؤٹر استعمال کر سکتے ہیں، اور سرور سائیڈ مقام کی نشاندہی کے لیے `intlayerProxy` Vite پلگ ان استعمال کر سکتے ہیں۔
 
@@ -408,7 +426,9 @@ export default defineConfig({
 });
 ```
 
-### (اختیاری) مرحلہ 10: مقام تبدیل ہونے پر URL تبدیل کریں
+</Step>
+
+<Step number={10} title="مقام تبدیل ہونے پر URL تبدیل کریں" isOptional={true}>
 
 مقام تبدیل ہونے پر براؤزر URL کو اپ ڈیٹ کرنے کے لیے مقام سوئچر کے ساتھ `useRewriteURL` استعمال کریں:
 
@@ -446,7 +466,9 @@ export class LocaleSwitcher extends LitElement {
 }
 ```
 
-### (اختیاری) مرحلہ 11: HTML زبان اور سمت کے ایٹریبیوٹس تبدیل کریں
+</Step>
+
+<Step number={11} title="HTML زبان اور سمت کے ایٹریبیوٹس تبدیل کریں" isOptional={true}>
 
 رسائی (accessibility) اور SEO کے لیے موجودہ مقام سے مطابقت رکھنے کے لیے `<html>` ٹیگ کے `lang` اور `dir` ایٹریبیوٹس کو اپ ڈیٹ کریں۔
 
@@ -471,7 +493,9 @@ export class MyElement extends LitElement {
 }
 ```
 
-### (اختیاری) مرحلہ 12: اپنے اجزاء کا مواد نکالیں (Extract content)
+</Step>
+
+<Step number={12} title="اپنے اجزاء کا مواد نکالیں" isOptional={true}>
 
 اگر آپ کے پاس موجودہ کوڈ بیس ہے، تو ہزاروں فائلوں کو تبدیل کرنا وقت طلب ہو سکتا ہے۔
 
@@ -511,6 +535,10 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
+</Step>
+
+</Steps>
+
 ### (Optional) Sitemap and robots.txt (build-time)
 
 Intlayer includes formatters such as `generateSitemap` and `getMultilingualUrls` that produce crawler-ready multilingual `sitemap.xml` and `robots.txt` output you can write into your project’s `public/` folder. In practice you run a small Node script **before** Vite (for example `predev` / `prebuild` npm hooks) so those files exist when you build or serve the app.

package/docs/ur/intlayer_with_vite+vanilla.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-03-23
-updatedAt: 2026-05-06
-title: i18n Vite + Vanilla JS - 2026 میں ونیلا جے ایس ایپ کا ترجمہ کیسے کریں
-description: دریافت کریں کہ اپنی Vite اور Vanilla JS ویب سائٹ کو کثیر لسانی کیسے بنایا جائے۔ بین الاقوامی کاری (i18n) اور ترجمے کے لیے دستاویزی معلومات پر عمل کریں۔
+updatedAt: 2026-05-31
+title: "Vite + Vanilla JS i18n - اپنی ایپ کو ترجمہ کرنے کا مکمل گائیڈ"
+description: "اب i18next کی ضرورت نہیں۔ 2026 میں Vite + Vanilla JS ایپ کو کثیر لسانی (i18n) بنانے کا گائیڈ۔ AI ایجنٹس سے ترجمہ کریں اور بنڈل سائز، SEO اور پرفارمنس بہتر بنائیں۔"
 keywords:
   - بین الاقوامی کاری
   - دستاویزات
@@ -73,7 +73,9 @@ Intlayer کے ساتھ، آپ:
 
 ## Vite اور Vanilla JS ایپلی کیشن میں Intlayer ترتیب دینے کے لیے مرحلہ وار گائیڈ
 
-### مرحلہ 1: انحصار انسٹال کریں
+<Steps>
+
+<Step number={1} title="انحصار انسٹال کریں">
 
 npm کا استعمال کرتے ہوئے ضروری پیکجز انسٹال کریں:
 
@@ -110,7 +112,9 @@ bun x intlayer init
 - **vite-intlayer**
   Intlayer کو [Vite bundler](https://vite.dev/guide/why.html#why-bundle-for-production) کے ساتھ مربوط کرنے کے لیے Vite پلگ ان، نیز صارف کے ترجیحی لوکل کا پتہ لگانے، کوکیز کو منظم کرنے اور URL ری ڈائرکشن کو سنبھالنے کے لیے مڈل ویئر شامل ہے۔
 
-### مرحلہ 2: اپنے پروجیکٹ کی ترتیب
+</Step>
+
+<Step number={2} title="اپنے پروجیکٹ کی ترتیب">
 
 اپنی ایپلی کیشن کی زبانیں ترتیب دینے کے لیے ایک کنفیگریشن فائل بنائیں:
 
@@ -134,7 +138,9 @@ export default config;
 
 > اس ترتیباتی فائل کے ذریعے، آپ مقامی URLs، مڈل ویئر ری ڈائرکشن، کوکی کے نام، اپنے مواد کے اعلانات کا مقام اور توسیع ترتیب دے سکتے ہیں، کنسول میں Intlayer لاگز کو غیر فعال کر سکتے ہیں، اور بہت کچھ۔ دستیاب پیرامیٹرز کی مکمل فہرست کے لیے، [کنفیگریشن دستاویزی معلومات](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ur/configuration.md) دیکھیں۔
 
-### مرحلہ 3: اپنی Vite کنفیگریشن میں Intlayer شامل کریں
+</Step>
+
+<Step number={3} title="اپنی Vite کنفیگریشن میں Intlayer شامل کریں">
 
 اپنی کنفیگریشن میں intlayer پلگ ان شامل کریں۔
 
@@ -150,7 +156,9 @@ export default defineConfig({
 
 > `intlayer()` Vite پلگ ان Intlayer کو Vite کے ساتھ مربوط کرنے کے لیے استعمال ہوتا ہے۔ یہ مواد کے اعلان کی فائلوں کی تیاری کو یقینی بناتا ہے اور ترقیاتی موڈ میں ان پر نظر رکھتا ہے۔ یہ Vite ایپلی کیشن کے اندر Intlayer کے ماحولیاتی متغیرات کی تعریف کرتا ہے۔ مزید برآں، یہ کارکردگی کو بہتر بنانے کے لیے عرفی نام (aliases) فراہم کرتا ہے۔
 
-### مرحلہ 4: اپنے انٹری پوائنٹ میں Intlayer بوٹسٹریپ کریں
+</Step>
+
+<Step number={4} title="اپنے انٹری پوائنٹ میں Intlayer بوٹسٹریپ کریں">
 
 کسی بھی مواد کو رینڈر کرنے سے **پہلے** `installIntlayer()` کو کال کریں تاکہ عالمی لوکل سنگلٹن تیار ہو جائے۔
 
@@ -175,7 +183,9 @@ installIntlayerMarkdown();
 import "./app.js";
 ```
 
-### مرحلہ 5: اپنے مواد کا اعلان کریں
+</Step>
+
+<Step number={5} title="اپنے مواد کا اعلان کریں">
 
 ترجموں کو محفوظ کرنے کے لیے اپنے مواد کے اعلانات بنائیں اور ان کا انتظام کریں:
 
@@ -253,7 +263,9 @@ export default appContent;
 >
 > مزید تفصیلات کے لیے، [مواد کے اعلان کی دستاویزی معلومات](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ur/dictionary/content_file.md) دیکھیں۔
 
-### مرحلہ 6: اپنے JavaScript میں Intlayer کا استعمال کریں
+</Step>
+
+<Step number={6} title="اپنے JavaScript میں Intlayer کا استعمال کریں">
 
 `vanilla-intlayer` لائبریری `react-intlayer` کے سرفیس API کی عکاسی کرتی ہے: `useIntlayer(key, locale?)` براہ راست ترجمہ شدہ مواد واپس کرتا ہے۔ لوکل کی تبدیلیوں کو سبسکرائب کرنے کے لیے نتیجے پر `.onChange()` کو جوڑیں - جو کہ React ری رینڈر کا واضح متبادل ہے۔
 
@@ -289,7 +301,9 @@ document.querySelector<HTMLParagraphElement>(".read-the-docs")!.textContent =
 > img.alt = content.viteLogoLabel.value;
 > ```
 
-### (اختیاری) مرحلہ 7: اپنے مواد کی زبان تبدیل کریں
+</Step>
+
+<Step number={7} title="اپنے مواد کی زبان تبدیل کریں" isOptional={true}>
 
 اپنے مواد کی زبان تبدیل کرنے کے لیے، `useLocale` کے فراہم کردہ `setLocale` فنکشن کا استعمال کریں۔
 
@@ -324,7 +338,9 @@ export function setupLocaleSwitcher(container: HTMLElement): () => void {
 }
 ```
 
-### (اختیاری) مرحلہ 8: مارک ڈاؤن اور HTML مواد رینڈر کریں
+</Step>
+
+<Step number={8} title="مارک ڈاؤن اور HTML مواد رینڈر کریں" isOptional={true}>
 
 Intlayer `md()` اور `html()` مواد کے اعلانات کی حمایت کرتا ہے۔ Vanilla JS میں، کمپائل شدہ آؤٹ پٹ خام HTML کے طور پر `innerHTML` کے ذریعے داخل کیا جاتا ہے۔
 
@@ -383,7 +399,9 @@ document.querySelector<HTMLDivElement>(".edit-note")!.innerHTML =
 > });
 > ```
 
-### (اختیاری) مرحلہ 9: اپنی ایپلی کیشن میں مقامی راؤٹنگ (Localized Routing) شامل کریں
+</Step>
+
+<Step number={9} title="اپنی ایپلی کیشن میں مقامی راؤٹنگ (Localized Routing) شامل کریں" isOptional={true}>
 
 ہر زبان کے لیے منفرد راستے بنانے کے لیے (SEO کے لیے مفید)، آپ سرور سائیڈ لوکل کی شناخت کے لیے اپنی Vite کنفیگریشن میں `intlayerProxy` استعمال کر سکتے ہیں۔
 
@@ -403,7 +421,9 @@ export default defineConfig({
 });
 ```
 
-### (اختیاری) مرحلہ 10: لوکل کی تبدیلی پر URL تبدیل کریں
+</Step>
+
+<Step number={10} title="لوکل کی تبدیلی پر URL تبدیل کریں" isOptional={true}>
 
 لوکل کی تبدیلی پر براؤزر URL کو اپ ڈیٹ کرنے کے لیے، Intlayer انسٹال کرنے کے بعد `useRewriteURL()` کو کال کریں:
 
@@ -417,7 +437,9 @@ installIntlayer();
 const stopRewriteURL = useRewriteURL();
 ```
 
-### (اختیاری) مرحلہ 11: HTML لینگویج اور ڈائریکشن ایٹریبیوٹس تبدیل کریں
+</Step>
+
+<Step number={11} title="HTML لینگویج اور ڈائریکشن ایٹریبیوٹس تبدیل کریں" isOptional={true}>
 
 رسائی (Accessibility) اور SEO کے لیے `<html>` ٹیگ کے `lang` اور `dir` ایٹریبیوٹس کو موجودہ لوکل کے مطابق اپ ڈیٹ کریں۔
 
@@ -435,7 +457,9 @@ useLocale({
 });
 ```
 
-### (اختیاری) مرحلہ 12: ہر لوکل کے لیے لغات لیزی لوڈ (Lazy-load) کریں
+</Step>
+
+<Step number={12} title="ہر لوکل کے لیے لغات لیزی لوڈ (Lazy-load) کریں" isOptional={true}>
 
 بڑی ایپس کے لیے آپ ہر لوکل کی لغت کو اس کے اپنے ٹکڑے (chunk) میں تقسیم کرنا چاہیں گے۔ Vite کے متحرک `import()` کے ساتھ `useDictionaryDynamic` استعمال کریں:
 
@@ -458,7 +482,9 @@ const unsubscribe = useDictionaryDynamic(
 
 > ہر لوکل کا بنڈل صرف اس وقت حاصل کیا جاتا ہے جب وہ لوکل فعال ہو جائے اور نتیجہ کیش کر دیا جاتا ہے - اسی لوکل پر بعد کی تبدیلیاں فوری ہوتی ہیں۔
 
-### (اختیاری) مرحلہ 13: اپنے اجزاء سے مواد نکالیں (Extract)
+</Step>
+
+<Step number={13} title="اپنے اجزاء سے مواد نکالیں" isOptional={true}>
 
 اگر آپ کے پاس پہلے سے موجود کوڈ بیس ہے، تو ہزاروں فائلوں کو تبدیل کرنا وقت طلب ہو سکتا ہے۔
 
@@ -554,6 +580,9 @@ bun run build # یا bun run dev
 
  </Tab>
 </Tabs>
+</Step>
+
+</Steps>
 
 ### (Optional) Sitemap and robots.txt (build-time)