@intlayer/docs 9.5.6 → 9.5.8

package/docs/hi/dictionary/markdown.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-02-07
-updatedAt: 2026-05-19
+updatedAt: 2026-09-21
 title: Markdown
 description: Intlayer के साथ अपनी बहुभाषी वेबसाइट में Markdown सामग्री घोषित करने और उसका उपयोग करने का तरीका जानें। अपने प्रोजेक्ट में Markdown को समेकित रूप से एकीकृत करने के लिए इस ऑनलाइन दस्तावेज़ में दिए गए चरणों का पालन करें।
 keywords:
@@ -11,6 +11,8 @@ keywords:
   - Next.js
   - JavaScript
   - React
+  - Remix
+  - Astro
 slugs:
   - doc
   - concept
@@ -487,6 +489,111 @@ Markdown रेंडरिंग **MDX** का समर्थन करता
     ```
 
   </Tab>
+  <Tab label="Remix" value="remix">
+    Remix 3 में, Markdown नोड्स सर्वर पर एक HTML स्ट्रिंग में रेंडर होते हैं। इसे Remix JSX के `innerHTML` प्रॉप के साथ, या `html-template` दृश्य में `html.raw` के साथ इंजेक्ट करें।
+
+    ```tsx fileName="src/views/home.tsx"
+    import { useIntlayer } from "remix-intlayer";
+
+    export const HomePage = () => () => {
+      const { myMarkdownContent } = useIntlayer("app");
+
+      return <div innerHTML={myMarkdownContent.value} />;
+    };
+    ```
+
+    ```ts fileName="src/views/home.ts"
+    import { html } from "remix/html-template";
+    import { useIntlayer } from "remix-intlayer";
+
+    export const renderHomePage = () => {
+      const { myMarkdownContent } = useIntlayer("app");
+
+      return html.raw`<div>${myMarkdownContent.value}</div>`;
+    };
+    ```
+
+    > Remix डिफ़ॉल्ट रूप से इंटरपोलेटेड मानों को एस्केप करता है। `innerHTML` और `html.raw` दो ऑप्ट-आउट हैं, जो एक रेंडर किए गए Markdown स्ट्रिंग की आवश्यकता है।
+
+    आप `.use()` विधि का उपयोग करके विशिष्ट टैग के लिए स्थानीय ओवरराइड भी प्रदान कर सकते हैं। ओवरराइड ऐसे फ़ंक्शन हैं जो एक HTML स्ट्रिंग लौटाते हैं:
+
+    ```tsx
+    <div
+      innerHTML={myMarkdownContent.use({
+        h1: ({ children }) => `<h1 class="text-3xl font-bold">${children}</h1>`,
+      })}
+    />
+    ```
+
+    `.value` रेंडर किया गया HTML स्ट्रिंग है, जबकि `String()` / `.toString()` कच्चा Markdown स्रोत वापस देते हैं:
+
+    ```tsx
+    myMarkdownContent.value // "<h1>…</h1>"
+    String(myMarkdownContent) // "# …"
+    myMarkdownContent.toString() // "# …"
+    ```
+
+    और आप अपने markdown मेटाडेटा को इस तरह एक्सेस कर सकते हैं:
+
+    ```tsx
+    myMarkdownContent.metadata
+    myMarkdownContent.metadata.title
+    ```
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+    Astro में, Markdown नोड्स एक HTML स्ट्रिंग में रेंडर होते हैं। इसे टेम्पलेट में `set:html` निर्देश के साथ, या क्लाइंट `<script>` में `innerHTML` के साथ इंजेक्ट करें।
+
+    ```astro fileName="src/pages/index.astro"
+    ---
+    import { useIntlayer } from "astro-intlayer";
+
+    const { myMarkdownContent } = useIntlayer("app");
+    ---
+
+    <div set:html={myMarkdownContent.value} />
+    ```
+
+    ```astro fileName="src/components/Content.astro"
+    <div id="content"></div>
+
+    <script>
+      import { useIntlayer } from "astro-intlayer";
+
+      const { myMarkdownContent } = useIntlayer("app");
+
+      document.querySelector("#content")!.innerHTML = myMarkdownContent.value;
+    </script>
+    ```
+
+    > Astro डिफ़ॉल्ट रूप से `{अभिव्यक्तियों}` को एस्केप करता है। `set:html` ऑप्ट-आउट है, जो एक रेंडर किए गए Markdown स्ट्रिंग की आवश्यकता है।
+
+    आप `.use()` विधि का उपयोग करके विशिष्ट टैग के लिए स्थानीय ओवरराइड भी प्रदान कर सकते हैं। ओवरराइड ऐसे फ़ंक्शन हैं जो एक HTML स्ट्रिंग लौटाते हैं:
+
+    ```astro
+    <div
+      set:html={myMarkdownContent.use({
+        h1: ({ children }) => `<h1 class="text-3xl font-bold">${children}</h1>`,
+      })}
+    />
+    ```
+
+    `.value` रेंडर किया गया HTML स्ट्रिंग है, जबकि `String()` / `.toString()` कच्चा Markdown स्रोत वापस देते हैं:
+
+    ```astro
+    myMarkdownContent.value // "<h1>…</h1>"
+    String(myMarkdownContent) // "# …"
+    myMarkdownContent.toString() // "# …"
+    ```
+
+    और आप अपने markdown मेटाडेटा को इस तरह एक्सेस कर सकते हैं:
+
+    ```astro
+    myMarkdownContent.metadata
+    myMarkdownContent.metadata.title
+    ```
+
+  </Tab>
 </Tabs>
 
 ### 2. हेल्पर यूटिलिटीज (केवल Markdown स्ट्रिंग्स)
@@ -698,6 +805,60 @@ Markdown रेंडरिंग **MDX** का समर्थन करता
     ```
 
   </Tab>
