Browse Source

[Beta] Sidebar groups (#5402)

main
dan 2 years ago
committed by GitHub
parent
commit
ddde7e8fdc
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 2
      beta/src/components/Layout/Nav/Nav.tsx
  2. 22
      beta/src/components/Layout/Sidebar/SidebarRouteTree.tsx
  3. 6
      beta/src/components/Layout/useRouteMeta.tsx
  4. 2
      beta/src/components/MDX/HomepageHero.tsx
  5. 2
      beta/src/components/MDX/MDXComponents.tsx
  6. 2
      beta/src/components/Search.tsx
  7. 2
      beta/src/content/index.md
  8. 1
      beta/src/content/learn/meet-the-team.md
  9. 4
      beta/src/content/reference/react-dom/client/index.md
  10. 2
      beta/src/content/reference/react-dom/components/index.md
  11. 8
      beta/src/content/reference/react-dom/index.md
  12. 10
      beta/src/content/reference/react-dom/server/index.md
  13. 6
      beta/src/content/reference/react/apis.md
  14. 4
      beta/src/content/reference/react/components.md
  15. 2
      beta/src/content/reference/react/index.md
  16. 6
      beta/src/content/reference/react/legacy.md
  17. 25
      beta/src/sidebarLearn.json
  18. 72
      beta/src/sidebarReference.json

2
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>

22
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`}>
<Fragment key={`${sectionHeader}-${level}-separator`}>
{index !== 0 && (
<li
role="separator"
className="my-2 ml-5 border-b border-border dark:border-border-dark"
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 {

6
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 {

2
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.

2
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>

2
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

2
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)

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

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

4
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)

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

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

8
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>

10
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>

6
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.

4
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.

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

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

6
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>

25
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": "Docs Contributors",
"path": "/learn/docs-contributors"
}, {
},
{
"title": "Meet the Team",
"path": "/learn/meet-the-team"
}]
}
]
},
{
"title": "Blog",

72
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",

Loading…
Cancel
Save