@intlayer/docs 9.5.5 → 9.5.7

package/docs/ja/dictionary/html.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-01-20
-updatedAt: 2026-03-24
+updatedAt: 2026-09-21
 title: HTMLコンテンツ
 description: IntlayerでHTMLコンテンツを宣言し、カスタムコンポーネントとともに使用する方法を学びます。このドキュメントに従い、国際化されたプロジェクト内で動的にコンポーネントを置換可能なリッチなHTMLライクコンテンツを埋め込む方法を解説します。
 keywords:
@@ -13,6 +13,8 @@ keywords:
   - React
   - Vue
   - Svelte
+  - Remix
+  - Astro
 slugs:
   - doc
   - concept
@@ -235,6 +237,83 @@ HTML ノードで `.use()` メソッドを使用する場合、提供された
     ```
 
   </Tab>
+  <Tab label="Remix" value="remix">
+    Remix 3 では、HTML ノードは HTML 文字列に解決されます。Remix JSX の `innerHTML` プロパティ、または `html-template` ビューの `html.raw` を使用して挿入します。
+
+    ```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` はエスケープを回避する2つの方法であり、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` ディレクティブ、またはクライアントの `<script>` 内の `innerHTML` を使用して挿入します。
+
+    ```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`によるグローバル設定
@@ -470,6 +549,41 @@ HTML ノードで `.use()` メソッドを使用する場合、提供された
     > HTML レンダラーを動的にインポートすることは、アプリケーションのバンドルサイズを削減するための良い方法です。
 
   </Tab>
+  <Tab label="Remix" value="remix">
+
+    Remix にはプロバイダーを保持するコンポーネントツリーがないため、設定はサーバー起動時にシングルトンとして一度だけインストールされます。`useHTMLRenderer()` によって返されるレンダラーを設定します。`useIntlayer` によって返される `html` ノードはそのままレンダリングされます。ノードごとに `.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 にはプロバイダーを保持するコンポーネントツリーがないため、設定はミドルウェア（サーバー）およびクライアント `<script>`（ブラウザ）でシングルトンとして一度だけインストールされます。`useHTMLRenderer()` によって返されるレンダラーを設定します。`useIntlayer` によって返される `html` ノードはそのままレンダリングされます。ノードごとに `.use()` でタグをオーバーライドします。
+
+    ```typescript fileName="src/middleware.ts"
+    import { installIntlayerHTML } from "astro-intlayer/html";
+    import { defineMiddleware } from "astro:middleware";
+
+    // サーバー起動時に1回実行されます。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 @@ HTML ノードで `.use()` メソッドを使用する場合、提供された
     ```
 
   </Tab>
+  <Tab label="Remix" value="remix">
+    #### `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">
+    #### `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/ja/dictionary/markdown.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-02-07
-updatedAt: 2026-05-19
+updatedAt: 2026-09-21
 title: Markdown
 description: Intlayerを使用して多言語Webサイトでマークダウンコンテンツを宣言および使用する方法を学びます。このオンラインドキュメントの手順に従って、マークダウンをプロジェクトにシームレスに統合します。
 keywords:
@@ -11,6 +11,8 @@ keywords:
   - Next.js
   - JavaScript
   - React
+  - Remix
+  - Astro
 slugs:
   - doc
   - concept
@@ -489,6 +491,111 @@ Markdown レンダリングは **MDX** をサポートしています — Markdo
     ```
 
   </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` はエスケープを回避する2つの方法であり、レンダリングされた 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文字列のみ）
@@ -700,6 +807,60 @@ Markdown レンダリングは **MDX** をサポートしています — Markdo
     ```
 
   </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` を使用したグローバル設定
@@ -999,6 +1160,73 @@ Markdown レンダリングは **MDX** をサポートしています — Markdo
     > 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";
+
+    // サーバー起動時に1回実行されます。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
@@ -1327,6 +1555,40 @@ remark / rehype などの他の Markdown パーサーと比較して、Intlayer
     ```
 
   </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にパースする（例: モジュール読み込み時に1回）
+    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 をクライアントに送信する必要はありません。frontmatter で Markdown をパースし、`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/ja/intlayer_with_analog.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2026-08-30
+updatedAt: 2026-09-21
 title: "Analog i18n - あなたのアプリを翻訳する完全ガイド"
 description: "i18nextはもう不要。2026年に多言語（i18n）Analogアプリを構築するためのガイド。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-intlayer` の `intlayer()` プラグインが `vite.config.ts` 内で `analog()` の隣に追加され、コンテンツ宣言の監視と再構築、およびロケールプロキシの実行を行います。コンテンツ宣言は `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/ja/intlayer_with_angular_19.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2026-08-30
+updatedAt: 2026-09-21
 title: "Angular 19 i18n - あなたのアプリを翻訳する完全ガイド"
 description: "i18nextはもう不要。2026年に多言語（i18n）Angular 19アプリを構築するためのガイド。AIエージェントで翻訳し、バンドルサイズ、SEO、パフォーマンスを最適化します。"
 keywords:
@@ -164,6 +164,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/ja/intlayer_with_angular_21.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2026-08-30
+updatedAt: 2026-09-21
 title: "Angular 22 i18n - あなたのアプリを翻訳する完全ガイド"
 description: "i18nextはもう不要。2026年に多言語（i18n）Angular 21アプリを構築するためのガイド。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"]}