+  <Tab label="Remix" value="remix">
+    #### `useMarkdownRenderer()` हुक
+
+    `installIntlayerMarkdown()` द्वारा पूर्व-कॉन्फ़िगर किया गया रेंडरर फ़ंक्शन प्राप्त करें। यह एक HTML स्ट्रिंग लौटाता है।
+
+    ```tsx
+    import { useMarkdownRenderer } from "remix-intlayer/markdown";
+
+    const renderMarkdown = useMarkdownRenderer({ forceBlock: true });
+
+    return <div innerHTML={renderMarkdown("# My Title")} />;
+    ```
+
+    #### `renderMarkdown()` यूटिलिटी
+
+    स्टैंडअलोन यूटिलिटी जो वैश्विक कॉन्फ़िगरेशन को अनदेखा करती है।
+
+    ```tsx
+    import { renderMarkdown } from "remix-intlayer/markdown";
+
+    const html = renderMarkdown("# My Title", { forceBlock: true });
+    ```
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+    #### `useMarkdownRenderer()` हुक
+
+    `installIntlayerMarkdown()` द्वारा पूर्व-कॉन्फ़िगर किया गया रेंडरर फ़ंक्शन प्राप्त करें। यह एक HTML स्ट्रिंग लौटाता है।
+
+    ```astro
+    ---
+    import { useMarkdownRenderer } from "astro-intlayer/markdown";
+
+    const renderMarkdown = useMarkdownRenderer({ forceBlock: true });
+    ---
+
+    <div set:html={renderMarkdown("# My Title")} />
+    ```
+
+    #### `renderMarkdown()` यूटिलिटी
+
+    स्टैंडअलोन यूटिलिटी जो वैश्विक कॉन्फ़िगरेशन को अनदेखा करती है।
+
+    ```astro
+    ---
+    import { renderMarkdown } from "astro-intlayer/markdown";
+
+    const html = renderMarkdown("# My Title", { forceBlock: true });
+    ---
+
+    <div set:html={html} />
+    ```
+
+  </Tab>
 </Tabs>
 
 ## `MarkdownProvider` के साथ ग्लोबल कॉन्फ़िगरेशन
@@ -997,6 +1158,73 @@ Markdown रेंडरिंग **MDX** का समर्थन करता
     > अपने Markdown रेंडरर को गतिशील रूप से आयात करना आपके एप्लिकेशन के बंडल आकार को कम करने का एक शानदार तरीका है।
 
   </Tab>
