generalize the up one level

snowystinger · snowystinger · commit 4a536897e6f1 · 2025-11-04T14:29:04.000+11:00
diff --git a/packages/dev/s2-docs/src/GoUpOneLink.tsx b/packages/dev/s2-docs/src/GoUpOneLink.tsx
diff --git a/packages/dev/s2-docs/src/Layout.tsx b/packages/dev/s2-docs/src/Layout.tsx
@@ -16,15 +16,15 @@ import {CodePlatterProvider} from './CodePlatter';
 import {ExampleSwitcher} from './ExampleSwitcher';
 import {getLibraryFromPage, getLibraryFromUrl, getLibraryLabel} from './library';
 import {getTextWidth} from './textWidth';
-import {GoUpOneLink} from './GoUpOneLink';
+import ChevronRightIcon from '@react-spectrum/s2/icons/ChevronRight';
 import {H2, H3, H4} from './Headings';
 import Header from './Header';
-import {Link} from './Link';
+import {Link, TitleLink} from './Link';
 import {MobileHeader} from './MobileHeader';
 import {PickerItem, Provider} from '@react-spectrum/s2';
 import {PropTable} from './PropTable';
 import {StateTable} from './StateTable';
-import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
+import {iconStyle, style} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {TypeLink} from './types';
 import {VersionBadge} from './VersionBadge';
 import {VisualExample} from './VisualExample';
@@ -64,15 +64,16 @@ const components = {
   ExampleList
 };
 
-const subPageComponents = {
+const subPageComponents = (previousPage?: Page) => ({
   ...components,
   h1: ({children, ...props}) => (
     <div className={style({display: 'flex', alignItems: 'center', gap: 8})}>
-      <GoUpOneLink />
+      <TitleLink href="./index.html">{previousPage?.exports?.title}</TitleLink>
+      <ChevronRightIcon styles={iconStyle({size: 'XL'})} />
       <h1 {...props} id="top" style={{'--width-per-em': getTextWidth(children)} as any} className={h1}>{children}</h1>
     </div>
   )
-};
+});
 
 function anchorId(children) {
   return children.replace(/\s/g, '-').replace(/[^a-zA-Z0-9-_]/g, '').toLowerCase();
@@ -145,6 +146,10 @@ export function Layout(props: PageProps & {children: ReactElement<any>}) {
   let title = getTitle(currentPage);
   let description = getDescription(currentPage);
   let isSubpage = currentPage.exports?.isSubpage;
+  let parentPage = pages.find(p => {
+    return p.url === currentPage.url.replace(/\/[^/]+\.html$/, '/index.html');
+  });
+  console.log(parentPage);
   return (
     <Provider elementType="html" locale="en" background="layer-1" styles={style({scrollPaddingTop: {default: 64, lg: 0}})}>
       <head>
@@ -255,7 +260,12 @@ export function Layout(props: PageProps & {children: ReactElement<any>}) {
                 <article
                   className={articleStyles({isWithToC: hasToC})}>
                   {currentPage.exports?.version && <VersionBadge version={currentPage.exports.version} />}
-                  {React.cloneElement(children, {components: isSubpage ? subPageComponents : components, pages})}
+                  {React.cloneElement(children, {
+                    components: isSubpage ?
+                      subPageComponents(parentPage) :
+                      components,
+                    pages
+                  })}
                 </article>
               </CodePlatterProvider>
               {hasToC && <aside
diff --git a/packages/dev/s2-docs/src/Link.tsx b/packages/dev/s2-docs/src/Link.tsx
@@ -47,3 +47,17 @@ export function ColorLink({type, ...props}: RACLinkProps & {type?: 'keyword' | '
 export function CodeLink(props: RACLinkProps) {
   return <RACLink {...props} style={({isHovered}) => ({textDecorationStyle: isHovered ? 'solid' : 'dotted'})} />;
 }
+
+const titleLink = style({
+  font: 'heading-3xl',
+  fontSize: {
+    // On mobile, adjust heading to fit in the viewport, and clamp between a min and max font size.
+    default: 'clamp(35px, (100vw - 32px) / var(--width-per-em), 55px)',
+    lg: 'heading-3xl'
+  },
+  marginY: 0
+});
+
+export function TitleLink(props: RACLinkProps) {
+  return <RACLink {...props} className={titleLink} />;
+}
