docs: Refine typography

Makefile

@@ -156,6 +156,7 @@ build-s2-docs:
 	yarn workspace @react-spectrum/s2-docs generate:og
 	REGISTRY_URL=$(PUBLIC_URL)/registry node scripts/buildRegistry.mjs
 	REGISTRY_URL=$(PUBLIC_URL)/registry yarn build:s2-docs --public-url $(PUBLIC_URL)
+	node scripts/createFeedS2.mjs
 	mkdir -p $(DIST_DIR)
 	mv packages/dev/s2-docs/dist/* $(DIST_DIR)
 	mkdir -p $(DIST_DIR)/registry

package.json

@@ -185,6 +185,7 @@
     "recast": "^0.23",
     "recursive-readdir": "^2.2.2",
     "regenerator-runtime": "0.13.3",
+    "rehype-stringify": "^9.0.4",
     "rimraf": "^6.0.1",
     "sharp": "^0.33.5",
     "storybook": "^8.6.14",

packages/@react-spectrum/s2/src/Content.tsx

@@ -24,7 +24,12 @@ interface ContentProps extends UnsafeStyles, SlotProps {
   children: ReactNode,
   styles?: StyleString,
   isHidden?: boolean,
-  id?: string
+  id?: string,
+  itemProp?: string,
+  itemScope?: boolean,
+  itemType?: string,
+  itemID?: string,
+  itemRef?: string
 }
 
 interface HeadingProps extends Omit<ContentProps, 'children'> {

packages/dev/s2-docs/pages/react-aria/blog/ColorEditorExample.tsx

@@ -75,7 +75,9 @@ export function ColorEditorExample() {
         padding: {
           default: 12,
           lg: 24
-        }
+        },
+        maxWidth: '--text-width',
+        marginX: 'auto'
       })}>
       <ColorPicker defaultValue="#5100FF">
         {({color}) => (

packages/dev/s2-docs/pages/react-aria/blog/SubmenuAnimation.tsx

@@ -120,7 +120,6 @@ export function SubmenuAnimation(): JSX.Element {
       className={style({
         backgroundColor: 'layer-1',
         borderRadius: 'xl',
-        marginY: 32,
         padding: {
           default: 12,
           lg: 24

packages/dev/s2-docs/pages/react-aria/blog/accessible-color-descriptions.mdx

@@ -16,7 +16,6 @@ export default Layout;
 
 import docs from 'docs:@react-spectrum/s2';
 import React from 'react';
-import {Byline} from '../../../src/BlogList';
 import {ColorEditorExample} from './ColorEditorExample';
 
 export const hideNav = true;
@@ -29,7 +28,6 @@ export const section = 'Blog';
 export const isSubpage = true;
 
 # Accessible Color Descriptions for Improved Color Pickers
-<Byline author={author} authorLink={authorLink} date={date} />
 
 Recently, we released a suite of color picker components in React Aria and React Spectrum. These components help users choose a color in various ways, including a 2D [ColorArea](../ColorArea.html), channel-based [ColorSlider](../ColorSlider.html), circular [ColorWheel](../ColorWheel.html), preset [ColorSwatchPicker](../ColorSwatchPicker.html), and a hex value [ColorField](../ColorField.html). You can compose these individual pieces together to create a full [ColorPicker](../ColorPicker.html) with whatever custom layout or configuration you need.
 

packages/dev/s2-docs/pages/react-aria/blog/building-a-button-part-1.mdx

@@ -16,7 +16,6 @@ export default Layout;
 
 import docs from 'docs:@react-spectrum/s2';
 import React from 'react';
-import {Byline} from '../../../src/BlogList';
 
 export const hideNav = true;
 export const tags = ['react aria', 'react spectrum', 'react', 'spectrum', 'interactions', 'button', 'touch'];
@@ -28,7 +27,6 @@ export const section = 'Blog';
 export const isSubpage = true;
 
 # Building a Button Part 1: Press Events
-<Byline author={author} authorLink={authorLink} date={date} />
 
 UI development is really hard. While building components has become much easier with modern UI frameworks like React, handling interactions across devices and supporting proper accessibility and internationalization is still extraordinarily difficult. Building UIs has a very [long tail](https://en.wikipedia.org/wiki/Long_tail): it's fairly easy to get the basics for a given component working, but there are many details to consider, and these add up to a majority of the work.
 

packages/dev/s2-docs/pages/react-aria/blog/building-a-button-part-2.mdx

@@ -15,7 +15,6 @@ export default Layout;
 
 import docs from 'docs:@react-spectrum/s2';
 import React from 'react';
-import {Byline} from '../../../src/BlogList';
 
 export const hideNav = true;
 export const tags = ['react aria', 'react spectrum', 'react', 'interactions', 'button', 'touch', 'hover', 'web development', 'javascript', 'css'];
@@ -27,7 +26,6 @@ export const section = 'Blog';
 export const isSubpage = true;
 
 # Building a Button Part 2: Hover Interactions
-<Byline author={author} authorLink={authorLink} date={date} />
 
 This is the second post in our three part series on building a button component. In the [first post](building-a-button-part-1.html), we covered how React Spectrum and React Aria implement adaptive press events across mouse, touch, keyboard, and screen readers. Today, we'll cover hover interactions.
 

packages/dev/s2-docs/pages/react-aria/blog/building-a-button-part-3.mdx

@@ -15,7 +15,6 @@ export default Layout;
 
 import docs from 'docs:@react-spectrum/s2';
 import React from 'react';
-import {Byline} from '../../../src/BlogList';
 
 export const hideNav = true;
 export const tags = ['react aria', 'react spectrum', 'react', 'interactions', 'button', 'keyboard', 'focus', 'web development', 'javascript', 'css'];
@@ -27,7 +26,6 @@ export const section = 'Blog';
 export const isSubpage = true;
 
 # Building a Button Part 3: Keyboard Focus Behavior
-<Byline author={author} authorLink={authorLink} date={date} />
 
 This is the last post in our three part series on building a button component. In the [first post](building-a-button-part-1.html), we covered how React Spectrum and React Aria implement adaptive press events across mouse, touch, keyboard, and screen readers. In the [second post](building-a-button-part-2.html), we covered hover interactions. Today, we'll cover keyboard focus behavior.
 

packages/dev/s2-docs/pages/react-aria/blog/building-a-combobox.mdx

@@ -19,7 +19,6 @@ export default Layout;
 
 import docs from 'docs:@react-spectrum/s2';
 import React from 'react';
-import {Byline} from '../../../src/BlogList';
 
 export const hideNav = true;
 export const tags = ['combobox', 'accessibility', 'mobile', 'react spectrum', 'react', 'spectrum', 'interactions', 'touch'];
@@ -31,7 +30,6 @@ export const section = 'Blog';
 export const isSubpage = true;
 
 # Creating an accessible autocomplete experience
-<Byline author={author} authorLink={authorLink} date={date} />
 
 After many months of research, development, and extensive testing across browsers, devices, and assistive technology, we're excited to announce that the React Spectrum [ComboBox](../../s2/ComboBox.html) component and React Aria [useComboBox](https://react-spectrum.adobe.com/react-aria/useComboBox.html) hook are now available! We've focused on the following areas to help you build quality autocomplete experiences.
 

packages/dev/s2-docs/pages/react-aria/blog/creating-a-pointer-friendly-submenu-experience.mdx

@@ -17,7 +17,6 @@ export default Layout;
 
 import docs from 'docs:@react-spectrum/s2';
 import React from 'react';
-import {Byline} from '../../../src/BlogList';
 
 export const hideNav = true;
 export const tags = ['react aria', 'react spectrum', 'react', 'spectrum', 'interactions', 'submenu', 'pointer'];
@@ -29,7 +28,6 @@ export const section = 'Blog';
 export const isSubpage = true;
 
 # Creating a pointer-friendly submenu experience
-<Byline author={author} authorLink={authorLink} date={date} />
 
 We are excited to announce support of submenus in the latest release of [React Spectrum](../../s2/Menu.html#submenus) and [React Aria](../Menu.html#submenus)! In the process of adding this feature, we found ourselves solving some unique challenges while working to make submenus user-friendly and accessible across an array of devices and input types. In doing so, we wanted to share our thought process in solving one of the challenges we faced along the way.
 

packages/dev/s2-docs/pages/react-aria/blog/date-and-time-pickers-for-all.mdx

@@ -18,7 +18,6 @@ export default Layout;
 
 import docs from 'docs:@react-spectrum/s2';
 import React from 'react';
-import {Byline} from '../../../src/BlogList';
 import {DateField, RangeCalendar} from '@react-spectrum/s2';
 import {today, getLocalTimeZone} from '@internationalized/date';
 import RangeCalendarExample from './RangeCalendarExample';
@@ -34,7 +33,6 @@ export const section = 'Blog';
 export const isSubpage = true;
 
 # Date and Time Pickers for All
-<Byline author={author} authorLink={authorLink} date={date} />
 
 We are very excited to announce the release of the [React Aria](https://react-spectrum.adobe.com/react-aria/useNumberField.html) and [React Spectrum](../../s2/DatePicker.html) date and time picker components! This includes a full suite of fully featured components and hooks including calendars, date and time fields, and range pickers, all with a focus on internationalization and accessibility. It also includes [@internationalized/date](../../internationalized/date/index.html), a brand new framework-agnostic library for locale-aware date and time manipulation.
 

packages/dev/s2-docs/pages/react-aria/blog/drag-and-drop.mdx

@@ -22,7 +22,6 @@ export default Layout;
 
 import docs from 'docs:@react-spectrum/s2';
 import React from 'react';
-import {Byline} from '../../../src/BlogList';
 
 export const hideNav = true;
 export const tags = ['drag and drop', 'dnd', 'components', 'accessibility', 'keyboard', 'mobile', 'react spectrum', 'react', 'spectrum', 'interactions', 'touch'];
@@ -34,7 +33,6 @@ export const section = 'Blog';
 export const isSubpage = true;
 
 # Taming the dragon: Accessible drag and drop
-<Byline author={author} authorLink={authorLink} date={date} />
 
 We are excited to announce the release of drag and drop support in [React Aria](../dnd.html) and [React Spectrum](../../s2/dnd.html)! This includes a suite of hooks for implementing drag and drop interactions, with support for both mouse and touch, as well as full parity for keyboard and screen reader input. We've designed these hooks with the following features in mind:
 
@@ -59,7 +57,9 @@ After years of research, development, and extensive testing across many devices
 
 Drag and drop starts with a drag source, implemented using the [useDrag](../useDrag.html) hook, which provides data to be dragged. Multiple items can be dragged at once, and each item can include several representations in different data formats so that they can be dropped in many compatible locations. The [useDrop](../useDrop.html) hook can be used to implement a drop target, which accepts dragged items containing specific data types.
 
-<Anatomy role="img" aria-label="Drag and drop anatomy diagram, showing drag source, drag preview, and drop target." />
+<div style={{maxWidth: 'calc(var(--text-width) + 64px)', margin: '0 auto'}}>
+  <Anatomy role="img" aria-label="Drag and drop anatomy diagram, showing drag source, drag preview, and drop target." />
+</div>
 
 For mouse and touch screen users, React Aria uses the native [HTML drag and drop API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API) under the hood. This means items can be dragged within the browser window, between browser windows, or even outside the browser into external native applications (e.g. email programs). External items such as files or directories from the user's device may also be dragged in.
 
@@ -82,7 +82,7 @@ All of these accessibility features are implemented behind the scenes using the
 Collection components such as lists or tables are treated as a single drop target, so that users can easily tab past them to get to the next drop target without going through every item. Within a droppable collection, keys such as `ArrowDown` and `ArrowUp` can be used to select a drop position, such as on the collection itself, on an item, or between items. Drop indicator elements may be added between items to show the user where dropped data will be inserted, and include accessibility labels such as "Insert between item A and item B".
 
 <figure style={{display: 'flex', flexDirection: 'column', alignItems: 'center', margin: '20px 0'}}>
-  <div style={{display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: 50, marginBottom: 4, background: 'var(--anatomy-gray-100)', padding: 32, width: 'calc(100% - 64px)', borderRadius: 4}}>
+  <div style={{display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: 50, marginBottom: 4, background: 'var(--anatomy-gray-100)', padding: 32, width: 'calc(100% - 64px)', borderRadius: 'var(--anatomy-radius)'}}>
     <RootDropPosition role="img" aria-label="Root drop position diagram, showing the root drop position." />
     <OnDropPosition role="img" aria-label="On drop position diagram, showing the on drop position." />
     <BetweenDropPosition role="img" aria-label="Between drop position diagram, showing the between drop position." />

packages/dev/s2-docs/pages/react-aria/blog/how-we-internationalized-our-numberfield.mdx

@@ -19,7 +19,6 @@ export default Layout;
 
 import docs from 'docs:@react-spectrum/s2';
 import React from 'react';
-import {Byline} from '../../../src/BlogList';
 import {NumberField} from '@react-spectrum/s2';
 
 export const hideNav = true;
@@ -32,7 +31,6 @@ export const section = 'Blog';
 export const isSubpage = true;
 
 # How we internationalized our number field
-<Byline author={author} authorLink={authorLink} date={date} />
 
 Number fields are commonly used form components, but are frequently not a great user experience. They often lack support for advanced formatting, such as currency and unit values, and do not provide a localized experience for users around the world. In this post, we'll discuss how we approached building our number field component with support for formatting and internationalization in mind.
 

packages/dev/s2-docs/pages/react-aria/blog/index.mdx

@@ -8,7 +8,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License. */}
 
 import {Layout} from '../../../src/Layout';
