support subpage list under the ToC

Author: LFDanLu

packages/dev/s2-docs/pages/s2/styling.mdx

@@ -8,6 +8,10 @@ export default Layout;
 export const section = 'Guides';
 export const tags = ['style', 'macro', 'spectrum', 'custom'];
 export const description = 'Styling in React Spectrum';
+export const relatedPages = [
+  {title: 'Advanced', url: './styling/advanced.html'},
+  {title: 'Reference Table', url: './styling/reference.html'}
+];
 
 # Styling
 
@@ -165,23 +169,6 @@ Type scales include: UI, Body, Heading, Title, Detail, and Code. Each scale has
   </Content>
 </InlineAlert>
 
-## Conditional styles
-
-Define conditional values as objects to handle media queries, UI states (hover/press), and variants. This keeps all values for a property together.
-
-```tsx
-<div
-  className={style({
-    padding: {
-      default: 8,
-      lg: 32
-    }
-  })}
-/>
-```
-
-Conditions are mutually exclusive and ordered. The macro uses CSS cascade layers so the last matching condition wins without specificity issues.
-
 ## CSS optimization
 
 The `style` macro relies on CSS bundling and minification for optimal output. Follow these best practices:

packages/dev/s2-docs/pages/s2/styling/Advanced.mdx

@@ -1,6 +1,7 @@
 import {Layout} from '../../../src/Layout';
 export default Layout;
 
+export const omitFromNav = true;
 export const tags = ['style', 'macro', 'spectrum', 'custom', 'advanced'];
 export const description = 'Style macro advanced usage guide';
 

packages/dev/s2-docs/pages/s2/styling/Reference.mdx

@@ -6,6 +6,7 @@ import {StyleMacroProperties} from '../../../src/types';
 import {getPropertyDefinitions, getShorthandDefinitions} from '../../../src/styleProperties';
 export default Layout;
 
+export const omitFromNav = true;
 export const tags = ['style', 'macro', 'spectrum', 'custom', 'values', 'reference'];
 export const description = 'Reference table for the `style` macro';
 

packages/dev/s2-docs/src/Layout.tsx

@@ -262,6 +262,9 @@ export function Layout(props: PageProps & {children: ReactElement<any>}) {
                   <div className={style({font: 'title', minHeight: 32, paddingX: 12, display: 'flex', alignItems: 'center'})}>Contents</div>
                 )}
                 <Toc toc={currentPage.tableOfContents?.[0]?.children ?? []} />
+                {currentPage.exports?.relatedPages && (
+                  <RelatedPages pages={currentPage.exports.relatedPages} />
+                )}
               </aside>
             </main>
           </div>
@@ -286,10 +289,31 @@ function Toc({toc}) {
   );
 }
 
+function RelatedPages({pages}: {pages: Array<{title: string, url: string}>}) {
+  return (
+    <div className={style({paddingTop: 24})}>
+      <div className={style({font: 'title', minHeight: 32, paddingX: 12, display: 'flex', alignItems: 'center'})}>Related pages</div>
+      <OnPageNav>
+        <SideNav>
+          {pages.map((page, i) => (
+            <SideNavItem key={i}>
+              <SideNavLink href={page.url}>{page.title}</SideNavLink>
+            </SideNavItem>
+          ))}
+        </SideNav>
+      </OnPageNav>
+    </div>
+  );
+}
+
 function MobileToc({toc, currentPage}) {
+  let relatedPages = currentPage.exports?.relatedPages;
   return (
     <MobileOnPageNav currentPage={currentPage}>
       {renderMobileToc(toc)}
+      {relatedPages && relatedPages.map((page, i) => (
+        <PickerItem key={`related-${i}`} id={page.url} href={page.url}>{page.title}</PickerItem>
+      ))}
     </MobileOnPageNav>
   );
 }

packages/dev/s2-docs/src/Nav.tsx

@@ -11,10 +11,10 @@ export function Nav({pages, currentPage}: PageProps) {
   let currentLibrary = getLibraryFromPage(currentPage);
   let sections = new Map();
   for (let page of pages) {
-    if (page.exports?.hideNav || page.exports?.hideFromSearch) {
+    if (page.exports?.hideNav || page.exports?.hideFromSearch || page.exports?.omitFromNav) {
       continue;
     }
-    
+
     let library = getLibraryFromPage(page);
     if (library !== currentLibrary) {
       continue;