Upgrade react-collapse and fix design of scoped not found pages

Author: aurorascharff

package.json

@@ -40,7 +40,7 @@
     "parse-numeric-range": "^1.2.0",
     "raw-loader": "^4.0.2",
     "react": "19.2.7",
-    "react-collapsed": "4.0.4",
+    "react-collapsed": "^4.2.0",
     "react-dom": "19.2.7",
     "remark-frontmatter": "^4.0.1",
     "remark-gfm": "^3.0.1"

src/app/community/not-found.tsx

@@ -5,8 +5,15 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import sidebarCommunity from '../../sidebarCommunity.json';
 import {NotFoundContent} from 'components/Layout/NotFoundContent';
+import type {RouteItem} from 'components/Layout/getRouteMeta';
 
 export default function NotFound() {
-  return <NotFoundContent />;
+  return (
+    <NotFoundContent
+      routeTree={sidebarCommunity as RouteItem}
+      sectionPath="/community"
+    />
+  );
 }

src/app/learn/not-found.tsx

@@ -5,8 +5,15 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import sidebarLearn from '../../sidebarLearn.json';
 import {NotFoundContent} from 'components/Layout/NotFoundContent';
+import type {RouteItem} from 'components/Layout/getRouteMeta';
 
 export default function NotFound() {
-  return <NotFoundContent />;
+  return (
+    <NotFoundContent
+      routeTree={sidebarLearn as RouteItem}
+      sectionPath="/learn"
+    />
+  );
 }

src/app/reference/not-found.tsx

@@ -5,8 +5,15 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import sidebarReference from '../../sidebarReference.json';
 import {NotFoundContent} from 'components/Layout/NotFoundContent';
+import type {RouteItem} from 'components/Layout/getRouteMeta';
 
 export default function NotFound() {
-  return <NotFoundContent />;
+  return (
+    <NotFoundContent
+      routeTree={sidebarReference as RouteItem}
+      sectionPath="/reference"
+    />
+  );
 }

src/components/Layout/NotFoundContent.tsx

@@ -7,29 +7,40 @@
 
 'use client';
 
-import {MDXComponents} from 'components/MDX/MDXComponents';
+import PageHeading from 'components/PageHeading';
+import Intro from 'components/MDX/Intro';
+import Link from 'components/MDX/Link';
+import {getRouteMeta} from './getRouteMeta';
+import type {RouteItem} from './getRouteMeta';
 
-const {Intro, MaxWidth, p: P, a: A} = MDXComponents;
-
-export function NotFoundContent() {
+export function NotFoundContent({
+  routeTree,
+  sectionPath,
+}: {
+  routeTree: RouteItem;
+  sectionPath: string;
+}) {
+  const {breadcrumbs} = getRouteMeta(sectionPath, routeTree);
   return (
     <main className="min-w-0 isolate">
       <article className="font-normal break-words text-primary dark:text-primary-dark">
-        <div className="px-5 sm:px-12">
-          <div className="max-w-7xl mx-auto">
-            <MaxWidth>
+        <div className="ps-0">
+          <div>
+            <PageHeading title="Not Found" breadcrumbs={breadcrumbs} />
+          </div>
+          <div className="px-5 sm:px-12">
+            <div className="max-w-7xl mx-auto">
               <Intro>
-                <P>This page doesn’t exist.</P>
-                <P>
-                  If this is a mistake{', '}
-                  <A href="https://github.com/reactjs/react.dev/issues/new">
+                <p>This page doesn’t exist.</p>
+                <p>
+                  If this is a mistake,{' '}
+                  <Link href="https://github.com/reactjs/react.dev/issues/new">
                     let us know
-                  </A>
-                  {', '}
-                  and we will try to fix it!
-                </P>
+                  </Link>
+                  , and we will try to fix it!
+                </p>
               </Intro>
-            </MaxWidth>
+            </div>
           </div>
         </div>
       </article>

yarn.lock

@@ -7586,10 +7586,10 @@ raw-loader@^4.0.2:
     loader-utils "^2.0.0"
     schema-utils "^3.0.0"
 
-react-collapsed@4.0.4:
-  version "4.0.4"
-  resolved "https://registry.npmjs.org/react-collapsed/-/react-collapsed-4.0.4.tgz"
-  integrity sha512-8avvmnQxDYTgGZYVP9+3Z7doomxVEBoCkukpTmUHEIrAYvELZ5jNNfYCt/hCpHB6GmQbzZoDmnDupjsnQVgcCQ==
+react-collapsed@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/react-collapsed/-/react-collapsed-4.2.0.tgz#330613bd604e1d8b66832d931efb2b226925cbc0"
+  integrity sha512-8rQuV3wGTjBI4M1WzD5DpqCBRliHNDKEEFeC6tAQEVrRDic46xBOtySgMGjVVacIobEaMf7AiYlI5APCZIZtkg==
   dependencies:
     tiny-warning "^1.0.3"