From 75ad0cc97698c2ff5dd07c0370bc396fcbb8966a Mon Sep 17 00:00:00 2001
From: Xiaoyue Lin <36526527+100gle@users.noreply.github.com>
Date: Tue, 22 Aug 2023 01:17:32 +0800
Subject: [PATCH 01/10] i18n(zh-cn): Update `i18n/zh-cn/docsearch.ts` (#4294)

Co-authored-by: Yan Thomas <61414485+Yan-Thomas@users.noreply.github.com>
---
 src/i18n/zh-cn/docsearch.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/i18n/zh-cn/docsearch.ts b/src/i18n/zh-cn/docsearch.ts
index 92e555e835dfb..363d354556eec 100644
--- a/src/i18n/zh-cn/docsearch.ts
+++ b/src/i18n/zh-cn/docsearch.ts
@@ -25,7 +25,7 @@ export default DocSearchDictionary({
 		},
 		errorScreen: {
 			titleText: '出现未知错误！',
-			helpText: '请检查您的互联网连接是否有误',
+			helpText: '请检查你的互联网连接是否有误',
 		},
 		footer: {
 			selectText: '进入条目',
@@ -34,7 +34,7 @@ export default DocSearchDictionary({
 			navigateUpKeyAriaLabel: '上方向键',
 			navigateDownKeyAriaLabel: '下方向键',
 			closeText: '关闭搜索',
-			closeKeyAriaLabel: 'Esc键',
+			closeKeyAriaLabel: 'Esc 键',
 			searchByText: '搜索来自',
 		},
 		noResultsScreen: {

From 80ff29ceef983ee849755d8d3f658f3db866bf1b Mon Sep 17 00:00:00 2001
From: Shinya Fujino <shf0811@gmail.com>
Date: Tue, 22 Aug 2023 02:28:25 +0900
Subject: [PATCH 02/10] i18n(ja): Add only-response-can-be-returned.mdx (#4292)

* i18n(ja): Add only-response-can-be-returned.mdx

* Update src/content/docs/ja/reference/errors/only-response-can-be-returned.mdx

Co-authored-by: Kyosuke Nakamura <kyosuke@users.noreply.github.com>

---------

Co-authored-by: Kyosuke Nakamura <kyosuke@users.noreply.github.com>
Co-authored-by: Yan Thomas <61414485+Yan-Thomas@users.noreply.github.com>
---
 .../errors/only-response-can-be-returned.mdx  | 28 +++++++++++++++++++
 1 file changed, 28 insertions(+)
 create mode 100644 src/content/docs/ja/reference/errors/only-response-can-be-returned.mdx

diff --git a/src/content/docs/ja/reference/errors/only-response-can-be-returned.mdx b/src/content/docs/ja/reference/errors/only-response-can-be-returned.mdx
new file mode 100644
index 0000000000000..5113bd7356e74
--- /dev/null
+++ b/src/content/docs/ja/reference/errors/only-response-can-be-returned.mdx
@@ -0,0 +1,28 @@
+---
+title: Invalid type returned by Astro page.
+i18nReady: true
+githubURL: https://github.com/withastro/astro/blob/main/packages/astro/src/core/errors/errors-data.ts
+---
+
+> ルーティングで`RETURNED_VALUE`が返されました。AstroファイルからはResponseのみ返せます。
+
+## 何が問題か？
+
+Astroファイル内で返せるのは[Response](https://developer.mozilla.org/ja/docs/Web/API/Response)のインスタンスのみです。
+
+```astro title="pages/login.astro"
+---
+return new Response(null, {
+  status: 404,
+  statusText: 'Not found'
+});
+
+// または、リダイレクトの場合、Astro.redirectもResponseのインスタンスを返します
+return Astro.redirect('/login');
+---
+```
+
+**以下も参照してください:**
+-  [Response](/ja/guides/server-side-rendering/#response)
+
+

From 5f0545e312045171b17a6f45c5d953f0db6d1141 Mon Sep 17 00:00:00 2001
From: Shinya Fujino <shf0811@gmail.com>
Date: Tue, 22 Aug 2023 02:40:55 +0900
Subject: [PATCH 03/10] i18n(ja): Add no-matching-static-path-found.mdx (#4291)

Co-authored-by: Yan Thomas <61414485+Yan-Thomas@users.noreply.github.com>
---
 .../errors/no-matching-static-path-found.mdx     | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 src/content/docs/ja/reference/errors/no-matching-static-path-found.mdx

diff --git a/src/content/docs/ja/reference/errors/no-matching-static-path-found.mdx b/src/content/docs/ja/reference/errors/no-matching-static-path-found.mdx
new file mode 100644
index 0000000000000..9a1ecc3e832aa
--- /dev/null
+++ b/src/content/docs/ja/reference/errors/no-matching-static-path-found.mdx
@@ -0,0 +1,16 @@
+---
+title: No static path found for requested path.
+i18nReady: true
+githubURL: https://github.com/withastro/astro/blob/main/packages/astro/src/core/errors/errors-data.ts
+---
+
+> **NoMatchingStaticPathFound**: `getStaticPaths()`のルーティングパターンがマッチしましたが、リクエストされたパス`PATH_NAME`に対応する静的パスが見つかりませんでした。
+
+## 何が問題か？
+
+[動的ルーティング](/ja/core-concepts/routing/#動的ルーティング)がマッチしましたが、リクエストされたパラメーターに対応するパスが見つかりませんでした。これは多くの場合、生成されたパスまたはリクエストされたパスのどちらかにタイポがあることが原因です。
+
+**以下も参照してください:**
+-  [getStaticPaths()](/ja/reference/api-reference/#getstaticpaths)
+
+

From 0a662cd54ad2f56ce1fb9fba4f7b50d60842e0a5 Mon Sep 17 00:00:00 2001
From: Shinya Fujino <shf0811@gmail.com>
Date: Tue, 22 Aug 2023 02:51:08 +0900
Subject: [PATCH 04/10] i18n(ja): Add static-client-address-not-available.mdx
 (#4290)

* i18n(ja): Add static-client-address-not-available.mdx

* Update src/content/docs/ja/reference/errors/static-client-address-not-available.mdx

Co-authored-by: Kyosuke Nakamura <kyosuke@users.noreply.github.com>

---------

Co-authored-by: Kyosuke Nakamura <kyosuke@users.noreply.github.com>
Co-authored-by: Yan Thomas <61414485+Yan-Thomas@users.noreply.github.com>
---
 .../static-client-address-not-available.mdx   | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)
 create mode 100644 src/content/docs/ja/reference/errors/static-client-address-not-available.mdx

diff --git a/src/content/docs/ja/reference/errors/static-client-address-not-available.mdx b/src/content/docs/ja/reference/errors/static-client-address-not-available.mdx
new file mode 100644
index 0000000000000..c4a15c3ad2b56
--- /dev/null
+++ b/src/content/docs/ja/reference/errors/static-client-address-not-available.mdx
@@ -0,0 +1,19 @@
+---
+title: Astro.clientAddress is not available in static mode.
+i18nReady: true
+githubURL: https://github.com/withastro/astro/blob/main/packages/astro/src/core/errors/errors-data.ts
+---
+
+> **StaticClientAddressNotAvailable**: `Astro.clientAddress`は`output: 'server'`または`output: 'hybrid'`を設定している場合にのみ使用できます。SSR機能が必要な場合は、Astroの設定を更新してください。
+
+## 何が問題か？
+
+`Astro.clientAddress`プロパティは、[サーバーサイドレンダリング](/ja/guides/server-side-rendering/)が有効な場合にのみ使用できます。
+
+静的モードでユーザーのIPアドレスを取得するには、[クライアントサイドスクリプト](/ja/guides/client-side-scripts/)で[Ipify](https://www.ipify.org/)などの別のAPIを使用してください。あるいは、ホスティングプロバイダーのサーバーレス関数を使用してユーザーのIPを取得できる場合もあります。
+
+**以下も参照してください:**
+-  [プロジェクトでSSRを有効にする](/ja/guides/server-side-rendering/#プロジェクトでssrを有効にする)
+-  [Astro.clientAddress](/ja/reference/api-reference/#astroclientaddress)
+
+

From fd927d28e4ac1b6d5bae12651ce78256b7152a72 Mon Sep 17 00:00:00 2001
From: Shinya Fujino <shf0811@gmail.com>
Date: Tue, 22 Aug 2023 03:03:19 +0900
Subject: [PATCH 05/10] i18n(ja): Add client-address-not-available.mdx (#4289)

* i18n(ja): Add client-address-not-available.mdx

* oops

---------

Co-authored-by: Yan Thomas <61414485+Yan-Thomas@users.noreply.github.com>
---
 .../errors/client-address-not-available.mdx     | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)
 create mode 100644 src/content/docs/ja/reference/errors/client-address-not-available.mdx

diff --git a/src/content/docs/ja/reference/errors/client-address-not-available.mdx b/src/content/docs/ja/reference/errors/client-address-not-available.mdx
new file mode 100644
index 0000000000000..7c969705944ef
--- /dev/null
+++ b/src/content/docs/ja/reference/errors/client-address-not-available.mdx
@@ -0,0 +1,17 @@
+---
+title: Astro.clientAddress is not available in current adapter.
+i18nReady: true
+githubURL: https://github.com/withastro/astro/blob/main/packages/astro/src/core/errors/errors-data.ts
+---
+
+> **ClientAddressNotAvailable**: `Astro.clientAddress`は`ADAPTER_NAME`アダプターでは利用できません。アダプターにサポートを追加するためにIssueを作成してください。
+
+## 何が問題か？
+
+使用しているアダプターは、`Astro.clientAddress`をサポートしていません。
+
+**以下も参照してください:**
+-  [公式インテグレーション](/ja/guides/integrations-guide/#公式インテグレーション)
+-  [Astro.clientAddress](/ja/reference/api-reference/#astroclientaddress)
+
+

From 96688c4e17b6e740ae8b1ffc1a63176db744cb7d Mon Sep 17 00:00:00 2001
From: Shinya Fujino <shf0811@gmail.com>
Date: Tue, 22 Aug 2023 03:16:24 +0900
Subject: [PATCH 06/10] i18n(ja): Add astro-syntax.mdx (#4285)

* i18n(ja): Add astro-syntax.mdx

* Fix broken links

* Update src/content/docs/ja/core-concepts/astro-syntax.mdx

Co-authored-by: Kyosuke Nakamura <kyosuke@users.noreply.github.com>

* Update src/content/docs/ja/core-concepts/astro-syntax.mdx

Co-authored-by: Kyosuke Nakamura <kyosuke@users.noreply.github.com>

* Update src/content/docs/ja/core-concepts/astro-syntax.mdx

Co-authored-by: Kyosuke Nakamura <kyosuke@users.noreply.github.com>

* Update src/content/docs/ja/core-concepts/astro-syntax.mdx

---------

Co-authored-by: Kyosuke Nakamura <kyosuke@users.noreply.github.com>
Co-authored-by: Yan Thomas <61414485+Yan-Thomas@users.noreply.github.com>
---
 .../docs/ja/core-concepts/astro-syntax.mdx    | 176 ++++++++++++++++++
 .../docs/ja/guides/troubleshooting.mdx        |   2 +-
 src/content/docs/ja/tutorial/2-pages/3.mdx    |   2 +-
 src/content/docs/ja/tutorial/2-pages/4.mdx    |   2 +-
 src/content/docs/ja/tutorial/2-pages/5.mdx    |   2 +-
 5 files changed, 180 insertions(+), 4 deletions(-)
 create mode 100644 src/content/docs/ja/core-concepts/astro-syntax.mdx

diff --git a/src/content/docs/ja/core-concepts/astro-syntax.mdx b/src/content/docs/ja/core-concepts/astro-syntax.mdx
new file mode 100644
index 0000000000000..39e844339aeba
--- /dev/null
+++ b/src/content/docs/ja/core-concepts/astro-syntax.mdx
@@ -0,0 +1,176 @@
+---
+title: Astroの構文
+description: .astroコンポーネント構文の紹介。
+i18nReady: true
+---
+
+**HTMLを知っていれば、最初のAstroコンポーネントを書くには十分です。**
+
+Astroコンポーネントの構文はHTMLのスーパーセットです。この構文は[HTMLやJSXを書いたことのある人にとって親しみやすいように設計され](#astroとjsxの違い)、コンポーネントやJavaScriptの式がサポートされています。
+
+## JSXライクな式
+
+Astroコンポーネントのフロントマターのコードフェンス（`---`）の間に、JavaScriptのローカル変数を定義できます。そして、JSXライクな式を使って、変数をコンポーネントのHTMLテンプレートに注入できます。
+
+:::note[動的 vs リアクティブ]
+この方法により、フロントマターで計算された**動的**な値をテンプレートに含めることができます。しかし、一度含められたこれらの値は**リアクティブ**ではなく、変化することはありません。Astroコンポーネントは、レンダリングの際に一度だけ実行されるテンプレートです。
+
+以下で[AstroとJSXの違い](#astroとjsxの違い)に関する例をいくつか紹介します。
+:::
+
+### 変数
+
+ローカル変数は、波括弧の構文を使ってHTMLに追加できます。
+
+```astro title="src/components/Variables.astro" "{name}"
+---
+const name = "Astro";
+---
+<div>
+  <h1>Hello {name}!</h1>  <!-- <h1>Hello Astro!</h1> を出力 -->
+</div>
+```
+
+### 動的属性
+
+ローカル変数を波括弧で囲むことで、HTML要素とコンポーネントの両方に属性値を渡せます。
+
+```astro title="src/components/DynamicAttributes.astro" "{name}" "${name}"
+---
+const name = "Astro";
+---
+<h1 class={name}>属性を式で指定できます</h1>
+
+<MyComponent templateLiteralNameAttribute={`私の名前は${name}です`} />
+```
+
+:::caution
+HTML属性は文字列に変換されるため、関数やオブジェクトをHTML要素に渡すことはできません。たとえば、Astroコンポーネント内のHTML要素にイベントハンドラを割り当てることはできません。
+
+```astro
+---
+// dont-do-this.astro
+function handleClick () {
+    console.log("ボタンがクリックされました！");
+}
+---
+<!-- ❌ これは動作しません！ ❌ -->
+<button onClick={handleClick}>クリックしても何も起こりません！</button>
+```
+
+代わりに、通常のJavaScriptと同じように、クライアントサイドスクリプトを使用してイベントハンドラを追加します。
+
+```astro
+---
+// do-this-instead.astro
+---
+<button id="button">クリックしてください</button>
+<script>
+  function handleClick () {
+    console.log("ボタンがクリックされました！");
+  }
+  document.getElementById("button").addEventListener("click", handleClick);
+</script>
+```
+:::
+
+### 動的HTML
+
+ローカル変数をJSXのような関数で使用して、動的に生成されるHTML要素を作成できます。
+
+```astro title="src/components/DynamicHtml.astro" "{item}"
+---
+const items = ["犬", "猫", "カモノハシ"];
+---
+<ul>
+  {items.map((item) => (
+    <li>{item}</li>
+  ))}
+</ul>
+```
+
+Astroは、JSXと同様に論理演算子と三項演算子を使用して、HTMLを条件に応じて表示できます。
+
+```astro title="src/components/ConditionalHtml.astro" "visible"
+---
+const visible = true;
+---
+{visible && <p>表示！</p>}
+
+{visible ? <p>表示！</p> : <p>あるいはこちらを表示！</p>}
+```
+
+### 動的タグ
+
+HTMLタグ名またはインポートされたコンポーネントを変数に設定することで、動的タグも使用できます。
+
+```astro title="src/components/DynamicTags.astro" /Element|(?<!My)Component/
+---
+import MyComponent from "./MyComponent.astro";
+const Element = 'div'
+const Component = MyComponent;
+---
+<Element>Hello!</Element> <!-- <div>Hello!</div> としてレンダリングされます -->
+<Component /> <!-- <MyComponent /> としてレンダリングされます -->
+```
+
+動的タグを使用する場合は、以下の点に注意してください。
+
+- **変数名は大文字で始める必要があります。** たとえば、`element`ではなく`Element`を使用します。そうしないと、Astroは変数名をそのままHTMLタグとしてレンダリングしようとします。
+
+- **ハイドレーションディレクティブは使えません。**[`client:*`ハイドレーションディレクティブ](/ja/core-concepts/framework-components/#インタラクティブなコンポーネント)を使用する場合、Astroはバンドルする対象のコンポーネントを知る必要がありますが、動的タグパターンではこれが機能しなくなるためです。
+
+### フラグメント
+
+Astroでは、`<Fragment> </Fragment>`または短縮形の`<> </>`を使用できます。
+
+フラグメントは、次の例のように、[`set:*`ディレクティブ](/ja/reference/directives-reference/#sethtml)を使用する際にラッパー要素を避けるために役立ちます。
+
+```astro title="src/components/SetHtml.astro" "Fragment"
+---
+const htmlString = '<p>生のHTMLコンテンツ</p>';
+---
+<Fragment set:html={htmlString} />
+```
+
+### AstroとJSXの違い
+
+Astroコンポーネントの構文はHTMLのスーパーセットです。HTMLやJSXを書いたことのある人にとって親しみやすいように設計されてはいますが、`.astro`ファイルとJSXの間にはいくつかの重要な違いがあります。
+
+#### 属性
+
+Astroでは、JSXで使用されている`camelCase`ではなく、すべてのHTML属性に標準の`kebab-case`形式を使用します。これは、Reactではサポートされていない`class`でも同様です。
+
+```jsx del={1} ins={2} title="example.astro"
+<div className="box" dataValue="3" />
+<div class="box" data-value="3" />
+```
+
+#### 複数の要素
+
+Astroコンポーネントテンプレートは複数の要素をレンダリングできます。その際、JavaScriptやJSXとは異なり、全体を単一の`<div>`や`<>`で囲む必要はありません。
+
+```astro title="src/components/RootElements.astro"
+---
+// 複数の要素を含むテンプレート
+---
+<p>全体をコンテナ要素で囲む必要はありません。</p>
+<p>Astroではテンプレート内に複数のルート要素を置けます。</p>
+```
+
+#### コメント
+
+Astroでは、標準のHTMLコメントまたはJavaScriptスタイルのコメントを使用できます。
+
+```astro title="example.astro"
+---
+---
+<!-- .astroファイルでは、HTMLのコメント構文が使えます -->
+{/* JSのコメント構文も有効です */}
+```
+
+:::caution
+HTMLスタイルのコメントはブラウザのDOMに含まれますが、JSのコメントはスキップされます。TODOメッセージやその他の開発専用の説明を残したい場合は、JavaScriptスタイルのコメントを使用することをお勧めします。
+:::
+
+
diff --git a/src/content/docs/ja/guides/troubleshooting.mdx b/src/content/docs/ja/guides/troubleshooting.mdx
index 7cd8eb4ada8b4..e3bb7a0fa5302 100644
--- a/src/content/docs/ja/guides/troubleshooting.mdx
+++ b/src/content/docs/ja/guides/troubleshooting.mdx
@@ -58,7 +58,7 @@ Astroテンプレートにインポートして使用しているコンポーネ
 それから、import文を確認してください。
 
 - インポートのリンク先が違っていませんか？（importパスを確認してください）
-- インポートしたコンポーネントと同じ名前になっていますか？(コンポーネント名と、[`.Astro`構文にしたがっていること](/ja/core-concepts/astro-syntax/#differences-between-astro-and-jsx)を確認してください。）
+- インポートしたコンポーネントと同じ名前になっていますか？(コンポーネント名と、[`.Astro`構文にしたがっていること](/ja/core-concepts/astro-syntax/#astroとjsxの違い)を確認してください。）
 - インポート時に拡張子が含まれていますか？（インポートしたファイルに拡張子が含まれているか確認してください。例: `.Astro`、`.md`、`.vue`、`.svelte`。 注: `.js(x)`と`.ts(x)`のファイルのみ、拡張子は必要ありません。）
 
 ### コンポーネントがインタラクティブでない
diff --git a/src/content/docs/ja/tutorial/2-pages/3.mdx b/src/content/docs/ja/tutorial/2-pages/3.mdx
index 99f6cc03afba4..dc1651da06bce 100644
--- a/src/content/docs/ja/tutorial/2-pages/3.mdx
+++ b/src/content/docs/ja/tutorial/2-pages/3.mdx
@@ -277,4 +277,4 @@ const student = false;
 
 ### 参考
 
-- [Astroにおける動的な式](/ja/core-concepts/astro-syntax/#jsx-like-expressions)
+- [Astroにおける動的な式](/ja/core-concepts/astro-syntax/#jsxライクな式)
diff --git a/src/content/docs/ja/tutorial/2-pages/4.mdx b/src/content/docs/ja/tutorial/2-pages/4.mdx
index 2d06b671e6f6a..17047b736c923 100644
--- a/src/content/docs/ja/tutorial/2-pages/4.mdx
+++ b/src/content/docs/ja/tutorial/2-pages/4.mdx
@@ -196,7 +196,7 @@ const textCase = "uppercase";
 </Box>
 
 ### Resources
-- [Astro構文とJSXの比較](/ja/core-concepts/astro-syntax/#differences-between-astro-and-jsx)
+- [Astro構文とJSXの比較](/ja/core-concepts/astro-syntax/#astroとjsxの違い)
 
 - [Astroの`<style>`タグ](/ja/guides/styling/#astroでのスタイリング)
 
diff --git a/src/content/docs/ja/tutorial/2-pages/5.mdx b/src/content/docs/ja/tutorial/2-pages/5.mdx
index d0e6da4563597..b6907061448fa 100644
--- a/src/content/docs/ja/tutorial/2-pages/5.mdx
+++ b/src/content/docs/ja/tutorial/2-pages/5.mdx
@@ -145,7 +145,7 @@ import '../styles/global.css';
 </Box>
 
 ### 参考
-- [Astro構文とJSXの比較](/ja/core-concepts/astro-syntax/#differences-between-astro-and-jsx)
+- [Astro構文とJSXの比較](/ja/core-concepts/astro-syntax/#astroとjsxの違い)
 
 - [Astroの`<style>`タグ](/ja/guides/styling/#astroでのスタイリング)
 

From 5850ccf90a64a5deb1e96aa0be48b0ad56d9514b Mon Sep 17 00:00:00 2001
From: Xiaoyue Lin <36526527+100gle@users.noreply.github.com>
Date: Tue, 22 Aug 2023 18:29:22 +0800
Subject: [PATCH 07/10] i18n(zh-cn): Update
 `reference/image-service-reference.mdx` (#4310)

* i18n(zh-cn): Update `reference/image-service-reference.mdx`

* chore: format content
---
 .../reference/image-service-reference.mdx     | 60 ++++++++++---------
 1 file changed, 32 insertions(+), 28 deletions(-)

diff --git a/src/content/docs/zh-cn/reference/image-service-reference.mdx b/src/content/docs/zh-cn/reference/image-service-reference.mdx
index 7ea1ffe5710b2..5286de3eac592 100644
--- a/src/content/docs/zh-cn/reference/image-service-reference.mdx
+++ b/src/content/docs/zh-cn/reference/image-service-reference.mdx
@@ -20,7 +20,7 @@ Astro 提供两种类型的图像服务：本地和外部。
 
 服务定义采用导出默认对象的形式，具有各种必需的方法（“钩子”）。
 
-外部服务提供一个 `getURL()`， 它指向输出 `＜img＞` 标记的 `src`。
+外部服务提供一个 `getURL()`，它指向输出 `＜img＞` 标记的 `src`。
 
 本地服务为开发模式和 SSR 提供 `transform()` 方法来对图像执行转换，并提供 `getURL()` 和 `parseURL()` 方法来使用端点。
 
@@ -28,13 +28,14 @@ Astro 提供两种类型的图像服务：本地和外部。
 
 ### 外部服务
 
-外部服务指向一个远程 URL，用作最终 `<img>` 标记的 `src` 属性。 该远程 URL 负责下载、转换和返回图像。
+外部服务指向一个远程 URL，用作最终 `<img>` 标记的 `src` 属性。该远程 URL 负责下载、转换和返回图像。
 
 ```js
-import type { ExternalImageService } from "astro";
+import type { ExternalImageService, ImageTransform, AstroConfig } from "astro";
 
 const service: ExternalImageService = {
-  validateOptions(options: ImageTransform, serviceConfig: Record<string, any>) {
+  validateOptions(options: ImageTransform, imageConfig: AstroConfig['image']) {
+    const serviceConfig = imageConfig.service.config;
     // 强制用户设置最大宽度。
     if (options.width > serviceConfig.maxWidth) {
       console.warn(`Image width ${options.width} exceeds max width ${serviceConfig.maxWidth}. Falling back to max width.`);
@@ -43,10 +44,10 @@ const service: ExternalImageService = {
 
     return options;
   },
-  getURL(options, serviceConfig) {
+  getURL(options, imageConfig) {
     return `https://mysupercdn.com/${options.src}?q=${options.quality}&w=${options.width}&h=${options.height}`;
   },
-  getHTMLAttributes(options, serviceConfig) {
+  getHTMLAttributes(options, imageConfig) {
     const { src, format, quality, ...attributes } = options;
 		return {
 			...attributes,
@@ -65,9 +66,10 @@ export default service;
 要创建自己的本地服务，可以指向[内置端点](https://github.com/withastro/astro/blob/main/packages/astro/src/assets/image-endpoint.ts)（`/_image`），或者你还可以创建自己的端点来调用服务的方法。
 
 ```js
-import type { LocalImageService } from "astro";
+import type { LocalImageService, AstroConfig } from "astro";
+
 const service: LocalImageService = {
-  getURL(options: ImageTransform, serviceConfig: Record<string, any>) {
+  getURL(options: ImageTransform, imageConfig: AstroConfig['image']) {
     const searchParams = new URLSearchParams();
 		searchParams.append('href', typeof options.src === "string" ? options.src : options.src.src);
 		options.width && searchParams.append('w', options.width.toString());
@@ -78,7 +80,7 @@ const service: LocalImageService = {
     // 或者使用内置端点，它将调用你的 parseURL 和 transform 函数：
     // return `/_image?${searchParams}`;
   },
-  parseURL(url: URL, serviceConfig) {
+  parseURL(url: URL, imageConfig) {
     return {
       src: params.get('href')!,
       width: params.has('w') ? parseInt(params.get('w')!) : undefined,
@@ -87,14 +89,14 @@ const service: LocalImageService = {
       quality: params.get('q'),
     };
   },
-  transform(buffer: Buffer, options: { src: string, [key: string]: any }, serviceConfig): { data: Buffer, format: OutputFormat } {
+  transform(buffer: Buffer, options: { src: string, [key: string]: any }, imageConfig): { data: Buffer, format: OutputFormat } {
     const { buffer } = mySuperLibraryThatEncodesImages(options);
     return {
       data: buffer,
       format: options.format,
     };
   },
-  getHTMLAttributes(options, serviceConfig) {
+  getHTMLAttributes(options, imageConfig) {
 		let targetWidth = options.width;
 		let targetHeight = options.height;
 		if (typeof options.src === "object") {
@@ -121,24 +123,26 @@ const service: LocalImageService = {
 export default service;
 ```
 
-在构建静态站点和预渲染路由时，`<Image />` 和 `getImage(options)` 都会调用 `transform()` 函数。 它们分别通过组件属性或 `options` 参数传递选项。 转换后的图像将构建到 `dist/_astro` 文件夹中。
+在构建静态站点和预渲染路由时，`<Image />` 和 `getImage(options)` 都会调用 `transform()` 函数。它们分别通过组件属性或 `options` 参数传递选项。转换后的图像将构建到 `dist/_astro` 文件夹中。
 
-在开发模式和SSR模式下， Astro 并不提前知道哪些图像需要优化。 Astro 使用 GET 端点（默认情况下为 `/_image` ）在运行时处理图像。 `<Image />` 和 `getImage()` 将它们的选项传递给 `getURL()`，后者将返回端点 URL。 然后，端点调用 `parseURL()` 并将结果属性传递给 `transform()`。
+在开发模式和 SSR 模式下，Astro 并不提前知道哪些图像需要优化。Astro 使用 GET 端点（默认情况下为 `/_image` ）在运行时处理图像。 `<Image />` 和 `getImage()` 将它们的选项传递给 `getURL()`，后者将返回端点 URL。然后，端点调用 `parseURL()` 并将结果属性传递给 `transform()`。
 
 #### getConfiguredImageService 和 imageServiceConfig
 
 如果你将自己的端点实现为 Astro 端点，则可以使用 `getConfiguredImageService` 和 `imageServiceConfig` 来调用服务的 `parseURL` 和 `transform` 方法并提供服务的配置对象。
 
+要访问图像服务配置（[`image.service.config`](/zh-cn/reference/configuration-reference/#imageservice-实验性)），你可以使用 `imageConfig.service.config`。
+
 ```ts title="src/api/my_custom_endpoint_that_transforms_images.ts"
 import type { APIRoute } from "astro";
-import { getConfiguredImageService, imageServiceConfig } from 'astro:assets';
+import { getConfiguredImageService, imageConfig } from 'astro:assets';
 
 export const get: APIRoute = async ({ request }) => {
   const imageService = await getConfiguredImageService();
 
-  const imageTransform = imageService.parseURL(new URL(request.url), imageServiceConfig);
+  const imageTransform = imageService.parseURL(new URL(request.url), imageConfig);
   // ... 从 imageTransform.src 获取图像并将其存储在 inputBuffer 中
-  const { data, format } = await imageService.transform(inputBuffer, imageTransform, imageServiceConfig);
+  const { data, format } = await imageService.transform(inputBuffer, imageTransform, imageConfig);
   return new Response(data, {
 			status: 200,
 			headers: {
@@ -158,18 +162,18 @@ export const get: APIRoute = async ({ request }) => {
 
 **本地和外部服务所需**
 
-`getURL(options: ImageTransform, imageServiceConfig: Record<string, any>): string`
+`getURL(options: ImageTransform, imageConfig: AstroConfig['image']): string`
 
-对于本地服务，该钩子返回生成图像的端点的 URL（在 SSR 和开发模式下）。 在构建期间它不可用。 `getURL()` 指向的本地端点可以调用 `parseURL()` 和 `transform()`。
+对于本地服务，该钩子返回生成图像的端点的 URL（在 SSR 和开发模式下）。在构建期间它不可用。 `getURL()` 指向的本地端点可以调用 `parseURL()` 和 `transform()`。
 
 对于外部服务，该钩子返回图像的最终 URL。
 
-对于这两种类型的服务，`options`是用户作为 `<Image />` 组件的属性或 `getImage()` 选项传递的属性。 它们属于以下类型：
+对于这两种类型的服务，`options`是用户作为 `<Image />` 组件的属性或 `getImage()` 选项传递的属性。它们属于以下类型：
 
 ```ts
 export type ImageTransform = {
     // ESM 导入的图像 | 远程/公共图像路径
-    src: ImageAsset | string;
+    src: ImageMetadata | string;
     width?: number;
     height?: number;
     quality?: ImageQuality;
@@ -184,15 +188,15 @@ export type ImageTransform = {
 
 **本地服务所需；外部服务不可用**
 
-`parseURL(url: URL, imageServiceConfig: Record<string, any>): { src: string, [key: string]: any}`
+`parseURL(url: URL, imageConfig: AstroConfig['image']): { src: string, [key: string]: any}`
 
-该钩子通过 `getURL()` 将生成的 URL 解析成一个对象，该对象具有可供 `transform` 使用的不同属性（在 SSR 和 dev 模式下）。 在构建期间它不可用。
+该钩子通过 `getURL()` 将生成的 URL 解析成一个对象，该对象具有可供 `transform` 使用的不同属性（在 SSR 和 dev 模式下）。在构建期间它不可用。
 
 ### `transform()`
 
 **仅本地服务需要；外部服务不可用**
 
-`transform(buffer: Buffer, options: { src: string, [key: string]: any }, imageServiceConfig: Record<string, any>): { data: Buffer, format: OutputFormat }`
+`transform(buffer: Buffer, options: { src: string, [key: string]: any }, imageConfig: AstroConfig['image']): { data: Buffer, format: OutputFormat }`
 
 该钩子转换并返回图像，并在构建过程中被调用以创建最终的资源文件。
 
@@ -202,23 +206,23 @@ export type ImageTransform = {
 
 **本地和外部服务可选**
 
-`getHTMLAttributes(options: ImageTransform, imageServiceConfig: Record<string, any>): Record<string, any>`
+`getHTMLAttributes(options: ImageTransform, imageConfig: AstroConfig['image']): Record<string, any>`
 
-该钩子根据用户传递的参数(`options`)返回用于将图像呈现为 HTML 的所有附加属性。
+该钩子根据用户传递的参数 (`options`) 返回用于将图像呈现为 HTML 的所有附加属性。
 
 ### `validateOptions()`
 
 **本地和外部服务可选**
 
-`validateOptions(options: ImageTransform, imageServiceConfig: Record<string, any>): ImageTransform`
+`validateOptions(options: ImageTransform, imageConfig: AstroConfig['image']): ImageTransform`
 
-该钩子允许你验证和增强用户传递的选项。 对于设置默认选项或告诉用户参数必传来说，这非常有用。
+该钩子允许你验证和增强用户传递的选项。对于设置默认选项或告诉用户参数必传来说，这非常有用。
 
 [查看 Astro 内置服务中如何使用 `validateOptions()`](https://github.com/withastro/astro/blob/af4bd5e79c0bd662d58aeb016a61950e176b0a26/packages/astro/src/assets/services/service.ts#L106) 。
 
 ## 用户配置
 
-在 `astro.config.mjs` 中配置要使用的图像服务。 配置采用以下形式：
+在 `astro.config.mjs` 中配置要使用的图像服务。配置采用以下形式：
 
 ```js title="astro.config.mjs"
 import { defineConfig } from "astro/config";

From fc6287e857559685bf5ce8230a0c3468aeb3141e Mon Sep 17 00:00:00 2001
From: LeenHawk <leenhawk@leenhawk.com>
Date: Tue, 22 Aug 2023 19:08:14 +0800
Subject: [PATCH 08/10] i18n(zh-cn): Fix some problem zh-cn translation of
 content-collections.mdx (#4287)

* Fix some problem zh-cn translation of  content-collections.mdx

some frontmatter became fronmatter are fixed

* Fix link

---------

Co-authored-by: Yan Thomas <61414485+Yan-Thomas@users.noreply.github.com>
---
 src/content/docs/zh-cn/guides/content-collections.mdx | 8 ++++----
 src/content/docs/zh-cn/guides/markdown-content.mdx    | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/content/docs/zh-cn/guides/content-collections.mdx b/src/content/docs/zh-cn/guides/content-collections.mdx
index 5d97325768afd..c4984056676cd 100644
--- a/src/content/docs/zh-cn/guides/content-collections.mdx
+++ b/src/content/docs/zh-cn/guides/content-collections.mdx
@@ -14,7 +14,7 @@ import RecipeLinks from "~/components/RecipeLinks.astro"
   <Since v="2.0.0" />
 </p>
 
-在任何 Astro 项目中，**内容集合**是使用 Markdown 和 MDX 的最佳方式。内容集合帮助管理你的文档，校验 frrontmatter，并为所有内容提供自动 TypeScript 类型安全。
+在任何 Astro 项目中，**内容集合**是使用 Markdown 和 MDX 的最佳方式。内容集合帮助管理你的文档，校验 frontmatter，并为所有内容提供自动 TypeScript 类型安全。
 
 ## 什么是内容集合?
 
@@ -536,7 +536,7 @@ const { Content } = await entry.render();
 
 2. 为内容集合[设置 TypeScript ](#设置-typescript)。
 
-3. 创建至少一个集合(`src/content/` 的文件夹中) ，并将 Markdown 和 MDX 页面从 `src/pages/` 移动到 `src/content/` 的这些子目录中。当同一集合中的所有文件具有相似的 fronmatter 属性时，集合的工作效果最好。因此，请选择新的文件夹结构以反映类似类型的页面。
+3. 创建至少一个集合(`src/content/` 的文件夹中) ，并将 Markdown 和 MDX 页面从 `src/pages/` 移动到 `src/content/` 的这些子目录中。当同一集合中的所有文件具有相似的 frontmatter 属性时，集合的工作效果最好。因此，请选择新的文件夹结构以反映类似类型的页面。
     
     例如，要迁移[教程中的博客文章](/zh-cn/tutorial/2-pages/2/) ，请将 `src/pages/post/` 的内容移动到 `src/content/posts/`。
 
@@ -608,7 +608,7 @@ const { Content } = await entry.render();
     ---
     ```
 
-7. 将 `Astro.glob()` 替换为[`getCollection()`](/zh-cn/reference/api-reference/#getcollection)以从 Markdown 文件中获取内容和元数据。还需要更新对返回的 post 对象的引用，因为你现在可以在 `data` 属性上找到 fronmatter 值。
+7. 将 `Astro.glob()` 替换为[`getCollection()`](/zh-cn/reference/api-reference/#getcollection)以从 Markdown 文件中获取内容和元数据。还需要更新对返回的 post 对象的引用，因为你现在可以在 `data` 属性上找到 frontmatter 值。
 
     教程中的博客索引页面为每篇文章列出了一张卡片，如下所示:
 
@@ -725,7 +725,7 @@ const { Content } = await entry.render();
 
 有关使用内容集合的博客教程的完整示例，请参见教程 repo 的[内容集合分支](https://github.com/withastro/blog-tutorial-demo/tree/content-collections)。
 
-## 用 Remark 修改 Fronmatter
+## 用 Remark 修改 Frontmatter
 
 :::caution
 **不推荐** Remark 和 rehyp 插件访问 _raw_ Markdown 或 MDX 文档的 frontmatter。这就意味着 `remarkPluginFrontmatter` 的 frontmatter 与类型安全的 `schema` 是分开处理的，并且不会反映通过 Astro 应用的任何更改或缺省值。使用风险自负！
diff --git a/src/content/docs/zh-cn/guides/markdown-content.mdx b/src/content/docs/zh-cn/guides/markdown-content.mdx
index 6d571ce38cd79..ca1ba5f9c2db9 100644
--- a/src/content/docs/zh-cn/guides/markdown-content.mdx
+++ b/src/content/docs/zh-cn/guides/markdown-content.mdx
@@ -516,7 +516,7 @@ export default {
 ### 以编程方式修改 frontmatter
 
 :::note
-如果你使用的是 [内容集合](/zh-cn/guides/content-collections/)，请参阅[“使用 Remark 修改 Frontmatter”](/zh-cn/guides/content-collections/#用-remark-修改-fronmatter)。
+如果你使用的是 [内容集合](/zh-cn/guides/content-collections/)，请参阅[“使用 Remark 修改 Frontmatter”](/zh-cn/guides/content-collections/#用-remark-修改-frontmatter)。
 :::
 
 你可以通过使用 [remark 或 rehype 插件](#markdown-插件) 为所有 Markdown 和 MDX 文件添加 frontmatter 属性。

From 1207c2c7d532b7198b79d4fbde03ba4ef80f78d7 Mon Sep 17 00:00:00 2001
From: Paul Valladares <85648028+dreyfus92@users.noreply.github.com>
Date: Tue, 22 Aug 2023 05:21:48 -0600
Subject: [PATCH 09/10] i18n(es): updated image-service-reference (#4301)

Co-authored-by: Yan Thomas <61414485+Yan-Thomas@users.noreply.github.com>
---
 .../es/reference/image-service-reference.mdx  | 44 ++++++++++---------
 1 file changed, 24 insertions(+), 20 deletions(-)

diff --git a/src/content/docs/es/reference/image-service-reference.mdx b/src/content/docs/es/reference/image-service-reference.mdx
index 97eb465df3093..edf99810fceb1 100644
--- a/src/content/docs/es/reference/image-service-reference.mdx
+++ b/src/content/docs/es/reference/image-service-reference.mdx
@@ -31,10 +31,11 @@ Ambos tipos de serivicios pueden proporcionar `getHTMLAttributes()` para determi
 Un servicio externo apunta a una URL remota para ser usada como el atributo `src` de la etiqueta `<img>`. Esta URL remota es responsable de descargar, transformar y devolver la imagen.
 
 ```js
-import type { ExternalImageService } from "astro";
+import type { ExternalImageService, ImageTransform, AstroConfig } from "astro";
 
 const service: ExternalImageService = {
-  validateOptions(options: ImageTransform, serviceConfig: Record<string, any>) {
+  validateOptions(options: ImageTransform, imageConfig: AstroConfig['image']) {
+    const serviceConfig = imageConfig.service.config;
     // Aplica el ancho máximo establecido por el usuario.
     if (options.width > serviceConfig.maxWidth) {
       console.warn(`El ancho de la imagen ${options.width} excede el ancho máximo ${serviceConfig.maxWidth}. Se utilizará el ancho máximo como alternativa.`);
@@ -43,10 +44,10 @@ const service: ExternalImageService = {
 
     return options;
   },
-  getURL(options, serviceConfig) {
+  getURL(options, imageConfig) {
     return `https://mysupercdn.com/${options.src}?q=${options.quality}&w=${options.width}&h=${options.height}`;
   },
-  getHTMLAttributes(options, serviceConfig) {
+  getHTMLAttributes(options, imageConfig) {
     const { src, format, quality, ...attributes } = options;
 		return {
 			...attributes,
@@ -65,9 +66,10 @@ export default service;
 Para crear tu propio servicio local, puedes apuntar al [endpoint integrado](https://github.com/withastro/astro/blob/main/packages/astro/src/assets/image-endpoint.ts) (`/_image`) o puedes crear tu propio endpoint que pueda llamar a los métodos del servicio.
 
 ```js
-import type { LocalImageService } from "astro";
+import type { LocalImageService, AstroConfig } from "astro";
+
 const service: LocalImageService = {
-  getURL(options: ImageTransform, serviceConfig: Record<string, any>) {
+  getURL(options: ImageTransform, imageConfig: AstroConfig['image']) {
     const searchParams = new URLSearchParams();
 		searchParams.append('href', typeof options.src === "string" ? options.src : options.src.src);
 		options.width && searchParams.append('w', options.width.toString());
@@ -78,7 +80,7 @@ const service: LocalImageService = {
     // O usa el endpoint integrado, el cual llamará a tus funciones parseURL y transform:
     // return `/_image?${searchParams}`;
   },
-  parseURL(url: URL, serviceConfig) {
+  parseURL(url: URL, imageConfig) {
     return {
       src: params.get('href')!,
       width: params.has('w') ? parseInt(params.get('w')!) : undefined,
@@ -87,14 +89,14 @@ const service: LocalImageService = {
       quality: params.get('q'),
     };
   },
-  transform(buffer: Buffer, options: { src: string, [key: string]: any }, serviceConfig): { data: Buffer, format: OutputFormat } {
+  transform(buffer: Buffer, options: { src: string, [key: string]: any }, imageConfig): { data: Buffer, format: OutputFormat } {
     const { buffer } = mySuperLibraryThatEncodesImages(options);
     return {
       data: buffer,
       format: options.format,
     };
   },
-  getHTMLAttributes(options, serviceConfig) {
+  getHTMLAttributes(options, imageConfig) {
 		let targetWidth = options.width;
 		let targetHeight = options.height;
 		if (typeof options.src === "object") {
@@ -125,20 +127,22 @@ En el tiempo de compilación para sitios estáticos y rutas pre-renderizadas, ta
 
 En el modo de desarrollo y el modo SSR, Astro no sabe de antemano qué imágenes deben ser optimizadas. Astro usa un endpoint GET (por defecto, `/_image`) para procesar las imágenes en tiempo de ejecución. `<Image />` y `getImage()` pasan sus opciones a `getURL()`, que devolverá la URL del endpoint. Luego, el endpoint llama a `parseURL()` y pasa las propiedades resultantes a `transform()`.
 
-#### getConfiguredImageService y imageServiceConfig
+#### getConfiguredImageService & imageConfig
+
+Si implementas tu propio endpoint como un endpoint de Astro, puedes usar `getConfiguredImageService` y `imageConfg` para llamar a los métodos `parseURL` y `transform` de tu servicio y proporcionar la configuración de la imagen.
 
-Si implementas tu propio endpoint como un endpoint de Astro, puedes usar `getConfiguredImageService` y `imageServiceConfig` para llamar a los métodos `parseURL` y `transform` de tu servicio y proporcionar el objeto de configuración del servicio.
+Para acceder a la configuración del servicio de imágenes ([`image.service.config`](/es/reference/configuration-reference/#imageservice-experimental)), puedes usar `imageConfig.service.config`.
 
 ```ts title="src/api/my_custom_endpoint_that_transforms_images.ts"
 import type { APIRoute } from "astro";
-import { getConfiguredImageService, imageServiceConfig } from 'astro:assets';
+import { getConfiguredImageService, imageConfig } from 'astro:assets';
 
 export const get: APIRoute = async ({ request }) => {
   const imageService = await getConfiguredImageService();
 
-  const imageTransform = imageService.parseURL(new URL(request.url), imageServiceConfig);
+  const imageTransform = imageService.parseURL(new URL(request.url), imageConfig);
   // ... busca la imagen de imageTransform.src y guárdala en inputBuffer
-  const { data, format } = await imageService.transform(inputBuffer, imageTransform, imageServiceConfig);
+  const { data, format } = await imageService.transform(inputBuffer, imageTransform, imageConfig);  
   return new Response(data, {
 			status: 200,
 			headers: {
@@ -158,7 +162,7 @@ export const get: APIRoute = async ({ request }) => {
 
 **Requerido para servicios locales y externos**
 
-`getURL(options: ImageTransform, imageServiceConfig: Record<string, any>): string`
+`getURL(options: ImageTransform, imageConfig: AstroConfig['image']): string`
 
 Para servicios locales, este hook devuelve la URL del endpoint que genera tu imagen (en SSR y modo de desarrollo). No se usa durante la compilación. El endpoint local al que apunta `getURL()` puede llamar tanto a `parseURL()` como a `transform()`.
 
@@ -169,7 +173,7 @@ Para ambos tipos de servicios, `options` son las propiedades pasadas por el usua
 ```ts
 export type ImageTransform = {
     // Imágenes importadas ESM | rutas de imágenes remotas/públicas
-    src: ImageAsset | string;
+    src: ImageMetadata | string;
     width?: number;
     height?: number;
     quality?: ImageQuality;
@@ -184,7 +188,7 @@ export type ImageTransform = {
 
 **Requerido para servicios locales; no disponible para servicios externos**
 
-`parseURL(url: URL, imageServiceConfig: Record<string, any>): { src: string, [key: string]: any}`
+`parseURL(url: URL, imageConfig: AstroConfig['image']): { src: string, [key: string]: any}`
 
 Este hook analiza las URL generadas por `getURL()` en un objeto con las diferentes propiedades que se utilizarán en `transform` (en SSR y modo de desarrollo). No se usa durante la compilación.
 
@@ -192,7 +196,7 @@ Este hook analiza las URL generadas por `getURL()` en un objeto con las diferent
 
 **Requerido para servicios locales; no disponible para servicios externos**
 
-`transform(buffer: Buffer, options: { src: string, [key: string]: any }, imageServiceConfig: Record<string, any>): { data: Buffer, format: OutputFormat }`
+`transform(buffer: Buffer, options: { src: string, [key: string]: any }, imageConfig: AstroConfig['image']): { data: Buffer, format: OutputFormat }`
 
 Este hook transforma y devuelve la imagen y se llama durante la compilación para crear los archivos de activos finales.
 
@@ -202,7 +206,7 @@ Debes devolver un `format` para asegurarte de que se sirve el tipo MIME adecuado
 
 **Opcional para ambos servicios locales y externos**
 
-`getHTMLAttributes(options: ImageTransform, imageServiceConfig: Record<string, any>): Record<string, any>`
+`getHTMLAttributes(options: ImageTransform, imageConfig: AstroConfig['image']): Record<string, any>`
 
 Este hook devuelve todos los atributos adicionales utilizados para renderizar la imagen como HTML, basados en los parámetros pasados por el usuario (`options`).
 
@@ -210,7 +214,7 @@ Este hook devuelve todos los atributos adicionales utilizados para renderizar la
 
 **Opcional para ambos servicios locales y externos**
 
-`validateOptions(options: ImageTransform, imageServiceConfig: Record<string, any>): ImageTransform`
+`validateOptions(options: ImageTransform, imageConfig: AstroConfig['image']): ImageTransform`
 
 Este hook te permite validar y aumentar las opciones pasadas por el usuario. Esto es útil para establecer opciones predeterminadas, o para decirle al usuario que un parámetro es obligatorio.
 

From 6632d2619c362f8e9d1d64fe50ed38ec0268ce35 Mon Sep 17 00:00:00 2001
From: Luiz Ferraz <luiz@lferraz.com>
Date: Tue, 22 Aug 2023 08:39:19 -0300
Subject: [PATCH 10/10] i18n(pt-BR): Add new `guides/view-transition.mdx`
 translation (#4293)

* i18n(pt-BR): Add new `guides/view-transition.mdx` translation

* Apply review changes

* Remove english text

* Add missing `nav.ts` entry

---------

Co-authored-by: Yan Thomas <61414485+Yan-Thomas@users.noreply.github.com>
---
 .../docs/pt-br/guides/view-transitions.mdx    | 307 ++++++++++++++++++
 src/i18n/pt-br/nav.ts                         |   1 +
 2 files changed, 308 insertions(+)
 create mode 100644 src/content/docs/pt-br/guides/view-transitions.mdx

diff --git a/src/content/docs/pt-br/guides/view-transitions.mdx b/src/content/docs/pt-br/guides/view-transitions.mdx
new file mode 100644
index 0000000000000..ebc430e845194
--- /dev/null
+++ b/src/content/docs/pt-br/guides/view-transitions.mdx
@@ -0,0 +1,307 @@
+---
+title: Transições de visualização (Experimental)
+description: >-
+  Como habilitar o suporte experimental para transições de visualização no seu site Astro.
+i18nReady: true
+---
+
+import Since from '~/components/Since.astro'
+
+Suporte para **transições de visualização, opcionais, por página** em projetos Astro pode ser habilitado com uma flag experimental. Transições de visualização atualizam o conteúdo de sua página sem a atualização normal, atualizando a página inteira, do navegador e oferece animações suaves entre páginas.
+
+Astro oferece um componente de roteamento `<ViewTransitions />` que pode ser adicionado ao `<head>` de uma página para controlar as transições de página conforme você navega para outras páginas, um efeito tradicionalmente possível apenas com roteamento no lado do cliente. Adicione esse componente em um componente `.astro` reutilizável, como um cabeçalho ou layout em comum, para ter transições de página animadas através de todo o seu site (modo SPA).
+
+O suporte para transições de visualização do Astro é possível graças à nova API de [Transições de Visualização](https://developer.chrome.com/docs/web-platform/view-transitions/) do navegador e também inclui:
+
+- Algumas [animações integradas](#diretivas-de-animação-integradas), como `slide` e `fade`.
+- Suporte a animações de navegação tanto avançando quanto retornando.
+- A habilidade de [customizar completamente todos os aspectos da animação de transição](#customizando-animações), e construir suas próprias animações.
+- [Controle sobre o comportamento de fallback](#controle-de-fallback) para navegadores que ainda não suportam as APIs de Transição de Visualização.
+
+:::caution
+Transicões de visualização é uma funcionalidade experimental habilitada no Astro 2.9. A API está sujeita a alterações enquanto não for marcada como estável.
+:::
+
+## Habilitando Transições de Visualização em seu Projeto
+
+Você pode habilitar o suporte para transições de página animadas através da flag experimental `viewTransitions` em sua configuração Astro:
+
+```js title="astro.config.mjs" ins={4-6}
+import { defineConfig } from 'astro/config';
+
+export default defineConfig({
+  experimental: {
+   viewTransitions: true
+  }
+});
+```
+
+:::note
+Habilitar o suporte à transições de visualização não converte automaticamente seu site inteiro em uma SPA (Aplicação de Página Única). Por padrão, todas as página ainda usarão a navegação normal do navegador, de página inteira.
+
+Adicione transição de página no Astro utilizando o componente de roteamente `<ViewTransitions />` individualmente por página, ou em todo o site.
+:::
+
+## Transições de visualização em todo o site (modo SPA)
+
+Importe e adicione o componente `<ViewTransitions />` em seu `<head>` comum ou componente de layout. Astro criará animações padrões baseado nas similaridades entre a página antiga e a nova e também oferecerá um comportamento de fallback para navegadores sem suporte.
+
+O exemplo abaixo mostra como adicionar trasições de visualização em todo o site importando e adicionando esse componente em um componente Astro `<HeadComum />`:
+
+```astro title="components/HeadComum.astro" ins={2,12}
+---
+import { ViewTransitions } from 'astro:transitions';
+---
+<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+<meta name="generator" content={Astro.generator} />
+
+<!-- Meta Tags Primárias -->
+<title>{title}</title>
+<meta name="title" content={titulo} />
+<meta name="description" content={descricao} />
+
+<ViewTransitions />
+```
+
+Você pode também adicionar transições de visualização em páginas individualmente. Importe o componente `<ViewTransitions />` e coloque ele diretamente dentro do `<head>` da página.
+
+## Diretivas de transição
+
+Astro atribuirá automaticamente a elementos correspondentes encontrados em ambas as páginas antiga e nova um `view-transition-name` compartilhado e único. Esse par de elementos associados é inferido tanto pelo tipo do elemento quanto por sua localização no DOM.
+
+Use diretivas `transition:*` opcionais em elementos da página em seus componentes `.astro` para exercer um controle fino sobre o comportamento da transição de página durante a navegação.
+
+- `transition:name`: Permite que você sobrescreva a associação de elementos padrão do Astro para animação de conteúdo antigo/novo e [especifica um nome de transição](#nomeando-uma-transição) para associar um par de elementos do DOM.
+- `transition:animate`: Permite que você sobrescreva a animação padrão do Astro ao substituir o elemento antigo pelo elemento novo especificando um tipo de animação. Use as [diretivas de animação integradas](#diretivas-de-animação-integradas) do Astro ou [crie animações de transição customizadas](#customizando-animações).
+- `transition:persist`: Permite que você sobrescreva o padrão do Astro de substituir elementos antigos por novos e [persista componentes e elementos HTML](#mantendo-estado) ao navegar para outra página.
+
+## Nomeando uma transição
+
+Em alguns casos, você pode querer ou precisar identificar os elementos correspondentes em uma transição por conta própria. Você pode especificar um nome para um par de elementos utilizando a diretiva `transition:name`.
+
+```astro title="pagina-antiga.astro"
+<aside transition:name="hero">
+```
+
+```astro title="pagina-nova.astro"
+<aside transition:name="hero">
+```
+
+Note que o nome em `transition:name` só pode ser utilizado uma vez em cada página. Defina esse valor manualmente quando Astro não conseguir inferir um nome apropriado sozinho, or para ter um controle mais fino sobre os os elementos associados.
+
+## Mantendo estado
+
+<Since v="2.10.0" />
+
+Você pode persistir componentes e elementos HTML (ao invés de substituí-los) entre navegações de páginas utilizando a diretiva `transition:persist`.
+
+Por exemplo, o `<video>` abaixo continuará executando conforme você navega para outra página que contém o mesmo elemento `video`. Isso funciona tanto ao navegar para frente ou para trás.
+
+```astro title="components/Video.astro" "transition:persist"
+<video controls="" autoplay="" transition:persist>
+	<source src="https://ia804502.us.archive.org/33/items/GoldenGa1939_3/GoldenGa1939_3_512kb.mp4" type="video/mp4">
+</video>
+```
+
+Você pode também colocar essa diretiva em uma [Ilha Astro](/pt-br/concepts/islands/) (um componente de framework de UI com uma [diretiva `client:`](/pt-br/reference/directives-reference/#diretivas-de-cliente)). Se esse componente existir na página seguinte, a ilha da página antiga **com o estado atual** continuará a ser exibida ao invés de substituí-la com a ilha da nova página.
+
+No exemplo abaixo, a `contagem` não será reiniciada ao navegar entre de páginas que contém o componente `<Contador />` com o atributo `transition:persist`.
+
+```astro title="components/Cabecalho.astro" "transition:persist"
+<Contador client:load transition:persist contagem={5} />
+```
+
+Você também pode [identificar manualmente os elementos correspondentes](#nomeando-uma-transição) se a ilha/elemento estiver em um componente diferente entre as duas páginas.
+
+```astro title="pages/pagina-antiga.astro" "Video" 'transition:name="media-player"'
+<Video controls="" autoplay="" transition:name="media-player" transition:persist />
+```
+
+```astro title="pages/pagina-nova.astro" "MeuVideo" 'transition:name="media-player"'
+<MeuVideo controls="" autoplay="" transition:name="media-player" transition:persist />
+```
+
+Como um atalho para conveniência, `transition:persist` pode, de forma alternativa, receber o nome da transição como valor.
+
+```astro title="pages/index.astro" '="media-player"'
+<video controls="" autoplay="" transition:persist="media-player">
+```
+
+## Diretivas de Animação Integradas
+
+Astro inclui algumas animações integradas para sobrescrever a transição padrão `morph`. Adicione a diretiva `transition:animate` para experimentar as transições `slide` ou `fade` do Astro.
+
+- `morph` (padrão): O navegador determina a melhor maneira de animar o elemento dependendo de quão similar as páginas são. Por exemplo, se o elemento está posicionado de forma diferente entre as páginas, ele vai parecer flutuar até a sua nova posição. Se o elemento está na exata mesma posição, ele vai parecer não se mover.
+- `slide`: Uma animação em que o conteúdo antigo desliza para fora da tela à esquerda e o novo conteúdo entra deslizando pela direita. Ao navegar para trás, as animações são invertidas.
+- `fade`: Um esmaecimento cruzado (cross-fade) em que o conteúdo antigo desaparece o conteúdo novo aparece gradualmente.
+
+O exemplo abaixo produz uma animação de deslizar para o conteúdo do corpo enquanto mantém o cabeçalho posicionado de forma idêntica no lugar:
+
+```astro
+---
+import { HeadComum } from '../components/HeadComum.astro';
+---
+<html>
+  <head>
+    <HeadComum />
+  </head>
+  <body>
+    <header> // utiliza transition:animate="morph" por padrão
+      ...
+    </header>
+    <main transition:animate="slide">
+      ...
+    </main>
+  </body>
+</html>
+```
+
+## Customizando Animações
+
+Você pode customizar todos os aspectos de uma transição utilizando qualquer propriedade de animação do CSS.
+
+Para customizar uma animação integrada, primeiro importe a animação de `astro:transitions`, e então passe opções de customização.
+
+O exemplo abaixo customiza a duração da animação integrada `fade`:
+
+```astro
+---
+import { fade } from 'astro:transitions';
+---
+
+<header transition:animate={fade({ duration: '0.4s' })}>
+```
+
+Você também pode definir suas próprias animações para utilizar com `transition:animate` definindo tanto o comportamento para frente quanto para trás, e também as páginas antiga e nova, de acordo com os seguintes tipos:
+
+```ts
+export interface TransitionAnimation {
+  name: string; // O nome do keyframe.
+  delay?: number | string;
+  duration?: number | string;
+  easing?: string;
+	fillMode?: string;
+	direction?: string;
+}
+
+export interface TransitionAnimationPair {
+	old: TransitionAnimation | TransitionAnimation[];
+	new: TransitionAnimation | TransitionAnimation[];
+}
+
+export interface TransitionDirectionalAnimations {
+	forwards: TransitionAnimationPair;
+	backwards: TransitionAnimationPair;
+}
+```
+
+O exemplo abaixo demonstra todas as propriedades necessárias para definir uma animação `fade` customizada:
+
+```astro
+---
+const anim = {
+  old: {
+    name: 'fadeIn',
+    duration: '0.2s',
+    easing: 'linear',
+    fillMode: 'forwards',
+  },
+  new: {
+    name: 'fadeOut',
+    duration: '0.3s',
+    easing: 'linear',
+    fillMode: 'backwards',
+  }
+};
+
+const meuFade = {
+	forwards: anim,
+	backwards: anim,
+};
+---
+
+<header transition:animate={meuFade}> ... </header>
+```
+
+## Controle de fallback
+
+O roteamento de `<ViewTransitions />` funciona melhor em navegadores que suportam Transições de Animação (ex.: Navegadores baseado no Chromium), mas também inclui um fallback padrão para suportar outros navegadores. Mesmo se o navegador não suportar a API de Transições de Visualização, Astro ainda proverá navegação dentro do navegador utilizando uma das opções de fallback para uma experiência comparável.
+
+Você pode sobrescrever o suporte a fallback padrão do Astro adicionando a propriedade `fallback` no componente `<ViewTransitions />` e configure ela para `swap` ou `none`:
+
+- `animate` (padrão, recomendado): Astro vai simular transições de visualização utilizando atributos customizados antes de atualizar o conteúdo da página.
+- `swap`: Astro não vai tentar animar a página. Ao invés disso, a página antiga será imediatamente substituída pela página nova.
+- `none`: Astro não executará nenhuma transições de páginas animadas. Ao invés disso, você verá navegação de página inteira em navegadores sem suporte.
+
+```astro
+---
+import { ViewTransitions } from 'astro:transitions';
+---
+<title>Meu site</title>
+
+<ViewTransitions fallback="swap">
+```
+
+:::note[limitações conhecidas]
+A animação `morph` não pode ser simulada com CSS tradicional. Portanto qualquer elemento utilizando essa animação não será animada.
+:::
+
+## Comportamento de scripts durante a navegação de páginas
+
+Ao navegar entre páginas com o componente `<ViewTransitions />`, scripts são executados em ordem sequencial para igualar o comportamento do navegador.
+
+Se você tem algum código que escreva um estado global, esse estado precisará levar em consideração que o script pode executar mais de uma vez. Confira o uso de estado global dentro das suas tags `<script>`, e execute seu código condicionalmente quando possível:
+
+```astro
+<script is:inline>
+  if(!window.AlgoGlobal) {
+    window.AlgoGlobal = {} // ....
+  }
+</script>
+```
+
+Scripts de módulos são executados uma única vez devido ao navegador manter um registro de quais módulos já foram carregados. Para esses scripts, você não precisa se preocupar com re-execução.
+
+### `astro:load`
+
+Um evento disparado ao final de uma navegação de página, depois da página nova estar visível para o usuário e estilos e scripts bloqueantes forem carregados. Você pode ouvir esse evento no `document`.
+
+O componente `<ViewTransitions />` emite esse evento tanto na navegação de página inicial (MPA) e em navegações subsequentes, tanto para frente quanto para trás.
+
+Você pode utilizar esse evento para executar código em cada navegação de página, ou uma única vez:
+
+```astro "{ once: true }"
+<script>
+  document.addEventListener('astro:load', () => {
+    // Isso é executado uma única vez
+    setupStuff();
+  }, { once: true });
+</script>
+```
+
+### `astro:beforeload`
+
+Um evento disparado imediatamente após a nova página substituir a página antiga. Você pode ouvir esse evento no `document`.
+
+Esse evento é útil para restaurar qualquer estado no DOM que precise ser transferido para a nova página.
+
+Por exemplo, se você estiver implementando suporte a modo escuro, esse evento pode ser usado para restaurar o estado entre carregamentos de páginas:
+
+```astro
+<script>
+	const definirModoEscuro = () => {
+		if (localStorage.modoEscuro) {
+			document.documentElement.dataset.escuro = '';
+		}
+	};
+
+  // Executa na navegação inicial
+	definirModoEscuro();
+  // Executa em cada transição de navegação
+	document.addEventListener('astro:beforeload', definirModoEscuro);
+</script>
+```
+
+## `prefers-reduced-motion`
+
+O componente `<ViewTransitions />` do Astro inclui uma media query do CSS que desabilita *todas* as animações de transição de visualização, incluindo animação de fallback, sempre que a configuração [`prefer-reduced-motion`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) for detectada. Ao invés disso, o navegador simplesmente substituirá os elementos do DOM sem qualquer animação.
diff --git a/src/i18n/pt-br/nav.ts b/src/i18n/pt-br/nav.ts
index 42ae83011bada..194c199dacc5c 100644
--- a/src/i18n/pt-br/nav.ts
+++ b/src/i18n/pt-br/nav.ts
@@ -39,6 +39,7 @@ export default NavDictionary({
 	'guides/images': 'Imagens',
 	// 'guides/fonts': 'Fontes',
 	'guides/testing': 'Testes',
+	'guides/view-transitions': 'Transições de Visualização (Experimental)',
 	'guides/client-side-scripts': 'Scripts & Manipulação de Eventos',
 	configuration: 'Configuração',
 	'guides/configuring-astro': 'O Arquivo de Configuração Astro',