[Beta] Sidebar groups (#5402)

beta/src/components/Layout/Nav/Nav.tsx

@@ -214,7 +214,7 @@ export default function Nav() {
             </a>
           </NextLink>
           <div className="lg:w-full leading-loose hidden sm:flex flex-initial items-center h-auto pr-5 lg:pr-5 pt-0.5">
-            <div className="px-1 mb-px bg-highlight dark:bg-highlight-dark rounded text-link dark:text-link-dark uppercase font-bold tracking-wide text-xs whitespace-nowrap">
+            <div className="px-1 mb-px bg-highlight dark:bg-highlight-dark rounded uppercase text-link dark:text-link-dark font-bold tracking-wide text-xs whitespace-nowrap">
               Beta
             </div>
           </div>

beta/src/components/Layout/Sidebar/SidebarRouteTree.tsx

@@ -100,7 +100,10 @@ export function SidebarRouteTree({
   return (
     <ul>
       {currentRoutes.map(
-        ({path, title, routes, wip, heading, hasSeparator}) => {
+        (
+          {path, title, routes, wip, heading, hasSectionHeader, sectionHeader},
+          index
+        ) => {
           const pagePath = path && removeFromLast(path, '.');
           const selected = slug === pagePath;
 
@@ -155,15 +158,22 @@ export function SidebarRouteTree({
               </li>
             );
           }
-
+          if (hasSectionHeader) {
-          if (hasSeparator) {
             return (
-              <Fragment key={`${title}-${path}-${level}-separator`}>
+              <Fragment key={`${sectionHeader}-${level}-separator`}>
-                <li
+                {index !== 0 && (
-                  role="separator"
+                  <li
-                  className="my-2 ml-5 border-b border-border dark:border-border-dark"
+                    role="separator"
-                />
+                    className="mt-4 mb-2 ml-5 border-b border-border dark:border-border-dark"
-                {listItem}
+                  />
+                )}
+                <h3
+                  className={cn(
+                    'mb-1 text-sm font-bold ml-5 text-gray-400 dark:text-gray-500',
+                    index !== 0 && 'mt-2'
+                  )}>
+                  {sectionHeader}
+                </h3>
               </Fragment>
             );
           } else {

beta/src/components/Layout/useRouteMeta.tsx

@@ -34,8 +34,10 @@ export interface RouteItem {
   wip?: boolean;
   /** List of sub-routes */
   routes?: RouteItem[];
-  /** Adds a separator above the route item */
+  /** Adds a section header above the route item */
-  hasSeparator?: boolean;
+  hasSectionHeader?: boolean;
+  /** Title of section header */
+  sectionHeader?: string;
 }
 
 export interface Routes {

beta/src/components/MDX/HomepageHero.tsx

@@ -21,7 +21,7 @@ function HomepageHero() {
       </div>
       <section className="my-8 sm:my-10 grid grid-cols-1 lg:grid-cols-2 gap-x-8 gap-y-4">
         <div className="flex flex-col justify-center">
-          <YouWillLearnCard title="Learn React" path="/learn">
+          <YouWillLearnCard title="Quick Start" path="/learn">
             <p>
               Learn how to think in React with step-by-step explanations and
               interactive examples.

beta/src/components/MDX/MDXComponents.tsx

@@ -72,7 +72,7 @@ const UL = (p: JSX.IntrinsicElements['ul']) => (
 );
 
 const Divider = () => (
-  <hr className="my-6 block border-b border-border dark:border-border-dark" />
+  <hr className="my-6 block border-b border-t-0 border-border dark:border-border-dark" />
 );
 const Wip = ({children}: {children: React.ReactNode}) => (
   <ExpandableCallout type="wip">{children}</ExpandableCallout>

beta/src/components/Search.tsx

@@ -155,7 +155,7 @@ export function Search({
 
       <button
         type="button"
-        className="hidden md:flex relative pl-4 pr-0.5 py-1 h-10 bg-secondary-button dark:bg-gray-80 outline-none focus:ring focus:outline-none betterhover:hover:bg-opacity-80 pointer items-center shadow-inner text-left w-full text-gray-30 rounded-lg align-middle text-sm"
+        className="hidden md:flex relative pl-4 pr-1 py-1 h-10 bg-secondary-button dark:bg-gray-80 outline-none focus:ring focus:outline-none betterhover:hover:bg-opacity-80 pointer items-center shadow-inner text-left w-full text-gray-30 rounded-md align-middle text-sm"
         onClick={onOpen}>
         <IconSearch className="mr-3 align-middle text-gray-30 shrink-0 group-betterhover:hover:text-gray-70" />
         Search

beta/src/content/index.md

@@ -19,7 +19,7 @@ This beta website contains the current draft of the new docs.
 ## How much content is ready? {/*how-much-content-is-ready*/}
 
 * [Learn React](/learn): ~99% finished.
-* [API Reference](/apis): 100% finished.
+* [API Reference](/reference): 100% finished.
 
 You can track our progress [on GitHub.](https://github.com/reactjs/reactjs.org/issues/3308)
 
@@ -29,4 +29,4 @@ Please use [this GitHub issue](https://github.com/reactjs/reactjs.org/issues/330
 
 ## Will this site replace the main site? {/*will-this-site-replace-the-main-site*/}
 
-We aim to switch this site to be the main one once we reach content parity with the [existing React documentation.](https://reactjs.org/) The old React website will be archived at a subdomain so you'll still be able to access it. Old content links will redirect to the archived subdomain, which will have a notice about outdated content.
+We aim to switch this site to be the main one once we reach content parity with the [existing React documentation.](https://reactjs.org/) The old React website will be archived at a subdomain so you'll still be able to access it. Old content links will redirect to the archived subdomain, which will have a notice about outdated content.

beta/src/content/learn/meet-the-team.md

@@ -1,4 +1,5 @@
 ---
+title: "Meet the Team"
 ---
 
 <Intro>

beta/src/content/reference/react-dom/client/index.md

@@ -1,5 +1,5 @@
 ---
-title: react-dom/client
+title: Client React DOM APIs
 ---
 
 <Intro>
@@ -10,7 +10,7 @@ The `react-dom/client` APIs let you render React components on the client (in th
 
 ---
 
-## React DOM Client APIs {/*react-dom-client-apis*/}
+## Client APIs {/*client-apis*/}
 
 * [`createRoot`](/reference/react-dom/client/createRoot) lets you create a root to display React components inside a browser DOM node.
 * [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) lets you display React components inside a browser DOM node whose HTML content was previously generated by [`react-dom/server`.](/reference/react-dom/server)

beta/src/content/reference/react-dom/components/index.md

@@ -1,5 +1,5 @@
 ---
-title: "react-dom: Components"
+title: "React DOM Components"
 ---
 
 <Intro>

beta/src/content/reference/react-dom/index.md

@@ -1,5 +1,5 @@
 ---
-title: react-dom
+title: React DOM APIs
 ---
 
 <Intro>
@@ -10,7 +10,7 @@ The `react-dom` package contains methods that are only supported for the web app
 
 ---
 
-## React DOM APIs {/*react-dom-apis*/}
+## APIs {/*apis*/}
 
 These APIs can be imported from your components. They are rarely used:
 
@@ -19,7 +19,7 @@ These APIs can be imported from your components. They are rarely used:
 
 ---
 
-## React DOM entry points {/*react-dom-entry-points*/}
+## Entry points {/*entry-points*/}
 
 The `react-dom` package provides two additional entry points:
 
@@ -28,7 +28,7 @@ The `react-dom` package provides two additional entry points:
 
 ---
 
-## Deprecated React DOM APIs {/*deprecated-react-dom-apis*/}
+## Deprecated APIs {/*deprecated-apis*/}
 
 <Deprecated>
 

beta/src/content/reference/react-dom/server/index.md

@@ -1,5 +1,5 @@
 ---
-title: react-dom/server
+title: Server React DOM APIs
 ---
 
 <Intro>
@@ -10,7 +10,7 @@ The `react-dom/server` APIs let you render React components to HTML on the serve
 
 ---
 
-## React DOM Server APIs for Node.js Streams {/*react-dom-server-apis-for-nodejs-streams*/}
+## Server APIs for Node.js Streams {/*server-apis-for-nodejs-streams*/}
 
 These methods are only available in the environments with [Node.js Streams:](https://nodejs.org/api/stream.html)
 
@@ -19,7 +19,7 @@ These methods are only available in the environments with [Node.js Streams:](htt
 
 ---
 
-## React DOM Server APIs for Web Streams {/*react-dom-server-apis-for-web-streams*/}
+## Server APIs for Web Streams {/*server-apis-for-web-streams*/}
 
 These methods are only available in the environments with [Web Streams](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API), which includes browsers, Deno, and some modern edge runtimes:
 
@@ -27,7 +27,7 @@ These methods are only available in the environments with [Web Streams](https://
 
 ---
 
-## React DOM Server APIs for non-streaming environments {/*react-dom-server-apis-for-non-streaming-environments*/}
+## Server APIs for non-streaming environments {/*server-apis-for-non-streaming-environments*/}
 
 These methods can be used in the environments that don't support streams:
 
@@ -38,7 +38,7 @@ They have limited functionality compared to the streaming APIs.
 
 ---
 
-## Deprecated React DOM Server APIs {/*deprecated-react-dom-server-apis*/}
+## Deprecated server APIs {/*deprecated-server-apis*/}
 
 <Deprecated>
 

beta/src/content/reference/react/apis.md

@@ -1,5 +1,5 @@
 ---
-title: "react: APIs"
+title: "Built-in React APIs"
 ---
 
 <Intro>
@@ -8,12 +8,8 @@ In addition to [Hooks](/reference/react) and [Components](/reference/react/compo
 
 </Intro>
 
-<InlineToc />
-
 ---
 
-## React APIs {/*react-apis*/}
-
 * [`createContext`](/reference/react/createContext) lets you define and provide context to the child components. Used with [`useContext`.](/reference/react/useContext)
 * [`forwardRef`](/reference/react/forwardRef) lets your component expose a DOM node as a ref to the parent. Used with [`useRef`.](/reference/react/useRef)
 * [`lazy`](/reference/react/lazy) lets you defer loading a component's code until it's rendered for the first time.

beta/src/content/reference/react/components.md

@@ -1,5 +1,5 @@
 ---
-title: "react: Components"
+title: "Built-in React Components"
 ---
 
 <Intro>
@@ -12,7 +12,7 @@ React exposes a few built-in components that you can use in your JSX.
 
 ---
 
-## Built-in React components {/*built-in-react-components*/}
+## Built-in components {/*built-in-components*/}
 
 * [`<Fragment>`](/reference/react/Fragment), alternatively written as `<>...</>`, lets you group multiple JSX nodes together.
 * [`<Profiler>`](/reference/react/Profiler) lets you measure rendering performance of a React tree programmatically.

beta/src/content/reference/react/index.md

@@ -1,5 +1,5 @@
 ---
-title: "react: Hooks"
+title: "Built-in React Hooks"
 ---
 
 <Intro>

beta/src/content/reference/react/legacy.md

@@ -1,5 +1,5 @@
 ---
-title: "react: Legacy APIs"
+title: "Legacy React APIs"
 ---
 
 <Intro>
@@ -10,7 +10,7 @@ These APIs are exported from the `react` package, but they are not recommended f
 
 ---
 
-## Legacy React APIs {/*legacy-react-apis*/}
+## Legacy APIs {/*legacy-apis*/}
 
 * [`Children`](/reference/react/Children) lets you manipulate and transform the JSX received as the `children` prop. [See alternatives.](/reference/react/Children#alternatives)
 * [`cloneElement`](/reference/react/cloneElement) lets you create a React element using another element as a starting point. [See alternatives.](/reference/react/cloneElement#alternatives)
@@ -23,7 +23,7 @@ These APIs are exported from the `react` package, but they are not recommended f
 
 ---
 
-## Deprecated React APIs {/*deprecated-react-apis*/}
+## Deprecated APIs {/*deprecated-apis*/}
 
 <Deprecated>
 

beta/src/sidebarLearn.json

@@ -7,6 +7,10 @@
       "heading": true,
       "path": "",
       "routes": [
+        {
+          "hasSectionHeader": true,
+          "sectionHeader": "Get Started"
+        },
         {
           "title": "Installation",
           "path": "/learn/installation",
@@ -43,6 +47,10 @@
             }
           ]
         },
+        {
+          "hasSectionHeader": true,
+          "sectionHeader": "Learn React"
+        },
         {
           "title": "Describing the UI",
           "tags": [],
@@ -191,20 +199,27 @@
             }
           ]
         },
+        {
+          "hasSectionHeader": true,
+          "sectionHeader": "About React"
+        },
         {
           "title": "Community",
-          "hasSeparator": true,
           "path": "/learn/community",
-          "routes": [{
+          "routes": [
-            "title": "Acknowledgements",
+            {
-            "path": "/learn/acknowledgements"
+              "title": "Acknowledgements",
-          }, {
+              "path": "/learn/acknowledgements"
-            "title": "Docs Contributors",
+            },
-            "path": "/learn/docs-contributors"
+            {
-          }, {
+              "title": "Docs Contributors",
-            "title": "Meet the Team",
+              "path": "/learn/docs-contributors"
-            "path": "/learn/meet-the-team"
+            },
-          }]
+            {
+              "title": "Meet the Team",
+              "path": "/learn/meet-the-team"
+            }
+          ]
         },
         {
           "title": "Blog",

beta/src/sidebarReference.json

@@ -8,7 +8,33 @@
       "path": "",
       "routes": [
         {
-          "title": "react: Hooks",
+          "hasSectionHeader": true,
+          "sectionHeader": "'react' package"
+        },
+        {
+          "title": "Components",
+          "path": "/reference/react/components",
+          "routes": [
+            {
+              "title": "<Fragment> (<>)",
+              "path": "/reference/react/Fragment"
+            },
+            {
+              "title": "<Profiler>",
+              "path": "/reference/react/Profiler"
+            },
+            {
+              "title": "<StrictMode>",
+              "path": "/reference/react/StrictMode"
+            },
+            {
+              "title": "<Suspense>",
+              "path": "/reference/react/Suspense"
+            }
+          ]
+        },
+        {
+          "title": "Hooks",
           "path": "/reference/react",
           "routes": [
             {
@@ -74,29 +100,7 @@
           ]
         },
         {
-          "title": "react: Components",
+          "title": "APIs",
-          "path": "/reference/react/components",
-          "routes": [
-            {
-              "title": "<Fragment> (<>)",
-              "path": "/reference/react/Fragment"
-            },
-            {
-              "title": "<Profiler>",
-              "path": "/reference/react/Profiler"
-            },
-            {
-              "title": "<StrictMode>",
-              "path": "/reference/react/StrictMode"
-            },
-            {
-              "title": "<Suspense>",
-              "path": "/reference/react/Suspense"
-            }
-          ]
-        },
-        {
-          "title": "react: APIs",
           "path": "/reference/react/apis",
           "routes": [
             {
@@ -122,9 +126,12 @@
           ]
         },
         {
-          "title": "react-dom: Components",
+          "hasSectionHeader": true,
+          "sectionHeader": "'react-dom' package"
+        },
+        {
+          "title": "Components",
           "path": "/reference/react-dom/components",
-          "hasSeparator": true,
           "routes": [
             {
               "title": "Common (e.g. <div>)",
@@ -153,7 +160,7 @@
           ]
         },
         {
-          "title": "react-dom: APIs",
+          "title": "APIs",
           "path": "/reference/react-dom",
           "routes": [
             {
@@ -183,7 +190,7 @@
           ]
         },
         {
-          "title": "react-dom\/client",
+          "title": "Client APIs",
           "path": "/reference/react-dom/client",
           "routes": [
             {
@@ -197,7 +204,7 @@
           ]
         },
         {
-          "title": "react-dom\/server",
+          "title": "Server APIs",
           "path": "/reference/react-dom/server",
           "routes": [
             {
@@ -227,9 +234,12 @@
           ]
         },
         {
-          "title": "react: Legacy APIs",
+          "hasSectionHeader": true,
+          "sectionHeader": "Legacy APIs"
+        },
+        {
+          "title": "Legacy React APIs",
           "path": "/reference/react/legacy",
-          "hasSeparator": true,
           "routes": [
             {
               "title": "Children",