-import {BlogList} from '../../../src/BlogList';
+import {PostList} from '../../../src/PostList';
 
 export default Layout;
 
@@ -17,8 +17,9 @@ export const section = 'Blog';
 export const title = 'Blog';
 export const hideFromSearch = true;
 export const tags = ['blog', 'articles', 'posts'];
+export const isPostList = true;
 
 # Blog
 
-<BlogList pages={props.pages.filter(page => page.name.startsWith('react-aria/blog/') && !page.name.endsWith('index.html')) ?? []} />
+<PostList currentPage={props.currentPage} pages={props.pages.filter(page => page.name.startsWith('react-aria/blog/') && !page.name.endsWith('index.html')) ?? []} />
 

packages/dev/s2-docs/pages/react-aria/blog/rtl-date-time.mdx

@@ -18,7 +18,6 @@ export default Layout;
 
 import docs from 'docs:@react-spectrum/s2';
 import React from 'react';
-import {Byline} from '../../../src/BlogList';
 
 export const hideNav = true;
 export const tags = ['date picker', 'date', 'time', 'calendar', 'components', 'accessibility', 'react spectrum', 'react', 'spectrum'];
@@ -30,7 +29,6 @@ export const section = 'Blog';
 export const isSubpage = true;
 
 # Improving Internationalization Support in Our Date and Time Components
