add title font size resizing behavior to s2 docs

Author: LFDanLu

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

@@ -15,6 +15,7 @@ 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 {TitleResizer} from './TitleResizer';
 import {TypeLink} from './types';
 import {VisualExample} from './VisualExample';
 
@@ -96,28 +97,8 @@ export function Layout(props: PageProps & {children: ReactElement<any>}) {
             lg: 'none'
           }
         })}>
-        <div
-          className={style({
-            isolation: 'isolate',
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            maxWidth: {
-              default: 'full',
-              lg: 1280
-            },
-            marginX: 'auto',
-            marginY: 0,
-            padding: {
-              default: 0,
-              lg: 12
-            },
-            paddingBottom: 0,
-            gap: {
-              default: 0,
-              lg: 12
-            }
-          })}>
+        <div className={style({isolation: 'isolate', width: 'full'})}>
+          <TitleResizer />
           <Header pages={pages} currentPage={currentPage} />
           <MobileHeader
             toc={<MobileToc key="toc" toc={currentPage.tableOfContents ?? []} />}

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

@@ -0,0 +1,47 @@
+'use client';
+
+import {useCallback, useRef} from 'react';
+import {useLayoutEffect, useResizeObserver} from '@react-aria/utils';
+
+export function TitleResizer() {
+  let titleRef = useRef<HTMLHeadingElement>(null);
+
+  // Size the title to fit the available space.
+  let updateTitleFontSize = useCallback(() => {
+    if (titleRef.current) {
+      let fontSize = parseInt(window.getComputedStyle(titleRef.current).fontSize, 10);
+
+      // Constrain font size to 58px, or 10% of the window width, whichever is smaller.
+      let maxFontSize = Math.min(58, Math.round(window.innerWidth * 0.1));
+      if (fontSize > maxFontSize) {
+        fontSize = maxFontSize;
+        titleRef.current.style.fontSize = maxFontSize + 'px';
+      }
+
+      // If the font size is less than the maximum font size,
+      // increase the font size until it overflows.
+      while (fontSize < maxFontSize && titleRef.current.scrollWidth <= titleRef.current.clientWidth) {
+        fontSize++;
+        titleRef.current.style.fontSize = fontSize + 'px';
+      }
+
+      // Reduce the font size until it doesn't overflow.
+      while (fontSize > 10 && titleRef.current.scrollWidth > titleRef.current.clientWidth + 1) {
+        fontSize--;
+        titleRef.current.style.fontSize = fontSize + 'px';
+      }
+    }
+  }, []);
+
+  useLayoutEffect(() => {
+    titleRef.current = document.querySelector('h1');
+    updateTitleFontSize();
+  }, [updateTitleFontSize]);
+
+  useResizeObserver({
+    ref: titleRef,
+    onResize: updateTitleFontSize
+  });
+
+  return null;
+}