+  <Tab label="Remix" value="remix">
+
+    Remix में प्रोवाइडर रखने के लिए कोई कंपोनेंट ट्री नहीं है, इसलिए सर्वर प्रारंभ होने पर कॉन्फ़िगरेशन एक सिंगलटन के रूप में एक बार स्थापित होता है। यह `useMarkdownRenderer()` द्वारा लौटाए गए रेंडरर को कॉन्फ़िगर करता है। `useIntlayer` द्वारा लौटाए गए `md` नोड्स डिफ़ॉल्ट कंपाइलर के साथ रेंडर किए जाते हैं; प्रति नोड उनके टैग को `.use()` के साथ ओवरराइड करें।
+
+    ```typescript fileName="src/router.ts"
+    import { installIntlayerMarkdown } from "remix-intlayer/markdown";
+
+    installIntlayerMarkdown({
+      forceBlock: true,
+      components: {
+        h1: ({ children }) => `<h1 class="text-2xl font-bold">${children}</h1>`,
+      },
+    });
+    ```
+
+    आप अपने स्वयं के markdown रेंडरर का भी उपयोग कर सकते हैं:
+
+    ```typescript fileName="src/router.ts"
+    import { installIntlayerMarkdown } from "remix-intlayer/markdown";
+
+    installIntlayerMarkdown({
+      renderMarkdown: async (md) => {
+        const { marked } = await import("marked");
+        return marked(md) as string;
+      },
+    });
+    ```
+
+    > रेंडरर को लेज़ी लोड करने के लिए `installIntlayerMarkdownDynamic(async () => …)` का उपयोग करें; लोडर केवल पहले कॉल पर चलता है।
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+
+    Astro में प्रोवाइडर रखने के लिए कोई कंपोनेंट ट्री नहीं है, इसलिए कॉन्फ़िगरेशन मिडलवेयर (सर्वर) और क्लाइंट `<script>` (ब्राउज़र) में सिंगलटन के रूप में एक बार स्थापित होता है। यह `useMarkdownRenderer()` द्वारा लौटाए गए रेंडरर को कॉन्फ़िगर करता है। `useIntlayer` द्वारा लौटाए गए `md` नोड्स डिफ़ॉल्ट कंपाइलर के साथ रेंडर किए जाते हैं; प्रति नोड उनके टैग को `.use()` के साथ ओवरराइड करें।
+
+    ```typescript fileName="src/middleware.ts"
+    import { installIntlayerMarkdown } from "astro-intlayer/markdown";
+    import { defineMiddleware } from "astro:middleware";
+
+    // सर्वर प्रारंभ होने पर एक बार चलता है; Intlayer मिडलवेयर स्वयं इस फ़ाइल से
+    // पहले एकीकरण द्वारा पंजीकृत होता है।
+    installIntlayerMarkdown({
+      forceBlock: true,
+      components: {
+        h1: ({ children }) => `<h1 class="text-2xl font-bold">${children}</h1>`,
+      },
+    });
+
+    export const onRequest = defineMiddleware((_context, next) => next());
+    ```
+
+    आप अपने स्वयं के markdown रेंडरर का भी उपयोग कर सकते हैं:
+
+    ```typescript fileName="src/middleware.ts"
+    import { installIntlayerMarkdown } from "astro-intlayer/markdown";
+
+    installIntlayerMarkdown({
+      renderMarkdown: async (md) => {
+        const { marked } = await import("marked");
+        return marked(md) as string;
+      },
+    });
+    ```
+
+    > रेंडरर को लेज़ी लोड करने के लिए `installIntlayerMarkdownDynamic(async () => …)` का उपयोग करें; लोडर केवल पहले कॉल पर चलता है।
+
+  </Tab>
 </Tabs>
 
 ## सस्पेंस (Suspense)
