docs: fix og images and descriptions (#8990)

* fix og:image links

* fix font in SVG rendering

* make logo dynamic

* more name aliases for illustrations

* Revert "fix font in SVG rendering"

This reverts commit dd53fbc.

* try inlining fonts in svg

* Revert "try inlining fonts in svg"

This reverts commit 8b3fa87.

* generate images for index pages

* generate images for pages without illustrations

* try installing fonts in CI

* switch fonts

* remove font install from CI

* try inlining font-face and pre-rendering illustration as png

* Revert "try inlining font-face and pre-rendering illustration as png"

This reverts commit 5b6c002.

* try using fontconfig in CI

* update command

* more CI updates

* strip out version badge from title

* remove illustration SVGs for now

* improve gap

* layout improvements

* skip error page

* add Internationalized to library in name

* fix page title in Internationalized

* improve titles and descriptions

* improve titles for index pages and explicit custom titles

Author: reidbarber

packages/dev/s2-docs/pages/error.mdx

@@ -5,5 +5,6 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 
 export const hideFromSearch = true;
+export const description = 'Page not found';
 
 <Error />

packages/dev/s2-docs/pages/internationalized/date/index.mdx

@@ -13,6 +13,8 @@ export default Layout;
 import {InstallCommand} from '../../../src/InstallCommand';
 
 export const section = 'Date and Time';
+export const pageTitle = 'Internationalized | Date and Time';
+export const description = 'Introduction to @internationalized/date';
 
 # Introduction
 

packages/dev/s2-docs/pages/internationalized/number/index.mdx

@@ -13,6 +13,8 @@ export default Layout;
 import {InstallCommand} from '../../../src/InstallCommand';
 
 export const section = 'Numbers';
+export const pageTitle = 'Internationalized | Numbers';
+export const description = 'Introduction to @internationalized/number';
 
 # Introduction
 

packages/dev/s2-docs/pages/react-aria/collections.mdx

@@ -5,6 +5,7 @@ import docs from 'docs:react-aria-components';
 import {InlineAlert, Heading, Content} from '@react-spectrum/s2'
 
 export const section = 'Guides';
+export const description = 'Implementing collections in React Aria';
 
 # Collections
 

packages/dev/s2-docs/pages/react-aria/dnd.mdx

@@ -13,6 +13,7 @@ import {PokemonListBox} from './PokemonListBox';
 import {PokemonGridList} from './PokemonGridList';
 
 export const section = 'Guides';
+export const description = 'Implementing drag and drop in React Aria';
 
 # Drag and Drop
 

packages/dev/s2-docs/pages/react-aria/selection.mdx

@@ -4,6 +4,7 @@ export default Layout;
 import docs from 'docs:react-aria-components';
 
 export const section = 'Guides';
+export const description = 'Implementing selection in React Aria';
 
 # Selection
 

packages/dev/s2-docs/pages/react-aria/styling.mdx

@@ -5,6 +5,7 @@ export default Layout;
 import {Disclosure, DisclosureTitle, DisclosurePanel} from '@react-spectrum/s2';
 
 export const section = 'Guides';
+export const description = 'Styling in React Aria';
 
 # Styling
 

packages/dev/s2-docs/pages/s2/collections.mdx

@@ -3,8 +3,8 @@ import {InlineAlert, Heading, Content} from '@react-spectrum/s2';
 export default Layout;
 
 export const section = 'Guides';
-
 export const tags = ['lists'];
+export const description = 'Implementing collections in React Spectrum';
 
 # Collections
 

packages/dev/s2-docs/pages/s2/dnd.mdx

@@ -3,8 +3,8 @@ import {InlineAlert, Heading, Content} from '@react-spectrum/s2';
 export default Layout;
 
 export const section = 'Guides';
-
 export const tags = ['drag', 'drop'];
+export const description = 'Implementing drag and drop in React Spectrum';
 
 # Drag and Drop
 

packages/dev/s2-docs/pages/s2/getting-started.mdx

@@ -6,6 +6,7 @@ import {SegmentedControl, SegmentedControlItem} from '@react-spectrum/s2';
 
 export const section = 'Getting started';
 export const tags = ['introduction', 'installation'];
+export const description = 'Getting started with React Spectrum';
 
 # Getting started