docs(en): merge reactjs.org/main into zh-hans.reactjs.org/main @ 74697fb4

.gitignore

@@ -36,3 +36,6 @@ yarn-error.log*
 
 # external fonts
 public/fonts/**/Optimistic_*.woff2
+
+# rss
+public/rss.xml

package.json

@@ -15,11 +15,12 @@
     "prettier:diff": "yarn nit:source",
     "lint-heading-ids": "node scripts/headingIdLinter.js",
     "fix-headings": "node scripts/headingIdLinter.js --fix",
-    "ci-check": "npm-run-all prettier:diff --parallel lint tsc lint-heading-ids",
+    "ci-check": "npm-run-all prettier:diff --parallel lint tsc lint-heading-ids rss",
     "tsc": "tsc --noEmit",
     "start": "next start",
     "postinstall": "patch-package && (is-ci || husky install .husky)",
-    "check-all": "npm-run-all prettier lint:fix tsc"
+    "check-all": "npm-run-all prettier lint:fix tsc rss",
+    "rss": "node scripts/generateRss.js"
   },
   "dependencies": {
     "@codesandbox/sandpack-react": "2.13.5",

scripts/generateRss.js

@@ -0,0 +1,6 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+const {generateRssFeed} = require('../src/utils/rss');
+
+generateRssFeed();

src/components/Layout/Footer.tsx

@@ -286,6 +286,14 @@ export function Footer() {
             dir="ltr">
             ©{new Date().getFullYear()}
           </div>
+          <div className="uwu-visible text-xs">
+            Logo by
+            <ExternalLink
+              className="ms-1"
+              href="https://twitter.com/sawaratsuki1004">
+              @sawaratsuki1004
+            </ExternalLink>
+          </div>
         </div>
         <div className="flex flex-col">
           <FooterLink href="/learn" isHeader={true}>

src/components/Layout/HomeContent.js

@@ -26,6 +26,8 @@ import Link from 'components/MDX/Link';
 import CodeBlock from 'components/MDX/CodeBlock';
 import {ExternalLink} from 'components/ExternalLink';
 import sidebarBlog from '../../sidebarBlog.json';
+import * as React from 'react';
+import Image from 'next/image';
 
 function Section({children, background = null}) {
   return (
@@ -115,12 +117,22 @@ export function HomeContent() {
     <>
       <div className="ps-0">
         <div className="mx-5 mt-12 lg:mt-24 mb-20 lg:mb-32 flex flex-col justify-center">
+          <div className="uwu-visible flex justify-center">
+            <Image
+              alt="logo by @sawaratsuki1004"
+              title="logo by @sawaratsuki1004"
+              loading="eager"
+              width={313}
+              height={160}
+              src="/images/uwu.png"
+            />
+          </div>
           <Logo
             className={cn(
-              'mt-4 mb-3 text-link dark:text-link-dark w-24 lg:w-28 self-center text-sm me-0 flex origin-center transition-all ease-in-out'
+              'uwu-hidden mt-4 mb-3 text-link dark:text-link-dark w-24 lg:w-28 self-center text-sm me-0 flex origin-center transition-all ease-in-out'
             )}
           />
-          <h1 className="text-5xl font-display lg:text-6xl self-center flex font-semibold leading-snug text-primary dark:text-primary-dark">
+          <h1 className="uwu-hidden text-5xl font-display lg:text-6xl self-center flex font-semibold leading-snug text-primary dark:text-primary-dark">
             React
           </h1>
           <p className="text-4xl font-display max-w-lg md:max-w-full py-1 text-center text-secondary dark:text-primary-dark leading-snug self-center">
@@ -470,7 +482,15 @@ export function HomeContent() {
           </div>
 
           <div className="mt-20 px-5 lg:px-0 mb-6 max-w-4xl text-center text-opacity-80">
-            <Logo className="text-link dark:text-link-dark w-24 lg:w-28 mb-10 lg:mb-8 mt-12 h-auto mx-auto self-start" />
+            <div className="uwu-visible flex justify-center">
+              <img
+                alt="logo by @sawaratsuki1004"
+                title="logo by @sawaratsuki1004"
+                className="uwu-visible mb-10 lg:mb-8 h-24 lg:h-32"
+                src="/images/uwu.png"
+              />
+            </div>
+            <Logo className="uwu-hidden text-link dark:text-link-dark w-24 lg:w-28 mb-10 lg:mb-8 mt-12 h-auto mx-auto self-start" />
             <Header>
               欢迎来到 <br className="hidden lg:inline" />
               React 社区

src/components/Layout/Page.tsx

@@ -21,6 +21,7 @@ import type {RouteItem} from 'components/Layout/getRouteMeta';
 import {HomeContent} from './HomeContent';
 import {TopNav} from './TopNav';
 import cn from 'classnames';
+import Head from 'next/head';
 
 import(/* webpackPrefetch: true */ '../MDX/CodeBlock/CodeBlock');
 
@@ -117,7 +118,21 @@ export function Page({children, toc, routeTree, meta, section}: PageProps) {
         image={`/images/og-` + section + '.png'}
         searchOrder={searchOrder}
       />
+<<<<<<< HEAD
       {/* <SocialBanner /> */}
+=======
+      {(isHomePage || isBlogIndex) && (
+        <Head>
+          <link
+            rel="alternate"
+            type="application/rss+xml"
+            title="React Blog RSS Feed"
+            href="/rss.xml"
+          />
+        </Head>
+      )}
+      <SocialBanner />
+>>>>>>> 74697fb4f1fc542c302089cfc0a176510db35e33
       <TopNav
         section={section}
         routeTree={routeTree}

src/components/Layout/Sidebar/SidebarRouteTree.tsx

@@ -10,6 +10,7 @@ import {SidebarLink} from './SidebarLink';
 import {useCollapse} from 'react-collapsed';
 import usePendingRoute from 'hooks/usePendingRoute';
 import type {RouteItem} from 'components/Layout/getRouteMeta';
+import {siteConfig} from 'siteConfig';
 
 interface SidebarRouteTreeProps {
   isForceExpanded: boolean;
@@ -150,8 +151,12 @@ export function SidebarRouteTree({
             );
           }
           if (hasSectionHeader) {
+            let sectionHeaderText =
+              sectionHeader != null
+                ? sectionHeader.replace('{{version}}', siteConfig.version)
+                : '';
             return (
-              <Fragment key={`${sectionHeader}-${level}-separator`}>
+              <Fragment key={`${sectionHeaderText}-${level}-separator`}>
                 {index !== 0 && (
                   <li
                     role="separator"
@@ -163,7 +168,7 @@ export function SidebarRouteTree({
                     'mb-1 text-sm font-bold ms-5 text-tertiary dark:text-tertiary-dark',
                     index !== 0 && 'mt-2'
                   )}>
-                  {sectionHeader}
+                  {sectionHeaderText}
                 </h3>
               </Fragment>
             );

src/components/Layout/TopNav/TopNav.tsx

@@ -10,6 +10,7 @@ import {
   startTransition,
   Suspense,
 } from 'react';
+import Image from 'next/image';
 import * as React from 'react';
 import cn from 'classnames';
 import NextLink from 'next/link';
@@ -24,6 +25,7 @@ import {Logo} from '../../Logo';
 import {Feedback} from '../Feedback';
 import {SidebarRouteTree} from '../Sidebar';
 import type {RouteItem} from '../getRouteMeta';
+import {siteConfig} from 'siteConfig';
 
 declare global {
   interface Window {
@@ -247,16 +249,38 @@ export default function TopNav({
                 )}>
                 {isMenuOpen ? <IconClose /> : <IconHamburger />}
               </button>
-              <div className="flex 3xl:flex-1 align-center">
+              <div className="f">
+                <div className="uwu-visible flex items-center justify-center h-full">
+                  <NextLink href="/">
+                    <Image
+                      alt="logo by @sawaratsuki1004"
+                      title="logo by @sawaratsuki1004"
+                      className="h-8"
+                      priority
+                      width={63}
+                      height={32}
+                      src="/images/uwu.png"
+                    />
+                  </NextLink>
+                </div>
+                <div className="uwu-hidden">
+                  <NextLink
+                    href="/"
+                    className={`active:scale-95 overflow-hidden transition-transform relative items-center text-primary dark:text-primary-dark p-1 whitespace-nowrap outline-link rounded-full 3xl:rounded-xl inline-flex text-lg font-normal gap-2`}>
+                    <Logo
+                      className={cn(
+                        'text-sm me-0 w-10 h-10 text-link dark:text-link-dark flex origin-center transition-all ease-in-out'
+                      )}
+                    />
+                    <span className="sr-only 3xl:not-sr-only">React</span>
+                  </NextLink>
+                </div>
+              </div>
+              <div className="flex flex-column justify-center items-center">
                 <NextLink
-                  href="/"
-                  className={`active:scale-95 overflow-hidden transition-transform relative items-center text-primary dark:text-primary-dark p-1 whitespace-nowrap outline-link rounded-full 3xl:rounded-xl inline-flex text-lg font-normal gap-2`}>
-                  <Logo
-                    className={cn(
-                      'text-sm me-0 w-10 h-10 text-link dark:text-link-dark flex origin-center transition-all ease-in-out'
-                    )}
-                  />
-                  <span className="sr-only 3xl:not-sr-only">React</span>
+                  href="/versions"
+                  className=" flex py-2 flex-column justify-center items-center text-gray-50 dark:text-gray-30 hover:text-link hover:dark:text-link-dark hover:underline text-sm ms-1 cursor-pointer">
+                  v{siteConfig.version}
                 </NextLink>
               </div>
             </div>

src/components/MDX/ConsoleBlock.tsx

@@ -15,6 +15,10 @@ interface ConsoleBlockProps {
   children: React.ReactNode;
 }
 
+interface ConsoleBlockMultiProps {
+  children: React.ReactNode;
+}
+
 const Box = ({
   width = '60px',
   height = '17px',
@@ -29,7 +33,7 @@ const Box = ({
   <div className={className} style={{width, height, ...customStyles}}></div>
 );
 
-function ConsoleBlock({level = 'error', children}: ConsoleBlockProps) {
+export function ConsoleBlock({level = 'error', children}: ConsoleBlockProps) {
   let message: React.ReactNode | null;
   if (typeof children === 'string') {
     message = children;
@@ -38,7 +42,10 @@ function ConsoleBlock({level = 'error', children}: ConsoleBlockProps) {
   }
 
   return (
-    <div className="mb-4 text-secondary" translate="no" dir="ltr">
+    <div
+      className="console-block mb-4 text-secondary bg-wash dark:bg-wash-dark rounded-lg"
+      translate="no"
+      dir="ltr">
       <div className="flex w-full rounded-t-lg bg-gray-200 dark:bg-gray-80">
         <div className="px-4 py-2 border-gray-300 dark:border-gray-90 border-r">
           <Box className="bg-gray-300 dark:bg-gray-70" width="15px" />
@@ -73,4 +80,72 @@ function ConsoleBlock({level = 'error', children}: ConsoleBlockProps) {
   );
 }
 
-export default ConsoleBlock;
+export function ConsoleBlockMulti({children}: ConsoleBlockMultiProps) {
+  return (
+    <div
+      className="console-block mb-4 text-secondary bg-wash dark:bg-wash-dark rounded-lg"
+      translate="no"
+      dir="ltr">
+      <div className="flex w-full rounded-t-lg bg-gray-200 dark:bg-gray-80">
+        <div className="px-4 py-2 border-gray-300 dark:border-gray-90 border-r">
+          <Box className="bg-gray-300 dark:bg-gray-70" width="15px" />
+        </div>
+        <div className="flex text-sm px-4">
+          <div className="border-b-2 border-gray-300 dark:border-gray-90 text-tertiary dark:text-tertiary-dark">
+            Console
+          </div>
+          <div className="px-4 py-2 flex">
+            <Box className="me-2 bg-gray-300 dark:bg-gray-70" />
+            <Box className="me-2 hidden md:block bg-gray-300 dark:bg-gray-70" />
+            <Box className="hidden md:block bg-gray-300 dark:bg-gray-70" />
+          </div>
+        </div>
+      </div>
+      <div className="grid grid-cols-1 divide-y divide-gray-300 dark:divide-gray-70 text-base">
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export function ConsoleLogLine({children, level}: ConsoleBlockProps) {
+  let message: React.ReactNode | null;
+  if (typeof children === 'string') {
+    message = children;
+  } else if (isValidElement(children)) {
+    message = children.props.children;
+  } else if (Array.isArray(children)) {
+    message = children.reduce((result, child) => {
+      if (typeof child === 'string') {
+        result += child;
+      } else if (isValidElement(child)) {
+        // @ts-ignore
+        result += child.props.children;
+      }
+      return result;
+    }, '');
+  }
+
+  return (
+    <div
+      className={cn(
+        'ps-4 pe-2 pt-1 pb-2 grid grid-cols-[18px_auto] font-mono rounded-b-md',
+        {
+          'bg-red-30 text-red-50 dark:text-red-30 bg-opacity-5':
+            level === 'error',
+          'bg-yellow-5 text-yellow-50': level === 'warning',
+          'bg-gray-5 text-secondary dark:text-secondary-dark': level === 'info',
+        }
+      )}>
+      {level === 'error' && (
+        <IconError className="self-start mt-1.5 text-[.7rem] w-6" />
+      )}
+      {level === 'warning' && (
+        <IconWarning className="self-start mt-1 text-[.65rem] w-6" />
+      )}
+      <div className="px-2 pt-1 whitespace-break-spaces text-code leading-tight">
+        {message}
+      </div>
+    </div>
+  );
+}

src/components/MDX/MDXComponents.tsx

@@ -8,7 +8,7 @@ import cn from 'classnames';
 
 import CodeBlock from './CodeBlock';
 import {CodeDiagram} from './CodeDiagram';
-import ConsoleBlock from './ConsoleBlock';
+import {ConsoleBlock, ConsoleLogLine, ConsoleBlockMulti} from './ConsoleBlock';
 import ExpandableCallout from './ExpandableCallout';
 import ExpandableExample from './ExpandableExample';
 import {H1, H2, H3, H4, H5} from './Heading';
@@ -420,6 +420,8 @@ export const MDXComponents = {
   pre: CodeBlock,
   CodeDiagram,
   ConsoleBlock,
+  ConsoleBlockMulti,
+  ConsoleLogLine,
   DeepDive: (props: {
     children: React.ReactNode;
     title: string;

src/content/blog/2020/12/21/data-fetching-with-react-server-components.md

@@ -1,5 +1,12 @@
 ---
+<<<<<<< HEAD
 title: "介绍零打包大小的 React 服务器组件"
+=======
+title: "Introducing Zero-Bundle-Size React Server Components"
+author: Dan Abramov, Lauren Tan, Joseph Savona, and Sebastian Markbage
+date: 2020/12/21
+description: 2020 has been a long year. As it comes to an end we wanted to share a special Holiday Update on our research into zero-bundle-size React Server Components.
+>>>>>>> 74697fb4f1fc542c302089cfc0a176510db35e33
 ---
 
 2020 年 12 月 21 日 [Dan Abramov](https://twitter.com/dan_abramov)、[Lauren Tan](https://twitter.com/potetotes)、[Joseph Savona](https://twitter.com/en_JS) 与 [Sebastian Markbåge](https://twitter.com/sebmarkbage)

src/content/blog/2021/06/08/the-plan-for-react-18.md

@@ -1,5 +1,12 @@
 ---
+<<<<<<< HEAD
 title: "React 18 发布计划"
+=======
+title: "The Plan for React 18"
+author: Andrew Clark, Brian Vaughn, Christine Abernathy, Dan Abramov, Rachel Nabors, Rick Hanlon, Sebastian Markbage, and Seth Webster
+date: 2021/06/08
+description: The React team is excited to share a few updates. We’ve started work on the React 18 release, which will be our next major version. We’ve created a Working Group to prepare the community for gradual adoption of new features in React 18. We’ve published a React 18 Alpha so that library authors can try it and provide feedback...
+>>>>>>> 74697fb4f1fc542c302089cfc0a176510db35e33
 ---
 
 2021 年 7 月 8 日 [Andrew Clark](https://twitter.com/acdlite)、[Brian Vaughn](https://github.com/bvaughn)、[Christine Abernathy](https://twitter.com/abernathyca)、[Dan Abramov](https://twitter.com/dan_abramov)、[Rachel Nabors](https://twitter.com/rachelnabors)、[Rick Hanlon](https://twitter.com/rickhanlonii)、[Sebastian Markbåge](https://twitter.com/sebmarkbage) 与 [Seth Webster](https://twitter.com/sethwebster)

src/content/blog/2021/12/17/react-conf-2021-recap.md

@@ -1,5 +1,12 @@
 ---
+<<<<<<< HEAD
 title: "回顾 React Conf 2021"
+=======
+title: "React Conf 2021 Recap"
+author: Jesslyn Tannady and Rick Hanlon
+date: 2021/12/17
+description: Last week we hosted our 6th React Conf. In previous years, we've used the React Conf stage to deliver industry changing announcements such as React Native and React Hooks. This year, we shared our multi-platform vision for React, starting with the release of React 18 and gradual adoption of concurrent features.
+>>>>>>> 74697fb4f1fc542c302089cfc0a176510db35e33
 ---
 
 2021 年 12 月 17 日 [Jesslyn Tannady](https://twitter.com/jtannady) 与 [Rick Hanlon](https://twitter.com/rickhanlonii)

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

@@ -1,5 +1,12 @@
 ---
+<<<<<<< HEAD
 title: "如何升级到 React 18"
+=======
+title: "How to Upgrade to React 18"
+author: Rick Hanlon
+date: 2022/03/08
+description: As we shared in the release post, React 18 introduces features powered by our new concurrent renderer, with a gradual adoption strategy for existing applications. In this post, we will guide you through the steps for upgrading to React 18.
+>>>>>>> 74697fb4f1fc542c302089cfc0a176510db35e33
 ---
 
 2022 年 8 月 3 日 [Rick Hanlon](https://twitter.com/rickhanlonii)