[Beta] Sidebar groups (#5402)

2026-02-22 03:42:14 +00:00 · 2022-12-26 12:43:49 +00:00
parent 20252cbb57
commit ddde7e8fdc
18 changed files with 116 additions and 82 deletions
--- a/beta/src/components/Layout/Nav/Nav.tsx
+++ b/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>
--- a/beta/src/components/Layout/Sidebar/SidebarRouteTree.tsx
+++ b/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 (hasSeparator) {
+          if (hasSectionHeader) {
            return (
-              <Fragment key={`${title}-${path}-${level}-separator`}>
-                <li
-                  role="separator"
-                  className="my-2 ml-5 border-b border-border dark:border-border-dark"
-                />
-                {listItem}
+              <Fragment key={`${sectionHeader}-${level}-separator`}>
+                {index !== 0 && (
+                  <li
+                    role="separator"
+                    className="mt-4 mb-2 ml-5 border-b border-border dark:border-border-dark"
+                  />
+                )}
+                <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 {
--- a/beta/src/components/Layout/useRouteMeta.tsx
+++ b/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 */
-  hasSeparator?: boolean;
+  /** Adds a section header above the route item */
+  hasSectionHeader?: boolean;
+  /** Title of section header */
+  sectionHeader?: string;
 }

 export interface Routes {
--- a/beta/src/components/MDX/HomepageHero.tsx
+++ b/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.
--- a/beta/src/components/MDX/MDXComponents.tsx
+++ b/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>
--- a/beta/src/components/Search.tsx
+++ b/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
--- a/beta/src/content/index.md
+++ b/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.
--- a/beta/src/content/learn/meet-the-team.md
+++ b/beta/src/content/learn/meet-the-team.md
@@ -1,4 +1,5 @@
 ---
+title: "Meet the Team"
 ---

 <Intro>
--- a/beta/src/content/reference/react-dom/client/index.md
+++ b/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)
--- a/beta/src/content/reference/react-dom/components/index.md
+++ b/beta/src/content/reference/react-dom/components/index.md
@@ -1,5 +1,5 @@
 ---
-title: "react-dom: Components"
+title: "React DOM Components"
 ---

 <Intro>
--- a/beta/src/content/reference/react-dom/index.md
+++ b/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>

--- a/beta/src/content/reference/react-dom/server/index.md
+++ b/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>

--- a/beta/src/content/reference/react/apis.md
+++ b/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.
--- a/beta/src/content/reference/react/components.md
+++ b/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.
--- a/beta/src/content/reference/react/index.md
+++ b/beta/src/content/reference/react/index.md
@@ -1,5 +1,5 @@
 ---
-title: "react: Hooks"
+title: "Built-in React Hooks"
 ---

 <Intro>
--- a/beta/src/content/reference/react/legacy.md
+++ b/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>

--- a/beta/src/sidebarLearn.json
+++ b/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": [{
-            "title": "Acknowledgements",
-            "path": "/learn/acknowledgements"
-          }, {
-            "title": "Docs Contributors",
-            "path": "/learn/docs-contributors"
-          }, {
-            "title": "Meet the Team",
-            "path": "/learn/meet-the-team"
-          }]
+          "routes": [
+            {
+              "title": "Acknowledgements",
+              "path": "/learn/acknowledgements"
+            },
+            {
+              "title": "Docs Contributors",
+              "path": "/learn/docs-contributors"
+            },
+            {
+              "title": "Meet the Team",
+              "path": "/learn/meet-the-team"
+            }
+          ]
        },
        {
          "title": "Blog",
--- a/beta/src/sidebarReference.json
+++ b/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",
-          "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",
+          "title": "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",