-<Byline author={author} authorLink={authorLink} date={date} />
 
 Internationalization is a core feature of our Date and Time components. We support 13 different calendar systems as well as locale-specific formatting, number systems, and 12 and 24 hour time. However, we identified an issue in our support for several right-to-left (RTL) languages where in some, the format of the date and time fields was incorrect. While investigating this bug, we faced several challenges in ensuring accurate date and time representation in RTL languages and implemented various strategies that we'd like to share.
 

packages/dev/s2-docs/pages/react-aria/examples/crud.mdx

@@ -8,6 +8,7 @@ import {ExampleApp} from '../../../src/ExampleApp';
 import {ComponentList} from '../../../src/ComponentCard';
 
 export const hideNav = true;
+export const isSubpage = true;
 export const section = 'Examples';
 export const keywords = ['react-aria', 'example', 'table', 'search', 'filters', 'taggroup', 'actions', 'form', 'menu', 'popover', 'searchfield', 'dropzone', 'crud'];
 export const description = 'Table with search, filters, column resizing, and form validation.';

packages/dev/s2-docs/pages/react-aria/examples/emoji-picker.mdx

@@ -4,6 +4,7 @@ export default Layout;
 import {ComponentList} from '../../../src/ComponentCard';
 
 export const hideNav = true;