@@ -1325,6 +1553,40 @@ export class MyComponent {
     ```
 
   </Tab>
+  <Tab label="Remix" value="remix">
+
+    Remix 3 सर्वर पर रेंडर करता है और HTML स्ट्रीम करता है, इसलिए किसी भी AST को क्लाइंट में जाने की आवश्यकता नहीं होती है। एक बार पार्स करें, और पृष्ठ जहां भी बनाया गया है वहां AST रेंडर करें:
+
+    ```tsx fileName="src/views/article.tsx"
+    import { parseMarkdown, renderMarkdown } from "remix-intlayer/markdown";
+
+    // 1. मार्कडाउन को क्रमबद्ध करने योग्य AST में पार्स करें (उदा. मॉड्यूल लोड होने पर एक बार)
+    const ast = parseMarkdown("## My title \n\nLorem Ipsum");
+
+    export const ArticlePage = () => () => (
+      // 2. AST रेंडर करें: रेंडरर कच्चा स्ट्रिंग या पार्स किया गया AST स्वीकार करता है
+      <article innerHTML={renderMarkdown(ast)} />
+    );
+    ```
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+
+    Astro पृष्ठ सर्वर पर रेंडर किए जाते हैं, इसलिए किसी भी AST को क्लाइंट में जाने की आवश्यकता नहीं होती है। फ्रंटमैटर में Markdown को पार्स करें और इसे `set:html` के साथ रेंडर करें:
+
+    ```astro fileName="src/pages/article.astro"
+    ---
+    import { parseMarkdown, renderMarkdown } from "astro-intlayer/markdown";
+
+    // 1. मार्कडाउन को क्रमबद्ध करने योग्य AST में पार्स करें
+    const ast = parseMarkdown("## My title \n\nLorem Ipsum");
+    ---
+
+    <!-- 2. AST रेंडर करें: रेंडरर कच्चा स्ट्रिंग या पार्स किया गया AST स्वीकार करता है -->
+    <article set:html={renderMarkdown(ast)} />
+    ```
+
+  </Tab>
 </Tabs>
 
 यह पैटर्न यह सुनिश्चित करता है कि मार्कडाउन पार्सिंग लॉजिक पूरी तरह से सर्वर पर निष्पादित हो, जिससे क्लाइंट-साइड निष्पादन समय काफी कम हो जाता है और प्रारंभिक हाइड्रेशन गति में सुधार होता है।

package/docs/hi/intlayer_with_analog.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2026-05-31
+updatedAt: 2026-09-21
 title: "Analog i18n - अपने ऐप को अनुवाद करने का पूर्ण गाइड"
 description: "अब i18next की जरूरत नहीं। 2026 में Analog ऐप को बहुभाषी (i18n) बनाने का गाइड। AI एजेंट्स से अनुवाद करें और बंडल साइज़, SEO और परफॉर्मेंस ऑप्टिमाइज़ करें।"
 keywords:
@@ -157,6 +157,28 @@ bun add intlayer angular-intlayer vite-intlayer
 </Step>
 <Step number={2} title="अपने प्रोजेक्ट का कॉन्फ़िगरेशन">
 
+### आर्किटेक्चर
+
+इस आर्किटेक्चर में, `angular-intlayer` `provideIntlayer()` प्रदान करता है, जो `src/app/app.config.ts` में पंजीकृत होता है ताकि प्रत्येक कंपोनेंट और फ़ाइल-आधारित पेज `useIntlayer` सिग्नल के माध्यम से अपनी सामग्री पढ़ सके। Analog Vite पर आधारित है, इसलिए आपकी कंटेंट घोषणाओं को देखने, फिर से बनाने और लोकेल प्रॉक्सी चलाने के लिए `vite.config.ts` में `analog()` के बगल में `vite-intlayer` का `intlayer()` प्लगइन जोड़ा जाता है। कंटेंट घोषणाएं `src/app/` में कंपोनेंट्स और पेजों के साथ रखी जाती हैं।
+
+```bash
+.
+├── src
+│   ├── app
+│   │   ├── pages
+│   │   │   └── index.page.ts         # File-based route using useIntlayer
+│   │   ├── app.config.ts             # Application config with provideIntlayer()
+│   │   ├── app.content.ts            # App content declaration
+│   │   └── locale-switcher.component.ts
+│   └── main.ts
+├── intlayer.config.ts
+├── package.json
+├── tsconfig.json
+└── vite.config.ts                    # analog() and intlayer() Vite plugins
+```
+
+### कॉन्फ़िगरेशन
+
 अपने एप्लिकेशन की भाषाओं को कॉन्फ़िगर करने के लिए एक कॉन्फ़िग फ़ाइल बनाएं:
 
 ```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}

package/docs/hi/intlayer_with_angular_19.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2026-05-31
+updatedAt: 2026-09-21
 title: "Angular 19 i18n - अपने ऐप को अनुवाद करने का पूर्ण गाइड"
 description: "अब i18next की जरूरत नहीं। 2026 में Angular 19 ऐप को बहुभाषी (i18n) बनाने का गाइड। AI एजेंट्स से अनुवाद करें और बंडल साइज़, SEO और परफॉर्मेंस ऑप्टिमाइज़ करें।"
 keywords:
@@ -169,6 +169,29 @@ bun add @angular-builders/custom-webpack --dev
 </Step>
 <Step number={2} title="आपके प्रोजेक्ट का कॉन्फ़िगरेशन">
 
