@intlayer/docs 9.5.5 → 9.5.7

package/docs/ar/dictionary/html.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-01-20
-updatedAt: 2026-01-22
+updatedAt: 2026-09-21
 title: محتوى HTML
 description: تعلّم كيفية إعلان واستخدام محتوى HTML مع مكونات مخصصة في Intlayer. اتبع هذه الوثائق لتضمين محتوى غني يشبه HTML مع استبدال المكونات ديناميكيًا في مشروعك متعدد اللغات.
 keywords:
@@ -13,6 +13,8 @@ keywords:
   - React
   - Vue
   - Svelte
+  - Remix
+  - Astro
 slugs:
   - doc
   - concept
@@ -236,6 +238,83 @@ const myContent = html(
     ```
 
   </Tab>
+  <Tab label="Remix" value="remix">
+    في Remix 3، يتم تحليل عقد HTML إلى سلسلة HTML. قم بحقنها باستخدام خاصية `innerHTML` في Remix JSX، أو باستخدام `html.raw` في عرض `html-template`.
+
+    ```tsx fileName="src/views/home.tsx"
+    import { useIntlayer } from "remix-intlayer";
+
+    export const HomePage = () => () => {
+      const { myHtmlContent } = useIntlayer("app");
+
+      return <div innerHTML={myHtmlContent.value} />;
+    };
+    ```
+
+    ```ts fileName="src/views/home.ts"
+    import { html } from "remix/html-template";
+    import { useIntlayer } from "remix-intlayer";
+
+    export const renderHomePage = () => {
+      const { myHtmlContent } = useIntlayer("app");
+
+      return html.raw`<div>${myHtmlContent.value}</div>`;
+    };
+    ```
+
+    > يقوم Remix بتهريب القيم المدرجة افتراضيًا. `innerHTML` و `html.raw` هما خيارا إلغاء الاشتراك، وهو ما تحتاجه سلسلة HTML.
+
+    استخدم طريقة `.use()` لتجاوز العلامات أو تعيين المكونات المخصصة. التجاوزات هي دوال تُرجع سلسلة HTML:
+
+    ```tsx
+    <div
+      innerHTML={myHtmlContent.use({
+        p: ({ children }) => `<p class="prose">${children}</p>`,
+        CustomLink: ({ children }) => `<a href="/details">${children}</a>`,
+      })}
+    />
+    ```
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+    في Astro، يتم تحليل عقد HTML إلى سلسلة HTML. قم بحقنها باستخدام توجيه `set:html` في القالب، أو باستخدام `innerHTML` في `<script>` من جانب العميل.
+
+    ```astro fileName="src/pages/index.astro"
+    ---
+    import { useIntlayer } from "astro-intlayer";
+
+    const { myHtmlContent } = useIntlayer("app");
+    ---
+
+    <div set:html={myHtmlContent.value} />
+    ```
+
+    ```astro fileName="src/components/Content.astro"
+    <div id="content"></div>
+
+    <script>
+      import { useIntlayer } from "astro-intlayer";
+
+      const { myHtmlContent } = useIntlayer("app");
+
+      document.querySelector("#content")!.innerHTML = myHtmlContent.value;
+    </script>
+    ```
+
+    > يقوم Astro بتهريب `{التعبيرات}` افتراضيًا. `set:html` هو خيار إلغاء الاشتراك، وهو ما تحتاجه سلسلة HTML.
+
+    استخدم طريقة `.use()` لتجاوز العلامات أو تعيين المكونات المخصصة. التجاوزات هي دوال تُرجع سلسلة HTML:
+
+    ```astro
+    <div
+      set:html={myHtmlContent.use({
+        p: ({ children }) => `<p class="prose">${children}</p>`,
+        CustomLink: ({ children }) => `<a href="/details">${children}</a>`,
+      })}
+    />
+    ```
+
+  </Tab>
 </Tabs>
 
 ## التكوين العام باستخدام `HTMLProvider`
@@ -471,6 +550,41 @@ const myContent = html(
     > استيراد محرك HTML الخاص بك ديناميكيًا هو طريقة جيدة لتقليل حجم حزمة تطبيقك.
 
   </Tab>
+  <Tab label="Remix" value="remix">
+
+    لا يحتوي Remix على شجرة مكونات للاحتفاظ بمزود، لذلك يتم تثبيت التكوين مرة واحدة، كعنصر فريد (singleton)، عند بدء تشغيل الخادم. يقوم بتكوين أداة العرض التي تُرجعها `useHTMLRenderer()`. يتم عرض عقد `html` التي تُرجعها `useIntlayer` كما هي؛ قم بتجاوز علاماتها لكل عقدة باستخدام `.use()`.
+
+    ```typescript fileName="src/router.ts"
+    import { installIntlayerHTML } from "remix-intlayer/html";
+
+    installIntlayerHTML({
+      renderHTML: (html) => html.replaceAll("<p>", '<p class="prose">'),
+    });
+    ```
+
+    > استخدم `installIntlayerHTMLDynamic(async () => …)` لتحميل أداة العرض بشكل متكاسل؛ يتم تشغيل أداة التحميل عند الاستدعاء الأول فقط.
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+
+    لا يحتوي Astro على شجرة مكونات للاحتفاظ بمزود، لذلك يتم تثبيت التكوين مرة واحدة، كعنصر فريد (singleton)، في البرمجيات الوسيطة (الخادم) وفي `<script>` من جانب العميل (المتصفح). يقوم بتكوين أداة العرض التي تُرجعها `useHTMLRenderer()`. يتم عرض عقد `html` التي تُرجعها `useIntlayer` كما هي؛ قم بتجاوز علاماتها لكل عقدة باستخدام `.use()`.
+
+    ```typescript fileName="src/middleware.ts"
+    import { installIntlayerHTML } from "astro-intlayer/html";
+    import { defineMiddleware } from "astro:middleware";
+
+    // يتم التشغيل مرة واحدة عند بدء تشغيل الخادم؛ يتم تسجيل برمجية Intlayer الوسيطة نفسها
+    // بواسطة التكامل قبل هذا الملف.
+    installIntlayerHTML({
+      renderHTML: (html) => html.replaceAll("<p>", '<p class="prose">'),
+    });
+
+    export const onRequest = defineMiddleware((_context, next) => next());
+    ```
+
+    > استخدم `installIntlayerHTMLDynamic(async () => …)` لتحميل أداة العرض بشكل متكاسل؛ يتم تشغيل أداة التحميل عند الاستدعاء الأول فقط.
+
+  </Tab>
 </Tabs>
 
 ### التصيير اليدوي والأدوات المتقدمة
@@ -643,15 +757,69 @@ const myContent = html(
     ```
 
   </Tab>
+  <Tab label="Remix" value="remix">
+    #### Hook `useHTMLRenderer()`
+
+    احصل على دالة عرض مهيأة مسبقًا بواسطة `installIntlayerHTML()`. تُرجع سلسلة HTML.
+
+    ```tsx
+    import { useHTMLRenderer } from "remix-intlayer/html";
+
+    const renderHTML = useHTMLRenderer();
+
+    return <div innerHTML={renderHTML("<p>Hello <strong>World</strong></p>")} />;
+    ```
+
+    #### أداة `renderHTML()`
+
+    أداة قائمة بذاتها تتجاهل التكوين العام.
+
+    ```tsx
+    import { renderHTML } from "remix-intlayer/html";
+
+    const html = renderHTML("<p>Hello</p>");
+    ```
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+    #### Hook `useHTMLRenderer()`
+
+    احصل على دالة عرض مهيأة مسبقًا بواسطة `installIntlayerHTML()`. تُرجع سلسلة HTML.
+
+    ```astro
+    ---
+    import { useHTMLRenderer } from "astro-intlayer/html";
+
+    const renderHTML = useHTMLRenderer();
+    ---
+
+    <div set:html={renderHTML("<p>Hello <strong>World</strong></p>")} />
+    ```
+
+    #### أداة `renderHTML()`
+
+    أداة قائمة بذاتها تتجاهل التكوين العام.
+
+    ```astro
+    ---
+    import { renderHTML } from "astro-intlayer/html";
+
+    const html = renderHTML("<p>Hello</p>");
+    ---
+
+    <div set:html={html} />
+    ```
+
+  </Tab>
 </Tabs>
 
 ## مرجع الخيارات
 
 يمكن تمرير هذه الخيارات إلى `HTMLProvider` و`HTMLRenderer` و`useHTMLRenderer` و`renderHTML`.
 
-| الخيار       | النوع                 | الافتراضي | الوصف                                                                         |
-| :----------- | :-------------------- | :-------- | :---------------------------------------------------------------------------- |
-| `components` | `Record<string, any>` | `{}`      | خريطة تربط علامات HTML أو أسماء المكونات المخصصة بالمكونات.                   |
-| `renderHTML` | `Function`            | `null`    | دالة عرض مخصصة لاستبدال محلل HTML الافتراضي بالكامل (لمزودات Vue/Svelte فقط). |
+| الخيار       | النوع                 | الافتراضي | الوصف                                                                                  |
+| :----------- | :-------------------- | :-------- | :------------------------------------------------------------------------------------- |
+| `components` | `Record<string, any>` | `{}`      | خريطة تربط علامات HTML أو أسماء المكونات المخصصة بالمكونات.                            |
+| `renderHTML` | `Function`            | `null`    | دالة عرض مخصصة لاستبدال محلل HTML الافتراضي بالكامل (موفرو Vue وSvelte وRemix وAstro). |
 
 > ملاحظة: بالنسبة لـ React و Preact، يتم توفير علامات HTML القياسية تلقائيًا. تحتاج فقط إلى تمرير الخاصية `components` إذا أردت تجاوزها أو إضافة مكونات مخصصة.

package/docs/ar/dictionary/markdown.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-02-07
-updatedAt: 2026-05-19
+updatedAt: 2026-09-21
 title: Markdown
 description: تعرف على كيفية الإعلان عن واستخدام محتوى Markdown في موقعك متعدد اللغات باستخدام Intlayer. اتبع الخطوات في هذه الوثائق عبر الإنترنت لدمج Markdown بسلاسة في مشروعك.
 keywords:
@@ -11,6 +11,8 @@ keywords:
   - Next.js
   - JavaScript
   - React
+  - Remix
+  - Astro
 slugs:
   - doc
   - concept
@@ -487,6 +489,111 @@ author: aymericzip
     ```
 
   </Tab>
+  <Tab label="Remix" value="remix">
+    في Remix 3، يتم عرض عقد Markdown على الخادم في سلسلة HTML. قم بحقنها باستخدام خاصية `innerHTML` في Remix JSX، أو باستخدام `html.raw` في عرض `html-template`.
+
+    ```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` في القالب، أو باستخدام `innerHTML` في `<script>` من جانب العميل.
+
+    ```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 @@ author: aymericzip
     ```
 
   </Tab>
+  <Tab label="Remix" value="remix">
+    #### Hook `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">
+    #### Hook `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`
@@ -998,6 +1159,73 @@ author: aymericzip
     > الاستيراد الديناميكي لعارض Markdown الخاص بك هو طريقة رائعة لتقليل حجم حزمة تطبيقك.
 
   </Tab>
+  <Tab label="Remix" value="remix">
+
+    لا يحتوي Remix على شجرة مكونات للاحتفاظ بمزود، لذلك يتم تثبيت التكوين مرة واحدة، كعنصر فريد (singleton)، عند بدء تشغيل الخادم. يقوم بتكوين أداة العرض التي تُرجعها `useMarkdownRenderer()`. يتم عرض عقد `md` التي تُرجعها `useIntlayer` باستخدام المترجم الافتراضي؛ قم بتجاوز علاماتها لكل عقدة باستخدام `.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 على شجرة مكونات للاحتفاظ بمزود، لذلك يتم تثبيت التكوين مرة واحدة، كعنصر فريد (singleton)، في البرمجيات الوسيطة (الخادم) وفي `<script>` من جانب العميل (المتصفح). يقوم بتكوين أداة العرض التي تُرجعها `useMarkdownRenderer()`. يتم عرض عقد `md` التي تُرجعها `useIntlayer` باستخدام المترجم الافتراضي؛ قم بتجاوز علاماتها لكل عقدة باستخدام `.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)
@@ -1326,6 +1554,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. تحليل markdown إلى 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 في frontmatter واعرضه باستخدام `set:html`:
+
+    ```astro fileName="src/pages/article.astro"
+    ---
+    import { parseMarkdown, renderMarkdown } from "astro-intlayer/markdown";
+
+    // 1. تحليل markdown إلى AST قابل للتسلسل
+    const ast = parseMarkdown("## My title \n\nLorem Ipsum");
+    ---
+
+    <!-- 2. عرض AST: يقبل العارض سلسلة خام أو AST الذي تم تحليله -->
+    <article set:html={renderMarkdown(ast)} />
+    ```
+
+  </Tab>
 </Tabs>
 
 يضمن هذا النمط تنفيذ منطق تحليل Markdown بالكامل على الخادم، مما يقلل بشكل كبير من وقت التنفيذ من جانب العميل ويحسن سرعة الترطيب الأولية.