+export const isSubpage = true;
 export const section = 'Examples';
 export const keywords = ['react-aria', 'example', 'select', 'popover', 'autocomplete', 'search', 'searchfield', 'virtualizer', 'listbox'];
 export const description = 'With autocomplete, virtualized scrolling, and keyboard navigation.';

packages/dev/s2-docs/pages/react-aria/examples/index.mdx

@@ -4,6 +4,7 @@ export default Layout;
 export const section = 'Overview';
 export const hideFromSearch = true;
 export const title = 'Examples';
+export const isPostList = true;
 
 # Examples
 

packages/dev/s2-docs/pages/react-aria/examples/ios-list.mdx

@@ -5,6 +5,7 @@ import '../../../tailwind/tailwind.css';
 import {ComponentList} from '../../../src/ComponentCard';
 
 export const hideNav = true;
+export const isSubpage = true;
 export const section = 'Examples';
 export const keywords = ['react-aria', 'example', 'gridlist', 'gesture', 'framer motion', 'tailwind'];
 export const description = 'A GridList with Framer Motion swipe gestures and layout animations.';

packages/dev/s2-docs/pages/react-aria/examples/kanban.mdx

@@ -5,6 +5,7 @@ import '../../../tailwind/tailwind.css';
 import {ComponentList} from '../../../src/ComponentCard';
 
 export const hideNav = true;