+### आर्किटेक्चर
+
+इस आर्किटेक्चर में, `angular-intlayer` `provideIntlayer()` प्रदान करता है, जो `src/app/app.config.ts` में पंजीकृत होता है ताकि प्रत्येक कंपोनेंट `useIntlayer` सिग्नल के माध्यम से अपनी कंटेंट पढ़ सके। Angular CLI को कस्टम Webpack बिल्डर पर स्विच किया जाता है, और `webpack.config.ts` आपकी कंटेंट घोषणाओं को देखने और फिर से बनाने के लिए Intlayer प्लगइन को बिल्ड में मर्ज करता है। कंटेंट घोषणाएं `src/app/` में कंपोनेंट्स के साथ रखी जाती हैं।
+
+```bash
+.
+├── src
+│   ├── app
+│   │   ├── app.component.html        # Root template reading the content signal
+│   │   ├── app.component.ts          # Root component using useIntlayer
+│   │   ├── app.config.ts             # Application config with provideIntlayer()
+│   │   ├── app.content.ts            # App content declaration
+│   │   └── locale-switcher.component.ts
+│   └── main.ts
+├── angular.json                      # Custom Webpack builder for build and serve
+├── intlayer.config.ts
+├── package.json
+├── tsconfig.json
+└── webpack.config.ts                 # mergeConfig() from angular-intlayer/webpack
+```
+
+### कॉन्फ़िगरेशन
+
 अपने एप्लिकेशन की भाषाओं को कॉन्फ़िगर करने के लिए एक कॉन्फ़िग फ़ाइल बनाएँ:
 
 ```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}

package/docs/hi/intlayer_with_angular_21.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2026-05-31
+updatedAt: 2026-09-21
 title: "Angular 22 i18n - अपने ऐप को अनुवाद करने का पूर्ण गाइड"
 description: "अब i18next की जरूरत नहीं। 2026 में Angular 22 ऐप को बहुभाषी (i18n) बनाने का गाइड। AI एजेंट्स से अनुवाद करें और बंडल साइज़, SEO और परफॉर्मेंस ऑप्टिमाइज़ करें।"
 keywords:
@@ -166,6 +166,29 @@ bun add @angular-builders/custom-esbuild --dev
 </Step>
 <Step number={2} title="अपने प्रोजेक्ट का कॉन्फ़िगरेशन">
 
+### आर्किटेक्चर
+
+इस आर्किटेक्चर में, `angular-intlayer` `provideIntlayer()` प्रदान करता है, जो `src/app/app.config.ts` में पंजीकृत होता है ताकि प्रत्येक कंपोनेंट `useIntlayer` सिग्नल के माध्यम से अपनी कंटेंट पढ़ सके। Angular CLI को कस्टम esbuild बिल्डर पर स्विच किया जाता है, और `esbuild.plugins.ts` आपकी कंटेंट घोषणाओं को देखने और फिर से बनाने के लिए Intlayer प्लगइन को बिल्ड में पंजीकृत करता है। कंटेंट घोषणाएं `src/app/` में कंपोनेंट्स के साथ रखी जाती हैं।
+
+```bash
+.
+├── src
+│   ├── app
+│   │   ├── app.component.html        # Root template reading the content signal
+│   │   ├── app.component.ts          # Root component using useIntlayer
+│   │   ├── app.config.ts             # Application config with provideIntlayer()
+│   │   ├── app.content.ts            # App content declaration
+│   │   └── locale-switcher.component.ts
+│   └── main.ts
+├── angular.json                      # Custom esbuild builder for build and serve
+├── esbuild.plugins.ts                # intlayerEsbuildPlugin() from angular-intlayer/esbuild
+├── intlayer.config.ts
+├── package.json
+└── tsconfig.json
+```
+
+### कॉन्फ़िगरेशन
+
 अपने एप्लिकेशन की भाषाओं को कॉन्फ़िगर करने के लिए एक कॉन्फ़िगरेशन फ़ाइल बनाएँ:
 
 ```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}

package/docs/hi/intlayer_with_astro.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-03-07
-updatedAt: 2026-09-20
+updatedAt: 2026-09-21
 title: "Astro i18n - अपने ऐप को अनुवाद करने का पूर्ण गाइड"
 description: "अब i18next की जरूरत नहीं। 2026 में Astro ऐप को बहुभाषी (i18n) बनाने का गाइड। AI एजेंट्स से अनुवाद करें और बंडल साइज़, SEO और परफॉर्मेंस ऑप्टिमाइज़ करें।"
 keywords:
@@ -160,6 +160,29 @@ bun add intlayer astro-intlayer
 </Step>
 <Step number={2} title="अपना प्रोजेक्ट कॉन्फ़िगर करें">
 
