add 404 page

LFDanLu · LFDanLu · commit 1d5918e66fc7 · 2025-10-03T10:51:44.000-07:00
diff --git a/packages/dev/s2-docs/pages/error.mdx b/packages/dev/s2-docs/pages/error.mdx
@@ -0,0 +1,7 @@
+import Error from '../src/Error';
+import {Layout} from '../src/Layout';
+export default Layout;
+
+import docs from 'docs:@react-spectrum/s2';
+
+<Error />
diff --git a/packages/dev/s2-docs/pages/s2/Accordion.mdx b/packages/dev/s2-docs/pages/s2/Accordion.mdx
@@ -28,6 +28,8 @@ import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 
 ## Expanding
 
+As described in the docs for [CalendarDate](aweawg.html)
+
 Use the `defaultExpandedKeys` or `expandedKeys` prop to set the expanded items, and `onExpandedChange` to handle user interactions. The expanded keys correspond to the `id` prop of each `<Disclosure>`.
 
 ```tsx render
diff --git a/packages/dev/s2-docs/src/Error.tsx b/packages/dev/s2-docs/src/Error.tsx
@@ -0,0 +1,17 @@
+'use client';
+
+// eslint-disable-next-line monorepo/no-internal-import
+import BrowserError from '@react-spectrum/s2/illustrations/linear/BrowserError';
+import {Content, Heading, IllustratedMessage} from '@react-spectrum/s2';
+
+export default function Error() {
+  return (
+    <div style={{display: 'flex', alignItems: 'center', height: '50vh', justifyContent: 'center', flexDirection: 'row'}}>
+      <IllustratedMessage>
+        <BrowserError />
+        <Heading>Error 404: Page not found</Heading>
+        <Content>This page isn't available. Try checking the URL or visit a different page.</Content>
+      </IllustratedMessage>
+    </div>
+  );
+}
diff --git a/packages/dev/s2-docs/src/Layout.tsx b/packages/dev/s2-docs/src/Layout.tsx
@@ -74,8 +74,19 @@ const getDescription = (currentPage: Page): string => {
   return library ? `Documentation for ${pageTitle} in ${library}.` : `Documentation for ${pageTitle}.`;
 };
 
+let articleStyles = style({
+  maxWidth: {
+    default: 'none',
+    isWithToC: 768
+  },
+  width: 'full',
+  height: 'fit'
+});
+
+
 export function Layout(props: PageProps & {children: ReactElement<any>}) {
   let {pages, currentPage, children} = props;
+  let hasToC = currentPage.tableOfContents?.[0]?.children && currentPage.tableOfContents[0].children.length > 0;
   return (
     <Provider elementType="html" locale="en" background="layer-1" styles={style({scrollPaddingTop: {default: 64, lg: 0}})}>
       <head>
@@ -156,11 +167,7 @@ export function Layout(props: PageProps & {children: ReactElement<any>}) {
                 }
               })}>
               <article
-                className={style({
-                  maxWidth: 768,
-                  width: 'full',
-                  height: 'fit'
-                })}>
+                className={articleStyles({isWithToC: hasToC})}>
                 {React.cloneElement(children, {components})}
               </article>
               <aside
@@ -177,10 +184,10 @@ export function Layout(props: PageProps & {children: ReactElement<any>}) {
                     lg: 'block'
                   }
                 })}>
-                {currentPage.tableOfContents?.[0]?.children && currentPage.tableOfContents[0].children.length > 0 && (
+                {hasToC && (
                   <div className={style({font: 'title', minHeight: 32, paddingX: 12, display: 'flex', alignItems: 'center'})}>Contents</div>
                 )}
-                <Toc toc={currentPage.tableOfContents?.[0]?.children ?? []} /> 
+                <Toc toc={currentPage.tableOfContents?.[0]?.children ?? []} />
               </aside>
             </main>
           </div>
diff --git a/packages/dev/s2-docs/src/client.tsx b/packages/dev/s2-docs/src/client.tsx
@@ -15,27 +15,35 @@ let updateRoot = hydrate({
 // and in a React transition, stream in the new page. Once complete, we'll pushState to
 // update the URL in the browser.
 async function navigate(pathname: string, push = false) {
-  let res = fetchRSC<ReactElement>(pathname.replace('.html', '.rsc'));
-  let currentPath = location.pathname;
-  let [newBasePath, newPathAnchor] = pathname.split('#');
+  try {
+    let res = await fetchRSC<ReactElement>(pathname.replace('.html', '.rsc'));
+    let currentPath = location.pathname;
+    let [newBasePath, newPathAnchor] = pathname.split('#');
 
-  updateRoot(res, () => {
-    if (push) {
-      history.pushState(null, '', pathname);
-      push = false;
-    }
+    updateRoot(res, () => {
+      if (push) {
+        history.pushState(null, '', pathname);
+        push = false;
+      }
 
-    // Reset scroll if navigating to a different page without an anchor, primarily for the mobile case.
-    // Otherwise, make sure to scroll the anchor into view if any
-    if (currentPath !== newBasePath && !newPathAnchor) {
-      window.scrollTo(0, 0);
-    } else if (newPathAnchor) {
-      let element = document.getElementById(newPathAnchor);
-      if (element) {
-        element.scrollIntoView();
+      // Reset scroll if navigating to a different page without an anchor
+      if (currentPath !== newBasePath && !newPathAnchor) {
+        window.scrollTo(0, 0);
+      } else if (newPathAnchor) {
+        let element = document.getElementById(newPathAnchor);
+        if (element) {
+          element.scrollIntoView();
+        }
+      }
+    });
+  } catch {
+    let errorRes = await fetchRSC<ReactElement>('/error.rsc');
+    updateRoot(errorRes, () => {
+      if (push) {
+        history.pushState(null, '', '/error.html');
       }
-    }
-  });
+    });
+  }
 }
 
 // Intercept link clicks to perform RSC navigation.
