docs: Refine typography (#9216)

* docs: Refine typography

* Mark examples as sub-pages

* Use text-wrap: balance

* widen layout, improve spacing and wrapping, add SEO tags

* Fix root page

* revert changes to link props

* fix

* Update skeleton

* Add RSS feeds

* fix

* Use serif font for body text

Author: devongovett

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/docs/pages/assets/rtl-actual-placeholder.svg

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

packages/dev/docs/pages/assets/rtl-timefield.svg

@@ -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/ColorEditorExample.tsx

@@ -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/SubmenuAnimation.tsx

@@ -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/accessible-color-descriptions.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.