+### आर्किटेक्चर
+
+इस आर्किटेक्चर में, `astro.config.ts` में पंजीकृत `intlayer()` इंटीग्रेशन आपकी डिक्शनरी बनाता है और एक मिडलवेयर जोड़ता है जो प्रत्येक अनुरोध के लोकेल को हल करता है और इसे `Astro.locals.intlayer` पर प्रदर्शित करता है। पेज `src/pages/[...locale]/` रेस्ट सेगमेंट के तहत रहते हैं, इसलिए डिफ़ॉल्ट लोकेल बिना किसी प्रीफ़िक्स के सर्व किया जाता है और अन्य प्रत्येक लोकेल को अपना समर्पित URL मिलता है। `.astro` फ़ाइलें `astro-intlayer` के `useIntlayer` / `useLocale` हुक्स के साथ कंटेंट को पढ़ती हैं, और कंटेंट घोषणाएं `src/` में आपके कंपोनेंट्स के साथ रखी जाती हैं।
+
+```bash
+.
+├── src
+│   ├── app.content.tsx               # App content declaration
+│   ├── components
+│   │   └── LocaleSwitcher.astro      # Locale switcher component
+│   └── pages
+│       ├── [...locale]
+│       │   └── index.astro           # Localized page (rest param also serves the default locale)
+│       ├── robots.txt.ts             # robots.txt endpoint
+│       └── sitemap.xml.ts            # Localized sitemap endpoint
+├── astro.config.ts                   # Astro config with the intlayer() integration
+├── intlayer.config.ts
+├── package.json
+└── tsconfig.json
+```
+
+### कॉन्फ़िगरेशन
+
 अपने एप्लिकेशन की भाषाओं को परिभाषित करने के लिए एक कॉन्फ़िगरेशन फ़ाइल बनाएँ:
 
 ```typescript fileName="intlayer.config.ts"

package/docs/hi/intlayer_with_astro_lit.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-09-20
+updatedAt: 2026-09-21
 title: "Astro + Lit i18n - अपने ऐप को अनुवाद करने का पूर्ण गाइड"
 description: "अब i18next की जरूरत नहीं। 2026 में Astro + Lit ऐप को बहुभाषी (i18n) बनाने का गाइड। AI एजेंट्स से अनुवाद करें और बंडल साइज़, SEO और परफॉर्मेंस ऑप्टिमाइज़ करें।"
 keywords:
@@ -180,6 +180,30 @@ bun x intlayer init
 </Step>
 <Step number={2} title="अपना प्रोजेक्ट कॉन्फ़िगर करें">
 
+### आर्किटेक्चर
+
+इस आर्किटेक्चर में, `astro.config.ts` में पंजीकृत `intlayer()` इंटीग्रेशन आपकी डिक्शनरी बनाता है और एक मिडलवेयर जोड़ता है जो प्रत्येक अनुरोध के लोकेल को हल करता है और इसे `Astro.locals.intlayer` पर प्रदर्शित करता है। पेज `src/pages/[...locale]/` रेस्ट सेगमेंट के तहत रहते हैं, इसलिए डिफ़ॉल्ट लोकेल बिना किसी प्रीफ़िक्स के सर्व किया जाता है और अन्य प्रत्येक लोकेल को अपना समर्पित URL मिलता है। `.astro` फ़ाइलें सर्वर रेंडर के लिए `astro-intlayer` के `useIntlayer` / `useLocale` हुक्स के साथ कंटेंट को पढ़ती हैं, और Lit आइलैंड (`src/components/lit/LitDemo.ts`) सर्वर द्वारा पहचाने गए लोकेल को एक prop के रूप में प्राप्त करता है और इंटरैक्टिव भाग के लिए इसे `lit-intlayer` को सौंपता है। कंटेंट घोषणाएं `src/` में आपके कंपोनेंट्स के साथ रखी जाती हैं।
+
+```bash
+.
+├── src
+│   ├── components
+│   │   └── lit
+│   │       ├── app.content.ts        # App content declaration
+│   │       └── LitDemo.ts            # Lit custom element (content + locale switcher)
+│   └── pages
+│       ├── [...locale]
+│       │   └── index.astro           # Localized page mounting the custom element
+│       ├── robots.txt.ts             # robots.txt endpoint
+│       └── sitemap.xml.ts            # Localized sitemap endpoint
+├── astro.config.ts                   # Astro config with the intlayer() and lit() integrations
+├── intlayer.config.ts
+├── package.json
+└── tsconfig.json
+```
+
+### कॉन्फ़िगरेशन
+
 अपने एप्लिकेशन की भाषाओं को परिभाषित करने के लिए एक कॉन्फ़िगरेशन फ़ाइल बनाएँ:
 
 ```typescript fileName="intlayer.config.ts"

