merging all conflicts

src/components/Layout/Feedback.tsx

@@ -45,13 +45,15 @@ const thumbsDownIcon = (
 );
 
 function sendGAEvent(isPositive: boolean) {
+  const category = isPositive ? 'like_button' : 'dislike_button';
+  const value = isPositive ? 1 : 0;
   // Fragile. Don't change unless you've tested the network payload
   // and verified that the right events actually show up in GA.
   // @ts-ignore
   gtag('event', 'feedback', {
-    event_category: 'button',
+    event_category: category,
     event_label: window.location.pathname,
-    value: isPositive ? 1 : 0,
+    event_value: value,
   });
 }
 

src/components/Layout/Sidebar/SidebarLink.tsx

@@ -77,7 +77,7 @@ export function SidebarLink({
         {title}{' '}
         {canary && (
           <IconCanary
-            title="This feature is available in the latest Canary"
+            title=" - This feature is available in the latest Canary"
             className="ms-2 text-gray-30 dark:text-gray-60 inline-block w-4 h-4 align-[-3px]"
           />
         )}

src/components/MDX/MDXComponents.tsx

@@ -243,7 +243,7 @@ function Illustration({
           src={src}
           alt={alt}
           style={{maxHeight: 300}}
-          className="bg-white rounded-lg"
+          className="rounded-lg"
         />
         {caption ? (
           <figcaption className="text-center leading-tight mt-4">
@@ -275,7 +275,12 @@ function IllustrationBlock({
   const images = imageInfos.map((info, index) => (
     <figure key={index}>
       <div className="bg-white rounded-lg p-4 flex-1 flex xl:p-6 justify-center items-center my-4">
-        <img src={info.src} alt={info.alt} height={info.height} />
+        <img
+          className="text-primary"
+          src={info.src}
+          alt={info.alt}
+          height={info.height}
+        />
       </div>
       {info.caption ? (
         <figcaption className="text-secondary dark:text-secondary-dark text-center leading-tight mt-4">

src/components/PageHeading.tsx

@@ -34,7 +34,7 @@ function PageHeading({
           {title}
           {canary && (
             <IconCanary
-              title="This feature is available in the latest Canary"
+              title=" - This feature is available in the latest Canary"
               className="ms-4 mt-1 text-gray-50 dark:text-gray-40 inline-block w-6 h-6 align-[-1px]"
             />
           )}

src/content/blog/2022/03/08/react-18-upgrade-guide.md

@@ -224,8 +224,13 @@ function handleClick() {
 
 React 18 ワーキンググループでライブラリメンテナと共同で作業を行い、スタイルや外部ストアといった分野に特有のユースケースで並行レンダー機能をサポートするため、新しい API を作成しました。一部のライブラリは、React 18 をサポートするために以下の API に切り替える必要があるかもしれません：
 
+<<<<<<< HEAD
 * `useSyncExternalStore` は、ストアへの更新を強制的に同期的に行うことで、並行読み取りを外部ストアがサポートできるようにするための新たなフックです。この新しい API は React 外部の状態を扱うあらゆるライブラリにとって推奨されるものです。詳細は [useSyncExternalStore 概要](https://github.com/reactwg/react-18/discussions/70)および [useSyncExternalStore API 詳細](https://github.com/reactwg/react-18/discussions/86)を参照してください。
 * `useInsertionEffect` は、CSS-in-JS ライブラリがレンダー時にスタイルを注入する際のパフォーマンス上の問題に対処できるようにするための新しいフックです。すでに CSS-in-JS ライブラリを構築しているのでなければ、これを使うことはまずないでしょう。このフックは、DOM が書き換えられた後、レイアウト副作用 (layout effect) が新しいレイアウトを読み込む前に実行されます。これにより React 17 およびそれ以前から既に存在した問題が解決されますが、React 18 では並行レンダー中にブラウザに処理が渡り、そこでレイアウトが再計算される可能性があるため、より重要です。詳細は [Library Upgrade Guide for `<style>`](https://github.com/reactwg/react-18/discussions/110) を参照してください。
+=======
+* `useSyncExternalStore` is a new Hook that allows external stores to support concurrent reads by forcing updates to the store to be synchronous. This new API is recommended for any library that integrates with state external to React. For more information, see the [useSyncExternalStore overview post](https://github.com/reactwg/react-18/discussions/70) and [useSyncExternalStore API details](https://github.com/reactwg/react-18/discussions/86).
+* `useInsertionEffect` is a new Hook that allows CSS-in-JS libraries to address performance issues of injecting styles in render. Unless you've already built a CSS-in-JS library we don't expect you to ever use this. This Hook will run after the DOM is mutated, but before layout effects read the new layout. This solves an issue that already exists in React 17 and below, but is even more important in React 18 because React yields to the browser during concurrent rendering, giving it a chance to recalculate layout. For more information, see the [Library Upgrade Guide for `<style>`](https://github.com/reactwg/react-18/discussions/110).
+>>>>>>> 4f9e9a56611c7a56b9506cf0a7ca84ab409824bc
 
 React 18 では `startTransition`、`useDeferredValue` や `useId` のような新しい API も導入しており、[リリース告知記事](/blog/2022/03/29/react-v18)にて詳細をお伝えします。
 

src/content/blog/2022/03/29/react-v18.md

@@ -139,8 +139,13 @@ startTransition(() => {
 startTransition でラップした更新は緊急性の低いものとして扱われ、クリックやキー押下のような緊急性の高い更新がやってきた場合には中断されます。トランジションがユーザによって中断された場合（例えば素早く複数のタイプが起こった場合）、React は完了しないままに古くなったレンダーを破棄して、最後の更新のみレンダーします。
 
 
+<<<<<<< HEAD
 * `useTransition`: トランジションを開始するためのフックであり、保留中かどうかの状態を追跡するための値も含まれます。
 * `startTransition`: フックが使えない場合にトランジションを開始するためのメソッドです。
+=======
+* `useTransition`: a Hook to start transitions, including a value to track the pending state.
+* `startTransition`: a method to start transitions when the Hook cannot be used.
+>>>>>>> 4f9e9a56611c7a56b9506cf0a7ca84ab409824bc
 
 トランジションを使うと並行レンダー機能にオプトインし、更新が中断可能になります。また、コンテンツが再サスペンドした場合、バックグラウンドでトランジション中のコンテンツをレンダーしつつ、現在のコンテンツを表示し続けるよう React に伝えます（詳細については [サスペンス RFC](https://github.com/reactjs/rfcs/blob/main/text/0213-suspense-in-react-18.md) を参照）。
 
@@ -229,7 +234,11 @@ React 18 の strict モードでは、開発時にコンポーネントがマウ
 
 #### useId {/*useid*/}
 
+<<<<<<< HEAD
 `useId` はハイドレーション時の不整合を防ぎつつクライアントとサーバで一意な ID を生成するためのフックです。これは主に、一意な ID を必要とするアクセシビリティ API を組み込むようなコンポーネントライブラリで有用なものです。これにより React 17 およびそれ以前から既に存在した問題が解決されますが、React 18 では新しいストリーミング対応のサーバレンダラが HTML を順番通りに送信しなくなるため、この問題はより重要です。[こちらのドキュメントを参照](/docs/hooks-reference.html#useid)。
+=======
+`useId` is a new Hook for generating unique IDs on both the client and server, while avoiding hydration mismatches. It is primarily useful for component libraries integrating with accessibility APIs that require unique IDs. This solves an issue that already exists in React 17 and below, but it's even more important in React 18 because of how the new streaming server renderer delivers HTML out-of-order. [See docs here](/reference/react/useId).
+>>>>>>> 4f9e9a56611c7a56b9506cf0a7ca84ab409824bc
 
 > 補足
 >
@@ -245,15 +254,23 @@ React 18 の strict モードでは、開発時にコンポーネントがマウ
 
 #### useSyncExternalStore {/*usesyncexternalstore*/}
 
+<<<<<<< HEAD
 `useSyncExternalStore` は、外部ストアへの更新を強制的に同期的に行うことで、外部ストアが並行読み取りを行えるようにします。これにより外部のデータソースに購読する際に `useEffect` を使う必要性がなくなるので、React 外部の状態を扱うあらゆるライブラリにとって推奨されるものです。[こちらのドキュメントを参照](/reference/react/useSyncExternalStore)。
+=======
+`useSyncExternalStore` is a new Hook that allows external stores to support concurrent reads by forcing updates to the store to be synchronous. It removes the need for useEffect when implementing subscriptions to external data sources, and is recommended for any library that integrates with state external to React. [See docs here](/reference/react/useSyncExternalStore).
+>>>>>>> 4f9e9a56611c7a56b9506cf0a7ca84ab409824bc
 
 > 補足
 >
 > `useSyncExternalStore` はアプリケーションコードではなくライブラリで使用されることを意図しています。
 
 #### useInsertionEffect {/*useinsertioneffect*/}
 
+<<<<<<< HEAD
 `useInsertionEffect` は、CSS-in-JS ライブラリがレンダー時にスタイルを注入する際のパフォーマンス上の問題に対処できるようにするための新しいフックです。すでに CSS-in-JS ライブラリを構築しているのでなければ、これを使うことはまずないでしょう。このフックは、DOM が書き換えられた後、レイアウト副作用 (layout effect) が新しいレイアウトを読み込む前に実行されます。これにより React 17 およびそれ以前から既に存在した問題が解決されますが、React 18 では並行レンダー中にブラウザに処理が渡り、そこでレイアウトが再計算される可能性があるため、より重要です。[こちらのドキュメントを参照](/reference/react/useInsertionEffect)。
+=======
+`useInsertionEffect` is a new Hook that allows CSS-in-JS libraries to address performance issues of injecting styles in render. Unless you’ve already built a CSS-in-JS library we don’t expect you to ever use this. This Hook will run after the DOM is mutated, but before layout effects read the new layout. This solves an issue that already exists in React 17 and below, but is even more important in React 18 because React yields to the browser during concurrent rendering, giving it a chance to recalculate layout. [See docs here](/reference/react/useInsertionEffect).
+>>>>>>> 4f9e9a56611c7a56b9506cf0a7ca84ab409824bc
 
 > 補足
 >
@@ -339,4 +356,3 @@ React 18 の strict モードでは、開発時にコンポーネントがマウ
 * Update webpack plugin for webpack 5 ([#22739](https://github.com/facebook/react/pull/22739)  by [@michenly](https://github.com/michenly))
 * Fix a mistake in the Node loader. ([#22537](https://github.com/facebook/react/pull/22537)  by [@btea](https://github.com/btea))
 * Use `globalThis` instead of `window` for edge environments. ([#22777](https://github.com/facebook/react/pull/22777)  by [@huozhi](https://github.com/huozhi))
-

src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md

@@ -28,8 +28,13 @@ Webpack と Vite の両方で振る舞いが同じになるようバンドラの
 
 ## アセットのロード {/*asset-loading*/}
 
+<<<<<<< HEAD
 現在のところ、スクリプトや外部スタイル・フォント・画像のようなアセットは、典型的には外部のシステムを通じてプリロードあるいはロードされています。しかしこれにより、ストリーミングやサーバコンポーネントといった新たな環境でうまく動くようにするのが難しくなることがあります。
 あらゆる React の環境で動作する API を追加し、それを通じて外部に分離されたアセットをプリロードあるいはロードできるよう、検討を進めています。
+=======
+Currently, assets like scripts, external styles, fonts, and images are typically preloaded and loaded using external systems. This can make it tricky to coordinate across new environments like streaming, Server Components, and more.
+We’re looking at adding APIs to preload and load deduplicated external assets through React APIs that work in all React environments.
+>>>>>>> 4f9e9a56611c7a56b9506cf0a7ca84ab409824bc
 
 また、この新たな API がサスペンスをサポートすることで、画像や CSS やフォントを使っても、これらがロードされるまで表示はブロックするがストリーミングや並列レンダーはブロックしない、というようにしたいと考えています。これにより、画面上の要素がポップしレイアウトがずれるという[「ポップコーン」現象](https://twitter.com/sebmarkbage/status/1516852731251724293)を防ぐことができます。
 
@@ -41,7 +46,11 @@ Static Site Generation (SSG) と Incremental Static Regeneration (ISR) はキャ
 
 React Conf 2021 において、React Forget についての[アーリープレビュー](https://www.youtube.com/watch?v=lGEMwh32soc)をお届けしました。これは、React のプログラミングモデルを保ちつつ、`useMemo` や `useCallback` の同等物を自動で作成して再レンダーのコストを最小化するためのコンパイラです。
 
+<<<<<<< HEAD
 最近になって、このコンパイラの安定性と機能を向上するための書き直しが完了しました。新しいアーキテクチャは、[ローカルでの変数書き換え](/learn/keeping-components-pure#local-mutation-your-components-little-secret)のような、より複雑なパターンも解析してメモ化を適用することが可能であり、単にメモ化用フックと同じ事ができるという以上に、様々なコンパイル時最適化の可能性を開くことができます。
+=======
+Recently, we finished a rewrite of the compiler to make it more reliable and capable. This new architecture allows us to analyze and memoize more complex patterns such as the use of [local mutations](/learn/keeping-components-pure#local-mutation-your-components-little-secret), and opens up many new compile-time optimization opportunities beyond just being on par with memoization Hooks.
+>>>>>>> 4f9e9a56611c7a56b9506cf0a7ca84ab409824bc
 
 また、このコンパイラの様々な機能について試すためのプレイグラウンドを作成しています。プレイグラウンドの主目的はコンパイラ自体の開発をやりやすくすることですが、コンパイラを試して何をやっているのか直観で理解できるようにすることにも役立つと考えています。これにより裏で何をやっているのか洞察できるようになりますし、タイプして即座にコンパイル出力を見ることもできるようになります。こちらはコンパイラのリリースの際に同時にリリースされる予定です。
 

src/content/blog/2023/03/16/introducing-react-dev.md

@@ -428,7 +428,11 @@ export default function PackingList() {
 
 `importance` が `0` の場合に `0` が結果として表示されてしまわないよう、`importance && ...` ではなく `importance > 0 && ...` と書く必要があることに注意してください。
 
+<<<<<<< HEAD
 この答えでは、名前と重要度ラベルの間にスペースを挿入するために、2 つの条件が使用されています。代わりに、先頭にスペースを入れたフラグメントを使用することができます：`importance > 0 && <> <i>...</i></>` あるいは、`<i>` の直接内側にスペースを追加することもできます：`importance > 0 && <i> ...</i>`。
+=======
+In this solution, two separate conditions are used to insert a space between then name and the importance label. Alternatively, you could use a Fragment with a leading space: `importance > 0 && <> <i>...</i></>` or add a space immediately inside the `<i>`:  `importance > 0 && <i> ...</i>`.
+>>>>>>> 4f9e9a56611c7a56b9506cf0a7ca84ab409824bc
 
 </Solution>
 
@@ -642,5 +646,9 @@ React チームでは、[Rachel Nabors](https://twitter.com/rachelnabors/) が
 
 アルファテスト及びベータテストプログラムに参加してくださった皆さんに心から感謝します。皆さんの情熱と貴重なフィードバックによって、このドキュメントを形作ることができました。そして React Conf 2021 で自身の経験をもとに React ドキュメントについて語っていただいた、ベータテスタの [Debbie O'Brien](https://twitter.com/debs_obrien) に特別な感謝を送ります。
 
+<<<<<<< HEAD
 最後に、この取り組みの背後にあるインスピレーションを与えてくださった React コミュニティに感謝します。これを行っているのは皆さんがいるからです。新しいドキュメントが、皆さんの望むどのようなユーザインターフェースであっても、それを React で構築する際の手助けとなれば幸いです。
 
+=======
+Finally, thanks to the React community for being the inspiration behind this effort. You are the reason we do this, and we hope that the new docs will help you use React to build any user interface that you want.
+>>>>>>> 4f9e9a56611c7a56b9506cf0a7ca84ab409824bc