Merge branch 'main' into sync-4bdb87b1

src/components/Layout/getRouteMeta.tsx

@@ -58,13 +58,13 @@ export interface RouteMeta {
   order?: number;
 }
 
-type TravesalContext = RouteMeta & {
+type TraversalContext = RouteMeta & {
   currentIndex: number;
 };
 
 export function getRouteMeta(cleanedPath: string, routeTree: RouteItem) {
   const breadcrumbs = getBreadcrumbs(cleanedPath, routeTree);
-  const ctx: TravesalContext = {
+  const ctx: TraversalContext = {
     currentIndex: 0,
   };
   buildRouteMeta(cleanedPath, routeTree, ctx);
@@ -79,7 +79,7 @@ export function getRouteMeta(cleanedPath: string, routeTree: RouteItem) {
 function buildRouteMeta(
   searchPath: string,
   currentRoute: RouteItem,
-  ctx: TravesalContext
+  ctx: TraversalContext
 ) {
   ctx.currentIndex++;
 

src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md

@@ -74,7 +74,7 @@ Making plain JavaScript in React components reactive requires a compiler with a
 
 ## Offscreen Rendering {/*offscreen-rendering*/}
 
-Offscreen rendering is an upcoming capability in React for rendering screens in the background without additional performance overhead. You can think of it as a version of the [`content-visiblity` CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility) that works not only for DOM elements but React components, too. During our research, we've discovered a variety of use cases:
+Offscreen rendering is an upcoming capability in React for rendering screens in the background without additional performance overhead. You can think of it as a version of the [`content-visibility` CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility) that works not only for DOM elements but React components, too. During our research, we've discovered a variety of use cases:
 
 - A router can prerender screens in the background so that when a user navigates to them, they're instantly available.
 - A tab switching component can preserve the state of hidden tabs, so the user can switch between them without losing their progress.

src/content/learn/describing-the-ui.md

@@ -530,7 +530,6 @@ React uses trees to model the relationships between components and modules.
 
 A React render tree is a representation of the parent and child relationship between components. 
 
-
 <Diagram name="generic_render_tree" height={250} width={500} alt="A tree graph with five nodes, with each node representing a component. The root node is located at the top the tree graph and is labelled 'Root Component'. It has two arrows extending down to two nodes labelled 'Component A' and 'Component C'. Each of the arrows is labelled with 'renders'. 'Component A' has a single 'renders' arrow to a node labelled 'Component B'. 'Component C' has a single 'renders' arrow to a node labelled 'Component D'.">
 
 An example React render tree.

src/content/learn/editor-setup.md

@@ -1,62 +1,62 @@
 ---
-title: Editor Setup
+title: تنظیم اولیه ویرایشگر
 ---
 
 <Intro>
 
-A properly configured editor can make code clearer to read and faster to write. It can even help you catch bugs as you write them! If this is your first time setting up an editor or you're looking to tune up your current editor, we have a few recommendations.
+اگر یک ویرایشگر متن به درستی پیکربندی شده باشد، می‌تواند باعث تمیزتر خوانده شدن کد و سریع‌تر نوشته شدن آن شود. حتی می‌تواند به شما در پیدا کردن خطاهایی که خودتان باعث شده‌اید کمک کند! اگر دفعه‌ی اول است که راه‌اندازی ویراشگر انجام می‌دهید یا قصد تنظیم کردن آنرا دارید، ما چند توصیه داریم:
 
 </Intro>
 
 <YouWillLearn>
 
-* What the most popular editors are
-* How to format your code automatically
+* محبوب ترین ویرایشگرها کدام است
+* چطور به صورت خودکار کد خودتان را قالب‌بندی کنید
 
 </YouWillLearn>
 
-## Your editor {/*your-editor*/}
+## ویرایشگر شما {/*your-editor*/}
 
-[VS Code](https://code.visualstudio.com/) is one of the most popular editors in use today. It has a large marketplace of extensions and integrates well with popular services like GitHub. Most of the features listed below can be added to VS Code as extensions as well, making it highly configurable!
+امروزه [VS Code](https://code.visualstudio.com/) یکی از محبوب‌ترین ویرایشگرهای مورد استفاده است. بازار بزرگی از افزونه‌ها دارد و به خوبی با سرویس های محبوبی مثل Github ادغام میشود. بسیاری از قابلیت های لیست شده‌ی ذیل می‌توانند به عنوان افزونه به VS Code اضافه شوند و آن را بسیار قابل تنظیم کند.
 
-Other popular text editors used in the React community include:
+ویرایشگرهای محبوب دیگری که در جامعه‌ی ری‌اکت استفاده می‌شوند شامل:
 
-* [WebStorm](https://www.jetbrains.com/webstorm/) is an integrated development environment designed specifically for JavaScript.
-* [Sublime Text](https://www.sublimetext.com/) has support for JSX and TypeScript, [syntax highlighting](https://stackoverflow.com/a/70960574/458193) and autocomplete built in.
-* [Vim](https://www.vim.org/) is a highly configurable text editor built to make creating and changing any kind of text very efficient. It is included as "vi" with most UNIX systems and with Apple OS X.
+* [WebStorm](https://www.jetbrains.com/webstorm/) یک محیط توسعه‌ی یکپارچه که مخصوص جاوااسکریپت طراحی شده است.
+* [Sublime Text](https://www.sublimetext.com/) از JSX و تایپ‌اسکریپت پشتیبانی میکند، دارای [برجسته‌ساز syntax](https://stackoverflow.com/a/70960574/458193) و تکمیل خودکار داخلی است.
+* [Vim](https://www.vim.org/) یک ویرایشگر متن با قابلیت تنظیم بالا است که به منظور ایجاد و تغییر هر نوع متن، بسیار کارآمد ساخته شده است. در اکثر سیستم‌های یونیکس و با Apple OS X به‌عنوان «vi» گنجانده شده‌است.
 
-## Recommended text editor features {/*recommended-text-editor-features*/}
+## قابلیت های پیشنهادی برای ویرایشگر متن {/*recommended-text-editor-features*/}
 
-Some editors come with these features built in, but others might require adding an extension. Check to see what support your editor of choice provides to be sure!
+بعضی ویرایشگرها به صورت داخلی این قابلیت ها را دارند، اما بعضی دیگر نیاز به اضافه کردن افزونه هستند. بررسی کنید تا ببینید ویرایشگر انتخابی شما چه پشتیبانی ارائه می‌دهد تا مطمئن شوید!
 
 ### Linting {/*linting*/}
 
-Code linters find problems in your code as you write, helping you fix them early. [ESLint](https://eslint.org/) is a popular, open source linter for JavaScript. 
+بی شک linter های کد به شما در پیدا کردن خطاهایی که در کد ایجاد کرده‌اید و برطرف کردن آن‌ها کمک میکنند. [ESLint](https://eslint.org/) یک linter متن باز و محبوب برای جاوااسکریپت است.
 
-* [Install ESLint with the recommended configuration for React](https://www.npmjs.com/package/eslint-config-react-app) (be sure you have [Node installed!](https://nodejs.org/en/download/current/))
-* [Integrate ESLint in VSCode with the official extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
+* [ESLint را با پیکربندی پیشنهادی برای ری‌اکت نصب کنید](https://www.npmjs.com/package/eslint-config-react-app) (مطمعن شوید که [Node نصب است!](https://nodejs.org/en/download/current/))
+* [ESLint را با افزونه‌ی رسمی به VSCode اضافه کنید](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
 
-**Make sure that you've enabled all the [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks) rules for your project.** They are essential and catch the most severe bugs early. The recommended [`eslint-config-react-app`](https://www.npmjs.com/package/eslint-config-react-app) preset already includes them.
+**از فعال بودن تمام قوانین [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks) در پروژه‌ی خود اطمینان حاصل کنید.** این قوانین ضروری بوده و از اکثر خطاهای بزرگ جلوگیری میکند. تنظیمات پیشنهادی [`eslint-config-react-app`](https://www.npmjs.com/package/eslint-config-react-app) از پیش تعیین شده و شامل آنها می شود.
 
-### Formatting {/*formatting*/}
+### قالب‌بندی {/*formatting*/}
 
-The last thing you want to do when sharing your code with another contributor is get into an discussion about [tabs vs spaces](https://www.google.com/search?q=tabs+vs+spaces)! Fortunately, [Prettier](https://prettier.io/) will clean up your code by reformatting it to conform to preset, configurable rules. Run Prettier, and all your tabs will be converted to spaces—and your indentation, quotes, etc will also all be changed to conform to the configuration. In the ideal setup, Prettier will run when you save your file, quickly making these edits for you.
+آخرین کاری که می‌خواهید هنگام اشتراک‌گذاری کد خود با مشارکت‌کننده دیگری انجام دهید، وارد شدن به بحث در مورد [tab‌ها در مقابل space‌ها](https://www.google.com/search?q=tabs+vs+spaces) است! خوشبختانه، [Prettier](https://prettier.io/) کد شما را با فرمت مجدد آن برای مطابقت با قوانین از پیش تعیین شده و قابل تنظیم، تمیز می کند. Prettier را اجرا کنید، و همه tab های شما به space تبدیل می‌شوند - و تورفتگی، نقل قول‌ها و غیره نیز برای مطابقت با پیکربندی تغییر می‌کنند. در تنظیمات ایده‌آل، وقتی فایل خود را ذخیره می‌کنید، Prettier اجرا می‌شود و به سرعت این ویرایش‌ها را برای شما انجام می‌دهد.
 
-You can install the [Prettier extension in VSCode](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) by following these steps:
+شما می‌توانید با دنبال کردن مراحل ذیل [افزونه‌ی Prettier را در VSCode](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) نصب کنید.
 
-1. Launch VS Code
-2. Use Quick Open (press Ctrl/Cmd+P)
-3. Paste in `ext install esbenp.prettier-vscode`
-4. Press Enter
+1. اجرای VSCode
+2. استفاده از کلیدهای ترکیبی (Ctrl/Cmd+P)
+3. چسباندن عبارت `ext install esbenp.prettier-vscode`
+4. زدن کلید Enter
 
-#### Formatting on save {/*formatting-on-save*/}
+#### قالب‌بندی هنگام ذخیره‌سازی {/*formatting-on-save*/}
 
-Ideally, you should format your code on every save. VS Code has settings for this!
+در حالت ایده آل، باید کد خود را در هر ذخیره‌سازی قالب‌بندی کنید. VS Code تنظیماتی برای این کار دارد!
 
-1. In VS Code, press `CTRL/CMD + SHIFT + P`.
-2. Type "settings"
-3. Hit Enter
-4. In the search bar, type "format on save"
-5. Be sure the "format on save" option is ticked!
+1. استفاده از کلیدهای ترکیبی `CTRL/CMD + SHIFT + P` داخل VSCode.
+2. بنویسید "settings"
+3. کلید Enter را بزنید
+4. در نوار جستجو، "format on save" را بنویسید
+5. مطمعن شوید قابلیت "format on save" تیک خورده باشد!
 
-> If your ESLint preset has formatting rules, they may conflict with Prettier. We recommend disabling all formatting rules in your ESLint preset using [`eslint-config-prettier`](https://github.com/prettier/eslint-config-prettier) so that ESLint is *only* used for catching logical mistakes. If you want to enforce that files are formatted before a pull request is merged, use [`prettier --check`](https://prettier.io/docs/en/cli.html#--check) for your continuous integration.
+> اگر ESLint شما دارای قوانین قالب‌بندی از پیش تنظیم شده باشد، ممکن است با Prettier در تضاد باشند. توصیه می‌کنیم با استفاده از [`eslint-config-prettier`](https://github.com/prettier/eslint-config-prettier) تمام قوانین قالب‌بندی  از پیش تنظیم شده را در ESLint غیرفعال کنید. بنابراین ESLint *فقط* برای پیدا کردن خطاهای منطقی استفاده می‌شود.  اگر می‌خواهید قالب‌بندی فایل‌ها را قبل از ادغام درخواست pull انجام دهید، از [`prettier --check`](https://prettier.io/docs/en/cli.html#--check) برای یکپارچه‌سازی مداوم خود استفاده کنید.