Add title and meta description

docs/src/app/new/(content)/layout.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import type { Metadata } from 'next/types';
 import * as SideNav from 'docs/src/components/SideNav';
 import * as QuickNav from 'docs/src/components/quick-nav/QuickNav';
 import './layout.css';
@@ -161,3 +162,8 @@ const nav = [
     ],
   },
 ];
+// Title and description are pulled from <h1> and <Subtitle> in the MDX.
+export const metadata: Metadata = {
+  title: null,
+  description: null,
+};

docs/src/components/TableCode.tsx

@@ -1,13 +1,14 @@
 import * as React from 'react';
 import { Code } from './Code';
+import { getChildrenText } from '../getChildrenText';
 
 interface TableCodeProps extends React.ComponentProps<'code'> {
   printWidth?: number;
 }
 
 /** An inline code component that breaks long union types into multiple lines */
 export function TableCode({ children, printWidth = 40, ...props }: TableCodeProps) {
-  const text = getTextContents(children);
+  const text = getChildrenText(children);
 
   if (text.includes('|') && text.length > printWidth) {
     const unionGroups: React.ReactNode[][] = [];
@@ -21,17 +22,17 @@ export function TableCode({ children, printWidth = 40, ...props }: TableCodeProp
         return;
       }
 
-      if (getTextContents(child).trim() === '|' && depth < 1) {
+      if (getChildrenText(child).trim() === '|' && depth < 1) {
         groupIndex += 1;
         unionGroups.push([]);
         return;
       }
 
-      if (getTextContents(child).trim() === '(') {
+      if (getChildrenText(child).trim() === '(') {
         depth += 1;
       }
 
-      if (getTextContents(child).trim() === ')') {
+      if (getChildrenText(child).trim() === ')') {
         depth -= 1;
       }
 
@@ -58,31 +59,3 @@ export function TableCode({ children, printWidth = 40, ...props }: TableCodeProp
 
   return <Code {...props}>{children}</Code>;
 }
-
-function getTextContents(node?: React.ReactNode): string {
-  if (hasChildren(node)) {
-    return getTextContents(node.props?.children);
-  }
-
-  if (Array.isArray(node)) {
-    return node.map(getTextContents).flat().filter(Boolean).join('');
-  }
-
-  if (typeof node === 'string') {
-    return node;
-  }
-
-  return '';
-}
-
-function hasChildren(
-  element?: React.ReactNode,
-): element is React.ReactElement<React.PropsWithChildren> {
-  return (
-    React.isValidElement(element) &&
-    typeof element.props === 'object' &&
-    !!element.props &&
-    'children' in element.props &&
-    Boolean(element.props.children)
-  );
-}

docs/src/getChildrenText.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+
+export function getChildrenText(children?: React.ReactNode): string {
+  if (hasChildren(children)) {
+    return getChildrenText(children.props?.children);
+  }
+
+  if (Array.isArray(children)) {
+    return children.map(getChildrenText).flat().filter(Boolean).join('');
+  }
+
+  if (typeof children === 'string') {
+    return children;
+  }
+
+  return '';
+}
+
+function hasChildren(
+  element?: React.ReactNode,
+): element is React.ReactElement<React.PropsWithChildren> {
+  return (
+    React.isValidElement(element) &&
+    typeof element.props === 'object' &&
+    !!element.props &&
+    'children' in element.props &&
+    Boolean(element.props.children)
+  );
+}

docs/src/mdx-components.tsx

@@ -8,14 +8,20 @@ import { PropsTable } from './components/reference/PropsTable';
 import { AttributesTable } from './components/reference/AttributesTable';
 import { CssVariablesTable } from './components/reference/CssVariablesTable';
 import { TableCode } from './components/TableCode';
+import { getChildrenText } from './getChildrenText';
 
 interface MDXComponents {
   [key: string]: React.FC<any> | MDXComponents;
 }
 
 export const mdxComponents: MDXComponents = {
   code: (props) => <Code className="mx-[0.1em]" {...props} />,
-  h1: (props) => <h1 className="mb-4 text-3xl font-bold" {...props} />,
+  h1: (props) => (
+    <React.Fragment>
+      <h1 className="mb-4 text-3xl font-bold" {...props} />
+      <title>{`${getChildrenText(props.children)} · Base UI`}</title>
+    </React.Fragment>
+  ),
   h2: (props) => (
     <div className="mt-10 mb-5">
       <h2 className="mb-4 scroll-mt-6 text-xl font-medium" {...props} />
@@ -58,7 +64,12 @@ export const mdxComponents: MDXComponents = {
   AttributesTable: (props) => <AttributesTable className="mt-5 mb-6" {...props} />,
   CssVariablesTable: (props) => <CssVariablesTable className="mt-5 mb-6" {...props} />,
   PropsTable: (props) => <PropsTable className="mt-5 mb-6" {...props} />,
-  Subtitle: (props) => <p className="-mt-2 mb-5 text-lg text-gray" {...props} />,
+  Subtitle: (props) => (
+    <React.Fragment>
+      <p className="-mt-2 mb-5 text-lg text-gray" {...props} />
+      <meta name="description" content={getChildrenText(props.children)} />
+    </React.Fragment>
+  ),
 };
 
 export const inlineMdxComponents: MDXComponents = {