package/docs/hi/intlayer_with_astro_preact.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-09-20
+updatedAt: 2026-09-21
 title: "Astro + Preact i18n - अपने ऐप को अनुवाद करने का पूर्ण गाइड"
 description: "अब i18next की जरूरत नहीं। 2026 में Astro + Preact ऐप को बहुभाषी (i18n) बनाने का गाइड। AI एजेंट्स से अनुवाद करें और बंडल साइज़, SEO और परफॉर्मेंस ऑप्टिमाइज़ करें।"
 keywords:
@@ -179,6 +179,31 @@ bun x intlayer init
 </Step>
 <Step number={2} title="अपना प्रोजेक्ट कॉन्फ़िगर करें">
 
+### आर्किटेक्चर
+
+इस आर्किटेक्चर में, `astro.config.ts` में पंजीकृत `intlayer()` इंटीग्रेशन आपकी डिक्शनरी बनाता है और एक मिडलवेयर जोड़ता है जो प्रत्येक अनुरोध के लोकेल को हल करता है और इसे `Astro.locals.intlayer` पर प्रदर्शित करता है। पेज `src/pages/[...locale]/` रेस्ट सेगमेंट के तहत रहते हैं, इसलिए डिफ़ॉल्ट लोकेल बिना किसी प्रीफ़िक्स के सर्व किया जाता है और अन्य प्रत्येक लोकेल को अपना समर्पित URL मिलता है। `.astro` फ़ाइलें सर्वर रेंडर के लिए `astro-intlayer` के `useIntlayer` / `useLocale` हुक्स के साथ कंटेंट को पढ़ती हैं, और Preact आइलैंड (`src/components/preact/PreactIsland.tsx`) सर्वर द्वारा पहचाने गए लोकेल को एक prop के रूप में प्राप्त करता है और इंटरैक्टिव भाग के लिए इसे `preact-intlayer` को सौंपता है। कंटेंट घोषणाएं `src/` में आपके कंपोनेंट्स के साथ रखी जाती हैं।
+
+```bash
+.
+├── src
+│   ├── app.content.tsx               # App content declaration
+│   ├── components
+│   │   └── preact
+│   │       ├── LocaleSwitcher.tsx    # Locale switcher rendered inside the island
+│   │       └── PreactIsland.tsx      # Preact island wrapping the tree in IntlayerProvider
+│   └── pages
+│       ├── [...locale]
+│       │   └── index.astro           # Localized page mounting the island
+│       ├── robots.txt.ts             # robots.txt endpoint
+│       └── sitemap.xml.ts            # Localized sitemap endpoint
+├── astro.config.ts                   # Astro config with the intlayer() and preact() integrations
+├── intlayer.config.ts
+├── package.json
+└── tsconfig.json
+```
+
+### कॉन्फ़िगरेशन
+
 अपने एप्लिकेशन की भाषाओं को परिभाषित करने के लिए एक कॉन्फ़िगरेशन फ़ाइल बनाएँ:
 
 ```typescript fileName="intlayer.config.ts"

package/docs/hi/intlayer_with_astro_react.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-03-07
-updatedAt: 2026-09-20
+updatedAt: 2026-09-21
 title: "Astro + React i18n - अपने ऐप को अनुवाद करने का पूर्ण गाइड"
 description: "अब i18next की जरूरत नहीं। 2026 में Astro + React ऐप को बहुभाषी (i18n) बनाने का गाइड। AI एजेंट्स से अनुवाद करें और बंडल साइज़, SEO और परफॉर्मेंस ऑप्टिमाइज़ करें।"
 keywords:
@@ -182,6 +182,31 @@ bun x intlayer init
 </Step>
 <Step number={2} title="अपना प्रोजेक्ट कॉन्फ़िगर करें">
 
+### आर्किटेक्चर
+
+इस आर्किटेक्चर में, `astro.config.ts` में पंजीकृत `intlayer()` इंटीग्रेशन आपकी डिक्शनरी बनाता है और एक मिडलवेयर जोड़ता है जो प्रत्येक अनुरोध के लोकेल को हल करता है और इसे `Astro.locals.intlayer` पर प्रदर्शित करता है। पेज `src/pages/[...locale]/` रेस्ट सेगमेंट के तहत रहते हैं, इसलिए डिफ़ॉल्ट लोकेल बिना किसी प्रीफ़िक्स के सर्व किया जाता है और अन्य प्रत्येक लोकेल को अपना समर्पित URL मिलता है। `.astro` फ़ाइलें सर्वर रेंडर के लिए `astro-intlayer` के `useIntlayer` / `useLocale` हुक्स के साथ कंटेंट को पढ़ती हैं, और React आइलैंड (`src/components/react/ReactIsland.tsx`) सर्वर द्वारा पहचाने गए लोकेल को एक prop के रूप में प्राप्त करता है और इंटरैक्टिव भाग के लिए इसे `react-intlayer` को सौंपता है। कंटेंट घोषणाएं `src/` में आपके कंपोनेंट्स के साथ रखी जाती हैं।
+
+```bash
+.
+├── src
+│   ├── app.content.tsx               # App content declaration
+│   ├── components
+│   │   └── react
+│   │       ├── LocaleSwitcher.tsx    # Locale switcher rendered inside the island
+│   │       └── ReactIsland.tsx       # React island wrapping the tree in IntlayerProvider
+│   └── pages
+│       ├── [...locale]
+│       │   └── index.astro           # Localized page mounting the island
+│       ├── robots.txt.ts             # robots.txt endpoint
+│       └── sitemap.xml.ts            # Localized sitemap endpoint
+├── astro.config.ts                   # Astro config with the intlayer() and react() integrations
+├── intlayer.config.ts
+├── package.json
+└── tsconfig.json
+```
+
+### कॉन्फ़िगरेशन
+
 अपने एप्लिकेशन की भाषाओं को परिभाषित करने के लिए एक कॉन्फ़िगरेशन फ़ाइल बनाएँ:
 
 ```typescript fileName="intlayer.config.ts"

