add title font size resizing behavior to s2 docs

Author: LFDanLu

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

@@ -14,6 +14,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';
 
@@ -111,6 +112,7 @@ export function Layout(props: PageProps & {children: ReactElement<any>}) {
           }
         })}>
         <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;
+}