+export const isSubpage = true;
 export const section = 'Examples';
 export const keywords = ['react-aria', 'example', 'gridlist', 'kanban', 'drag and drop', 'tailwind'];
 export const description = 'A kanban board with accessible drag and drop, styled with Tailwind CSS.';

packages/dev/s2-docs/pages/react-aria/examples/photos.mdx

@@ -6,6 +6,7 @@ import {ExampleApp} from '../../../src/ExampleApp';
 import {ComponentList} from '../../../src/ComponentCard';
 
 export const hideNav = true;
+export const isSubpage = true;
 export const section = 'Examples';
 export const keywords = ['react-aria', 'example', 'gridlist', 'autocomplete', 'searchfield', 'virtualizer', 'view transition', 'tree', 'selection', 'drag and drop', 'slider'];
 export const description = 'Virtualized photo grid, view transitions, folder tree, search, and drag and drop.';

packages/dev/s2-docs/pages/react-aria/examples/ripple-button.mdx

@@ -5,6 +5,7 @@ import '../../../tailwind/tailwind.css';
 import {ComponentList} from '../../../src/ComponentCard';
 
 export const hideNav = true;
+export const isSubpage = true;
 export const section = 'Examples';
 export const keywords = ['react-aria', 'example', 'button', 'tailwind'];
 export const description = 'A button with an animated ripple effect styled with Tailwind CSS.';

packages/dev/s2-docs/pages/react-aria/examples/sheet.mdx

@@ -5,6 +5,7 @@ import '../../../tailwind/tailwind.css';
 import {ComponentList} from '../../../src/ComponentCard';
 
 export const hideNav = true;
+export const isSubpage = true;
 export const section = 'Examples';
 export const keywords = ['react-aria', 'example', 'dialog', 'modal', 'sheet', 'motion', 'tailwind'];
 export const description = 'An iOS-style gesture driven modal sheet built with Framer Motion.';