package/docs/ar/intlayer_with_analog.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2026-05-31
+updatedAt: 2026-09-21
 title: "تدويل Analog - الدليل الكامل لترجمة تطبيقك"
 description: "لا مزيد من i18next. دليل 2026 لبناء تطبيق Analog متعدد اللغات (i18n). ترجم باستخدام وكلاء الذكاء الاصطناعي وحسّن حجم الحزمة وتحسين محركات البحث والأداء."
 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، لذلك تتم إضافة مكون `intlayer()` الإضافي من `vite-intlayer` بجانب `analog()` في `vite.config.ts` لمراقبة تصريحات المحتوى وإعادة بنائها وتشغيل وكيل اللغة. توضع تصريحات المحتوى بجانب المكونات والصفحات في `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/ar/intlayer_with_angular_19.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2026-05-31
+updatedAt: 2026-09-21
 title: "تدويل Angular 19 - الدليل الكامل لترجمة تطبيقك"
 description: "لا مزيد من i18next. دليل 2026 لبناء تطبيق Angular 19 متعدد اللغات (i18n). ترجم باستخدام وكلاء الذكاء الاصطناعي وحسّن حجم الحزمة وتحسين محركات البحث والأداء."
 keywords:
@@ -167,6 +167,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/ar/intlayer_with_angular_21.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2026-05-31
+updatedAt: 2026-09-21
 title: "تدويل Angular 22 - الدليل الكامل لترجمة تطبيقك"
 description: "لا مزيد من i18next. دليل 2026 لبناء تطبيق Angular 22 متعدد اللغات (i18n). ترجم باستخدام وكلاء الذكاء الاصطناعي وحسّن حجم الحزمة وتحسين محركات البحث والأداء."
 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"]}