package/docs/hi/intlayer_with_astro_solid.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-09-20
+updatedAt: 2026-09-21
 title: "Astro + Solid i18n - अपने ऐप को अनुवाद करने का पूर्ण गाइड"
 description: "अब i18next की जरूरत नहीं। 2026 में Astro + Solid ऐप को बहुभाषी (i18n) बनाने का गाइड। AI एजेंट्स से अनुवाद करें और बंडल साइज़, SEO और परफॉर्मेंस ऑप्टिमाइज़ करें।"
 keywords:
@@ -179,6 +179,31 @@ bun x intlayer init
 </Step>
 <Step number={2} title="अपना प्रोजेक्ट कॉन्फ़िगर करें">
 
+### आर्किटेक्चर
+
+इस आर्किटेक्चर में, `astro.config.ts` में पंजीकृत `intlayer()` इंटीग्रेशन आपकी डिक्शनरी बनाता है और एक मिडलवेयर जोड़ता है जो प्रत्येक अनुरोध के लोकेल को हल करता है और इसे `Astro.locals.intlayer` पर प्रदर्शित करता है। पेज `src/pages/[...locale]/` रेस्ट सेगमेंट के तहत रहते हैं, इसलिए डिफ़ॉल्ट लोकेल बिना किसी प्रीफ़िक्स के सर्व किया जाता है और अन्य प्रत्येक लोकेल को अपना समर्पित URL मिलता है। `.astro` फ़ाइलें सर्वर रेंडर के लिए `astro-intlayer` के `useIntlayer` / `useLocale` हुक्स के साथ कंटेंट को पढ़ती हैं, और Solid आइलैंड (`src/components/solid/SolidIsland.tsx`) सर्वर द्वारा पहचाने गए लोकेल को एक prop के रूप में प्राप्त करता है और इंटरैक्टिव भाग के लिए इसे `solid-intlayer` को सौंपता है। कंटेंट घोषणाएं `src/` में आपके कंपोनेंट्स के साथ रखी जाती हैं।
+
+```bash
+.
+├── src
+│   ├── app.content.tsx               # App content declaration
+│   ├── components
+│   │   └── solid
+│   │       ├── LocaleSwitcher.tsx    # Locale switcher rendered inside the island
+│   │       └── SolidIsland.tsx       # Solid island wrapping the tree in IntlayerProvider
+│   └── pages
+│       ├── [...locale]
+│       │   └── index.astro           # Localized page mounting the island
+│       ├── robots.txt.ts             # robots.txt endpoint
+│       └── sitemap.xml.ts            # Localized sitemap endpoint
+├── astro.config.ts                   # Astro config with the intlayer() and solid() integrations
+├── intlayer.config.ts
+├── package.json
+└── tsconfig.json
+```
+
+### कॉन्फ़िगरेशन
+
 अपने एप्लिकेशन की भाषाओं को परिभाषित करने के लिए एक कॉन्फ़िगरेशन फ़ाइल बनाएँ:
 
 ```typescript fileName="intlayer.config.ts"